@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/snackbar/Snackbar.js

@@ -1,70 +0,0 @@
-"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

@@ -1,146 +0,0 @@
-"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

@@ -1,232 +0,0 @@
-"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

@@ -1,103 +0,0 @@
-"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

@@ -1 +0,0 @@
-: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

@@ -1,135 +0,0 @@
-@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%;
-      }
-    }
-  }
-}