@varlet/ui 1.27.8 → 1.27.10

package/es/badge/Badge.js

@@ -66,7 +66,7 @@ export default defineComponent({
         icon
       } = props;
       var positionBasic = slots.default && n('position') + " " + n("--" + position);
-      var dotClass = dot && n('dot');
+      var dotClass = dot ? n('dot') : null;
       var positionClass = getPositionClass();
       var iconClass = icon ? n('icon') : null;
       return [n("--" + type), positionBasic, dotClass, positionClass, iconClass];

package/es/bottom-navigation-item/BottomNavigationItem.js

@@ -96,7 +96,9 @@ export default defineComponent({
     };
 
     var handleClick = () => {
-      var active = name.value || index.value;
+      var _name$value;
+
+      var active = (_name$value = name.value) != null ? _name$value : index.value;
       call(props.onClick, active);
       call(bottomNavigation.onToggle, active);
     };

package/es/card/Card.js

@@ -1,37 +1,73 @@
+function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
+
+function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
+
 import Ripple from '../ripple';
-import { defineComponent } from 'vue';
+import VarIcon from '../icon';
+import VarButton from '../button';
+import { ref, defineComponent, watch, computed, nextTick } from 'vue';
 import { props } from './props';
-import { toSizeUnit } from '../utils/elements';
-import { createNamespace } from '../utils/components';
+import { doubleRaf, toSizeUnit } from '../utils/elements';
+import { call, createNamespace } from '../utils/components';
+import { useZIndex } from '../context/zIndex';
+import { useLock } from '../context/lock';
 var {
   n,
   classes
 } = createNamespace('card');
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+var RIPPLE_DELAY = 500;
+import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, createVNode as _createVNode, withModifiers as _withModifiers, withCtx as _withCtx, resolveDirective as _resolveDirective, withDirectives as _withDirectives, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
 
 var _withScopeId = n => (_pushScopeId(""), n = n(), _popScopeId(), n);
 
 var _hoisted_1 = ["src", "alt"];
 export function render(_ctx, _cache) {
+  var _component_var_icon = _resolveComponent("var-icon");
+
+  var _component_var_button = _resolveComponent("var-button");
+
   var _directive_ripple = _resolveDirective("ripple");
 
   return _withDirectives((_openBlock(), _createElementBlock("div", {
-    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--2'])),
+    ref: "card",
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')], [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    style: _normalizeStyle({
+      zIndex: _ctx.floated ? _ctx.zIndex : undefined
+    }),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
-  }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createElementBlock("img", {
-    key: 0,
-    class: _normalizeClass(_ctx.n('image')),
+  }, [_createElementVNode("div", {
+    ref: "cardFloater",
+    class: _normalizeClass(_ctx.classes(_ctx.n('floater'))),
     style: _normalizeStyle({
-      objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height)
-    }),
-    src: _ctx.src,
-    alt: _ctx.alt
-  }, null, 14
-  /* CLASS, STYLE, PROPS */
-  , _hoisted_1)) : _createCommentVNode("v-if", true)]), _renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
+      width: _ctx.floaterWidth,
+      height: _ctx.floaterHeight,
+      top: _ctx.floaterTop,
+      left: _ctx.floaterLeft,
+      overflow: _ctx.floaterOverflow,
+      position: _ctx.floaterPosition,
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
+    })
+  }, [_renderSlot(_ctx.$slots, "image", {}, () => {
+    var _ctx$imageHeight;
+
+    return [_ctx.src ? (_openBlock(), _createElementBlock("img", {
+      key: 0,
+      class: _normalizeClass(_ctx.n('image')),
+      style: _normalizeStyle({
+        objectFit: _ctx.fit,
+        height: _ctx.toSizeUnit((_ctx$imageHeight = _ctx.imageHeight) != null ? _ctx$imageHeight : _ctx.height),
+        width: _ctx.toSizeUnit(_ctx.imageWidth)
+      }),
+      src: _ctx.src,
+      alt: _ctx.alt
+    }, null, 14
+    /* CLASS, STYLE, PROPS */
+    , _hoisted_1)) : _createCommentVNode("v-if", true)];
+  }), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('container'))
+  }, [_renderSlot(_ctx.$slots, "title", {}, () => [_ctx.title ? (_openBlock(), _createElementBlock("div", {
     key: 0,
     class: _normalizeClass(_ctx.n('title'))
   }, _toDisplayString(_ctx.title), 3
@@ -51,10 +87,60 @@ export function render(_ctx, _cache) {
     class: _normalizeClass(_ctx.n('footer'))
   }, [_renderSlot(_ctx.$slots, "extra")], 2
   /* CLASS */
+  )) : _createCommentVNode("v-if", true), _ctx.$slots.content && !_ctx.isRow ? (_openBlock(), _createElementBlock("div", {
+    key: 1,
+    class: _normalizeClass(_ctx.n('content')),
+    style: _normalizeStyle({
+      height: _ctx.contentHeight,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [_renderSlot(_ctx.$slots, "content")], 6
+  /* CLASS, STYLE */
   )) : _createCommentVNode("v-if", true)], 2
   /* CLASS */
+  ), _ctx.showFloatingButtons ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('floating-buttons'), 'var--box')),
+    style: _normalizeStyle({
+      zIndex: _ctx.zIndex,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [_renderSlot(_ctx.$slots, "close-button", {}, () => [_createVNode(_component_var_button, {
+    "var-card-cover": "",
+    round: "",
+    class: _normalizeClass(_ctx.classes(_ctx.n('close-button'), 'var-elevation--6')),
+    onClick: _withModifiers(_ctx.close, ["stop"])
+  }, {
+    default: _withCtx(() => [_createVNode(_component_var_icon, {
+      "var-card-cover": "",
+      name: "window-close",
+      class: _normalizeClass(_ctx.n('close-button-icon'))
+    }, null, 8
+    /* PROPS */
+    , ["class"])]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["class", "onClick"])])], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
+  ), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('holder')),
+    style: _normalizeStyle({
+      width: _ctx.holderWidth,
+      height: _ctx.holderHeight
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
-    disabled: !_ctx.ripple
+    disabled: !_ctx.ripple || _ctx.floater
   }]]);
 }
 export default defineComponent({
@@ -63,13 +149,136 @@ export default defineComponent({
   directives: {
     Ripple
   },
+  components: {
+    VarIcon,
+    VarButton
+  },
   props,
 
-  setup() {
+  setup(props) {
+    var card = ref(null);
+    var cardFloater = ref(null);
+    var holderWidth = ref('auto');
+    var holderHeight = ref('auto');
+    var floaterWidth = ref('100%');
+    var floaterHeight = ref('100%');
+    var floaterTop = ref('auto');
+    var floaterLeft = ref('auto');
+    var floaterPosition = ref(undefined);
+    var floaterOverflow = ref('hidden');
+    var contentHeight = ref('0px');
+    var opacity = ref('0');
+    var {
+      zIndex
+    } = useZIndex(() => props.floating, 1);
+    var isRow = computed(() => props.layout === 'row');
+    var showFloatingButtons = ref(false);
+    var floated = ref(false);
+    useLock(() => props.floating, () => isRow);
+    var dropdownFloaterTop = 'auto';
+    var dropdownFloaterLeft = 'auto';
+    var dropper = null;
+    var floater = ref(null);
+
+    var floating = /*#__PURE__*/function () {
+      var _ref = _asyncToGenerator(function* () {
+        clearTimeout(floater.value);
+        clearTimeout(dropper);
+        floater.value = null;
+        floater.value = setTimeout( /*#__PURE__*/_asyncToGenerator(function* () {
+          var {
+            width,
+            height,
+            left,
+            top
+          } = card.value.getBoundingClientRect();
+          holderWidth.value = toSizeUnit(width);
+          holderHeight.value = toSizeUnit(height);
+          floaterWidth.value = holderWidth.value;
+          floaterHeight.value = holderHeight.value;
+          floaterTop.value = toSizeUnit(top);
+          floaterLeft.value = toSizeUnit(left);
+          floaterPosition.value = 'fixed';
+          dropdownFloaterTop = floaterTop.value;
+          dropdownFloaterLeft = floaterLeft.value;
+          showFloatingButtons.value = true;
+          yield doubleRaf();
+          floaterTop.value = '0';
+          floaterLeft.value = '0';
+          floaterWidth.value = '100vw';
+          floaterHeight.value = '100vh';
+          contentHeight.value = 'auto';
+          opacity.value = '1';
+          floaterOverflow.value = 'auto';
+          floated.value = true;
+        }), props.ripple ? RIPPLE_DELAY : 0);
+      });
+
+      return function floating() {
+        return _ref.apply(this, arguments);
+      };
+    }();
+
+    var dropdown = () => {
+      clearTimeout(dropper);
+      clearTimeout(floater.value);
+      floater.value = null;
+      floaterWidth.value = holderWidth.value;
+      floaterHeight.value = holderHeight.value;
+      floaterTop.value = dropdownFloaterTop;
+      floaterLeft.value = dropdownFloaterLeft;
+      contentHeight.value = '0px';
+      opacity.value = '0';
+      showFloatingButtons.value = false;
+      dropper = setTimeout(() => {
+        holderWidth.value = 'auto';
+        holderHeight.value = 'auto';
+        floaterWidth.value = '100%';
+        floaterHeight.value = '100%';
+        floaterTop.value = 'auto';
+        floaterLeft.value = 'auto';
+        dropdownFloaterTop = 'auto';
+        dropdownFloaterLeft = 'auto';
+        floaterOverflow.value = 'hidden';
+        floaterPosition.value = undefined;
+        floated.value = false;
+      }, props.floatingDuration);
+    };
+
+    var close = () => {
+      call(props['onUpdate:floating'], false);
+    };
+
+    watch(() => props.floating, value => {
+      if (isRow.value) return;
+      nextTick(() => {
+        value ? floating() : dropdown();
+      });
+    }, {
+      immediate: true
+    });
     return {
       n,
       classes,
-      toSizeUnit
+      toSizeUnit,
+      card,
+      cardFloater,
+      holderWidth,
+      holderHeight,
+      floater,
+      floaterWidth,
+      floaterHeight,
+      floaterTop,
+      floaterLeft,
+      floaterPosition,
+      floaterOverflow,
+      contentHeight,
+      opacity,
+      zIndex,
+      isRow,
+      close,
+      showFloatingButtons,
+      floated
     };
   }
 

package/es/card/card.css

@@ -1 +1 @@
-:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-image-height: 200px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 13px; --card-subtitle-margin: 10px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-margin: 30px 0 0px 0; --card-line-height: 22px;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; padding: var(--card-padding); line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s;}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color);}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin);}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { padding: var(--card-footer-padding); margin: var(--card-footer-margin);}
+:root { --card-padding: 0 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-row-image-width: 140px; --card-image-height: 200px; --card-row-height: 140px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 15px 0 0 0; --card-title-row-margin: 12px 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 12px; --card-subtitle-margin: 10px 0 0 0; --card-subtitle-row-margin: -8px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-right: 13px; --card-footer-bottom: 9px; --card-footer-margin: 30px 0 0px 0; --card-line-height: 22px; --card-row-line-height: 1.5; --card-floating-buttons-bottom: 16px; --card-floating-buttons-right: 16px; --card-floating-buttons-color: #fff; --card-close-button-icon-size: 24px; --card-close-button-size: 56px; --card-close-button-primary-color: #212121;}.var-card { border-radius: var(--card-border-radius); overflow: hidden;}.var-card__floater { display: flex; flex-direction: column; position: static; line-height: var(--card-line-height); background: var(--card-background); transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__container { padding: var(--card-padding); flex-grow: 1; min-width: 0;}.var-card--layout-row .var-card__floater { min-height: var(--card-row-height); height: 100%; flex-direction: row; position: relative; line-height: var(--card-row-line-height);}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card--layout-row .var-card__image { width: var(--card-row-image-width); height: auto; display: block; flex-shrink: 0;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color); word-break: break-word;}.var-card--layout-row .var-card__title { max-width: 100%; overflow: hidden; margin: var(--card-title-row-margin); text-overflow: ellipsis; white-space: nowrap;}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin); word-break: break-word;}.var-card--layout-row .var-card__subtitle { margin: var(--card-subtitle-row-margin); text-overflow: ellipsis; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding); word-break: break-all;}.var-card__footer { display: flex; justify-content: flex-end; padding: var(--card-footer-padding); margin: var(--card-footer-margin);}.var-card--layout-row .var-card__footer { position: absolute; padding: 0; right: var(--card-footer-right); bottom: var(--card-footer-bottom);}.var-card__content { overflow: hidden; transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);}.var-card__floating-buttons { position: fixed; bottom: var(--card-floating-buttons-bottom); right: var(--card-floating-buttons-right); color: var(--card-floating-buttons-color);}.var-card__close-button[var-card-cover] { padding: var(--card-close-button-padding); width: var(--card-close-button-size); height: var(--card-close-button-size); background-color: var(--card-close-button-primary-color);}.var-card__close-button-icon[var-card-cover] { font-size: var(--card-close-button-icon-size);}

package/es/card/card.less

@@ -2,53 +2,98 @@
 @card-background: #fff;
 @card-border-radius: 4px;
 @card-image-width: 100%;
+@card-row-image-width: 140px;
+@card-row-height: 140px;
 @card-image-height: 200px;
 @card-title-color: #333;
 @card-title-font-size: 20px;
 @card-title-padding: 0 12px;
 @card-title-margin: 15px 0 0 0;
+@card-title-row-margin: 12px 0;
 @card-subtitle-color: rgba(0, 0, 0, 0.6);
 @card-subtitle-font-size: 14px;
-@card-subtitle-padding: 0 13px;
+@card-subtitle-padding: 0 12px;
+@card-subtitle-row-margin: -8px 0 0 0;
 @card-subtitle-margin: 10px 0 0 0;
 @card-description-color: rgba(0, 0, 0, 0.6);
 @card-description-font-size: 14px;
 @card-description-margin: 20px 0 0 0;
 @card-description-padding: 0 13px;
 @card-footer-padding: 0 12px;
+@card-footer-right: 13px;
+@card-footer-bottom: 9px;
 @card-footer-margin: 30px 0 0px 0;
 @card-line-height: 22px;
+@card-row-line-height: 1.5;
+@card-floating-buttons-bottom: 16px;
+@card-floating-buttons-right: 16px;
+@card-floating-buttons-color: #fff;
+@card-close-button-icon-size: 24px;
+@card-close-button-size: 56px;
+@card-close-button-primary-color: #212121;
 
 :root {
   --card-padding: @card-padding;
   --card-background: @card-background;
   --card-border-radius: @card-border-radius;
   --card-image-width: @card-image-width;
+  --card-row-image-width: @card-row-image-width;
   --card-image-height: @card-image-height;
+  --card-row-height: @card-row-height;
   --card-title-color: @card-title-color;
   --card-title-font-size: @card-title-font-size;
   --card-title-padding: @card-title-padding;
   --card-title-margin: @card-title-margin;
+  --card-title-row-margin: @card-title-row-margin;
   --card-subtitle-color: @card-subtitle-color;
   --card-subtitle-font-size: @card-subtitle-font-size;
   --card-subtitle-padding: @card-subtitle-padding;
   --card-subtitle-margin: @card-subtitle-margin;
+  --card-subtitle-row-margin: @card-subtitle-row-margin;
   --card-description-color: @card-description-color;
   --card-description-font-size: @card-description-font-size;
   --card-description-margin: @card-description-margin;
   --card-description-padding: @card-description-padding;
   --card-footer-padding: @card-footer-padding;
+  --card-footer-right: @card-footer-right;
+  --card-footer-bottom: @card-footer-bottom;
   --card-footer-margin: @card-footer-margin;
   --card-line-height: @card-line-height;
+  --card-row-line-height: @card-row-line-height;
+  --card-floating-buttons-bottom: @card-floating-buttons-bottom;
+  --card-floating-buttons-right: @card-floating-buttons-right;
+  --card-floating-buttons-color: @card-floating-buttons-color;
+  --card-close-button-icon-size: @card-close-button-icon-size;
+  --card-close-button-size: @card-close-button-size;
+  --card-close-button-primary-color: @card-close-button-primary-color;
 }
 
 .var-card {
   border-radius: var(--card-border-radius);
   overflow: hidden;
-  padding: var(--card-padding);
-  line-height: var(--card-line-height);
-  background: var(--card-background);
-  transition: background-color 0.25s;
+
+  &__floater {
+    display: flex;
+    flex-direction: column;
+    position: static;
+    line-height: var(--card-line-height);
+    background: var(--card-background);
+    transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
+  }
+
+  &__container {
+    padding: var(--card-padding);
+    flex-grow: 1;
+    min-width: 0;
+  }
+
+  &--layout-row &__floater {
+    min-height: var(--card-row-height);
+    height: 100%;
+    flex-direction: row;
+    position: relative;
+    line-height: var(--card-row-line-height);
+  }
 
   &__image {
     width: var(--card-image-width);
@@ -56,11 +101,27 @@
     display: block;
   }
 
+  &--layout-row &__image {
+    width: var(--card-row-image-width);
+    height: auto;
+    display: block;
+    flex-shrink: 0;
+  }
+
   &__title {
     font-size: var(--card-title-font-size);
     padding: var(--card-title-padding);
     margin: var(--card-title-margin);
     color: var(--card-title-color);
+    word-break: break-word;
+  }
+
+  &--layout-row &__title {
+    max-width: 100%;
+    overflow: hidden;
+    margin: var(--card-title-row-margin);
+    text-overflow: ellipsis;
+    white-space: nowrap;
   }
 
   &__subtitle {
@@ -68,6 +129,16 @@
     color: var(--card-subtitle-color);
     padding: var(--card-subtitle-padding);
     margin: var(--card-subtitle-margin);
+    word-break: break-word;
+  }
+
+  &--layout-row &__subtitle {
+    margin: var(--card-subtitle-row-margin);
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    overflow: hidden;
   }
 
   &__description {
@@ -79,7 +150,39 @@
   }
 
   &__footer {
+    display: flex;
+    justify-content: flex-end;
     padding: var(--card-footer-padding);
     margin: var(--card-footer-margin);
   }
+
+  &--layout-row &__footer {
+    position: absolute;
+    padding: 0;
+    right: var(--card-footer-right);
+    bottom: var(--card-footer-bottom);
+  }
+
+  &__content {
+    overflow: hidden;
+    transition-timing-function: cubic-bezier(0.45, 0.19, 0.06, 0.89);
+  }
+
+  &__floating-buttons {
+    position: fixed;
+    bottom: var(--card-floating-buttons-bottom);
+    right: var(--card-floating-buttons-right);
+    color: var(--card-floating-buttons-color);
+  }
+
+  &__close-button[var-card-cover] {
+    padding: var(--card-close-button-padding);
+    width: var(--card-close-button-size);
+    height: var(--card-close-button-size);
+    background-color: var(--card-close-button-primary-color);
+  }
+
+  &__close-button-icon[var-card-cover] {
+    font-size: var(--card-close-button-icon-size);
+  }
 }

package/es/card/props.js

@@ -11,9 +11,34 @@ export var props = {
     validator: fitValidator,
     default: 'cover'
   },
+
+  /**
+   * @deprecated use imageHeight instead
+   */
   height: {
     type: [String, Number]
   },
+  imageHeight: {
+    type: [String, Number]
+  },
+  imageWidth: {
+    type: [String, Number]
+  },
+  layout: {
+    type: String,
+    default: 'column'
+  },
+  floating: {
+    type: Boolean,
+    default: false
+  },
+  'onUpdate:floating': {
+    type: Function
+  },
+  floatingDuration: {
+    type: Number,
+    default: 250
+  },
   alt: {
     type: String
   },

package/es/index-bar/IndexBar.js

@@ -4,7 +4,7 @@ function _asyncToGenerator(fn) { return function () { var self = this, args = ar
 
 import { computed, defineComponent, ref, watch, onMounted, onBeforeUnmount } from 'vue';
 import { easeInOutCubic, isPlainObject, toNumber } from '../utils/shared';
-import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo } from '../utils/elements';
+import { doubleRaf, getParentScroller, getScrollLeft, getScrollTop, nextTickFrame, requestAnimationFrame, scrollTo as varScrollTo, toPxNum } from '../utils/elements';
 import { useIndexAnchors } from './provide';
 import { props } from './props';
 import { createNamespace, call } from '../utils/components';
@@ -34,7 +34,7 @@ export function render(_ctx, _cache) {
       style: _normalizeStyle({
         color: _ctx.active === anchorName && _ctx.highlightColor ? _ctx.highlightColor : ''
       }),
-      onClick: $event => _ctx.anchorClick(anchorName)
+      onClick: $event => _ctx.anchorClick(anchorName, true)
     }, _toDisplayString(anchorName), 15
     /* TEXT, CLASS, STYLE, PROPS */
     , _hoisted_1);
@@ -64,7 +64,7 @@ export default defineComponent({
     var active = ref();
     var sticky = computed(() => props.sticky);
     var cssMode = computed(() => props.cssMode);
-    var stickyOffsetTop = computed(() => props.stickyOffsetTop);
+    var stickyOffsetTop = computed(() => toPxNum(props.stickyOffsetTop));
     var zIndex = computed(() => props.zIndex);
     var indexBarProvider = {
       active,
@@ -140,7 +140,7 @@ export default defineComponent({
 
 
     var scrollTo = index => {
-      requestAnimationFrame(() => anchorClick(index, true));
+      requestAnimationFrame(() => anchorClick(index));
     };
 
     watch(() => length.value, /*#__PURE__*/_asyncToGenerator(function* () {

package/es/index-bar/props.js

@@ -4,7 +4,7 @@ export var props = {
     default: true
   },
   stickyOffsetTop: {
-    type: Number,
+    type: [String, Number],
     default: 0
   },
   cssMode: {

package/es/loading/Loading.js

@@ -1,7 +1,7 @@
 import { computed, defineComponent } from 'vue';
 import { props } from './props';
-import { toNumber } from '../utils/shared';
 import { createNamespace, call } from '../utils/components';
+import { multiplySizeUnit } from '../utils/elements';
 var {
   n,
   classes
@@ -42,10 +42,10 @@ export function render(_ctx, _cache) {
     key: 0,
     class: _normalizeClass(_ctx.n('circle'))
   }, [_createElementVNode("span", {
-    class: _normalizeClass(_ctx.n('circle-block')),
+    class: _normalizeClass(_ctx.classes(_ctx.n('circle-block'), _ctx.n("circle-block--" + _ctx.size))),
     style: _normalizeStyle({
-      width: _ctx.getRadius * 2 + 'px',
-      height: _ctx.getRadius * 2 + 'px',
+      width: _ctx.multiplySizeUnit(_ctx.radius, 2),
+      height: _ctx.multiplySizeUnit(_ctx.radius, 2),
       color: _ctx.color
     })
   }, _hoisted_2, 6
@@ -108,15 +108,6 @@ export default defineComponent({
       rect: 8,
       disappear: 3
     };
-    var sizeDict = {
-      mini: 9,
-      small: 12,
-      normal: 15,
-      large: 18
-    };
-    var getRadius = computed(() => {
-      return props.radius ? toNumber(props.radius) : sizeDict[props.size];
-    });
     var isShow = computed(() => {
       if (!call(slots.default)) return true;
       return props.loading;
@@ -124,8 +115,8 @@ export default defineComponent({
     return {
       n,
       classes,
+      multiplySizeUnit,
       loadingTypeDict,
-      getRadius,
       isShow
     };
   }

package/es/loading/loading.css

@@ -1 +1 @@
-:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}
+:root { --loading-opacity: 0.38; --loading-desc-margin: 8px 0 0;}.var-loading { position: relative;}.var-loading__content { position: relative; transition: opacity 0.3s; opacity: 1;}.var-loading__content--active { opacity: var(--loading-opacity);}.var-loading__content-mask { position: absolute; left: 0; right: 0; top: 0; bottom: 0;}.var-loading__body { display: flex; justify-content: center; align-items: center; height: 100%; flex-direction: column;}.var-loading__inside { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 1;}.var-loading__description { color: currentColor; margin: var(--loading-desc-margin);}.var-loading__description--large { font-size: 16px;}.var-loading__description--normal { font-size: 14px;}.var-loading__description--small { font-size: 12px;}.var-loading__description--mini { font-size: 10px;}.var-loading__circle { display: flex;}.var-loading__circle-block { display: inline-block; animation: circle 1.8s linear infinite;}.var-loading__circle-block--large { width: 36px; height: 36px;}.var-loading__circle-block--normal { width: 30px; height: 30px;}.var-loading__circle-block--small { width: 24px; height: 24px;}.var-loading__circle-block--mini { width: 18px; height: 18px;}.var-loading__circle-block svg { display: block; width: 100%; height: 100%;}.var-loading__circle-block svg circle { animation: circular 1.5s ease-in-out infinite; stroke: currentColor; stroke-width: 3; stroke-linecap: round;}@keyframes circle { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}@keyframes circular { 0% { stroke-dasharray: 1, 200; stroke-dashoffset: 0; } 50% { stroke-dasharray: 90, 150; stroke-dashoffset: -40; } 100% { stroke-dasharray: 90, 150; stroke-dashoffset: -120; }}.var-loading__wave { display: flex; align-items: center; justify-content: center;}.var-loading__wave--large { width: 64px; height: 18px;}.var-loading__wave--normal { width: 50px; height: 16px;}.var-loading__wave--small { width: 36px; height: 14px;}.var-loading__wave--mini { width: 22px; height: 12px;}.var-loading__wave-item { height: 100%; display: inline-block; animation: 1.2s ease-in-out infinite wave;}.var-loading__wave-item:nth-child(1) { animation-delay: -1.2s; margin-left: 0;}.var-loading__wave-item:nth-child(2) { animation-delay: -1.1s;}.var-loading__wave-item:nth-child(3) { animation-delay: -1s;}.var-loading__wave-item:nth-child(4) { animation-delay: -0.9s;}.var-loading__wave-item:nth-child(5) { animation-delay: -0.8s;}.var-loading__wave-item--large { width: 5px; margin-left: 5px;}.var-loading__wave-item--normal { width: 4px; margin-left: 4px;}.var-loading__wave-item--small { width: 3px; margin-left: 3px;}.var-loading__wave-item--mini { width: 2px; margin-left: 2px;}@keyframes wave { 0%, 40%, 100% { transform: scaleY(0.4); } 20% { transform: scaleY(1); }}.var-loading__cube { display: flex; align-items: center;}.var-loading__cube--large { width: 64px; height: 18px;}.var-loading__cube--normal { width: 50px; height: 16px;}.var-loading__cube--small { width: 36px; height: 14px;}.var-loading__cube--mini { width: 22px; height: 12px;}.var-loading__cube-item { display: inline-block; transform-origin: right bottom; animation: 1.5s ease infinite cube;}.var-loading__cube-item:nth-child(1) { animation-delay: 0.2s; margin-left: 0;}.var-loading__cube-item:nth-child(2) { animation-delay: 0.4s;}.var-loading__cube-item:nth-child(3) { animation-delay: 0.6s;}.var-loading__cube-item:nth-child(4) { animation-delay: 0.8s;}.var-loading__cube-item--large { height: 10px; width: 10px; margin-left: 5px;}.var-loading__cube-item--normal { height: 8px; width: 8px; margin-left: 4px;}.var-loading__cube-item--small { height: 6px; width: 6px; margin-left: 3px;}.var-loading__cube-item--mini { height: 4px; width: 4px; margin-left: 2px;}@keyframes cube { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: rotate(90deg) scale(0.3); }}.var-loading__rect { display: flex; flex-wrap: nowrap; justify-content: center; align-items: center;}.var-loading__rect--large { width: 64px; height: 18px;}.var-loading__rect--normal { width: 50px; height: 16px;}.var-loading__rect--small { width: 36px; height: 14px;}.var-loading__rect--mini { width: 22px; height: 12px;}.var-loading__rect-item { animation: 2s ease-in-out infinite rect;}.var-loading__rect-item:nth-child(1) { animation-delay: 1.75s;}.var-loading__rect-item:nth-child(2) { animation-delay: 1.5s;}.var-loading__rect-item:nth-child(3) { animation-delay: 1.25s;}.var-loading__rect-item:nth-child(4) { animation-delay: 1s;}.var-loading__rect-item:nth-child(5) { animation-delay: 0.75s;}.var-loading__rect-item:nth-child(6) { animation-delay: 0.5s;}.var-loading__rect-item:nth-child(7) { animation-delay: 0.25s;}.var-loading__rect-item:nth-child(8) { animation-delay: 0s;}.var-loading__rect-item--large { height: 100%; width: 8px;}.var-loading__rect-item--normal { height: 90%; width: 6.4px;}.var-loading__rect-item--small { height: 80%; width: 4.8px;}.var-loading__rect-item--mini { height: 70%; width: 3.2px;}@keyframes rect { 0% { opacity: 0.3; } 25% { opacity: 1; } 50% { opacity: 0.3; } 65% { opacity: 1; } 100% { opacity: 0.3; }}.var-loading__disappear { display: flex; justify-content: space-around; align-items: center; flex-flow: nowrap;}.var-loading__disappear--large { width: 64px; height: 18px;}.var-loading__disappear--normal { width: 50px; height: 16px;}.var-loading__disappear--small { width: 36px; height: 14px;}.var-loading__disappear--mini { width: 22px; height: 12px;}.var-loading__disappear-item { border-radius: 50%; animation: 0.5s ease-in-out infinite alternate disappear;}.var-loading__disappear-item:nth-child(1) { animation-delay: -0.4s;}.var-loading__disappear-item:nth-child(2) { animation-delay: -0.2s;}.var-loading__disappear-item:nth-child(3) { animation-delay: 0s;}.var-loading__disappear-item--large { height: 15px; width: 15px;}.var-loading__disappear-item--normal { height: 12px; width: 12px;}.var-loading__disappear-item--small { height: 9px; width: 9px;}.var-loading__disappear-item--mini { height: 6px; width: 6px;}@keyframes disappear { 0% { opacity: 1; } 100% { opacity: 0; }}