@opentiny/vue-numeric - npm Package Compare versions

Comparing version 3.12.0 to 3.13.0-alpha.0

lib/index.js

@@ -20,9 +20,11 @@ function _extends() {
 var template = function template2(mode) {
-  if ("pc" === (process.env.TINY_MODE || mode)) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("pc" === (tinyMode || mode)) {
     return PcTemplate;
   }
-  if ("mobile" === (process.env.TINY_MODE || mode)) {
+  if ("mobile" === (tinyMode || mode)) {
     return MobileTemplate;
   }
-  if ("mobile-first" === (process.env.TINY_MODE || mode)) {
+  if ("mobile-first" === (tinyMode || mode)) {
     return MobileFirstTemplate;
@@ -43,3 +45,4 @@ }
   },
-  COMPONENT_NAME: "FormItem"
+  COMPONENT_NAME: "FormItem",
+  FILTER_OPTION: ["ui.numeric.equalTo", "ui.numeric.notEqualTo", "ui.numeric.moreThan", "ui.numeric.moreThanOrEqualTo", "ui.numeric.lessThan", "ui.numeric.lessThanOrEqualTo", "ui.numeric.empty", "ui.numeric.nonEmpty"]
 };
@@ -142,2 +145,20 @@ var numericProps = _extends({}, $props, {
     default: false
+  },
+  title: {
+    type: String,
+    default: ""
+  },
+  tip: String,
+  shape: String,
+  clearable: {
+    type: Boolean,
+    default: true
+  },
+  filter: {
+    type: Boolean,
+    default: true
+  },
+  blank: {
+    type: Boolean,
+    default: true
   }
@@ -156,3 +177,3 @@ });
 });
