@varlet/ui 1.23.4-alpha.0 → 1.23.4-alpha.4

package/lib/picker/props.js

@@ -0,0 +1,68 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+var _components = require("../utils/components");
+
+var _props = require("../popup/props");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+var props = _extends({
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  title: {
+    type: String
+  },
+  textKey: {
+    type: String,
+    default: 'text'
+  },
+  toolbar: {
+    type: Boolean,
+    default: true
+  },
+  cascade: {
+    type: Boolean,
+    default: false
+  },
+  optionHeight: {
+    type: [Number, String],
+    default: 44
+  },
+  optionCount: {
+    type: [Number, String],
+    default: 6
+  },
+  confirmButtonText: {
+    type: String
+  },
+  cancelButtonText: {
+    type: String
+  },
+  confirmButtonTextColor: {
+    type: String
+  },
+  cancelButtonTextColor: {
+    type: String
+  },
+  // dynamic internal
+  dynamic: {
+    type: Boolean,
+    default: false
+  },
+  onChange: {
+    type: Function
+  },
+  onConfirm: {
+    type: Function
+  },
+  onCancel: {
+    type: Function
+  }
+}, (0, _components.pickProps)(_props.props, ['show', 'onUpdate:show', 'closeOnClickOverlay', 'teleport', 'onOpen', 'onClose', 'onOpened', 'onClosed', 'onClickOverlay', 'onRouteChange']));
+
+exports.props = props;

package/lib/picker/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../button/button.css')
+require('../../popup/popup.css')
+require('../picker.css')
+require('../PickerSfc.css')

package/lib/picker/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../button/button.less')
+require('../../popup/popup.less')
+require('../picker.less')
+require('../PickerSfc.less')

package/lib/popup/Popup.js

