@varlet/ui 1.23.4-alpha.4 → 1.23.4

package/lib/button/button.less

@@ -1,183 +0,0 @@
-@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;
-
-:root {
-  --button-default-color: @button-default-color;
-  --button-primary-color: @button-primary-color;
-  --button-danger-color: @button-danger-color;
-  --button-success-color: @button-success-color;
-  --button-warning-color: @button-warning-color;
-  --button-info-color: @button-info-color;
-  --button-disabled-color: @button-disabled-color;
-  --button-disabled-text-color: @button-disabled-text-color;
-  --button-border-radius: @button-border-radius;
-  --button-mini-padding: @button-mini-padding;
-  --button-small-padding: @button-small-padding;
-  --button-normal-padding: @button-normal-padding;
-  --button-large-padding: @button-large-padding;
-  --button-round-padding: @button-round-padding;
-  --button-mini-height: @button-mini-height;
-  --button-small-height: @button-small-height;
-  --button-normal-height: @button-normal-height;
-  --button-large-height: @button-large-height;
-}
-
-.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;
-
-  &: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);
-  }
-
-  &__loading {
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  }
-
-  &--default {
-    color: inherit;
-    background-color: var(--button-default-color);
-  }
-
-  &--primary {
-    color: #fff;
-    background-color: var(--button-primary-color);
-  }
-
-  &--info {
-    color: #fff;
-    background-color: var(--button-info-color);
-  }
-
-  &--success {
-    color: #fff;
-    background-color: var(--button-success-color);
-  }
-
-  &--warning {
-    color: #fff;
-    background-color: var(--button-warning-color);
-  }
-
-  &--danger {
-    color: #fff;
-    background-color: var(--button-danger-color);
-  }
-
-  &--disabled {
-    background-color: var(--button-disabled-color);
-    color: var(--button-disabled-text-color);
-    cursor: not-allowed;
-    box-shadow: none !important;
-  }
-
-  &--block {
-    width: 100%;
-  }
-
-  &--text {
-    background-color: transparent;
-
-    &:active {
-      box-shadow: none;
-    }
-  }
-
-  &--text-default {
-    color: inherit;
-  }
-
-  &--text-primary {
-    color: var(--button-primary-color);
-  }
-
-  &--text-info {
-    color: var(--button-info-color);
-  }
-
-  &--text-success {
-    color: var(--button-success-color);
-  }
-
-  &--text-warning {
-    color: var(--button-warning-color);
-  }
-
-  &--text-danger {
-    color: var(--button-danger-color);
-  }
-
-  &--text-disabled {
-    color: var(--button-disabled-text-color);
-  }
-
-  &--normal {
-    height: var(--button-normal-height);
-    padding: var(--button-normal-padding);
-    font-size: var(--font-size-md);
-  }
-
-  &--large {
-    height: var(--button-large-height);
-    padding: var(--button-large-padding);
-    font-size: var(--font-size-lg);
-  }
-
-  &--small {
-    height: var(--button-small-height);
-    padding: var(--button-small-padding);
-    font-size: var(--font-size-sm);
-  }
-
-  &--mini {
-    height: var(--button-mini-height);
-    padding: var(--button-mini-padding);
-    font-size: var(--font-size-xs);
-  }
-
-  &--round {
-    padding: var(--button-round-padding);
-    border-radius: 50%;
-    height: auto;
-  }
-
-  &--outline {
-    border: thin solid currentColor;
-  }
-
-  &--hidden {
-    opacity: 0;
-  }
-}

package/lib/button/index.js

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

package/lib/button/props.js

@@ -1,76 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = void 0;
-
-var _props = require("../loading/props");
-
-var _components = require("../utils/components");
-
-function typeValidator(type) {
-  return ['default', 'primary', 'info', 'success', 'warning', 'danger'].includes(type);
-}
-
-function sizeValidator(size) {
-  return ['normal', 'mini', 'small', 'large'].includes(size);
-}
-
-var props = {
-  type: {
-    type: String,
-    default: 'default',
-    validator: typeValidator
-  },
-  size: {
-    type: String,
-    default: 'normal',
-    validator: sizeValidator
-  },
-  loading: {
-    type: Boolean,
-    default: false
-  },
-  round: {
-    type: Boolean,
-    default: false
-  },
-  block: {
-    type: Boolean,
-    default: false
-  },
-  text: {
-    type: Boolean,
-    default: false
-  },
-  outline: {
-    type: Boolean,
-    default: false
-  },
-  disabled: {
-    type: Boolean,
-    default: false
-  },
-  ripple: {
-    type: Boolean,
-    default: true
-  },
-  color: {
-    type: String
-  },
-  textColor: {
-    type: String
-  },
-  loadingRadius: {
-    type: [Number, String],
-    default: 12
-  },
-  loadingType: (0, _components.pickProps)(_props.props, 'type'),
-  loadingSize: (0, _components.pickProps)(_props.props, 'size'),
-  onClick: {
-    type: Function
-  },
-  onTouchstart: {
-    type: Function
-  }
-};
-exports.props = props;