-var version = "3.12.0";
+var version = "3.13.0-alpha.0";
 Numeric.model = {
@@ -159,0 +180,0 @@ prop: "modelValue",

lib/mobile-first.js

@@ -5,3 +5,3 @@ import { renderless, api } from "@opentiny/vue-renderless/numeric/vue";
 import { iconChevronDown, iconChevronUp, iconMinus, iconPlus } from "@opentiny/vue-icon";
-import { resolveDirective, openBlock, createElementBlock, createElementVNode, normalizeClass, withModifiers, withDirectives, withKeys, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from "vue";
+import { resolveDirective, openBlock, createElementBlock, normalizeClass, createElementVNode, withModifiers, withDirectives, withKeys, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -53,25 +53,25 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 var classes = {
-  "numeric": "relative flex items-center w-24 h-7 text-sm",
+  "numeric": "relative flex items-center w-24 h-7 text-sm bg-color-bg-1 leading-none",
   "numeric_display_none": "hidden",
-  "numeric_size": "sm:w-24 sm:h-7 sm:text-xs",
-  "numeric_medium": "sm:w-32 sm:h-8 sm:text-sm",
-  "numeric_decrease": "absolute z-10 text-center cursor-pointer left-0 flex items-center justify-center bg-color-bg-2 active:bg-color-border-separator focus:bg-border-separator sm:bg-inherit sm:active:bg-inherit sm:focus:bg-inherit w-7 h-7 leading-7 border-x-0.5 border-color-border-separator rounded-l sm:border-0",
-  "numeric_increase": "absolute z-10 text-center cursor-pointer right-0 flex items-center justify-center bg-color-bg-2 active:bg-color-border-separator focus:bg-border-separator sm:bg-inherit sm:active:bg-inherit sm:focus:bg-inherit w-7 h-7 leading-7 border-x-0.5 border-color-border-separator rounded-r sm:border-0",
+  "numeric_size": "sm:w-full sm:h-7 sm:text-xs",
+  "numeric_medium": "sm:w-full sm:h-8 sm:text-sm",
+  "numeric_decrease": "absolute z-10 text-center cursor-pointer left-0 flex items-center justify-center bg-color-bg-3 active:bg-color-border-separator focus:bg-border-separator sm:bg-inherit sm:active:bg-inherit sm:focus:bg-inherit w-7 h-full leading-7 border-r-0.5 border-color-border-separator rounded-l sm:border-0",
+  "numeric_increase": "absolute z-10 text-center cursor-pointer right-0 flex items-center justify-center bg-color-bg-3 active:bg-color-border-separator focus:bg-border-separator sm:bg-inherit sm:active:bg-inherit sm:focus:bg-inherit w-7 h-full leading-7 border-l-0.5 border-color-border-separator rounded-r sm:border-0",
   "numeric_crease_disabled": "bg-color-bg-4 active:bg-color-bg-4 focus:bg-color-bg-4",
   "numeric_svg": "sm:w-4 sm:h-4 w-3.5 h-3.5 inline-block fill-color-icon-primary sm:hover:fill-color-brand-hover sm:active:fill-color-brand-active sm:focus:fill-color-brand-active",
   "numeric_svg_disabled": "fill-color-text-disabled cursor-not-allowed",
-  "numeric_svg_size": "sm:w-7 sm:h-7 sm:leading-7 sm:text-xs",
-  "numeric_svg_medium": "sm:w-8 sm:h-8 sm:leading-8 sm:text-sm",
+  "numeric_svg_size": "sm:w-7 sm:leading-7 sm:text-xs",
+  "numeric_svg_medium": "sm:w-8 sm:leading-8 sm:text-sm",
   "numeric_input": "w-full block leading-3",
-  "numeric_input-medium-unit": "sm:px-3 px-2",
-  "numeric_input-medium-num": "sm:px-8 px-9",
-  "numeric_input-default-unit": "px-2",
-  "numeric_input-default-num": "px-8 sm:px-9",
+  "numeric_input-medium-unit": "sm:px-3 px-2 sm:w-full",
+  "numeric_input-medium-num": "sm:px-8 px-9 sm:w-full",
+  "numeric_input-default-unit": "px-2 sm:w-full",
+  "numeric_input-default-num": "px-8 sm:px-9 sm:w-full",
   "numeric_input-active": "border-0.5 sm:border border-solid rounded border-color-border-separator sm:border-color-border ",
   "numeric_input-disabled": "bg-inherit sm:bg-color-bg-3 cursor-not-allowed sm:border border-0.5 border-solid rounded border-color-text-disabled text-color-text-disabled",
-  "numeric_input_inner": "w-full z-10 h-7 leading-7 sm:text-xs inline-block overflow-hidden outline-0",
+  "numeric_input_inner": "w-full z-10 leading-7 sm:text-xs inline-block overflow-hidden outline-0",
   "numeric-text-center": "text-center",
   "numeric-text-left": "text-left",
-  "numeric_input_inner_size": "h-7 leading-7 text-sm",
-  "numeric_input_inner_medium": "sm:h-8 sm:leading-8 text-sm sm:text-sm",
+  "numeric_input_inner_size": "leading-7 text-sm",
+  "numeric_input_inner_medium": "sm:leading-8 text-sm sm:text-sm",
   "numeric_input_inner_disabled": "bg-color-bg-1 sm:bg-color-bg-3"
@@ -103,131 +103,153 @@ };
 });
-var _hoisted_1 = {
-  class: "w-auto h-7 flex items-center",
-  "data-tag": "tiny-numeric"
+var _hoisted_1 = ["tabindex", "disabled", "value", "placeholder", "max", "min", "name", "aria-label"];
+var _hoisted_2 = {
+  key: 0,
+  class: "ml-2"
 };
-var _hoisted_2 = ["tabindex", "disabled", "value", "placeholder", "max", "min", "name", "aria-label"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
   var _directive_repeat_click = resolveDirective("repeat-click");
-  return openBlock(), createElementBlock("div", _hoisted_1, [createElementVNode(
+  return openBlock(), createElementBlock(
     "div",
     {
-      "data-tag": "tiny-numeric-main",
-      class: normalizeClass(_ctx.m(_ctx.gcls("numeric"), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_medium") : _ctx.gcls("numeric_size"), _ctx.state.inputDisabled ? _ctx.gcls("numeric_disabled") : "", _ctx.state.isDisplayOnly ? _ctx.gcls("numeric_display_none") : "")),
-      onDragstart: _cache[8] || (_cache[8] = withModifiers(function() {
-      }, ["prevent"])),
-      onMousewheelPassive: _cache[9] || (_cache[9] = function() {
-        return _ctx.mouseEvent && _ctx.mouseEvent.apply(_ctx, arguments);
-      })
+      class: normalizeClass(["w-auto", _ctx.state.isDisplayOnly ? "" : "flex items-center"]),
+      "data-tag": "tiny-numeric"
     },
-    [_ctx.controls ? withDirectives((openBlock(), createElementBlock(
-      "span",
-      {
-        key: 0,
-        "data-tag": "tiny-numeric-decrease",
-        class: normalizeClass(_ctx.m(_ctx.gcls("numeric_decrease"), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_svg_medium") : _ctx.gcls("numeric_svg_size"), _ctx.state.minDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_crease_disabled") : "")),
-        role: "button",
-        onKeydown: _cache[0] || (_cache[0] = withKeys(function() {
-          return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
-        }, ["enter"]))
-      },
-      [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.controlsAtRight ? "icon-chevron-down" : "icon-minus"), {
-        class: normalizeClass(_ctx.m(_ctx.state.minDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_svg_disabled") : _ctx.gcls("numeric_svg")))
-      }, null, 8, ["class"]))],
-      34
-      /* CLASS, NEED_HYDRATION */
-    )), [[_directive_repeat_click, _ctx.decrease]]) : createCommentVNode("v-if", true), _ctx.controls ? (openBlock(), createElementBlock(
+    [createElementVNode(
       "div",
       {
-        key: 1,
-        "data-tag": "tiny-numeric-controls",
-        class: normalizeClass(["sm:w-px sm:h-4 sm:bg-color-text-disabled sm:absolute", _ctx.state.inputSize === "medium" ? "sm:left-8" : "sm:left-7"])
+        "data-tag": "tiny-numeric-main",
+        class: normalizeClass(_ctx.m(_ctx.gcls("numeric"), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_medium") : _ctx.gcls("numeric_size"), _ctx.state.inputDisabled ? _ctx.gcls("numeric_input-disabled") : _ctx.gcls("numeric_input-active"), _ctx.state.isDisplayOnly ? _ctx.gcls("numeric_display_none") : "")),
+        onDragstart: _cache[8] || (_cache[8] = withModifiers(function() {
+        }, ["prevent"])),
+        onMousewheelPassive: _cache[9] || (_cache[9] = function() {
+          return _ctx.mouseEvent && _ctx.mouseEvent.apply(_ctx, arguments);
+        })
       },
-      null,
-      2
-      /* CLASS */
-    )) : createCommentVNode("v-if", true), _ctx.controls ? withDirectives((openBlock(), createElementBlock(
-      "span",
-      {
-        key: 2,
-        "data-tag": "numeric-increase",
-        class: normalizeClass(_ctx.m(_ctx.gcls("numeric_increase"), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_svg_medium") : _ctx.gcls("numeric_svg_size"), _ctx.state.minDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_crease_disabled") : "")),
-        role: "button",
-        onKeydown: _cache[1] || (_cache[1] = withKeys(function() {
-          return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
-        }, ["enter"]))
-      },
-      [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.controlsAtRight ? "icon-chevron-up" : "icon-plus"), {
-        class: normalizeClass(_ctx.state.maxDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_svg_disabled") : _ctx.gcls("numeric_svg"))
-      }, null, 8, ["class"]))],
+      [_ctx.controls ? withDirectives((openBlock(), createElementBlock(
+        "span",
+        {
+          key: 0,
+          "data-tag": "tiny-numeric-decrease",
+          class: normalizeClass(_ctx.m(_ctx.gcls("numeric_decrease"), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_svg_medium") : _ctx.gcls("numeric_svg_size"), _ctx.state.minDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_crease_disabled") : "")),
+          role: "button",
+          onKeydown: _cache[0] || (_cache[0] = withKeys(function() {
+            return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
+          }, ["enter"]))
+        },
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.controlsAtRight ? "icon-chevron-down" : "icon-minus"), {
+          class: normalizeClass(_ctx.m(_ctx.state.minDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_svg_disabled") : _ctx.gcls("numeric_svg")))
+        }, null, 8, ["class"]))],
+        34
+        /* CLASS, NEED_HYDRATION */
+      )), [[_directive_repeat_click, _ctx.decrease]]) : createCommentVNode("v-if", true), _ctx.controls ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 1,
+          "data-tag": "tiny-numeric-controls",
+          class: normalizeClass(["sm:w-px sm:h-4 sm:bg-color-text-disabled sm:absolute", _ctx.state.inputSize === "medium" ? "sm:left-8" : "sm:left-7"])
+        },
+        null,
+        2
+        /* CLASS */
+      )) : createCommentVNode("v-if", true), _ctx.controls ? withDirectives((openBlock(), createElementBlock(
+        "span",
+        {
+          key: 2,
+          "data-tag": "numeric-increase",
+          class: normalizeClass(_ctx.m(_ctx.gcls("numeric_increase"), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_svg_medium") : _ctx.gcls("numeric_svg_size"), _ctx.state.minDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_crease_disabled") : "")),
+          role: "button",
+          onKeydown: _cache[1] || (_cache[1] = withKeys(function() {
+            return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
+          }, ["enter"]))
+        },
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.controlsAtRight ? "icon-chevron-up" : "icon-plus"), {
+          class: normalizeClass(_ctx.state.maxDisabled || _ctx.state.inputDisabled ? _ctx.gcls("numeric_svg_disabled") : _ctx.gcls("numeric_svg"))
+        }, null, 8, ["class"]))],
+        34
+        /* CLASS, NEED_HYDRATION */
+      )), [[_directive_repeat_click, _ctx.increase]]) : createCommentVNode("v-if", true), _ctx.controls ? (openBlock(), createElementBlock(
+        "div",
+        {
+          key: 3,
+          "data-tag": "tiny-numeric-controls",
+          class: normalizeClass(["sm:w-px sm:h-4 sm:bg-color-text-disabled sm:absolute", _ctx.state.inputSize === "medium" ? "sm:right-8" : "sm:right-7"])
+        },
+        null,
+        2
+        /* CLASS */
+      )) : createCommentVNode("v-if", true), createElementVNode(
+        "div",
+        {
+          class: normalizeClass(_ctx.m(_ctx.gcls("numeric_input-" + (_ctx.state.inputSize === "medium" ? "medium" : "default") + "-" + (_ctx.controls ? "num" : "unit"))))
+        },
+        [createElementVNode("input", {
+          tabindex: _ctx.tabindex,
+          class: normalizeClass(_ctx.m(_ctx.gcls("numeric_input_inner"), _ctx.gcls("numeric-text-" + (_ctx.controls ? "center" : "left")), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_input_inner_medium") : _ctx.gcls("numeric_input_inner_size"), _ctx.state.inputDisabled ? _ctx.gcls("numeric_input_inner_disabled") : _ctx.gcls("numeric_input_inner_default"))),
+          disabled: _ctx.state.inputDisabled,
+          ref: "input",
+          value: _ctx.state.displayValue,
+          placeholder: _ctx.placeholder,
+          max: _ctx.max,
+          min: _ctx.min,
+          name: _ctx.name,
+          "aria-label": _ctx.label,
+          onKeydown: [_cache[2] || (_cache[2] = withKeys(withModifiers(function() {
+            return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
+          }, ["prevent"]), ["up"])), _cache[3] || (_cache[3] = withKeys(withModifiers(function() {
+            return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
+          }, ["prevent"]), ["down"]))],
+          onBlur: _cache[4] || (_cache[4] = function() {
+            return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
+          }),
+          onFocus: _cache[5] || (_cache[5] = function() {
+            return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+          }),
+          onInput: _cache[6] || (_cache[6] = function() {
+            return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
+          }),
+          onChange: _cache[7] || (_cache[7] = function() {
+            return _ctx.handleInputChange && _ctx.handleInputChange.apply(_ctx, arguments);
+          })
+        }, null, 42, _hoisted_1)],
+        2
+        /* CLASS */
+      )],
       34
       /* CLASS, NEED_HYDRATION */
-    )), [[_directive_repeat_click, _ctx.increase]]) : createCommentVNode("v-if", true), _ctx.controls ? (openBlock(), createElementBlock(
+    ), _ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
       "div",
       {
-        key: 3,
-        "data-tag": "tiny-numeric-controls",
-        class: normalizeClass(["sm:w-px sm:h-4 sm:bg-color-text-disabled sm:absolute", _ctx.state.inputSize === "medium" ? "sm:right-8" : "sm:right-7"])
+        key: 0,
+        "data-tag": "numeric-display-only",
+        class: normalizeClass(["sm:leading-normal text-color-text-primary", _ctx.state.inputSize === "medium" ? "text-sm" : "text-xs"])
       },
-      null,
+      [createElementVNode(
+        "span",
+        null,
+        toDisplayString(_ctx.state.displayValue),
+        1
+        /* TEXT */
+      ), _ctx.unit && !_ctx.hideUnit ? (openBlock(), createElementBlock(
+        "span",
+        _hoisted_2,
+        toDisplayString(_ctx.unit),
+        1
+        /* TEXT */
+      )) : createCommentVNode("v-if", true)],
       2
       /* CLASS */
-    )) : createCommentVNode("v-if", true), createElementVNode(
+    )) : createCommentVNode("v-if", true), _ctx.unit && !_ctx.hideUnit && !_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
       "div",
       {
-        class: normalizeClass(_ctx.m(_ctx.gcls("numeric_input-" + (_ctx.state.inputSize === "medium" ? "medium" : "default") + "-" + (_ctx.controls ? "num" : "unit")), _ctx.state.inputDisabled ? _ctx.gcls("numeric_input-disabled") : _ctx.gcls("numeric_input-active")))
+        key: 1,
+        "data-tag": "numeric-unit",
+        class: normalizeClass(["h-0 right-0 flex text-xs items-center shrink-0", _ctx.unit ? "ml-2" : ""])
       },
