@opentiny/vue-checkbox - npm Package Compare versions

Comparing version 3.13.0 to 3.14.0

lib/index.js

@@ -88,3 +88,7 @@ function _extends() {
   },
-  iconPosition: String
+  iconPosition: String,
+  shape: {
+    type: String,
+    default: ""
+  }
 });
@@ -102,3 +106,3 @@ var Checkbox = defineComponent({
 });
-var version = "3.13.0";
+var version = "3.14.0";
 Checkbox.model = {
@@ -105,0 +109,0 @@ prop: "modelValue",

lib/mobile-first.js

 import { renderless, api } from "@opentiny/vue-renderless/checkbox/vue";
 import { defineComponent, props, setup as _setup } from "@opentiny/vue-common";
 import { iconHalfselect, iconCheckedSur, iconCheck } from "@opentiny/vue-icon";
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createVNode, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, Fragment, createCommentVNode } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -77,4 +77,3 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
   key: 0,
-  ref: "label",
-  class: "py-3 sm:py-0 pl-0 sm:pl-2 text-color-text-primary mr-5 flex-auto"
+  class: "text-color-text-primary cursor-default"
 };
@@ -87,7 +86,9 @@ function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
     "data-tag": "tiny-checkbox",
-    class: _ctx.m("inline-flex sm:items-center text-sm sm:py-2 leading-5 cursor-pointer", _ctx.state.size === "medium" ? "sm:text-sm" : "sm:text-xs", _ctx.customClass),
+    class: _ctx.m("inline-flex sm:items-center text-sm leading-5 cursor-pointer", _ctx.state.size === "medium" ? "sm:text-sm" : "sm:text-xs", {
+      "sm:py-2": _ctx.state.vertical
+    }, _ctx.state.isDisplayOnly || _ctx.state.isGroupDisplayOnly ? _ctx.state.isChecked ? "cursor-default after:content-[';'] after:inline-block last:after:content-['']" : "hidden" : "", _ctx.state.showLabel ? "inline-flex" : "", _ctx.customClass),
     id: _ctx.id,
     tabindex: "-1"
   }, _ctx.a(_ctx.$attrs, ["class", "style", "onClick"], true)), [createElementVNode("span", {
-    class: normalizeClass(["relative w-11 h-11 sm:p-0", _ctx.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:h-4 sm:w-4", _ctx.state.isDisplayOnly || _ctx.state.isGroupDisplayOnly ? "hidden" : ""]),
+    class: normalizeClass(["relative w-7 h-7 mr-2 sm:mr-0 sm:p-0", _ctx.state.size === "medium" ? "sm:w-6 sm:h-6" : "sm:h-4 sm:w-4", _ctx.state.isDisplayOnly || _ctx.state.isGroupDisplayOnly ? "hidden" : ""]),
     role: _ctx.indeterminate ? "checkbox" : false,
@@ -106,7 +107,7 @@ "aria-checked": _ctx.indeterminate ? "mixed" : false
     key: 0,
-    class: "absolute inset-0 w-0 h-0 -z-10 opacity-0",
+    class: "absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0",
     type: "checkbox",
     "aria-hidden": _ctx.indeterminate ? "true" : "false",
     name: _ctx.name,
-    disabled: _ctx.state.isDisabled,
+    disabled: _ctx.state.inputDisabled,
     "true-value": _ctx.trueLabel,
@@ -130,6 +131,6 @@ "false-value": _ctx.falseLabel,
     key: 1,
-    class: "absolute inset-0 w-0 h-0 -z-10 opacity-0",
+    class: "absolute left-0 right-0 top-0 bottom-0 w-0 h-0 -z-10 opacity-0",
     type: "checkbox",
     "aria-hidden": _ctx.indeterminate ? "true" : "false",
-    disabled: _ctx.state.isDisabled,
+    disabled: _ctx.state.inputDisabled,
     value: _ctx.label,
@@ -153,3 +154,7 @@ name: _ctx.name,
     "span",
-    _hoisted_6,
+    {
+      key: 0,
+      ref: "label",
+      class: normalizeClass(_ctx.m("py-0 pl-0 sm:pl-2 mr-5 flex-auto leading-7 sm:leading-none", _ctx.state.isDisabled ? "cursor-not-allowed text-color-text-disabled" : "text-color-text-primary", _ctx.state.isDisplayOnly || _ctx.state.isGroupDisplayOnly ? "p-0 sm:p-0 m-0 text-color-text-primary cursor-default" : ""))
+    },
     [renderSlot(_ctx.$slots, "default", {}, function() {
@@ -162,5 +167,19 @@ return [createTextVNode(
     })],
-    512
-    /* NEED_PATCH */
-  )) : createCommentVNode("v-if", true)], 16, _hoisted_1);
+    2
+    /* CLASS */
+  )) : (openBlock(), createElementBlock(
+    Fragment,
+    {
+      key: 1
+    },
+    [_ctx.state.isDisplayOnly ? (openBlock(), createElementBlock(
+      "span",
+      _hoisted_6,
+      toDisplayString(_ctx.state.displayLabel),
+      1
+      /* TEXT */
+    )) : createCommentVNode("v-if", true)],
+    64
+    /* STABLE_FRAGMENT */
+  ))], 16, _hoisted_1);
 }
