@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/back-top/BackTop.js

@@ -1,96 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _button = _interopRequireDefault(require("../button"));
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _props = require("./props");
-
-var _shared = require("../utils/shared");
-
-var _elements = require("../utils/elements");
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-function render(_ctx, _cache) {
-  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
-
-  var _component_var_button = (0, _vue.resolveComponent)("var-button");
-
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-back-top", [_ctx.show ? 'var-back-top--active' : null]]),
-    onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)((...args) => _ctx.click && _ctx.click(...args), ["stop"]))
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createVNode)(_component_var_button, {
-    type: "primary",
-    round: "",
-    "var-back-top-cover": ""
-  }, {
-    default: (0, _vue.withCtx)(() => [(0, _vue.createVNode)(_component_var_icon, {
-      name: "chevron-up"
-    })]),
-    _: 1
-    /* STABLE */
-
-  })])], 2
-  /* CLASS */
-  );
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarBackTop',
-  components: {
-    VarButton: _button.default,
-    VarIcon: _icon.default
-  },
-  props: _props.props,
-
-  setup(props) {
-    var element = window;
-    var show = (0, _vue.ref)(false);
-
-    var click = () => {
-      props.onClick == null ? void 0 : props.onClick();
-      var left = (0, _elements.getScrollLeft)(element);
-      (0, _elements.scrollTo)(element, {
-        left,
-        duration: props.duration,
-        animation: _shared.easeInOutCubic
-      });
-    };
-
-    var scroll = () => {
-      show.value = (0, _elements.getScrollTop)(element) >= (0, _shared.toNumber)(props.visibilityHeight);
-    };
-
-    var throttleScroll = (0, _shared.throttle)(scroll, 200);
-
-    var getHTMLElement = () => {
-      if (!(0, _shared.isString)(props.target)) throw Error('[Varlet] BackTop: type of prop "target" should be a string');
-      var el = document.querySelector(props.target);
-      if (!el) throw Error('[Varlet] BackTop: "target" should be a selector');
-      return el;
-    };
-
-    (0, _vue.onMounted)(() => {
-      if (props.target) element = getHTMLElement();
-      element.addEventListener('scroll', throttleScroll);
-    });
-    (0, _vue.onBeforeUnmount)(() => {
-      element.removeEventListener('scroll', throttleScroll);
-    });
-    return {
-      show,
-      click
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/back-top/backTop.css

@@ -1 +0,0 @@
-:root { --back-top-right: 40px; --back-top-bottom: 40px; --back-top-button-size: 40px;}.var-back-top { position: fixed; right: var(--back-top-right); bottom: var(--back-top-bottom); transform: scale(0); transition: 0.3s var(--cubic-bezier); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-back-top .var-button[var-back-top-cover] { width: var(--back-top-button-size); height: var(--back-top-button-size);}.var-back-top--active { transform: scale(1);}

package/lib/back-top/backTop.less

@@ -1,27 +0,0 @@
-@back-top-right: 40px;
-@back-top-bottom: 40px;
-@back-top-button-size: 40px;
-
-:root {
-  --back-top-right: @back-top-right;
-  --back-top-bottom: @back-top-bottom;
-  --back-top-button-size: @back-top-button-size;
-}
-
-.var-back-top {
-  position: fixed;
-  right: var(--back-top-right);
-  bottom: var(--back-top-bottom);
-  transform: scale(0);
-  transition: 0.3s var(--cubic-bezier);
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-
-  .var-button[var-back-top-cover] {
-    width: var(--back-top-button-size);
-    height: var(--back-top-button-size);
-  }
-
-  &--active {
-    transform: scale(1);
-  }
-}

package/lib/back-top/index.js

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

package/lib/back-top/props.js

@@ -1,21 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = void 0;
-var props = {
-  visibilityHeight: {
-    type: [Number, String],
-    default: 200
-  },
-  duration: {
-    type: Number,
-    default: 300
-  },
-  target: {
-    type: String
-  },
-  onClick: {
-    type: Function
-  }
-};
-exports.props = props;

package/lib/back-top/style/index.js

@@ -1,5 +0,0 @@
-require('../../styles/common.css')
-require('../../button/button.css')
-require('../../icon/icon.css')
-require('../backTop.css')
-require('../BackTopSfc.css')

package/lib/back-top/style/less.js

@@ -1,5 +0,0 @@
-require('../../styles/common.less')
-require('../../button/button.less')
-require('../../icon/icon.less')
-require('../backTop.less')
-require('../BackTopSfc.less')

package/lib/badge/Badge.js

@@ -1,107 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _icon = _interopRequireDefault(require("../icon"));
-
-var _vue = require("vue");
-
-var _props = require("./props");
-
-var _shared = require("../utils/shared");
-
-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-badge var--box"
-};
-var _hoisted_2 = {
-  key: 1
-};
-
-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.createVNode)(_vue.Transition, {
-    name: "var-badge-fade"
-  }, {
-    default: (0, _vue.withCtx)(() => [(0, _vue.withDirectives)((0, _vue.createElementVNode)("span", (0, _vue.mergeProps)(_ctx.$attrs, {
-      class: ["var-badge__content", _ctx.contentClass],
-      style: {
-        background: _ctx.color
-      }
-    }), [_ctx.icon && !_ctx.dot ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
-      key: 0,
-      name: _ctx.icon,
-      size: "10px"
-    }, null, 8
-    /* PROPS */
-    , ["name"])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_2, (0, _vue.toDisplayString)(_ctx.values), 1
-    /* TEXT */
-    ))], 16
-    /* FULL_PROPS */
-    ), [[_vue.vShow, !_ctx.hidden]])]),
-    _: 1
-    /* STABLE */
-
-  }), (0, _vue.renderSlot)(_ctx.$slots, "default")]);
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarBadge',
-  components: {
-    VarIcon: _icon.default
-  },
-  inheritAttrs: false,
-  props: _props.props,
-
-  setup(props, {
-    slots
-  }) {
-    var contentClass = (0, _vue.computed)(() => {
-      var {
-        type,
-        position,
-        dot,
-        icon
-      } = props;
-      var positionBasic = (slots.default == null ? void 0 : slots.default()) && "var-badge__position var-badge--" + position;
-      var dotClass = dot && 'var-badge__dot';
-      var positionClass = getPositionClass();
-      var iconClass = icon && 'var-badge__icon';
-      return ["var-badge--" + type, positionBasic, dotClass, positionClass, iconClass];
-    });
-    var values = (0, _vue.computed)(() => {
-      var {
-        dot,
-        value,
-        maxValue
-      } = props;
-      if (dot) return '';
-      if (value !== undefined && maxValue !== undefined && (0, _shared.toNumber)(value) > maxValue) return maxValue + "+";
-      return value;
-    });
-
-    var getPositionClass = () => {
-      var {
-        position,
-        dot
-      } = props;
-      if (dot && position.includes('right')) return 'var-badge__dot--right';
-      if (dot && position.includes('left')) return 'var-badge__dot--left';
-    };
-
-    return {
-      values,
-      contentClass
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/badge/badge.css

@@ -1 +0,0 @@
-:root { --badge-content-padding: 2px 6px; --badge-default-color: #e0e0e0; --badge-primary-color: var(--color-primary); --badge-danger-color: var(--color-danger); --badge-success-color: var(--color-success); --badge-warning-color: var(--color-warning); --badge-info-color: var(--color-info);}.var-badge { display: inline-block; position: relative; transition: background-color 0.25s;}.var-badge__content { color: #fff; border-radius: 100px; font-size: 12px; padding: 2px 6px; vertical-align: middle; text-align: center; display: inline-block;}.var-badge__icon { padding: 2px 4px;}.var-badge__position { border: 2px #fff solid;}.var-badge--default { background: var(--badge-default-color);}.var-badge--primary { background: var(--badge-primary-color);}.var-badge--info { background: var(--badge-info-color);}.var-badge--warning { background: var(--badge-warning-color);}.var-badge--success { background: var(--badge-success-color);}.var-badge--danger { background: var(--badge-danger-color);}.var-badge--right-top { position: absolute; top: 0; right: 0; transform: translateY(-50%) translateX(50%);}.var-badge--left-top { position: absolute; top: 0; left: 0; transform: translateY(-50%) translateX(-50%);}.var-badge--right-bottom { position: absolute; bottom: 0; right: 0; transform: translateY(50%) translateX(50%);}.var-badge--left-bottom { position: absolute; bottom: 0; left: 0; transform: translateY(50%) translateX(-50%);}.var-badge__dot { box-sizing: content-box; width: 8px; height: 8px; border-radius: 8px; padding: 0;}.var-badge__dot--right { right: 6px;}.var-badge__dot--left { left: 6px;}.var-badge-fade-enter-active,.var-badge-fade-leave-active { transition: opacity 0.15s var(--cubic-bezier);}.var-badge-fade-enter-from,.var-badge-fade-leave-to { opacity: 0;}

package/lib/badge/badge.less

@@ -1,119 +0,0 @@
-@badge-content-padding: 2px 6px;
-@badge-default-color: #e0e0e0;
-@badge-primary-color: var(--color-primary);
-@badge-danger-color: var(--color-danger);
-@badge-success-color: var(--color-success);
-@badge-warning-color: var(--color-warning);
-@badge-info-color: var(--color-info);
-
-:root {
-  --badge-content-padding: @badge-content-padding;
-  --badge-default-color: @badge-default-color;
-  --badge-primary-color: @badge-primary-color;
-  --badge-danger-color: @badge-danger-color;
-  --badge-success-color: @badge-success-color;
-  --badge-warning-color: @badge-warning-color;
-  --badge-info-color: @badge-info-color;
-}
-
-.var-badge {
-  display: inline-block;
-  position: relative;
-  transition: background-color 0.25s;
-
-  &__content {
-    color: #fff;
-    border-radius: 100px;
-    font-size: 12px;
-    padding: 2px 6px;
-    vertical-align: middle;
-    text-align: center;
-    display: inline-block;
-  }
-
-  &__icon {
-    padding: 2px 4px;
-  }
-
-  &__position {
-    border: 2px #fff solid;
-  }
-
-  &--default {
-    background: var(--badge-default-color);
-  }
-
-  &--primary {
-    background: var(--badge-primary-color);
-  }
-
-  &--info {
-    background: var(--badge-info-color);
-  }
-
-  &--warning {
-    background: var(--badge-warning-color);
-  }
-
-  &--success {
-    background: var(--badge-success-color);
-  }
-
-  &--danger {
-    background: var(--badge-danger-color);
-  }
-
-  &--right-top {
-    position: absolute;
-    top: 0;
-    right: 0;
-    transform: translateY(-50%) translateX(50%);
-  }
-
-  &--left-top {
-    position: absolute;
-    top: 0;
-    left: 0;
-    transform: translateY(-50%) translateX(-50%);
-  }
-
-  &--right-bottom {
-    position: absolute;
-    bottom: 0;
-    right: 0;
-    transform: translateY(50%) translateX(50%);
-  }
-
-  &--left-bottom {
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    transform: translateY(50%) translateX(-50%);
-  }
-
-  &__dot {
-    box-sizing: content-box;
-    width: 8px;
-    height: 8px;
-    border-radius: 8px;
-    padding: 0;
-  }
-
-  &__dot--right {
-    right: 6px;
-  }
-
-  &__dot--left {
-    left: 6px;
-  }
-
-  &-fade-enter-active,
-  &-fade-leave-active {
-    transition: opacity 0.15s var(--cubic-bezier);
-  }
-
-  &-fade-enter-from,
-  &-fade-leave-to {
-    opacity: 0;
-  }
-}

package/lib/badge/index.js

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

package/lib/badge/props.js

@@ -1,55 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = void 0;
-
-function typeValidator(type) {
-  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
-}
-
-function positionValidator(position) {
-  return ['right-top', 'right-bottom', 'left-top', 'left-bottom'].includes(position);
-}
-
-var props = {
-  // 徽标类型
-  type: {
-    type: String,
-    default: 'default',
-    validator: typeValidator
-  },
-  // 是否隐藏徽标
-  hidden: {
-    type: Boolean,
-    default: false
-  },
-  // 是否是小圆点
-  dot: {
-    type: Boolean,
-    default: false
-  },
-  // 显示的值
-  value: {
-    type: [String, Number],
-    default: 0
-  },
-  // 显示最大值
-  maxValue: {
-    type: [String, Number]
-  },
-  // 自定义徽标颜色
-  color: {
-    type: String
-  },
-  // 定位位置
-  position: {
-    type: String,
-    default: 'right-top',
-    validator: positionValidator
-  },
-  // 图标
-  icon: {
-    type: String
-  }
-};
-exports.props = props;

package/lib/badge/style/index.js

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

package/lib/badge/style/less.js

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

package/lib/button/Button.js

@@ -1,102 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _ripple = _interopRequireDefault(require("../ripple"));
-
-var _loading = _interopRequireDefault(require("../loading"));
-
-var _vue = require("vue");
-
-var _props = require("./props");
-
-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 = ["disabled"];
-
-function render(_ctx, _cache) {
-  var _component_var_loading = (0, _vue.resolveComponent)("var-loading");
-
-  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
-
-  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("button", {
-    class: (0, _vue.normalizeClass)(["var-button var--box", ["var-button--" + _ctx.size, _ctx.block ? 'var--flex var-button--block' : 'var--inline-flex', _ctx.disabled ? 'var-button--disabled' : null, _ctx.text ? "var-button--text-" + _ctx.type : "var-button--" + _ctx.type, _ctx.text ? 'var-button--text' : 'var-elevation--2', _ctx.text && _ctx.disabled ? 'var-button--text-disabled' : null, _ctx.round ? 'var-button--round' : null, _ctx.outline ? 'var-button--outline' : null]]),
-    style: (0, _vue.normalizeStyle)({
-      color: _ctx.textColor,
-      background: _ctx.color
-    }),
-    disabled: _ctx.disabled,
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args)),
-    onTouchstart: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args))
-  }, [_ctx.loading ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_loading, {
-    key: 0,
-    class: "var-button__loading",
-    type: _ctx.loadingType,
-    size: _ctx.loadingSize,
-    radius: _ctx.loadingRadius
-  }, null, 8
-  /* PROPS */
-  , ["type", "size", "radius"])) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-button__content", [_ctx.loading ? 'var-button--hidden' : null]])
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
-  /* CLASS */
-  )], 46
-  /* CLASS, STYLE, PROPS, HYDRATE_EVENTS */
-  , _hoisted_1)), [[_directive_ripple, {
-    disabled: _ctx.disabled || !_ctx.ripple
-  }]]);
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarButton',
-  components: {
-    VarLoading: _loading.default
-  },
-  directives: {
-    Ripple: _ripple.default
-  },
-  props: _props.props,
-
-  setup(props) {
-    var handleClick = e => {
-      var {
-        loading,
-        disabled,
-        onClick
-      } = props;
-
-      if (loading || disabled) {
-        return;
-      }
-
-      onClick == null ? void 0 : onClick(e);
-    };
-
-    var handleTouchstart = e => {
-      var {
-        loading,
-        disabled,
-        onTouchstart
-      } = props;
-
-      if (loading || disabled) {
-        return;
-      }
-
-      onTouchstart == null ? void 0 : onTouchstart(e);
-    };
-
-    return {
-      handleClick,
-      handleTouchstart
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/button/button.css

@@ -1 +0,0 @@
-:root { --button-default-color: #f5f5f5; --button-primary-color: var(--color-primary); --button-danger-color: var(--color-danger); --button-success-color: var(--color-success); --button-warning-color: var(--color-warning); --button-info-color: var(--color-info); --button-disabled-color: var(--color-disabled); --button-disabled-text-color: var(--color-text-disabled); --button-border-radius: 4px; --button-mini-padding: 0 9px; --button-small-padding: 0 11px; --button-normal-padding: 0 15px; --button-large-padding: 0 22px; --button-round-padding: 6px; --button-mini-height: 20px; --button-small-height: 28px; --button-normal-height: 36px; --button-large-height: 44px;}.var-button { position: relative; justify-content: center; align-items: center; outline: none; border: none; border-radius: var(--button-border-radius); user-select: none; cursor: pointer; font-family: inherit; transition: box-shadow 0.2s, background-color 0.25s; will-change: box-shadow; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); white-space: nowrap; line-height: 1;}.var-button:active { 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-button__loading { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}.var-button--default { color: inherit; background-color: var(--button-default-color);}.var-button--primary { color: #fff; background-color: var(--button-primary-color);}.var-button--info { color: #fff; background-color: var(--button-info-color);}.var-button--success { color: #fff; background-color: var(--button-success-color);}.var-button--warning { color: #fff; background-color: var(--button-warning-color);}.var-button--danger { color: #fff; background-color: var(--button-danger-color);}.var-button--disabled { background-color: var(--button-disabled-color); color: var(--button-disabled-text-color); cursor: not-allowed; box-shadow: none !important;}.var-button--block { width: 100%;}.var-button--text { background-color: transparent;}.var-button--text:active { box-shadow: none;}.var-button--text-default { color: inherit;}.var-button--text-primary { color: var(--button-primary-color);}.var-button--text-info { color: var(--button-info-color);}.var-button--text-success { color: var(--button-success-color);}.var-button--text-warning { color: var(--button-warning-color);}.var-button--text-danger { color: var(--button-danger-color);}.var-button--text-disabled { color: var(--button-disabled-text-color);}.var-button--normal { height: var(--button-normal-height); padding: var(--button-normal-padding); font-size: var(--font-size-md);}.var-button--large { height: var(--button-large-height); padding: var(--button-large-padding); font-size: var(--font-size-lg);}.var-button--small { height: var(--button-small-height); padding: var(--button-small-padding); font-size: var(--font-size-sm);}.var-button--mini { height: var(--button-mini-height); padding: var(--button-mini-padding); font-size: var(--font-size-xs);}.var-button--round { padding: var(--button-round-padding); border-radius: 50%; height: auto;}.var-button--outline { border: thin solid currentColor;}.var-button--hidden { opacity: 0;}