@varlet/ui 1.23.3-alpha.1 → 1.23.4-alpha.16

package/lib/chip/chip.less

@@ -0,0 +1,182 @@
+@chip-default-color: #e0e0e0;
+@chip-primary-color: var(--color-primary);
+@chip-danger-color: var(--color-danger);
+@chip-success-color: var(--color-success);
+@chip-warning-color: var(--color-warning);
+@chip-info-color: var(--color-info);
+@chip-border-radius: 2px;
+@chip-normal-height: 32px;
+@chip-large-height: 40px;
+@chip-small-height: 24px;
+@chip-mini-height: 16px;
+@chip-round-radius: 100px;
+@chip-normal-padding: 0px 10px;
+@chip-large-padding: 0px 17px;
+@chip-small-padding: 0px 6px;
+@chip-mini-padding: 0px 4px;
+@chip-text-normal-margin: 0 5px;
+@chip-text-large-margin: 0 5px;
+@chip-text-small-margin: 0 3px;
+@chip-text-mini-margin: 0 2px;
+
+:root {
+  --chip-default-color: @chip-default-color;
+  --chip-primary-color: @chip-primary-color;
+  --chip-danger-color: @chip-danger-color;
+  --chip-success-color: @chip-success-color;
+  --chip-warning-color: @chip-warning-color;
+  --chip-info-color: @chip-info-color;
+  --chip-border-radius: @chip-border-radius;
+  --chip-normal-height: @chip-normal-height;
+  --chip-large-height: @chip-large-height;
+  --chip-small-height: @chip-small-height;
+  --chip-mini-height: @chip-mini-height;
+  --chip-round-radius: @chip-round-radius;
+  --chip-normal-padding: @chip-normal-padding;
+  --chip-large-padding: @chip-large-padding;
+  --chip-small-padding: @chip-small-padding;
+  --chip-mini-padding: @chip-mini-padding;
+  --chip-text-normal-margin: @chip-text-normal-margin;
+  --chip-text-large-margin: @chip-text-large-margin;
+  --chip-text-small-margin: @chip-text-small-margin;
+  --chip-text-mini-margin: @chip-text-mini-margin;
+}
+
+.var {
+  &-fade-leave-to {
+    opacity: 0;
+  }
+
+  &-fade-leave-active {
+    transition: opacity 0.3s;
+  }
+}
+
+.var-chip {
+  justify-content: center;
+  align-items: center;
+  font-family: Roboto, sans-serif;
+  border-radius: var(--chip-border-radius);
+  cursor: default;
+  border: thin solid transparent;
+  vertical-align: middle;
+  line-height: 1;
+  transition: background-color 0.25s;
+
+  &--default {
+    color: inherit;
+    background: var(--chip-default-color);
+  }
+
+  &--primary {
+    color: #fff;
+    background-color: var(--chip-primary-color);
+  }
+
+  &--info {
+    color: #fff;
+    background-color: var(--chip-info-color);
+  }
+
+  &--success {
+    color: #fff;
+    background-color: var(--chip-success-color);
+  }
+
+  &--warning {
+    color: #fff;
+    background-color: var(--chip-warning-color);
+  }
+
+  &--danger {
+    color: #fff;
+    background-color: var(--chip-danger-color);
+  }
+
+  &--plain {
+    background-color: transparent;
+
+    &:active {
+      box-shadow: none;
+    }
+  }
+
+  &--plain-default {
+    color: inherit;
+    border-color: currentColor;
+  }
+
+  &--plain-primary {
+    color: var(--chip-primary-color);
+    border-color: currentColor;
+  }
+
+  &--plain-info {
+    color: var(--chip-info-color);
+    border-color: currentColor;
+  }
+
+  &--plain-success {
+    color: var(--chip-success-color);
+    border-color: currentColor;
+  }
+
+  &--plain-warning {
+    color: var(--chip-warning-color);
+    border-color: currentColor;
+  }
+
+  &--plain-danger {
+    color: var(--chip-danger-color);
+    border-color: currentColor;
+  }
+
+  &--round {
+    border-radius: var(--chip-round-radius);
+  }
+
+  &--normal {
+    font-size: var(--font-size-md);
+    padding: var(--chip-normal-padding);
+    height: var(--chip-normal-height);
+  }
+
+  &--large {
+    padding: var(--chip-large-padding);
+    font-size: var(--font-size-lg);
+    height: var(--chip-large-height);
+  }
+
+  &--small {
+    padding: var(--chip-small-padding);
+    font-size: var(--font-size-sm);
+    height: var(--chip-small-height);
+  }
+
+  &--mini {
+    padding: var(--chip-mini-padding);
+    font-size: var(--font-size-xs);
+    height: var(--chip-mini-height);
+  }
+
+  &--close {
+    cursor: pointer;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+  }
+
+  &--text-large {
+    margin: var(--chip-text-large-margin);
+  }
+
+  &--text-normal {
+    margin: var(--chip-text-normal-margin);
+  }
+
+  &--text-small {
+    margin: var(--chip-text-small-margin);
+  }
+
+  &--text-mini {
+    margin: var(--chip-text-mini-margin);
+  }
+}

