@varlet/ui 1.23.3 → 1.23.4-alpha.3

package/lib/select/Select.js

@@ -0,0 +1,492 @@
+"use strict";
+
+exports.__esModule = true;
+exports.render = render;
+exports.default = void 0;
+
+var _icon = _interopRequireDefault(require("../icon"));
+
+var _menu = _interopRequireDefault(require("../menu"));
+
+var _chip = _interopRequireDefault(require("../chip"));
+
+var _formDetails = _interopRequireDefault(require("../form-details"));
+
+var _vue = require("vue");
+
+var _shared = require("../utils/shared");
+
+var _props = require("./props");
+
+var _components = require("../utils/components");
+
+var _provide = require("./provide");
+
+var _provide2 = require("../form/provide");
+
+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 = {
+  key: 0
+};
+var _hoisted_2 = {
+  key: 0,
+  class: "var-select__chips"
+};
+var _hoisted_3 = {
+  key: 1,
+  class: "var-select__values"
+};
+var _hoisted_4 = {
+  key: 1
+};
+var _hoisted_5 = {
+  class: "var-select__scroller"
+};
+
+function render(_ctx, _cache) {
+  var _component_var_chip = (0, _vue.resolveComponent)("var-chip");
+
+  var _component_var_icon = (0, _vue.resolveComponent)("var-icon");
+
+  var _component_var_menu = (0, _vue.resolveComponent)("var-menu");
+
+  var _component_var_form_details = (0, _vue.resolveComponent)("var-form-details");
+
+  return (0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    class: (0, _vue.normalizeClass)(["var-select var--box", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-select__controller", [_ctx.isFocus ? 'var-select--focus' : null, _ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      color: !_ctx.errorMessage ? _ctx.isFocus ? _ctx.focusColor : _ctx.blurColor : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "prepend-icon")], 2
+  /* CLASS */
+  ), (0, _vue.createVNode)(_component_var_menu, {
+    class: "var-select__menu",
+    "var-select-cover": "",
+    "offset-y": _ctx.offsetY,
+    show: _ctx.isFocus,
+    "onUpdate:show": _cache[2] || (_cache[2] = $event => _ctx.isFocus = $event),
+    onClose: _ctx.handleBlur
+  }, {
+    menu: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", _hoisted_5, [(0, _vue.renderSlot)(_ctx.$slots, "default")])]),
+    default: (0, _vue.withCtx)(() => [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-select__wrap", [!_ctx.hint ? 'var-select--non-hint' : null]]),
+      ref: "wrapEl",
+      onClick: _cache[1] || (_cache[1] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
+    }, [(0, _vue.createElementVNode)("div", {
+      class: (0, _vue.normalizeClass)(["var-select__select", [_ctx.errorMessage ? 'var-select--error' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null]]),
+      style: (0, _vue.normalizeStyle)({
+        textAlign: _ctx.textAlign,
+        color: _ctx.textColor
+      })
+    }, [_ctx.multiple ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_1, [_ctx.chip ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_2, [((0, _vue.openBlock)(true), (0, _vue.createElementBlock)(_vue.Fragment, null, (0, _vue.renderList)(_ctx.labels, l => {
+      return (0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_chip, {
+        class: "var-select__chip",
+        "var-select-cover": "",
+        closable: "",
+        size: "small",
+        type: _ctx.errorMessage ? 'danger' : undefined,
+        key: l,
+        onClick: _cache[0] || (_cache[0] = (0, _vue.withModifiers)(() => {}, ["stop"])),
+        onClose: e => _ctx.handleClose(l)
+      }, {
+        default: (0, _vue.withCtx)(() => [(0, _vue.createTextVNode)((0, _vue.toDisplayString)(l), 1
+        /* TEXT */
+        )]),
+        _: 2
+        /* DYNAMIC */
+
+      }, 1032
+      /* PROPS, DYNAMIC_SLOTS */
+      , ["type", "onClose"]);
+    }), 128
+    /* KEYED_FRAGMENT */
+    ))])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", _hoisted_3, (0, _vue.toDisplayString)(_ctx.labels.join(_ctx.separator)), 1
+    /* TEXT */
+    ))])) : ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("span", _hoisted_4, (0, _vue.toDisplayString)(_ctx.label), 1
+    /* TEXT */
+    )), (0, _vue.createVNode)(_component_var_icon, {
+      class: (0, _vue.normalizeClass)(["var-select__arrow", [_ctx.isFocus ? 'var-select--arrow-rotate' : null]]),
+      "var-select-cover": "",
+      name: "menu-down",
+      transition: 300
+    }, null, 8
+    /* PROPS */
+    , ["class"])], 6
+    /* CLASS, STYLE */
+    ), (0, _vue.createElementVNode)("label", {
+      class: (0, _vue.normalizeClass)(["var-select__placeholder", [_ctx.formDisabled || _ctx.disabled ? 'var-select--disabled' : null, _ctx.computePlaceholderState(), !_ctx.hint ? 'var-select--placeholder-non-hint' : null]])
+    }, (0, _vue.toDisplayString)(_ctx.placeholder), 3
+    /* TEXT, CLASS */
+    )], 2
+    /* CLASS */
+    )]),
+    _: 3
+    /* FORWARDED */
+
+  }, 8
+  /* PROPS */
+  , ["offset-y", "show", "onClose"]), (0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-select__icon", [!_ctx.hint ? 'var-select--non-hint' : null]])
+  }, [(0, _vue.renderSlot)(_ctx.$slots, "append-icon", {}, () => [_ctx.clearable ? ((0, _vue.openBlock)(), (0, _vue.createBlock)(_component_var_icon, {
+    key: 0,
+    class: "var-select__clear-icon",
+    name: "close-circle",
+    size: "14px",
+    onClick: _ctx.handleClear
+  }, null, 8
+  /* PROPS */
+  , ["onClick"])) : (0, _vue.createCommentVNode)("v-if", true)])], 2
+  /* CLASS */
+  )], 6
+  /* CLASS, STYLE */
+  ), _ctx.line ? ((0, _vue.openBlock)(), (0, _vue.createElementBlock)("div", {
+    key: 0,
+    class: (0, _vue.normalizeClass)(["var-select__line", [_ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: !_ctx.errorMessage ? _ctx.blurColor : undefined
+    })
+  }, [(0, _vue.createElementVNode)("div", {
+    class: (0, _vue.normalizeClass)(["var-select__dot", [_ctx.isFocus ? 'var-select--spread' : null, _ctx.formDisabled || _ctx.disabled ? 'var-select--line-disabled' : null, _ctx.errorMessage ? 'var-select--line-error' : null]]),
+    style: (0, _vue.normalizeStyle)({
+      background: !_ctx.errorMessage ? _ctx.focusColor : undefined
+    })
+  }, null, 6
+  /* CLASS, STYLE */
+  )], 6
+  /* CLASS, STYLE */
+  )) : (0, _vue.createCommentVNode)("v-if", true), (0, _vue.createVNode)(_component_var_form_details, {
+    "error-message": _ctx.errorMessage
+  }, null, 8
+  /* PROPS */
+  , ["error-message"])], 2
+  /* CLASS */
+  );
+}
+
+var _default = (0, _vue.defineComponent)({
+  render,
+  name: 'VarSelect',
+  components: {
+    VarIcon: _icon.default,
+    VarMenu: _menu.default,
+    VarChip: _chip.default,
+    VarFormDetails: _formDetails.default
+  },
+  props: _props.props,
+
+  setup(props) {
+    var wrapEl = (0, _vue.ref)(null);
+    var isFocus = (0, _vue.ref)(false);
+    var multiple = (0, _vue.computed)(() => props.multiple);
+    var focusColor = (0, _vue.computed)(() => props.focusColor);
+    var label = (0, _vue.ref)('');
+    var labels = (0, _vue.ref)([]);
+    var wrapWidth = (0, _vue.computed)(() => {
+      return wrapEl.value && window.getComputedStyle(wrapEl.value).width || '0px';
+    });
+    var offsetY = (0, _vue.computed)(() => {
+      var paddingTop = wrapEl.value && window.getComputedStyle(wrapEl.value).paddingTop || '0px';
+      return (0, _elements.toPxNum)(paddingTop) * 1.5;
+    });
+    var {
+      bindForm,
+      form
+    } = (0, _provide2.useForm)();
+    var {
+      length,
+      options,
+      bindOptions
+    } = (0, _provide.useOptions)();
+    var {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = (0, _components.useValidation)();
+
+    var computeLabel = () => {
+      var {
+        multiple,
+        modelValue
+      } = props;
+
+      if (multiple) {
+        var rawModelValue = modelValue;
+        labels.value = rawModelValue.map(findLabel);
+      }
+
+      if (!multiple && !(0, _shared.isEmpty)(modelValue)) {
+        label.value = findLabel(modelValue);
+      }
+
+      if (!multiple && (0, _shared.isEmpty)(modelValue)) {
+        label.value = '';
+      }
+    };
+
+    var validateWithTrigger = trigger => {
+      (0, _vue.nextTick)(() => {
+        var {
+          validateTrigger,
+          rules,
+          modelValue
+        } = props;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    };
+
+    var findValueOrLabel = ({
+      value,
+      label
+    }) => {
+      if (value.value != null) {
+        return value.value;
+      }
+
+      return label.value;
+    };
+
+    var findLabel = modelValue => {
+      var option = options.find(({
+        value
+      }) => value.value === modelValue);
+
+      if (!option) {
+        option = options.find(({
+          label
+        }) => label.value === modelValue);
+      }
+
+      return option.label.value;
+    };
+
+    var computePlaceholderState = () => {
+      var {
+        hint,
+        modelValue
+      } = props;
+
+      if (!hint && !(0, _shared.isEmpty)(modelValue)) {
+        return 'var-select--placeholder-hidden';
+      }
+
+      if (hint && (!(0, _shared.isEmpty)(modelValue) || isFocus.value)) {
+        return 'var-select--placeholder-hint';
+      }
+    };
+
+    var handleFocus = () => {
+      var {
+        disabled,
+        readonly,
+        onFocus
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+
+      isFocus.value = true;
+      onFocus == null ? void 0 : onFocus();
+      validateWithTrigger('onFocus');
+    };
+
+    var handleBlur = () => {
+      var {
+        disabled,
+        readonly,
+        onBlur
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+
+      onBlur == null ? void 0 : onBlur();
+      validateWithTrigger('onBlur');
+    };
+
+    var onSelect = option => {
+      var _props$onUpdateModel;
+
+      var {
+        disabled,
+        readonly,
+        multiple,
+        onChange
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+
+      var selectedValue = multiple ? options.filter(({
+        selected
+      }) => selected.value).map(findValueOrLabel) : findValueOrLabel(option);
+      (_props$onUpdateModel = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel.call(props, selectedValue);
+      onChange == null ? void 0 : onChange(selectedValue);
+      validateWithTrigger('onChange');
+      !multiple && (isFocus.value = false);
+    };
+
+    var handleClear = () => {
+      var _props$onUpdateModel2;
+
+      var {
+        disabled,
+        readonly,
+        multiple,
+        clearable,
+        onClear
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly || !clearable) {
+        return;
+      }
+
+      var changedModelValue = multiple ? [] : undefined;
+      (_props$onUpdateModel2 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel2.call(props, changedModelValue);
+      onClear == null ? void 0 : onClear(changedModelValue);
+      validateWithTrigger('onClear');
+    };
+
+    var handleClick = e => {
+      var {
+        disabled,
+        onClick
+      } = props;
+
+      if (form != null && form.disabled.value || disabled) {
+        return;
+      }
+
+      onClick == null ? void 0 : onClick(e);
+      validateWithTrigger('onClick');
+    };
+
+    var handleClose = text => {
+      var _props$onUpdateModel3;
+
+      var {
+        disabled,
+        readonly,
+        modelValue,
+        onClose
+      } = props;
+
+      if (form != null && form.disabled.value || form != null && form.readonly.value || disabled || readonly) {
+        return;
+      }
+
+      var rawModelValue = modelValue;
+      var option = options.find(({
+        label
+      }) => label.value === text);
+      var currentModelValue = rawModelValue.filter(value => {
+        var _value$value;
+
+        return value !== ((_value$value = option.value.value) != null ? _value$value : option.label.value);
+      });
+      (_props$onUpdateModel3 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel3.call(props, currentModelValue);
+      onClose == null ? void 0 : onClose(currentModelValue);
+      validateWithTrigger('onClose');
+    };
+
+    var syncOptions = () => {
+      var {
+        multiple,
+        modelValue
+      } = props;
+
+      if (multiple) {
+        var rawModelValue = modelValue;
+        options.forEach(option => option.sync(rawModelValue.includes(findValueOrLabel(option))));
+      } else {
+        options.forEach(option => option.sync(modelValue === findValueOrLabel(option)));
+      }
+
+      computeLabel();
+    }; // expose
+
+
+    var focus = () => {
+      isFocus.value = true;
+    }; // expose
+
+
+    var blur = () => {
+      isFocus.value = false;
+    }; // expose
+
+
+    var validate = () => v(props.rules, props.modelValue); // expose
+
+
+    var reset = () => {
+      var _props$onUpdateModel4;
+
+      (_props$onUpdateModel4 = props['onUpdate:modelValue']) == null ? void 0 : _props$onUpdateModel4.call(props, props.multiple ? [] : undefined);
+      resetValidation();
+    };
+
+    (0, _vue.watch)(() => props.multiple, () => {
+      var {
+        multiple,
+        modelValue
+      } = props;
+
+      if (multiple && !(0, _shared.isArray)(modelValue)) {
+        throw Error('The modelValue must be an array when multiple is true');
+      }
+    });
+    (0, _vue.watch)(() => props.modelValue, syncOptions, {
+      deep: true
+    });
+    (0, _vue.watch)(() => length.value, syncOptions);
+    var selectProvider = {
+      wrapWidth,
+      multiple,
+      focusColor,
+      onSelect,
+      reset,
+      validate,
+      resetValidation
+    };
+    bindOptions(selectProvider);
+    bindForm == null ? void 0 : bindForm(selectProvider);
+    return {
+      wrapEl,
+      offsetY,
+      isFocus,
+      errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      label,
+      labels,
+      computePlaceholderState,
+      handleFocus,
+      handleBlur,
+      handleClear,
+      handleClick,
+      handleClose,
+      reset,
+      validate,
+      resetValidation,
+      focus,
+      blur
+    };
+  }
+
+});
+
+exports.default = _default;

package/lib/select/index.js

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

package/lib/select/props.js

@@ -0,0 +1,93 @@
+"use strict";
+
+exports.__esModule = true;
+exports.textAlignValidator = textAlignValidator;
+exports.props = void 0;
+
+function textAlignValidator(textAlign) {
+  return ['left', 'right', 'center'].includes(textAlign);
+}
+
+var props = {
+  modelValue: {
+    default: undefined
+  },
+  placeholder: {
+    type: String
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  chip: {
+    type: Boolean,
+    default: false
+  },
+  line: {
+    type: Boolean,
+    default: true
+  },
+  hint: {
+    type: Boolean,
+    default: true
+  },
+  textColor: {
+    type: String
+  },
+  focusColor: {
+    type: String
+  },
+  blurColor: {
+    type: String
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  separator: {
+    type: String,
+    default: ','
+  },
+  textAlign: {
+    type: String,
+    default: 'left',
+    validator: textAlignValidator
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ['onChange', 'onClear', 'onClose']
+  },
+  rules: {
+    type: Array
+  },
+  onFocus: {
+    type: Function
+  },
+  onBlur: {
+    type: Function
+  },
+  onClick: {
+    type: Function
+  },
+  onClear: {
+    type: Function
+  },
+  onClose: {
+    type: Function
+  },
+  onChange: {
+    type: Function
+  },
+  'onUpdate:modelValue': {
+    type: Function
+  }
+};
+exports.props = props;

package/lib/select/provide.js

@@ -0,0 +1,27 @@
+"use strict";
+
+exports.__esModule = true;
+exports.useOptions = useOptions;
+exports.SELECT_COUNT_OPTION_KEY = exports.SELECT_BIND_OPTION_KEY = void 0;
+
+var _components = require("../utils/components");
+
+var SELECT_BIND_OPTION_KEY = Symbol('SELECT_BIND_OPTION_KEY');
+exports.SELECT_BIND_OPTION_KEY = SELECT_BIND_OPTION_KEY;
+var SELECT_COUNT_OPTION_KEY = Symbol('SELECT_COUNT_OPTION_KEY');
+exports.SELECT_COUNT_OPTION_KEY = SELECT_COUNT_OPTION_KEY;
+
+function useOptions() {
+  var {
+    bindChildren,
+    childProviders
+  } = (0, _components.useChildren)(SELECT_BIND_OPTION_KEY);
+  var {
+    length
+  } = (0, _components.useAtChildrenCounter)(SELECT_COUNT_OPTION_KEY);
+  return {
+    length,
+    options: childProviders,
+    bindOptions: bindChildren
+  };
+}

package/lib/select/select.css

@@ -0,0 +1 @@
+:root { --select-select-text-color: #555; --select-select-padding: 5px 0; --select-error-color: var(--color-danger); --select-blur-color: #888; --select-focus-color: var(--color-primary); --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-placeholder-size: 16px; --select-icon-padding: 16px 0 0; --select-icon-size: 20px; --select-chip-margin: 5px 5px 0; --select-line-size: 1px; --select-line-spread-size: 2px; --select-arrow-size: 20px; --select-disabled-color: var(--color-text-disabled);}.var-select-footer-margin-enter-from,.var-select-footer-margin-leave-to { opacity: 0; margin-top: 2px !important;}.var-select-footer-margin-enter-active,.var-select-footer-margin-leave-active { transition: 0.2s all var(--cubic-bezier);}.var-select { width: 100%; color: var(--select-select-text-color);}.var-select__controller { width: 100%; display: flex; position: relative;}.var-select__menu[var-select-cover] { flex-grow: 1; background: transparent;}.var-select__chip[var-select-cover] { margin: var(--select-chip-margin);}.var-select__scroller { max-height: var(--select-scroller-max-height); background: var(--select-scroller-background); padding: var(--select-scroller-padding); overflow-y: auto;}.var-select__wrap { position: relative; display: flex; flex-direction: column; padding-top: var(--select-placeholder-size);}.var-select__icon { display: flex; align-items: center; padding: var(--select-icon-padding); font-size: 20px;}.var-select__placeholder { position: absolute; top: 50%; left: 0; transform-origin: left; transition-property: top, transform; transition-duration: 0.3s; transform: translate(0, calc(-50% + var(--select-placeholder-size) / 2)) scale(1); font-size: var(--select-placeholder-size); color: var(--select-blur-color);}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 32px; padding: var(--select-select-padding); outline: none; border: none; font-size: inherit; color: var(--select-select-text-color); overflow-x: auto;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select__line { width: 100%; height: var(--select-line-size); background: var(--select-blur-color);}.var-select__dot { width: 100%; height: var(--select-line-spread-size); background: var(--select-focus-color); transform: scaleX(0); transform-origin: center; transition: transform 0.3s var(--cubic-bezier);}.var-select--placeholder-hint { top: 0; transform: translate(0, 0) scale(0.75);}.var-select--placeholder-non-hint { top: 50%; transform: translate(0, -50%) scale(1);}.var-select--non-hint { padding-top: 0;}.var-select--placeholder-hidden { visibility: hidden;}.var-select--focus { color: var(--select-focus-color);}.var-select--spread { transform: scaleX(1);}.var-select--disabled { color: var(--select-disabled-color);}.var-select--error { color: var(--select-error-color);}.var-select--line-disabled { background: var(--select-disabled-color);}.var-select--line-error { background: var(--select-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}