@@ -167,0 +186,0 @@ var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

lib/mobile.js

@@ -51,4 +51,4 @@ import { renderless, api } from "@opentiny/vue-renderless/checkbox/vue";
 var _sfc_main = defineComponent({
-  inheritAttrs: false,
   props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "iconPosition"]),
+  emits: ["update:modelValue", "change", "complete", "click"],
   setup: function setup(props2, context) {
@@ -55,0 +55,0 @@ return _setup({

lib/pc.js

@@ -5,3 +5,4 @@ import { renderless, api } from "@opentiny/vue-renderless/checkbox/vue";
 import { iconHalfselect, iconCheckedSur, iconCheck } from "@opentiny/vue-icon";
-import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createBlock, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
+import Tooltip from "@opentiny/vue-tooltip";
+import { resolveComponent, openBlock, createElementBlock, mergeProps, createElementVNode, normalizeClass, createBlock, withDirectives, withModifiers, vModelCheckbox, renderSlot, createTextVNode, toDisplayString, createVNode, createCommentVNode } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -53,8 +54,9 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 var _sfc_main = defineComponent({
-  emits: ["change", "update:modelValue", "complete"],
-  props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "controls", "size", "border", "validateEvent", "displayOnly"]),
+  emits: ["update:modelValue", "change", "complete", "click"],
+  props: [].concat(props, ["modelValue", "text", "events", "label", "indeterminate", "disabled", "checked", "name", "trueLabel", "falseLabel", "id", "controls", "size", "border", "validateEvent", "displayOnly", "shape"]),
   components: {
     IconHalfselect: iconHalfselect(),
     IconCheckedSur: iconCheckedSur(),
-    IconCheck: iconCheck()
+    IconCheck: iconCheck(),
+    TinyTooltip: Tooltip
   },
@@ -78,6 +80,2 @@ setup: function setup(props2, context) {
 var _hoisted_5 = ["aria-hidden", "disabled", "value", "name"];
-var _hoisted_6 = {
-  key: 0,
-  class: "tiny-checkbox__label tiny-checkbox-display-only"
-};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
@@ -87,2 +85,3 @@ var _component_icon_halfselect = resolveComponent("icon-halfselect");
   var _component_icon_check = resolveComponent("icon-check");
+  var _component_tiny_tooltip = resolveComponent("tiny-tooltip");
   return openBlock(), createElementBlock("label", mergeProps({
@@ -99,2 +98,4 @@ class: ["tiny-checkbox", [_ctx.border && _ctx.state.checkboxSize ? "tiny-checkbox--" + _ctx.state.checkboxSize : "", {
       "is-display-only": _ctx.state.isDisplayOnly
+    }, {
+      "is-filter": _ctx.state.shape === "filter"
     }]],
@@ -112,3 +113,3 @@ id: _ctx.id,
     "aria-checked": _ctx.indeterminate ? "mixed" : false
-  }, [createElementVNode("span", _hoisted_3, [_ctx.indeterminate ? (openBlock(), createBlock(_component_icon_halfselect, {
+  }, [createElementVNode("span", _hoisted_3, [_ctx.indeterminate && _ctx.state.shape !== "filter" ? (openBlock(), createBlock(_component_icon_halfselect, {
     key: 0,
@@ -167,9 +168,34 @@ class: "tiny-svg-size icon-halfselect"
     }, ["stop"]))
-  }, null, 40, _hoisted_5)), [[vModelCheckbox, _ctx.state.model]])], 10, _hoisted_2), _ctx.slots.default && _ctx.slots.default() || _ctx.state.isShowText ? (openBlock(), createElementBlock("span", _hoisted_6, [renderSlot(_ctx.$slots, "default", {}, function() {
-    return [createTextVNode(
-      toDisplayString(_ctx.state.showText),
-      1
-      /* TEXT */
-    )];
-  })])) : createCommentVNode("v-if", true)], 16, _hoisted_1);
+  }, null, 40, _hoisted_5)), [[vModelCheckbox, _ctx.state.model]])], 10, _hoisted_2), _ctx.slots.default && _ctx.slots.default() || _ctx.state.isShowText ? (openBlock(), createElementBlock(
+    "span",
+    {
+      key: 0,
+      class: "tiny-checkbox__label tiny-checkbox-display-only",
+      onMouseenter: _cache[11] || (_cache[11] = function() {
+        return _ctx.handleLabelMouseenter && _ctx.handleLabelMouseenter.apply(_ctx, arguments);
+      }),
+      onMouseleave: _cache[12] || (_cache[12] = function() {
+        return _ctx.handleMouseleave && _ctx.handleMouseleave.apply(_ctx, arguments);
+      })
+    },
+    [renderSlot(_ctx.$slots, "default", {}, function() {
+      return [createTextVNode(
+        toDisplayString(_ctx.state.showText),
+        1
+        /* TEXT */
+      )];
+    }), createVNode(_component_tiny_tooltip, {
+      ref: "tooltip",
+      modelValue: _ctx.state.tooltipVisible,
+      "onUpdate:modelValue": _cache[10] || (_cache[10] = function($event) {
+        return _ctx.state.tooltipVisible = $event;
+      }),
+      manual: true,
+      effect: "light",
+      content: _ctx.state.displayedValue,
+      placement: "top"
+    }, null, 8, ["modelValue", "content"])],
+    32
+    /* NEED_HYDRATION */
+  )) : createCommentVNode("v-if", true)], 16, _hoisted_1);
 }
