@varlet/ui 1.23.4 → 1.23.5

package/lib/checkbox/checkbox.less

@@ -0,0 +1,78 @@
+@checkbox-checked-color: var(--color-primary);
+@checkbox-unchecked-color: #555;
+@checkbox-disabled-color: var(--color-text-disabled);
+@checkbox-error-color: var(--color-danger);
+@checkbox-action-padding: 6px;
+@checkbox-icon-size: 24px;
+
+:root {
+  --checkbox-checked-color: @checkbox-checked-color;
+  --checkbox-unchecked-color: @checkbox-unchecked-color;
+  --checkbox-disabled-color: @checkbox-disabled-color;
+  --checkbox-error-color: @checkbox-error-color;
+  --checkbox-action-padding: @checkbox-action-padding;
+  --checkbox-icon-size: @checkbox-icon-size;
+}
+
+@keyframes var-vibrate-animation {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  50% {
+    opacity: 0.8;
+    transform: scale(0.8);
+  }
+
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+
+.var-checkbox {
+  display: flex;
+  align-items: center;
+  transform: translateX(calc(-1 * var(--checkbox-action-padding)));
+  cursor: pointer;
+  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+
+  &__wrap {
+    display: inline-flex;
+    flex-direction: column;
+  }
+
+  &__action {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: var(--checkbox-action-padding);
+    border-radius: 50%;
+  }
+
+  &__icon[var-checkbox-cover] {
+    display: block;
+    font-size: var(--checkbox-icon-size);
+  }
+
+  &--with-animation {
+    animation: var-vibrate-animation 0.25s;
+  }
+
+  &--checked {
+    color: var(--checkbox-checked-color);
+  }
+
+  &--unchecked {
+    color: var(--checkbox-unchecked-color);
+  }
+
+  &--disabled {
+    color: var(--checkbox-disabled-color);
+  }
+
+  &--error {
+    color: var(--checkbox-error-color);
+  }
+}

package/lib/checkbox/index.js

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

package/lib/checkbox/props.js

@@ -0,0 +1,56 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: false
+  },
+  checkedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: true
+  },
+  uncheckedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: false
+  },
+  checkedColor: {
+    type: String
+  },
+  uncheckedColor: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  iconSize: {
+    type: [String, Number]
+  },
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  validateTrigger: {
+    type: Array,
+    default: ['onChange']
+  },
+  rules: {
+    type: Array
+  },
+  onClick: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/checkbox/provide.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCheckboxGroup = useCheckboxGroup;
+
+var _components = require("../utils/components");
+
+var _provide = require("../checkbox-group/provide");
+
+function useCheckboxGroup() {
+  var {
+    bindParent,
+    parentProvider
+  } = (0, _components.useParent)(_provide.CHECKBOX_GROUP_BIND_CHECKBOX_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.CHECKBOX_GROUP_COUNT_CHECKBOX_KEY);
+  return {
+    index,
+    checkboxGroup: parentProvider,
+    bindCheckboxGroup: bindParent
+  };
+}

package/lib/checkbox/style/index.js

@@ -0,0 +1,5 @@
+require('../../styles/common.css')
+require('../../form-details/formDetails.css')
+require('../../icon/icon.css')
+require('../checkbox.css')
+require('../CheckboxSfc.css')

package/lib/checkbox/style/less.js

@@ -0,0 +1,5 @@
+require('../../styles/common.less')
+require('../../form-details/formDetails.less')
+require('../../icon/icon.less')
+require('../checkbox.less')
+require('../CheckboxSfc.less')

package/lib/checkbox-group/CheckboxGroup.js

