@varlet/ui 1.23.4-alpha.8 → 1.23.4

package/lib/select/Select.js

@@ -1,492 +0,0 @@
-"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

@@ -1,17 +0,0 @@
-"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

@@ -1,93 +0,0 @@
-"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

@@ -1,27 +0,0 @@
-"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

@@ -1 +0,0 @@
-: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);}