@@ -176,0 +202,0 @@ var pc = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package.json

 {
   "name": "@opentiny/vue-checkbox",
-  "version": "3.13.0",
+  "version": "3.14.0",
   "description": "",
@@ -10,4 +10,8 @@ "main": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-common": "~3.13.0",
-    "@opentiny/vue-renderless": "~3.13.0"
+    "@opentiny/vue-common": "~3.14.0",
+    "@opentiny/vue-renderless": "~3.14.0",
+    "@opentiny/vue-tooltip": "~3.14.0",
+    "@opentiny/vue-icon": "~3.14.0",
+    "@opentiny/vue-theme-mobile": "~3.14.0",
+    "@opentiny/vue-theme": "~3.14.0"
   },
@@ -14,0 +18,0 @@ "license": "MIT",

src/index.d.ts

@@ -54,2 +54,6 @@ import type { PropType } from '@opentiny/vue-common';
     iconPosition: PropType<IconPosition>;
+    shape: {
+        type: StringConstructor;
+        default: string;
+    };
     tiny_mode: StringConstructor;
@@ -107,2 +111,6 @@ tiny_mode_root: BooleanConstructor;
     iconPosition: PropType<IconPosition>;
+    shape: {
+        type: StringConstructor;
+        default: string;
+    };
     tiny_mode: StringConstructor;
@@ -161,2 +169,6 @@ tiny_mode_root: BooleanConstructor;
     iconPosition: PropType<IconPosition>;
+    shape: {
+        type: StringConstructor;
+        default: string;
+    };
     tiny_mode: StringConstructor;
@@ -176,7 +188,8 @@ tiny_mode_root: BooleanConstructor;
     displayOnly: boolean;
+    shape: string;
     events: Record<string, any>;
+    indeterminate: boolean;
     checked: boolean;
-    indeterminate: boolean;
     controls: string;
 }, {}>;
 export default _default;

src/mobile-first.vue.d.ts

@@ -17,12 +17,20 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     customClass?: any;
-    id?: any;
     validateEvent?: any;
     displayOnly?: any;
+    id?: any;
     events?: any;
+    indeterminate?: any;
     checked?: any;
-    indeterminate?: any;
     trueLabel?: any;
     falseLabel?: any;
     controls?: any;
-}>, any, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("update:modelValue" | "change" | "complete")[], "update:modelValue" | "change" | "complete", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}>, {
+    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;
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "update:modelValue" | "complete")[], "change" | "update:modelValue" | "complete", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     text?: any;
@@ -43,8 +51,8 @@ label?: any;
     customClass?: any;
-    id?: any;
     validateEvent?: any;
     displayOnly?: any;
+    id?: any;
     events?: any;
