@opentinyvue/vue-filter 2.22.0 → 3.22.0

package/lib/index.js

@@ -37,7 +37,7 @@ var Filter = defineComponent({
     });
   }
 });
-var version = "2.22.0";
+var version = "3.22.0";
 Filter.model = {
   prop: "modelValue",
   event: "update:modelValue"

package/lib/mobile-first.js

@@ -2,38 +2,42 @@ import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-rende
 import { defineComponent, setup, $props } from '@opentinyvue/vue-common';
 import { IconSubScript, IconUnfilter, IconChevronDown, IconChevronUp } from '@opentinyvue/vue-icon';
 import { renderless, api } from '@opentinyvue/vue-renderless/filter/tag-group';
+import { resolveComponent, openBlock, createElementBlock, toDisplayString, createCommentVNode, createElementVNode, withDirectives, normalizeClass, normalizeStyle, withModifiers, vShow, Fragment, renderList, createBlock, createVNode, createSlots, withCtx, renderSlot, createTextVNode } from 'vue';
 import FilterBar from '@opentinyvue/vue-filter-bar';
 import Button from '@opentinyvue/vue-button';
 
-function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
-  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
-  if (render) {
-    options.render = render;
-    options.staticRenderFns = staticRenderFns;
-    options._compiled = true;
+function _createForOfIteratorHelperLoose(r, e) {
+  var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"];
+  if (t) return (t = t.call(r)).next.bind(t);
+  if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) {
+    t && (r = t);
+    var o = 0;
+    return function() {
+      return o >= r.length ? { done: true } : { done: false, value: r[o++] };
+    };
   }
-  var hook;
-  if (injectStyles) {
-    hook = injectStyles;
-  }
-  if (hook) {
-    if (options.functional) {
-      options._injectStyles = hook;
-      var originalRender = options.render;
-      options.render = function renderWithStyleInjection(h, context) {
-        hook.call(context);
-        return originalRender(h, context);
-      };
-    } else {
-      var existing = options.beforeCreate;
-      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
-    }
+  throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.");
+}
+function _unsupportedIterableToArray(r, a) {
+  if (r) {
+    if ("string" == typeof r) return _arrayLikeToArray(r, a);
+    var t = {}.toString.call(r).slice(8, -1);
+    return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0;
   }
-  return {
-    exports: scriptExports,
-    options
-  };
 }
+function _arrayLikeToArray(r, a) {
+  (null == a || a > r.length) && (a = r.length);
+  for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
+  return n;
+}
+var _export_sfc = function _export_sfc2(sfc, props) {
+  var target = sfc.__vccOpts || sfc;
+  for (var _iterator = _createForOfIteratorHelperLoose(props), _step; !(_step = _iterator()).done; ) {
+    var _step$value = _step.value, key = _step$value[0], val = _step$value[1];
+    target[key] = val;
+  }
+  return target;
+};
 
 function _extends() {
   return _extends = Object.assign ? Object.assign.bind() : function(n) {
@@ -44,7 +48,7 @@ function _extends() {
     return n;
   }, _extends.apply(null, arguments);
 }
-var __vue2_script$1 = defineComponent({
+var _sfc_main$1 = defineComponent({
   emits: ["click", "update:modelValue"],
   components: {
     IconSubScript: IconSubScript()
@@ -71,79 +75,83 @@ var __vue2_script$1 = defineComponent({
     });
   }
 });
-var render$1 = function render$12() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    staticClass: "clear-both",
-    attrs: {
-      "data-tag": "tiny-filter-tag-group overflow-hidden"
-    }
-  }, [_vm.label ? _c("div", {
-    staticClass: "h-5 text-sm leading-5 overflow-hidden text-ellipsis whitespace-nowrap",
-    attrs: {
-      "data-tag": "tag-group-label"
-    }
-  }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("div", {
-    staticClass: "text-left -mr-3 overflow-hidden clear-both",
-    attrs: {
-      "data-tag": "tag-group-tags"
-    }
-  }, [_c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.type === "tag" && _vm.multiple,
-      expression: "type === 'tag' && multiple"
-    }],
-    class: ["h-9 mt-3 float-left relative"],
-    style: {
-      width: _vm.state.tagWidth
-    }
-  }, [_c("span", {
-    class: ["h-full block p-2 text-center rounded-sm truncate cursor-pointer border-0.5 mr-3", _vm.state.selected.length === 0 ? "border-current text-color-brand bg-color-info-primary-subtler" : "border-transparent bg-color-bg-3"],
-    on: {
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.selectOptionAll.apply(null, arguments);
-      }
-    }
-  }, [_vm._v(_vm._s(_vm.t("ui.base.all")))])]), _vm._l(_vm.data, function(item, index) {
-    return _c("div", {
-      key: index,
-      class: ["h-9 mt-3 float-left relative"],
-      style: {
-        width: _vm.state.tagWidth
-      }
-    }, [_vm.state.selected.indexOf(item.value) !== -1 && _vm.multiple ? _c("IconSubScript", {
-      staticClass: "absolute right-3 w-4 h-4 fill-color-icon-focus"
-    }) : _vm._e(), _c("span", {
-      class: ["h-full block p-2 text-center rounded-sm truncate cursor-pointer border-0.5 mr-3", _vm.state.selected.indexOf(item.value) !== -1 ? "border-current text-color-brand bg-color-info-primary-subtler" : "border-transparent bg-color-bg-3"],
-      attrs: {
-        "title": item.label
-      },
-      on: {
-        "click": function click($event) {
-          $event.stopPropagation();
-          return _vm.selectOption(item.value);
-        }
-      }
-    }, [_vm._v(_vm._s(item.label))])], 1);
-  })], 2)]);
+var _hoisted_1$1 = {
+  "data-tag": "tiny-filter-tag-group overflow-hidden",
+  class: "clear-both"
 };