@@ -0,0 +1,181 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _provide = require("./provide");
+
+var _provide2 = require("../form/provide");
+
+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-checkbox-group__wrap"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-checkbox-group", ["var-checkbox-group--" + _ctx.direction]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+  /* CLASS */
+  ), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage
+  }, null, 8
+  /* PROPS */
+  , ["error-message"])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarCheckboxGroup',
+  components: {
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var max = (0, _vue.computed)(() => props.max);
+    var checkedCount = (0, _vue.computed)(() => props.modelValue.length);
+    var {
+      length,
+      checkboxes,
+      bindCheckboxes
+    } = (0, _provide.useCheckboxes)();
+    var {
+      bindForm
+    } = (0, _provide2.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+    var checkboxGroupErrorMessage = (0, _vue.computed)(() => errorMessage.value);
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    };
+
+    var change = changedModelValue => {
+      var _props$onUpdateModel;
+
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, changedModelValue);
+      props.onChange == null ? void 0 : props.onChange(changedModelValue);
+      validateWithTrigger('onChange');
+    };
+
+    var onChecked = changedValue => {
+      var {
+        modelValue
+      } = props;
+
+      if (!modelValue.includes(changedValue)) {
+        change([...modelValue, changedValue]);
+      }
+    };
+
+    var onUnchecked = changedValue => {
+      var {
+        modelValue
+      } = props;
+
+      if (!modelValue.includes(changedValue)) {
+        return;
+      }
+
+      change(modelValue.filter(value => value !== changedValue));
+    };
+
+    var syncCheckboxes = () => checkboxes.forEach(({
+      sync
+    }) => sync(props.modelValue)); // expose
+
+
+    var checkAll = () => {
+      var _props$onUpdateModel2;
+
+      var checkedValues = checkboxes.map(({
+        checkedValue
+      }) => checkedValue.value);
+      var changedModelValue = (0, _shared.uniq)(checkedValues);
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
+      return changedModelValue;
+    }; // expose
+
+
+    var inverseAll = () => {
+      var _props$onUpdateModel3;
+
+      var checkedValues = checkboxes.filter(({
+        checked
+      }) => !checked.value).map(({
+        checkedValue
+      }) => checkedValue.value);
+      var changedModelValue = (0, _shared.uniq)(checkedValues);
+      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, changedModelValue);
+      return changedModelValue;
+    }; // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel4;
+
+      (_props$onUpdateModel4 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel4.call(props, []);
+      resetValidation();
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue);
+
+    (0, _vue.watch)(() => props.modelValue, syncCheckboxes, {
+      deep: true
+    });
+    (0, _vue.watch)(() => length.value, syncCheckboxes);
+    var checkboxGroupProvider = {
+      max,
+      checkedCount,
+      onChecked,
+      onUnchecked,
+      validate,
+      resetValidation,
+      reset,
+      errorMessage: checkboxGroupErrorMessage
+    };
+    bindCheckboxes(checkboxGroupProvider);
+    bindForm == null ? void 0 : bindForm(checkboxGroupProvider);
+    return {
+      errorMessage,
+      checkAll,
+      inverseAll,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/checkbox-group/checkboxGroup.css

@@ -0,0 +1 @@
+.var-checkbox-group { display: flex; flex-wrap: wrap;}.var-checkbox-group--horizontal { flex-direction: row;}.var-checkbox-group--vertical { flex-direction: column;}

package/lib/checkbox-group/checkboxGroup.less

@@ -0,0 +1,12 @@
+.var-checkbox-group {
+  display: flex;
+  flex-wrap: wrap;
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  &--vertical {
+    flex-direction: column;
+  }
+}

package/lib/checkbox-group/index.js

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

package/lib/checkbox-group/props.js

@@ -0,0 +1,38 @@
+"use strict";
+
+exports.__esModule = true;
+exports.directionValidator = directionValidator;
+exports.props = void 0;
+
+function directionValidator(direction) {
+  return ['horizontal', 'vertical'].includes(direction);
+}
+
+var props = {
+  modelValue: {
+    type: Array,
+    default: () => []
+  },
+  max: {
+    type: [String, Number]
+  },
+  direction: {
+    type: String,
+    default: 'horizontal',
+    validator: directionValidator
+  },
+  validateTrigger: {
+    type: Array,
+    default: ['onChange']
+  },
+  rules: {
+    type: Array
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/checkbox-group/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useCheckboxes = useCheckboxes;
+exports.CHECKBOX_GROUP_COUNT_CHECKBOX_KEY = exports.CHECKBOX_GROUP_BIND_CHECKBOX_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var CHECKBOX_GROUP_BIND_CHECKBOX_KEY = Symbol('CHECKBOX_GROUP_BIND_CHECKBOX_KEY');
+exports.CHECKBOX_GROUP_BIND_CHECKBOX_KEY = CHECKBOX_GROUP_BIND_CHECKBOX_KEY;
+var CHECKBOX_GROUP_COUNT_CHECKBOX_KEY = Symbol('CHECKBOX_GROUP_COUNT_CHECKBOX_KEY');
+exports.CHECKBOX_GROUP_COUNT_CHECKBOX_KEY = CHECKBOX_GROUP_COUNT_CHECKBOX_KEY;
+
+function useCheckboxes() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(CHECKBOX_GROUP_BIND_CHECKBOX_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(CHECKBOX_GROUP_COUNT_CHECKBOX_KEY);
+  return {
+    length,
+    checkboxes: childProviders,
+    bindCheckboxes: bindChildren
+  };
+}

package/lib/checkbox-group/style/index.js

@@ -0,0 +1,4 @@
+require('../../styles/common.css')
+require('../../form-details/formDetails.css')
+require('../checkboxGroup.css')
+require('../CheckboxGroupSfc.css')

package/lib/checkbox-group/style/less.js

@@ -0,0 +1,4 @@
+require('../../styles/common.less')
+require('../../form-details/formDetails.less')
+require('../checkboxGroup.less')
+require('../CheckboxGroupSfc.less')

package/lib/chip/Chip.js

@@ -0,0 +1,95 @@
+"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");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  return (0, _vue.openBlock)(), (0, _vue.createBlock)(_vue.Transition, {
+    name: "var-fade"
+  }, {
+    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("span", (0, _vue.mergeProps)({
+      class: ["var-chip var--box", _ctx.contentClass],
+      style: _ctx.chipStyles
+    }, _ctx.$attrs), [(0, _vue.renderSlot)(_ctx.$slots, "left"), (0, _vue.createElementVNode)("span", {
+      class: (0, _vue.normalizeClass)(["var-chip--text-" + _ctx.size])
+    }, [(0, _vue.renderSlot)(_ctx.$slots, "default")], 2
+    /* CLASS */
+    ), (0, _vue.renderSlot)(_ctx.$slots, "right"), _ctx.closable ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", {
+      key: 0,
+      class: "var-chip--close",
+      onClick: _cache[0] || (_cache[0] = (...args) => _ctx.onClose && _ctx.onClose(...args))
+    }, [(0, _vue.createVNode)(_component_var_icon, {
+      name: "" + (_ctx.iconName ? _ctx.iconName : 'close-circle')
+    }, null, 8
+    /* PROPS */
+    , ["name"])])) : (0, _vue.createCommentVNode)("v-if", true)], 16
+    /* FULL_PROPS */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  });
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarChip',
+  components: {
+    VarIcon: _icon.default
+  },
+  inheritAttrs: false,
+  props: _props.props,
+
+  setup(props) {
+    var chipStyles = (0, _vue.computed)(() => {
+      var {
+        plain,
+        textColor,
+        color
+      } = props;
+
+      if (plain) {
+        return {
+          color: textColor || color,
+          borderColor: color
+        };
+      }
+
+      return {
+        color: textColor,
+        background: color
+      };
+    });
+    var contentClass = (0, _vue.computed)(() => {
+      var {
+        size,
+        block,
+        type,
+        plain,
+        round
+      } = props;
+      var blockClass = block ? 'var--flex' : 'var--inline-flex';
+      var plainTypeClass = plain ? "var-chip--plain var-chip--plain-" + type : "var-chip--" + type;
+      var roundClass = round && 'var-chip--round';
+      return ["var-chip--" + size, blockClass, plainTypeClass, roundClass];
+    });
+    return {
+      chipStyles,
+      contentClass
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/chip/chip.css

@@ -0,0 +1 @@
+:root { --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;}.var-fade-leave-to { opacity: 0;}.var-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;}.var-chip--default { color: inherit; background: var(--chip-default-color);}.var-chip--primary { color: #fff; background-color: var(--chip-primary-color);}.var-chip--info { color: #fff; background-color: var(--chip-info-color);}.var-chip--success { color: #fff; background-color: var(--chip-success-color);}.var-chip--warning { color: #fff; background-color: var(--chip-warning-color);}.var-chip--danger { color: #fff; background-color: var(--chip-danger-color);}.var-chip--plain { background-color: transparent;}.var-chip--plain:active { box-shadow: none;}.var-chip--plain-default { color: inherit; border-color: currentColor;}.var-chip--plain-primary { color: var(--chip-primary-color); border-color: currentColor;}.var-chip--plain-info { color: var(--chip-info-color); border-color: currentColor;}.var-chip--plain-success { color: var(--chip-success-color); border-color: currentColor;}.var-chip--plain-warning { color: var(--chip-warning-color); border-color: currentColor;}.var-chip--plain-danger { color: var(--chip-danger-color); border-color: currentColor;}.var-chip--round { border-radius: var(--chip-round-radius);}.var-chip--normal { font-size: var(--font-size-md); padding: var(--chip-normal-padding); height: var(--chip-normal-height);}.var-chip--large { padding: var(--chip-large-padding); font-size: var(--font-size-lg); height: var(--chip-large-height);}.var-chip--small { padding: var(--chip-small-padding); font-size: var(--font-size-sm); height: var(--chip-small-height);}.var-chip--mini { padding: var(--chip-mini-padding); font-size: var(--font-size-xs); height: var(--chip-mini-height);}.var-chip--close { cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-chip--text-large { margin: var(--chip-text-large-margin);}.var-chip--text-normal { margin: var(--chip-text-normal-margin);}.var-chip--text-small { margin: var(--chip-text-small-margin);}.var-chip--text-mini { margin: var(--chip-text-mini-margin);}