package/lib/chip/index.js

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

package/lib/chip/props.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+
+var _components = require("../utils/components");
+
+var _props = require("../icon/props");
+
+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
+  },
+  color: {
+    type: String
+  },
+  textColor: {
+    type: String
+  },
+  iconName: (0, _components.pickProps)(_props.props, 'name'),
+  plain: {
+    type: Boolean,
+    default: false
+  },
+  round: {
+    type: Boolean,
+    default: true
+  },
+  block: {
+    type: Boolean,
+    default: false
+  },
+  closable: {
+    type: Boolean,
+    default: false
+  },
+  onClose: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/chip/style/index.js

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

package/lib/chip/style/less.js

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

package/lib/col/Col.js

@@ -0,0 +1,68 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _shared = require("../utils/shared");
+
+var _props = require("./props");
+
+var _provide = require("./provide");
+
+var _elements = require("../utils/elements");
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-col var--box", [_ctx.span ? "var-col--span-" + _ctx.toNumber(_ctx.span) : null, _ctx.offset ? "var-col--offset-" + _ctx.toNumber(_ctx.offset) : null]]),
+    style: (0, _vue.normalizeStyle)({
+      paddingLeft: _ctx.toSizeUnit(_ctx.padding.left),
+      paddingRight: _ctx.toSizeUnit(_ctx.padding.right)
+    }),
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClick && _ctx.onClick(...args))
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 6
+  /* CLASS, STYLE */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarCol',
+  props: _props.props,
+
+  setup(props) {
+    var padding = (0, _vue.ref)({
+      left: 0,
+      right: 0
+    });
+    var span = (0, _vue.computed)(() => (0, _shared.toNumber)(props.span));
+    var offset = (0, _vue.computed)(() => (0, _shared.toNumber)(props.offset));
+    var {
+      row,
+      bindRow
+    } = (0, _provide.useRow)();
+    var colProvider = {
+      span,
+      offset,
+
+      setPadding(pad) {
+        padding.value = pad;
+      }
+
+    };
+    (0, _vue.watch)([() => props.span, () => props.offset], () => {
+      row == null ? void 0 : row.computePadding();
+    });
+    bindRow == null ? void 0 : bindRow(colProvider);
+    return {
+      padding,
+      toNumber: _shared.toNumber,
+      toSizeUnit: _elements.toSizeUnit
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/col/col.css

@@ -0,0 +1 @@
+.var-col { transition: all 0.25s;}.var-col--span-1 { flex: 0 0 4.16666667%;}.var-col--offset-1 { margin-left: 4.16666667%;}.var-col--span-2 { flex: 0 0 8.33333333%;}.var-col--offset-2 { margin-left: 8.33333333%;}.var-col--span-3 { flex: 0 0 12.5%;}.var-col--offset-3 { margin-left: 12.5%;}.var-col--span-4 { flex: 0 0 16.66666667%;}.var-col--offset-4 { margin-left: 16.66666667%;}.var-col--span-5 { flex: 0 0 20.83333333%;}.var-col--offset-5 { margin-left: 20.83333333%;}.var-col--span-6 { flex: 0 0 25%;}.var-col--offset-6 { margin-left: 25%;}.var-col--span-7 { flex: 0 0 29.16666667%;}.var-col--offset-7 { margin-left: 29.16666667%;}.var-col--span-8 { flex: 0 0 33.33333333%;}.var-col--offset-8 { margin-left: 33.33333333%;}.var-col--span-9 { flex: 0 0 37.5%;}.var-col--offset-9 { margin-left: 37.5%;}.var-col--span-10 { flex: 0 0 41.66666667%;}.var-col--offset-10 { margin-left: 41.66666667%;}.var-col--span-11 { flex: 0 0 45.83333333%;}.var-col--offset-11 { margin-left: 45.83333333%;}.var-col--span-12 { flex: 0 0 50%;}.var-col--offset-12 { margin-left: 50%;}.var-col--span-13 { flex: 0 0 54.16666667%;}.var-col--offset-13 { margin-left: 54.16666667%;}.var-col--span-14 { flex: 0 0 58.33333333%;}.var-col--offset-14 { margin-left: 58.33333333%;}.var-col--span-15 { flex: 0 0 62.5%;}.var-col--offset-15 { margin-left: 62.5%;}.var-col--span-16 { flex: 0 0 66.66666667%;}.var-col--offset-16 { margin-left: 66.66666667%;}.var-col--span-17 { flex: 0 0 70.83333333%;}.var-col--offset-17 { margin-left: 70.83333333%;}.var-col--span-18 { flex: 0 0 75%;}.var-col--offset-18 { margin-left: 75%;}.var-col--span-19 { flex: 0 0 79.16666667%;}.var-col--offset-19 { margin-left: 79.16666667%;}.var-col--span-20 { flex: 0 0 83.33333333%;}.var-col--offset-20 { margin-left: 83.33333333%;}.var-col--span-21 { flex: 0 0 87.5%;}.var-col--offset-21 { margin-left: 87.5%;}.var-col--span-22 { flex: 0 0 91.66666667%;}.var-col--offset-22 { margin-left: 91.66666667%;}.var-col--span-23 { flex: 0 0 95.83333333%;}.var-col--offset-23 { margin-left: 95.83333333%;}.var-col--span-24 { flex: 0 0 100%;}.var-col--offset-24 { margin-left: 100%;}

package/lib/col/col.less

@@ -0,0 +1,17 @@
+.var-col {
+  transition: all 0.25s;
+}
+
+.create-col(@count, @i) when (@i =< @count) {
+  .var-col--span-@{i} {
+    flex: 0 0 @i * (100% / 24);
+  }
+
+  .var-col--offset-@{i} {
+    margin-left: @i * (100% / 24);
+  }
+
+  .create-col(@count, @i + 1);
+}
+
+.create-col(24, 1);

package/lib/col/index.js

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

package/lib/col/props.js

@@ -0,0 +1,18 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  span: {
+    type: [String, Number],
+    default: 24
+  },
+  offset: {
+    type: [String, Number],
+    default: 0
+  },
+  onClick: {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/col/provide.js

@@ -0,0 +1,28 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useRow = useRow;
+
+var _components = require("../utils/components");
+
+var _provide = require("../row/provide");
+
+function useRow() {
+  var {
+    parentProvider,
+    bindParent
+  } = (0, _components.useParent)(_provide.ROW_BIND_COL_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.ROW_COUNT_COL_KEY);
+
+  if (!parentProvider || !bindParent || !index) {
+    console.warn('col must in row');
+  }
+
+  return {
+    index,
+    row: parentProvider,
+    bindRow: bindParent
+  };
+}

package/lib/col/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../col.css')
+require('../ColSfc.css')

package/lib/col/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../col.less')
+require('../ColSfc.less')

package/lib/collapse/Collapse.js

@@ -0,0 +1,126 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _vue = require("vue");
+
+var _provide = require("./provide");
+
+var _props = require("./props");
+
+var _shared = require("../utils/shared");
+
+var _withScopeId = n => ((0, _vue.pushScopeId)(""), n = n(), (0, _vue.popScopeId)(), n);
+
+var _hoisted_1 = {
+  class: "var-collapse"
+};
+
+function render(_ctx, _cache) {
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.renderSlot)(_ctx.$slots, "default")]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarCollapse',
+  props: _props.props,
+
+  setup(props) {
+    var {
+      length,
+      collapseItem,
+      bindCollapseItem
+    } = (0, _provide.useCollapseItem)();
+    var active = (0, _vue.computed)(() => props.modelValue);
+    var offset = (0, _vue.computed)(() => props.offset);
+
+    var checkValue = () => {
+      if (!props.accordion && !(0, _shared.isArray)(props.modelValue)) {
+        console.error('[Varlet] Collapse: type of prop "modelValue" should be an Array');
+        return false;
+      }
+
+      if (props.accordion && (0, _shared.isArray)(props.modelValue)) {
+        console.error('[Varlet] Collapse: type of prop "modelValue" should be a String or Number');
+        return false;
+      }
+
+      return true;
+    };
+
+    var getValue = (value, isExpand) => {
+      if (!checkValue()) return;
+      if (isExpand) return props.accordion ? value : [...props.modelValue, value];
+      return props.accordion ? null : props.modelValue.filter(name => name !== value);
+    };
+
+    var updateItem = (value, isExpand) => {
+      var _props$onUpdateModel;
+
+      var modelValue = getValue(value, isExpand);
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, modelValue);
+      props.onChange == null ? void 0 : props.onChange(modelValue);
+    };
+
+    var matchName = () => {
+      if (props.accordion) {
+        return collapseItem.find(({
+          name
+        }) => props.modelValue === name.value);
+      }
+
+      var filterItem = collapseItem.filter(({
+        name
+      }) => {
+        if (name.value === undefined) return false;
+        return props.modelValue.includes(name.value);
+      });
+      return filterItem.length ? filterItem : undefined;
+    };
+
+    var matchIndex = () => {
+      if (props.accordion) {
+        return collapseItem.find(({
+          index,
+          name
+        }) => name.value === undefined ? props.modelValue === index.value : false);
+      }
+
+      return collapseItem.filter(({
+        index,
+        name
+      }) => name.value === undefined ? props.modelValue.includes(index.value) : false);
+    };
+
+    var resize = () => {
+      if (!checkValue()) return;
+      var matchProviders = matchName() || matchIndex();
+
+      if (props.accordion && !matchProviders || !props.accordion && !matchProviders.length) {
+        collapseItem.forEach(provider => {
+          provider.init(props.accordion, false);
+        });
+        return;
+      }
+
+      collapseItem.forEach(provider => {
+        var isShow = props.accordion ? matchProviders === provider : matchProviders.includes(provider);
+        provider.init(props.accordion, isShow);
+      });
+    };
+
+    var collapseProvider = {
+      active,
+      offset,
+      updateItem
+    };
+    bindCollapseItem(collapseProvider);
+    (0, _vue.watch)(() => length.value, () => (0, _vue.nextTick)().then(resize));
+    (0, _vue.watch)(() => props.modelValue, () => (0, _vue.nextTick)().then(resize));
+  }
+
+});
+
+exports.default = _default;

