quasar-ui-sellmate-ui-kit 3.14.0 → 3.14.2

package/package.json

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

package/src/components/SSelectSearchCheckbox.vue

@@ -9,18 +9,13 @@
     multiple
     emit-value
     map-options
+    autocomplete="country"
     color="positive"
-    :popup-content-class="
-      [
-        's-select-checkbox-opts',
-        idClass,
-        isScrolled && 's-select-opts--scroll',
-        popupContentClass,
-      ].join(' ')
-    "
+    :popup-content-class="['s-select-checkbox-opts', popupContentClass].join(' ')"
     class="s-select-checkbox"
     :option-label="optionLabel"
     :option-value="optionValue"
+    :option-group="optionGroup"
     @add="onAddChecked"
     @remove="onRemoveChecked"
     :menu-offset="[0, 4]"
@@ -29,22 +24,24 @@
     no-error-icon
     hide-bottom-space
     ref="sSelectRef"
-    @popup-show="handleScroll"
-    @popup-hide="removeScroll"
   >
+    <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
     <template #before-options>
       <div class="search-input-form-container">
-        <input-with-search-icon
-          v-model="search"
-          autofocus
-          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"
-        />
+        <form class="select-search-input-form">
+          <q-icon :name="searchIcon" size="20px" />
+          <input
+            v-model="search"
+            autofocus
+            class="select-search-input"
+            :placeholder="searchPlaceholder"
+            @input="
+              data => {
+                onSearch(data.target.value);
+              }
+            "
+          />
+        </form>
       </div>
     </template>
     <template #option="{ itemProps, opt, selected, toggleOption }">
@@ -52,59 +49,70 @@
         <q-item-section side v-if="!opt.disable">
           <s-checkbox :modelValue="selected" @update:modelValue="toggleOption(opt)" />
         </q-item-section>
+        <q-item-section v-if="opt[optionGroup]" class="text-Grey_Darken-4">
+          {{ opt[optionGroup] }}
+        </q-item-section>
         <q-item-section avatar v-if="opt.logo">
-          <q-img class="q-pa-none bg-grey-11" :src="opt.logo" width="60px" height="22px" />
+          <q-img class="q-pa-none bg-Grey_Lighten-5" :src="opt.logo" width="60px" height="22px" />
         </q-item-section>
         <q-item-section>
           {{ opt[optionLabel] }}
         </q-item-section>
       </q-item>
     </template>
-    <template #selected v-if="useAll && !!options.length && model.length === options.length">
-      <div>
-        {{ selectPlaceholder }}
+    <template
+      v-if="
+        (options.length && useAll && (model[0] === '' || model.includes(''))) ||
+        (noSelected && !options.length)
+      "
+      #selected
+    >
+      <div v-if="noSelected && !options.length">{{ noSelected }}</div>
+      <div v-else-if="options.length && useAll && (model[0] === '' || model.includes(''))">
+        {{ placeholder }}
       </div>
     </template>
-
     <template #no-option>
       <div class="search-input-form-container">
-        <input-with-search-icon
-          v-model="search"
-          autofocus
-          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"
-        />
+        <form class="select-search-input-form">
+          <q-icon :name="searchIcon" size="20px" />
+          <input
+            v-model="search"
+            autofocus
+            class="select-search-input"
+            :placeholder="searchPlaceholder"
+            @input="
+              data => {
+                onSearch(data.target.value);
+              }
+            "
+          />
+        </form>
       </div>
       <q-item class="s-select-no-option">
-        <q-item-section class="text-grey">{{ noOptionLabel }}</q-item-section>
+        <q-item-section class="text-grey">{{ noData }}</q-item-section>
       </q-item>
     </template>
   </q-select>
 </template>
 
 <script>