@@ -0,0 +1,121 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _lock = require("../context/lock");
+
+var _zIndex = require("../context/zIndex");
+
+var _components = require("../utils/components");
+
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
+    to: _ctx.teleport,
+    disabled: !_ctx.teleport || _ctx.disabled
+  }, [(0, _vue.createVNode)(_vue.Transition, {
+    name: "var-fade",
+    onAfterEnter: _ctx.onOpened,
+    onAfterLeave: _ctx.onClosed
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+      class: "var--box var-popup",
+      style: (0, _vue.normalizeStyle)({
+        zIndex: _ctx.zIndex - 2
+      })
+    }, [_ctx.overlay ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: 0,
+      class: (0, _vue.normalizeClass)(["var-popup__overlay", [_ctx.overlayClass]]),
+      style: (0, _vue.normalizeStyle)(_extends({
+        zIndex: _ctx.zIndex - 1
+      }, _ctx.overlayStyle)),
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.hidePopup && _ctx.hidePopup(...args))
+    }, null, 6
+    /* CLASS, STYLE */
+    )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createVNode)(_vue.Transition, {
+      name: _ctx.transition ? _ctx.transition : "var-pop-" + _ctx.position
+    }, {
+      default: (0, _vue.withCtx)(() => [_ctx.show ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
+        key: 0,
+        class: ["var-popup__content var-elevation--3", ["var-popup--" + _ctx.position]],
+        style: {
+          zIndex: _ctx.zIndex
+        }
+      }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default")], 16
+      /* FULL_PROPS */
+      )) : (0, _vue.createCommentVNode)("v-if", true)]),
+      _: 3
+      /* FORWARDED */
+
+    }, 8
+    /* PROPS */
+    , ["name"])], 4
+    /* STYLE */
+    ), [[_vue.vShow, _ctx.show]])]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["onAfterEnter", "onAfterLeave"])], 8
+  /* PROPS */
+  , ["to", "disabled"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarPopup',
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var {
+      zIndex
+    } = (0, _zIndex.useZIndex)(() => props.show, 3);
+    var {
+      disabled
+    } = (0, _components.useTeleport)();
+
+    var hidePopup = () => {
+      var _props$onUpdateShow;
+
+      var {
+        closeOnClickOverlay,
+        onClickOverlay
+      } = props;
+      onClickOverlay == null ? void 0 : onClickOverlay();
+
+      if (!closeOnClickOverlay) {
+        return;
+      }
+
+      (_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false);
+    };
+
+    (0, _lock.useLock)(props, 'show', 'lockScroll');
+    (0, _vue.watch)(() => props.show, newValue => {
+      var {
+        onOpen,
+        onClose
+      } = props;
+      newValue ? onOpen == null ? void 0 : onOpen() : onClose == null ? void 0 : onClose();
+    }); // internal for Dialog
+
+    (0, _components.addRouteListener)(() => props.onRouteChange == null ? void 0 : props.onRouteChange());
+    return {
+      zIndex,
+      disabled,
+      hidePopup
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/popup/index.js

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

package/lib/popup/popup.css

@@ -0,0 +1 @@
+:root { --popup-overlay-background-color: rgba(0, 0, 0, 0.6); --popup-content-background-color: #fff;}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; background-color: var(--popup-content-background-color); transition: all 0.25s;}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}

package/lib/popup/popup.less

@@ -0,0 +1,125 @@
+@popup-overlay-background-color: rgba(0, 0, 0, 0.6);
+@popup-content-background-color: #fff;
+
+:root {
+  --popup-overlay-background-color: @popup-overlay-background-color;
+  --popup-content-background-color: @popup-content-background-color;
+}
+
+.var {
+  &-fade-enter-from,
+  &-fade-leave-to {
+    opacity: 0;
+  }
+  &-fade-enter-active,
+  &-fade-leave-active {
+    transition: opacity 0.25s;
+  }
+
+  &-pop-center-enter-from,
+  &-pop-center-leave-to {
+    transform: scale(0.3);
+  }
+  &-pop-center-enter-active,
+  &-pop-center-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-bottom-enter-from,
+  &-pop-bottom-leave-to {
+    transform: translateY(100%);
+  }
+  &-pop-bottom-enter-active,
+  &-pop-bottom-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-top-enter-from,
+  &-pop-top-leave-to {
+    transform: translateY(-100%);
+  }
+  &-pop-top-enter-active,
+  &-pop-top-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-left-enter-from,
+  &-pop-left-leave-to {
+    transform: translateX(-100%);
+  }
+  &-pop-left-enter-active,
+  &-pop-left-leave-active {
+    transition: all 0.25s;
+  }
+
+  &-pop-right-enter-from,
+  &-pop-right-leave-to {
+    transform: translateX(100%);
+  }
+  &-pop-right-enter-active,
+  &-pop-right-leave-active {
+    transition: all 0.25s;
+  }
+}
+
+.var-popup {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  &__overlay {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    background-color: var(--popup-overlay-background-color);
+    transition: all 0.25s;
+  }
+
+  &__content {
+    overflow: auto;
+    background-color: var(--popup-content-background-color);
+    transition: all 0.25s;
+  }
+
+  &--center {
+    position: relative;
+  }
+
+  &--bottom {
+    min-width: 100%;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+  }
+
+  &--top {
+    min-width: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &--left {
+    min-height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+  }
+
+  &--right {
+    min-height: 100%;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+}

package/lib/popup/props.js

@@ -0,0 +1,67 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+function positionValidator(position) {
+  return ['top', 'bottom', 'right', 'left', 'center'].includes(position);
+}
+
+var props = {
+  show: {
+    type: Boolean,
+    default: false
+  },
+  position: {
+    type: String,
+    default: 'center',
+    validator: positionValidator
+  },
+  transition: {
+    type: String
+  },
+  overlay: {
+    type: Boolean,
+    default: true
+  },
+  overlayClass: {
+    type: String
+  },
+  overlayStyle: {
+    type: Object
+  },
+  lockScroll: {
+    type: Boolean,
+    default: true
+  },
+  closeOnClickOverlay: {
+    type: Boolean,
+    default: true
+  },
+  teleport: {
+    type: String
+  },
+  onOpen: {
+    type: Function
+  },
+  onOpened: {
+    type: Function
+  },
+  onClose: {
+    type: Function
+  },
+  onClosed: {
+    type: Function
+  },
+  onClickOverlay: {
+    type: Function
+  },
+  // internal for Dialog
+  onRouteChange: {
+    type: Function
+  },
+  'onUpdate:show': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/popup/style/index.js

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

package/lib/popup/style/less.js

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

package/lib/progress/Progress.js

@@ -0,0 +1,154 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-progress"
+};
+var _hoisted_2 = {
+  key: 0,
+  class: "var-progress-linear"
+};
+var _hoisted_3 = ["viewBox"];
+var _hoisted_4 = ["cx", "cy", "r", "stroke-width"];
+var _hoisted_5 = ["cx", "cy", "r", "stroke-width"];
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.mode === 'linear' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [(0, _vue.createElementVNode)("div", (0, _vue.mergeProps)({
+    class: "var-progress-linear__block",
+    style: {
+      height: _ctx.lineWidth + "px"
+    }
+  }, _ctx.$attrs), [_ctx.track ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: "var-progress-linear__background",
+    style: (0, _vue.normalizeStyle)({
+      background: _ctx.trackColor
+    })
+  }, null, 4
+  /* STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)("var-progress-linear__certain" + (_ctx.ripple ? ' var-progress-linear__ripple' : '')),
+    style: (0, _vue.normalizeStyle)({
+      background: _ctx.color,
+      width: _ctx.linearProps.width
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 16
+  /* FULL_PROPS */
+  ), _ctx.label ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
+    key: 0,
+    class: "var-progress-linear__label"
+  }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.linearProps.roundValue), 1
+  /* TEXT */
+  )])], 16
+  /* FULL_PROPS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.mode === 'circle' ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 1,
+    class: "var-progress-circle",
+    style: (0, _vue.normalizeStyle)({
+      width: _ctx.size + "px",
+      height: _ctx.size + "px"
+    })
+  }, [((0, _vue.openBlock)(), (0, _vue.createElementBlock)("svg", {
+    class: "var-progress-circle__svg",
+    style: (0, _vue.normalizeStyle)({
+      transform: "rotate(" + (_ctx.rotate - 90) + "deg)"
+    }),
+    viewBox: _ctx.circleProps.viewBox
+  }, [_ctx.track ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("circle", {
+    key: 0,
+    class: "var-progress-circle__background",
+    cx: _ctx.size / 2,
+    cy: _ctx.size / 2,
+    r: _ctx.circleProps.radius,
+    fill: "transparent",
+    "stroke-width": _ctx.lineWidth,
+    style: (0, _vue.normalizeStyle)({
+      strokeDasharray: _ctx.circleProps.perimeter,
+      stroke: _ctx.trackColor
+    })
+  }, null, 12
+  /* STYLE, PROPS */
+  , _hoisted_4)) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("circle", {
+    class: "var-progress-circle__certain",
+    cx: _ctx.size / 2,
+    cy: _ctx.size / 2,
+    r: _ctx.circleProps.radius,
+    fill: "transparent",
+    "stroke-width": _ctx.lineWidth,
+    style: (0, _vue.normalizeStyle)({
+      strokeDasharray: _ctx.circleProps.strokeDasharray,
+      stroke: _ctx.color
+    })
+  }, null, 12
+  /* STYLE, PROPS */
+  , _hoisted_5)], 12
+  /* STYLE, PROPS */
+  , _hoisted_3)), _ctx.label ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", (0, _vue.mergeProps)({
+    key: 0,
+    class: "var-progress-circle__label"
+  }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.circleProps.roundValue), 1
+  /* TEXT */
+  )])], 16
+  /* FULL_PROPS */
+  )) : (0, _vue.createCommentVNode)("v-if", true)], 4
+  /* STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true)]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarProgress',
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var linearProps = (0, _vue.computed)(() => {
+      var value = (0, _shared.toNumber)(props.value);
+      var width = value > 100 ? 100 : value;
+      var roundValue = value > 100 ? 100 : Math.round(value);
+      return {
+        width: width + "%",
+        roundValue: roundValue + "%"
+      };
+    });
+    var circleProps = (0, _vue.computed)(() => {
+      var {
+        size,
+        lineWidth,
+        value
+      } = props;
+      var viewBox = "0 0 " + size + " " + size;
+      var roundValue = (0, _shared.toNumber)(value) > 100 ? 100 : Math.round((0, _shared.toNumber)(value));
+      var radius = (size - (0, _shared.toNumber)(lineWidth)) / 2;
+      var perimeter = 2 * Math.PI * radius;
+      var strokeDasharray = roundValue / 100 * perimeter + ", " + perimeter;
+      return {
+        viewBox,
+        radius,
+        strokeDasharray,
+        perimeter,
+        roundValue: roundValue + "%"
+      };
+    });
+    return {
+      linearProps,
+      circleProps
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/progress/index.js

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

package/lib/progress/progress.css

@@ -0,0 +1 @@
+:root { --progress-font-size: var(--font-size-sm); --progress-ripple-color: #fff; --progress-track-color: #d8d8d8; --progress-background: var(--color-primary);}.var-progress { position: relative; font-size: var(--progress-font-size);}.var-progress-linear { display: flex; align-items: center;}.var-progress-linear__block { flex: 1; position: relative; overflow: hidden;}.var-progress-linear__background,.var-progress-linear__certain { width: 100%; height: 100%;}.var-progress-linear__ripple::after { position: absolute; width: 0; background-color: var(--progress-ripple-color); height: 100%; opacity: 0; animation: ripple 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; content: '';}.var-progress-linear__background { background-color: var(--progress-track-color);}.var-progress-linear__certain { position: absolute; background-color: var(--progress-background); top: 0; left: 0; transition: all 0.2s, background-color 0.8s;}.var-progress-linear__label { margin-left: 8px; flex: 0;}@keyframes ripple { 0% { width: 0; opacity: 0.1; } 20% { width: 0; opacity: 0.5; } 80% { width: 100%; opacity: 0; }}.var-progress-circle { position: relative;}.var-progress-circle__background { stroke: var(--progress-track-color);}.var-progress-circle__certain { transition: all 0.2s; stroke: var(--progress-background); position: absolute;}.var-progress-circle__label { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}