-      [createElementVNode("input", {
-        tabindex: _ctx.tabindex,
-        class: normalizeClass(_ctx.m(_ctx.gcls("numeric_input_inner"), _ctx.gcls("numeric-text-" + (_ctx.controls ? "center" : "left")), _ctx.state.inputSize === "medium" ? _ctx.gcls("numeric_input_inner_medium") : _ctx.gcls("numeric_input_inner_size"), _ctx.state.inputDisabled ? _ctx.gcls("numeric_input_inner_disabled") : _ctx.gcls("numeric_input_inner_default"))),
-        disabled: _ctx.state.inputDisabled,
-        ref: "input",
-        value: _ctx.state.displayValue,
-        placeholder: _ctx.placeholder,
-        max: _ctx.max,
-        min: _ctx.min,
-        name: _ctx.name,
-        "aria-label": _ctx.label,
-        onKeydown: [_cache[2] || (_cache[2] = withKeys(withModifiers(function() {
-          return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
-        }, ["prevent"]), ["up"])), _cache[3] || (_cache[3] = withKeys(withModifiers(function() {
-          return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
-        }, ["prevent"]), ["down"]))],
-        onBlur: _cache[4] || (_cache[4] = function() {
-          return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
-        }),
-        onFocus: _cache[5] || (_cache[5] = function() {
-          return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
-        }),
-        onInput: _cache[6] || (_cache[6] = function() {
-          return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
-        }),
-        onChange: _cache[7] || (_cache[7] = function() {
-          return _ctx.handleInputChange && _ctx.handleInputChange.apply(_ctx, arguments);
-        })
-      }, null, 42, _hoisted_2)],
-      2
-      /* CLASS */
-    )],
-    34
-    /* CLASS, NEED_HYDRATION */
-  ), _ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
-    "div",
-    {
-      key: 0,
-      "data-tag": "numeric-display-only",
-      class: normalizeClass(_ctx.state.inputSize === "medium" ? "text-sm" : "text-xs")
-    },
-    toDisplayString(_ctx.state.displayValue),
-    3
-    /* TEXT, CLASS */
-  )) : createCommentVNode("v-if", true), createElementVNode(
-    "div",
-    {
-      "data-tag": "numeric-unit",
-      class: normalizeClass(["h-0 right-0 flex ml-2 text-xs items-center", _ctx.state.isDisplayOnly ? "sm:h-4 " : "sm:h-7"])
-    },
-    toDisplayString(_ctx.unit),
-    3
-    /* TEXT, CLASS */
-  )]);
+      toDisplayString(_ctx.unit),
+      3
+      /* TEXT, CLASS */
+    )) : createCommentVNode("v-if", true)],
+    2
+    /* CLASS */
+  );
 }
