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

package/lib/snackbar/style/index.js

@@ -0,0 +1,8 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../../loading/loading.css')
+require('../../button/button.css')
+require('../../icon/icon.css')
+require('../snackbar.css')
+require('../coreSfc.css')
+require('../SnackbarSfc.css')

package/lib/snackbar/style/less.js

@@ -0,0 +1,8 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../../loading/loading.less')
+require('../../button/button.less')
+require('../../icon/icon.less')
+require('../snackbar.less')
+require('../coreSfc.less')
+require('../SnackbarSfc.less')

package/lib/space/Space.js

@@ -0,0 +1,99 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+
+
+
+
+var internalSizes = {
+  mini: [4, 4],
+  small: [6, 6],
+  normal: [8, 12],
+  large: [12, 20]
+};
+
+var _default = (0, _vue.defineComponent)({
+  name: 'VarSpace',
+  props: _props.props,
+
+  setup(props, {
+    slots
+  }) {
+    var getSize = (size, isInternalSize) => {
+      return isInternalSize ? internalSizes[size] : (0, _shared.isArray)(size) ? size.map(_elements.toPxNum) : [(0, _elements.toPxNum)(size), (0, _elements.toPxNum)(size)];
+    };
+
+    return () => {
+      var _slots$default;
+
+      var {
+        inline,
+        justify,
+        align,
+        wrap,
+        direction,
+        size
+      } = props;
+      var children = (_slots$default = slots.default == null ? void 0 : slots.default()) != null ? _slots$default : [];
+      var lastIndex = children.length - 1;
+      var isInternalSize = (0, _props.internalSizeValidator)(size);
+      var [y, x] = getSize(size, isInternalSize);
+      var spacers = children.map((child, index) => {
+        var margin = '0';
+
+        if (direction === 'row') {
+          if (justify === 'start' || justify === 'center' || justify === 'end') {
+            if (index !== lastIndex) {
+              margin = y / 2 + "px " + x + "px " + y / 2 + "px 0";
+            } else {
+              margin = y / 2 + "px 0";
+            }
+          } else if (justify === 'space-around') {
+            margin = y / 2 + "px " + x / 2 + "px";
+          } else if (justify === 'space-between') {
+            if (index === 0) {
+              margin = y / 2 + "px " + x / 2 + "px " + y / 2 + "px 0";
+            } else if (index === lastIndex) {
+              margin = y / 2 + "px 0 " + y / 2 + "px " + x / 2 + "px";
+            } else {
+              margin = y / 2 + "px " + x / 2 + "px";
+            }
+          }
+        }
+
+        if (direction === 'column' && index !== lastIndex) {
+          margin = "0 0 " + y + "px 0";
+        }
+
+        return (0, _vue.createVNode)("div", {
+          "style": {
+            margin
+          }
+        }, [child]);
+      });
+      return (0, _vue.createVNode)("div", {
+        "class": ['var-space', 'var--box', inline ? 'var-space--inline' : null],
+        "style": {
+          flexDirection: direction,
+          justifyContent: justify,
+          alignItems: align,
+          flexWrap: wrap ? 'wrap' : 'nowrap',
+          margin: direction === 'row' ? "-" + y / 2 + "px 0" : undefined
+        }
+      }, [spacers]);
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/space/index.js

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

package/lib/space/props.js

@@ -0,0 +1,49 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = exports.sizeValidator = exports.internalSizeValidator = void 0;
+
+var _shared = require("../utils/shared");
+
+var internalSizeValidator = size => ['mini', 'small', 'normal', 'large'].includes(size);
+
+exports.internalSizeValidator = internalSizeValidator;
+
+var sizeValidator = size => {
+  return internalSizeValidator(size) || (0, _shared.isArray)(size) || (0, _shared.isNumber)(size) || (0, _shared.isString)(size);
+};
+
+exports.sizeValidator = sizeValidator;
+
+var justifyValidator = justify => {
+  return ['start', 'end', 'center', 'space-around', 'space-between'].includes(justify);
+};
+
+var props = {
+  align: {
+    type: String
+  },
+  size: {
+    type: [String, Number, Array],
+    default: 'normal',
+    validator: sizeValidator
+  },
+  wrap: {
+    type: Boolean,
+    default: true
+  },
+  direction: {
+    type: String,
+    default: 'row'
+  },
+  justify: {
+    type: String,
+    default: 'start',
+    validator: justifyValidator
+  },
+  inline: {
+    type: Boolean,
+    default: false
+  }
+};
+exports.props = props;

package/lib/space/space.css

@@ -0,0 +1 @@
+.var-space { display: flex;}.var-space--line { display: inline-flex;}

package/lib/space/space.less

@@ -0,0 +1,6 @@
+.var-space {
+  display: flex;
+  &--line {
+    display: inline-flex;
+  }
+}

package/lib/space/style/index.js

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

package/lib/space/style/less.js

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

package/lib/step/Step.js

@@ -0,0 +1,156 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _provide = require("./provide");
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-step"
+};
+var _hoisted_2 = {
+  key: 3
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)("var-step-" + _ctx.direction)
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)("var-step-" + _ctx.direction + "__main"),
+    ref: _ctx.getRef
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)({
+      ["var-step-" + _ctx.direction + "__tag"]: true,
+      ["var-step-" + _ctx.direction + "__tag--active"]: _ctx.isActive || _ctx.isCurrent
+    }),
+    style: (0, _vue.normalizeStyle)({
+      backgroundColor: _ctx.isActive || _ctx.isCurrent ? _ctx.activeColor : _ctx.inactiveColor
+    }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.click && _ctx.click(...args))
+  }, [_ctx.isActive ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 0,
+    class: "var-step__icon",
+    "var-step-cover": "",
+    name: _ctx.activeIcon
+  }, null, 8
+  /* PROPS */
+  , ["name"])) : _ctx.isCurrent && _ctx.currentIcon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 1,
+    class: "var-step__icon",
+    "var-step-cover": "",
+    name: _ctx.currentIcon
+  }, null, 8
+  /* PROPS */
+  , ["name"])) : _ctx.inactiveIcon ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 2,
+    class: "var-step__icon",
+    "var-step-cover": "",
+    name: _ctx.inactiveIcon
+  }, null, 8
+  /* PROPS */
+  , ["name"])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.index + 1), 1
+  /* TEXT */
+  ))], 6
+  /* CLASS, STYLE */
+  ), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)({
+      ["var-step-" + _ctx.direction + "__content"]: true,
+      ["var-step-" + _ctx.direction + "__content--active"]: _ctx.isActive || _ctx.isCurrent
+    }),
+    onClick: _cache[1] || (_cache[1] = (...args) => _ctx.click && _ctx.click(...args))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  )], 2
+  /* CLASS */
+  ), !_ctx.isLastChild ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)("var-step-" + _ctx.direction + "__line"),
+    style: (0, _vue.normalizeStyle)({
+      margin: _ctx.lineMargin
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
+  /* CLASS */
+  )]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarStep',
+  components: {
+    VarIcon: _icon.default
+  },
+  props: _props.props,
+
+  setup() {
+    var main = (0, _vue.ref)(null);
+    var lineMargin = (0, _vue.ref)('');
+    var isLastChild = (0, _vue.ref)(false);
+    var {
+      index,
+      steps,
+      bindSteps
+    } = (0, _provide.useSteps)();
+    var {
+      active,
+      length,
+      activeColor,
+      inactiveColor,
+      direction,
+      clickStep
+    } = steps;
+    var isCurrent = (0, _vue.computed)(() => active.value === index.value);
+    var isActive = (0, _vue.computed)(() => index.value !== -1 && active.value > index.value);
+    var stepProvider = {
+      index
+    };
+
+    var click = () => clickStep(index.value);
+
+    var getRef = el => {
+      if (direction.value === 'horizontal') {
+        main.value = el;
+      }
+    };
+
+    bindSteps(stepProvider);
+    (0, _vue.watch)(length, newLength => {
+      isLastChild.value = newLength - 1 === index.value;
+
+      if (main.value) {
+        var margin = main.value.offsetWidth / 2 - 14;
+        lineMargin.value = "0 -" + margin + "px";
+      }
+    });
+    return {
+      main,
+      index,
+      isActive,
+      isCurrent,
+      direction,
+      lineMargin,
+      activeColor,
+      inactiveColor,
+      isLastChild,
+      click,
+      getRef
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/step/index.js

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

package/lib/step/props.js

@@ -0,0 +1,17 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  activeIcon: {
+    type: String,
+    default: 'check'
+  },
+  currentIcon: {
+    type: String
+  },
+  inactiveIcon: {
+    type: String
+  }
+};
+exports.props = props;

package/lib/step/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useSteps = useSteps;
+
+var _components = require("../utils/components");
+
+var _provide = require("../steps/provide");
+
+function useSteps() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.STEPS_BIND_STEP_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.STEPS_COUNT_STEP_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    throw Error('[Varlet] Steps: <step/> must in <steps>');
+  }
+
+  return {
+    index,
+    steps: parentProvider,
+    bindSteps: bindParent
+  };
+}

