quasar-ui-sellmate-ui-kit 3.12.0 → 3.12.2

package/package.json

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

package/src/components/SSelectSearch.vue

@@ -56,6 +56,8 @@
           class="select-search-input"
           :placeholder="searchPlaceholder"
           @keydown.prevent.enter="e => onSearch(e.target.value)"
+          @keydown.prevent.arrow-down="handleKey"
+          @keydown.prevent.arrow-up="handleKey"
           @on-input="handleInput"
           @on-delete="handleDelete"
         />
@@ -123,9 +125,25 @@
         props.options.find(opt => opt[props.optionValue] === props.modelValue)[props.optionLabel] ||
         '';
 
-      const search = ref(props.modelValue ? findLabel() : '');
+      const search = ref('');
       const sSelectRef = ref(null);
 
+      function handleKey(e) {
+        if (sSelectRef.value) {
+          sSelectRef.value.moveOptionSelection(e.key === 'ArrowDown' ? 1 : -1, true);
+        }
+      }
+
+      function handleInput(val) {
+        search.value = val;
+        sSelectRef.value.setOptionIndex(-1);
+
+        if (!val) {
+          filteredOptions.value = props.options;
+          sSelectRef.value.setOptionIndex(-1);
+        }
+      }
+
       function handleDelete() {
         sSelectRef.value.setOptionIndex(-1);
         search.value = '';
@@ -141,7 +159,6 @@
         // 옵션을 선택 했을 때
         if (sSelectRef.value.getOptionIndex() !== -1) {
           model.value = filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
-
           handleDelete();
           sSelectRef.value.hidePopup();
           return;
@@ -177,23 +194,9 @@
           filteredOptions.value = val;
           sSelectRef.value.setOptionIndex(-1);
         },
+        { deep: true },
       );
 
