sprintify-ui 0.0.150 → 0.0.151

package/dist/types/src/components/BaseIconPicker.vue.d.ts

@@ -1,19 +1,24 @@
 declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | null | undefined;
     collection?: string | undefined;
+    maxWidth?: string | undefined;
 }>, {
     modelValue: null;
     collection: string;
+    maxWidth: string;
 }>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:modelValue"[], "update:modelValue", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
     modelValue?: string | null | undefined;
     collection?: string | undefined;
+    maxWidth?: string | undefined;
 }>, {
     modelValue: null;
     collection: string;
+    maxWidth: string;
 }>>> & {
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
 }, {
     modelValue: string | null;
+    maxWidth: string;
     collection: string;
 }>;
 export default _default;

package/dist/types/src/index.d.ts

@@ -49,6 +49,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            search: string;
             see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
@@ -116,6 +117,7 @@ declare const messages: {
             remove: string;
             remove_file: string;
             remove_file_description: string;
+            search: string;
             see_all_notifications: string;
             select_an_item: string;
             select_an_option: string;
@@ -196,6 +198,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                search: string;
                 see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;
@@ -263,6 +266,7 @@ declare const config: {
                 remove: string;
                 remove_file: string;
                 remove_file_description: string;
+                search: string;
                 see_all_notifications: string;
                 select_an_item: string;
                 select_an_option: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.150",
+  "version": "0.0.151",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseIconPicker.vue

@@ -1,9 +1,15 @@
 <template>
-  <div class="w-full max-w-[268px] overflow-hidden rounded border bg-white">
-    <div class="flex w-full min-w-0 overflow-hidden px-3 pt-3">
+  <div
+    class="w-full overflow-hidden rounded border bg-white"
+    :style="{
+      maxWidth: maxWidth,
+    }"
+  >
+    <div class="flex w-full min-w-0 overflow-hidden px-2 py-2">
       <select
         v-model="suffix"
-        class="max-w-[80px] shrink-0 rounded-l border-r-0 border-slate-300 text-xs focus:border-slate-300 focus:outline-none focus:ring-0"
+        class="max-w-[150px] shrink-0 rounded-l border-r-0 border-slate-300 py-1.5 pl-2 pr-6 focus:border-slate-300 focus:outline-none focus:ring-0 sm:text-sm"
+        @change="onSuffixChange"
       >
         <option v-for="(label, key) in suffixes" :key="key" :value="key">
           {{ label }}
@@ -13,12 +19,12 @@
       <input
         v-model="keywords"
         type="text"
-        :placeholder="$t('sui.autocomplete_placeholder')"
-        class="grow rounded-r border-slate-300 text-xs"
+        :placeholder="$t('sui.search') + '...'"
+        class="min-w-[40px] grow rounded-r border-slate-300 py-0 px-2 focus:border-blue-500 focus:ring-2 focus:ring-blue-300 sm:text-sm"
       />
     </div>
 
-    <div ref="drawer" class="h-44 overflow-y-auto py-2 px-3">
+    <div ref="drawer" class="h-44 overflow-y-auto px-2 pb-2">
       <ul class="flex flex-wrap">
         <li v-for="icon in filteredIcons" :key="icon">
           <button
@@ -27,7 +33,7 @@
             :class="[
               modelValue == icon
                 ? 'bg-primary-600 text-white'
-                : 'bg-white text-slate-900 hover:bg-slate-200',
+                : 'bg-white text-slate-800 hover:bg-slate-200',
             ]"
             class="flex items-center justify-center rounded p-1"
             @click="onClick(icon)"
@@ -47,10 +53,12 @@ const props = withDefaults(
   defineProps<{
     modelValue?: string | null;
     collection?: string;
+    maxWidth?: string;
   }>(),
   {
     modelValue: null,
     collection: 'heroicons',
+    maxWidth: '300px',
   }
 );
 
@@ -62,6 +70,11 @@ function onClick(icon: string) {
 
 const icons = ref<string[]>([]);
 const suffixes = ref<Record<string, string>>({});
+const orderedSuffixKeys = computed(() => {
+  return Object.keys(suffixes.value).sort((a, b) => {
+    return b.length - a.length;
+  });
+});
 const suffix = ref<string | null>(null);
 const otherSuffixValue = computed(() => {
   return Object.keys(suffixes.value).filter((s) => {
@@ -139,12 +152,8 @@ function selectCurrentSuffix() {
     return;
   }
 
-  const suffixesOrderedByLength = Object.keys(suffixes.value).sort((a, b) => {
-    return b.length - a.length;
-  });
-
-  for (let i = 0; i < suffixesOrderedByLength.length; i++) {
-    const s = suffixesOrderedByLength[i];
+  for (let i = 0; i < orderedSuffixKeys.value.length; i++) {
+    const s = orderedSuffixKeys.value[i];
 
     if (props.modelValue.endsWith(s)) {
       suffix.value = s;
@@ -174,6 +183,31 @@ function scrollToIcon() {
   drawer.value.scrollTop = icon.offsetTop - 10;
 }
 
+function onSuffixChange() {
+  nextTick(() => {
+    let iconWithoutSuffix = props.modelValue ?? '';
+
+    orderedSuffixKeys.value.forEach((s) => {
+      let completeSuffix = s;
+
+      if (completeSuffix != '') {
+        completeSuffix = '-' + completeSuffix;
+      }
+
+      const regex = new RegExp(completeSuffix + '$');
+
+      iconWithoutSuffix = iconWithoutSuffix.replace(regex, '');
+    });
+
+    let suffixToAdd = suffix.value;
+    if (suffixToAdd != '') {
+      suffixToAdd = '-' + suffixToAdd;
+    }
+
+    emit('update:modelValue', iconWithoutSuffix + suffixToAdd);
+  });
+}
+
 onMounted(() => {
   fetchIcons();
 });

package/src/lang/en.json

@@ -40,6 +40,7 @@
     "remove": "Remove",
     "remove_file": "Remove file?",
     "remove_file_description": "Are you sure you want to remove the file? This action is irreversible.",
+    "search": "Search",
     "see_all_notifications": "See all notifications",
     "select_an_item": "Select an item",
     "select_an_option": "Select an option",

package/src/lang/fr.json

@@ -40,6 +40,7 @@
     "remove": "Retirer",
     "remove_file": "Retirer le fichier?",
     "remove_file_description": "Voulez-vous vraiment supprimer le fichier ? \nCette action est irréversible.",
+    "search": "Rechercher",
     "see_all_notifications": "Voir toutes les notifications",
     "select_an_item": "Sélectionner un élément",
     "select_an_option": "Sélectionner une option",