@opentinyvue/vue-filter 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,2 @@
+import Filter from './src/index';
+export default Filter;

package/lib/index.js

@@ -0,0 +1,51 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $prefix, $props, $setup } from "@opentinyvue/vue-common";
+import MobileFirstTemplate from "./mobile-first.js";
+var template = function template2(mode) {
+  var _process$env;
+  typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  return MobileFirstTemplate;
+};
+var Filter = defineComponent({
+  name: $prefix + "Filter",
+  props: _extends({}, $props, {
+    data: Array,
+    modelValue: Array,
+    columnNum: {
+      type: Number,
+      default: 3
+    },
+    filterGroup: Array,
+    filterValue: Array,
+    panelClass: String,
+    manual: Boolean,
+    customClass: String
+  }),
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+var version = "2.21.0";
+Filter.model = {
+  prop: "modelValue",
+  event: "update:modelValue"
+};
+Filter.install = function(Vue) {
+  Vue.component(Filter.name, Filter);
+};
+Filter.version = version;
+export {
+  Filter as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,437 @@
+import { renderless as renderless$1, api as api$1 } from '@opentinyvue/vue-renderless/filter/vue';
+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 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;
+  }
+  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];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var __vue2_script$1 = defineComponent({
+  emits: ["click", "update:modelValue"],
+  components: {
+    IconSubScript: IconSubScript()
+  },
+  model: {
+    prop: "modelValue",
+    event: "update:modelValue"
+  },
+  props: _extends({}, $props, {
+    modelValue: [String, Number, Array],
+    data: Array,
+    type: String,
+    multiple: Boolean,
+    columnNum: Number,
+    label: String
+  }),
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api,
+      mono: true
+    });
+  }
+});
+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 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 TagGroup = /* @__PURE__ */ function() {
+  return __component__$1.exports;
+}();
+var __vue2_script = defineComponent({
+  components: {
+    TagGroup,
+    TinyFilterBar: FilterBar,
+    TinyButton: Button,
+    IconUnfilter: IconUnfilter(),
+    IconChevronDown: IconChevronDown(),
+    IconChevronUp: IconChevronUp()
+  },
+  emits: ["update:modelValue", "cancel", "panel", "update:filter-value"],
+  props: _extends({}, $props, {
+    data: Array,
+    modelValue: Array,
+    columnNum: {
+      type: Number,
+      default: 3
+    },
+    filterGroup: Array,
+    filterValue: Array,
+    panelClass: String,
+    manual: Boolean,
+    customClass: String
+  }),
+  setup: function setup2(props, context) {
+    return setup({
+      props,
+      context,
+      renderless: renderless$1,
+      api: api$1
+    });
+  }
+});
+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
+    },
+    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);
+        }
+      },
+      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"
+      },
+      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];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };

package/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@opentinyvue/vue-filter",
+  "version": "2.21.0",
+  "description": "",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "sideEffects": false,
+  "type": "module",
+  "dependencies": {
+    "@opentinyvue/vue-button": "~2.21.0",
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-filter-bar": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0"
+  },
+  "license": "MIT",
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;