@opentiny/vue-tag - npm Package Compare versions

Comparing version 2.9.0 to 2.10.0

lib/index.js

@@ -15,3 +15,3 @@ function _extends() {
 }
-import { defineComponent, $prefix, $props, $setup } from "@opentiny/vue-common";
+import { defineComponent, $prefix, $setup, $props } from "@opentiny/vue-common";
 import PcTemplate from "./pc.js";
@@ -29,28 +29,30 @@ import MobileFirstTemplate from "./mobile-first.js";
 };
+var tagProps = _extends({}, $props, {
+  hit: Boolean,
+  text: String,
+  type: String,
+  theme: String,
+  size: String,
+  color: String,
+  closable: Boolean,
+  operable: Boolean,
+  disabled: Boolean,
+  selectable: Boolean,
+  customClass: {
+    type: String,
+    default: ""
+  },
+  effect: {
+    type: String,
+    default: "light",
+    validator: function validator(value) {
+      return Boolean(~["dark", "light", "plain"].indexOf(value));
+    }
+  },
+  beforeDelete: Function,
+  value: [Number, String]
+});
 var Tag = defineComponent({
   name: $prefix + "Tag",
-  props: _extends({}, $props, {
-    hit: Boolean,
-    text: String,
-    type: String,
-    theme: String,
-    size: String,
-    color: String,
-    closable: Boolean,
-    operable: Boolean,
-    disabled: Boolean,
-    selectable: Boolean,
-    customClass: {
-      type: String,
-      default: ""
-    },
-    effect: {
-      type: String,
-      default: "light",
-      validator: function validator(value) {
-        return Boolean(~["dark", "light", "plain"].indexOf(value));
-      }
-    },
-    beforeDelete: Function
-  }),
+  props: tagProps,
   setup: function setup(props, context) {
@@ -64,3 +66,3 @@ return $setup({
 });
-var version = "2.9.0";
+var version = "2.10.0";
 Tag.install = function(Vue) {
@@ -67,0 +69,0 @@ Vue.component(Tag.name, Tag);

lib/mobile-first.js

@@ -59,11 +59,11 @@ import { renderless, api } from "@opentiny/vue-renderless/tag/vue";
 var classes = {
-  "dark-success": "text-white bg-color-success",
-  "dark-alerting": "text-white bg-color-alert",
-  "dark-warning": "text-white bg-color-warning",
-  "dark-error": "text-white bg-color-error",
-  "dark-default": "text-white bg-color-info-primary",
-  "dark-info": "text-white bg-color-text-placeholder",
-  "dark-pink": "text-white bg-color-chart-17",
-  "dark-purple": "text-white bg-color-chart-11",
-  "dark-cyan": "text-white bg-color-chart-5",
+  "dark-success": "text-color-text-inverse bg-color-success",
+  "dark-alerting": "text-color-text-inverse bg-color-alert",
+  "dark-warning": "text-color-text-inverse bg-color-warning",
+  "dark-error": "text-color-text-inverse bg-color-error",
+  "dark-default": "text-color-text-inverse bg-color-info-primary",
+  "dark-info": "text-color-text-inverse bg-color-text-placeholder",
+  "dark-pink": "text-color-text-inverse bg-color-chart-17",
+  "dark-purple": "text-color-text-inverse bg-color-chart-11",
+  "dark-cyan": "text-color-text-inverse bg-color-chart-5",
   "light-success": "text-color-success bg-color-success-subtler",
@@ -78,11 +78,11 @@ "light-alerting": "text-color-alert bg-color-alert-subtler",
   "light-cyan": "text-color-chart-5 bg-color-chart-5-subtler",
-  "plain-success": "text-color-success bg-white",
-  "plain-alerting": "text-color-alert bg-white",
-  "plain-warning": "text-color-warning-hover bg-white",
-  "plain-error": "text-color-error bg-white",
-  "plain-default": "text-color-info-primary bg-white",
-  "plain-info": "text-color-text-primary bg-white",
-  "plain-pink": "text-color-chart-17 bg-white",
-  "plain-purple": "text-color-chart-11 bg-white",
-  "plain-cyan": "text-color-chart-5 bg-white",
+  "plain-success": "text-color-success bg-color-bg-1",
+  "plain-alerting": "text-color-alert bg-color-bg-1",
+  "plain-warning": "text-color-warning-hover bg-color-bg-1",
+  "plain-error": "text-color-error bg-color-bg-1",
+  "plain-default": "text-color-info-primary bg-color-bg-1",
+  "plain-info": "text-color-text-primary bg-color-bg-1",
+  "plain-pink": "text-color-chart-17 bg-color-bg-1",
+  "plain-purple": "text-color-chart-11 bg-color-bg-1",
+  "plain-cyan": "text-color-chart-5 bg-color-bg-1",
   "success-border": "border-color-success-subtle",
@@ -97,3 +97,3 @@ "alerting-border": "border-color-alert-subtle",
   "cyan-border": "border-color-chart-5-subtle",
-  "fill-dark": "fill-color-bg-6 hover:fill-white",
+  "fill-dark": "fill-color-bg-6 hover:fill-color-icon-inverse",
   "fill-light-success": "fill-color-success-subtle hover:fill-color-success",
@@ -108,9 +108,9 @@ "fill-light-alerting": "fill-color-alert-subtle hover:fill-color-alert",
   "fill-light-cyan": "fill-color-chart-5-subtle hover:fill-color-chart-5",
-  "selectable-unselect": "leading-[1.875rem] sm:leading-[1.625rem] text-color-text-primary bg-color-bg-4 cursor-pointer hover:bg-color-bg-3",
-  "selectable-selected": "leading-[1.875rem] sm:leading-[1.625rem] text-color-brand border-current bg-color-info-secondary-subtle cursor-pointer hover:text-color-brand-hover",
-  "tag-disabled": "leading-[1.875rem] sm:leading-[1.625rem] text-color-text-disabled bg-color-bg-4 border-transparent cursor-not-allowed hover:text-color-text-disabled hover:bg-color-bg-4",
-  "tag-operable": "leading-[1.625rem] sm:leading-[1.375rem] cursor-pointer",
-  "medium": "leading-[1.625rem] px-3",
-  "small": "leading-[1.375rem] px-2",
-  "mini": "leading-[1.125rem] px-1"
+  "selectable-unselect": "h-9 sm:h-7 text-color-text-primary bg-color-bg-4 cursor-pointer hover:bg-color-bg-3",
+  "selectable-selected": "h-9 sm:h-7 text-color-brand border-current bg-color-info-secondary-subtle cursor-pointer hover:text-color-brand-hover",
+  "tag-disabled": "h-9 sm:h-7 text-color-text-disabled bg-color-bg-4 border-transparent cursor-not-allowed hover:text-color-text-disabled hover:bg-color-bg-4",
+  "tag-operable": "h-7 sm:h-6 cursor-pointer",
+  "medium": "h-7 px-3",
+  "small": "h-6 px-2",
+  "mini": "h-5 px-1"
 };
@@ -122,3 +122,3 @@ var __vue2_script = defineComponent({
   emits: ["click", "close"],
-  props: [].concat(props, ["text", "closable", "operable", "selectable", "type", "theme", "hit", "disabled", "color", "size", "effect", "customClass"]),
+  props: [].concat(props, ["text", "closable", "operable", "selectable", "type", "theme", "hit", "disabled", "color", "size", "effect", "customClass", "value"]),
   setup: function setup(props2, context) {
@@ -136,4 +136,4 @@ return _setup({
     var h2 = arguments[0];
-    var slots = this.slots, selectable = this.selectable, disabled = this.disabled, color = this.color, handleClose = this.handleClose, handleClick = this.handleClick, customClass = this.customClass, hit = this.hit, m = this.m, gcls = this.gcls, state = this.state;
-    var size = selectable ? "medium" : this.size || "medium";
+    var slots = this.slots, selectable = this.selectable, disabled = this.disabled, color = this.color, handleClose = this.handleClose, handleClick = this.handleClick, customClass = this.customClass, hit = this.hit, m = this.m, gcls = this.gcls, state = this.state, value = this.value;
+    var size = selectable ? "medium" : this.size || "small";
     var type = selectable ? "info" : state.type || "info";
@@ -143,3 +143,3 @@ var effect = selectable ? "light" : this.effect || "light";
     var operable = selectable ? false : this.operable;
-    var classes2 = m("inline-flex items-center rounded-sm box-border border-0.5 sm:border mr-2", effect === "plain" || hit ? gcls(type + "-border") : "border-transparent", gcls(effect + "-" + type), gcls(size), {
+    var classes2 = m("text-xs inline-flex items-center rounded-sm box-border border-0.5 sm:border mr-2", effect === "plain" || hit ? gcls(type + "-border") : "border-transparent", gcls(effect + "-" + type), gcls(size), {
       hidden: !state.show
@@ -158,3 +158,3 @@ }, selectable ? state.selected ? gcls("selectable-selected") : gcls("selectable-unselect") : "", selectable && disabled ? gcls("tag-disabled") : "", operable ? gcls("tag-operable") : "", customClass);
       }
-    }, [slots.default(), closable && h2("icon-close", {
+    }, [value ? h2("span", [value]) : slots.default && slots.default(), closable && h2("icon-close", {
       "class": ["w-3 h-3 ml-1 cursor-pointer", effect === "dark" ? gcls("fill-dark") : gcls("fill-light-" + type)],
@@ -161,0 +161,0 @@ "on": {

lib/pc.js

@@ -63,3 +63,3 @@ import { renderless, api } from "@opentiny/vue-renderless/tag/vue";
   emits: ["click", "close"],
-  props: [].concat(props, ["text", "closable", "type", "hit", "disabled", "color", "size", "effect", "beforeDelete"]),
+  props: [].concat(props, ["text", "closable", "type", "hit", "disabled", "color", "size", "effect", "value", "beforeDelete"]),
   setup: function setup(props2, context) {
@@ -76,3 +76,3 @@ return _setup({
     var h2 = arguments[0];
-    var type = this.type, size = this.size, hit = this.hit, effect = this.effect, slots = this.slots, closable = this.closable, color = this.color, handleClose = this.handleClose, handleClick = this.handleClick, disabled = this.disabled;
+    var type = this.type, size = this.size, hit = this.hit, effect = this.effect, slots = this.slots, closable = this.closable, color = this.color, handleClose = this.handleClose, handleClick = this.handleClick, disabled = this.disabled, state = this.state, value = this.value;
     var classes = ["tiny-tag", type ? "tiny-tag--" + type : "", size ? "tiny-tag--" + size : "", effect ? "tiny-tag--" + effect : "", hit && "is-hit", disabled ? "is-disabled" : ""];
@@ -82,3 +82,4 @@ var tagElement = h2("span", {
       "style": {
-        backgroundColor: color
+        backgroundColor: color,
+        display: state.show ? null : "none"
       },
@@ -88,3 +89,3 @@ "on": {
       }
-    }, [slots.default(), closable && h2("icon-close", {
+    }, [value ? h2("span", [value]) : slots.default && slots.default(), closable && h2("icon-close", {
       "class": "tiny-svg-size tiny-tag__close ",
@@ -91,0 +92,0 @@ "on": {

package.json

 {
   "name": "@opentiny/vue-tag",
-  "version": "2.9.0",
+  "version": "2.10.0",
   "description": "",
@@ -8,6 +8,9 @@ "main": "./lib/index.js",
   "sideEffects": false,
+  "type": "module",
   "dependencies": {
-    "@opentiny/vue-renderless": "~3.9.0",
-    "@opentiny/vue-common": "~2.9.0",
-    "@opentiny/vue-icon": "~2.9.0"
+    "@opentiny/vue-renderless": "~3.10.0",
+    "@opentiny/vue-common": "~2.10.0",
+    "@opentiny/vue-icon": "~2.10.0",
+    "@opentiny/vue-theme": "~3.10.0",
+    "@opentiny/vue-theme-mobile": "~3.10.0"
   },
@@ -14,0 +17,0 @@ "license": "MIT",

src/index.d.ts

@@ -0,1 +1,30 @@
+export declare const tagProps: {
+    hit: BooleanConstructor;
+    text: StringConstructor;
+    type: StringConstructor;
+    theme: StringConstructor;
+    size: StringConstructor;
+    color: StringConstructor;
+    closable: BooleanConstructor;
+    operable: BooleanConstructor;
+    disabled: BooleanConstructor;
+    selectable: BooleanConstructor;
+    customClass: {
+        type: StringConstructor;
+        default: string;
+    };
+    effect: {
+        type: StringConstructor;
+        default: string;
+        validator: (value: string) => boolean;
+    };
+    beforeDelete: FunctionConstructor;
+    value: (StringConstructor | NumberConstructor)[];
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<() => import("vue").VNode> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
@@ -22,2 +51,3 @@ hit: BooleanConstructor;
     beforeDelete: FunctionConstructor;
+    value: (StringConstructor | NumberConstructor)[];
     tiny_mode: StringConstructor;
@@ -30,13 +60,16 @@ tiny_mode_root: BooleanConstructor;
 }, {
+    disabled: boolean;
+    tiny_mode_root: boolean;
     customClass: string;
-    tiny_mode_root: boolean;
     closable: boolean;
-    disabled: boolean;
+    effect: string;
     hit: boolean;
     operable: boolean;
     selectable: boolean;
-    effect: string;
 } & {
+    value?: string | number | undefined;
+    color?: string | undefined;
+    text?: string | undefined;
+    type?: string | undefined;
     tiny_mode?: string | undefined;
-    type?: string | undefined;
     tiny_template?: unknown;
@@ -48,17 +81,18 @@ tiny_renderless?: Function | undefined;
     theme?: string | undefined;
-    text?: string | undefined;
-    color?: string | undefined;
     beforeDelete?: Function | undefined;
 }> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
+    disabled: boolean;
+    tiny_mode_root: boolean;
     customClass: string;
-    tiny_mode_root: boolean;
     closable: boolean;
-    disabled: boolean;
+    effect: string;
     hit: boolean;
     operable: boolean;
     selectable: boolean;
-    effect: string;
 } & {
+    value?: string | number | undefined;
+    color?: string | undefined;
+    text?: string | undefined;
+    type?: string | undefined;
     tiny_mode?: string | undefined;
-    type?: string | undefined;
     tiny_template?: unknown;
@@ -70,17 +104,18 @@ tiny_renderless?: Function | undefined;
     theme?: string | undefined;
-    text?: string | undefined;
-    color?: string | undefined;
     beforeDelete?: Function | undefined;
 }, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<() => import("vue").VNode>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
+    disabled: boolean;
+    tiny_mode_root: boolean;
     customClass: string;
-    tiny_mode_root: boolean;
     closable: boolean;
-    disabled: boolean;
+    effect: string;
     hit: boolean;
     operable: boolean;
     selectable: boolean;
-    effect: string;
 } & {
+    value?: string | number | undefined;
+    color?: string | undefined;
+    text?: string | undefined;
+    type?: string | undefined;
     tiny_mode?: string | undefined;
-    type?: string | undefined;
     tiny_template?: unknown;
@@ -92,4 +127,2 @@ tiny_renderless?: Function | undefined;
     theme?: string | undefined;
-    text?: string | undefined;
-    color?: string | undefined;
     beforeDelete?: Function | undefined;
@@ -96,0 +129,0 @@ }, {

src/mobile-first.vue.d.ts

@@ -1,30 +0,8 @@
-declare const _sfc_main: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    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;
-}> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, Readonly<{
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<unknown> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, unknown, {
     [x: string]: any;
-}>, {
+}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
     [x: string]: any;
-} & {}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
+}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<unknown>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
     [x: string]: any;
-} & {}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    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;
-}>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
-    [x: string]: any;
-} & {}, {
-    [x: string]: any;
-}, true>);
-export default _sfc_main;
+}, {}, true>);
+export default _default;

src/pc.vue.d.ts

@@ -1,30 +0,8 @@
-declare const _sfc_main: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    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;
-}> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, Readonly<{
+declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<unknown> & import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, unknown, {
     [x: string]: any;
-}>, {
+}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
     [x: string]: any;
-} & {}> & import("vue").VueConstructor<import("vue").default> & (new (...args: any[]) => import("@vue/composition-api/dist/vue-composition-api.js").ComponentRenderProxy<{
+}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<unknown>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
     [x: string]: any;
-} & {}, import("@vue/composition-api/dist/vue-composition-api.js").ShallowUnwrapRef<{
-    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;
-}>, import("@vue/composition-api/dist/vue-composition-api.js").Data, {}, {}, {
-    [x: string]: any;
-} & {}, {
-    [x: string]: any;
-}, true>);
-export default _sfc_main;
+}, {}, true>);
+export default _default;

No alert changes

Improved metrics

Total package byte prevSize

22846

increased by0.75%

Number of package files

11

increased by10%

Is type module

Yes

Worsened metrics

Dependency count

5

increased by66.67%

Lines of code

563

decreased by-1.23%

Dependency changes

• + Added@opentiny/vue-theme@~3.10.0

• + Added@opentiny/vue-theme-mobile@~3.10.0

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-common@~2.10.0

• Updated@opentiny/vue-icon@~2.10.0

• Updated@opentiny/vue-renderless@~3.10.0