package/lib/step/step.css

@@ -0,0 +1 @@
+:root { --step-tag-size: 20px; --step-tag-background: #9e9e9e; --step-tag-font-size: var(--font-size-md); --step-tag-color: #fff; --step-tag-active-color: var(--color-primary); --step-tag-margin: 4px 0; --step-tag-icon-size: var(--font-size-lg); --step-content-font-size: var(--font-size-md); --step-content-color: rgba(0, 0, 0, 0.38); --step-content-active-color: #000; --step-line-background: #000; --step-vertical-min-height: 30px; --step-vertical-tag-margin: 0 4px; --step-vertical-line-height: calc(100% - 30px); --step-vertical-line-min-height: 20px;}.tag { width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step { display: flex; position: relative; flex: 1; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-step-horizontal { display: flex; width: 100%;}.var-step-horizontal__main { display: flex; flex-direction: column; align-items: center; flex-basis: 100%;}.var-step-horizontal__tag { margin: var(--step-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-horizontal__tag--active { background: var(--step-tag-active-color);}.var-step-horizontal__content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-horizontal__content--active { color: var(--step-content-active-color);}.var-step-horizontal__line { position: relative; top: 14px; flex: 1; height: 1px; transform: scaleY(0.5); background: var(--step-line-background);}.var-step-vertical { width: 100%;}.var-step-vertical__main { display: flex; align-items: flex-start; min-height: var(--step-vertical-min-height);}.var-step-vertical__tag { margin: var(--step-vertical-tag-margin); width: var(--step-tag-size); height: var(--step-tag-size); background: var(--step-tag-background); display: flex; font-size: var(--step-tag-font-size); align-items: center; justify-content: center; border-radius: 50%; color: var(--step-tag-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-vertical__tag--active { background: var(--step-tag-active-color);}.var-step-vertical__content { font-size: var(--step-content-font-size); color: var(--step-content-color); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); transition: 0.3s var(--cubic-bezier);}.var-step-vertical__content--active { color: var(--step-content-active-color);}.var-step-vertical__line { position: relative; height: var(--step-vertical-line-height); left: 14px; top: calc(-100% + 45px); min-height: var(--step-vertical-line-min-height); width: 1px; transform: scaleX(0.5); background: var(--step-line-background);}.var-step__icon[var-step-cover] { font-size: var(--step-tag-icon-size);}

package/lib/step/step.less

@@ -0,0 +1,145 @@
+@step-tag-size: 20px;
+@step-tag-background: #9e9e9e;
+@step-tag-font-size: var(--font-size-md);
+@step-tag-color: #fff;
+@step-tag-active-color: var(--color-primary);
+@step-tag-margin: 4px 0;
+@step-tag-icon-size: var(--font-size-lg);
+@step-content-font-size: var(--font-size-md);
+@step-content-color: rgba(0, 0, 0, 0.38);
+@step-content-active-color: #000;
+@step-line-background: #000;
+@step-vertical-min-height: 30px;
+@step-vertical-tag-margin: 0 4px;
+@step-vertical-line-height: calc(100% - 30px);
+@step-vertical-line-min-height: 20px;
+
+:root {
+  --step-tag-size: @step-tag-size;
+  --step-tag-background: @step-tag-background;
+  --step-tag-font-size: @step-tag-font-size;
+  --step-tag-color: @step-tag-color;
+  --step-tag-active-color: @step-tag-active-color;
+  --step-tag-margin: @step-tag-margin;
+  --step-tag-icon-size: @step-tag-icon-size;
+  --step-content-font-size: @step-content-font-size;
+  --step-content-color: @step-content-color;
+  --step-content-active-color: @step-content-active-color;
+  --step-line-background: @step-line-background;
+  --step-vertical-min-height: @step-vertical-min-height;
+  --step-vertical-tag-margin: @step-vertical-tag-margin;
+  --step-vertical-line-height: @step-vertical-line-height;
+  --step-vertical-line-min-height: @step-vertical-line-min-height;
+}
+
+// Mixins
+.tag {
+  width: var(--step-tag-size);
+  height: var(--step-tag-size);
+  background: var(--step-tag-background);
+  display: flex;
+  font-size: var(--step-tag-font-size);
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  color: var(--step-tag-color);
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: 0.3s var(--cubic-bezier);
+}
+
+// Mixins
+.content {
+  font-size: var(--step-content-font-size);
+  color: var(--step-content-color);
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  transition: 0.3s var(--cubic-bezier);
+}
+
+.var-step {
+  display: flex;
+  position: relative;
+  flex: 1;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &-horizontal {
+    display: flex;
+    width: 100%;
+
+    &__main {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      flex-basis: 100%;
+    }
+
+    &__tag {
+      margin: var(--step-tag-margin);
+      .tag();
+
+      &--active {
+        background: var(--step-tag-active-color);
+      }
+    }
+
+    &__content {
+      .content();
+
+      &--active {
+        color: var(--step-content-active-color);
+      }
+    }
+
+    &__line {
+      position: relative;
+      top: 14px;
+      flex: 1;
+      height: 1px;
+      transform: scaleY(0.5);
+      background: var(--step-line-background);
+    }
+  }
+
+  &-vertical {
+    width: 100%;
+
+    &__main {
+      display: flex;
+      align-items: flex-start;
+      min-height: var(--step-vertical-min-height);
+    }
+
+    &__tag {
+      margin: var(--step-vertical-tag-margin);
+      .tag();
+
+      &--active {
+        background: var(--step-tag-active-color);
+      }
+    }
+
+    &__content {
+      .content();
+
+      &--active {
+        color: var(--step-content-active-color);
+      }
+    }
+
+    &__line {
+      position: relative;
+      height: var(--step-vertical-line-height);
+      left: 14px;
+      top: calc(-100% + 45px);
+      min-height: var(--step-vertical-line-min-height);
+      width: 1px;
+      transform: scaleX(0.5);
+      background: var(--step-line-background);
+    }
+  }
+
+  &__icon[var-step-cover] {
+    font-size: var(--step-tag-icon-size);
+  }
+}

package/lib/step/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../icon/icon.css')
+require('../step.css')
+require('../StepSfc.css')

package/lib/step/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../icon/icon.less')
+require('../step.less')
+require('../StepSfc.less')

package/lib/steps/Steps.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: "var-steps",
+    style: (0, _vue.normalizeStyle)({
+      flexDirection: _ctx.direction === 'horizontal' ? 'row' : 'column'
+    })
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 4
+  /* STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSteps',
+  props: _props.props,
+
+  setup(props) {
+    var active = (0, _vue.computed)(() => props.active);
+    var activeColor = (0, _vue.computed)(() => props.activeColor);
+    var inactiveColor = (0, _vue.computed)(() => props.inactiveColor);
+    var direction = (0, _vue.computed)(() => props.direction);
+    var {
+      length,
+      bindStep
+    } = (0, _provide.useStep)();
+
+    var clickStep = index => {
+      props.onClickStep == null ? void 0 : props.onClickStep(index);
+    };
+
+    var stepsProvider = {
+      active,
+      length,
+      direction,
+      activeColor,
+      inactiveColor,
+      clickStep
+    };
+    bindStep(stepsProvider);
+  }
+
+});
+
+exports.default = _default;

package/lib/steps/StepsSfc.css

@@ -0,0 +1 @@
+.var-steps { display: flex; justify-content: space-between; overflow: hidden;}

package/lib/steps/StepsSfc.less

@@ -0,0 +1 @@
+.var-steps { display: flex; justify-content: space-between; overflow: hidden;}

package/lib/steps/index.js

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