@opentiny/vue-floating-button - npm Package Compare versions

Comparing version 3.12.0 to 3.13.0-alpha.0

lib/index.js

@@ -15,31 +15,56 @@ function _extends() {
 }
-import { $prefix, $props, $setup } from "@opentiny/vue-common";
+import { $prefix, $setup, $props } from "@opentiny/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 floatingButtonProps = _extends({}, $props, {
+  position: {
+    type: String,
+    default: "right"
+  },
+  backgroundColor: {
+    type: String,
+    default: ""
+  },
+  icon: {
+    type: [Object, String],
+    default: "icon-plus"
+  },
+  resetTime: {
+    type: [String, Number],
+    default: 0
+  },
+  animated: {
+    type: Boolean,
+    default: false
+  },
+  expandList: {
+    type: Array,
+    default: function _default() {
+      return [];
+    }
+  },
+  isExpand: {
+    type: Boolean,
+    default: false
+  },
+  vague: {
+    type: Boolean,
+    default: false
+  },
+  mask: {
+    type: Boolean,
+    default: false
+  },
+  elementSelector: {
+    type: String,
+    default: ""
+  }
+});
 var FloatingButton = {
   name: $prefix + "FloatingButton",
-  props: _extends({}, $props, {
-    position: {
-      type: String,
-      default: ""
-    },
-    backgroundColor: {
-      type: String,
-      default: ""
-    },
-    icon: {
-      type: [Object, String],
-      default: "icon-plus"
-    },
-    resetTime: {
-      type: [String, Number],
-      default: 0
-    },
-    animated: {
-      type: Boolean,
-      default: false
-    }
-  }),
+  props: floatingButtonProps,
   setup: function setup(props, context) {
@@ -53,3 +78,3 @@ return $setup({
 };
-var version = "3.12.0";
+var version = "3.13.0-alpha.0";
 FloatingButton.install = function(Vue) {
@@ -56,0 +81,0 @@ Vue.component(FloatingButton.name, FloatingButton);

lib/mobile-first.js

 import { renderless, api } from "@opentiny/vue-renderless/floating-button/vue";
 import { defineComponent, props, setup as _setup } from "@opentiny/vue-common";
-import { IconPlus } from "@opentiny/vue-icon";
-import { openBlock, createElementBlock, normalizeClass, normalizeStyle, createBlock, resolveDynamicComponent } from "vue";
+import { iconPlus } from "@opentiny/vue-icon";
+import { openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, normalizeStyle, createBlock, resolveDynamicComponent, toDisplayString } from "vue";
 function _createForOfIteratorHelperLoose_tiny(o, allowArrayLike) {
@@ -51,6 +51,6 @@ var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"];
 var _sfc_main = defineComponent({
-  emits: ["touchstart"],
-  props: [].concat(props, ["position", "backgroundColor", "icon", "resetTime", "animated"]),
+  emits: ["click"],
+  props: [].concat(props, ["position", "backgroundColor", "icon", "resetTime", "animated", "expandList", "isExpand", "vague", "mask", "elementSelector"]),
   components: {
-    IconPlus: IconPlus()
+    IconPlus: iconPlus()
   },
@@ -66,19 +66,163 @@ setup: function setup(props2, context) {
 });
+var _hoisted_1 = {
+  "data-tag": "tiny-floating-button-body"
+};
 function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
-  return openBlock(), createElementBlock(
-    "button",
+  return openBlock(), createElementBlock("div", _hoisted_1, [_ctx.vague || _ctx.mask ? (openBlock(), createElementBlock(
+    "div",
     {
+      key: 0,
+      "data-tag": "tiny-floating-button-mask",
+      class: normalizeClass(["w-screen h-screen fixed top-0 bottom-0 left-0 right-0", {
+        "bg-color-fill-5 backdrop-blur-md": _ctx.vague
+      }, {
+        "bg-black opacity-30": _ctx.mask
+      }])
+    },
+    null,
+    2
+    /* CLASS */
+  )) : createCommentVNode("v-if", true), createElementVNode(
+    "div",
+    {
       "data-tag": "tiny-floating-button",
-      onTouchstart: _cache[0] || (_cache[0] = function() {
-        return _ctx.handleClick && _ctx.handleClick.apply(_ctx, arguments);
-      }),
-      class: normalizeClass(_ctx.m("w-11 h-11 p-3 rounded-full fixed bottom-6 leading-none", _ctx.position === "center" ? "" : _ctx.position === "left" ? !_ctx.state.specialHiddenSpace && "left-3" : "right-3", _ctx.state.disabled ? "text-color-text-disabled bg-color-bg-3 border-transparent active:cursor-not-allowed" : _ctx.backgroundColor === "white" ? "bg-color-bg-1" : "text-color-bg-1 bg-color-brand")),
+      class: normalizeClass(["rounded-full fixed bottom-11 leading-none", _ctx.position === "center" ? "" : _ctx.position === "left" ? !_ctx.state.specialHiddenSpace && "left-3" : "right-3"]),
       style: normalizeStyle(_ctx.state.style)
     },
-    [(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
-      class: normalizeClass(["w-5 h-5", _ctx.state.disabled ? "fill-color-icon-disabled active:cursor-not-allowed" : _ctx.backgroundColor === "white" ? "fill-color-icon-secondary" : "fill-color-bg-1"])
-    }, null, 8, ["class"]))],
-    38
-    /* CLASS, STYLE, NEED_HYDRATION */
-  );
+    [createElementVNode(
+      "button",
+      {
+        "data-tag": "tiny-floating-button-main",
+        onClick: _cache[0] || (_cache[0] = function($event) {
+          return _ctx.handleClick($event, 0);
+        }),
+        ref: "floatingButton",
+        class: normalizeClass(_ctx.m("w-11 h-11 p-3 rounded-full", _ctx.state.disabled ? "text-color-text-disabled bg-color-bg-3 border-transparent active:cursor-not-allowed" : _ctx.backgroundColor === "white" ? "bg-color-bg-1" : "text-color-bg-1 bg-color-brand"))
+      },
+      [(openBlock(), createBlock(resolveDynamicComponent(_ctx.icon), {
+        "data-tag": "tiny-floating-button-icon",
+        class: normalizeClass(_ctx.m("w-5 h-5 rotate-0 transition-transform duration-300 will-change-transform", _ctx.state.disabled ? "fill-color-icon-disabled active:cursor-not-allowed" : _ctx.backgroundColor === "white" ? "fill-color-icon-secondary" : "fill-color-bg-1", {
+          "rotate-45": _ctx.state.isExpand
+        }))
+      }, null, 8, ["class"]))],
+      2
+      /* CLASS */
+    ), _ctx.state.expandList && _ctx.state.expandList.length >= 1 ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 0,
+        "data-tag": "tiny-floating-button-expand-first",
+        onClick: _cache[1] || (_cache[1] = function($event) {
+          return _ctx.handleClick($event, 1);
+        }),
+        class: normalizeClass(_ctx.m("absolute -bottom-5 -mb-0.5 -left-0.5 -z-10 transition-bottom ease-linear duration-100 cursor-pointer", {
+          "bottom-18 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "right"
+        }, {
+          "bottom-16 -mb-1 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "center"
+        }, {
+          "bottom-18 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "left"
+        }))
+      },
+      [createElementVNode(
+        "button",
+        {
+          class: normalizeClass(_ctx.m("w-11 h-11 rounded-full mx-0.5", _ctx.state.disabled ? "text-color-text-disabled bg-color-bg-3 border-transparent active:cursor-not-allowed" : "bg-color-info-primary-subtler"))
+        },
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.expandList && _ctx.state.expandList[0].icon), {
+          "data-tag": "tiny-floating-button-icon",
+          class: normalizeClass(["w-5 h-5", _ctx.state.disabled ? "fill-color-icon-disabled active:cursor-not-allowed" : "fill-color-brand"])
+        }, null, 8, ["class"]))],
+        2
+        /* CLASS */
+      ), createElementVNode(
+        "span",
+        {
+          class: normalizeClass(["text-center mt-0.5 text-xs w-12 leading-5 block opacity-0 transition-opacity ease-linear duration-100 invisible", !_ctx.mask ? "text-color-fill-primary" : "text-color-bg-1"])
+        },
+        toDisplayString(_ctx.state.expandList && _ctx.state.expandList[0].title),
+        3
+        /* TEXT, CLASS */
+      )],
+      2
+      /* CLASS */
+    )) : createCommentVNode("v-if", true), _ctx.state.expandList && _ctx.state.expandList.length >= 2 ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 1,
+        "data-tag": "tiny-floating-button-expand-second",
+        onClick: _cache[2] || (_cache[2] = function($event) {
+          return _ctx.handleClick($event, 2);
+        }),
+        class: normalizeClass(_ctx.m("absolute -bottom-5 -mb-0.5 -left-0.5 -z-10 transition-bottom ease-linear duration-100 cursor-pointer", {
+          "-left-18 bottom-11 mb-0 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "right"
+        }, {
+          "-left-18 right-auto bottom-4.5 mb-0 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "center"
+        }, {
+          "left-18 right-auto bottom-11 mb-0 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "left"
+        }))
+      },
+      [createElementVNode(
+        "button",
+        {
+          class: normalizeClass(_ctx.m("w-11 h-11 rounded-full mx-0.5", _ctx.state.disabled ? "text-color-text-disabled bg-color-bg-3 border-transparent active:cursor-not-allowed" : "bg-color-success-subtler"))
+        },
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.expandList && _ctx.state.expandList[1].icon), {
+          "data-tag": "tiny-floating-button-icon",
+          class: normalizeClass(["w-5 h-5", _ctx.state.disabled ? "fill-color-icon-disabled active:cursor-not-allowed" : "fill-color-success-active"])
+        }, null, 8, ["class"]))],
+        2
+        /* CLASS */
+      ), createElementVNode(
+        "span",
+        {
+          class: normalizeClass(["text-center text-xs mt-0.5 w-12 leading-5 block opacity-0 transition-opacity ease-linear duration-100 invisible", !_ctx.mask ? "text-color-fill-primary" : "text-color-bg-1"])
+        },
+        toDisplayString(_ctx.state.expandList && _ctx.state.expandList[1].title),
+        3
+        /* TEXT, CLASS */
+      )],
+      2
+      /* CLASS */
+    )) : createCommentVNode("v-if", true), _ctx.state.expandList && _ctx.state.expandList.length >= 3 ? (openBlock(), createElementBlock(
+      "div",
+      {
+        key: 2,
+        "data-tag": "tiny-floating-button-expand-third",
+        onClick: _cache[3] || (_cache[3] = function($event) {
+          return _ctx.handleClick($event, 3);
+        }),
+        class: normalizeClass(_ctx.m("absolute -bottom-5 -mb-0.5 -left-0.5 -z-10 transition-bottom ease-linear duration-100 cursor-pointer", {
+          "-left-18 -bottom-9 -mb-1 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "right"
+        }, {
+          "left-18 right-auto bottom-4.5 mb-0 [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "center"
+        }, {
+          "left-18 -bottom-9 -mb-1 right-auto [&_span]:opacity-100 [&_span]:visible": _ctx.state.isExpand && _ctx.position === "left"
+        }))
+      },
+      [createElementVNode(
+        "button",
+        {
+          class: normalizeClass(_ctx.m("w-11 h-11 rounded-full mx-0.5", _ctx.state.disabled ? "text-color-text-disabled bg-color-bg-3 border-transparent active:cursor-not-allowed" : "bg-color-warning-subtler"))
+        },
+        [(openBlock(), createBlock(resolveDynamicComponent(_ctx.state.expandList && _ctx.state.expandList[2].icon), {
+          "data-tag": "tiny-floating-button-icon",
+          class: normalizeClass(["w-5 h-5", _ctx.state.disabled ? "fill-color-icon-disabled active:cursor-not-allowed" : "fill-color-alert-hover"])
+        }, null, 8, ["class"]))],
+        2
+        /* CLASS */
+      ), createElementVNode(
+        "span",
+        {
+          class: normalizeClass(["text-center text-xs mt-0.5 w-12 leading-5 block opacity-0 transition-opacity ease-linear duration-100 invisible", !_ctx.mask ? "text-color-fill-primary" : "text-color-bg-1"])
+        },
+        toDisplayString(_ctx.state.expandList && _ctx.state.expandList[2].title),
+        3
+        /* TEXT, CLASS */
+      )],
+      2
+      /* CLASS */
+    )) : createCommentVNode("v-if", true)],
+    6
+    /* CLASS, STYLE */
+  )]);
 }
@@ -85,0 +229,0 @@ var mobileFirst = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);

package.json

 {
   "name": "@opentiny/vue-floating-button",
-  "version": "3.12.0",
+  "version": "3.13.0-alpha.0",
   "description": "",
@@ -10,5 +10,5 @@ "module": "./lib/index.js",
   "dependencies": {
-    "@opentiny/vue-renderless": "~3.12.0",
-    "@opentiny/vue-common": "~3.12.0",
-    "@opentiny/vue-icon": "~3.12.0"
+    "@opentiny/vue-renderless": "~3.13.0-alpha.0",
+    "@opentiny/vue-common": "~3.13.0-alpha.0",
+    "@opentiny/vue-icon": "~3.13.0-alpha.0"
   },
@@ -15,0 +15,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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

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

Improved metrics

Total package byte prevSize

14090

increased by47.82%

Lines of code

313

increased by33.19%

Worsened metrics

Number of package files

4

decreased by-42.86%

Number of low quality alerts

2

increased by100%

Number of low supply chain risk alerts

2

increased by100%

Number of medium supply chain risk alerts

1

increased byInfinity%

Dependency changes

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

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

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

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

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

• + Added@opentiny/vue-theme-mobile@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