feat: [Select] - related #384 - add translations, style(wip), add new…

… props(disabled feature)

packages/components/option/style/css.ts

@@ -1,3 +1,4 @@
 import '@prestashopcorp/puik-components/base/style/css';
 import '@prestashopcorp/puik-theme/puik-option.css';
+import '@prestashopcorp/puik-theme/puik-checkbox.css';
 import '@prestashopcorp/puik-theme/puik-icon.css';

packages/components/select/src/option.ts

@@ -6,8 +6,10 @@ export interface OptionType {
 }
 export interface OptionProps {
   option: OptionType
-  labelKey: string
-  valueKey: string
+  labelKey?: string
+  valueKey?: string
+  disabledKey?: string
+  disabled?: boolean
   selectedOptions: OptionType[]
   multiSelect?: boolean
 }

packages/components/select/src/option.vue

@@ -2,12 +2,14 @@
   <div
     :class="[
       'puik-option',
-      { 'puik-option-single--selected' : isSelected && !props.multiSelect}
+      { 'puik-option-single--selected' : isSelected && !props.multiSelect},
+      { 'puik-option--disabled' : props.disabled },
     ]"
   >
     <template v-if="props.multiSelect">
       <PuikCheckbox
         v-model="isSelected"
+        :disabled="disabled"
         :sr-label="option[props.labelKey]"
         @change="selectOption"
       />
@@ -35,6 +37,10 @@ defineOptions({
 });
 
 const props = withDefaults(defineProps<OptionProps>(), {
+  labelKey: 'label',
+  valueKey: 'value',
+  disabledKey: 'disabled',
+  disabled: false,
   multiSelect: false,
   selectedOptions: () => { return []; }
 });
@@ -46,11 +52,15 @@ const isSelected = computed(() => {
 });
 
 const selectOption = () => {
-  emit('select', props.option);
+  if (props.disabled) {
+    emit('select', props.option);
+  }
 };
 </script>
 
 <style lang="scss">
 @use '@prestashopcorp/puik-theme/src/base.scss';
 @use '@prestashopcorp/puik-theme/src/puik-option.scss';
+@use '@prestashopcorp/puik-theme/src/puik-checkbox.scss';
+@use '@prestashopcorp/puik-theme/src/puik-icon.scss';
 </style>

packages/components/select/src/select.ts

@@ -3,11 +3,15 @@ import type Select from './select.vue';
 import type { OptionType } from './option';
 export interface SelectProps {
   options: OptionType[]
-  labelKey: string
-  valueKey: string
+  optionLabelKey?: string
+  optionValueKey?: string
+  optionDisabledKey?: string
   modelValue: any
   multiSelect?: boolean
   searchable?: boolean
+  placeholder?: string
+  searchPlaceholder?: string
+  noMatchText?: string
   disabled?: boolean
   error?: string
 }

packages/components/select/src/select.vue

@@ -16,9 +16,9 @@
         />
         <puik-chip
           v-for="option in selectedOptions"
-          :id="`chip-${option[props.labelKey]}`"
-          :key="option[props.valueKey]"
-          :content="option[props.labelKey]"
+          :id="`chip-${option[props.optionLabelKey]}`"
+          :key="option[props.optionValueKey]"
+          :content="option[props.optionLabelKey]"
           size="small"
           @close="deselectOption(option)"
           @click.stop="openOptions"
@@ -28,7 +28,7 @@
         v-else
         class="puik-select__multiple-input"
         type="text"
-        placeholder="Select an option"
+        :placeholder="props.placeholder ?? defaultPlaceholder"
         readonly
         @click.stop="toggleOptions"
       >
@@ -41,7 +41,7 @@
       v-else
       v-model="selectedSingleOption"
       type="text"
-      placeholder="Select an option"
+      :placeholder="props.placeholder ?? defaultPlaceholder"
       readonly
       @click.stop="toggleOptions"
     />
@@ -54,7 +54,7 @@
         v-model="searchQuery"
         class="puik-select__search-input"
         type="text"
-        placeholder="Search..."
+        :placeholder="props.searchPlaceholder ?? defaultSearchPlaceholder"
         @input="searchOptions"
       >
         <template #prepend>