@@ -234,0 +256,0 @@ var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

lib/pc.js

@@ -6,3 +6,7 @@ import { renderless, api } from "@opentiny/vue-renderless/numeric/vue";
 import "@opentiny/vue-theme/numeric/index.css";
-import { resolveDirective, openBlock, createElementBlock, withModifiers, normalizeClass, withDirectives, withKeys, createBlock, resolveDynamicComponent, createCommentVNode, toDisplayString, createElementVNode } from "vue";
+import FilterPanel from "@opentiny/vue-filter-panel";
+import Radio from "@opentiny/vue-radio";
+import RadioGroup from "@opentiny/vue-radio-group";
+import Tag from "@opentiny/vue-tag";
+import { resolveComponent, resolveDirective, openBlock, createElementBlock, withModifiers, normalizeClass, createVNode, withCtx, Fragment, renderList, createBlock, createTextVNode, toDisplayString, createCommentVNode, createElementVNode, withDirectives, withKeys, resolveDynamicComponent } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -63,6 +67,10 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
     IconMinus: iconMinus(),
-    IconPlus: iconPlus()
+    IconPlus: iconPlus(),
+    TinyFilterPanel: FilterPanel,
+    TinyRadio: Radio,
+    TinyRadioGroup: RadioGroup,
+    TinyTag: Tag
   },