-var staticRenderFns$1 = [];
-var __cssModules$1 = {};
-var __component__$1 = /* @__PURE__ */ normalizeComponent(__vue2_script$1, render$1, staticRenderFns$1, false, __vue2_injectStyles$1);
-function __vue2_injectStyles$1(context) {
-  for (var o in __cssModules$1) {
-    this[o] = __cssModules$1[o];
-  }
+var _hoisted_2$1 = {
+  key: 0,
+  "data-tag": "tag-group-label",
+  class: "h-5 text-sm leading-5 overflow-hidden text-ellipsis whitespace-nowrap"
+};
+var _hoisted_3$1 = {
+  "data-tag": "tag-group-tags",
+  class: "text-left -mr-3 overflow-hidden clear-both"
+};
+var _hoisted_4$1 = ["title", "onClick"];
+function _sfc_render$1(_ctx, _cache, $props2, $setup, $data, $options) {
+  var _component_IconSubScript = resolveComponent("IconSubScript");
+  return openBlock(), createElementBlock("div", _hoisted_1$1, [_ctx.label ? (openBlock(), createElementBlock(
+    "div",
+    _hoisted_2$1,
+    toDisplayString(_ctx.label),
+    1
+    /* TEXT */
+  )) : createCommentVNode("v-if", true), createElementVNode("div", _hoisted_3$1, [withDirectives(createElementVNode(
+    "div",
+    {
+      class: normalizeClass(["h-9 mt-3 float-left relative"]),
+      style: normalizeStyle({
+        width: _ctx.state.tagWidth
+      })
+    },
+    [createElementVNode(
+      "span",
+      {
+        class: normalizeClass(["h-full block p-2 text-center rounded-sm truncate cursor-pointer border-0.5 mr-3", _ctx.state.selected.length === 0 ? "border-current text-color-brand bg-color-info-primary-subtler" : "border-transparent bg-color-bg-3"]),
+        onClick: _cache[0] || (_cache[0] = withModifiers(function() {
+          return _ctx.selectOptionAll && _ctx.selectOptionAll.apply(_ctx, arguments);
+        }, ["stop"]))
+      },
+      toDisplayString(_ctx.t("ui.base.all")),
+      3
+      /* TEXT, CLASS */
+    )],
+    4
+    /* STYLE */
+  ), [[vShow, _ctx.type === "tag" && _ctx.multiple]]), (openBlock(true), createElementBlock(
+    Fragment,
+    null,
+    renderList(_ctx.data, function(item, index) {
+      return openBlock(), createElementBlock(
+        "div",
+        {
+          key: index,
+          class: normalizeClass(["h-9 mt-3 float-left relative"]),
+          style: normalizeStyle({
+            width: _ctx.state.tagWidth
+          })
+        },
+        [_ctx.state.selected.indexOf(item.value) !== -1 && _ctx.multiple ? (openBlock(), createBlock(_component_IconSubScript, {
+          key: 0,
+          class: "absolute right-3 w-4 h-4 fill-color-icon-focus"
+        })) : createCommentVNode("v-if", true), createElementVNode("span", {
+          class: normalizeClass(["h-full block p-2 text-center rounded-sm truncate cursor-pointer border-0.5 mr-3", _ctx.state.selected.indexOf(item.value) !== -1 ? "border-current text-color-brand bg-color-info-primary-subtler" : "border-transparent bg-color-bg-3"]),
+          title: item.label,
+          onClick: withModifiers(function($event) {
+            return _ctx.selectOption(item.value);
+          }, ["stop"])
+        }, toDisplayString(item.label), 11, _hoisted_4$1)],
+        4
+        /* STYLE */
+      );
+    }),
+    128
+    /* KEYED_FRAGMENT */
+  ))])]);
 }
-var TagGroup = /* @__PURE__ */ function() {
-  return __component__$1.exports;
-}();
-var __vue2_script = defineComponent({
+var TagGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["render", _sfc_render$1]]);
+var _sfc_main = defineComponent({
   components: {
     TagGroup,
     TinyFilterBar: FilterBar,
@@ -175,263 +183,254 @@ var __vue2_script = defineComponent({
     });
   }
 });
-var render = function render2() {
-  var _vm = this;
-  var _h = _vm.$createElement;
-  var _c = _vm._self._c || _h;
-  return _c("div", {
-    ref: "root",
-    class: _vm.m("text-sm text-color-text-primary relative", _vm.customClass),
-    attrs: {
-      "data-tag": "tiny-filter"
-    }
-  }, [_c("tiny-filter-bar", {
-    attrs: {
-      "model-value": _vm.state.showPanelIndex,
-      "data": _vm.state.labelList
-    },
-    on: {
-      "click": _vm.panelToggle
-    },
-    scopedSlots: _vm._u([_vm.filterGroup ? {
-      key: "icon",
-      fn: function fn() {
-        return [_c("div", {
-          staticClass: "w-full",
-          attrs: {
-            "data-tag": "filter-icon"
-          },
-          on: {
-            "click": function click($event) {
-              return _vm.panelToggle("filter");
-            }
-          }
-        }, [_vm._t("icon", function() {
-          return [_c("div", {
-            staticClass: "w-10 ml-2 flex-none flex justify-center cursor-pointer"
-          }, [_c("IconUnfilter", {
-            class: _vm.state.filterPanel.show || _vm.state.hasFilterValue ? " text-color-brand" : "",
-            attrs: {
-              "custom-class": "w-5 h-5 fill-current"
-            }
-          })], 1)];
-        }, {
-          "active": _vm.state.filterPanel.show || _vm.state.hasFilterValue,
-          "show": _vm.state.filterPanel.show
-        })], 2)];
-      },
-      proxy: true
-    } : null], null, true)
-  }, [_vm._t("default", null, {
-    "active": _vm.state.showPanelIndex,
-    "value": _vm.modelValue,
-    "labels": _vm.state.labelList
-  })], 2), _c("div", {
-    ref: "maskPoint"
-  }), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.manual && _vm.state.showPanel,
-      expression: "!manual && state.showPanel"
-    }],
-    ref: "panelMask",
-    staticClass: "fixed left-0 right-0 z-40 w-full h-full bg-color-bg-7",
-    attrs: {
-      "data-tag": "panel-mask"
-    },
-    on: {
-      "click": _vm.cancel
-    }
-  }), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: !_vm.manual && _vm.state.showPanel,
-      expression: "!manual && state.showPanel"
-    }],
-    ref: "panel",
-    class: _vm.m("absolute top-11 flex flex-col z-40 w-full bg-color-bg-1 overflow-hidden", _vm.panelClass),
-    attrs: {
-      "data-tag": "tiny-filter-panel"
-    }
-  }, [_c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.state.selectPanel.config.type !== "list",
-      expression: "state.selectPanel.config.type !== 'list'"
-    }],
-    staticClass: "flex-auto m-5 overflow-x-visible overflow-y-auto scrollbar-size-0",
-    attrs: {
-      "data-tag": "panel-scrollbar"
-    }
-  }, [_c("TagGroup", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.state.showPanelIndex !== -1,
-      expression: "state.showPanelIndex !== -1"
-    }],
-    attrs: {
-      "data-tag": "select-group",
-      "data": _vm.state.selectPanel.config.options,
-      "label": _vm.state.selectPanel.config.label,
-      "type": _vm.state.selectPanel.config.type,
-      "multiple": _vm.state.selectPanel.config.multiple,
-      "column-num": _vm.columnNum
-    },
-    on: {
-      "click": _vm.selectOption
+var _hoisted_1 = {
+  class: "w-10 ml-2 flex-none flex justify-center cursor-pointer"
+};
+var _hoisted_2 = {
+  ref: "maskPoint"
+};
+var _hoisted_3 = {
+  "data-tag": "panel-scrollbar",
+  class: "flex-auto m-5 overflow-x-visible overflow-y-auto scrollbar-size-0"
+};
+var _hoisted_4 = {
+  "data-tag": "filter-list",
+  class: "leading-[theme(spacing.12)] cursor-pointer h-full py-2 overflow-x-visible overflow-y-auto scrollbar-size-0"
+};
+var _hoisted_5 = ["title", "onClick"];
+var _hoisted_6 = {
+  "data-tag": "filter-footer",
+  class: "flex items-center justify-end mx-5 mb-5"
+};
+function _sfc_render(_ctx, _cache, $props2, $setup, $data, $options) {
+  var _component_IconUnfilter = resolveComponent("IconUnfilter");
+  var _component_tiny_filter_bar = resolveComponent("tiny-filter-bar");
+  var _component_TagGroup = resolveComponent("TagGroup");
+  var _component_tiny_button = resolveComponent("tiny-button");
+  return openBlock(), createElementBlock(
+    "div",
+    {
+      ref: "root",
+      "data-tag": "tiny-filter",
+      class: normalizeClass(_ctx.m("text-sm text-color-text-primary relative", _ctx.customClass))
     },
-    model: {
-      value: _vm.state.selectPanel.selected,
-      callback: function callback($$v) {
-        _vm.$set(_vm.state.selectPanel, "selected", $$v);
-      },
-      expression: "state.selectPanel.selected"
-    }
-  }), _vm.filterGroup ? _vm._l(_vm.filterGroup, function(item, index) {
-    return _c("TagGroup", {
-      directives: [{
-        name: "show",
-        rawName: "v-show",
-        value: _vm.state.filterPanel.show,
-        expression: "state.filterPanel.show"
-      }],
-      key: index,
-      class: [{
-        "mt-5": index !== 0
-      }],
-      attrs: {
-        "data-tag": "filter-group",
-        "data": item.options,
-        "label": item.label,
-        "type": item.type,
-        "multiple": item.multiple,
-        "column-num": _vm.columnNum
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.filterSelectOption($event, index);
-        }
+    [createVNode(_component_tiny_filter_bar, {
+      "model-value": _ctx.state.showPanelIndex,
+      data: _ctx.state.labelList,
+      onClick: _ctx.panelToggle
+    }, createSlots({
+      default: withCtx(function() {
+        return [renderSlot(_ctx.$slots, "default", {
+          active: _ctx.state.showPanelIndex,
+          value: _ctx.modelValue,
+          labels: _ctx.state.labelList
+        })];
+      }),
+      _: 2
+      /* DYNAMIC */
+    }, [_ctx.filterGroup ? {
+      name: "icon",
+      fn: withCtx(function() {
+        return [createElementVNode("div", {
+          "data-tag": "filter-icon",
+          class: "w-full",
+          onClick: _cache[0] || (_cache[0] = function($event) {
+            return _ctx.panelToggle("filter");
+          })
+        }, [renderSlot(_ctx.$slots, "icon", {
+          active: _ctx.state.filterPanel.show || _ctx.state.hasFilterValue,
+          show: _ctx.state.filterPanel.show
+        }, function() {
+          return [createElementVNode("div", _hoisted_1, [createVNode(_component_IconUnfilter, {
+            "custom-class": "w-5 h-5 fill-current",
+            class: normalizeClass(_ctx.state.filterPanel.show || _ctx.state.hasFilterValue ? " text-color-brand" : "")
+          }, null, 8, ["class"])])];
+        })])];
+      }),
+      key: "0"
+    } : void 0]), 1032, ["model-value", "data", "onClick"]), createElementVNode(
+      "div",
+      _hoisted_2,
+      null,
+      512
+      /* NEED_PATCH */
+    ), withDirectives(createElementVNode(
+      "div",
+      {
+        ref: "panelMask",
+        "data-tag": "panel-mask",
+        class: "fixed left-0 right-0 z-40 w-full h-full bg-color-bg-7",
+        onClick: _cache[1] || (_cache[1] = function() {
+          return _ctx.cancel && _ctx.cancel.apply(_ctx, arguments);
+        })
       },
-      model: {
-        value: _vm.state.filterPanel.selected[index],
-        callback: function callback($$v) {
-          _vm.$set(_vm.state.filterPanel.selected, index, $$v);
-        },
-        expression: "state.filterPanel.selected[index]"
-      }
-    });
-  }) : _vm._e()], 2), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.state.selectPanel.config.type === "list",
-      expression: "state.selectPanel.config.type === 'list'"
-    }],
-    staticClass: "leading-[theme(spacing.12)] cursor-pointer h-full py-2 overflow-x-visible overflow-y-auto scrollbar-size-0",
-    attrs: {
-      "data-tag": "filter-list"
-    }
-  }, [_vm.state.selectPanel.config.showAll ? _c("div", {
-    class: ["px-5 truncate", {
-      "text-color-brand": _vm.state.selectPanel.selected.length === 0
-    }],
-    on: {
-      "click": function click($event) {
-        $event.stopPropagation();
-        return _vm.selectOption();
-      }
-    }
-  }, [_vm._v(" " + _vm._s(_vm.t("ui.base.all")) + " ")]) : _vm._e(), _vm._l(_vm.state.selectPanel.config.options, function(item, index) {
-    return _c("div", {
-      key: index,
-      class: ["px-5 truncate", {
-        "text-color-brand": _vm.state.selectPanel.selected.indexOf(item.value) !== -1
-      }],
-      attrs: {
-        "title": item.label
-      },
-      on: {
-        "click": function click($event) {
-          $event.stopPropagation();
-          return _vm.selectOption(item.value);
-        }
-      }
-    }, [_vm._v(" " + _vm._s(item.label) + " ")]);
-  })], 2), _c("div", {
-    directives: [{
-      name: "show",
-      rawName: "v-show",
-      value: _vm.state.selectPanel.config.multiple || _vm.state.filterPanel.show,
-      expression: "state.selectPanel.config.multiple || state.filterPanel.show"
-    }],
-    staticClass: "flex items-center justify-end mx-5 mb-5",
-    attrs: {
-      "data-tag": "filter-footer"
-    }
-  }, [_vm._t("footer", function() {
-    return [_c("tiny-button", {
-      directives: [{
-        name: "show",
-        rawName: "v-show",
-        value: !_vm.state.selectPanel.config.multiple,
-        expression: "!state.selectPanel.config.multiple"
-      }],
-      key: "btn1",
-      attrs: {
-        "tiny_mode": "mobile-first",
-        "size": "medium",
-        "custom-class": "sm:max-w-full mr-4 flex-1"
+      null,
+      512
+      /* NEED_PATCH */
+    ), [[vShow, !_ctx.manual && _ctx.state.showPanel]]), withDirectives(createElementVNode(
+      "div",
+      {
+        ref: "panel",
+        "data-tag": "tiny-filter-panel",
+        class: normalizeClass(_ctx.m("absolute top-11 flex flex-col z-40 w-full bg-color-bg-1 overflow-hidden", _ctx.panelClass))
       },
-      on: {
-        "click": _vm.cancel
-      }
-    }, [_vm._v(_vm._s(_vm.t("ui.base.cancel")))]), _c("tiny-button", {
-      key: "btn2",
-      attrs: {
-        "tiny_mode": "mobile-first",
-        "size": "medium",
-        "reset-time": 0,
-        "custom-class": "sm:max-w-full mr-4 flex-1"
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.reset(_vm.state.filterPanel.show);
-        }
-      }
-    }, [_vm._v(_vm._s(_vm.t("ui.base.reset")))]), _c("tiny-button", {
-      key: "btn3",
-      attrs: {
-        "tiny_mode": "mobile-first",
-        "type": "primary",
-        "size": "medium",
-        "custom-class": "sm:max-w-full flex-1"
-      },
-      on: {
-        "click": function click($event) {
-          return _vm.confirm(_vm.state.filterPanel.show);
-        }
-      }
-    }, [_vm._v(_vm._s(_vm.t("ui.base.confirm")))])];
-  }, {
-    "cancel": _vm.cancel,
-    "reset": _vm.reset,
-    "confirm": _vm.confirm
-  })], 2)])], 1);
-};
-var staticRenderFns = [];
-var __cssModules = {};
-var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
-function __vue2_injectStyles(context) {
-  for (var o in __cssModules) {
-    this[o] = __cssModules[o];
-  }
+      [withDirectives(createElementVNode(
+        "div",
+        _hoisted_3,
+        [withDirectives(createVNode(_component_TagGroup, {
+          "data-tag": "select-group",
+          modelValue: _ctx.state.selectPanel.selected,
+          "onUpdate:modelValue": _cache[2] || (_cache[2] = function($event) {
+            return _ctx.state.selectPanel.selected = $event;
+          }),
+          data: _ctx.state.selectPanel.config.options,
+          label: _ctx.state.selectPanel.config.label,
+          type: _ctx.state.selectPanel.config.type,
+          multiple: _ctx.state.selectPanel.config.multiple,
+          "column-num": _ctx.columnNum,
+          onClick: _ctx.selectOption
+        }, null, 8, ["modelValue", "data", "label", "type", "multiple", "column-num", "onClick"]), [[vShow, _ctx.state.showPanelIndex !== -1]]), _ctx.filterGroup ? (openBlock(true), createElementBlock(
+          Fragment,
+          {
+            key: 0
+          },
+          renderList(_ctx.filterGroup, function(item, index) {
+            return withDirectives((openBlock(), createBlock(_component_TagGroup, {
+              "data-tag": "filter-group",
+              key: index,
+              modelValue: _ctx.state.filterPanel.selected[index],
+              "onUpdate:modelValue": function onUpdateModelValue($event) {
+                return _ctx.state.filterPanel.selected[index] = $event;
+              },
+              data: item.options,
+              label: item.label,
+              type: item.type,
+              multiple: item.multiple,
+              "column-num": _ctx.columnNum,
+              class: normalizeClass([{
+                "mt-5": index !== 0
+              }]),
+              onClick: function onClick($event) {
+                return _ctx.filterSelectOption($event, index);
+              }
+            }, null, 8, ["modelValue", "onUpdate:modelValue", "data", "label", "type", "multiple", "column-num", "class", "onClick"])), [[vShow, _ctx.state.filterPanel.show]]);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        )) : createCommentVNode("v-if", true)],
+        512
+        /* NEED_PATCH */
+      ), [[vShow, _ctx.state.selectPanel.config.type !== "list"]]), withDirectives(createElementVNode(
+        "div",
+        _hoisted_4,
+        [_ctx.state.selectPanel.config.showAll ? (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 0,
+            class: normalizeClass(["px-5 truncate", {
+              "text-color-brand": _ctx.state.selectPanel.selected.length === 0
+            }]),
+            onClick: _cache[3] || (_cache[3] = withModifiers(function($event) {
+              return _ctx.selectOption();
+            }, ["stop"]))
+          },
+          toDisplayString(_ctx.t("ui.base.all")),
+          3
+          /* TEXT, CLASS */
+        )) : createCommentVNode("v-if", true), (openBlock(true), createElementBlock(
+          Fragment,
+          null,
+          renderList(_ctx.state.selectPanel.config.options, function(item, index) {
+            return openBlock(), createElementBlock("div", {
+              key: index,
+              title: item.label,
+              class: normalizeClass(["px-5 truncate", {
+                "text-color-brand": _ctx.state.selectPanel.selected.indexOf(item.value) !== -1
+              }]),
+              onClick: withModifiers(function($event) {
+                return _ctx.selectOption(item.value);
+              }, ["stop"])
+            }, toDisplayString(item.label), 11, _hoisted_5);
+          }),
+          128
+          /* KEYED_FRAGMENT */
+        ))],
+        512
+        /* NEED_PATCH */
+      ), [[vShow, _ctx.state.selectPanel.config.type === "list"]]), withDirectives(createElementVNode(
+        "div",
+        _hoisted_6,
+        [renderSlot(_ctx.$slots, "footer", {
+          cancel: _ctx.cancel,
+          reset: _ctx.reset,
+          confirm: _ctx.confirm
+        }, function() {
+          return [withDirectives(createVNode(_component_tiny_button, {
+            tiny_mode: "mobile-first",
+            key: "btn1",
+            size: "medium",
+            "custom-class": "sm:max-w-full mr-4 flex-1",
+            onClick: _ctx.cancel
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.base.cancel")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          }, 8, ["onClick"]), [[vShow, !_ctx.state.selectPanel.config.multiple]]), createVNode(_component_tiny_button, {
+            tiny_mode: "mobile-first",
+            key: "btn2",
+            size: "medium",
+            "reset-time": 0,
+            "custom-class": "sm:max-w-full mr-4 flex-1",
+            onClick: _cache[4] || (_cache[4] = function($event) {
+              return _ctx.reset(_ctx.state.filterPanel.show);
+            })
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.base.reset")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          }), createVNode(_component_tiny_button, {
+            tiny_mode: "mobile-first",
+            key: "btn3",
+            type: "primary",
+            size: "medium",
+            "custom-class": "sm:max-w-full flex-1",
+            onClick: _cache[5] || (_cache[5] = function($event) {
+              return _ctx.confirm(_ctx.state.filterPanel.show);
+            })
+          }, {
+            default: withCtx(function() {
+              return [createTextVNode(
+                toDisplayString(_ctx.t("ui.base.confirm")),
+                1
+                /* TEXT */
+              )];
+            }),
+            _: 1
+            /* STABLE */
+          })];
+        })],
+        512
+        /* NEED_PATCH */
+      ), [[vShow, _ctx.state.selectPanel.config.multiple || _ctx.state.filterPanel.show]])],
+      2
+      /* CLASS */
+    ), [[vShow, !_ctx.manual && _ctx.state.showPanel]])],
+    2
+    /* CLASS */
+  );
 }
