quasar-ui-sellmate-ui-kit 3.2.3 → 3.2.5

package/dist/index.umd.js

@@ -1,5 +1,5 @@
 /*!
- * quasar-ui-sellmate-ui-kit v3.2.2
+ * quasar-ui-sellmate-ui-kit v3.2.4
  * (c) 2024 Sellmate Dev Team <dev@sellmate.co.kr>
  * Released under the MIT License.
  */
@@ -1445,7 +1445,7 @@
     }, 8, ["color", "icon-right", "class"]))
   }
 
-  var css_248z$r = ".s-dropdown {\n  min-height: 0;\n  padding: 0 !important;\n  line-height: normal;\n}\n.s-dropdown .q-btn__content {\n  min-height: 0;\n  align-items: center;\n}\n.s-dropdown .q-btn__content .block {\n  border-right: 1px solid color-mix(in srgb, white 25%, transparent);\n  height: 100%;\n}\n.s-dropdown .q-btn__content .q-icon {\n  padding: 0;\n  border-right: none;\n  color: white;\n}\n.s-dropdown.q-btn--outline .q-btn__content .block {\n  color: currentColor;\n  border-right: 1px solid currentColor;\n}\n.s-dropdown.q-btn--outline .q-btn__content .q-icon {\n  color: currentColor;\n}\n.s-dropdown.q-btn--outline:hover.q-focusable:focus > .q-focus-helper:before, .s-dropdown.q-btn--outline:hover.q-manual-focusable--focused > .q-focus-helper:before, .s-dropdown.q-btn--outline:hover.q-hoverable:hover > .q-focus-helper:before {\n  opacity: 0;\n}\n.s-dropdown.q-btn--outline:hover.q-focusable:focus > .q-focus-helper:after, .s-dropdown.q-btn--outline:hover.q-manual-focusable--focused > .q-focus-helper:after, .s-dropdown.q-btn--outline:hover.q-hoverable:hover > .q-focus-helper:after {\n  opacity: 0.55;\n}\n.s-dropdown:hover.q-focusable:focus > .q-focus-helper, .s-dropdown:hover.q-manual-focusable--focused > .q-focus-helper, .s-dropdown:hover.q-hoverable:hover > .q-focus-helper {\n  opacity: 0.3;\n  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.s-dropdown:hover.q-focusable:focus > .q-focus-helper:before, .s-dropdown:hover.q-manual-focusable--focused > .q-focus-helper:before, .s-dropdown:hover.q-hoverable:hover > .q-focus-helper:before {\n  opacity: 1.4;\n  transition: none;\n}\n.s-dropdown:hover.q-focusable:focus > .q-focus-helper:after, .s-dropdown:hover.q-manual-focusable--focused > .q-focus-helper:after, .s-dropdown:hover.q-hoverable:hover > .q-focus-helper:after {\n  opacity: 0;\n  transition: none;\n}\n.s-dropdown.s-dropdown-xs {\n  min-width: 67px;\n}\n.s-dropdown.s-dropdown-xs .q-btn__content .block {\n  padding: 2px 6px 2px 8px;\n  line-height: 20px;\n  font-size: 12px;\n  font-weight: 400;\n}\n.s-dropdown.s-dropdown-xs .q-btn__content .q-icon {\n  font-size: 12px;\n  margin: 5px 5px 5px 4px;\n}\n.s-dropdown.s-dropdown-sm {\n  min-width: 75px;\n}\n.s-dropdown.s-dropdown-sm .q-btn__content .block {\n  padding: 4px 10px 4px 12px;\n  line-height: 20px;\n  font-size: 12px;\n  font-weight: 400;\n}\n.s-dropdown.s-dropdown-sm .q-btn__content .q-icon {\n  font-size: 12px;\n  margin: 7px 8px;\n}\n.s-dropdown.s-dropdown-md {\n  min-width: 107px;\n}\n.s-dropdown.s-dropdown-md .q-btn__content .block {\n  padding: 6px 16px 6px 20px;\n  line-height: 20px;\n  font-size: 16px;\n  font-weight: 500;\n}\n.s-dropdown.s-dropdown-md .q-btn__content .q-icon {\n  font-size: 12px;\n  margin: 11px 12px;\n}\n.s-dropdown.s-dropdown-lg {\n  min-width: 107px;\n}\n.s-dropdown.s-dropdown-lg .q-btn__content .block {\n  padding: 16px 24px 16px 28px;\n  line-height: 30px;\n  font-size: 18px;\n  font-weight: 500;\n}\n.s-dropdown.s-dropdown-lg .q-btn__content .q-icon {\n  font-size: 1.667em;\n  margin: 19px 20px;\n}\n.s-dropdown.disabled {\n  opacity: 1 !important;\n  border: none;\n  padding: 0;\n}\n.s-dropdown.disabled:before {\n  border: 1px solid #cccccc;\n  background: #e1e1e1 !important;\n}\n.s-dropdown.disabled .q-btn__content > .block {\n  color: #888888;\n}\n.s-dropdown.disabled .q-btn__content .block {\n  border-right: 1px solid #cccccc !important;\n}\n.s-dropdown-menu {\n  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1254901961);\n}\n.s-dropdown-menu .q-item {\n  padding: 4px 12px;\n  min-height: 0;\n}\n.s-dropdown-menu .q-item__section {\n  min-height: 0;\n  height: 20px;\n}\n.s-dropdown-menu .q-item:not(.q-item--clickable) {\n  cursor: default;\n  color: #aaaaaa;\n}";
+  var css_248z$r = ".s-dropdown {\n  min-height: 0;\n  padding: 0 !important;\n  line-height: normal;\n}\n.s-dropdown .q-btn__content {\n  min-height: 0;\n  align-items: center;\n}\n.s-dropdown .q-btn__content .block {\n  border-right: 1px solid color-mix(in srgb, white 25%, transparent);\n  height: 100%;\n}\n.s-dropdown .q-btn__content .q-icon {\n  padding: 0;\n  border-right: none;\n  color: white;\n}\n.s-dropdown.q-btn--outline .q-btn__content .block {\n  color: currentColor;\n  border-right: 1px solid currentColor;\n}\n.s-dropdown.q-btn--outline .q-btn__content .q-icon {\n  color: currentColor;\n}\n.s-dropdown.q-btn--outline:hover.q-focusable:focus > .q-focus-helper:before, .s-dropdown.q-btn--outline:hover.q-manual-focusable--focused > .q-focus-helper:before, .s-dropdown.q-btn--outline:hover.q-hoverable:hover > .q-focus-helper:before {\n  opacity: 0;\n}\n.s-dropdown.q-btn--outline:hover.q-focusable:focus > .q-focus-helper:after, .s-dropdown.q-btn--outline:hover.q-manual-focusable--focused > .q-focus-helper:after, .s-dropdown.q-btn--outline:hover.q-hoverable:hover > .q-focus-helper:after {\n  opacity: 0.55;\n}\n.s-dropdown:hover.q-focusable:focus > .q-focus-helper, .s-dropdown:hover.q-manual-focusable--focused > .q-focus-helper, .s-dropdown:hover.q-hoverable:hover > .q-focus-helper {\n  opacity: 0.3;\n  transition: opacity 0.4s cubic-bezier(0.25, 0.8, 0.5, 1);\n}\n.s-dropdown:hover.q-focusable:focus > .q-focus-helper:before, .s-dropdown:hover.q-manual-focusable--focused > .q-focus-helper:before, .s-dropdown:hover.q-hoverable:hover > .q-focus-helper:before {\n  opacity: 1.4;\n  transition: none;\n}\n.s-dropdown:hover.q-focusable:focus > .q-focus-helper:after, .s-dropdown:hover.q-manual-focusable--focused > .q-focus-helper:after, .s-dropdown:hover.q-hoverable:hover > .q-focus-helper:after {\n  opacity: 0;\n  transition: none;\n}\n.s-dropdown.s-dropdown-xs {\n  min-width: 67px;\n}\n.s-dropdown.s-dropdown-xs .q-btn__content .block {\n  padding: 2px 6px 2px 8px;\n  line-height: 20px;\n  font-size: 12px;\n  font-weight: 400;\n}\n.s-dropdown.s-dropdown-xs .q-btn__content .q-icon {\n  font-size: 12px;\n  margin: 5px 5px 5px 4px;\n}\n.s-dropdown.s-dropdown-sm {\n  min-width: 75px;\n}\n.s-dropdown.s-dropdown-sm .q-btn__content .block {\n  padding: 4px 10px 4px 12px;\n  line-height: 20px;\n  font-size: 12px;\n  font-weight: 400;\n}\n.s-dropdown.s-dropdown-sm .q-btn__content .q-icon {\n  font-size: 12px;\n  margin: 7px 8px;\n}\n.s-dropdown.s-dropdown-md {\n  min-width: 107px;\n}\n.s-dropdown.s-dropdown-md .q-btn__content .block {\n  padding: 6px 16px 6px 20px;\n  line-height: 20px;\n  font-size: 16px;\n  font-weight: 500;\n}\n.s-dropdown.s-dropdown-md .q-btn__content .q-icon {\n  font-size: 12px;\n  margin: 11px 12px;\n}\n.s-dropdown.s-dropdown-lg {\n  min-width: 107px;\n}\n.s-dropdown.s-dropdown-lg .q-btn__content .block {\n  padding: 16px 24px 16px 28px;\n  line-height: 30px;\n  font-size: 18px;\n  font-weight: 500;\n}\n.s-dropdown.s-dropdown-lg .q-btn__content .q-icon {\n  font-size: 1.667em;\n  margin: 19px 20px;\n}\n.s-dropdown.disabled {\n  opacity: 1 !important;\n  border: none;\n  padding: 0;\n}\n.s-dropdown.disabled:before {\n  border: 1px solid #cccccc;\n  background: #e1e1e1 !important;\n}\n.s-dropdown.disabled .q-btn__content > .block,\n.s-dropdown.disabled .q-btn__content > .q-icon {\n  color: #888888;\n}\n.s-dropdown.disabled .q-btn__content .block {\n  border-right: 1px solid #cccccc !important;\n}\n.s-dropdown-menu {\n  box-shadow: 0px 2px 6px 0px rgba(0, 0, 0, 0.1254901961);\n}\n.s-dropdown-menu .q-item {\n  padding: 4px 12px;\n  min-height: 0;\n}\n.s-dropdown-menu .q-item__section {\n  min-height: 0;\n  height: 20px;\n}\n.s-dropdown-menu .q-item:not(.q-item--clickable) {\n  cursor: default;\n  color: #aaaaaa;\n}";
   styleInject(css_248z$r);
 
   script$t.render = render$u;
