quasar-ui-sellmate-ui-kit 1.4.4 → 1.4.5

package/package.json

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

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>

package/src/components/SSelectSearchCheckbox.vue

@@ -1,36 +1,19 @@
 <template>
-  <q-select
-    outlined
-    dense
-    options-dense
-    :dropdown-icon="selectDownArrowIcon"
-    v-model="model"
-    :options="filteredOptions"
-    multiple
-    emit-value
-    map-options
-    autocomplete="country"
-    color="positive"
-    popup-content-class="s-select-checkbox-opts"
-    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
-  >
+  <q-select outlined dense options-dense :dropdown-icon="selectDownArrowIcon" v-model="model" :options="filteredOptions"
+    multiple emit-value map-options autocomplete="country" color="positive"
+    :popup-content-class="`s-select-checkbox-opts ${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>
     <!-- TODO: 아무것도 선택되지 않았을 때 props 값으로 표기 해줘야함 기본 값은 "전체" -->
     <template v-slot:before-options>
-      <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 class="search-input-form-container">
+        <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 v-slot:option="{ itemProps, opt, selected, toggleOption }">
       <q-item v-bind="itemProps" class="custom-select-options">
@@ -54,11 +37,13 @@
       </div>
     </template>
     <template v-slot:no-option>
-      <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 class="search-input-form-container">
+        <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">{{ noData }}</q-item-section>
       </q-item>
@@ -131,6 +116,9 @@ export default defineComponent({
       type: String,
       default: '데이터 없음',
     },
+    popupContentClass: {
+      type: String,
+    },
   },
   setup(props, { emit }) {
     const model = ref(props.modelValue);
@@ -300,48 +288,50 @@ export default defineComponent({
   color: $Grey_Default !important;
 }
 
-.select-search-input-form {
-  height: 32px;
-  display: flex;
-  align-items: center;
-  padding-left: 8px;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.24);
-  position: relative;
-  border-top-left-radius: 2px;
-  border-top-right-radius: 2px;
-  background-color: white;
-  position: sticky;
-  top: 0;
-  z-index: 1;
-
-  &::after {
-    content: "";
-    position: absolute;
+.search-input-form-container {
+  padding: 4px;
+  .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;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    pointer-events: none;
-    border: 1px solid transparent;
-    border-radius: inherit;
-  }
-
-  &:hover,
-  &:focus-within {
+    z-index: 1;
 
     &::after {
-      border-color: #0075ff;
-      box-shadow: 0 0 4px #0075ff;
-      transition: border-color 0.36s cubic-bezier(0.4, 0, 0.2, 1);
+      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: 14px;
-    margin-left: 4px;
-    flex-grow: 1;
-    border: none;
-    outline: none;
+    .select-search-input {
+      font-size: 12px;
+      margin-left: 8px;
+      flex-grow: 1;
+      border: none;
+      outline: none;
+    }
   }
 }
 </style>

package/src/components/STable.vue

@@ -284,6 +284,7 @@ export default defineComponent({
           th {
             &:first-of-type {
               padding: 0 8px 0 24px;
+              line-height: 100%;
               > .q-checkbox {
                 @extend %checkbox;
               }
@@ -296,6 +297,7 @@ export default defineComponent({
           td {
             &:first-of-type {
               padding: 0 8px 0 24px;
+              line-height: 100%;
               > .q-checkbox {
                 @extend %checkbox;
               }

package/src/css/extends.scss

@@ -6,7 +6,7 @@
     width: 16px;
     height: 16px;
     .q-checkbox__bg {
-      border: 1px solid $Grey_Lighten-2;
+      border: 1px solid $Grey_Default;
       width: 16px;
       height: 16px;
       padding: 0 2.5px;
@@ -95,6 +95,9 @@
           }
         }
       }
+      &--active {
+        color: $Grey_Darken-4 !important;
+      }
     }
     .q-manual-focusable--focused {
       background: $positive;
@@ -107,7 +110,6 @@
           > span {
             color: white !important;
           }
-          
         }
         .q-checkbox {
           .q-checkbox__inner {

package/src/vue-plugin.js

@@ -24,6 +24,7 @@ import SRouteTab from './components/SRouteTab.vue';
 import SSelect from './components/SSelect.vue';
 import SSelectCheckbox from './components/SSelectCheckbox.vue';
 import SSelectSearchCheckbox from './components/SSelectSearchCheckbox.vue';
+import SSelectGroupCheckbox from './components/SSelectGroupCheckbox.vue';
 import SSelectCustom from './components/SSelectCustom.vue';
 import SSelectSearch from './components/SSelectSearch.vue';
 import STab from './components/STab.vue';
@@ -62,6 +63,7 @@ function install(app) {
   app.component('s-select-custom', SSelectCustom);
   app.component('s-select-checkbox', SSelectCheckbox);
   app.component('s-select-search-checkbox', SSelectSearchCheckbox);
+  app.component('s-select-group-checkbox', SSelectGroupCheckbox);
   app.component('s-select-search', SSelectSearch);
   app.component('s-tab', STab);
   app.component('s-route-tab', SRouteTab);