@varlet/ui 1.27.8 → 1.27.9-alpha.1653036733481

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/card/Card.js

@@ -1,37 +1,68 @@
+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'])),
+  return _openBlock(), _createElementBlock("div", {
+    ref: "card",
+    class: _normalizeClass(_ctx.classes(_ctx.n(), [_ctx.isRow, _ctx.n('--layout-row')])),
     onClick: _cache[0] || (_cache[0] = function () {
       return _ctx.onClick && _ctx.onClick(...arguments);
     })
+  }, [_withDirectives((_openBlock(), _createElementBlock("div", {
+    ref: "cardFloater",
+    class: _normalizeClass(_ctx.classes(_ctx.n('floater'), [_ctx.elevation, "var-elevation--" + _ctx.elevation, 'var-elevation--1'])),
+    style: _normalizeStyle({
+      width: _ctx.floaterWidth,
+      height: _ctx.floaterHeight,
+      top: _ctx.floaterTop,
+      left: _ctx.floaterLeft,
+      overflow: _ctx.floaterOverflow,
+      position: _ctx.floaterPosition,
+      borderRadius: _ctx.floating ? '0px' : undefined,
+      zIndex: _ctx.floated ? _ctx.zIndex : undefined,
+      transition: _ctx.floated ? "background-color " + _ctx.floatingDuration + "ms, border-radius " + _ctx.floatingDuration + "ms, width " + _ctx.floatingDuration + "ms, height " + _ctx.floatingDuration + "ms, top " + _ctx.floatingDuration + "ms, left " + _ctx.floatingDuration + "ms" : undefined
+    })
   }, [_renderSlot(_ctx.$slots, "image", {}, () => [_ctx.src ? (_openBlock(), _createElementBlock("img", {
     key: 0,
     class: _normalizeClass(_ctx.n('image')),
     style: _normalizeStyle({
       objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height)
+      height: _ctx.toSizeUnit(_ctx.height),
+      width: _ctx.toSizeUnit(_ctx.width)
     }),
     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", {
+  , _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,11 +82,58 @@ 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.showToolBar ? (_openBlock(), _createElementBlock("div", {
+    key: 0,
+    class: _normalizeClass(_ctx.classes(_ctx.n('toolbar'), 'var--box')),
+    style: _normalizeStyle({
+      zIndex: _ctx.zIndex,
+      opacity: _ctx.opacity,
+      transition: "opacity " + _ctx.floatingDuration * 2 + "ms"
+    })
+  }, [_renderSlot(_ctx.$slots, "toolbar-close", {}, () => [_createVNode(_component_var_button, {
+    size: "large",
+    round: "",
+    class: _normalizeClass(_ctx.classes(_ctx.n('toolbar-close'), 'var-elevation--6')),
+    onClick: _withModifiers(_ctx.close, ["stop"])
+  }, {
+    default: _withCtx(() => [_createVNode(_component_var_icon, {
+      name: "window-close",
+      size: "24px"
+    })]),
+    _: 1
+    /* STABLE */
+
+  }, 8
+  /* PROPS */
+  , ["class", "onClick"])]), _renderSlot(_ctx.$slots, "toolbar-extra")], 6
+  /* CLASS, STYLE */
+  )) : _createCommentVNode("v-if", true)], 6
+  /* CLASS, STYLE */
   )), [[_directive_ripple, {
-    disabled: !_ctx.ripple
-  }]]);
+    disabled: !_ctx.ripple || _ctx.floater
+  }]]), _createElementVNode("div", {
+    class: _normalizeClass(_ctx.n('holder')),
+    style: _normalizeStyle({
+      width: _ctx.holderWidth,
+      height: _ctx.holderHeight
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 2
+  /* CLASS */
+  );
 }
 export default defineComponent({
   render,
@@ -63,13 +141,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('static');
+    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 showToolBar = 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;
+          showToolBar.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';
+      showToolBar.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 = 'static';
+        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,
+      showToolBar,
+      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: 150px; --card-image-height: 200px; --card-row-height: 150px; --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-floater-toolbar-bottom: 16px; --card-floater-toolbar-right: 16px; --card-floater-toolbar-color: #fff; --card-floater-toolbar-close-size: 24px; --card-floater-toolbar-close-padding: 16px; --card-floater-toolbar-close-primary-color: #212121;}.var-card--layout-row { height: var(--card-row-height); position: relative;}.var-card__floater { border-radius: var(--card-border-radius); display: flex; flex-direction: column; 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 { flex-direction: row; 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: 100%; 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__toolbar { position: fixed; bottom: var(--card-floater-toolbar-bottom); right: var(--card-floater-toolbar-right);}.var-card__toolbar-close { padding: var(--card-floater-toolbar-close-padding); background-color: var(--card-floater-toolbar-close-primary-color); color: var(--card-floater-toolbar-color);}.var-card__toolbar-close .var-icon { width: var(--card-floater-toolbar-close-size); height: var(--card-floater-toolbar-close-size); font-size: var(--card-floater-toolbar-close-size);}

package/es/card/card.less

@@ -2,53 +2,97 @@
 @card-background: #fff;
 @card-border-radius: 4px;
 @card-image-width: 100%;
+@card-row-image-width: 150px;
+@card-row-height: 150px;
 @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-floater-toolbar-bottom: 16px;
+@card-floater-toolbar-right: 16px;
+@card-floater-toolbar-color: #fff;
+@card-floater-toolbar-close-size: 24px;
+@card-floater-toolbar-close-padding: 16px;
+@card-floater-toolbar-close-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-floater-toolbar-bottom: @card-floater-toolbar-bottom;
+  --card-floater-toolbar-right: @card-floater-toolbar-right;
+  --card-floater-toolbar-color: @card-floater-toolbar-color;
+  --card-floater-toolbar-close-size: @card-floater-toolbar-close-size;
+  --card-floater-toolbar-close-padding: @card-floater-toolbar-close-padding;
+  --card-floater-toolbar-close-primary-color: @card-floater-toolbar-close-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;
+  &--layout-row {
+    height: var(--card-row-height);
+    position: relative;
+  }
+
+  &__floater {
+    border-radius: var(--card-border-radius);
+    display: flex;
+    flex-direction: column;
+    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 {
+    flex-direction: row;
+    line-height: var(--card-row-line-height);
+  }
 
   &__image {
     width: var(--card-image-width);
@@ -56,11 +100,27 @@
     display: block;
   }
 
+  &--layout-row &__image {
+    width: var(--card-row-image-width);
+    height: 100%;
+    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 +128,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 +149,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);
+  }
+
+  &__toolbar {
+    position: fixed;
+    bottom: var(--card-floater-toolbar-bottom);
+    right: var(--card-floater-toolbar-right);
+  }
+
+  &__toolbar-close {
+    padding: var(--card-floater-toolbar-close-padding);
+    background-color: var(--card-floater-toolbar-close-primary-color);
+    color: var(--card-floater-toolbar-color);
+
+    .var-icon {
+      width: var(--card-floater-toolbar-close-size);
+      height: var(--card-floater-toolbar-close-size);
+      font-size: var(--card-floater-toolbar-close-size);
+    }
+  }
 }

package/es/card/props.js

@@ -14,6 +14,24 @@ export var props = {
   height: {
     type: [String, Number]
   },
+  width: {
+    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; }}

package/es/loading/loading.less

@@ -84,6 +84,26 @@
       display: inline-block;
       animation: circle 1.8s linear infinite;
 
+      &--large {
+        width: 36px;
+        height: 36px;
+      }
+
+      &--normal {
+        width: 30px;
+        height: 30px;
+      }
+
+      &--small {
+        width: 24px;
+        height: 24px;
+      }
+
+      &--mini {
+        width: 18px;
+        height: 18px;
+      }
+
       svg {
         display: block;
         width: 100%;

package/es/picker/Picker.js

@@ -420,7 +420,8 @@ export default defineComponent({
       } = getPicked();
       prevIndexes = [...indexes];
     }, {
-      immediate: true
+      immediate: true,
+      deep: true
     });
     return {
       n,