quasar-ui-sellmate-ui-kit 1.4.3 → 1.4.5

package/dist/index.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.4.2
+ * quasar-ui-sellmate-ui-kit v1.4.4
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/dist/index.min.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.4.2
+ * quasar-ui-sellmate-ui-kit v1.4.4
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/dist/index.rtl.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.4.2
+ * quasar-ui-sellmate-ui-kit v1.4.4
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/dist/index.rtl.min.css

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v1.4.2
+ * quasar-ui-sellmate-ui-kit v1.4.4
  * (c) 2023 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */

package/package.json

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

package/src/components/SDatePickerRange.vue

@@ -96,6 +96,7 @@ export default defineComponent({
     isDisable: Boolean,
     insideLabel: String,
     useInput: Boolean,
+    // TODO: 유효성 검사 필요 (리미티드 보통 90일) 사용자 입력으로 받았을 때 어떻게 오류를 보여줄 것인지, 언제 유효성 검사를 할 것인지 정해야함
     rangeDate: { type: Number, default: () => 1 },
     // 몇달 뒤인지
     // TODO: 추후 월 일 만들기

package/src/components/SDropdown.vue

@@ -18,22 +18,22 @@
     }"
   >
     <q-menu class="s-dropdown-menu" :offset="[0, 4]">
-      <q-item
-        v-for="(opt, i) in options"
-        :key="i"
-        :clickable="opt.disable === undefined || opt.disable === false"
-        v-close-popup
-        @click="
-          () => {
-            $emit('handleClickOption', opt.value);
-            $emit('handleClick', opt);
-          }
-        "
-      >
-        <q-item-section>
-          <q-item-label v-html="opt.label"></q-item-label>
-        </q-item-section>
-      </q-item>
+      <template v-for="(opt, i) in options" :key="i">
+        <q-item :clickable="opt.disable === undefined || opt.disable === false"
+          v-if="opt.display === true || opt.display === undefined"
+          v-close-popup
+          @click="
+            () => {
+              $emit('handleClickOption', opt.value);
+              $emit('handleClick', opt);
+            }
+          "
+        >
+          <q-item-section>
+            <q-item-label v-html="opt.label"></q-item-label>
+          </q-item-section>
+        </q-item>
+      </template>
     </q-menu>
   </q-btn>
 </template>

package/src/components/SSelect.vue

@@ -5,7 +5,7 @@
     options-dense
     :dropdown-icon="selectDownArrowIcon"
     :options-selected-class="selectedOpt"
-    popup-content-class="s-select-group-opts"
+    :popup-content-class="`s-select-opts ${group ? 's-select-group-opts' : ''} ${popupContentClass ?? ''}`"
     class="s-select"
     ref="sSelectRef"
     :class="{ 's-select-multiple': $attrs.multiple }"
@@ -98,6 +98,10 @@ export default defineComponent({
     options: Array,
     noSelected: String,
     emitValue: Boolean,
+    popupContentClass: {
+      default: () => '',
+      type: String,
+    },
   },
   setup(props, { emit, attrs }) {
     const filteredOptions = ref(props.options);
@@ -254,6 +258,10 @@ export default defineComponent({
   }
 }
 
+.s-select-opts {
+  @extend %select-menu-list;
+}
+
 .s-select-group-opts {
   padding: 0;
   .s-select-no-option {
@@ -274,9 +282,11 @@ export default defineComponent({
   .group-option {
     padding: 4px 12px 4px 20px !important;
     &.disabled {
-      color: $Grey_Lighten-1 !important;
       background: white !important;
       border: none !important;
+      .q-item__section {
+        color: $Grey_Lighten-1 !important;
+      }
     }
   }
 }

package/src/components/SSelectCheckbox.vue

@@ -10,7 +10,7 @@
     emit-value
     map-options
     color="positive"
-    popup-content-class="s-select-checkbox-opts"
+    :popup-content-class="`s-select-checkbox-opts ${$props?.popupContentClass ?? ''}`"
     class="s-select-checkbox"
     :option-label="optionLabel"
     :option-value="optionValue"
@@ -31,7 +31,7 @@
             @update:modelValue="toggleOption(opt)"
           />
         </q-item-section>
-        <q-item-section v-if="opt[optionGroup]" class="text-grey-2">
+        <q-item-section v-if="opt[optionGroup]" class="text-Grey_Darken-4 group-title">
           {{ opt[optionGroup] }}
         </q-item-section>
         <q-item-section avatar v-if="opt.logo">
@@ -102,6 +102,10 @@ export default defineComponent({
       type: String,
       default: '전체',
     },
+    popupContentClass: {
+      default: () => '',
+      type: String,
+    },
   },
   setup(props, { emit }) {
     const model = ref(props.modelValue);
@@ -206,15 +210,21 @@ export default defineComponent({
 
 .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;
-}
 </style>

package/src/components/SSelectGroupCheckbox.vue

@@ -0,0 +1,252 @@
+<template>
+  <q-select
+    outlined
+    dense
+    options-dense
+    :dropdown-icon="selectDownArrowIcon"
+    v-model="model"
+    :options="options"
+    multiple
+    emit-value
+    map-options
+    color="positive"
+    :popup-content-class="`s-select-group-checkbox-opts ${$props?.popupContentClass ?? ''}`"
+    class="s-select-checkbox"
+    :option-label="optionLabel"
+    :option-value="optionValue"
+    :option-group="optionGroup"
+    @add="onAddChecked"
+    @remove="onRemoveChecked"
+    :menu-offset="[0, 4]"
+    menu-self="top left"
+    menu-anchor="bottom start"
+    no-error-icon
+    hide-bottom-space
+  >
+    <template v-slot:option="{ itemProps, opt, selected, toggleOption }">
+      <q-item v-bind="itemProps" class="flex column grouping-opt">
+        <q-item-section class="s-px-sm s-py-xxs row justify-start text-Grey_Darken-4 group-title">
+          <s-checkbox
+            class="s-mr-xs"
+            :modelValue="selected"
+            @update:modelValue="toggleOption(opt.optionLabel)"
+          />
+          {{ opt[optionLabel] }}
+        </q-item-section>
+        <template v-for="groupOpt in opt.options" :key="groupOpt.optionValue">
+          <q-item-section class="group-content full-width">
+            <s-checkbox
+              class="s-mr-xs"
+              :modelValue="selected"
+              @update:modelValue="toggleOption(opt.optionLabel)"
+            />
+            <q-img
+              class="q-pa-none inline-block bg-Grey_Lighten-5 s-border-Grey_Lighten-7 s-border-radius-xxs q-mr-sm"
+              :src="groupOpt.logo"
+              width="60px"
+              height="22px"
+              v-if="groupOpt.logo"
+            />
+            {{ groupOpt[optionLabel] }}
+          </q-item-section>
+        </template>
+      </q-item>
+    </template>
+    <template v-if="useAll && model.length === options.filter(v => !v.category).length" v-slot:selected>
+      <div>
+        {{ allPlaceholder }}
+      </div>
+    </template>
+  </q-select>
+</template>
+
+<script>
+import {
+  defineComponent, onBeforeMount, ref, nextTick, watch,
+} from 'vue';
+import {
+  QSelect, QItem, QItemSection, QImg,
+} from 'quasar';
+import { selectDownArrowIcon } from '../assets/icons.js';
+
+export default defineComponent({
+  name: 'SSelectGroupCheckbox',
+  emits: ['update:modelValue'],
+  components: {
+    QSelect,
+    QItem,
+    QItemSection,
+    QImg,
+  },
+  props: {
+    options: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: Array,
+      required: true,
+    },
+    optionLabel: {
+      type: [String, Function],
+      default: 'label',
+    },
+    optionValue: {
+      type: String,
+      default: 'value',
+    },
+    optionGroup: {
+      type: String,
+      default: 'group',
+    },
+    useAll: {
+      type: Boolean,
+      default: false,
+    },
+    allPlaceholder: {
+      type: String,
+      default: '전체',
+    },
+    popupContentClass: {
+      default: () => '',
+      type: String,
+    },
+  },
+  // TODO: 기능 미완성
+  setup(props, { emit }) {
+    const model = ref(props.modelValue);
+    function onRemoveChecked(detail) {
+      const idx = model.value.findIndex(v => v[props.optionValue] === '');
+      if (detail.value[props.optionValue]?.includes('all')) {
+        nextTick(() => {
+          model.value = [];
+        });
+        return;
+      }
+      if (detail.value[props.optionValue] === '') {
+        nextTick(() => {
+          model.value = [];
+        });
+      } else if (idx >= 0) {
+        nextTick(() => {
+          model.value.splice(idx, 1);
+        });
+      }
+    }
+    function onAddChecked(detail) {
+      if (detail.value === '') {
+        nextTick(() => {
+          model.value = props.options;
+        });
+      } else {
+        nextTick(() => {
+          if (model.value.length === props.options.length - 1) {
+            model.value = props.options;
+          }
+        });
+      }
+    }
+
+    watch(() => props.modelValue, () => {
+      model.value = props.modelValue;
+    });
+    watch(model, () => {
+      emit('update:modelValue', model.value);
+    });
+
+    onBeforeMount(() => {
+      if (props.useAll && model.value.length === 1 && !props.modelValue[0].value) {
+        model.value = props.options.filter(v => !v.category);
+      }
+    });
+
+    return {
+      model,
+      selectDownArrowIcon,
+      onRemoveChecked,
+      onAddChecked,
+    };
+  },
+});
+</script>
+
+<style lang="scss">
+@import "../css/variable.scss";
+@import "../css/extends.scss";
+
+.s-select-checkbox {
+  @extend %select;
+  .q-field__native {
+    display: block;
+    min-height: 0;
+    height: $default-height;
+    width: 100%;
+    padding: $select-padding !important;
+    color: $Grey_Darken-4;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    > span {
+      max-height: $default-height;
+    }
+    > .s-checkbox {
+      margin-right: $default-icon-margin;
+    }
+  }
+}
+.q-field--disabled.s-select {
+  .q-field__inner {
+    .q-field__control {
+      opacity: 1 !important;
+      background: $Grey_Lighten-3;
+      &:after {
+        border: 1px solid $Grey_Lighten-2;
+      }
+      &-container {
+        .q-field__native {
+          > span {
+            color: $Grey_Default;
+          }
+        }
+      }
+      .q-field__append {
+        .q-icon {
+          color: $Grey_Default;
+        }
+      }
+    }
+  }
+}
+
+.s-select-group-checkbox-opts {
+  @extend %select-menu-list;
+  > .q-virtual-scroll__content {
+    > .q-item.grouping-opt {
+      border: none;
+      color: $Grey_Darken-4 !important;
+      opacity: 1 !important;
+      height: auto;
+      padding: 0;
+      background-color: white;
+      > .group-title, .group-content {
+        flex-direction: row !important;
+        justify-content: flex-start !important;
+        > .s-checkbox {
+          margin-right: 10px;
+        }
+      }
+      > .group-title {
+        background-color: $Grey_Lighten-5;
+        border-top: 1px solid $Grey_Lighten-3 !important;
+        &:first-of-type {
+          border-top: none !important;
+        }
+      }
+      > .group-content {
+        margin: 0;
+        padding: 4px 12px 4px 16px;
+      }
+    }
+  }
+}
+</style>