@@ -3361,165 +3361,167 @@
   script$g.render = render$h;
 
   var script$f = vue.defineComponent({
-    name: 'SSelectSearchCheckbox',
-    emits: ['update:modelValue'],
-    components: {
-      QSelect: quasar.QSelect,
-      QItem: quasar.QItem,
-      QItemSection: quasar.QItemSection,
-      QImg: quasar.QImg,
-      QIcon: quasar.QIcon,
-      // QInput,
-    },
-    props: {
-      searchPlaceholder: { type: String, default: '검색' },
-      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,
-      },
-      placeholder: {
-        type: String,
-        default: '전체',
-      },
-      checkboxSearch: {
-        type: String,
-        default: '',
-      },
-      noData: {
-        type: String,
-        default: '데이터 없음',
+      name: 'SSelectSearchCheckbox',
+      emits: ['update:modelValue'],
+      components: {
+        QSelect: quasar.QSelect,
+        QItem: quasar.QItem,
+        QItemSection: quasar.QItemSection,
+        QImg: quasar.QImg,
+        QIcon: quasar.QIcon,
       },
-      popupContentClass: {
-        type: String,
+      props: {
+        searchPlaceholder: { type: String, default: '검색' },
+        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,
+        },
+        placeholder: {
+          type: String,
+          default: '전체',
+        },
+        checkboxSearch: {
+          type: String,
+          default: '',
+        },
+        noData: {
+          type: String,
+          default: '데이터 없음',
+        },
+        popupContentClass: {
+          type: String,
+        },
       },
-    },
-    setup: function setup(props, ref$1) {
-      var emit = ref$1.emit;
+      setup: function setup(props, ref$1) {
+        var emit = ref$1.emit;
 
-      var model = vue.ref(props.modelValue);
-      var filteredOptions = vue.ref(props.options);
-      var searchInput = vue.ref(null);
-      var search = vue.ref('');
-      var isDisable = props.options.find(function (v) { return Boolean(v.disable); });
+        var model = vue.ref(props.modelValue);
+        var filteredOptions = vue.ref(props.options);
+        var searchInput = vue.ref(null);
+        var search = vue.ref('');
+        var isDisable = props.options.find(function (v) { return Boolean(v.disable); });
 
-      function onRemoveChecked(detail) {
-        var idx = model.value.findIndex(function (v) { return v === ''; });
-        if (detail[props.optionValue] === '') {
-          vue.nextTick(function () {
-            model.value = [];
-          });
-        } else if (idx >= 0) {
-          vue.nextTick(function () {
-            model.value.splice(idx, 1);
-          });
+        function onRemoveChecked(detail) {
+          var idx = model.value.findIndex(function (v) { return v === ''; });
+          if (detail[props.optionValue] === '') {
+            vue.nextTick(function () {
+              model.value = [];
+            });
+          } else if (idx >= 0) {
+            vue.nextTick(function () {
+              model.value.splice(idx, 1);
+            });
+          }
         }
-      }
-      function onAddChecked(detail) {
-        if (detail[props.optionValue] === '') {
-          vue.nextTick(function () {
-            model.value = props.options
-              .filter(function (v) { return !v.category; })
-              .map(function (option) { return option[props.optionValue]; });
-          });
-        } else {
-          vue.nextTick(function () {
-            if (model.value.length === props.options.length - 1) {
+
+        function onAddChecked(detail) {
+          if (detail[props.optionValue] === '') {
+            vue.nextTick(function () {
               model.value = props.options
                 .filter(function (v) { return !v.category; })
                 .map(function (option) { return option[props.optionValue]; });
-            }
-          });
-        }
-      }
-
-      var onSearch = quasar.debounce(function (val) {
-        if (val === '') {
-          filteredOptions.value = props.options;
-        } else {
-          filteredOptions.value = props.options.filter(
-            function (v) { return (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1; }
-          );
+            });
+          } else {
+            vue.nextTick(function () {
+              if (model.value.length === props.options.length - 1) {
+                model.value = props.options
+                  .filter(function (v) { return !v.category; })
+                  .map(function (option) { return option[props.optionValue]; });
+              }
+            });
+          }
         }
-      }, 200);
-
-      vue.watch(
-        function () { return props.modelValue; },
-        function (val) {
-          model.value = val;
 
-          if (
-            props.options.filter(function (opt) { return opt[props.optionValue] && !opt.category; })
-              .length === model.value.length
-            && model.value.length
-          ) {
-            model.value = props.options
-              .filter(function (v) { return !v.category; })
-              .map(function (option) { return option[props.optionValue]; });
+        var onSearch = quasar.debounce(function (val) {
+          if (val === '') {
+            filteredOptions.value = props.options;
+          } else {
+            filteredOptions.value = props.options.filter(
+              function (v) { return (v[props.optionLabel] || v).toLowerCase().indexOf(val.toLowerCase()) > -1; }
+            );
           }
-        }
-      );
+        }, 200);
 
-      vue.watch(model, function (val) {
-        emit('update:modelValue', val);
-      });
+        vue.watch(
+          function () { return props.modelValue; },
+          function (val) {
+            model.value = val;
 
-      vue.watch(
-        function () { return props.options; },
-        function (val) {
-          filteredOptions.value = val;
-          vue.nextTick(function () {
-            if (props.useAll && model.value.filter(function (v) { return v; }).length < 1) {
+            if (
+              props.options.filter(function (opt) { return opt[props.optionValue] && !opt.category; }).length ===
+                model.value.length &&
+              model.value.length
+            ) {
               model.value = props.options
                 .filter(function (v) { return !v.category; })
                 .map(function (option) { return option[props.optionValue]; });
             }
-          });
-        }
-      );
+          }
+        );
 
-      vue.onBeforeMount(function () {
-        if (props.useAll && model.value.filter(function (v) { return v; }).length < 1) {
-          model.value = props.options
-            .filter(function (v) { return !v.category; })
-            .map(function (option) { return option[props.optionValue]; });
-        }
-      });
+        vue.watch(model, function (val) {
+          emit('update:modelValue', val);
+        });
 
-      return {
-        model: model,
-        selectDownArrowIcon: selectDownArrowIcon,
-        onRemoveChecked: onRemoveChecked,
-        onAddChecked: onAddChecked,
-        onSearch: onSearch,
-        isDisable: isDisable,
-        filteredOptions: filteredOptions,
-        search: search,
-        searchInput: searchInput,
-        searchIcon: searchIcon,
-        sSelectRef: vue.ref(null),
-      };
-    },
-  });
+        var allSelectedModel = function () {
+          console.log('model.value', model.value, model.value.filter(function (v) { return v; }).length < 1);
+          if (props.useAll && model.value.filter(function (v) { return v; }).length < 1) {
+            model.value = props.options
+              .filter(function (v) { return !v.category; })
+              .map(function (option) { return option[props.optionValue]; });
+          }
+        };
+
+        vue.watch(
+          function () { return props.options; },
+          function (val) {
+            model.value = [];
+            filteredOptions.value = val;
+            vue.nextTick(function () {
+              allSelectedModel();
+            });
+          }
+        );
+
+        vue.onBeforeMount(function () {
+          allSelectedModel();
+        });
+
+        return {
+          model: model,
+          selectDownArrowIcon: selectDownArrowIcon,
+          onRemoveChecked: onRemoveChecked,
+          onAddChecked: onAddChecked,
+          onSearch: onSearch,
+          isDisable: isDisable,
+          filteredOptions: filteredOptions,
+          search: search,
+          searchInput: searchInput,
+          searchIcon: searchIcon,
+          sSelectRef: vue.ref(null),
+        };
+      },
+    });
 
   var _hoisted_1$b = { class: "search-input-form-container" };
   var _hoisted_2$9 = { class: "select-search-input-form" };
@@ -3549,9 +3551,7 @@
       "map-options": "",
       autocomplete: "country",
       color: "positive",
-      "popup-content-class": 
-        ['s-select-checkbox-opts', _ctx.popupContentClass].join(' ')
-      ,
+      "popup-content-class": ['s-select-checkbox-opts', _ctx.popupContentClass].join(' '),
       class: "s-select-checkbox",
       "option-label": _ctx.optionLabel,
       "option-value": _ctx.optionValue,
@@ -3685,7 +3685,7 @@
       ]; }),
       _: 2
     }, [
-      (_ctx.useAll && _ctx.model[0] === '')
+      (_ctx.useAll && (_ctx.model[0] === '' || _ctx.model.includes('')))
         ? {
             name: "selected",
             fn: vue.withCtx(function () { return [
@@ -7311,7 +7311,7 @@
 
   /* eslint-disable no-multiple-empty-lines */
 
-  var version = '3.2.2';
+  var version = '3.2.4';
 
   function install(app) {
     app.component('s-breadcrumbs', script$D);