-      function handleKey(e) {
-        if (sSelectRef.value) {
-          sSelectRef.value.moveOptionSelection(e.key === 'ArrowDown' ? 1 : -1, true);
-        }
-      }
-
-      function handleInput(val) {
-        search.value = val;
-        sSelectRef.value.setOptionIndex(-1);
-
-        if (!val) {
-          filteredOptions.value = props.options;
-          sSelectRef.value.setOptionIndex(-1);
-        }
-      }
       return {
         model,
         selectDownArrowIcon,

package/src/components/STooltip.vue

@@ -1,209 +1,214 @@
-<template>
-  <q-btn
-    no-caps
-    no-wrap
-    dense
-    unelevated
-    :ripple="false"
-    class="s-tooltip-btn q-pa-none"
-    :class="{ 'no-hover': noHover }"
-    @mouseenter="() => isToogled = true"
-    @click="() => isToogled = false"
-    :text-color="needToogle && isToogled && toogleColor ? toogleColor : textColor"
-  >
-    <template v-if="needToogle">
-      <q-menu
-        :self="$props.boxSelf"
-        :anchor="$props.boxAnchor"
-        :offset="$props.boxOffset"
-        :modelValue="isToogled"
-        no-parent-event
-        persistent
-        class="bg-Blue_B_Darken-2 text-white s-tooltip"
-      >
-        <div class="tooltip-close-icon cursor-pointer">
-          <q-icon :name="closeIcon" size="16px" @click="() => isToogled = false" />
-        </div>
-        <div class="q-py-sm q-px-md"><slot></slot></div>
-      </q-menu>
-      <q-menu
-        :anchor="$props.arrowAnchor"
-        :self="$props.arrowSelf"
-        :offset="$props.arrowOffset"
-        :class="$props.arrowStyle"
-        class="tooltip-triangle"
-        :model-value="isToogled"
-        @update:model-value="(val) => {
-          isToogled = val
-          $emit('update:modelValue', val)
-        }"
-        no-parent-event
-        persistent
-      />
-    </template>
-    <template v-else>
-      <q-tooltip
-        :anchor="$props.boxAnchor"
-        :self="$props.boxSelf"
-        :offset="$props.boxOffset"
-        class="bg-Blue_B_Darken-2 text-white s-tooltip"
-        :modelValue="modelValue"
-        @hide="$emit('update:modelValue', false)"
-        @show="$emit('update:modelValue', true)"
-      >
-        <slot></slot>
-      </q-tooltip>
-      <q-tooltip
-        :anchor="$props.arrowAnchor"
-        :self="$props.arrowSelf"
-        :offset="$props.arrowOffset"
-        :class="$props.arrowStyle"
-        class="tooltip-triangle"
-        :modelValue="modelValue"
-      ></q-tooltip>
-    </template>
-  </q-btn>
-</template>
-
-<script>
-import { defineComponent, ref } from 'vue';
-import {
-  QTooltip, QBtn, QMenu, QIcon,
-} from 'quasar';
-import { closeIcon } from '../assets/icons';
-
-export default defineComponent({
-  name: 'STooptip',
-  components: {
-    QTooltip,
-    QBtn,
-    QMenu,
-    QIcon,
-  },
-  props: {
-    modelValue: Boolean,
-    textColor: {
-      type: String,
-      default: '',
-    },
-    toogleColor: {
-      type: String,
-      default: '',
-    },
-    needToogle: {
-      type: Boolean,
-      default: false,
-    },
-    toogle: {
-      type: Boolean,
-      default: false,
-    },
-    noHover: {
-      type: Boolean,
-      default: false,
-    },
-    boxAnchor: {
-      type: String,
-      required: true,
-    },
-    boxSelf: {
-      type: String,
-      required: true,
-    },
-    boxOffset: {
-      type: Array,
-      required: true,
-    },
-    arrowAnchor: {
-      type: String,
-      required: true,
-    },
-    arrowSelf: {
-      type: String,
-      required: true,
-    },
-    arrowOffset: {
-      type: Array,
-      required: true,
-    },
-    arrowStyle: {
-      type: String,
-      required: true,
-    },
-  },
-  setup(props) {
-    const isToogled = ref(props.toogle);
-    return {
-      isToogled,
-      closeIcon,
-    };
-  },
-});
-</script>
-
-<style lang="scss">
-@import "../css/quasar.variables.scss";
-.s-tooltip {
-  padding: $tooltip-padding;
-  border-radius: $button-border-radius;
-  font: {
-    size: $default-font;
-    weight: $font-weight-md;
-  }
-}
-.s-toogle-tip {
-  padding: 0;
-  border-radius: $button-border-radius;
-  font: {
-    size: $default-font;
-    weight: $font-weight-md;
-  }
-
-}
-.tooltip-triangle {
-  box-shadow: none !important;
-  background: none !important;
-  padding: 0;
-  width: 0;
-  height: 0;
-  &.bottom {
-    border: {
-      top: 0px solid transparent;
-      bottom: 12px solid $Blue_B_Darken-2;
-      left: 8px solid transparent;
-      right: 8px solid transparent;
-    }
-  }
-  &.top {
-    border: {
-      top: 12px solid $Blue_B_Darken-2;
-      bottom: 0px solid transparent;
-      left: 8px solid transparent;
-      right: 8px solid transparent;
-    }
-  }
-  &.left {
-    border: {
-      top: 8px solid transparent;
-      bottom: 8px solid transparent;
-      left: 12px solid $Blue_B_Darken-2;
-      right: 0px solid transparent;
-    }
-  }
-  &.right {
-    border: {
-      top: 8px solid transparent;
-      bottom: 8px solid transparent;
-      left: 0px solid transparent;
-      right: 12px solid $Blue_B_Darken-2;
-    }
-  }
-}
-.q-menu {
-  > .tooltip-close-icon {
-    position: absolute;
-    top: 6px;
-    right: 6px;
-  }
-}
-</style>
+<template>
+  <q-btn
+    no-caps
+    no-wrap
+    dense
+    unelevated
+    :ripple="false"
+    class="s-tooltip-btn q-pa-none"
+    :class="{ 'no-hover': noHover }"
+    @mouseenter="() => isToggled = true"
+    @click="() => isToggled = false"
+    :text-color="needToggle && isToggled && toggleColor ? toggleColor : textColor"
+  >
+    <template v-if="needToggle">
+      <q-menu
+        :self="$props.boxSelf"
+        :anchor="$props.boxAnchor"
+        :offset="$props.boxOffset"
+        :modelValue="isToggled"
+        no-parent-event
+        persistent
+        :class="menuClass"
+        class="bg-Blue_B_Darken-2 text-white s-tooltip"
+      >
+        <div class="tooltip-close-icon cursor-pointer">
+          <q-icon :name="closeIcon" size="16px" @click="() => isToggled = false" />
+        </div>
+        <div class="q-py-sm q-px-md"><slot></slot></div>
+      </q-menu>
+      <q-menu
+        :anchor="$props.arrowAnchor"
+        :self="$props.arrowSelf"
+        :offset="$props.arrowOffset"
+        :class="$props.arrowStyle"
+        class="tooltip-triangle"
+        :model-value="isToggled"
+        @update:model-value="(val) => {
+          isToggled = val
+          $emit('update:modelValue', val)
+        }"
+        no-parent-event
+        persistent
+      />
+    </template>
+    <template v-else>
+      <q-tooltip
+        :anchor="$props.boxAnchor"
+        :self="$props.boxSelf"
+        :offset="$props.boxOffset"
+        class="bg-Blue_B_Darken-2 text-white s-tooltip"
+        :modelValue="modelValue"
+        @hide="$emit('update:modelValue', false)"
+        @show="$emit('update:modelValue', true)"
+      >
+        <slot></slot>
+      </q-tooltip>
+      <q-tooltip
+        :anchor="$props.arrowAnchor"
+        :self="$props.arrowSelf"
+        :offset="$props.arrowOffset"
+        :class="$props.arrowStyle"
+        class="tooltip-triangle"
+        :modelValue="modelValue"
+      ></q-tooltip>
+    </template>
+  </q-btn>
+</template>
+
+<script>
+import { defineComponent, ref } from 'vue';
+import {
+  QTooltip, QBtn, QMenu, QIcon,
+} from 'quasar';
+import { closeIcon } from '../assets/icons';
+
+export default defineComponent({
+  name: 'STooltip',
+  components: {
+    QTooltip,
+    QBtn,
+    QMenu,
+    QIcon,
+  },
+  props: {
+    modelValue: Boolean,
+    textColor: {
+      type: String,
+      default: '',
+    },
+    toggleColor: {
+      type: String,
+      default: '',
+    },
+    needToggle: {
+      type: Boolean,
+      default: false,
+    },
+    toggle: {
+      type: Boolean,
+      default: false,
+    },
+    noHover: {
+      type: Boolean,
+      default: false,
+    },
+    boxAnchor: {
+      type: String,
+      required: true,
+    },
+    boxSelf: {
+      type: String,
+      required: true,
+    },
+    boxOffset: {
+      type: Array,
+      required: true,
+    },
+    arrowAnchor: {
+      type: String,
+      required: true,
+    },
+    arrowSelf: {
+      type: String,
+      required: true,
+    },
+    arrowOffset: {
+      type: Array,
+      required: true,
+    },
+    arrowStyle: {
+      type: String,
+      required: true,
+    },
+    menuClass: {
+      type: String,
+      default: '',
+    },
+  },
+  setup(props) {
+    const isToggled = ref(props.toggle);
+    return {
+      isToggled,
+      closeIcon,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/quasar.variables.scss";
+.s-tooltip {
+  padding: $tooltip-padding;
+  border-radius: $button-border-radius;
+  font: {
+    size: $default-font;
+    weight: $font-weight-md;
+  }
+}
+.s-toggle-tip {
+  padding: 0;
+  border-radius: $button-border-radius;
+  font: {
+    size: $default-font;
+    weight: $font-weight-md;
+  }
+
+}
+.tooltip-triangle {
+  box-shadow: none !important;
+  background: none !important;
+  padding: 0;
+  width: 0;
+  height: 0;
+  &.bottom {
+    border: {
+      top: 0px solid transparent;
+      bottom: 12px solid $Blue_B_Darken-2;
+      left: 8px solid transparent;
+      right: 8px solid transparent;
+    }
+  }
+  &.top {
+    border: {
+      top: 12px solid $Blue_B_Darken-2;
+      bottom: 0px solid transparent;
+      left: 8px solid transparent;
+      right: 8px solid transparent;
+    }
+  }
+  &.left {
+    border: {
+      top: 8px solid transparent;
+      bottom: 8px solid transparent;
+      left: 12px solid $Blue_B_Darken-2;
+      right: 0px solid transparent;
+    }
+  }
+  &.right {
+    border: {
+      top: 8px solid transparent;
+      bottom: 8px solid transparent;
+      left: 0px solid transparent;
+      right: 12px solid $Blue_B_Darken-2;
+    }
+  }
+}
+.q-menu {
+  > .tooltip-close-icon {
+    position: absolute;
+    top: 6px;
+    right: 6px;
+  }
+}
+</style>