@varlet/ui 2.8.6 → 2.9.0-alpha.1678371604765

package/es/breadcrumb/provide.mjs

@@ -1,13 +1,11 @@
-import { useAtParentIndex, useParent } from '../utils/components.mjs';
-import { BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY, BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY } from '../breadcrumbs/provide.mjs';
+import { useParent } from '@varlet/use';
+import { BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY } from '../breadcrumbs/provide.mjs';
 export function useBreadcrumb() {
   var {
     parentProvider,
-    bindParent
-  } = useParent(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
-  var {
+    bindParent,
     index
-  } = useAtParentIndex(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  } = useParent(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
 
   if (!parentProvider || !bindParent || !index) {
     throw Error('<var-breadcrumb/> must in <var-breadcrumbs/>');

package/es/breadcrumbs/provide.mjs

@@ -1,14 +1,11 @@
-import { useAtChildrenCounter, useChildren } from '../utils/components.mjs';
+import { useChildren } from '@varlet/use';
 export var BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY = Symbol('BREADCRUMBS_BIND_BREADCRUMB_KEY');
-export var BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY = Symbol('BREADCRUMBS_COUNT_BREADCRUMB_KEY');
 export function useBreadcrumbsList() {
   var {
     childProviders,
-    bindChildren
-  } = useChildren(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
-  var {
+    bindChildren,
     length
-  } = useAtChildrenCounter(BREADCRUMBS_COUNT_BREADCRUMB_ITEM_KEY);
+  } = useChildren(BREADCRUMBS_BIND_BREADCRUMB_ITEM_KEY);
   return {
     length,
     breadcrumbList: childProviders,

package/es/button/Button.mjs

@@ -4,6 +4,7 @@ import { computed, defineComponent, ref } from 'vue';
 import { props } from './props.mjs';
 import { call, createNamespace } from '../utils/components.mjs';
 import { useButtonGroup } from './provide.mjs';
+import Hover from '../hover/index.mjs';
 import { isArray } from '@varlet/shared';
 var {
   n,
@@ -20,6 +21,8 @@ function __render__(_ctx, _cache) {
 
   var _directive_ripple = _resolveDirective("ripple");
 
+  var _directive_hover = _resolveDirective("hover");
+
   return _withDirectives((_openBlock(), _createElementBlock("button", {
     class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n('$--box'), _ctx.n("--" + _ctx.states.size), [_ctx.block, _ctx.n('$--flex') + " " + _ctx.n('--block'), _ctx.n('$--inline-flex')], [_ctx.disabled, _ctx.n('--disabled')], [_ctx.states.text, _ctx.n("--text-" + _ctx.states.type) + " " + _ctx.n('--text'), _ctx.n("--" + _ctx.states.type) + " " + _ctx.n("$-elevation--" + _ctx.states.elevation)], [_ctx.states.text && _ctx.disabled, _ctx.n('--text-disabled')], [_ctx.round, _ctx.n('--round')], [_ctx.states.outline, _ctx.n('--outline')])),
     style: _normalizeStyle({
@@ -48,11 +51,15 @@ function __render__(_ctx, _cache) {
     class: _normalizeClass(_ctx.classes(_ctx.n('content'), [_ctx.loading || _ctx.pending, _ctx.n('--hidden')]))
   }, [_renderSlot(_ctx.$slots, "default")], 2
   /* CLASS */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.classes(_ctx.n('overlay'), [_ctx.hovering, _ctx.n('--hovering')]))
+  }, null, 2
+  /* CLASS */
   )], 46
   /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
   , _hoisted_1)), [[_directive_ripple, {
     disabled: _ctx.disabled || !_ctx.ripple
-  }]]);
+  }], [_directive_hover, _ctx.handleHover, "desktop"]]);
 }
 
 var __sfc__ = defineComponent({
@@ -61,12 +68,14 @@ var __sfc__ = defineComponent({
     VarLoading
   },
   directives: {
-    Ripple
+    Ripple,
+    Hover
   },
   props,
 
   setup(props) {
     var pending = ref(false);
+    var hovering = ref(false);
     var {
       buttonGroup
     } = useButtonGroup();
@@ -141,11 +150,17 @@ var __sfc__ = defineComponent({
       attemptAutoLoading(call(onTouchstart, e));
     };
 
+    var handleHover = isHover => {
+      hovering.value = isHover;
+    };
+
     return {
       n,
       classes,
       pending,
       states,
+      hovering,
+      handleHover,
       handleClick,
       handleTouchstart
     };

package/es/button/button.css

@@ -1 +1 @@
-:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}
+:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px; --button-mini-font-size: var(--font-size-xs); --button-small-font-size: var(--font-size-sm); --button-normal-font-size: var(--font-size-md); --button-large-font-size: var(--font-size-lg);}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap;}.var-button:active { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 5px 8px 0 var(--shadow-key-penumbra-opacity), 0 1px 14px 0 var(--shadow-key-ambient-opacity);}.var-button__content { display: flex; align-items: center; flex-wrap: wrap;}.var-button__loading[var-button-cover] { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: inherit; background-color: currentColor; opacity: 0; transition: opacity 0.15s; will-change: opacity; pointer-events: none;}.var-button--hovering { opacity: 0.15;}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--button-normal-font-size);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--button-large-font-size);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--button-small-font-size);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--button-mini-font-size);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}

