@varlet/ui 1.23.3-alpha.1 → 1.23.4-alpha.2

package/lib/steps/props.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function directionValidator(direction) {
+  return ['horizontal', 'vertical'].includes(direction);
+}
+
+var props = {
+  active: {
+    type: [String, Number],
+    default: 0
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: directionValidator
+  },
+  activeColor: {
+    type: String
+  },
+  inactiveColor: {
+    type: String
+  },
+  onClickStep: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/steps/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useStep = useStep;
+exports.STEPS_COUNT_STEP_KEY = exports.STEPS_BIND_STEP_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var STEPS_BIND_STEP_KEY = Symbol('STEPS_BIND_STEP_KEY');
+exports.STEPS_BIND_STEP_KEY = STEPS_BIND_STEP_KEY;
+var STEPS_COUNT_STEP_KEY = Symbol('STEPS_COUNT_STEP_KEY');
+exports.STEPS_COUNT_STEP_KEY = STEPS_COUNT_STEP_KEY;
+
+function useStep() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(STEPS_BIND_STEP_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(STEPS_COUNT_STEP_KEY);
+  return {
+    length,
+    step: childProviders,
+    bindStep: bindChildren
+  };
+}

package/lib/steps/style/index.js

@@ -0,0 +1,2 @@
+require('../../styles/common.css')
+require('../StepsSfc.css')

package/lib/steps/style/less.js

@@ -0,0 +1,2 @@
+require('../../styles/common.less')
+require('../StepsSfc.less')

package/lib/sticky/Sticky.js

@@ -0,0 +1,145 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-sticky", [_ctx.enableCSSMode ? 'var-sticky--css-mode' : null]]),
+    ref: "stickyEl",
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.toNumber(_ctx.zIndex),
+      top: _ctx.enableCSSMode ? _ctx.offsetTop + "px" : undefined,
+      width: _ctx.enableFixedMode ? _ctx.fixedWidth : undefined,
+      height: _ctx.enableFixedMode ? _ctx.fixedHeight : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: "var-sticky__wrapper",
+    ref: "wrapperEl",
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.toNumber(_ctx.zIndex),
+      position: _ctx.enableFixedMode ? 'fixed' : undefined,
+      width: _ctx.enableFixedMode ? _ctx.fixedWrapperWidth : undefined,
+      height: _ctx.enableFixedMode ? _ctx.fixedWrapperHeight : undefined,
+      left: _ctx.enableFixedMode ? _ctx.fixedLeft : undefined,
+      top: _ctx.enableFixedMode ? _ctx.fixedTop : undefined
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
+  /* STYLE */
+  )], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSticky',
+  props: _props.props,
+
+  setup(props) {
+    var stickyEl = (0, _vue.ref)(null);
+    var wrapperEl = (0, _vue.ref)(null);
+    var isFixed = (0, _vue.ref)(false);
+    var fixedTop = (0, _vue.ref)('0px');
+    var fixedLeft = (0, _vue.ref)('0px');
+    var fixedWidth = (0, _vue.ref)('auto');
+    var fixedHeight = (0, _vue.ref)('auto');
+    var fixedWrapperWidth = (0, _vue.ref)('auto');
+    var fixedWrapperHeight = (0, _vue.ref)('auto');
+    var enableCSSMode = (0, _vue.computed)(() => !props.disabled && props.cssMode);
+    var enableFixedMode = (0, _vue.computed)(() => !props.disabled && isFixed.value);
+    var offsetTop = (0, _vue.computed)(() => (0, _elements.toPxNum)(props.offsetTop));
+    var scroller = window;
+
+    var handleScroll = () => {
+      var {
+        onScroll,
+        cssMode,
+        disabled
+      } = props;
+
+      if (disabled) {
+        return;
+      }
+
+      var scrollerTop = 0;
+
+      if (scroller !== window) {
+        var {
+          top
+        } = scroller.getBoundingClientRect();
+        scrollerTop = top;
+      }
+
+      var wrapper = wrapperEl.value;
+      var sticky = stickyEl.value;
+      var {
+        top: stickyTop,
+        left: stickyLeft
+      } = sticky.getBoundingClientRect();
+      var currentOffsetTop = stickyTop - scrollerTop;
+
+      if (currentOffsetTop <= offsetTop.value) {
+        if (!cssMode) {
+          fixedWidth.value = sticky.offsetWidth + "px";
+          fixedHeight.value = sticky.offsetHeight + "px";
+          fixedTop.value = scrollerTop + offsetTop.value + "px";
+          fixedLeft.value = stickyLeft + "px";
+          fixedWrapperWidth.value = wrapper.offsetWidth + "px";
+          fixedWrapperHeight.value = wrapper.offsetHeight + "px";
+          isFixed.value = true;
+        }
+
+        onScroll == null ? void 0 : onScroll(offsetTop.value, true);
+      } else {
+        isFixed.value = false;
+        onScroll == null ? void 0 : onScroll(currentOffsetTop, false);
+      }
+    };
+
+    var addScrollListener = () => {
+      scroller = (0, _elements.getParentScroller)(stickyEl.value);
+      scroller !== window && scroller.addEventListener('scroll', handleScroll);
+      window.addEventListener('scroll', handleScroll);
+      handleScroll();
+    };
+
+    var removeScrollListener = () => {
+      scroller !== window && scroller.removeEventListener('scroll', handleScroll);
+      window.removeEventListener('scroll', handleScroll);
+    };
+
+    (0, _vue.watch)(() => props.disabled, handleScroll);
+    (0, _vue.onActivated)(addScrollListener);
+    (0, _vue.onDeactivated)(removeScrollListener);
+    (0, _vue.onMounted)(addScrollListener);
+    (0, _vue.onUnmounted)(removeScrollListener);
+    return {
+      stickyEl,
+      wrapperEl,
+      isFixed,
+      offsetTop,
+      fixedTop,
+      fixedLeft,
+      fixedWidth,
+      fixedHeight,
+      fixedWrapperWidth,
+      fixedWrapperHeight,
+      enableCSSMode,
+      enableFixedMode,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/sticky/index.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._StickyComponent = void 0;
+
+var _Sticky = _interopRequireDefault(require("./Sticky.vue"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_Sticky.default.install = function (app) {
+  app.component(_Sticky.default.name, _Sticky.default);
+};
+
+var _StickyComponent = _Sticky.default;
+exports._StickyComponent = _StickyComponent;
+var _default = _Sticky.default;
+exports.default = _default;

package/lib/sticky/props.js

@@ -0,0 +1,26 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  offsetTop: {
+    type: [String, Number],
+    default: 0
+  },
+  zIndex: {
+    type: [String, Number],
+    default: 10
+  },
+  cssMode: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  onScroll: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/sticky/sticky.css

@@ -0,0 +1 @@
+.var-sticky { position: relative;}.var-sticky--css-mode { position: sticky; position: -webkit-sticky;}

package/lib/sticky/sticky.less

@@ -0,0 +1,8 @@
+.var-sticky {
+  position: relative;
+
+  &--css-mode {
+    position: sticky;
+    position: -webkit-sticky;
+  }
+}

package/lib/sticky/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../sticky.css')
+require('../StickySfc.css')

package/lib/sticky/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../sticky.less')
+require('../StickySfc.less')

package/lib/style-provider/StyleProvider.js

@@ -0,0 +1,30 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _elements = require("../utils/elements");
+
+var _default = (0, _vue.defineComponent)({
+  name: 'VarStyleProvider',
+  props: {
+    styleVars: {
+      type: Object,
+      default: () => ({})
+    }
+  },
+
+  setup(props, {
+    slots
+  }) {
+    return () => (0, _vue.h)('div', {
+      class: 'var-style-provider',
+      style: (0, _elements.formatStyleVars)(props.styleVars)
+    }, slots.default == null ? void 0 : slots.default());
+  }
+
+});
+
+exports.default = _default;

package/lib/style-provider/index.js

@@ -0,0 +1,37 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._StyleProviderComponent = void 0;
+
+var _StyleProvider = _interopRequireDefault(require("./StyleProvider.vue"));
+
+var _elements = require("../utils/elements");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var mountedVarKeys = [];
+
+function StyleProvider(styleVars = {}) {
+  mountedVarKeys.forEach(key => document.documentElement.style.removeProperty(key));
+  mountedVarKeys.length = 0;
+  var styles = (0, _elements.formatStyleVars)(styleVars);
+  Object.entries(styles).forEach(([key, value]) => {
+    document.documentElement.style.setProperty(key, value);
+    mountedVarKeys.push(key);
+  });
+}
+
+StyleProvider.Component = _StyleProvider.default;
+
+_StyleProvider.default.install = function (app) {
+  app.component(_StyleProvider.default.name, _StyleProvider.default);
+};
+
+StyleProvider.install = function (app) {
+  app.component(_StyleProvider.default.name, _StyleProvider.default);
+};
+
+var _StyleProviderComponent = _StyleProvider.default;
+exports._StyleProviderComponent = _StyleProviderComponent;
+var _default = StyleProvider;
+exports.default = _default;

package/lib/style-provider/style/index.js

@@ -0,0 +1,2 @@
+require('../../styles/common.css')
+require('../StyleProviderSfc.css')

package/lib/style-provider/style/less.js

@@ -0,0 +1,2 @@
+require('../../styles/common.less')
+require('../StyleProviderSfc.less')

package/lib/style.js

@@ -0,0 +1,62 @@
+require('./action-sheet/style')
+require('./app-bar/style')
+require('./back-top/style')
+require('./badge/style')
+require('./button/style')
+require('./card/style')
+require('./cell/style')
+require('./checkbox/style')
+require('./checkbox-group/style')
+require('./chip/style')
+require('./col/style')
+require('./collapse/style')
+require('./collapse-item/style')
+require('./context/style')
+require('./countdown/style')
+require('./counter/style')
+require('./date-picker/style')
+require('./dialog/style')
+require('./divider/style')
+require('./form/style')
+require('./form-details/style')
+require('./icon/style')
+require('./image/style')
+require('./image-preview/style')
+require('./index-anchor/style')
+require('./index-bar/style')
+require('./input/style')
+require('./lazy/style')
+require('./list/style')
+require('./loading/style')
+require('./locale/style')
+require('./menu/style')
+require('./option/style')
+require('./pagination/style')
+require('./picker/style')
+require('./popup/style')
+require('./progress/style')
+require('./pull-refresh/style')
+require('./radio/style')
+require('./radio-group/style')
+require('./rate/style')
+require('./ripple/style')
+require('./row/style')
+require('./select/style')
+require('./skeleton/style')
+require('./slider/style')
+require('./snackbar/style')
+require('./space/style')
+require('./step/style')
+require('./steps/style')
+require('./sticky/style')
+require('./style-provider/style')
+require('./swipe/style')
+require('./swipe-item/style')
+require('./switch/style')
+require('./tab/style')
+require('./tab-item/style')
+require('./table/style')
+require('./tabs/style')
+require('./tabs-items/style')
+require('./time-picker/style')
+require('./uploader/style')

package/lib/styles/common.css

@@ -0,0 +1 @@
+.var--box { box-sizing: border-box;}.var--box * { box-sizing: border-box;}.var--relative { position: relative;}.var--absolute { position: absolute;}.var--hidden { overflow: hidden;}.var--lock { overflow: hidden;}.var--block { display: block;}.var--inline-block { display: inline-block;}.var--flex { display: flex;}.var--inline-flex { display: inline-flex;}:root { --font-size-xs: 10px; --font-size-sm: 12px; --font-size-md: 14px; --font-size-lg: 16px; --icon-size-xs: 16px; --icon-size-sm: 18px; --icon-size-md: 20px; --icon-size-lg: 22px; --color-body: #fff; --color-text: #333; --color-primary: #3a7afe; --color-info: #00afef; --color-success: #00c48f; --color-warning: #ff9f00; --color-danger: #f44336; --color-disabled: #e0e0e0; --color-text-disabled: #aaa; --cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1); --shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2); --shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14); --shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);}

package/lib/styles/common.less

@@ -0,0 +1,67 @@
+@import './var';
+
+.var {
+  &--box {
+    box-sizing: border-box;
+
+    * {
+      box-sizing: border-box;
+    }
+  }
+
+  &--relative {
+    position: relative;
+  }
+
+  &--absolute {
+    position: absolute;
+  }
+
+  &--hidden {
+    overflow: hidden;
+  }
+
+  &--lock {
+    overflow: hidden;
+  }
+
+  &--block {
+    display: block;
+  }
+
+  &--inline-block {
+    display: inline-block;
+  }
+
+  &--flex {
+    display: flex;
+  }
+
+  &--inline-flex {
+    display: inline-flex;
+  }
+}
+
+:root {
+  --font-size-xs: @font-size-xs;
+  --font-size-sm: @font-size-sm;
+  --font-size-md: @font-size-md;
+  --font-size-lg: @font-size-lg;
+  --icon-size-xs: @icon-size-xs;
+  --icon-size-sm: @icon-size-sm;
+  --icon-size-md: @icon-size-md;
+  --icon-size-lg: @icon-size-lg;
+  --color-body: @color-body;
+  --color-text: @color-text;
+  --color-primary: @color-primary;
+  --color-info: @color-info;
+  --color-success: @color-success;
+  --color-warning: @color-warning;
+  --color-danger: @color-danger;
+  --color-disabled: @color-disabled;
+  --color-text-disabled: @color-text-disabled;
+  --cubic-bezier: @cubic-bezier;
+  --shadow-key-umbra-opacity: @shadow-key-umbra-opacity;
+  --shadow-key-penumbra-opacity: @shadow-key-penumbra-opacity;
+  --shadow-key-ambient-opacity: @shadow-key-ambient-opacity;
+}

package/lib/styles/elevation.css

@@ -0,0 +1 @@
+.var-elevation--0 { box-shadow: 0 0 0 0 var(--shadow-key-umbra-opacity), 0 0 0 0 var(--shadow-key-penumbra-opacity), 0 0 0 0 var(--shadow-key-ambient-opacity);}.var-elevation--1 { box-shadow: 0 2px 1px -1px var(--shadow-key-umbra-opacity), 0 1px 1px 0 var(--shadow-key-penumbra-opacity), 0 1px 3px 0 var(--shadow-key-ambient-opacity);}.var-elevation--2 { box-shadow: 0 3px 1px -2px var(--shadow-key-umbra-opacity), 0 2px 2px 0 var(--shadow-key-penumbra-opacity), 0 1px 5px 0 var(--shadow-key-ambient-opacity);}.var-elevation--3 { box-shadow: 0 3px 3px -2px var(--shadow-key-umbra-opacity), 0 3px 4px 0 var(--shadow-key-penumbra-opacity), 0 1px 8px 0 var(--shadow-key-ambient-opacity);}.var-elevation--4 { box-shadow: 0 2px 4px -1px var(--shadow-key-umbra-opacity), 0 4px 5px 0 var(--shadow-key-penumbra-opacity), 0 1px 10px 0 var(--shadow-key-ambient-opacity);}.var-elevation--5 { 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-elevation--6 { box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 6px 10px 0 var(--shadow-key-penumbra-opacity), 0 1px 18px 0 var(--shadow-key-ambient-opacity);}.var-elevation--7 { box-shadow: 0 4px 5px -2px var(--shadow-key-umbra-opacity), 0 7px 10px 1px var(--shadow-key-penumbra-opacity), 0 2px 16px 1px var(--shadow-key-ambient-opacity);}.var-elevation--8 { box-shadow: 0 5px 5px -3px var(--shadow-key-umbra-opacity), 0 8px 10px 1px var(--shadow-key-penumbra-opacity), 0 3px 14px 2px var(--shadow-key-ambient-opacity);}.var-elevation--9 { box-shadow: 0 5px 6px -3px var(--shadow-key-umbra-opacity), 0 9px 12px 1px var(--shadow-key-penumbra-opacity), 0 3px 16px 2px var(--shadow-key-ambient-opacity);}.var-elevation--10 { box-shadow: 0 6px 6px -3px var(--shadow-key-umbra-opacity), 0 10px 14px 1px var(--shadow-key-penumbra-opacity), 0 4px 18px 3px var(--shadow-key-ambient-opacity);}.var-elevation--11 { box-shadow: 0 6px 7px -4px var(--shadow-key-umbra-opacity), 0 11px 15px 1px var(--shadow-key-penumbra-opacity), 0 4px 20px 3px var(--shadow-key-ambient-opacity);}.var-elevation--12 { box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 12px 17px 2px var(--shadow-key-penumbra-opacity), 0 5px 22px 4px var(--shadow-key-ambient-opacity);}.var-elevation--13 { box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 13px 19px 2px var(--shadow-key-penumbra-opacity), 0 5px 24px 4px var(--shadow-key-ambient-opacity);}.var-elevation--14 { box-shadow: 0 7px 9px -4px var(--shadow-key-umbra-opacity), 0 14px 21px 2px var(--shadow-key-penumbra-opacity), 0 5px 26px 4px var(--shadow-key-ambient-opacity);}.var-elevation--15 { box-shadow: 0 8px 9px -5px var(--shadow-key-umbra-opacity), 0 15px 22px 2px var(--shadow-key-penumbra-opacity), 0 6px 28px 5px var(--shadow-key-ambient-opacity);}.var-elevation--16 { box-shadow: 0 8px 10px -5px var(--shadow-key-umbra-opacity), 0 16px 24px 2px var(--shadow-key-penumbra-opacity), 0 6px 30px 5px var(--shadow-key-ambient-opacity);}.var-elevation--17 { box-shadow: 0 8px 11px -5px var(--shadow-key-umbra-opacity), 0 17px 26px 2px var(--shadow-key-penumbra-opacity), 0 6px 32px 5px var(--shadow-key-ambient-opacity);}.var-elevation--18 { box-shadow: 0 9px 11px -5px var(--shadow-key-umbra-opacity), 0 18px 28px 2px var(--shadow-key-penumbra-opacity), 0 7px 34px 6px var(--shadow-key-ambient-opacity);}.var-elevation--19 { box-shadow: 0 9px 12px -6px var(--shadow-key-umbra-opacity), 0 19px 29px 2px var(--shadow-key-penumbra-opacity), 0 7px 36px 6px var(--shadow-key-ambient-opacity);}.var-elevation--20 { box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 20px 31px 3px var(--shadow-key-penumbra-opacity), 0 8px 38px 7px var(--shadow-key-ambient-opacity);}.var-elevation--21 { box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 21px 33px 3px var(--shadow-key-penumbra-opacity), 0 8px 40px 7px var(--shadow-key-ambient-opacity);}.var-elevation--22 { box-shadow: 0 10px 14px -6px var(--shadow-key-umbra-opacity), 0 22px 35px 3px var(--shadow-key-penumbra-opacity), 0 8px 42px 7px var(--shadow-key-ambient-opacity);}.var-elevation--23 { box-shadow: 0 11px 14px -7px var(--shadow-key-umbra-opacity), 0 23px 36px 3px var(--shadow-key-penumbra-opacity), 0 9px 44px 8px var(--shadow-key-ambient-opacity);}.var-elevation--24 { box-shadow: 0 11px 15px -7px var(--shadow-key-umbra-opacity), 0 24px 38px 3px var(--shadow-key-penumbra-opacity), 0 9px 46px 8px var(--shadow-key-ambient-opacity);}

package/lib/styles/elevation.less

@@ -0,0 +1,126 @@
+.var-elevation {
+  &--0 {
+    box-shadow: 0 0 0 0 var(--shadow-key-umbra-opacity), 0 0 0 0 var(--shadow-key-penumbra-opacity),
+      0 0 0 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--1 {
+    box-shadow: 0 2px 1px -1px var(--shadow-key-umbra-opacity), 0 1px 1px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 3px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--2 {
+    box-shadow: 0 3px 1px -2px var(--shadow-key-umbra-opacity), 0 2px 2px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 5px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--3 {
+    box-shadow: 0 3px 3px -2px var(--shadow-key-umbra-opacity), 0 3px 4px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 8px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--4 {
+    box-shadow: 0 2px 4px -1px var(--shadow-key-umbra-opacity), 0 4px 5px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 10px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--5 {
+    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);
+  }
+
+  &--6 {
+    box-shadow: 0 3px 5px -1px var(--shadow-key-umbra-opacity), 0 6px 10px 0 var(--shadow-key-penumbra-opacity),
+      0 1px 18px 0 var(--shadow-key-ambient-opacity);
+  }
+
+  &--7 {
+    box-shadow: 0 4px 5px -2px var(--shadow-key-umbra-opacity), 0 7px 10px 1px var(--shadow-key-penumbra-opacity),
+      0 2px 16px 1px var(--shadow-key-ambient-opacity);
+  }
+
+  &--8 {
+    box-shadow: 0 5px 5px -3px var(--shadow-key-umbra-opacity), 0 8px 10px 1px var(--shadow-key-penumbra-opacity),
+      0 3px 14px 2px var(--shadow-key-ambient-opacity);
+  }
+
+  &--9 {
+    box-shadow: 0 5px 6px -3px var(--shadow-key-umbra-opacity), 0 9px 12px 1px var(--shadow-key-penumbra-opacity),
+      0 3px 16px 2px var(--shadow-key-ambient-opacity);
+  }
+
+  &--10 {
+    box-shadow: 0 6px 6px -3px var(--shadow-key-umbra-opacity), 0 10px 14px 1px var(--shadow-key-penumbra-opacity),
+      0 4px 18px 3px var(--shadow-key-ambient-opacity);
+  }
+
+  &--11 {
+    box-shadow: 0 6px 7px -4px var(--shadow-key-umbra-opacity), 0 11px 15px 1px var(--shadow-key-penumbra-opacity),
+      0 4px 20px 3px var(--shadow-key-ambient-opacity);
+  }
+
+  &--12 {
+    box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 12px 17px 2px var(--shadow-key-penumbra-opacity),
+      0 5px 22px 4px var(--shadow-key-ambient-opacity);
+  }
+
+  &--13 {
+    box-shadow: 0 7px 8px -4px var(--shadow-key-umbra-opacity), 0 13px 19px 2px var(--shadow-key-penumbra-opacity),
+      0 5px 24px 4px var(--shadow-key-ambient-opacity);
+  }
+
+  &--14 {
+    box-shadow: 0 7px 9px -4px var(--shadow-key-umbra-opacity), 0 14px 21px 2px var(--shadow-key-penumbra-opacity),
+      0 5px 26px 4px var(--shadow-key-ambient-opacity);
+  }
+
+  &--15 {
+    box-shadow: 0 8px 9px -5px var(--shadow-key-umbra-opacity), 0 15px 22px 2px var(--shadow-key-penumbra-opacity),
+      0 6px 28px 5px var(--shadow-key-ambient-opacity);
+  }
+
+  &--16 {
+    box-shadow: 0 8px 10px -5px var(--shadow-key-umbra-opacity), 0 16px 24px 2px var(--shadow-key-penumbra-opacity),
+      0 6px 30px 5px var(--shadow-key-ambient-opacity);
+  }
+
+  &--17 {
+    box-shadow: 0 8px 11px -5px var(--shadow-key-umbra-opacity), 0 17px 26px 2px var(--shadow-key-penumbra-opacity),
+      0 6px 32px 5px var(--shadow-key-ambient-opacity);
+  }
+
+  &--18 {
+    box-shadow: 0 9px 11px -5px var(--shadow-key-umbra-opacity), 0 18px 28px 2px var(--shadow-key-penumbra-opacity),
+      0 7px 34px 6px var(--shadow-key-ambient-opacity);
+  }
+
+  &--19 {
+    box-shadow: 0 9px 12px -6px var(--shadow-key-umbra-opacity), 0 19px 29px 2px var(--shadow-key-penumbra-opacity),
+      0 7px 36px 6px var(--shadow-key-ambient-opacity);
+  }
+
+  &--20 {
+    box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 20px 31px 3px var(--shadow-key-penumbra-opacity),
+      0 8px 38px 7px var(--shadow-key-ambient-opacity);
+  }
+
+  &--21 {
+    box-shadow: 0 10px 13px -6px var(--shadow-key-umbra-opacity), 0 21px 33px 3px var(--shadow-key-penumbra-opacity),
+      0 8px 40px 7px var(--shadow-key-ambient-opacity);
+  }
+
+  &--22 {
+    box-shadow: 0 10px 14px -6px var(--shadow-key-umbra-opacity), 0 22px 35px 3px var(--shadow-key-penumbra-opacity),
+      0 8px 42px 7px var(--shadow-key-ambient-opacity);
+  }
+
+  &--23 {
+    box-shadow: 0 11px 14px -7px var(--shadow-key-umbra-opacity), 0 23px 36px 3px var(--shadow-key-penumbra-opacity),
+      0 9px 44px 8px var(--shadow-key-ambient-opacity);
+  }
+
+  &--24 {
+    box-shadow: 0 11px 15px -7px var(--shadow-key-umbra-opacity), 0 24px 38px 3px var(--shadow-key-penumbra-opacity),
+      0 9px 46px 8px var(--shadow-key-ambient-opacity);
+  }
+}

package/lib/styles/var.less

@@ -0,0 +1,30 @@
+// 文字
+@font-size-xs: 10px;
+@font-size-sm: 12px;
+@font-size-md: 14px;
+@font-size-lg: 16px;
+
+// 图标
+@icon-size-xs: 16px;
+@icon-size-sm: 18px;
+@icon-size-md: 20px;
+@icon-size-lg: 22px;
+
+//颜色
+@color-body: #fff;
+@color-text: #333;
+@color-primary: #3a7afe;
+@color-info: #00afef;
+@color-success: #00c48f;
+@color-warning: #ff9f00;
+@color-danger: #f44336;
+@color-disabled: #e0e0e0;
+@color-text-disabled: #aaa;
+
+// 动画函数
+@cubic-bezier: cubic-bezier(0.25, 0.8, 0.5, 1);
+
+// 阴影
+@shadow-key-umbra-opacity: rgba(0, 0, 0, 0.2);
+@shadow-key-penumbra-opacity: rgba(0, 0, 0, 0.14);
+@shadow-key-ambient-opacity: rgba(0, 0, 0, 0.12);