-  import { defineComponent, onBeforeMount, ref, nextTick, watch } from 'vue';
-  import { QSelect, QItem, QItemSection, QImg, useId, debounce } from 'quasar';
-  import { selectDownArrowIcon } from '../assets/icons';
-  import InputWithSearchIcon from './InputWithSearchIcon.vue';
+  import { QIcon, QImg, QItem, QItemSection, QSelect, debounce } from 'quasar';
+  import { defineComponent, nextTick, onBeforeMount, ref, watch } from 'vue';
+  import { searchIcon, selectDownArrowIcon } from '../assets/icons';
 
   export default defineComponent({
-    name: 'SSelectCheckbox',
-    emits: ['update:modelValue', 'onSearch'],
+    name: 'SSelectSearchCheckbox',
+    emits: ['update:modelValue'],
     components: {
       QSelect,
       QItem,
       QItemSection,
       QImg,
-      InputWithSearchIcon,
+      QIcon,
     },
     props: {
-      searchPlaceholder: { type: String, default: '검색어 입력 후 Enter' },
+      searchPlaceholder: { type: String, default: '검색' },
       options: {
         type: Array,
         required: true,
@@ -121,209 +129,144 @@
         type: String,
         default: 'value',
       },
+      optionGroup: {
+        type: String,
+        default: 'group',
+      },
       useAll: {
         type: Boolean,
         default: false,
       },
-      selectPlaceholder: {
+      placeholder: {
         type: String,
         default: '전체',
       },
+      checkboxSearch: {
+        type: String,
+        default: '',
+      },
+      noData: {
+        type: String,
+        default: '데이터 없음',
+      },
       popupContentClass: {
-        default: () => '',
         type: String,
       },
-      noOptionLabel: {
+      noSelected: {
         type: String,
-        default: '선택지가 없습니다.',
+        default: '선택',
       },
     },
     setup(props, { emit }) {
-      const NO_VALUE = ['', null];
-      const filteredOptions = ref(props.options);
-      const checkNoValue = value => NO_VALUE.includes(value);
       const model = ref(props.modelValue);
+      const filteredOptions = ref(props.options);
+      const searchInput = ref(null);
+      const search = ref('');
+      const isDisable = props.options.find(v => Boolean(v.disable));
 
+      /**
+       * @param {{ index: number; value: string | number }} detail
+       */
       function onRemoveChecked(detail) {
-        if (checkNoValue(detail.value)) {
+        const idx = model.value.findIndex(v => v === '');
+        if (detail.value === '') {
           nextTick(() => {
             model.value = [];
           });
-        } else if (detail.index > 0) {
+        } else if (idx >= 0) {
           nextTick(() => {
-            model.value = model.value.filter(v => v !== detail.value && !checkNoValue(v));
+            model.value.splice(idx, 1);
           });
         }
       }
 
-      const getOnlyValueArray = () => filteredOptions.value.map(v => v[props.optionValue]);
+      /**
+       * @param {{ index: number; value: string | number }} detail
+       */
       function onAddChecked(detail) {
-        if (checkNoValue(detail.value)) {
+        if (detail.value === '') {
           nextTick(() => {
-            model.value = getOnlyValueArray();
+            model.value = props.options
+              .filter(v => !v.category)
+              .map(option => option[props.optionValue]);
           });
         } else {
           nextTick(() => {
-            if (props.useAll && model.value.length === filteredOptions.value.length - 1) {
-              model.value = getOnlyValueArray();
+            if (model.value.length === props.options.length - 1) {
+              model.value = props.options
+                .filter(v => !v.category)
+                .map(option => option[props.optionValue]);
             }
           });
         }
       }
 
-      function checkEmptyValue(opt) {
-        if (typeof opt === 'object' && opt !== null) {
-          return opt[props.optionValue] !== 0 && !opt[props.optionValue];
+      const onSearch = debounce(val => {
+        if (val === '') {
+          filteredOptions.value = props.options;
+        } else {
+          filteredOptions.value = props.options.filter(
+            v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
+          );
         }
-
-        return opt !== 0 && !opt;
-      }
+      }, 200);
 
       watch(
         () => props.modelValue,
-        newModelValue => {
-          if (props.useAll && newModelValue.length === 1 && checkEmptyValue(newModelValue[0])) {
-            model.value = getOnlyValueArray();
-            return;
-          }
-          model.value = newModelValue;
-        },
-      );
+        val => {
+          model.value = val;
 
-      watch(
-        () => props.options,
-        newOptionValue => {
-          filteredOptions.value = newOptionValue;
-          if (props.useAll && !props.modelValue[0]) {
-            model.value = getOnlyValueArray();
+          if (
+            props.options.filter(opt => opt[props.optionValue] && !opt.category).length ===
+              model.value.length &&
+            model.value.length
+          ) {
+            model.value = props.options
+              .filter(v => !v.category)
+              .map(option => option[props.optionValue]);
           }
         },
       );
 
-      watch(model, newValue => {
-        emit('update:modelValue', newValue);
-      });
-
-      onBeforeMount(() => {
-        if (props.useAll && checkEmptyValue(props.modelValue[0])) {
-          model.value = getOnlyValueArray();
-        }
+      watch(model, val => {
+        emit('update:modelValue', val);
       });
 
-      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 = '';
-        emit('onSearch', '');
-      }
-
-      const onSearch = debounce(val => {
-        if (!val) {
-          filteredOptions.value = props.options;
-          return;
-        }
-
-        // 옵션을 선택 했을 때
-        if (sSelectRef.value.getOptionIndex() !== -1) {
-          const selectedValue =
-            filteredOptions.value[sSelectRef.value.getOptionIndex()][props.optionValue];
-          if (model.value.includes(selectedValue)) {
-            model.value = model.value.filter(v => !checkNoValue(v) && v !== selectedValue);
-          } else {
-            console.log('sdfsdf')
-            model.value.push(selectedValue);
-          }
-          handleDelete();
-          sSelectRef.value.setOptionIndex(-1);
-          sSelectRef.value.hidePopup();
-          return;
-        }
-
-        const filtered = props.options.filter(
-          v => (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1,
-        );
-
-        if (!filtered.length) {
-          emit('onSearch', val);
-          sSelectRef.value.setOptionIndex(-1);
-          return;
+      const allSelectedModel = () => {
+        if (props.useAll && model.value.filter(v => v).length < 1) {
+          model.value = props.options
+            .filter(v => !v[props.optionGroup])
+            .map(option => option[props.optionValue]);
         }
-
-        filteredOptions.value = filtered;
-      }, 200);
-
-      const isScrolled = ref(false);
-      const id = useId();
-      const idClass = `s-select-checkbox-opt-${id.value}`;
-      let scrollTimeout = null;
-      const handleScroll = () => {
-        const selectOptsEl = document.getElementsByClassName(idClass);
-        nextTick(() => {
-          if (selectOptsEl[0]) {
-            selectOptsEl[0].addEventListener('scroll', () => {
-              isScrolled.value = true;
-
-              if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-              }
-              scrollTimeout = setTimeout(() => {
-                isScrolled.value = false;
-              }, 100); // 100ms 후 스크롤 멈춤으로 간주
-            });
-          }
-        });
       };
 
-      const removeScroll = () => {
-        const selectOptsEl = document.getElementsByClassName(`s-select-opt-${id.value}`);
-        nextTick(() => {
-          if (selectOptsEl[0]) {
-            selectOptsEl[0].removeEventListener('scroll', () => {
-              if (scrollTimeout) {
-                clearTimeout(scrollTimeout);
-              }
+      watch(
+        () => props.options,
+        val => {
+          model.value = [];
+          filteredOptions.value = val;
+          nextTick(() => {
+            allSelectedModel();
+          });
+        },
+      );
 
-              isScrolled.value = false;
-            });
-          }
-        });
-      };
+      onBeforeMount(() => {
+        allSelectedModel();
+      });
 
       return {
         model,
         selectDownArrowIcon,
+        onRemoveChecked,
+        onAddChecked,
         onSearch,
+        isDisable,
         filteredOptions,
         search,
-        sSelectRef,
-        isScrolled,
-        id,
-        idClass,
-        onRemoveChecked,
-        onAddChecked,
-        handleKey,
-        handleInput,
-        handleDelete,
-        handleScroll,
-        removeScroll,
+        searchInput,
+        searchIcon,
+        sSelectRef: ref(null),
       };
     },
   });
@@ -335,6 +278,7 @@
 
   .s-select-checkbox {
     @extend %select;
+
     .q-field__native {
       display: block;
       min-height: 0;
@@ -345,9 +289,11 @@
       white-space: nowrap;
       overflow: hidden;
       text-overflow: ellipsis;
+
       > span {
         max-height: $default-height;
       }
+
       > .s-checkbox {
         margin-right: $default-icon-margin;
       }
@@ -356,21 +302,59 @@
 
   .s-select-checkbox-opts {
     @extend %select-menu-list;
-    > .q-virtual-scroll__content {
-      > .q-item.disabled {
-        border: none;
-        color: $Grey_Darken-4 !important;
-        opacity: 1 !important;
-        background: $Grey_Lighten-5 !important;
-        border-top: 1px solid $Grey_Lighten-3 !important;
-        &:not(.q-manual-focusable):first-of-type {
-          border-top: none !important;
-        }
-      }
-    }
   }
 
   .custom-select-options {
     height: $default-height;
   }
+
+  .disabled.s-select-checkbox-option {
+    border: none;
+    background: none !important;
+    color: $Grey_Default !important;
+  }
+
+  .select-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);
+      }
+    }
+
+    .select-search-input {
+      font-size: 12px;
+      margin-left: 8px;
+      flex-grow: 1;
+      border: none;
+      outline: none;
+    }
+  }
 </style>

package/src/components/STable.vue

@@ -29,14 +29,17 @@
     "
   >
     <template #no-data="props">
-      <slot name="noData" v-bind="props">
+      <slot name="no-data" v-bind="props">
         <div class="full-width text-center">
           {{ noDataLabel }}
         </div>
       </slot>
     </template>
+
     <template #loading>
-      <q-inner-loading showing color="positive" size="72px" />
+      <slot name="loading">
+        <q-inner-loading showing color="positive" size="72px" />
+      </slot>
     </template>
 
     <template v-for="(column, index) in columns" :key="index" #[`body-cell-${column.name}`]="props">
@@ -100,8 +103,9 @@
         </slot>
       </q-td>
     </template>
+
     <template v-for="(_, slotName, index) in $slots" :key="index" #[slotName]="data">
-      <slot :name="slotName" v-bind="data"> </slot>
+      <slot :name="slotName" :key="`slot-${index}`" v-bind="data"> </slot>
     </template>
   </q-table>
   <s-pagination