package/es/button/props.mjs

@@ -2,19 +2,15 @@ function _extends() { _extends = Object.assign ? Object.assign.bind() : function
 
 import { props as loadingProps } from '../loading/props.mjs';
 import { defineListenerProp, pickProps } from '../utils/components.mjs';
-
-function typeValidator(type) {
+export function typeValidator(type) {
   return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
 }
-
-function sizeValidator(size) {
+export function sizeValidator(size) {
   return ['normal', 'mini', 'small', 'large'].includes(size);
 }
-
-function nativeTypeValidator(nativeType) {
+export function nativeTypeValidator(nativeType) {
   return ['button', 'reset', 'submit'].includes(nativeType);
 }
-
 export var props = {
   type: {
     type: String,

package/es/fab/Fab.mjs

@@ -0,0 +1,182 @@
+import { mergeProps as _mergeProps, isVNode as _isVNode, withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
+import Button from '../button/index.mjs';
+import Icon from '../icon/index.mjs';
+import { computed, defineComponent, ref, Teleport, Transition, watch } from 'vue';
+import { useClickOutside } from '@varlet/use';
+import { call, createNamespace, flatFragment, useTeleport } from '../utils/components.mjs';
+import { toSizeUnit } from '../utils/elements.mjs';
+import { toNumber } from '@varlet/shared';
+import { props } from './props.mjs';
+
+
+
+function _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !_isVNode(s);
+}
+
+var {
+  classes,
+  n
+} = createNamespace('fab');
+export default defineComponent({
+  name: 'VarFab',
+  inheritAttrs: false,
+  props,
+
+  setup(props, _ref) {
+    var {
+      slots,
+      attrs
+    } = _ref;
+    var localActive = ref(false);
+    var host = ref(null);
+    var {
+      disabled
+    } = useTeleport();
+    var isActive = computed({
+      get() {
+        return localActive.value;
+      },
+
+      set(value) {
+        localActive.value = value;
+        call(props['onUpdate:active'], value);
+      }
+
+    });
+
+    var handleClick = (e, value, childrenLength) => {
+      e.stopPropagation();
+
+      if (props.trigger !== 'click' || props.disabled) {
+        return;
+      }
+
+      if (childrenLength === 0) {
+        call(props.onClick, isActive.value, e);
+        return;
+      }
+
+      isActive.value = value;
+      call(props.onClick, isActive.value, e);
+      call(isActive.value ? props.onOpen : props.onClose);
+    };
+
+    var handleMouse = (value, childrenLength) => {
+      if (props.trigger !== 'hover' || props.disabled || childrenLength === 0) {
+        return;
+      }
+
+      isActive.value = value;
+      call(isActive.value ? props.onOpen : props.onClose);
+    };
+
+    var handleClickOutside = () => {
+      if (props.trigger !== 'click' || props.disabled) {
+        return;
+      }
+
+      if (isActive.value !== false) {
+        isActive.value = false;
+        call(props.onClose);
+      }
+    };
+
+    var renderTrigger = () => {
+      if (slots.trigger) {
+        return props.show ? slots.trigger({
+          active: isActive.value
+        }) : null;
+      }
+
+      return _withDirectives(_createVNode(Button, {
+        "var-fab-cover": true,
+        "class": n('trigger'),
+        "type": props.type,
+        "color": props.color,
+        "disabled": props.disabled,
+        "round": true
+      }, {
+        default: () => [_createVNode(Icon, {
+          "var-fab-cover": true,
+          "class": classes([isActive.value, n('trigger-active-icon'), n('trigger-inactive-icon')]),
+          "name": isActive.value ? props.activeIcon : props.inactiveIcon,
+          "size": isActive.value ? props.inactiveIconSize : props.activeIconSize,
+          "transition": 200,
+          "animationClass": n('--trigger-icon-animation')
+        }, null)]
+      }), [[_vShow, props.show]]);
+    };
+
+    var renderFab = () => {
+      var _slot;
+
+      var _slots$default;
+
+      var children = flatFragment((_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : []);
+      return _createVNode("div", _mergeProps({
+        "class": classes(n(), n("--position-" + props.position), n("--direction-" + props.direction), [props.fixed, n('--fixed'), n('--absolute')]),
+        "style": {
+          zIndex: toNumber(props.zIndex),
+          top: toSizeUnit(props.top),
+          bottom: toSizeUnit(props.bottom),
+          left: toSizeUnit(props.left),
+          right: toSizeUnit(props.right)
+        },
+        "ref": host,
+        "onClick": e => handleClick(e, !isActive.value, children.length),
+        "onMouseleave": () => handleMouse(false, children.length),
+        "onMouseenter": () => handleMouse(true, children.length)
+      }, attrs), [_createVNode(Transition, {
+        "name": n("--active-transition")
+      }, _isSlot(_slot = renderTrigger()) ? _slot : {
+        default: () => [_slot]
+      }), _createVNode(Transition, {
+        "name": n("--actions-transition-" + props.direction),
+        "onAfterEnter": props.onOpened,
+        "onAfterLeave": props.onClosed
+      }, {
+        default: () => [_withDirectives(_createVNode("div", {
+          "class": n('actions'),
+          "onClick": e => e.stopPropagation()
+        }, [children.map(child => {
+          return _createVNode("div", {
+            "class": n('action')
+          }, [child]);
+        })]), [[_vShow, props.show && isActive.value && children.length]])]
+      })]);
+    };
+
+    watch(() => props.active, value => {
+      localActive.value = value;
+    }, {
+      immediate: true
+    });
+    watch(() => props.trigger, () => {
+      isActive.value = false;
+    });
+    watch(() => props.disabled, () => {
+      isActive.value = false;
+    });
+    useClickOutside(host, 'click', handleClickOutside);
+    return () => {
+      var {
+        teleport
+      } = props;
+
+      if (teleport) {
+        var _slot2;
+
+        return _createVNode(Teleport, {
+          "to": teleport,
+          "disabled": disabled.value
+        }, _isSlot(_slot2 = renderFab()) ? _slot2 : {
+          default: () => [_slot2]
+        });
+      }
+
+      return renderFab();
+    };
+  }
+
+});

package/es/fab/fab.css

@@ -0,0 +1 @@
+:root { --fab-top: 70px; --fab-bottom: 16px; --fab-left: 16px; --fab-right: 16px; --fab-trigger-size: 56px; --fab-trigger-inactive-icon-size: 26px; --fab-trigger-active-icon-size: 22px; --fab-actions-padding: 10px 0; --fab-action-margin: 6px; --fab-transition-standard-easing: cubic-bezier(0.4, 0, 0.2, 1);}.var-fab-transition-default-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab-transition-default-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab__trigger[var-fab-cover] { width: var(--fab-trigger-size); height: var(--fab-trigger-size);}.var-fab__trigger-inactive-icon[var-fab-cover] { font-size: var(--fab-trigger-inactive-icon-size);}.var-fab__trigger-active-icon[var-fab-cover] { font-size: var(--fab-trigger-active-icon-size);}.var-fab__actions { position: absolute; display: flex; justify-content: center; align-items: center; padding: var(--fab-actions-padding);}.var-fab__action { margin: var(--fab-action-margin);}.var-fab--position-left-top { top: var(--fab-top); left: var(--fab-left);}.var-fab--position-right-top { top: var(--fab-top); right: var(--fab-right);}.var-fab--position-left-bottom { bottom: var(--fab-bottom); left: var(--fab-left);}.var-fab--position-right-bottom { bottom: var(--fab-bottom); right: var(--fab-right);}.var-fab--direction-left .var-fab__actions,.var-fab--direction-right .var-fab__actions { height: 100%; top: 0; padding: 0 var(--fab-actions-padding);}.var-fab--direction-left .var-fab__actions { flex-direction: row-reverse; right: 100%;}.var-fab--direction-right .var-fab__actions { flex-direction: row; left: 100%;}.var-fab--direction-top .var-fab__actions,.var-fab--direction-bottom .var-fab__actions { width: 100%; left: 0;}.var-fab--direction-top .var-fab__actions { flex-direction: column-reverse; bottom: 100%;}.var-fab--direction-bottom .var-fab__actions { flex-direction: column; top: 100%;}.var-fab--fixed { position: fixed;}.var-fab--absolute { position: absolute;}.var-fab--active-transition-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--active-transition-enter-from,.var-fab--active-transition-leave-to { transform: scale(0);}.var-fab--actions-transition-top-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-top-enter-from,.var-fab--actions-transition-top-leave-to { opacity: 0; transform: translateY(40px);}.var-fab--actions-transition-bottom-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-bottom-enter-from,.var-fab--actions-transition-bottom-leave-to { opacity: 0; transform: translateY(-40px);}.var-fab--actions-transition-left-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-left-enter-from,.var-fab--actions-transition-left-leave-to { opacity: 0; transform: translateX(40px);}.var-fab--actions-transition-right-enter-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-leave-active { transition: 0.3s var(--fab-transition-standard-easing) !important;}.var-fab--actions-transition-right-enter-from,.var-fab--actions-transition-right-leave-to { opacity: 0; transform: translateX(-40px);}.var-fab--trigger-icon-animation { transform: scale(0.4); opacity: 0; transition-property: transform, opacity;}

package/es/fab/index.mjs

@@ -0,0 +1,9 @@
+// Component entry, the folder where the file exists will be exposed to the user
+import Fab from './Fab.mjs';
+
+Fab.install = function (app) {
+  app.component(Fab.name, Fab);
+};
+
+export var _FabComponent = Fab;
+export default Fab;

package/es/fab/props.mjs

@@ -0,0 +1,91 @@
+import { defineListenerProp } from '../utils/components.mjs';
+import { typeValidator } from '../button/props.mjs';
+export function positionValidator(position) {
+  return ['left-top', 'right-top', 'left-bottom', 'right-bottom'].includes(position);
+}
+export function directionValidator(direction) {
+  return ['top', 'right', 'bottom', 'left'].includes(direction);
+}
+export function triggerValidator(trigger) {
+  return ['click', 'hover'].includes(trigger);
+}
+export var props = {
+  active: {
+    type: Boolean,
+    default: false
+  },
+  show: {
+    type: Boolean,
+    default: true
+  },
+  type: {
+    type: String,
+    default: 'primary',
+    validator: typeValidator
+  },
+  position: {
+    type: String,
+    default: 'right-bottom',
+    validator: positionValidator
+  },
+  direction: {
+    type: String,
+    default: 'top',
+    validator: directionValidator
+  },
+  trigger: {
+    type: String,
+    default: 'click',
+    validator: triggerValidator
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  color: {
+    type: String
+  },
+  inactiveIcon: {
+    type: String,
+    default: 'plus'
+  },
+  activeIcon: {
+    type: String,
+    default: 'window-close'
+  },
+  inactiveIconSize: {
+    type: [Number, String]
+  },
+  activeIconSize: {
+    type: [Number, String]
+  },
+  fixed: {
+    type: Boolean,
+    default: true
+  },
+  zIndex: {
+    type: [Number, String],
+    default: 90
+  },
+  top: {
+    type: [Number, String]
+  },
+  bottom: {
+    type: [Number, String]
+  },
+  left: {
+    type: [Number, String]
+  },
+  right: {
+    type: [Number, String]
+  },
+  teleport: {
+    type: String
+  },
+  onClick: defineListenerProp(),
+  onOpen: defineListenerProp(),
+  onOpened: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onClosed: defineListenerProp(),
+  'onUpdate:active': defineListenerProp()
+};

package/es/fab/style/index.mjs

@@ -0,0 +1,2 @@
+import '../../styles/common.css'
+import '../fab.css'

package/es/hover/index.mjs

@@ -55,14 +55,17 @@ function updateStyle(element, styleValue) {
 
 function clearStyle(element) {
   Object.keys(element._hover.value).forEach(key => {
-    element.style[key] = '';
+    var value = element._hover.value[key];
+
+    if (value != null) {
+      element.style[key] = '';
+    }
   });
 }
 
 function restoreStyle(element) {
   clearStyle(element);
   updateStyle(element, element._hover.rawStyle);
-  element._hover.rawStyle = {};
 }
 
 function createHover() {

package/es/icon/Icon.mjs

@@ -15,10 +15,10 @@ import { resolveDynamicComponent as _resolveDynamicComponent, normalizeClass as
 
 function __render__(_ctx, _cache) {
   return _openBlock(), _createBlock(_resolveDynamicComponent(_ctx.isURL(_ctx.name) ? 'img' : 'i'), {
-    class: _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: _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: _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)
@@ -36,7 +36,7 @@ var __sfc__ = defineComponent({
 
   setup(props) {
     var nextName = ref('');
-    var shrinking = ref(false);
+    var animateInProgress = ref(false);
 
     var handleNameChange = /*#__PURE__*/function () {
       var _ref = _asyncToGenerator(function* (newName, oldName) {
@@ -49,11 +49,14 @@ var __sfc__ = defineComponent({
           return;
         }
 
-        shrinking.value = true;
+        animateInProgress.value = true;
         yield nextTick();
         setTimeout(() => {
-          oldName != null && (nextName.value = newName);
-          shrinking.value = false;
+          if (oldName != null) {
+            nextName.value = newName;
+          }
+
+          animateInProgress.value = false;
         }, toNumber(transition));
       });
 
@@ -69,7 +72,7 @@ var __sfc__ = defineComponent({
       n,
       classes,
       nextName,
-      shrinking,
+      animateInProgress,
       isURL,
       toNumber,
       toSizeUnit