-  props: [].concat(props, ["step", "tabindex", "stepStrictly", "max", "min", "modelValue", "disabled", "size", "controls", "controlsPosition", "name", "label", "placeholder", "precision", "circulate", "mouseWheel", "validateEvent", "allowEmpty", "format", "unit", "stringMode", "holdZero", "plugin", "modelTruncation", "strictInput", "hideUnit", "unitCenter", "displayOnly", "showLeft", "showEmptyValue"]),
-  emits: ["update:modelValue", "change", "blur", "focus", "paste-error"],
+  props: [].concat(props, ["step", "tabindex", "stepStrictly", "max", "min", "modelValue", "disabled", "size", "controls", "controlsPosition", "name", "label", "placeholder", "precision", "circulate", "mouseWheel", "validateEvent", "allowEmpty", "format", "unit", "stringMode", "holdZero", "plugin", "modelTruncation", "strictInput", "hideUnit", "unitCenter", "displayOnly", "showLeft", "showEmptyValue", "title", "shape", "tip", "clearable", "filter", "blank"]),
+  emits: ["update:modelValue", "change", "blur", "focus", "paste-error", "filter-change", "clear"],
   setup: function setup(props2, context) {
@@ -78,24 +86,62 @@ return _setup({
 var _hoisted_1 = {
+  key: 0
+};
+var _hoisted_2 = {
+  key: 0,
+  class: "tiny-numeric__popover-filter-content"
+};
+var _hoisted_3 = {
   key: 2,
   class: "tiny-numeric__unit"
 };
-var _hoisted_2 = {
+var _hoisted_4 = {
   class: "tiny-numeric-display-only"
 };
-var _hoisted_3 = {
+var _hoisted_5 = {
   key: 0,
   class: "tiny-numeric-display-only__content"
 };
-var _hoisted_4 = {
+var _hoisted_6 = {
   class: "tiny-numeric-display-only__value"
 };
-var _hoisted_5 = {
+var _hoisted_7 = {
   key: 0,
   class: "tiny-numeric-display-only__unit"
 };
-var _hoisted_6 = {
+var _hoisted_8 = {
   key: 1
 };
-var _hoisted_7 = ["tabindex", "value", "placeholder", "max", "min", "name", "aria-label"];
+var _hoisted_9 = ["tabindex", "value", "placeholder", "max", "min", "name", "aria-label"];
+var _hoisted_10 = {
+  key: 1,
+  "data-tag": "tiny-numeric-base",
+  class: "tiny-numeric-base"
+};
+var _hoisted_11 = {
+  key: 2,
+  class: "tiny-numeric__unit"
+};
+var _hoisted_12 = {
+  class: "tiny-numeric-display-only"
+};
+var _hoisted_13 = {
+  key: 0,
+  class: "tiny-numeric-display-only__content"
+};
+var _hoisted_14 = {
+  class: "tiny-numeric-display-only__value"
+};
+var _hoisted_15 = {
+  key: 0,
+  class: "tiny-numeric-display-only__unit"
+};
+var _hoisted_16 = {
+  key: 1
+};
+var _hoisted_17 = ["tabindex", "value", "placeholder", "max", "min", "name", "aria-label"];
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  var _component_tiny_tag = resolveComponent("tiny-tag");
+  var _component_tiny_radio = resolveComponent("tiny-radio");
+  var _component_tiny_radio_group = resolveComponent("tiny-radio-group");
+  var _component_tiny_filter_panel = resolveComponent("tiny-filter-panel");
   var _directive_repeat_click = resolveDirective("repeat-click");
@@ -105,3 +151,3 @@ return openBlock(), createElementBlock(
     {
-      onDragstart: _cache[8] || (_cache[8] = withModifiers(function() {
+      onDragstart: _cache[19] || (_cache[19] = withModifiers(function() {
       }, ["prevent"])),
@@ -117,7 +163,197 @@ class: normalizeClass(["tiny-numeric", _ctx.state.inputSize ? "tiny-numeric--" + _ctx.state.inputSize : "", {
       }]),
-      onMousewheel: _cache[9] || (_cache[9] = withModifiers(function() {
+      onMousewheel: _cache[20] || (_cache[20] = withModifiers(function() {
         return _ctx.mouseEvent && _ctx.mouseEvent.apply(_ctx, arguments);
       }, ["prevent"]))
     },
-    [_ctx.controls && !_ctx.unit ? withDirectives((openBlock(), createElementBlock(
+    [_ctx.shape === "filter" ? (openBlock(), createElementBlock("div", _hoisted_1, [createVNode(_component_tiny_filter_panel, {
+      ref: "filterPanel",
+      label: _ctx.title,
+      value: _ctx.state.filterValue,
+      tip: _ctx.tip,
+      disabled: _ctx.disabled,
+      clearable: _ctx.clearable,
+      onHandleClear: _ctx.handleClear,
+      blank: _ctx.blank
+    }, {
+      default: withCtx(function() {
+        return [_ctx.shape === "filter" && _ctx.filter ? (openBlock(), createElementBlock("div", _hoisted_2, [createVNode(_component_tiny_radio_group, {
+          modelValue: _ctx.state.radioVal,
+          "onUpdate:modelValue": _cache[0] || (_cache[0] = function($event) {
+            return _ctx.state.radioVal = $event;
+          }),
+          onChange: _ctx.handleChange
+        }, {
+          default: withCtx(function() {
+            return [(openBlock(true), createElementBlock(
+              Fragment,
+              null,
+              renderList(_ctx.state.filterMenu, function(item, index) {
+                return openBlock(), createBlock(_component_tiny_radio, {
+                  key: index,
+                  label: _ctx.t(item),
+                  class: "popover-filter-botton"
+                }, {
+                  default: withCtx(function() {
+                    return [createVNode(
+                      _component_tiny_tag,
+                      {
+                        size: "mini"
+                      },
+                      {
+                        default: withCtx(function() {
+                          return [createTextVNode(
+                            toDisplayString(_ctx.t(item)),
+                            1
+                            /* TEXT */
+                          )];
+                        }),
+                        _: 2
+                        /* DYNAMIC */
+                      },
+                      1024
+                      /* DYNAMIC_SLOTS */
+                    )];
+                  }),
+                  _: 2
+                  /* DYNAMIC */
+                }, 1032, ["label"]);
+              }),
+              128
+              /* KEYED_FRAGMENT */
+            ))];
+          }),
+          _: 1
+          /* STABLE */
+        }, 8, ["modelValue", "onChange"])])) : createCommentVNode("v-if", true), createElementVNode(
+          "div",
+          {
+            "data-tag": "tiny-numeric-filter",
+            onDragstart: _cache[9] || (_cache[9] = withModifiers(function() {
+            }, ["prevent"])),
+            class: normalizeClass(["tiny-numeric", _ctx.state.inputSize ? "tiny-numeric--" + _ctx.state.inputSize : "", {
+              "is-disabled": _ctx.state.inputDisabled
+            }, {
+              "is-without-controls": !_ctx.state.controls || _ctx.unit && _ctx.hideUnit
+            }, {
+              "is-controls-right": _ctx.state.controlsAtRight
+            }, {
+              "is-display-only": _ctx.state.isDisplayOnly
+            }, {
+              "is-filter": _ctx.shape === "filter"
+            }]),
+            onMousewheelPassive: _cache[10] || (_cache[10] = function() {
+              return _ctx.mouseEvent && _ctx.mouseEvent.apply(_ctx, arguments);
+            })
+          },
+          [_ctx.state.controls && !_ctx.unit ? withDirectives((openBlock(), createElementBlock(
+            "span",
+            {
+              key: 0,
+              class: normalizeClass(["tiny-numeric__decrease", {
+                "is-disabled": _ctx.state.minDisabled
+              }]),
+              role: "button",
+              onKeydown: _cache[1] || (_cache[1] = withKeys(function() {
+                return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
+              }, ["enter"]))
+            },
+            [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.controlsAtRight ? "icon-chevron-down" : "icon-minus"), {
+              class: "tiny-svg-size"
+            }))],
+            34
+            /* CLASS, NEED_HYDRATION */
+          )), [[_directive_repeat_click, _ctx.decrease]]) : createCommentVNode("v-if", true), _ctx.state.controls && !_ctx.unit ? withDirectives((openBlock(), createElementBlock(
+            "span",
+            {
+              key: 1,
+              class: normalizeClass(["tiny-numeric__increase", {
+                "is-disabled": _ctx.state.maxDisabled
+              }]),
+              role: "button",
+              onKeydown: _cache[2] || (_cache[2] = withKeys(function() {
+                return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
+              }, ["enter"]))
+            },
+            [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.controlsAtRight ? "icon-chevron-up" : "icon-plus"), {
+              class: "tiny-svg-size"
+            }))],
+            34
+            /* CLASS, NEED_HYDRATION */
+          )), [[_directive_repeat_click, _ctx.increase]]) : createCommentVNode("v-if", true), _ctx.unit && !_ctx.hideUnit ? (openBlock(), createElementBlock(
+            "div",
+            _hoisted_3,
+            toDisplayString(_ctx.unit),
+            1
+            /* TEXT */
+          )) : createCommentVNode("v-if", true), createElementVNode(
+            "div",
+            {
+              class: normalizeClass(["tiny-numeric__input", {
+                "tiny-numeric__read-only": _ctx.state.isDisplayOnly
+              }, _ctx.state.inputSize ? "tiny-input-" + _ctx.state.inputSize : "", _ctx.state.inputDisabled ? "is-disabled" : "", {
+                "has-unit": _ctx.unit && !_ctx.hideUnit
+              }, {
+                "text-align-left": _ctx.unit && !_ctx.unitCenter
+              }, {
+                "tiny-numeric__controls-position": _ctx.controlsPosition
+              }])
+            },
+            [createElementVNode("span", _hoisted_4, [_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock("span", _hoisted_5, [createElementVNode(
+              "span",
+              _hoisted_6,
+              toDisplayString(_ctx.state.displayOnlyText),
+              1
+              /* TEXT */
+            ), _ctx.unit && !_ctx.hideUnit && _ctx.state.currentValue ? (openBlock(), createElementBlock(
+              "span",
+              _hoisted_7,
+              toDisplayString(_ctx.unit),
+              1
+              /* TEXT */
+            )) : _ctx.unit && !_ctx.hideUnit ? (openBlock(), createElementBlock(
+              "span",
+              _hoisted_8,
+              toDisplayString(_ctx.unit),
+              1
+              /* TEXT */
+            )) : createCommentVNode("v-if", true)])) : createCommentVNode("v-if", true), createElementVNode("input", {
+              tabindex: _ctx.tabindex,
+              class: normalizeClass(["tiny-numeric__input-inner", {
+                "tiny-numeric__show-left": !_ctx.state.controls && (_ctx.showLeft || _ctx.shape === "filter")
+              }]),
+              ref: "input",
+              value: _ctx.state.displayValue,
+              placeholder: _ctx.placeholder,
+              max: _ctx.max,
+              min: _ctx.min,
+              name: _ctx.name,
+              "aria-label": _ctx.label,
+              onKeydown: [_cache[3] || (_cache[3] = withKeys(withModifiers(function() {
+                return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
+              }, ["prevent"]), ["up"])), _cache[4] || (_cache[4] = withKeys(withModifiers(function() {
+                return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
+              }, ["prevent"]), ["down"]))],
+              onBlur: _cache[5] || (_cache[5] = function() {
+                return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
+              }),
+              onFocus: _cache[6] || (_cache[6] = function() {
+                return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
+              }),
+              onInput: _cache[7] || (_cache[7] = function() {
+                return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
+              }),
+              onChange: _cache[8] || (_cache[8] = function() {
+                return _ctx.handleInputChange && _ctx.handleInputChange.apply(_ctx, arguments);
+              })
+            }, null, 42, _hoisted_9)])],
+            2
+            /* CLASS */
+          )],
+          34
+          /* CLASS, NEED_HYDRATION */
+        )];
+      }),
+      _: 1
+      /* STABLE */
+    }, 8, ["label", "value", "tip", "disabled", "clearable", "onHandleClear", "blank"])])) : (openBlock(), createElementBlock("div", _hoisted_10, [_ctx.controls && !_ctx.unit ? withDirectives((openBlock(), createElementBlock(
       "span",
@@ -130,3 +366,3 @@ {
         role: "button",
-        onKeydown: _cache[0] || (_cache[0] = withKeys(function() {
+        onKeydown: _cache[11] || (_cache[11] = withKeys(function() {
           return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
@@ -148,3 +384,3 @@ }, ["enter"]))
         role: "button",
-        onKeydown: _cache[1] || (_cache[1] = withKeys(function() {
+        onKeydown: _cache[12] || (_cache[12] = withKeys(function() {
           return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
@@ -160,3 +396,3 @@ }, ["enter"]))
       "div",
-      _hoisted_1,
+      _hoisted_11,
       toDisplayString(_ctx.unit),
@@ -178,5 +414,5 @@ 1
       },
-      [createElementVNode("span", _hoisted_2, [_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock("span", _hoisted_3, [createElementVNode(
+      [createElementVNode("span", _hoisted_12, [_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock("span", _hoisted_13, [createElementVNode(
         "span",
-        _hoisted_4,
+        _hoisted_14,
         toDisplayString(_ctx.state.displayOnlyText),
@@ -187,3 +423,3 @@ 1
         "span",
-        _hoisted_5,
+        _hoisted_15,
         toDisplayString(_ctx.unit),
@@ -194,3 +430,3 @@ 1
         "span",
-        _hoisted_6,
+        _hoisted_16,
         toDisplayString(_ctx.unit),
@@ -211,23 +447,23 @@ 1
         "aria-label": _ctx.label,
-        onKeydown: [_cache[2] || (_cache[2] = withKeys(withModifiers(function() {
+        onKeydown: [_cache[13] || (_cache[13] = withKeys(withModifiers(function() {
           return _ctx.increase && _ctx.increase.apply(_ctx, arguments);
-        }, ["prevent"]), ["up"])), _cache[3] || (_cache[3] = withKeys(withModifiers(function() {
+        }, ["prevent"]), ["up"])), _cache[14] || (_cache[14] = withKeys(withModifiers(function() {
           return _ctx.decrease && _ctx.decrease.apply(_ctx, arguments);
         }, ["prevent"]), ["down"]))],
-        onBlur: _cache[4] || (_cache[4] = function() {
+        onBlur: _cache[15] || (_cache[15] = function() {
           return _ctx.handleBlur && _ctx.handleBlur.apply(_ctx, arguments);
         }),
-        onFocus: _cache[5] || (_cache[5] = function() {
+        onFocus: _cache[16] || (_cache[16] = function() {
           return _ctx.handleFocus && _ctx.handleFocus.apply(_ctx, arguments);
         }),
-        onInput: _cache[6] || (_cache[6] = function() {
+        onInput: _cache[17] || (_cache[17] = function() {
           return _ctx.handleInput && _ctx.handleInput.apply(_ctx, arguments);
         }),
-        onChange: _cache[7] || (_cache[7] = function() {
+        onChange: _cache[18] || (_cache[18] = function() {
           return _ctx.handleInputChange && _ctx.handleInputChange.apply(_ctx, arguments);
         })
-      }, null, 42, _hoisted_7)])],
+      }, null, 42, _hoisted_17)])],
       2
       /* CLASS */
-    )],
+    )]))],
     34
@@ -234,0 +470,0 @@ /* CLASS, NEED_HYDRATION */

package.json

 {
   "name": "@opentiny/vue-numeric",
-  "version": "3.12.0",
+  "version": "3.13.0-alpha.0",
   "description": "",
@@ -10,5 +10,9 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~3.12.0",
-    "@opentiny/vue-icon": "~3.12.0",
-    "@opentiny/vue-renderless": "~3.12.0"
+    "@opentiny/vue-common": "~3.13.0-alpha.0",
+    "@opentiny/vue-icon": "~3.13.0-alpha.0",
+    "@opentiny/vue-renderless": "~3.13.0-alpha.0",
+    "@opentiny/vue-filter-panel": "~3.13.0-alpha.0",
+    "@opentiny/vue-radio": "~3.13.0-alpha.0",
+    "@opentiny/vue-radio-group": "~3.13.0-alpha.0",
+    "@opentiny/vue-tag": "~3.13.0-alpha.0"
   },
@@ -15,0 +19,0 @@ "license": "MIT",

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

No v1

Quality

Package is not semver >=1. This means it is not stable and does not support ^ ranges.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Mixed license

License

(Experimental) Package contains multiple licenses.

Found 1 instance in 1 package

Unidentified License

License

(Experimental) Something that seems like a license was found, but its contents could not be matched with a known license.

Found 1 instance in 1 package

Improved metrics

Number of low license alerts

0

decreased by-100%

License quality

100

increased by25%

Number of low supply chain risk alerts

2

decreased by-50%

Worsened metrics

Total package byte prevSize

44070

decreased by-5.74%

Dependency count

7

increased by133.33%

Number of package files

6

decreased by-53.85%

Lines of code

1077

decreased by-16.45%

Number of low quality alerts

2

increased by100%

Dependency changes

• + Added@opentiny/vue-filter-panel@~3.13.0-alpha.0

• + Added@opentiny/vue-radio@~3.13.0-alpha.0

• + Added@opentiny/vue-radio-group@~3.13.0-alpha.0

• + Added@opentiny/vue-tag@~3.13.0-alpha.0

• + Added@opentiny/vue-common@3.13.1(transitive)

• + Added@opentiny/vue-filter-box@3.13.0(transitive)

• + Added@opentiny/vue-filter-panel@3.13.0(transitive)

• + Added@opentiny/vue-icon@3.13.0(transitive)

• + Added@opentiny/vue-locale@3.13.0(transitive)

• + Added@opentiny/vue-popover@3.13.0(transitive)

• + Added@opentiny/vue-radio@3.13.0(transitive)

• + Added@opentiny/vue-radio-button@3.13.0(transitive)

• + Added@opentiny/vue-radio-group@3.13.0(transitive)

• + Added@opentiny/vue-renderless@3.13.2(transitive)

• + Added@opentiny/vue-tag@3.13.0(transitive)

• + Added@opentiny/vue-theme@3.13.3(transitive)

• + Added@opentiny/vue-theme-mobile@3.13.0(transitive)

• + Added@opentiny/vue-tooltip@3.13.0(transitive)

• - Removed@opentiny/vue-common@3.12.0(transitive)

• - Removed@opentiny/vue-icon@3.12.0(transitive)

• - Removed@opentiny/vue-locale@3.12.0(transitive)

• - Removed@opentiny/vue-renderless@3.12.1(transitive)

• - Removed@opentiny/vue-theme@3.12.1(transitive)

• - Removed@opentiny/vue-theme-mobile@3.12.0(transitive)

• Updated@opentiny/vue-common@~3.13.0-alpha.0

• Updated@opentiny/vue-icon@~3.13.0-alpha.0

• Updated@opentiny/vue-renderless@~3.13.0-alpha.0