@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/button/button.less

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

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

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

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

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

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

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

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

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

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

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

package/lib/card/style/less.js

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

package/lib/cell/Cell.js

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

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