@varlet/ui 2.8.6 → 2.8.7-alpha.1678160786574

package/lib/varlet.cjs.js

@@ -457,6 +457,104 @@ function useClickOutside(target, type, listener) {
   };
   useEventListener(document, type, handler);
 }
+var __rest = globalThis && globalThis.__rest || function(s, e) {
+  var t = {};
+  for (var p in s)
+    if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+      t[p] = s[p];
+  if (s != null && typeof Object.getOwnPropertySymbols === "function")
+    for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+      if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+        t[p[i]] = s[p[i]];
+    }
+  return t;
+};
+function keyInProvides$1(key) {
+  const instance = vue.getCurrentInstance();
+  return key in instance.provides;
+}
+function useParent$1(key) {
+  if (!keyInProvides$1(key)) {
+    return {
+      index: null,
+      parentProvider: null,
+      bindParent: null
+    };
+  }
+  const provider = vue.inject(key);
+  const { childInstances, collect, clear: clear2 } = provider, parentProvider = __rest(provider, ["childInstances", "collect", "clear"]);
+  const childInstance = vue.getCurrentInstance();
+  const index = vue.computed(() => childInstances.indexOf(childInstance));
+  const bindParent = (childProvider) => {
+    vue.onMounted(() => {
+      vue.nextTick().then(() => {
+        collect(childInstance, childProvider);
+      });
+    });
+    vue.onBeforeUnmount(() => {
+      vue.nextTick().then(() => {
+        clear2(childInstance, childProvider);
+      });
+    });
+  };
+  return {
+    index,
+    parentProvider,
+    bindParent
+  };
+}
+function flatVNodes$1(subTree) {
+  const vNodes = [];
+  const flat = (subTree2) => {
+    if (subTree2 === null || subTree2 === void 0 ? void 0 : subTree2.component) {
+      flat(subTree2 === null || subTree2 === void 0 ? void 0 : subTree2.component.subTree);
+      return;
+    }
+    if (Array.isArray(subTree2 === null || subTree2 === void 0 ? void 0 : subTree2.children)) {
+      subTree2.children.forEach((child) => {
+        if (vue.isVNode(child)) {
+          vNodes.push(child);
+          flat(child);
+        }
+      });
+    }
+  };
+  flat(subTree);
+  return vNodes;
+}
+function useChildren$1(key) {
+  const parentInstance = vue.getCurrentInstance();
+  const childInstances = vue.reactive([]);
+  const childProviders = [];
+  const length = vue.computed(() => childInstances.length);
+  const sortInstances = () => {
+    const vNodes = flatVNodes$1(parentInstance.subTree);
+    childInstances.sort((a, b) => {
+      return vNodes.indexOf(a.vnode) - vNodes.indexOf(b.vnode);
+    });
+  };
+  const collect = (childInstance, childProvider) => {
+    childInstances.push(childInstance);
+    childProviders.push(childProvider);
+    sortInstances();
+  };
+  const clear2 = (childInstance, childProvider) => {
+    removeItem(childInstances, childInstance);
+    removeItem(childProviders, childProvider);
+  };
+  const bindChildren = (parentProvider) => {
+    vue.provide(key, Object.assign({
+      childInstances,
+      collect,
+      clear: clear2
+    }, parentProvider));
+  };
+  return {
+    length,
+    childProviders,
+    bindChildren
+  };
+}
 var _excluded = ["collect", "clear"];
 function asyncGeneratorStep$d(gen, resolve, reject, _next, _throw, key, arg) {
   try {
@@ -1209,6 +1307,9 @@ var props$16 = {
     type: [Number, String],
     default: 0
   },
+  animationClass: {
+    type: String
+  },
   onClick: defineListenerProp()
 };
 function asyncGeneratorStep$c(gen, resolve, reject, _next, _throw, key, arg) {
@@ -1248,10 +1349,10 @@ function __render__$1e(_ctx, _cache) {
   return vue.openBlock(), vue.createBlock(
     vue.resolveDynamicComponent(_ctx.isURL(_ctx.name) ? "img" : "i"),
     {
-      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.namespace !== _ctx.n(), _ctx.namespace], _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n("image"), _ctx.namespace + "-" + _ctx.nextName], [_ctx.shrinking, _ctx.n("--shrinking")])),
+      class: vue.normalizeClass(_ctx.classes(_ctx.n(), [_ctx.namespace !== _ctx.n(), _ctx.namespace], _ctx.namespace + "--set", [_ctx.isURL(_ctx.name), _ctx.n("image"), _ctx.namespace + "-" + _ctx.nextName], [_ctx.animateInProgress, _ctx.animationClass == null ? _ctx.n("--shrinking") : _ctx.animationClass])),
       style: vue.normalizeStyle({
         color: _ctx.color,
-        transition: "transform " + _ctx.toNumber(_ctx.transition) + "ms",
+        "transition-duration": _ctx.toNumber(_ctx.transition) + "ms",
         width: _ctx.isURL(_ctx.name) ? _ctx.toSizeUnit(_ctx.size) : null,
         height: _ctx.isURL(_ctx.name) ? _ctx.toSizeUnit(_ctx.size) : null,
         fontSize: _ctx.toSizeUnit(_ctx.size)
@@ -1269,7 +1370,7 @@ var __sfc__$1f = vue.defineComponent({
   props: props$16,
   setup(props2) {
     var nextName = vue.ref("");
-    var shrinking = vue.ref(false);
+    var animateInProgress = vue.ref(false);
     var handleNameChange = /* @__PURE__ */ function() {
       var _ref = _asyncToGenerator$c(function* (newName, oldName) {
         var {
@@ -1279,11 +1380,13 @@ var __sfc__$1f = vue.defineComponent({
           nextName.value = newName;
           return;
         }
-        shrinking.value = true;
+        animateInProgress.value = true;
         yield vue.nextTick();
         setTimeout(() => {
-          oldName != null && (nextName.value = newName);
-          shrinking.value = false;
+          if (oldName != null) {
+            nextName.value = newName;
+          }
+          animateInProgress.value = false;
         }, toNumber(transition));
       });
       return function handleNameChange2(_x, _x2) {
@@ -1297,7 +1400,7 @@ var __sfc__$1f = vue.defineComponent({
       n: n$1d,
       classes: classes$10,
       nextName,
-      shrinking,
+      animateInProgress,
       isURL,
       toNumber,
       toSizeUnit
@@ -2846,6 +2949,128 @@ function useButtonGroup() {
     bindButtonGroup: bindParent
   };
 }
+function shouldDisabled(arg) {
+  if (!arg) {
+    return false;
+  }
+  var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
+  if (arg === "desktop" && isMobile) {
+    return true;
+  }
+  if (arg === "mobile" && !isMobile) {
+    return true;
+  }
+  return false;
+}
+function getStyle(element) {
+  var style = element.getAttribute("style");
+  if (!style)
+    return {};
+  return style.split(";").filter(Boolean).reduce((style2, item) => {
+    var [key, value] = item.split(":").map((item2) => item2.trim());
+    style2[camelize(key)] = value;
+    return style2;
+  }, {});
+}
+function updateRawStyle(element) {
+  var {
+    value
+  } = element._hover;
+  var style = getStyle(element);
+  Object.keys(value).forEach((key) => {
+    var camelizedKey = camelize(key);
+    var styleValue = value[camelizedKey];
+    if (styleValue != null && style[camelizedKey]) {
+      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
+    }
+  });
+}
+function updateStyle(element, styleValue) {
+  Object.keys(styleValue).forEach((key) => {
+    var value = styleValue[key];
+    if (value != null) {
+      element.style[key] = value;
+    }
+  });
+}
+function clearStyle(element) {
+  Object.keys(element._hover.value).forEach((key) => {
+    element.style[key] = "";
+  });
+}
+function restoreStyle(element) {
+  clearStyle(element);
+  updateStyle(element, element._hover.rawStyle);
+  element._hover.rawStyle = {};
+}
+function createHover() {
+  var {
+    value
+  } = this._hover;
+  this._hover.hovering = true;
+  if (isFunction(value)) {
+    value(this._hover.hovering);
+    return;
+  }
+  updateStyle(this, value);
+}
+function removeHover() {
+  this._hover.hovering = false;
+  if (isFunction(this._hover.value)) {
+    this._hover.value(this._hover.hovering);
+    return;
+  }
+  restoreStyle(this);
+}
+function mounted(element, binding) {
+  var _element$_hover$hover, _element$_hover;
+  var {
+    arg,
+    value
+  } = binding;
+  if (shouldDisabled(arg)) {
+    return;
+  }
+  element._hover = {
+    value,
+    hovering: (_element$_hover$hover = (_element$_hover = element._hover) == null ? void 0 : _element$_hover.hovering) != null ? _element$_hover$hover : false,
+    rawStyle: {}
+  };
+  updateRawStyle(element);
+  element.addEventListener("mouseenter", createHover);
+  element.addEventListener("mouseleave", removeHover);
+}
+function unmounted(element, binding) {
+  if (shouldDisabled(binding.arg)) {
+    return;
+  }
+  restoreStyle(element);
+  element.removeEventListener("mouseenter", createHover);
+  element.removeEventListener("mouseleave", removeHover);
+}
+function beforeUpdate(element, binding) {
+  unmounted(element, binding);
+}
+function shouldUpdateStyle(element, binding) {
+  return !isFunction(binding.value) && element._hover.hovering;
+}
+function updated(element, binding) {
+  mounted(element, binding);
+  if (shouldUpdateStyle(element, binding)) {
+    updateStyle(element, binding.value);
+  }
+}
+var Hover = {
+  mounted,
+  unmounted,
+  beforeUpdate,
+  updated,
+  install(app) {
+    app.directive("hover", this);
+  }
+};
+var _HoverComponent = Hover;
+const Hover$1 = Hover;
 var {
   n: n$17,
   classes: classes$W
@@ -2854,6 +3079,7 @@ var _hoisted_1$p = ["type", "disabled"];
 function __render__$18(_ctx, _cache) {
   var _component_var_loading = vue.resolveComponent("var-loading");
   var _directive_ripple = vue.resolveDirective("ripple");
+  var _directive_hover = vue.resolveDirective("hover");
   return vue.withDirectives((vue.openBlock(), vue.createElementBlock(
     "button",
     {
@@ -2893,12 +3119,20 @@ function __render__$18(_ctx, _cache) {
       [vue.renderSlot(_ctx.$slots, "default")],
       2
       /* CLASS */
+    ), vue.createElementVNode(
+      "div",
+      {
+        class: vue.normalizeClass(_ctx.classes(_ctx.n("overlay"), [_ctx.hovering, _ctx.n("--hovering")]))
+      },
+      null,
+      2
+      /* CLASS */
     )],
     46,
     _hoisted_1$p
   )), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
-  }]]);
+  }], [_directive_hover, _ctx.handleHover, "desktop"]]);
 }
 var __sfc__$19 = vue.defineComponent({
   name: "VarButton",
@@ -2906,11 +3140,13 @@ var __sfc__$19 = vue.defineComponent({
     VarLoading: Loading
   },
   directives: {
-    Ripple: Ripple$1
+    Ripple: Ripple$1,
+    Hover: Hover$1
   },
   props: props$10,
   setup(props2) {
     var pending = vue.ref(false);
+    var hovering = vue.ref(false);
     var {
       buttonGroup: buttonGroup2
     } = useButtonGroup();
@@ -2976,11 +3212,16 @@ var __sfc__$19 = vue.defineComponent({
       }
       attemptAutoLoading(call(onTouchstart, e));
     };
+    var handleHover = (isHover) => {
+      hovering.value = isHover;
+    };
     return {
       n: n$17,
       classes: classes$W,
       pending,
       states,
+      hovering,
+      handleHover,
       handleClick,
       handleTouchstart
     };
@@ -3718,15 +3959,12 @@ var props$X = {
   onClick: defineListenerProp()
 };
 var BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY = Symbol("BREADCRUMBS_BIND_BREADCRUMB_KEY");
-var BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY = Symbol("BREADCRUMBS_COUNT_BREADCRUMB_KEY");
 function useBreadcrumbsList() {
   var {
     childProviders,
-    bindChildren
-  } = useChildren(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
-  var {
+    bindChildren,
     length
-  } = useAtChildrenCounter(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  } = useChildren$1(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
   return {
     length,
     breadcrumbList: childProviders,
@@ -3736,11 +3974,9 @@ function useBreadcrumbsList() {
 function useBreadcrumb() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  } = useParent$1(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
   if (!parentProvider || !bindParent || !index) {
     throw Error("<var-breadcrumb/> must in <var-breadcrumbs/>");
   }
@@ -13333,128 +13569,6 @@ Form.install = function(app) {
 Form.useValidation = useValidation;
 Form.useForm = useForm;
 var _FormComponent = Form;
-function shouldDisabled(arg) {
-  if (!arg) {
-    return false;
-  }
-  var isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);
-  if (arg === "desktop" && isMobile) {
-    return true;
-  }
-  if (arg === "mobile" && !isMobile) {
-    return true;
-  }
-  return false;
-}
-function getStyle(element) {
-  var style = element.getAttribute("style");
-  if (!style)
-    return {};
-  return style.split(";").filter(Boolean).reduce((style2, item) => {
-    var [key, value] = item.split(":").map((item2) => item2.trim());
-    style2[camelize(key)] = value;
-    return style2;
-  }, {});
-}
-function updateRawStyle(element) {
-  var {
-    value
-  } = element._hover;
-  var style = getStyle(element);
-  Object.keys(value).forEach((key) => {
-    var camelizedKey = camelize(key);
-    var styleValue = value[camelizedKey];
-    if (styleValue != null && style[camelizedKey]) {
-      element._hover.rawStyle[camelizedKey] = style[camelizedKey];
-    }
-  });
-}
-function updateStyle(element, styleValue) {
-  Object.keys(styleValue).forEach((key) => {
-    var value = styleValue[key];
-    if (value != null) {
-      element.style[key] = value;
-    }
-  });
-}
-function clearStyle(element) {
-  Object.keys(element._hover.value).forEach((key) => {
-    element.style[key] = "";
-  });
-}
-function restoreStyle(element) {
-  clearStyle(element);
-  updateStyle(element, element._hover.rawStyle);
-  element._hover.rawStyle = {};
-}
-function createHover() {
-  var {
-    value
-  } = this._hover;
-  this._hover.hovering = true;
-  if (isFunction(value)) {
-    value(this._hover.hovering);
-    return;
-  }
-  updateStyle(this, value);
-}
-function removeHover() {
-  this._hover.hovering = false;
-  if (isFunction(this._hover.value)) {
-    this._hover.value(this._hover.hovering);
-    return;
-  }
-  restoreStyle(this);
-}
-function mounted(element, binding) {
-  var _element$_hover$hover, _element$_hover;
-  var {
-    arg,
-    value
-  } = binding;
-  if (shouldDisabled(arg)) {
-    return;
-  }
-  element._hover = {
-    value,
-    hovering: (_element$_hover$hover = (_element$_hover = element._hover) == null ? void 0 : _element$_hover.hovering) != null ? _element$_hover$hover : false,
-    rawStyle: {}
-  };
-  updateRawStyle(element);
-  element.addEventListener("mouseenter", createHover);
-  element.addEventListener("mouseleave", removeHover);
-}
-function unmounted(element, binding) {
-  if (shouldDisabled(binding.arg)) {
-    return;
-  }
-  restoreStyle(element);
-  element.removeEventListener("mouseenter", createHover);
-  element.removeEventListener("mouseleave", removeHover);
-}
-function beforeUpdate(element, binding) {
-  unmounted(element, binding);
-}
-function shouldUpdateStyle(element, binding) {
-  return !isFunction(binding.value) && element._hover.hovering;
-}
-function updated(element, binding) {
-  mounted(element, binding);
-  if (shouldUpdateStyle(element, binding)) {
-    updateStyle(element, binding.value);
-  }
-}
-var Hover = {
-  mounted,
-  unmounted,
-  beforeUpdate,
-  updated,
-  install(app) {
-    app.directive("hover", this);
-  }
-};
-var _HoverComponent = Hover;
-const Hover$1 = Hover;
 function fitValidator(fit) {
   return ["fill", "contain", "cover", "none", "scale-down"].includes(fit);
 }
@@ -21948,15 +22062,12 @@ var props$6 = {
   onClick: defineListenerProp()
 };
 var TABS_BIND_TAB_KEY = Symbol("TABS_BIND_TAB_KEY");
-var TABS_COUNT_TAB_KEY = Symbol("TABS_COUNT_TAB_KEY");
 function useTabList() {
   var {
     childProviders,
-    bindChildren
-  } = useChildren(TABS_BIND_TAB_KEY);
-  var {
+    bindChildren,
     length
-  } = useAtChildrenCounter(TABS_COUNT_TAB_KEY);
+  } = useChildren$1(TABS_BIND_TAB_KEY);
   return {
     length,
     tabList: childProviders,
@@ -21966,11 +22077,9 @@ function useTabList() {
 function useTabs() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(TABS_BIND_TAB_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(TABS_COUNT_TAB_KEY);
+  } = useParent$1(TABS_BIND_TAB_KEY);
   if (!parentProvider || !bindParent || !index) {
     throw Error("<var-tab/> must in <var-tabs/>");
   }
@@ -22086,15 +22195,12 @@ Tab.install = function(app) {
 };
 var _TabComponent = Tab;
 var TABS_ITEMS_BIND_TAB_ITEM_KEY = Symbol("TABS_ITEMS_BIND_TAB_ITEM_KEY");
-var TABS_ITEMS_COUNT_TAB_ITEM_KEY = Symbol("TABS_ITEMS_COUNT_TAB_ITEM_KEY");
 function useTabItem() {
   var {
     bindChildren,
-    childProviders
-  } = useChildren(TABS_ITEMS_BIND_TAB_ITEM_KEY);
-  var {
+    childProviders,
     length
-  } = useAtChildrenCounter(TABS_ITEMS_COUNT_TAB_ITEM_KEY);
+  } = useChildren$1(TABS_ITEMS_BIND_TAB_ITEM_KEY);
   return {
     length,
     tabItemList: childProviders,
@@ -22104,11 +22210,9 @@ function useTabItem() {
 function useTabsItems() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(TABS_ITEMS_BIND_TAB_ITEM_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(TABS_ITEMS_COUNT_TAB_ITEM_KEY);
+  } = useParent$1(TABS_ITEMS_BIND_TAB_ITEM_KEY);
   if (!parentProvider || !bindParent || !index) {
     throw Error("<var-tab-item/> must in <var-tabs-items/>");
   }
@@ -24519,7 +24623,7 @@ const TimePickerSfc = "";
 const TooltipSfc = "";
 const uploader = "";
 const UploaderSfc = "";
-const version = "2.8.6";
+const version = "2.8.7-alpha.1678160786574";
 function install(app) {
   ActionSheet.install && app.use(ActionSheet);
   AppBar.install && app.use(AppBar);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@varlet/ui",
-  "version": "2.8.6",
+  "version": "2.8.7-alpha.1678160786574",
   "description": "A material like components library",
   "main": "lib/varlet.cjs.js",
   "module": "es/index.mjs",
@@ -46,9 +46,9 @@
     "@popperjs/core": "^2.11.6",
     "dayjs": "^1.10.4",
     "decimal.js": "^10.2.1",
-    "@varlet/icons": "2.8.6",
-    "@varlet/use": "2.8.6",
-    "@varlet/shared": "2.8.6"
+    "@varlet/icons": "2.8.7-alpha.1678160786574",
+    "@varlet/shared": "2.8.7-alpha.1678160786574",
+    "@varlet/use": "2.8.7-alpha.1678160786574"
   },
   "devDependencies": {
     "@types/jest": "^26.0.15",
@@ -63,8 +63,8 @@
     "typescript": "^4.4.4",
     "vue": "3.2.25",
     "vue-router": "4.0.12",
-    "@varlet/cli": "2.8.6",
-    "@varlet/touch-emulator": "2.8.6"
+    "@varlet/cli": "2.8.7-alpha.1678160786574",
+    "@varlet/touch-emulator": "2.8.7-alpha.1678160786574"
   },
   "browserslist": [
     "Chrome >= 54",

package/types/icon.d.ts

@@ -7,6 +7,7 @@ export interface IconProps extends BasicAttributes {
   size?: string | number
   color?: string
   namespace?: string
+  animationClass?: string
   transition?: string | number
   onClick?: ListenerProp<(event: Event) => void>
 }