Feat/table search feature

.vscode/settings.json

@@ -2,8 +2,8 @@
   "cSpell.words": ["Puik", "puik"],
   "typescript.tsdk": "node_modules/typescript/lib",
   "editor.codeActionsOnSave": {
-    "source.fixAll": false,
-    "source.fixAll.eslint": false
+    "source.fixAll": "never",
+    "source.fixAll.eslint": "explicit"
   },
   "npm.packageManager": "pnpm",
   "eslint.probe": [

packages/components/input/src/input.ts

@@ -2,17 +2,15 @@ import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Input from './input.vue'
 
-export const inputTypes = [
-  'text',
-  'password',
-  'email',
-  'number',
-  'search',
-  'url',
-  'tel',
-] as const
-
-export type PuikInputType = (typeof inputTypes)[number]
+export enum PuikInputTypes {
+  Text = 'text',
+  Password = 'password',
+  Email = 'email',
+  Number = 'number',
+  Search = 'search',
+  Url = 'url',
+  Phone = 'tel',
+}
 
 export const inputProps = buildProps({
   modelValue: {
@@ -21,9 +19,9 @@ export const inputProps = buildProps({
     default: '',
   },
   type: {
-    type: String as PropType<PuikInputType>,
+    type: String as PropType<PuikInputTypes>,
     required: false,
-    default: 'text',
+    default: PuikInputTypes.Text,
   },
   id: {
     type: String,

packages/components/table-search-input/style/css.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style/css'
+import '@puik/theme/puik-table-search-input.css'

packages/components/table-search-input/style/index.ts

@@ -0,0 +1,2 @@
+import '@puik/components/base/style'
+import '@puik/theme/src/table-search-input.scss'

packages/components/table/index.ts

@@ -1,8 +1,12 @@
 import { withInstall } from '@puik/utils'
 
 import Table from './src/table.vue'
+import TableSearchInput from './src/table-search-input.vue'
 
 export const PuikTable = withInstall(Table)
+export const PuikTableSearchInput = withInstall(TableSearchInput)
+
 export default PuikTable
 
 export * from './src/table'
+export * from './src/table-search-input'

packages/components/table/src/table-search-input.ts

@@ -0,0 +1,53 @@
+import { buildProps } from '@puik/utils'
+import type { ExtractPropTypes, PropType } from 'vue'
+import type TableSearchInput from './table-search-input.vue'
+
+export enum PuikTableSearchInputTypes {
+  Text = 'text',
+  Range = 'range',
+}
+
+export type inputRange = {
+  min?: number
+  max?: number
+}
+
+export type searchOption = {
+  searchBy: string
+  inputText?: string
+  inputRange?: inputRange
+}
+
+export const tableSearchInputProps = buildProps({
+  name: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  column: {
+    type: String,
+    required: false,
+    default: '',
+  },
+  searchSubmit: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  searchReset: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  searchType: {
+    type: String as PropType<PuikTableSearchInputTypes>,
+    required: false,
+    default: PuikTableSearchInputTypes.Text,
+  },
+} as const)
+
+export type TableSearchInputProps = ExtractPropTypes<
+  typeof tableSearchInputProps
+>
+
+export type TableSearchInputInstance = InstanceType<typeof TableSearchInput>

packages/components/table/src/table-search-input.vue

@@ -0,0 +1,117 @@
+<template>
+  <div class="puik-table__head__row__item__container">
+    <div
+      class="puik-table__head__row__item__content puik-table-search-input__content"
+    >
+      <PuikInput
+        v-if="
+          !props.searchSubmit &&
+          props.searchType === PuikTableSearchInputTypes.Text
+        "
+        v-model="inputTextValue"
+        :type="PuikInputTypes.Text"
+        :placeholder="t('puik.table.search')"
+        @update:model-value="sendTextValue(props.column, inputTextValue)"
+      />
+      <div
+        v-if="
+          !props.searchSubmit &&
+          props.searchType === PuikTableSearchInputTypes.Range
+        "
+        class="puik-table-search-input--range"
+      >
+        <PuikInput
+          v-model="inputMinValue"
+          :type="PuikInputTypes.Number"
+          :placeholder="t('puik.table.min')"
+          @update:model-value="
+            sendRangeValue(props.column, inputMinValue, inputMaxValue)
+          "
+        />
+        <PuikInput
+          v-model="inputMaxValue"
+          :type="PuikInputTypes.Number"
+          :placeholder="t('puik.table.max')"
+          @update:model-value="
+            sendRangeValue(props.column, inputMinValue, inputMaxValue)
+          "
+        />
+      </div>
+      <template v-if="props.searchSubmit">
+        <div class="puik-table-search-input--submit">
+          <puik-button left-icon="search" @click="$emit('searchSubmitEvent')">
+            {{ t('puik.table.search') }}
+          </puik-button>
+          <div
+            v-if="props.searchReset"
+            class="puik-table-search-input--reset"
+            @click="$emit('searchResetEvent')"
+          >
+            <puik-button left-icon="close" variant="text" size="sm">
+              {{ t('puik.table.reset') }}
+            </puik-button>
+          </div>
+        </div>
+      </template>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue'
+import { useLocale } from '@puik/hooks'
+import { PuikButton } from '@puik/components/button'
+import { PuikInput, PuikInputTypes } from '@puik/components/input'
+import {
+  tableSearchInputProps,
+  PuikTableSearchInputTypes,
+} from './table-search-input'
+import type { searchOption, inputRange } from './table-search-input'
+defineOptions({
+  name: 'PuikTableSearchInput',
+})
+
+const props = defineProps(tableSearchInputProps)
+
+const emit = defineEmits<{
+  (e: 'searchTextValue', column: searchOption): void
+  (e: 'searchRangeValue', column: searchOption): void
+  (e: 'searchSubmitEvent'): void
+  (e: 'searchResetEvent'): void
+}>()
+
+const { t } = useLocale()
+
+const inputTextValue = ref<string>()
+const inputMinValue = ref<number>()
+const inputMaxValue = ref<number>()
+
+const sendTextValue = (column: string, textValue?: string) => {
+  const searchOption: searchOption = {
+    searchBy: column,
+    inputText: textValue,
+  }
+  emit('searchTextValue', searchOption)
+}
+
+const sendRangeValue = (
+  column: string,
+  minValue?: number | string,
+  maxValue?: number | string
+) => {
+  minValue === '' || minValue === undefined
+    ? (minValue = Number.NEGATIVE_INFINITY)
+    : minValue
+  maxValue === '' || maxValue === undefined
+    ? (maxValue = Number.POSITIVE_INFINITY)
+    : maxValue
+  const searchOption: searchOption = {
+    searchBy: column,
+    inputRange: {
+      min: minValue,
+      max: maxValue,
+    } as inputRange,
+  }
+  emit('searchRangeValue', searchOption)
+}
+</script>

packages/components/table/src/table.ts

@@ -1,6 +1,7 @@
 import { buildProps } from '@puik/utils'
 import type { ExtractPropTypes, PropType } from 'vue'
 import type Table from './table.vue'
+import type { PuikTableSearchInputTypes } from '../src/table-search-input'
 
 export enum PuikTableSortOrder {
   Asc = 'ASC',
@@ -31,6 +32,9 @@ export interface PuikTableHeader {
   width?: string
   sortable?: boolean
   preventExpand?: boolean
+  searchable?: boolean
+  searchSubmit?: boolean
+  searchType?: `${PuikTableSearchInputTypes}`
 }
 
 export const tableProps = buildProps({
@@ -58,6 +62,16 @@ export const tableProps = buildProps({
     required: false,
     default: () => [],
   },
+  searchBar: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+  searchFromServer: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
   sortFromServer: {
     type: Boolean,
     required: false,