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

package/lib/cell/cell.less

@@ -0,0 +1,74 @@
+@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;
+
+:root {
+  --cell-font-size: @cell-font-size;
+  --cell-desc-font-size: @cell-desc-font-size;
+  --cell-desc-color: @cell-desc-color;
+  --cell-padding: @cell-padding;
+  --cell-min-height: @cell-min-height;
+  --cell-border-color: @cell-border-color;
+  --cell-border-left: @cell-border-left;
+  --cell-border-right: @cell-border-right;
+  --cell-icon-right: @cell-icon-right;
+  --cell-extra-left: @cell-extra-left;
+}
+
+.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);
+
+  &--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);
+    }
+  }
+
+  &__icon {
+    margin-right: var(--cell-icon-right);
+    flex: 0;
+  }
+
+  &__content {
+    flex: 1;
+    overflow: hidden;
+  }
+
+  &__title {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  &__desc {
+    font-size: var(--cell-desc-font-size);
+    color: var(--cell-desc-color);
+  }
+
+  &__extra {
+    flex: 0;
+    margin-left: var(--cell-extra-left);
+  }
+}

package/lib/cell/index.js

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

package/lib/cell/props.js

@@ -0,0 +1,32 @@
+"use strict";
+
+exports.__esModule = true;
+exports.props = void 0;
+var props = {
+  title: {
+    type: [Number, String]
+  },
+  icon: {
+    type: String
+  },
+  desc: {
+    type: String
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  iconClass: {
+    type: String
+  },
+  titleClass: {
+    type: String
+  },
+  descClass: {
+    type: String
+  },
+  extraClass: {
+    type: String
+  }
+};
+exports.props = props;

package/lib/cell/style/index.js

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

package/lib/cell/style/less.js

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

package/lib/checkbox/Checkbox.js

@@ -0,0 +1,232 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _ripple = _interopRequireDefault(require("../ripple"));
+
+var _vue = require("vue");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _provide = require("./provide");
+
+var _provide2 = require("../form/provide");
+
+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"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  var _directive_ripple = (0, _vue.resolveDirective)("ripple");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: "var-checkbox__wrap",
+    onClick: _cache[0] || (_cache[0] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.createElementVNode)("div", _hoisted_1, [(0, _vue.withDirectives)((0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-checkbox__action", [_ctx.checked ? 'var-checkbox--checked' : 'var-checkbox--unchecked', _ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor
+    })
+  }, [_ctx.checked ? (0, _vue.renderSlot)(_ctx.$slots, "checked-icon", {
+    key: 0
+  }, () => [(0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    name: "checkbox-marked",
+    size: _ctx.iconSize,
+    "var-checkbox-cover": ""
+  }, null, 8
+  /* PROPS */
+  , ["class", "size"])]) : (0, _vue.renderSlot)(_ctx.$slots, "unchecked-icon", {
+    key: 1
+  }, () => [(0, _vue.createVNode)(_component_var_icon, {
+    class: (0, _vue.normalizeClass)(["var-checkbox__icon", [_ctx.withAnimation ? 'var-checkbox--with-animation' : null]]),
+    name: "checkbox-blank-outline",
+    size: _ctx.iconSize,
+    "var-checkbox-cover": ""
+  }, null, 8
+  /* PROPS */
+  , ["class", "size"])])], 6
+  /* CLASS, STYLE */
+  ), [[_directive_ripple, {
+    disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
+  }]]), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-checkbox__text", [_ctx.errorMessage || _ctx.checkboxGroupErrorMessage ? 'var-checkbox--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-checkbox--disabled' : null]])
+  }, [(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: 'VarCheckbox',
+  directives: {
+    Ripple: _ripple.default
+  },
+  components: {
+    VarIcon: _icon.default,
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var value = (0, _vue.ref)(false);
+    var checked = (0, _vue.computed)(() => value.value === props.checkedValue);
+    var checkedValue = (0, _vue.computed)(() => props.checkedValue);
+    var withAnimation = (0, _vue.ref)(false);
+    var {
+      checkboxGroup,
+      bindCheckboxGroup
+    } = (0, _provide.useCheckboxGroup)();
+    var {
+      form,
+      bindForm
+    } = (0, _provide2.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    };
+
+    var change = changedValue => {
+      var _props$onUpdateModel;
+
+      value.value = changedValue;
+      var {
+        checkedValue,
+        onChange
+      } = props;
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, value.value);
+      onChange == null ? void 0 : onChange(value.value);
+      validateWithTrigger('onChange');
+      changedValue === checkedValue ? checkboxGroup == null ? void 0 : checkboxGroup.onChecked(checkedValue) : checkboxGroup == null ? void 0 : checkboxGroup.onUnchecked(checkedValue);
+    };
+
+    var handleClick = e => {
+      var {
+        disabled,
+        readonly,
+        checkedValue,
+        uncheckedValue,
+        onClick
+      } = props;
+
+      if (form != null && form.disabled.value || disabled) {
+        return;
+      }
+
+      onClick == null ? void 0 : onClick(e);
+
+      if (form != null && form.readonly.value || readonly) {
+        return;
+      }
+
+      withAnimation.value = true;
+      var maximum = checkboxGroup ? checkboxGroup.checkedCount.value >= Number(checkboxGroup.max.value) : false;
+
+      if (!checked.value && maximum) {
+        return;
+      }
+
+      change(checked.value ? uncheckedValue : checkedValue);
+    };
+
+    var sync = values => {
+      var {
+        checkedValue,
+        uncheckedValue
+      } = props;
+      value.value = values.includes(checkedValue) ? checkedValue : uncheckedValue;
+    }; // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel2;
+
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, props.uncheckedValue);
+      resetValidation();
+    }; // expose
+
+
+    var toggle = changedValue => {
+      var {
+        checkedValue,
+        uncheckedValue
+      } = props;
+      var shouldReverse = ![checkedValue, uncheckedValue].includes(changedValue);
+
+      if (shouldReverse) {
+        changedValue = checked.value ? uncheckedValue : checkedValue;
+      }
+
+      change(changedValue);
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue);
+
+    (0, _vue.watch)(() => props.modelValue, newValue => {
+      value.value = newValue;
+    }, {
+      immediate: true
+    });
+    var checkboxProvider = {
+      checkedValue,
+      checked,
+      sync,
+      validate,
+      resetValidation,
+      reset
+    };
+    bindCheckboxGroup == null ? void 0 : bindCheckboxGroup(checkboxProvider);
+    bindForm == null ? void 0 : bindForm(checkboxProvider);
+    return {
+      withAnimation,
+      checked,
+      errorMessage,
+      checkboxGroupErrorMessage: checkboxGroup == null ? void 0 : checkboxGroup.errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      handleClick,
+      toggle,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/checkbox/checkbox.css

@@ -0,0 +1 @@
+:root { --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;}@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);}.var-checkbox__wrap { display: inline-flex; flex-direction: column;}.var-checkbox__action { display: flex; justify-content: center; align-items: center; padding: var(--checkbox-action-padding); border-radius: 50%;}.var-checkbox__icon[var-checkbox-cover] { display: block; font-size: var(--checkbox-icon-size);}.var-checkbox--with-animation { animation: var-vibrate-animation 0.25s;}.var-checkbox--checked { color: var(--checkbox-checked-color);}.var-checkbox--unchecked { color: var(--checkbox-unchecked-color);}.var-checkbox--disabled { color: var(--checkbox-disabled-color);}.var-checkbox--error { color: var(--checkbox-error-color);}

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.vue"));
+
+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')