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

package/lib/radio/index.js

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

package/lib/radio/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
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  checkedColor: {
+    type: String
+  },
+  uncheckedColor: {
+    type: String
+  },
+  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/radio/provide.js

@@ -0,0 +1,23 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useRadioGroup = useRadioGroup;
+
+var _components = require("../utils/components");
+
+var _provide = require("../radio-group/provide");
+
+function useRadioGroup() {
+  var {
+    bindParent,
+    parentProvider
+  } = (0, _components.useParent)(_provide.RADIO_GROUP_BIND_RADIO_KEY);
+  var {
+    index
+  } = (0, _components.useAtParentIndex)(_provide.RADIO_GROUP_COUNT_RADIO_KEY);
+  return {
+    index,
+    radioGroup: parentProvider,
+    bindRadioGroup: bindParent
+  };
+}

package/lib/radio/radio.css

@@ -0,0 +1 @@
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px;}@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-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0);}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { display: flex; justify-content: center; align-items: center; padding: var(--radio-action-padding); border-radius: 50%;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color);}.var-radio--error { color: var(--radio-error-color);}

package/lib/radio/radio.less

@@ -0,0 +1,78 @@
+@radio-checked-color: var(--color-primary);
+@radio-unchecked-color: #555;
+@radio-disabled-color: var(--color-text-disabled);
+@radio-error-color: var(--color-danger);
+@radio-icon-size: 24px;
+@radio-action-padding: 6px;
+
+:root {
+  --radio-checked-color: @radio-checked-color;
+  --radio-unchecked-color: @radio-unchecked-color;
+  --radio-disabled-color: @radio-disabled-color;
+  --radio-error-color: @radio-error-color;
+  --radio-icon-size: @radio-icon-size;
+  --radio-action-padding: @radio-action-padding;
+}
+
+@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-radio {
+  display: flex;
+  align-items: center;
+  transform: translateX(calc(-1 * var(--radio-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(--radio-action-padding);
+    border-radius: 50%;
+  }
+
+  &__icon[var-radio-cover] {
+    display: block;
+    font-size: var(--radio-icon-size);
+  }
+
+  &--with-animation[var-radio-cover] {
+    animation: var-vibrate-animation 0.25s;
+  }
+
+  &--checked {
+    color: var(--radio-checked-color);
+  }
+
+  &--unchecked {
+    color: var(--radio-unchecked-color);
+  }
+
+  &--disabled {
+    color: var(--radio-disabled-color);
+  }
+
+  &--error {
+    color: var(--radio-error-color);
+  }
+}

package/lib/radio/style/index.js

@@ -0,0 +1,6 @@
+require('../../styles/common.css')
+require('../../ripple/ripple.css')
+require('../../icon/icon.css')
+require('../../form-details/formDetails.css')
+require('../radio.css')
+require('../RadioSfc.css')

package/lib/radio/style/less.js

@@ -0,0 +1,6 @@
+require('../../styles/common.less')
+require('../../ripple/ripple.less')
+require('../../icon/icon.less')
+require('../../form-details/formDetails.less')
+require('../radio.less')
+require('../RadioSfc.less')

package/lib/radio-group/RadioGroup.js

@@ -0,0 +1,122 @@
+"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");
+
+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-radio-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-radio-group", ["var-radio-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: 'VarRadioGroup',
+  components: {
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var {
+      length,
+      radios,
+      bindRadios
+    } = (0, _provide.useRadios)();
+    var {
+      bindForm
+    } = (0, _provide2.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+    var radioGroupErrorMessage = (0, _vue.computed)(() => errorMessage.value);
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    };
+
+    var syncRadios = () => radios.forEach(({
+      sync
+    }) => sync(props.modelValue));
+
+    var onToggle = changedValue => {
+      var _props$onUpdateModel;
+
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, changedValue);
+      props.onChange == null ? void 0 : props.onChange(changedValue);
+      validateWithTrigger('onChange');
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue); // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel2;
+
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, undefined);
+      resetValidation();
+    };
+
+    (0, _vue.watch)(() => props.modelValue, syncRadios);
+    (0, _vue.watch)(() => length.value, syncRadios);
+    var radioGroupProvider = {
+      onToggle,
+      validate,
+      reset,
+      resetValidation,
+      errorMessage: radioGroupErrorMessage
+    };
+    bindForm == null ? void 0 : bindForm(radioGroupProvider);
+    bindRadios(radioGroupProvider);
+    return {
+      errorMessage,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/radio-group/index.js

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

package/lib/radio-group/props.js

@@ -0,0 +1,35 @@
+"use strict";
+
+exports.__esModule = true;
+exports.directionValidator = directionValidator;
+exports.props = void 0;
+
+function directionValidator(direction) {
+  return ['horizontal', 'vertical'].includes(direction);
+}
+
+var props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: undefined
+  },
+  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/radio-group/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useRadios = useRadios;
+exports.RADIO_GROUP_COUNT_RADIO_KEY = exports.RADIO_GROUP_BIND_RADIO_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var RADIO_GROUP_BIND_RADIO_KEY = Symbol('RADIO_GROUP_BIND_RADIO_KEY');
+exports.RADIO_GROUP_BIND_RADIO_KEY = RADIO_GROUP_BIND_RADIO_KEY;
+var RADIO_GROUP_COUNT_RADIO_KEY = Symbol('RADIO_GROUP_COUNT_RADIO_KEY');
+exports.RADIO_GROUP_COUNT_RADIO_KEY = RADIO_GROUP_COUNT_RADIO_KEY;
+
+function useRadios() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(RADIO_GROUP_BIND_RADIO_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(RADIO_GROUP_COUNT_RADIO_KEY);
+  return {
+    length,
+    radios: childProviders,
+    bindRadios: bindChildren
+  };
+}

