@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/snackbar/Snackbar.js

@@ -0,0 +1,70 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _core = _interopRequireDefault(require("./core"));
+
+var _components = require("../utils/components");
+
+var _props = require("./props");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  var _component_var_snackbar_core = (0, _vue.resolveComponent)("var-snackbar-core");
+
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Teleport, {
+    to: _ctx.teleport,
+    disabled: _ctx.disabled
+  }, [(0, _vue.createVNode)(_vue.Transition, {
+    name: "var-snackbar-fade",
+    onAfterEnter: _ctx.onOpened,
+    onAfterLeave: _ctx.onClosed
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_snackbar_core, (0, _vue.mergeProps)(_ctx.$props, {
+      class: "var-snackbar-transition"
+    }), {
+      action: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "action")]),
+      default: (0, _vue.withCtx)(() => [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.content), 1
+      /* TEXT */
+      )])]),
+      _: 3
+      /* FORWARDED */
+
+    }, 16
+    /* FULL_PROPS */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["onAfterEnter", "onAfterLeave"])], 8
+  /* PROPS */
+  , ["to", "disabled"]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSnackbar',
+  components: {
+    VarSnackbarCore: _core.default
+  },
+  props: _props.props,
+
+  setup() {
+    var {
+      disabled
+    } = (0, _components.useTeleport)();
+    return {
+      disabled
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/snackbar/core.js

@@ -0,0 +1,146 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _loading = _interopRequireDefault(require("../loading"));
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _zIndex = require("../context/zIndex");
+
+var _props = require("./props");
+
+var _lock = require("../context/lock");
+
+var _index = require("./index");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var ICON_TYPE_DICT = {
+  success: 'checkbox-marked-circle',
+  warning: 'warning',
+  info: 'information',
+  error: 'error',
+  loading: ''
+};
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-snackbar__action"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
+
+  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: "var-snackbar",
+    style: (0, _vue.normalizeStyle)({
+      pointerEvents: _ctx.isForbidClick ? 'auto' : 'none',
+      zIndex: _ctx.zIndex
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(_ctx.snackbarClass),
+    style: (0, _vue.normalizeStyle)({
+      zIndex: _ctx.zIndex
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-snackbar__content", [_ctx.contentClass]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.content), 1
+  /* TEXT */
+  )])], 2
+  /* CLASS */
+  ), (0, _vue.createElementVNode)("div", _hoisted_1, [_ctx.iconName ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 0,
+    name: _ctx.iconName
+  }, null, 8
+  /* PROPS */
+  , ["name"])) : (0, _vue.createCommentVNode)("v-if", true), _ctx.type === 'loading' ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
+    key: 1,
+    type: _ctx.loadingType,
+    size: _ctx.loadingSize
+  }, null, 8
+  /* PROPS */
+  , ["type", "size"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.renderSlot)(_ctx.$slots, "action")])], 6
+  /* CLASS, STYLE */
+  )], 4
+  /* STYLE */
+  )), [[_vue.vShow, _ctx.show]]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSnackbarCore',
+  components: {
+    VarLoading: _loading.default,
+    VarIcon: _icon.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var timer = (0, _vue.ref)(null);
+    var {
+      zIndex
+    } = (0, _zIndex.useZIndex)(() => props.show, 1);
+    (0, _lock.useLock)(props, 'show', 'lockScroll');
+    var snackbarClass = (0, _vue.computed)(() => {
+      var {
+        position,
+        vertical,
+        type
+      } = props;
+      var baseClass = "var-snackbar__wrapper var-snackbar__wrapper-" + position + " var-elevation--4";
+      var verticalClass = vertical ? ' var-snackbar__vertical' : '';
+      var typeClass = type && _index.SNACKBAR_TYPE.includes(type) ? " var-snackbar__wrapper-" + type : '';
+      return "" + baseClass + verticalClass + typeClass;
+    });
+    var isForbidClick = (0, _vue.computed)(() => props.type === 'loading' || props.forbidClick);
+    var iconName = (0, _vue.computed)(() => {
+      if (!props.type) return '';
+      return ICON_TYPE_DICT[props.type];
+    });
+
+    var updateAfterDuration = () => {
+      timer.value = setTimeout(() => {
+        var _props$onUpdateShow;
+
+        props.type !== 'loading' && ((_props$onUpdateShow = props['onUpdate:show']) == null ? void 0 : _props$onUpdateShow.call(props, false));
+      }, props.duration);
+    };
+
+    (0, _vue.watch)(() => props.show, show => {
+      if (show) {
+        props.onOpen == null ? void 0 : props.onOpen();
+        updateAfterDuration();
+      } else if (show === false) {
+        clearTimeout(timer.value);
+        props.onClose == null ? void 0 : props.onClose();
+      }
+    });
+    (0, _vue.watch)(() => props._update, () => {
+      clearTimeout(timer.value);
+      updateAfterDuration();
+    });
+    (0, _vue.onMounted)(() => {
+      if (props.show) {
+        props.onOpen == null ? void 0 : props.onOpen();
+        updateAfterDuration();
+      }
+    });
+    return {
+      zIndex,
+      snackbarClass,
+      iconName,
+      isForbidClick
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/snackbar/index.js

@@ -0,0 +1,232 @@
+"use strict";
+
+exports.__esModule = true;
+exports.default = exports._SnackbarComponent = exports.SNACKBAR_TYPE = void 0;
+
+var _vue = require("vue");
+
+var _core = _interopRequireDefault(require("./core.js"));
+
+var _Snackbar = _interopRequireDefault(require("./Snackbar.js"));
+
+var _context = _interopRequireDefault(require("../context"));
+
+var _components = require("../utils/components");
+
+var _shared = require("../utils/shared");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+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 _isSlot(s) {
+  return typeof s === 'function' || Object.prototype.toString.call(s) === '[object Object]' && !(0, _vue.isVNode)(s);
+}
+
+var SNACKBAR_TYPE = ['loading', 'success', 'warning', 'info', 'error'];
+exports.SNACKBAR_TYPE = SNACKBAR_TYPE;
+var sid = 0;
+var isMount = false;
+var unmount;
+var isAllowMultiple = false;
+var uniqSnackbarOptions = (0, _vue.reactive)([]);
+var defaultOption = {
+  type: undefined,
+  content: '',
+  position: 'top',
+  duration: 3000,
+  vertical: false,
+  contentClass: undefined,
+  loadingType: 'circle',
+  loadingSize: 'normal',
+  lockScroll: false,
+  teleport: 'body',
+  forbidClick: false,
+  onOpen: () => {},
+  onOpened: () => {},
+  onClose: () => {},
+  onClosed: () => {}
+};
+var transitionGroupProps = {
+  name: 'var-snackbar-fade',
+  tag: 'div',
+  class: 'var-transition-group'
+};
+var TransitionGroupHost = {
+  setup() {
+    return () => {
+      var snackbarList = uniqSnackbarOptions.map(({
+        id,
+        reactiveSnackOptions,
+        _update
+      }) => {
+        var transitionGroupEl = document.querySelector('.var-transition-group');
+
+        if (reactiveSnackOptions.forbidClick || reactiveSnackOptions.type === 'loading') {
+          ;
+          transitionGroupEl.classList.add('var-pointer-auto');
+        } else {
+          ;
+          transitionGroupEl.classList.remove('var-pointer-auto');
+        }
+
+        if (isAllowMultiple) reactiveSnackOptions.position = 'top';
+        var position = isAllowMultiple ? 'relative' : 'absolute'; // avoid stylelint value-keyword-case error
+
+        var style = _extends({
+          position
+        }, getTop(reactiveSnackOptions.position));
+
+        return (0, _vue.createVNode)(_core.default, (0, _vue.mergeProps)(reactiveSnackOptions, {
+          "key": id,
+          "style": style,
+          "data-id": id,
+          "_update": _update,
+          'show': reactiveSnackOptions.show,
+          "onUpdate:show": $event => reactiveSnackOptions.show = $event
+        }), null);
+      });
+      var zindex = _context.default.zIndex; // avoid stylelint value-keyword-case error
+
+      return (0, _vue.createVNode)(_vue.TransitionGroup, (0, _vue.mergeProps)(transitionGroupProps, {
+        "style": {
+          zIndex: zindex
+        },
+        "onAfterEnter": opened,
+        "onAfterLeave": removeUniqOption
+      }), _isSlot(snackbarList) ? snackbarList : {
+        default: () => [snackbarList]
+      });
+    };
+  }
+
+};
+
+var Snackbar = function (options) {
+  var snackOptions = (0, _shared.isPlainObject)(options) ? options : {
+    content: options
+  };
+  var reactiveSnackOptions = (0, _vue.reactive)(_extends({}, defaultOption, snackOptions));
+  reactiveSnackOptions.show = true;
+
+  if (!isMount) {
+    isMount = true;
+    unmount = (0, _components.mountInstance)(TransitionGroupHost).unmountInstance;
+  }
+
+  var {
+    length
+  } = uniqSnackbarOptions;
+  var uniqSnackbarOptionItem = {
+    id: sid++,
+    reactiveSnackOptions
+  };
+
+  if (length === 0 || isAllowMultiple) {
+    addUniqOption(uniqSnackbarOptionItem);
+  } else {
+    var _update = "update-" + sid;
+
+    updateUniqOption(reactiveSnackOptions, _update);
+  }
+
+  return {
+    clear() {
+      if (!isAllowMultiple && uniqSnackbarOptions.length) {
+        uniqSnackbarOptions[0].reactiveSnackOptions.show = false;
+      } else {
+        reactiveSnackOptions.show = false;
+      }
+    }
+
+  };
+};
+
+SNACKBAR_TYPE.forEach(type => {
+  Snackbar[type] = options => {
+    if ((0, _shared.isPlainObject)(options)) {
+      options.type = type;
+    } else {
+      options = {
+        content: options,
+        type
+      };
+    }
+
+    return Snackbar(options);
+  };
+});
+
+Snackbar.install = function (app) {
+  app.component(_Snackbar.default.name, _Snackbar.default);
+};
+
+Snackbar.allowMultiple = function (bool = false) {
+  if (bool !== isAllowMultiple) {
+    uniqSnackbarOptions.forEach(option => {
+      option.reactiveSnackOptions.show = false;
+    });
+    isAllowMultiple = bool;
+  }
+};
+
+Snackbar.clear = function () {
+  uniqSnackbarOptions.forEach(option => {
+    option.reactiveSnackOptions.show = false;
+  });
+};
+
+Snackbar.Component = _Snackbar.default;
+
+function opened(element) {
+  var id = element.getAttribute('data-id');
+  var option = uniqSnackbarOptions.find(option => option.id === (0, _shared.toNumber)(id));
+  if (option) option.reactiveSnackOptions.onOpened == null ? void 0 : option.reactiveSnackOptions.onOpened();
+}
+
+function removeUniqOption(element) {
+  element.parentElement && element.parentElement.classList.remove('var-pointer-auto');
+  var id = element.getAttribute('data-id');
+  var option = uniqSnackbarOptions.find(option => option.id === (0, _shared.toNumber)(id));
+
+  if (option) {
+    option.animationEnd = true;
+    option.reactiveSnackOptions.onClosed == null ? void 0 : option.reactiveSnackOptions.onClosed();
+  }
+
+  var isAllAnimationEnd = uniqSnackbarOptions.every(option => option.animationEnd);
+
+  if (isAllAnimationEnd) {
+    unmount == null ? void 0 : unmount();
+    uniqSnackbarOptions = (0, _vue.reactive)([]);
+    isMount = false;
+  }
+}
+
+function addUniqOption(uniqSnackbarOptionItem) {
+  uniqSnackbarOptions.push(uniqSnackbarOptionItem);
+}
+
+function updateUniqOption(reactiveSnackOptions, _update) {
+  var [firstOption] = uniqSnackbarOptions;
+  firstOption.reactiveSnackOptions = _extends({}, firstOption.reactiveSnackOptions, reactiveSnackOptions);
+  firstOption._update = _update;
+}
+
+function getTop(position = 'top') {
+  if (position === 'bottom') return {
+    [position]: '5%'
+  };
+  return {
+    top: position === 'top' ? '5%' : '45%'
+  };
+}
+
+_Snackbar.default.install = function (app) {
+  app.component(_Snackbar.default.name, _Snackbar.default);
+};
+
+var _SnackbarComponent = _Snackbar.default;
+exports._SnackbarComponent = _SnackbarComponent;
+var _default = Snackbar;
+exports.default = _default;

package/lib/snackbar/props.js

@@ -0,0 +1,103 @@
+"use strict";
+
+exports.__esModule = true;
+exports.positionValidator = positionValidator;
+exports.typeValidator = typeValidator;
+exports.props = void 0;
+
+var _components = require("../utils/components");
+
+var _props = require("../loading/props");
+
+var _index = require("./index");
+
+function positionValidator(position) {
+  var validPositions = ['top', 'center', 'bottom'];
+  return validPositions.includes(position);
+}
+
+function typeValidator(type) {
+  return _index.SNACKBAR_TYPE.includes(type);
+}
+
+var props = {
+  type: {
+    type: String,
+    validator: typeValidator
+  },
+  // snackbar显示的位置
+  position: {
+    type: String,
+    default: 'top',
+    validator: positionValidator
+  },
+  // content内容
+  content: {
+    type: String
+  },
+  // 为snackbar content添加自定义类名
+  contentClass: {
+    type: String
+  },
+  // snackbar 持续时间
+  duration: {
+    type: Number,
+    default: 3000
+  },
+  // 是否将消息条内容堆叠在操作（按钮）之上
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  // 加载动画类型
+  loadingType: (0, _components.pickProps)(_props.props, 'type'),
+  // 加载动画尺寸
+  loadingSize: (0, _components.pickProps)(_props.props, 'size'),
+  // 是否禁止滚动穿透
+  lockScroll: {
+    type: Boolean,
+    default: false
+  },
+  // 控制组件可见还是隐藏
+  show: {
+    type: Boolean,
+    default: false
+  },
+  // teleport
+  teleport: {
+    type: String,
+    default: 'body'
+  },
+  // 是否禁止点击背景
+  forbidClick: {
+    type: Boolean,
+    default: false
+  },
+  // 打开时的回调函数
+  onOpen: {
+    type: Function,
+    default: () => {}
+  },
+  // 打开动画结束时的回调
+  onOpened: {
+    type: Function,
+    default: () => {}
+  },
+  // 关闭时的回调函数
+  onClose: {
+    type: Function,
+    default: () => {}
+  },
+  // 关闭动画结束时的回调
+  onClosed: {
+    type: Function,
+    default: () => {}
+  },
+  'onUpdate:show': {
+    type: Function
+  },
+  _update: {
+    type: String
+  }
+};
+exports.props = props;

package/lib/snackbar/snackbar.css

@@ -0,0 +1 @@
+:root { --snackbar-width: 256px; --snackbar-color: rgba(255, 255, 255, 0.87); --snackbar-border-radius: 4px; --snackbar-background: #333; --snackbar-font-size: var(--font-size-md); --snackbar-margin: 6px 24px; --snackbar-border-color: currentColor; --snackbar-success-background: var(--color-success); --snackbar-info-background: var(--color-info); --snackbar-error-background: var(--color-danger); --snackbar-warning-background: var(--color-warning); --snackbar-content-padding: 14px 16px; --snackbar-action-margin: 0 16px 0 0;}.var-transition-group { position: fixed; left: 0; right: 0; top: 0; bottom: 0; pointer-events: none;}.var-pointer-auto { pointer-events: auto;}.var-snackbar { display: flex; justify-content: center; align-items: baseline; left: 0; right: 0; bottom: 0; transition: all 0.15s var(--cubic-bezier);}.var-snackbar__wrapper { width: var(--snackbar-width); display: flex; border-radius: var(--snackbar-border-radius); color: var(--snackbar-color); background: var(--snackbar-background); font-size: var(--snackbar-font-size); margin: var(--snackbar-margin); align-items: center; border-color: var(--snackbar-border-color); pointer-events: auto; transition: 0.3s var(--cubic-bezier);}.var-snackbar__wrapper-success { background: var(--snackbar-success-background);}.var-snackbar__wrapper-info { background: var(--snackbar-info-background);}.var-snackbar__wrapper-warning { background: var(--snackbar-warning-background);}.var-snackbar__wrapper-error { background: var(--snackbar-error-background);}.var-snackbar__content { flex-grow: 1; padding: var(--snackbar-content-padding);}.var-snackbar__action { margin: var(--snackbar-action-margin); display: flex;}.var-snackbar__vertical { flex-direction: column; align-items: flex-start;}.var-snackbar__vertical .var-snackbar__action { align-self: flex-end; margin-bottom: 8px;}.var-snackbar-fade-leave-active { position: absolute;}.var-snackbar-fade-enter-from,.var-snackbar-fade-leave-to { opacity: 0; transform: translateY(-30px);}.var-snackbar-transition { top: 0; position: fixed;}.var-snackbar-transition .var-snackbar__wrapper { position: absolute;}.var-snackbar-transition .var-snackbar__wrapper-top { top: 5%;}.var-snackbar-transition .var-snackbar__wrapper-center { top: 45%;}.var-snackbar-transition .var-snackbar__wrapper-bottom { bottom: 5%;}

package/lib/snackbar/snackbar.less

@@ -0,0 +1,135 @@
+@snackbar-width: 256px;
+@snackbar-color: rgba(255, 255, 255, 0.87);
+@snackbar-border-radius: 4px;
+@snackbar-background: #333;
+@snackbar-font-size: var(--font-size-md);
+@snackbar-margin: 6px 24px;
+@snackbar-border-color: currentColor;
+@snackbar-success-background: var(--color-success);
+@snackbar-info-background: var(--color-info);
+@snackbar-error-background: var(--color-danger);
+@snackbar-warning-background: var(--color-warning);
+@snackbar-content-padding: 14px 16px;
+@snackbar-action-margin: 0 16px 0 0;
+
+:root {
+  --snackbar-width: @snackbar-width;
+  --snackbar-color: @snackbar-color;
+  --snackbar-border-radius: @snackbar-border-radius;
+  --snackbar-background: @snackbar-background;
+  --snackbar-font-size: @snackbar-font-size;
+  --snackbar-margin: @snackbar-margin;
+  --snackbar-border-color: @snackbar-border-color;
+  --snackbar-success-background: @snackbar-success-background;
+  --snackbar-info-background: @snackbar-info-background;
+  --snackbar-error-background: @snackbar-error-background;
+  --snackbar-warning-background: @snackbar-warning-background;
+  --snackbar-content-padding: @snackbar-content-padding;
+  --snackbar-action-margin: @snackbar-action-margin;
+}
+
+.var-transition-group {
+  position: fixed;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  pointer-events: none;
+}
+
+.var-pointer-auto {
+  pointer-events: auto;
+}
+
+.var {
+  &-snackbar {
+    display: flex;
+    justify-content: center;
+    align-items: baseline;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    transition: all 0.15s var(--cubic-bezier);
+
+    &__wrapper {
+      width: var(--snackbar-width);
+      display: flex;
+      border-radius: var(--snackbar-border-radius);
+      color: var(--snackbar-color);
+      background: var(--snackbar-background);
+      font-size: var(--snackbar-font-size);
+      margin: var(--snackbar-margin);
+      align-items: center;
+      border-color: var(--snackbar-border-color);
+      pointer-events: auto;
+      transition: 0.3s var(--cubic-bezier);
+
+      &-success {
+        background: var(--snackbar-success-background);
+      }
+
+      &-info {
+        background: var(--snackbar-info-background);
+      }
+
+      &-warning {
+        background: var(--snackbar-warning-background);
+      }
+
+      &-error {
+        background: var(--snackbar-error-background);
+      }
+    }
+
+    &__content {
+      flex-grow: 1;
+      padding: var(--snackbar-content-padding);
+    }
+
+    &__action {
+      margin: var(--snackbar-action-margin);
+      display: flex;
+    }
+
+    &__vertical {
+      flex-direction: column;
+      align-items: flex-start;
+
+      .var-snackbar__action {
+        align-self: flex-end;
+        margin-bottom: 8px;
+      }
+    }
+
+    &-fade-leave-active {
+      position: absolute;
+    }
+
+    &-fade-enter-from,
+    &-fade-leave-to {
+      opacity: 0;
+      transform: translateY(-30px);
+    }
+  }
+
+  &-snackbar-transition {
+    top: 0;
+    position: fixed;
+
+    .var-snackbar__wrapper {
+      position: absolute;
+
+      &-top {
+        top: 5%;
+      }
+
+      &-center {
+        top: 45%;
+      }
+
+      &-bottom {
+        bottom: 5%;
+      }
+    }
+  }
+}