@varlet/ui 2.20.1 → 2.20.2

package/es/select/Select.mjs

@@ -0,0 +1,417 @@
+import VarIcon from "../icon/index.mjs";
+import VarMenu from "../menu/index.mjs";
+import VarChip from "../chip/index.mjs";
+import VarFieldDecorator from "../field-decorator/index.mjs";
+import VarFormDetails from "../form-details/index.mjs";
+import { computed, defineComponent, ref, watch, nextTick } from "vue";
+import { isArray, isEmpty, call } from "@varlet/shared";
+import { props } from "./props.mjs";
+import { useValidation, createNamespace } from "../utils/components.mjs";
+import { useOptions } from "./provide.mjs";
+import { useForm } from "../form/provide.mjs";
+import { toPxNum } from "../utils/elements.mjs";
+import { error } from "../utils/logger.mjs";
+import { useSelectController } from "./useSelectController.mjs";
+const { name, n, classes } = createNamespace("select");
+import { renderSlot as _renderSlot, renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, normalizeClass as _normalizeClass, withCtx as _withCtx, createBlock as _createBlock, createCommentVNode as _createCommentVNode, createElementVNode as _createElementVNode, normalizeStyle as _normalizeStyle, createVNode as _createVNode, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, createSlots as _createSlots, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
+const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
+const _hoisted_1 = { key: 1 };
+function __render__(_ctx, _cache) {
+  const _component_var_chip = _resolveComponent("var-chip");
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_field_decorator = _resolveComponent("var-field-decorator");
+  const _component_var_menu = _resolveComponent("var-menu");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n()),
+      onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args))
+    },
+    [
+      _createVNode(_component_var_menu, {
+        "var-select-cover": "",
+        "same-width": "",
+        "close-on-click-reference": "",
+        show: _ctx.showMenu,
+        "onUpdate:show": _cache[1] || (_cache[1] = ($event) => _ctx.showMenu = $event),
+        class: _normalizeClass(_ctx.n("menu")),
+        "popover-class": _ctx.variant === "standard" && _ctx.hint ? _ctx.n("--standard-menu-margin") : void 0,
+        "offset-y": _ctx.offsetY,
+        disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled,
+        placement: _ctx.placement,
+        "default-style": false,
+        onClickOutside: _ctx.handleBlur
+      }, {
+        menu: _withCtx(() => [
+          _createElementVNode(
+            "div",
+            {
+              ref: "menuEl",
+              class: _normalizeClass(_ctx.classes(_ctx.n("scroller"), _ctx.n("$-elevation--3")))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default")
+            ],
+            2
+            /* CLASS */
+          )
+        ]),
+        default: _withCtx(() => [
+          _createVNode(
+            _component_var_field_decorator,
+            _normalizeProps(_guardReactiveProps({
+              value: _ctx.modelValue,
+              size: _ctx.size,
+              variant: _ctx.variant,
+              placeholder: _ctx.placeholder,
+              line: _ctx.line,
+              hint: _ctx.hint,
+              textColor: _ctx.textColor,
+              focusColor: _ctx.focusColor,
+              blurColor: _ctx.blurColor,
+              isFocus: _ctx.isFocus,
+              errorMessage: _ctx.errorMessage,
+              formDisabled: _ctx.formDisabled,
+              disabled: _ctx.disabled,
+              clearable: _ctx.clearable,
+              cursor: _ctx.cursor,
+              onClick: _ctx.handleClick,
+              onClear: _ctx.handleClear
+            })),
+            _createSlots({
+              "append-icon": _withCtx(() => [
+                _renderSlot(_ctx.$slots, "append-icon")
+              ]),
+              default: _withCtx(() => [
+                _createElementVNode(
+                  "div",
+                  {
+                    class: _normalizeClass(_ctx.classes(_ctx.n("select"), [_ctx.errorMessage, _ctx.n("--error")], [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")])),
+                    style: _normalizeStyle({
+                      textAlign: _ctx.textAlign,
+                      color: _ctx.textColor
+                    })
+                  },
+                  [
+                    _createElementVNode(
+                      "div",
+                      {
+                        class: _normalizeClass(_ctx.n("label"))
+                      },
+                      [
+                        !_ctx.isEmptyModelValue ? _renderSlot(_ctx.$slots, "selected", { key: 0 }, () => [
+                          _ctx.multiple ? (_openBlock(), _createElementBlock(
+                            _Fragment,
+                            { key: 0 },
+                            [
+                              _ctx.chip ? (_openBlock(), _createElementBlock(
+                                "div",
+                                {
+                                  key: 0,
+                                  class: _normalizeClass(_ctx.n("chips"))
+                                },
+                                [
+                                  (_openBlock(true), _createElementBlock(
+                                    _Fragment,
+                                    null,
+                                    _renderList(_ctx.labels, (l) => {
+                                      return _openBlock(), _createBlock(_component_var_chip, {
+                                        class: _normalizeClass(_ctx.n("chip")),
+                                        "var-select-cover": "",
+                                        closeable: "",
+                                        size: "small",
+                                        type: _ctx.errorMessage ? "danger" : void 0,
+                                        key: l,
+                                        onClick: _cache[0] || (_cache[0] = _withModifiers(() => {
+                                        }, ["stop"])),
+                                        onClose: () => _ctx.handleClose(l)
+                                      }, {
+                                        default: _withCtx(() => [
+                                          _createTextVNode(
+                                            _toDisplayString(l),
+                                            1
+                                            /* TEXT */
+                                          )
+                                        ]),
+                                        _: 2
+                                        /* DYNAMIC */
+                                      }, 1032, ["class", "type", "onClose"]);
+                                    }),
+                                    128
+                                    /* KEYED_FRAGMENT */
+                                  ))
+                                ],
+                                2
+                                /* CLASS */
+                              )) : (_openBlock(), _createElementBlock(
+                                "div",
+                                {
+                                  key: 1,
+                                  class: _normalizeClass(_ctx.n("values"))
+                                },
+                                _toDisplayString(_ctx.labels.join(_ctx.separator)),
+                                3
+                                /* TEXT, CLASS */
+                              ))
+                            ],
+                            64
+                            /* STABLE_FRAGMENT */
+                          )) : (_openBlock(), _createElementBlock(
+                            "span",
+                            _hoisted_1,
+                            _toDisplayString(_ctx.label),
+                            1
+                            /* TEXT */
+                          ))
+                        ]) : _createCommentVNode("v-if", true)
+                      ],
+                      2
+                      /* CLASS */
+                    ),
+                    _ctx.enableCustomPlaceholder ? (_openBlock(), _createElementBlock(
+                      "span",
+                      {
+                        key: 0,
+                        class: _normalizeClass(_ctx.classes(_ctx.n("placeholder"), _ctx.n("$--ellipsis"))),
+                        style: _normalizeStyle({
+                          color: _ctx.placeholderColor
+                        })
+                      },
+                      _toDisplayString(_ctx.placeholder),
+                      7
+                      /* TEXT, CLASS, STYLE */
+                    )) : _createCommentVNode("v-if", true),
+                    _renderSlot(_ctx.$slots, "arrow-icon", { focus: _ctx.showMenu }, () => [
+                      _createVNode(_component_var_icon, {
+                        class: _normalizeClass(_ctx.classes(_ctx.n("arrow"), [_ctx.showMenu, _ctx.n("--arrow-rotate")])),
+                        "var-select-cover": "",
+                        name: "menu-down",
+                        transition: 300
+                      }, null, 8, ["class"])
+                    ])
+                  ],
+                  6
+                  /* CLASS, STYLE */
+                )
+              ]),
+              _: 2
+              /* DYNAMIC */
+            }, [
+              _ctx.$slots["prepend-icon"] ? {
+                name: "prepend-icon",
+                fn: _withCtx(() => [
+                  _renderSlot(_ctx.$slots, "prepend-icon")
+                ]),
+                key: "0"
+              } : void 0
+            ]),
+            1040
+            /* FULL_PROPS, DYNAMIC_SLOTS */
+          )
+        ]),
+        _: 3
+        /* FORWARDED */
+      }, 8, ["show", "class", "popover-class", "offset-y", "disabled", "placement", "onClickOutside"]),
+      _createVNode(_component_var_form_details, {
+        "error-message": _ctx.errorMessage,
+        onClick: _cache[2] || (_cache[2] = _withModifiers(() => {
+        }, ["stop"]))
+      }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: {
+    VarIcon,
+    VarMenu,
+    VarChip,
+    VarFieldDecorator,
+    VarFormDetails
+  },
+  props,
+  setup(props2) {
+    const isFocus = ref(false);
+    const showMenu = ref(false);
+    const multiple = computed(() => props2.multiple);
+    const focusColor = computed(() => props2.focusColor);
+    const isEmptyModelValue = computed(() => isEmpty(props2.modelValue));
+    const cursor = computed(() => props2.disabled || props2.readonly ? "" : "pointer");
+    const offsetY = ref(0);
+    const { bindForm, form } = useForm();
+    const { length, options, bindOptions } = useOptions();
+    const { label, labels, computeLabel, getSelectedValue } = useSelectController({
+      modelValue: () => props2.modelValue,
+      multiple: () => props2.multiple,
+      optionProviders: () => options,
+      optionProvidersLength: () => length.value
+    });
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const menuEl = ref(null);
+    const placement = computed(() => props2.variant === "outlined" ? "bottom" : "cover-top");
+    const placeholderColor = computed(() => {
+      const { hint, blurColor, focusColor: focusColor2 } = props2;
+      if (hint) {
+        return void 0;
+      }
+      if (errorMessage.value) {
+        return "var(--field-decorator-error-color)";
+      }
+      if (isFocus.value) {
+        return focusColor2 || "var(--field-decorator-focus-color)";
+      }
+      return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
+    });
+    const enableCustomPlaceholder = computed(() => !props2.hint && isEmpty(props2.modelValue));
+    const selectProvider = {
+      multiple,
+      focusColor,
+      computeLabel,
+      onSelect,
+      reset,
+      validate,
+      resetValidation
+    };
+    watch(
+      () => props2.multiple,
+      () => {
+        const { multiple: multiple2, modelValue } = props2;
+        if (multiple2 && !isArray(modelValue)) {
+          error("Select", "The modelValue must be an array when multiple is true");
+        }
+      }
+    );
+    bindOptions(selectProvider);
+    call(bindForm, selectProvider);
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function handleFocus() {
+      const { disabled, readonly, onFocus } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+        return;
+      }
+      offsetY.value = toPxNum(props2.offsetY);
+      isFocus.value = true;
+      call(onFocus);
+      validateWithTrigger("onFocus");
+    }
+    function handleBlur() {
+      const { disabled, readonly, onBlur } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+        return;
+      }
+      blur();
+      call(onBlur);
+      validateWithTrigger("onBlur");
+    }
+    function onSelect(option) {
+      const { disabled, readonly, multiple: multiple2, onChange } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+        return;
+      }
+      const selectedValue = getSelectedValue(option);
+      call(props2["onUpdate:modelValue"], selectedValue);
+      call(onChange, selectedValue);
+      validateWithTrigger("onChange");
+      if (!multiple2) {
+        blur();
+      }
+    }
+    function handleClear() {
+      const { disabled, readonly, multiple: multiple2, clearable, onClear } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || !clearable) {
+        return;
+      }
+      const changedModelValue = multiple2 ? [] : void 0;
+      call(props2["onUpdate:modelValue"], changedModelValue);
+      call(onClear, changedModelValue);
+      validateWithTrigger("onClear");
+    }
+    function handleClick(e) {
+      const { disabled, onClick } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || disabled) {
+        return;
+      }
+      call(onClick, e);
+      validateWithTrigger("onClick");
+    }
+    function handleClose(text) {
+      const { disabled, readonly, modelValue, onClose } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
+        return;
+      }
+      const option = options.find(({ label: label2 }) => label2.value === text);
+      const currentModelValue = modelValue.filter(
+        (value) => {
+          var _a;
+          return value !== ((_a = option.value.value) != null ? _a : option.label.value);
+        }
+      );
+      call(props2["onUpdate:modelValue"], currentModelValue);
+      call(onClose, currentModelValue);
+      validateWithTrigger("onClose");
+    }
+    function focus() {
+      offsetY.value = toPxNum(props2.offsetY);
+      isFocus.value = true;
+      showMenu.value = true;
+    }
+    function blur() {
+      isFocus.value = false;
+      showMenu.value = false;
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    function reset() {
+      call(props2["onUpdate:modelValue"], props2.multiple ? [] : void 0);
+      resetValidation();
+    }
+    return {
+      offsetY,
+      isFocus,
+      showMenu,
+      errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      label,
+      labels,
+      isEmptyModelValue,
+      menuEl,
+      placement,
+      cursor,
+      placeholderColor,
+      enableCustomPlaceholder,
+      n,
+      classes,
+      handleFocus,
+      handleBlur,
+      handleClear,
+      handleClick,
+      handleClose,
+      reset,
+      validate,
+      resetValidation,
+      focus,
+      blur
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/select/index.mjs

@@ -0,0 +1,12 @@
+import Select from "./Select.mjs";
+import { withInstall, withPropsDefaultsSetter } from "../utils/components.mjs";
+import { props as selectProps } from "./props.mjs";
+withInstall(Select);
+withPropsDefaultsSetter(Select, selectProps);
+const _SelectComponent = Select;
+var stdin_default = Select;
+export {
+  _SelectComponent,
+  stdin_default as default,
+  selectProps
+};

package/es/select/props.mjs

@@ -0,0 +1,64 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+import { defineListenerProp, pickProps } from "../utils/components.mjs";
+import { fieldDecoratorProps } from "../field-decorator/index.mjs";
+const props = __spreadValues({
+  modelValue: {
+    default: void 0
+  },
+  multiple: Boolean,
+  offsetY: {
+    type: [String, Number],
+    default: 0
+  },
+  chip: Boolean,
+  readonly: Boolean,
+  separator: {
+    type: String,
+    default: ","
+  },
+  textAlign: {
+    type: String,
+    default: "left"
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange", "onClear", "onClose"]
+  },
+  rules: Array,
+  onFocus: defineListenerProp(),
+  onBlur: defineListenerProp(),
+  onClose: defineListenerProp(),
+  onChange: defineListenerProp(),
+  onClear: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+}, pickProps(fieldDecoratorProps, [
+  "size",
+  "variant",
+  "placeholder",
+  "line",
+  "hint",
+  "textColor",
+  "focusColor",
+  "blurColor",
+  "disabled",
+  "clearable",
+  "onClick"
+]));
+export {
+  props
+};

package/es/select/provide.mjs

@@ -0,0 +1,14 @@
+import { useChildren } from "@varlet/use";
+const SELECT_BIND_OPTION_KEY = Symbol("SELECT_BIND_OPTION_KEY");
+function useOptions() {
+  const { length, childProviders, bindChildren } = useChildren(SELECT_BIND_OPTION_KEY);
+  return {
+    length,
+    options: childProviders,
+    bindOptions: bindChildren
+  };
+}
+export {
+  SELECT_BIND_OPTION_KEY,
+  useOptions
+};

package/es/select/select.css

@@ -0,0 +1 @@
+:root { --select-scroller-background: #fff; --select-scroller-padding: 6px 0; --select-scroller-max-height: 278px; --select-scroller-border-radius: 2px; --select-chip-margin: 5px 5px 0; --select-arrow-size: 20px; --select-standard-menu-margin: calc(var(--field-decorator-placeholder-size) * 0.75 + 12px) 0 0 0; --select-label-font-size: 16px;}.var-select { text-align: left;}.var-select__menu[var-select-cover] { width: 100%; background: transparent; display: block;}.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; transition: background-color 0.25s; border-radius: var(--select-scroller-border-radius);}.var-select__wrap { position: relative; display: flex; flex-direction: column; width: 100%;}.var-select__select { display: flex; justify-content: space-between; align-items: center; width: 100%; min-height: 24px; outline: none; border: none; font-size: inherit; color: var(--field-decorator-text-color); word-break: break-all; overflow: hidden; transition: color 0.25s;}.var-select__label { display: flex; align-items: center; font-size: var(--select-label-font-size);}.var-select__placeholder { max-width: 100%; position: absolute; top: 50%; left: 0; transform: translateY(-50%); font-size: var(--field-decorator-placeholder-size); line-height: 1.5em; color: var(--field-decorator-blur-color); pointer-events: none; cursor: inherit;}.var-select__arrow[var-select-cover] { flex-shrink: 0; font-size: var(--select-arrow-size);}.var-select--standard-menu-margin { margin: var(--select-standard-menu-margin) !important;}.var-select--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-select--error { color: var(--field-decorator-error-color);}.var-select--arrow-rotate { transform: rotate(180deg);}

package/es/select/style/index.mjs

@@ -0,0 +1,9 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../icon/icon.css'
+import '../../menu/menu.css'
+import '../../field-decorator/fieldDecorator.css'
+import '../../form-details/formDetails.css'
+import '../../chip/chip.css'
+import '../select.css'
+import '../SelectSfc.css'

package/es/select/useSelectController.mjs

@@ -0,0 +1,67 @@
+import { ref, watch } from "vue";
+import { isEmpty } from "@varlet/shared";
+function useSelectController(options) {
+  const {
+    multiple: multipleGetter,
+    modelValue: modelValueGetter,
+    optionProviders: optionProvidersGetter,
+    optionProvidersLength: optionProvidersLengthGetter
+  } = options;
+  const label = ref("");
+  const labels = ref([]);
+  watch(modelValueGetter, syncOptions, { deep: true });
+  watch(optionProvidersLengthGetter, syncOptions);
+  function computeLabel() {
+    const multiple = multipleGetter();
+    const modelValue = modelValueGetter();
+    if (multiple) {
+      labels.value = modelValue.map(findLabel);
+    }
+    if (!multiple && !isEmpty(modelValue)) {
+      label.value = findLabel(modelValue);
+    }
+    if (!multiple && isEmpty(modelValue)) {
+      label.value = "";
+    }
+  }
+  function findLabel(targetValue) {
+    var _a;
+    const options2 = optionProvidersGetter();
+    let option = options2.find(({ value }) => value.value === targetValue);
+    if (!option) {
+      option = options2.find(({ label: label2 }) => label2.value === targetValue);
+    }
+    return (_a = option == null ? void 0 : option.label.value) != null ? _a : "";
+  }
+  function findValueOrLabel({ value, label: label2 }) {
+    if (value.value != null) {
+      return value.value;
+    }
+    return label2.value;
+  }
+  function getSelectedValue(option) {
+    const multiple = multipleGetter();
+    const options2 = optionProvidersGetter();
+    return multiple ? options2.filter(({ selected }) => selected.value).map(findValueOrLabel) : findValueOrLabel(option);
+  }
+  function syncOptions() {
+    const multiple = multipleGetter();
+    const modelValue = modelValueGetter();
+    const options2 = optionProvidersGetter();
+    if (multiple) {
+      options2.forEach((option) => option.sync(modelValue.includes(findValueOrLabel(option))));
+    } else {
+      options2.forEach((option) => option.sync(modelValue === findValueOrLabel(option)));
+    }
+    computeLabel();
+  }
+  return {
+    label,
+    labels,
+    computeLabel,
+    getSelectedValue
+  };
+}
+export {
+  useSelectController
+};