package/lib/button/style/index.js

@@ -1,6 +0,0 @@
-require('../../styles/common.css')
-require('../../styles/elevation.css')
-require('../../ripple/ripple.css')
-require('../../loading/loading.css')
-require('../button.css')
-require('../ButtonSfc.css')

package/lib/button/style/less.js

@@ -1,6 +0,0 @@
-require('../../styles/common.less')
-require('../../styles/elevation.less')
-require('../../ripple/ripple.less')
-require('../../loading/loading.less')
-require('../button.less')
-require('../ButtonSfc.less')

package/lib/card/Card.js

@@ -1,83 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _ripple = _interopRequireDefault(require("../ripple"));
-
-var _vue = require("vue");
-
-var _props = require("./props");
-
-var _elements = require("../utils/elements");
-
-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 = ["src", "alt"];
-var _hoisted_2 = {
-  key: 0,
-  class: "var-card__title"
-};
-var _hoisted_3 = {
-  key: 0,
-  class: "var-card__subtitle"
-};
-var _hoisted_4 = {
-  key: 0,
-  class: "var-card__description"
-};
-var _hoisted_5 = {
-  key: 0,
-  class: "var-card__footer"
-};
-
-function render(_ctx, _cache) {
-  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
-
-  return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-card", [_ctx.elevation ? "var-elevation--" + _ctx.elevation : 'var-elevation--2']]),
-    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "image", {}, () => [_ctx.src ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("img", {
-    key: 0,
-    class: "var-card__image",
-    style: (0, _vue.normalizeStyle)({
-      objectFit: _ctx.fit,
-      height: _ctx.toSizeUnit(_ctx.height)
-    }),
-    src: _ctx.src,
-    alt: _ctx.alt
-  }, null, 12
-  /* STYLE, PROPS */
-  , _hoisted_1)) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "title", {}, () => [_ctx.title ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, (0, _vue.toDisplayString)(_ctx.title), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "subtitle", {}, () => [_ctx.subtitle ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.subtitle), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), (0, _vue.renderSlot)(_ctx.$slots, "description", {}, () => [_ctx.description ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_4, (0, _vue.toDisplayString)(_ctx.description), 1
-  /* TEXT */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.extra ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_5, [(0, _vue.renderSlot)(_ctx.$slots, "extra")])) : (0, _vue.createCommentVNode)("v-if", true)], 2
-  /* CLASS */
-  )), [[_directive_ripple, {
-    disabled: !_ctx.ripple
-  }]]);
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarCard',
-  directives: {
-    Ripple: _ripple.default
-  },
-  props: _props.props,
-
-  setup() {
-    return {
-      toSizeUnit: _elements.toSizeUnit
-    };
-  }
-
-});
-
-exports.default = _default;

package/lib/card/card.css