package/lib/radio-group/radioGroup.css

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

package/lib/radio-group/radioGroup.less

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

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

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

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

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

package/lib/rate/Rate.js

@@ -0,0 +1,235 @@
+"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 _provide = require("../form/provide");
+
+var _components = require("../utils/components");
+
+var _elements = require("../utils/elements");
+
+var _shared = require("../utils/shared");
+
+var _props = require("./props");
+
+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-rate__warp"
+};
+var _hoisted_2 = {
+  class: "var-rate"
+};
+var _hoisted_3 = ["onClick"];
+
+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", _hoisted_1, [(0, _vue.createElementVNode)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.toNumber(_ctx.count), val => {
+    return (0, _vue.withDirectives)(((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+      key: val,
+      style: (0, _vue.normalizeStyle)(_ctx.getStyle(val)),
+      class: (0, _vue.normalizeClass)(_ctx.getClass(val)),
+      onClick: $event => _ctx.handleClick(val, $event)
+    }, [(0, _vue.createVNode)(_component_var_icon, {
+      transition: 0,
+      name: _ctx.getIconName(val),
+      style: (0, _vue.normalizeStyle)({
+        fontSize: _ctx.toSizeUnit(_ctx.size)
+      })
+    }, null, 8
+    /* PROPS */
+    , ["name", "style"])], 14
+    /* CLASS, STYLE, PROPS */
+    , _hoisted_3)), [[_directive_ripple, {
+      disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple
+    }]]);
+  }), 128
+  /* KEYED_FRAGMENT */
+  ))]), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage
+  }, null, 8
+  /* PROPS */
+  , ["error-message"])]);
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarRate',
+  components: {
+    VarIcon: _icon.default,
+    VarFormDetails: _formDetails.default
+  },
+  directives: {
+    Ripple: _ripple.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var {
+      form,
+      bindForm
+    } = (0, _provide.useForm)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var getStyle = val => {
+      var {
+        count,
+        size,
+        gap
+      } = props;
+      return {
+        color: transformValue(val).color,
+        marginRight: val !== (0, _shared.toNumber)(count) ? (0, _elements.toSizeUnit)(gap) : 0,
+        width: (0, _elements.toSizeUnit)(size),
+        height: (0, _elements.toSizeUnit)(size),
+        borderRadius: '50%'
+      };
+    };
+
+    var getClass = val => {
+      var {
+        type,
+        color
+      } = transformValue(val);
+      return {
+        'var-rate__content': true,
+        'var-rate--disabled': form == null ? void 0 : form.disabled.value,
+        'var-rate--error': errorMessage.value,
+        'var-rate--primary': type !== 'empty' && !color
+      };
+    };
+
+    var getIconName = val => {
+      var {
+        type
+      } = transformValue(val);
+      var {
+        icon,
+        halfIcon,
+        emptyIcon
+      } = props;
+      return type === 'full' ? icon : type === 'half' ? halfIcon : emptyIcon;
+    };
+
+    var transformValue = index => {
+      var {
+        modelValue,
+        disabled,
+        disabledColor,
+        color,
+        half,
+        emptyColor
+      } = props;
+      var iconColor;
+      if (disabled || form != null && form.disabled.value) iconColor = disabledColor;else if (color) iconColor = color;
+
+      if (index <= (0, _shared.toNumber)(modelValue)) {
+        return {
+          type: 'full',
+          score: index,
+          color: iconColor
+        };
+      }
+
+      if (half && index <= (0, _shared.toNumber)(modelValue) + 0.5) {
+        return {
+          type: 'half',
+          score: index,
+          color: iconColor
+        };
+      }
+
+      return {
+        type: 'empty',
+        score: index,
+        color: disabled || form != null && form.disabled.value ? disabledColor : emptyColor
+      };
+    };
+
+    var changeValue = (score, event) => {
+      var _props$onUpdateModel;
+
+      if (props.half) {
+        var {
+          offsetWidth
+        } = event.target;
+        if (event.offsetX <= Math.floor(offsetWidth / 2)) score -= 0.5;
+      }
+
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, score);
+    };
+
+    var validate = () => v(props.rules, (0, _shared.toNumber)(props.modelValue));
+
+    var validateWithTrigger = () => (0, _vue.nextTick)(() => vt(['onChange'], 'onChange', props.rules, props.modelValue));
+
+    var handleClick = (score, event) => {
+      var {
+        readonly,
+        disabled,
+        onChange
+      } = props;
+
+      if (readonly || disabled || form != null && form.disabled.value || form != null && form.readonly.value) {
+        return;
+      }
+
+      changeValue(score, event);
+      onChange == null ? void 0 : onChange(score);
+      validateWithTrigger();
+    };
+
+    var reset = () => {
+      var _props$onUpdateModel2;
+
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, 0);
+      resetValidation();
+    };
+
+    var rateProvider = {
+      reset,
+      validate,
+      resetValidation
+    };
+    bindForm == null ? void 0 : bindForm(rateProvider);
+    return {
+      errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      getStyle,
+      getClass,
+      getIconName,
+      handleClick,
+      reset,
+      validate,
+      resetValidation,
+      toSizeUnit: _elements.toSizeUnit,
+      toNumber: _shared.toNumber
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/rate/index.js

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