quasar-ui-sellmate-ui-kit 3.14.38 → 3.14.40

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar-ui-sellmate-ui-kit",
-  "version": "3.14.38",
+  "version": "3.14.40",
   "author": "Sellmate Dev Team <dev@sellmate.co.kr>",
   "description": "Sellmate UI Kit",
   "license": "MIT",

package/src/components/SSelectSearch.vue

@@ -13,9 +13,11 @@
         's-select-opts s-select-opts__select-search',
         `s-select-opt-${id}`,
         isScrolled && 's-select-opts--scroll',
+        menuWidth && 'menu-fixed',
         popupContentClass,
       ].join(' ')
     "
+    :popup-content-style="menuWidth ? { '--dynamic-width': menuWidth + 'px' } : {}"
     :option-label="optionLabel"
     :option-value="optionValue"
     :menu-offset="[0, 4]"
@@ -49,7 +51,6 @@
         v-bind="itemProps"
         class="custom-select-options"
         :class="{ 'custom-select-options--selected': selectedOptionIndex === index }"
-        @click="selectedOptionIndex = index"
       >
         <q-item-section>
           {{ opt[optionLabel] }}
@@ -125,6 +126,10 @@
       popupContentClass: {
         type: String,
       },
+      menuWidth: {
+        type: [String, Number, null],
+        default: null,
+      },
     },
     setup(props, { emit }) {
       const id = useId();
@@ -176,6 +181,7 @@
 
       function handleDelete() {
         if (!sSelectRef.value) return;
+        selectedOptionIndex.value = -1;
         sSelectRef.value.setOptionIndex(-1);
         search.value = '';
         emit('onSearch', '');
@@ -202,6 +208,7 @@
       watch(
         () => model.value,
         newValue => {
+          handleDelete();
           emit('update:modelValue', newValue);
         },
       );
@@ -280,6 +287,7 @@
       width: 100%;
       padding: $select-padding !important;
       color: $grey_90;
+
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
@@ -307,8 +315,12 @@
     }
 
     .q-virtual-scroll__content .q-manual-focusable--focused {
-      background-color: transparent !important;
       color: $grey_90 !important;
+      background-color: transparent !important;
+    }
+
+    .q-item--active.q-manual-focusable--focused {
+      color: $brilliantblue_75 !important;
     }
 
     .q-virtual-scroll__content .custom-select-options {
@@ -320,7 +332,8 @@
     }
   }
   .custom-select-options {
-    height: $default-height;
+    min-height: $default-height;
+    height: auto !important;
   }
 
   .disabled.s-select-option {
@@ -328,4 +341,17 @@
     background: none !important;
     color: $grey_65 !important;
   }
+
+  .q-item__section {
+    display: block;
+    white-space: normal;
+    overflow: visible;
+    text-overflow: unset;
+    word-break: break-all;
+  }
+
+  .menu-fixed {
+    max-width: var(--dynamic-width) !important;
+    width: var(--dynamic-width) !important;
+  }
 </style>

package/src/css/extends.scss

@@ -162,12 +162,12 @@
       }
 
       &--active {
-        color: $grey_90 !important;
+        color: $brilliantblue_75 !important;
       }
     }
 
     .q-manual-focusable--focused {
-      background: $positive;
+      background: $brilliantblue_75;
       color: white !important;
 
       .q-focus-helper {