quasar-ui-sellmate-ui-kit 3.12.2 → 3.12.4

package/package.json

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

package/src/components/InputWithSearchIcon.vue

@@ -1,83 +1,83 @@
-<template>
-  <div class="search-input-form">
-    <q-icon :name="searchIcon" size="16px" />
-    <input v-model="search" autofocus class="search-input" :placeholder="placeholder" />
-    <q-icon
-      v-if="search"
-      :name="closeIcon12"
-      size="12px"
-      class="q-pa-sm cursor-pointer"
-      color="Grey_Default"
-      @click="$emit('onDelete')"
-    />
-  </div>
-</template>
-
-<script setup>
-  import { computed, ref, watch } from 'vue';
-  import { QIcon } from 'quasar';
-  import { searchIcon, closeIcon12 } from '../assets/icons';
-
-  const props = defineProps({
-    placeholder: String,
-    modelValue: String,
-  });
-
-  const emits = defineEmits(['onInput', 'onDelete']);
-  const search = computed({
-    get() {
-      return props.modelValue;
-    },
-    set(val) {
-      emits('onInput', val);
-    },
-  });
-</script>
-
-<style scoped lang="scss">
-  @use '../css/quasar.variables.scss' as *;
-
-  .search-input-form {
-    height: 28px;
-    display: flex;
-    align-items: center;
-    padding-left: 8px;
-    position: relative;
-    border-radius: 2px;
-    border: 1px solid $Grey_Lighten-1;
-    background-color: white;
-    position: sticky;
-    top: 0;
-    z-index: 1;
-    margin: 4px;
-
-    &::after {
-      content: '';
-      position: absolute;
-      top: 0;
-      right: 0;
-      bottom: 0;
-      left: 0;
-      pointer-events: none;
-      border: 1px solid transparent;
-      border-radius: inherit;
-    }
-
-    &:hover,
-    &:focus-within {
-      &::after {
-        border-color: #0075ff;
-        box-shadow: 0 0 4px #0075ff;
-        transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
-      }
-    }
-
-    .search-input {
-      font-size: 12px;
-      margin-left: 8px;
-      flex-grow: 1;
-      border: none;
-      outline: none;
-    }
-  }
-</style>
+<template>
+  <div class="search-input-form">
+    <q-icon :name="searchIcon" size="16px" />
+    <input v-model="search" autofocus class="search-input" :placeholder="placeholder" />
+    <q-icon
+      v-if="search"
+      :name="closeIcon12"
+      size="12px"
+      class="q-pa-sm cursor-pointer"
+      color="Grey_Default"
+      @click="$emit('onDelete')"
+    />
+  </div>
+</template>
+
+<script setup>
+  import { computed, ref, watch } from 'vue';
+  import { QIcon } from 'quasar';
+  import { searchIcon, closeIcon12 } from '../assets/icons';
+
+  const props = defineProps({
+    placeholder: String,
+    modelValue: String,
+  });
+
+  const emits = defineEmits(['onInput', 'onDelete']);
+  const search = computed({
+    get() {
+      return props.modelValue;
+    },
+    set(val) {
+      emits('onInput', val);
+    },
+  });
+</script>
+
+<style scoped lang="scss">
+  @use '../css/quasar.variables.scss' as *;
+
+  .search-input-form {
+    height: 28px;
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    position: relative;
+    border-radius: 2px;
+    border: 1px solid $Grey_Lighten-1;
+    background-color: white;
+    position: sticky;
+    top: 0;
+    z-index: 1;
+    margin: 4px;
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      pointer-events: none;
+      border: 1px solid transparent;
+      border-radius: inherit;
+    }
+
+    &:hover,
+    &:focus-within {
+      &::after {
+        border-color: #0075ff;
+        box-shadow: 0 0 4px #0075ff;
+        transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+      }
+    }
+
+    .search-input {
+      font-size: 12px;
+      margin-left: 8px;
+      flex-grow: 1;
+      border: none;
+      outline: none;
+    }
+  }
+</style>

package/src/components/SSelectSearch.vue

@@ -160,6 +160,7 @@
         if (sSelectRef.value.getOptionIndex() !== -1) {
           model.value = filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
           handleDelete();
+          sSelectRef.value.setOptionIndex(-1);
           sSelectRef.value.hidePopup();
           return;
         }
@@ -170,6 +171,7 @@
 
         if (!filtered.length) {
           emit('onSearch', val);
+          sSelectRef.value.setOptionIndex(-1);
           return;
         }
 
@@ -191,6 +193,9 @@
       watch(
         () => props.options,
         val => {
+          // const existingValues = new Set(filteredOptions.value.map((option) => option.value));
+          // const nonDuplicateOptions = val.filter((option) => !existingValues.has(option.value));
+          // filteredOptions.value.push(...nonDuplicateOptions);
           filteredOptions.value = val;
           sSelectRef.value.setOptionIndex(-1);
         },
@@ -238,6 +243,7 @@
 
   .s-select-opts {
     @extend %select-menu-list;
+    height: 252px;
   }
 
   .custom-select-options {

package/src/components/STooltip.vue

@@ -67,7 +67,7 @@
 </template>
 
 <script>
-import { defineComponent, ref } from 'vue';
+import { defineComponent, ref, watch } from 'vue';
 import {
   QTooltip, QBtn, QMenu, QIcon,
 } from 'quasar';
@@ -138,6 +138,10 @@ export default defineComponent({
   },
   setup(props) {
     const isToggled = ref(props.toggle);
+
+    watch(() => props.toggle, (val) => {
+      isToggled.value = val
+    })
     return {
       isToggled,
       closeIcon,