-var mobileFirst = /* @__PURE__ */ function() {
-  return __component__.exports;
-}();
+var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 
 export { mobileFirst as default };

package/package.json

@@ -1,17 +1,17 @@
 {
   "name": "@opentinyvue/vue-filter",
-  "version": "2.22.0",
+  "version": "3.22.0",
   "description": "",
   "main": "./lib/index.js",
   "module": "./lib/index.js",
   "sideEffects": false,
   "type": "module",
   "dependencies": {
-    "@opentinyvue/vue-button": "~2.22.0",
-    "@opentinyvue/vue-common": "~2.22.0",
-    "@opentinyvue/vue-filter-bar": "~2.22.0",
+    "@opentinyvue/vue-button": "~3.22.0",
+    "@opentinyvue/vue-common": "~3.22.0",
+    "@opentinyvue/vue-filter-bar": "~3.22.0",
     "@opentinyvue/vue-renderless": "~3.22.0",
-    "@opentinyvue/vue-icon": "~2.22.0"
+    "@opentinyvue/vue-icon": "~3.22.0"
   },
   "license": "MIT",
   "types": "index.d.ts",

package/src/index.d.ts

@@ -1,2 +1,44 @@
-declare const _default: any;
+declare const _default: import("@vue/runtime-core").DefineComponent<{
+    data: ArrayConstructor;
+    modelValue: ArrayConstructor;
+    columnNum: {
+        type: NumberConstructor;
+        default: number;
+    };
+    filterGroup: ArrayConstructor;
+    filterValue: ArrayConstructor;
+    panelClass: StringConstructor;
+    manual: BooleanConstructor;
+    customClass: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}, () => import("@vue/runtime-core").VNode<import("@vue/runtime-core").RendererNode, import("@vue/runtime-core").RendererElement, {
+    [key: string]: any;
+}>, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    data: ArrayConstructor;
+    modelValue: ArrayConstructor;
+    columnNum: {
+        type: NumberConstructor;
+        default: number;
+    };
+    filterGroup: ArrayConstructor;
+    filterValue: ArrayConstructor;
+    panelClass: StringConstructor;
+    manual: BooleanConstructor;
+    customClass: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}>>, {
+    manual: boolean;
+    tiny_mode_root: boolean;
+    columnNum: number;
+}, {}>;
 export default _default;

