@varlet/ui 2.20.0 → 2.20.1

package/es/select/Select.mjs

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

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

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

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

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

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

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