@@ -63,19 +63,20 @@
       </puik-input>
       <PuikCheckbox
         v-if="multiSelect"
-        v-model="isAllSelected"
+        v-model="internalIsAllSelected"
         class="puik-select__select-all"
-        :label="isAllSelected ? 'Deselect All' : 'Select All'"
+        :label="isAllSelected ? `${t('puik.select.deselectAll')}` : `${t('puik.select.selectAll')}`"
         :indeterminate="selectAllIndeterminate"
         @change="toggleSelectAll"
       />
       <puik-option
         v-for="option in filteredOptions"
-        :key="option[props.valueKey]"
-        :label-key="labelKey"
-        :value-key="valueKey"
+        :key="option[props.optionValueKey]"
+        :label-key="props.optionLabelKey"
+        :value-key="props.optionValueKey"
         :selected-options="selectedOptions"
         :option="option"
+        :disabled="option[props.optionDisabledKey]"
         :multi-select="props.multiSelect"
         @click="selectOption(option)"
       />
@@ -84,8 +85,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { vOnClickOutside } from '@vueuse/components';
+import { useLocale } from '@prestashopcorp/puik-locale';
 import { PuikCheckbox, PuikChip, PuikIcon, PuikInput, PuikOption } from '@prestashopcorp/puik-components';
 import type { OptionType } from './option';
 import type { SelectProps } from './select';
@@ -94,7 +96,14 @@ defineOptions({
   name: 'PuikSelect'
 });
 
+const { t } = useLocale();
+const defaultPlaceholder = t('puik.select.placeholder');
+const defaultSearchPlaceholder = t('puik.select.searchPlaceholder');
+
 const props = withDefaults(defineProps<SelectProps>(), {
+  optionLabelKey: 'label',
+  optionValueKey: 'value',
+  optionDisabledKey: 'disabled',
   multiSelect: false
 });
 
@@ -109,11 +118,17 @@ const selectedSingleOption = computed(() => {
   return selectedOptions.value.length > 0 ? selectedOptions.value[0].label : '';
 });
 const filteredOptions = computed(() => {
-  return props.options.filter(option => option.label.includes(searchQuery.value));
+  if (props.options) {
+    return props.options.filter(option => option.label.includes(searchQuery.value));
+  } else {
+    return null;
+  }
 });
 const isAllSelected = computed(() => {
   return selectedOptions.value.length === props.options.length;
 });
+const internalIsAllSelected = ref(isAllSelected.value);
+
 const updateSelectAllIndeterminate = () => {
   selectAllIndeterminate.value = selectedOptions.value.length > 0 && selectedOptions.value.length < props.options.length;
 };