package/src/mobile-first.vue.d.ts

@@ -1,2 +1,56 @@
-declare const _default: any;
+declare const _default: import("@vue/runtime-core").DefineComponent<{
+    data: ArrayConstructor;
+    modelValue: ArrayConstructor;
+    columnNum: {
+        type: NumberConstructor;
+        default: number;
+    };
+    filterGroup: ArrayConstructor;
+    filterValue: ArrayConstructor;
+    panelClass: StringConstructor;
+    manual: BooleanConstructor;
+    customClass: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("cancel" | "update:modelValue" | "panel" | "update:filter-value")[], "cancel" | "update:modelValue" | "panel" | "update:filter-value", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    data: ArrayConstructor;
+    modelValue: ArrayConstructor;
+    columnNum: {
+        type: NumberConstructor;
+        default: number;
+    };
+    filterGroup: ArrayConstructor;
+    filterValue: ArrayConstructor;
+    panelClass: StringConstructor;
+    manual: BooleanConstructor;
+    customClass: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}>> & {
+    onCancel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onPanel?: ((...args: any[]) => any) | undefined;
+    "onUpdate:filter-value"?: ((...args: any[]) => any) | undefined;
+}, {
+    manual: boolean;
+    tiny_mode_root: boolean;
+    columnNum: number;
+}, {}>;
 export default _default;

package/src/tag-group.vue.d.ts

@@ -1,2 +1,43 @@
-declare const _default: any;
+declare const _default: import("@vue/runtime-core").DefineComponent<{
+    modelValue: (StringConstructor | NumberConstructor | ArrayConstructor)[];
+    data: ArrayConstructor;
+    type: StringConstructor;
+    multiple: BooleanConstructor;
+    columnNum: NumberConstructor;
+    label: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}, {
+    t: (this: any, path: any, options?: any) => any;
+    vm: any;
+    f: (props: any, attrs?: {}) => {};
+    a: (attrs: any, filters: any, include: any) => {};
+    d: (props: any) => void;
+    dp: (props: any) => void;
+    gcls: (key: any) => any;
+    m: (...cssClasses: any[]) => string;
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("click" | "update:modelValue")[], "click" | "update:modelValue", import("@vue/runtime-core").PublicProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<{
+    modelValue: (StringConstructor | NumberConstructor | ArrayConstructor)[];
+    data: ArrayConstructor;
+    type: StringConstructor;
+    multiple: BooleanConstructor;
+    columnNum: NumberConstructor;
+    label: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+}>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}, {
+    tiny_mode_root: boolean;
+    multiple: boolean;
+}, {}>;
 export default _default;