+    indeterminate?: any;
     checked?: any;
-    indeterminate?: any;
     trueLabel?: any;
@@ -73,8 +81,8 @@ falseLabel?: any;
     readonly customClass?: any;
-    readonly id?: any;
     readonly validateEvent?: any;
     readonly displayOnly?: any;
+    readonly id?: any;
     readonly events?: any;
+    readonly indeterminate?: any;
     readonly checked?: any;
-    readonly indeterminate?: any;
     readonly trueLabel?: any;
@@ -81,0 +89,0 @@ readonly falseLabel?: any;

src/mobile.vue.d.ts

@@ -16,4 +16,4 @@ declare const _default: import("@vue/runtime-core").DefineComponent<Readonly<{
     events?: any;
+    indeterminate?: any;
     checked?: any;
-    indeterminate?: any;
     trueLabel?: any;
@@ -30,3 +30,3 @@ falseLabel?: any;
     gcls: (key: any) => any;
-}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, {}, string, import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "update:modelValue" | "click" | "complete")[], "change" | "update:modelValue" | "click" | "complete", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     text?: any;
@@ -46,8 +46,13 @@ label?: any;
     events?: any;
+    indeterminate?: any;
     checked?: any;
-    indeterminate?: any;
     trueLabel?: any;
     falseLabel?: any;
     iconPosition?: any;
-}>>>, {
+}>>> & {
+    onChange?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    onComplete?: ((...args: any[]) => any) | undefined;
+}, {
     readonly text?: any;
@@ -67,4 +72,4 @@ readonly label?: any;
     readonly events?: any;
+    readonly indeterminate?: any;
     readonly checked?: any;
-    readonly indeterminate?: any;
     readonly trueLabel?: any;
@@ -71,0 +76,0 @@ readonly falseLabel?: any;

src/pc.vue.d.ts

@@ -17,12 +17,13 @@ import type { ICheckboxApi } from '@opentiny/vue-renderless/types/checkbox.type';
     border?: any;
-    id?: any;
     validateEvent?: any;
     displayOnly?: any;
+    shape?: any;
+    id?: any;
     events?: any;
+    indeterminate?: any;
     checked?: any;
-    indeterminate?: any;
     trueLabel?: any;
     falseLabel?: any;
     controls?: any;
-}>, ICheckboxApi, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("update:modelValue" | "change" | "complete")[], "update:modelValue" | "change" | "complete", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
+}>, ICheckboxApi, unknown, {}, {}, import("@vue/runtime-core").ComponentOptionsMixin, import("@vue/runtime-core").ComponentOptionsMixin, ("change" | "update:modelValue" | "click" | "complete")[], "change" | "update:modelValue" | "click" | "complete", import("@vue/runtime-core").VNodeProps & import("@vue/runtime-core").AllowedComponentProps & import("@vue/runtime-core").ComponentCustomProps, Readonly<import("@vue/runtime-core").ExtractPropTypes<Readonly<{
     text?: any;
@@ -42,8 +43,9 @@ label?: any;
     border?: any;
-    id?: any;
     validateEvent?: any;
     displayOnly?: any;
+    shape?: any;
+    id?: any;
     events?: any;
+    indeterminate?: any;
     checked?: any;
-    indeterminate?: any;
     trueLabel?: any;
@@ -54,2 +56,3 @@ falseLabel?: any;
     onChange?: ((...args: any[]) => any) | undefined;
+    onClick?: ((...args: any[]) => any) | undefined;
     "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
@@ -72,8 +75,9 @@ onComplete?: ((...args: any[]) => any) | undefined;
     readonly border?: any;
-    readonly id?: any;
     readonly validateEvent?: any;
     readonly displayOnly?: any;
+    readonly shape?: any;
+    readonly id?: any;
     readonly events?: any;
+    readonly indeterminate?: any;
     readonly checked?: any;
-    readonly indeterminate?: any;
     readonly trueLabel?: any;
@@ -80,0 +84,0 @@ readonly falseLabel?: any;

No alert changes

Improved metrics

Total package byte prevSize

42065

increased by8.15%

Lines of code

1100

increased by7.84%

Worsened metrics

Dependency count

6

increased by200%

Dependency changes

• + Added@opentiny/vue-icon@~3.14.0

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

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

• + Added@opentiny/vue-tooltip@~3.14.0

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

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

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

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

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

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

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

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

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

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

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

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

• Updated@opentiny/vue-common@~3.14.0

• Updated@opentiny/vue-renderless@~3.14.0