@@ -127,19 +142,22 @@ const closeOptions = () => {
   showOptions.value = false;
 };
 const selectOption = (option: any) => {
-  if (props.multiSelect) {
-    if (selectedOptions.value.includes(option)) {
-      selectedOptions.value = selectedOptions.value.filter(opt => opt !== option);
+  if (!option[props.optionDisabledKey]) {
+    if (props.multiSelect) {
+      if (selectedOptions.value.includes(option)) {
+        selectedOptions.value = selectedOptions.value.filter(opt => opt !== option);
+      } else {
+        selectedOptions.value.push(option);
+      }
+      updateSelectAllIndeterminate();
     } else {
-      selectedOptions.value.push(option);
+      selectedOptions.value = [option];
+      showOptions.value = false;
     }
-    updateSelectAllIndeterminate();
-  } else {
-    selectedOptions.value = [option];
-    showOptions.value = false;
+    emit('update:modelValue', selectedOptions.value);
   }
-  emit('update:modelValue', selectedOptions.value);
 };
+
 const deselectOption = (option: OptionType) => {
   selectedOptions.value = selectedOptions.value.filter(opt => opt !== option);
   updateSelectAllIndeterminate();
@@ -157,10 +175,18 @@ const toggleSelectAll = () => {
 const searchOptions = () => {
   emit('search', searchQuery.value);
 };
+
+watch(isAllSelected, (newValue) => {
+  internalIsAllSelected.value = newValue;
+});
 </script>
 
 <style lang="scss">
 @use '@prestashopcorp/puik-theme/src/base.scss';
 @use '@prestashopcorp/puik-theme/src/puik-select.scss';
 @use '@prestashopcorp/puik-theme/src/puik-option.scss';
+@use '@prestashopcorp/puik-theme/src/puik-checkbox.scss';
+@use '@prestashopcorp/puik-theme/src/puik-chip.scss';
+@use '@prestashopcorp/puik-theme/src/puik-icon.scss';
+@use '@prestashopcorp/puik-theme/src/puik-input.scss';
 </style>

packages/components/select/style/css.ts

@@ -1,4 +1,7 @@
 import '@prestashopcorp/puik-components/base/style/css';
 import '@prestashopcorp/puik-theme/puik-select.css';
-import '@prestashopcorp/puik-theme/puik-input.css';
+import '@prestashopcorp/puik-theme/puik-option.css';
+import '@prestashopcorp/puik-theme/puik-checkbox.css';
+import '@prestashopcorp/puik-theme/puik-chip.css';
 import '@prestashopcorp/puik-theme/puik-icon.css';
+import '@prestashopcorp/puik-theme/puik-input.css';

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

@@ -120,6 +120,7 @@ const sendRangeValue = (
 </script>
 
 <style lang="scss">
+@use '@prestashopcorp/puik-theme/src/puik-button.scss';
 @use '@prestashopcorp/puik-theme/src/puik-input.scss';
 @use '@prestashopcorp/puik-theme/src/puik-icon.scss';
 </style>

packages/locale/lang/en.ts

@@ -21,8 +21,11 @@ export default {
       readonly: 'Read\xa0only'
     },
     select: {
-      searchPlaceholder: 'Search',
-      noResults: 'No results matched'
+      placeholder: 'Select on option',
+      searchPlaceholder: 'Search...',
+      noResults: 'No results matched',
+      selectAll: 'Select all',
+      deselectAll: 'Deselect all'
     },
     table: {
       expandableHeaderLabel: 'header column for the expandable rows feature',

packages/locale/lang/fr.ts

@@ -20,8 +20,11 @@ export default {
       readonly: 'Lecture uniquement'
     },
     select: {
-      searchPlaceholder: 'Chercher',
-      noResults: 'Aucun résultat'
+      placeholder: 'Select on option',
+      searchPlaceholder: 'Chercher...',
+      noResults: 'Aucun résultat',
+      selectAll: 'Tout sélectionnner',
+      deselectAll: 'Tout déselectionner'
     },
     table: {
       expandableHeaderLabel: 'colonne d\'en-tête pour la fonctionnalité de lignes extensibles',

packages/theme/src/puik-option.scss

@@ -1,5 +1,5 @@
 .puik-option {
-  @apply px-3 py-2 flex justify-between space-x-2 relative cursor-default select-none  text-primary-800 transition-colors;
+  @apply px-3 py-2 flex justify-start space-x-2 relative cursor-default select-none  text-primary-800 transition-colors;
   &-single--selected {
     @apply bg-primary-300;
   }
@@ -13,7 +13,7 @@
     @apply bg-white;
   }
   &--disabled {
-    @apply bg-white text-primary-300 pointer-events-none;
+    @apply bg-white text-primary-500 cursor-not-allowed;
   }
   &__label {
     @apply font-primary font-normal block truncate;

packages/theme/src/puik-select.scss

@@ -26,9 +26,9 @@
     focus-visible:outline-none sm:text-sm overflow-x-hidden;
   }
   &__select-all {
-    @apply px-3 py-2 flex relative select-none text-primary-800 transition-colors;
+    @apply px-3 flex relative select-none text-primary-800 transition-colors;
     label {
-      @apply grow cursor-default;
+      @apply min-h-9 flex items-center grow cursor-default;
     }
     &--selected {
       @apply bg-primary-300;
@@ -52,7 +52,4 @@
   &__search-input {
     @apply px-3 py-2;
   }
-  label {
-    @apply font-primary font-normal block truncate;
-  }
 }