@@ -1 +0,0 @@
-:root { --card-padding: 5px 0 15px 0; --card-background: #fff; --card-border-radius: 4px; --card-image-width: 100%; --card-image-height: 200px; --card-title-color: #333; --card-title-font-size: 20px; --card-title-padding: 0 12px; --card-title-margin: 10px 0 0 0; --card-subtitle-color: rgba(0, 0, 0, 0.6); --card-subtitle-font-size: 14px; --card-subtitle-padding: 0 13px; --card-subtitle-margin: 10px 0 0 0; --card-description-color: rgba(0, 0, 0, 0.6); --card-description-font-size: 14px; --card-description-margin: 20px 0 0 0; --card-description-padding: 0 13px; --card-footer-padding: 0 12px; --card-footer-margin: 30px 0 0px 0; --card-line-height: 22px;}.var-card { border-radius: var(--card-border-radius); overflow: hidden; padding: var(--card-padding); line-height: var(--card-line-height); background: var(--card-background); transition: background-color 0.25s;}.var-card__image { width: var(--card-image-width); height: var(--card-image-height); display: block;}.var-card__title { font-size: var(--card-title-font-size); padding: var(--card-title-padding); margin: var(--card-title-margin); color: var(--card-title-color);}.var-card__subtitle { font-size: var(--card-subtitle-font-size); color: var(--card-subtitle-color); padding: var(--card-subtitle-padding); margin: var(--card-subtitle-margin);}.var-card__description { font-size: var(--card-description-font-size); color: var(--card-description-color); margin: var(--card-description-margin); padding: var(--card-description-padding);}.var-card__footer { padding: var(--card-footer-padding); margin: var(--card-footer-margin);}

package/lib/card/card.less

@@ -1,84 +0,0 @@
-@card-padding: 5px 0 15px 0;
-@card-background: #fff;
-@card-border-radius: 4px;
-@card-image-width: 100%;
-@card-image-height: 200px;
-@card-title-color: #333;
-@card-title-font-size: 20px;
-@card-title-padding: 0 12px;
-@card-title-margin: 10px 0 0 0;
-@card-subtitle-color: rgba(0, 0, 0, 0.6);
-@card-subtitle-font-size: 14px;
-@card-subtitle-padding: 0 13px;
-@card-subtitle-margin: 10px 0 0 0;
-@card-description-color: rgba(0, 0, 0, 0.6);
-@card-description-font-size: 14px;
-@card-description-margin: 20px 0 0 0;
-@card-description-padding: 0 13px;
-@card-footer-padding: 0 12px;
-@card-footer-margin: 30px 0 0px 0;
-@card-line-height: 22px;
-
-:root {
-  --card-padding: @card-padding;
-  --card-background: @card-background;
-  --card-border-radius: @card-border-radius;
-  --card-image-width: @card-image-width;
-  --card-image-height: @card-image-height;
-  --card-title-color: @card-title-color;
-  --card-title-font-size: @card-title-font-size;
-  --card-title-padding: @card-title-padding;
-  --card-title-margin: @card-title-margin;
-  --card-subtitle-color: @card-subtitle-color;
-  --card-subtitle-font-size: @card-subtitle-font-size;
-  --card-subtitle-padding: @card-subtitle-padding;
-  --card-subtitle-margin: @card-subtitle-margin;
-  --card-description-color: @card-description-color;
-  --card-description-font-size: @card-description-font-size;
-  --card-description-margin: @card-description-margin;
-  --card-description-padding: @card-description-padding;
-  --card-footer-padding: @card-footer-padding;
-  --card-footer-margin: @card-footer-margin;
-  --card-line-height: @card-line-height;
-}
-
-.var-card {
-  border-radius: var(--card-border-radius);
-  overflow: hidden;
-  padding: var(--card-padding);
-  line-height: var(--card-line-height);
-  background: var(--card-background);
-  transition: background-color 0.25s;
-
-  &__image {
-    width: var(--card-image-width);
-    height: var(--card-image-height);
-    display: block;
-  }
-
-  &__title {
-    font-size: var(--card-title-font-size);
-    padding: var(--card-title-padding);
-    margin: var(--card-title-margin);
-    color: var(--card-title-color);
-  }
-
-  &__subtitle {
-    font-size: var(--card-subtitle-font-size);
-    color: var(--card-subtitle-color);
-    padding: var(--card-subtitle-padding);
-    margin: var(--card-subtitle-margin);
-  }
-
-  &__description {
-    font-size: var(--card-description-font-size);
-    color: var(--card-description-color);
-    margin: var(--card-description-margin);
-    padding: var(--card-description-padding);
-  }
-
-  &__footer {
-    padding: var(--card-footer-padding);
-    margin: var(--card-footer-margin);
-  }
-}

package/lib/card/index.js

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

package/lib/card/props.js

@@ -1,45 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.props = void 0;
-
-function fitValidator(fit) {
-  return ['fill', 'contain', 'cover', 'none', 'scale-down'].includes(fit);
-}
-
-var props = {
-  src: {
-    type: String
-  },
-  fit: {
-    type: String,
-    validator: fitValidator,
-    default: 'cover'
-  },
-  height: {
-    type: [String, Number]
-  },
-  alt: {
-    type: String
-  },
-  title: {
-    type: String
-  },
-  subtitle: {
-    type: String
-  },
-  description: {
-    type: String
-  },
-  elevation: {
-    type: [Number, String]
-  },
-  ripple: {
-    type: Boolean,
-    default: false
-  },
-  onClick: {
-    type: Function
-  }
-};
-exports.props = props;

package/lib/card/style/index.js

@@ -1,5 +0,0 @@
-require('../../styles/common.css')
-require('../../styles/elevation.css')
-require('../../ripple/ripple.css')
-require('../card.css')
-require('../CardSfc.css')

package/lib/card/style/less.js

@@ -1,5 +0,0 @@
-require('../../styles/common.less')
-require('../../styles/elevation.less')
-require('../../ripple/ripple.less')
-require('../card.less')
-require('../CardSfc.less')

package/lib/cell/Cell.js

@@ -1,68 +0,0 @@
-"use strict";
-
-exports.__esModule = true;
-exports.render = render;
-exports.default = void 0;
-
-var _vue = require("vue");
-
-var _props = require("./props");
-
-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-cell__content"
-};
-
-function render(_ctx, _cache) {
-  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
-
-  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    class: (0, _vue.normalizeClass)(["var-cell", [_ctx.border ? 'var-cell--border' : null]])
-  }, [_ctx.$slots.icon || _ctx.icon ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 0,
-    class: (0, _vue.normalizeClass)(["var-cell__icon", [_ctx.iconClass ? _ctx.iconClass : null]])
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "icon", {}, () => [(0, _vue.createVNode)(_component_var_icon, {
-    class: "var--flex",
-    name: _ctx.icon
-  }, null, 8
-  /* PROPS */
-  , ["name"])])], 2
-  /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
-    class: (0, _vue.normalizeClass)(["var-cell__title", [_ctx.titleClass ? _ctx.titleClass : null]])
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "default", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.title), 1
-  /* TEXT */
-  )])], 2
-  /* CLASS */
-  ), _ctx.$slots.desc || _ctx.desc ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 0,
-    class: (0, _vue.normalizeClass)(["var-cell__desc", [_ctx.descClass ? _ctx.descClass : null]])
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "desc", {}, () => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(_ctx.desc), 1
-  /* TEXT */
-  )])], 2
-  /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)]), _ctx.$slots.extra ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
-    key: 1,
-    class: (0, _vue.normalizeClass)(["var-cell__extra", [_ctx.extraClass ? _ctx.extraClass : null]])
-  }, [(0, _vue.renderSlot)(_ctx.$slots, "extra")], 2
-  /* CLASS */
-  )) : (0, _vue.createCommentVNode)("v-if", true)], 2
-  /* CLASS */
-  );
-}
-
-var _default = (0, _vue.defineComponent)({
-  render,
-  name: 'VarCell',
-  components: {
-    VarIcon: _icon.default
-  },
-  props: _props.props
-});
-
-exports.default = _default;

package/lib/cell/cell.css

@@ -1 +0,0 @@
-:root { --cell-font-size: var(--font-size-md); --cell-desc-font-size: var(--font-size-sm); --cell-desc-color: rgba(0, 0, 0, 0.6); --cell-padding: 10px 12px; --cell-min-height: 40px; --cell-border-color: #bcc2cb; --cell-border-left: 12px; --cell-border-right: 12px; --cell-icon-right: 8px; --cell-extra-left: 8px;}.var-cell { align-items: center; display: flex; min-height: var(--cell-min-height); outline: none; padding: var(--cell-padding); position: relative; box-sizing: border-box; font-size: var(--cell-font-size);}.var-cell--border::after { position: absolute; box-sizing: border-box; content: ' '; pointer-events: none; right: var(--cell-border-right); bottom: 0; left: var(--cell-border-left); border-bottom: 1px solid var(--cell-border-color); transform: scaleY(0.5);}.var-cell__icon { margin-right: var(--cell-icon-right); flex: 0;}.var-cell__content { flex: 1; overflow: hidden;}.var-cell__title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap;}.var-cell__desc { font-size: var(--cell-desc-font-size); color: var(--cell-desc-color);}.var-cell__extra { flex: 0; margin-left: var(--cell-extra-left);}