package/lib/collapse/CollapseSfc.css

@@ -0,0 +1 @@
+.var-collapse { position: relative;}

package/lib/collapse/CollapseSfc.less

@@ -0,0 +1 @@
+.var-collapse { position: relative;}

package/lib/collapse/index.js

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

package/lib/collapse/props.js

@@ -0,0 +1,24 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: [Array, String, Number]
+  },
+  accordion: {
+    type: Boolean,
+    default: false
+  },
+  offset: {
+    type: Boolean,
+    default: true
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/collapse/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCollapseItem = useCollapseItem;
+exports.COLLAPSE_COUNT_COLLAPSE_ITEM_KEY = exports.COLLAPSE_BIND_COLLAPSE_ITEM_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var COLLAPSE_BIND_COLLAPSE_ITEM_KEY = Symbol('COLLAPSE_BIND_COLLAPSE_ITEM_KEY');
+exports.COLLAPSE_BIND_COLLAPSE_ITEM_KEY = COLLAPSE_BIND_COLLAPSE_ITEM_KEY;
+var COLLAPSE_COUNT_COLLAPSE_ITEM_KEY = Symbol('COLLAPSE_COUNT_COLLAPSE_ITEM_KEY');
+exports.COLLAPSE_COUNT_COLLAPSE_ITEM_KEY = COLLAPSE_COUNT_COLLAPSE_ITEM_KEY;
+
+function useCollapseItem() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(COLLAPSE_BIND_COLLAPSE_ITEM_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(COLLAPSE_COUNT_COLLAPSE_ITEM_KEY);
+  return {
+    length,
+    collapseItem: childProviders,
+    bindCollapseItem: bindChildren
+  };
+}

package/lib/collapse/style/index.js

@@ -0,0 +1,3 @@
+require('../../styles/common.css')
+require('../../styles/elevation.css')
+require('../CollapseSfc.css')

package/lib/collapse/style/less.js

@@ -0,0 +1,3 @@
+require('../../styles/common.less')
+require('../../styles/elevation.less')
+require('../CollapseSfc.less')