fix: [table] #300 PuikInputSearch style does not apply

PrestaShopCorp · Jan 22, 2024 · e2959fb · e2959fb
1 parent e5aa555
commit e2959fb
Show file tree

Hide file tree

Showing 11 changed files with 75 additions and 68 deletions.
diff --git a/packages/components/snackbar/stories/snackbar-use.stories.mdx b/packages/components/snackbar/stories/snackbar-use.stories.mdx
@@ -33,7 +33,7 @@ interface PuikSnackbarOptions {
 </template>
 
 <script setup lang="ts">
-  improt { PuikSnackbar } from '@prestashopcorp/puik'
+  import { PuikSnackbar } from '@prestashopcorp/puik'
   function displaySnackbar() {
     PuikSnackbar({
       text: 'Text to display',
@@ -48,12 +48,12 @@ interface PuikSnackbarOptions {
 </template>
 
 <script setup lang="ts">
-  improt { PuikSnackbar } from '@prestashopcorp/puik'
+  import { PuikSnackbar } from '@prestashopcorp/puik'
   function displaySnackbar() {
     PuikSnackbar({
       text: 'Text to display',
       variant: 'danger',
-      durantion: 1000
+      durantion: 1000,
     })
   }
 </script>

diff --git a/packages/components/table-search-input/style/css.ts b/packages/components/table-search-input/style/css.ts
@@ -1,2 +1,3 @@
 import '@puik/components/base/style/css'
+import '@puik/theme/puik-input.css'
 import '@puik/theme/puik-table-search-input.css'
diff --git a/packages/components/table-search-input/style/index.ts b/packages/components/table-search-input/style/index.ts
@@ -1,2 +1,3 @@
 import '@puik/components/base/style'
+import '@puik/theme/src/input.scss'
 import '@puik/theme/src/table-search-input.scss'
diff --git a/packages/components/table/src/table-search-input.vue b/packages/components/table/src/table-search-input.vue
@@ -1,59 +1,57 @@
 <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
-      class="puik-table__head__row__item__content puik-table-search-input__content"
+      v-if="
+        !props.searchSubmit &&
+        props.searchType === PuikTableSearchInputTypes.Range
+      "
+      class="puik-table-search-input--range"
     >
       <PuikInput
-        v-if="
-          !props.searchSubmit &&
-          props.searchType === PuikTableSearchInputTypes.Text
+        v-model="inputMinValue"
+        :type="PuikInputTypes.Number"
+        :placeholder="t('puik.table.min')"
+        @update:model-value="
+          sendRangeValue(props.column, inputMinValue, inputMaxValue)
         "
-        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
+      <PuikInput
+        v-model="inputMaxValue"
+        :type="PuikInputTypes.Number"
+        :placeholder="t('puik.table.max')"
+        @update:model-value="
+          sendRangeValue(props.column, inputMinValue, inputMaxValue)
         "
-        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') }}
+      />
+    </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
-            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>
   </div>
 </template>
 

diff --git a/packages/components/table/src/table.vue b/packages/components/table/src/table.vue
@@ -151,20 +151,23 @@
             ]"
             :style="{ minWidth: header.width, width: header.width }"
           >
-            <PuikTableSearchInput
-              v-if="header.searchable || header.searchSubmit"
-              :key="`search-${header.value}-${searchInputKey}`"
-              :name="`search-${header.value}`"
-              :column="header.value"
-              :search-submit="header.searchSubmit"
-              :search-reset="searchReset"
-              :search-type="(header.searchType as PuikTableSearchInputTypes)"
-              @search-text-value="handleSearch"
-              @search-range-value="handleSearch"
-              @search-submit-event="handleSearchSubmit"
-              @search-reset-event="handleSearchReset"
-              @keyup.enter="handleSearchSubmit"
-            />
+            <template v-if="header.searchable || header.searchSubmit">
+              <div class="puik-table__head__row__item__container">
+                <PuikTableSearchInput
+                  :key="`search-${header.value}-${searchInputKey}`"
+                  :name="`search-${header.value}`"
+                  :column="header.value"
+                  :search-submit="header.searchSubmit"
+                  :search-reset="searchReset"
+                  :search-type="(header.searchType as PuikTableSearchInputTypes)"
+                  @search-text-value="handleSearch"
+                  @search-range-value="handleSearch"
+                  @search-submit-event="handleSearchSubmit"
+                  @search-reset-event="handleSearchReset"
+                  @keyup.enter="handleSearchSubmit"
+                />
+              </div>
+            </template>
           </th>
         </tr>
       </thead>

diff --git a/packages/components/table/style/css.ts b/packages/components/table/style/css.ts
@@ -1,3 +1,4 @@
 import '@puik/components/base/style/css'
 import '@puik/theme/puik-table.css'
 import '@puik/theme/puik-checkbox.css'
+import '@puik/theme/puik-table-search-input.css'
diff --git a/packages/components/table/style/index.ts b/packages/components/table/style/index.ts
@@ -1,3 +1,4 @@
 import '@puik/components/base/style'
 import '@puik/theme/src/table.scss'
 import '@puik/theme/src/checkbox.scss'
+import '@puik/theme/src/table-search-input.scss'
diff --git a/packages/puik/component.ts b/packages/puik/component.ts
@@ -12,7 +12,6 @@ import {
   PuikProgressStepper,
   PuikProgressStepperStep,
 } from '@puik/components/progress-stepper'
-import { PuikTable, PuikTableSearchInput } from '@puik/components/table'
 import { PuikSpinnerLoader } from '@puik/components/spinner-loader'
 import {
   PuikSidebar,
@@ -47,12 +46,12 @@ import { PuikTooltip } from '@puik/components/tooltip'
 import { PuikSwitch } from '@puik/components/switch'
 import { PuikButton } from '@puik/components/button'
 import { PuikInput } from '@puik/components/input'
+import { PuikTable, PuikTableSearchInput } from '@puik/components/table'
 import { PuikConfigProvider } from '@puik/components/config-provider'
 import type { Plugin } from 'vue'
 
 // prettier-ignore
 export default [
-  PuikTableSearchInput,
   PuikAvatar,
   PuikDivider,
   PuikTag,
@@ -63,7 +62,6 @@ export default [
   PuikTabNavigation,
   PuikProgressStepper,
   PuikProgressStepperStep,
-  PuikTable,
   PuikSpinnerLoader,
   PuikSidebar,
   PuikSidebarGroupItem,
@@ -89,6 +87,8 @@ export default [
   PuikLabel,
   PuikRadio,
   PuikInput,
+  PuikTableSearchInput,
+  PuikTable,
   PuikCheckbox,
   PuikOption,
   PuikSelect,

diff --git a/packages/theme/src/input.scss b/packages/theme/src/input.scss
@@ -1,4 +1,5 @@
 @use './common/typography.scss';
+
 .puik-input {
   @apply flex flex-col;
   &__wrapper {

diff --git a/packages/theme/src/table-search-input.scss b/packages/theme/src/table-search-input.scss
@@ -1,3 +1,5 @@
+@use './input.scss';
+
 .puik-table-search-input--submit {
   @apply relative cursor-pointer;
   .puik-table-search-input--reset {

diff --git a/typings/global.d.ts b/typings/global.d.ts
@@ -2,7 +2,6 @@
 declare module '@vue/runtime-core' {
   export interface GlobalComponents {
     PuikTableSearchInput: typeof import('@prestashopcorp/puik')['PuikTableSearchInput']
-    PuikTableSearchBar: typeof import('@prestashopcorp/puik')['PuikTableSearchBar']
     PuikAvatar: typeof import('@prestashopcorp/puik')['PuikAvatar']
     PuikDivider: typeof import('@prestashopcorp/puik')['PuikDivider']
     PuikTag: typeof import('@prestashopcorp/puik')['PuikTag']