[Component] Search

packages/components/index.ts

@@ -12,3 +12,4 @@ export * from './card'
 export * from './select'
 export * from './icon'
 export * from './progress-bar'
+export * from './search'

packages/components/search/index.ts

@@ -0,0 +1,8 @@
+import { withInstall } from '@puik/utils'
+
+import Search from './src/search.vue'
+
+export const PuikSearch = withInstall(Search)
+export default PuikSearch
+
+export * from './src/search'

packages/components/search/src/search.ts

@@ -0,0 +1,50 @@
+import { buildProps } from '@puik/utils'
+import { useLocale } from '@puik/hooks'
+import type { ExtractPropTypes } from 'vue'
+import type Search from './search.vue'
+const { t } = useLocale()
+
+export const searchProps = buildProps({
+  modelValue: {
+    type: [String, Number],
+    required: false,
+    default: '',
+  },
+  id: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  placeholder: {
+    type: String,
+    required: false,
+    default: t('puik.search.placeholder'),
+  },
+  disabled: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  name: {
+    type: String,
+    required: false,
+    default: undefined,
+  },
+  autocomplete: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  rounded: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+} as const)
+
+export type SearchProps = ExtractPropTypes<typeof searchProps>
+
+export const searchEmits = ['update:modelValue']
+export type SearchEmits = typeof searchEmits
+
+export type SearchInstance = InstanceType<typeof Search>

packages/components/search/src/search.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="puik-search">
+    <div class="puik-search__wrapper" :class="searchClasses">
+      <span class="puik-search__icon puik-h2">search</span>
+      <input
+        :id="id"
+        v-model="value"
+        class="puik-search__field"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :autocomplete="autocomplete"
+        :name="name"
+        @focus="handleFocus"
+        @blur="handleBlur"
+        @keyup.enter="sendContent"
+      />
+      <button
+        v-if="!disabled && value"
+        class="puik-search__cancel-icon puik-h2"
+        @click="deleteContent"
+      >
+        cancel
+      </button>
+      <div v-if="!autocomplete && !disabled" class="flex">
+        <puik-button
+          class="puik-search__confirm-icon"
+          size="sm"
+          variant="primary"
+          @click="sendContent"
+          >east</puik-button
+        >
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import PuikButton from '../../button/src/button.vue'
+import { searchEmits, searchProps } from './search'
+defineOptions({
+  name: 'PuikSearch',
+})
+const props = defineProps(searchProps)
+const emit = defineEmits(searchEmits)
+const isFocus = ref(false)
+
+const searchClasses = computed(() => ({
+  'puik-search__wrapper--focus': isFocus.value,
+  'puik-search__wrapper--disabled': props.disabled,
+  'puik-search__wrapper--rounded-input': props.rounded,
+}))
+
+const handleFocus = () => (isFocus.value = true)
+const handleBlur = () => (isFocus.value = false)
+
+const deleteContent = () => {
+  emit('update:modelValue', null)
+}
+
+const sendContent = () => {
+  emit('update:modelValue', value.value)
+}
+
+const value = computed<string | number>({
+  get() {
+    return props.modelValue
+  },
+  set(item) {
+    emit('update:modelValue', item)
+  },
+})
+</script>