Merge branch 'main' into feat/new-monorepo

PrestaShopCorp · Jan 23, 2024 · b957f5e · b957f5e
2 parents e3d93a2 + a0d6e5b
commit b957f5e
Show file tree

Hide file tree

Showing 5 changed files with 73 additions and 71 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/src/table-search-input.vue b/packages/components/table/src/table-search-input.vue
@@ -1,66 +1,64 @@
 <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">
+      />
+    </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="search"
-            @click="$emit('searchSubmitEvent')"
+            left-icon="close"
+            variant="text"
+            size="sm"
           >
-            {{ t('puik.table.search') }}
+            {{ 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
@@ -153,20 +153,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/puik/component.ts b/packages/puik/component.ts
@@ -52,7 +52,6 @@ import type { Component } from 'vue';
 
 // prettier-ignore
 export default [
-  PuikTableSearchInput,
   PuikAvatar,
   PuikDivider,
   PuikSkeletonLoader,
@@ -66,7 +65,6 @@ export default [
   PuikTabNavigation,
   PuikProgressStepper,
   PuikProgressStepperStep,
-  PuikTable,
   PuikSpinnerLoader,
   PuikSidebar,
   PuikSidebarGroupItem,
@@ -92,6 +90,8 @@ export default [
   PuikLabel,
   PuikRadio,
   PuikInput,
+  PuikTableSearchInput,
+  PuikTable,
   PuikCheckbox,
   PuikOption,
   PuikSelect,

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