@varlet/ui 2.17.1 → 2.18.0-alpha.1697511280107

package/es/select/Select.mjs

@@ -11,6 +11,7 @@ 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);
@@ -237,13 +238,17 @@ const __sfc__ = defineComponent({
     const showMenu = ref(false);
     const multiple = computed(() => props2.multiple);
     const focusColor = computed(() => props2.focusColor);
-    const label = ref("");
-    const labels = ref([]);
     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,
@@ -285,43 +290,14 @@ const __sfc__ = defineComponent({
         }
       }
     );
-    watch(() => props2.modelValue, syncOptions, { deep: true });
-    watch(() => length.value, syncOptions);
     bindOptions(selectProvider);
     call(bindForm, selectProvider);
-    function computeLabel() {
-      const { multiple: multiple2, modelValue } = props2;
-      if (multiple2) {
-        const rawModelValue = modelValue;
-        labels.value = rawModelValue.map(findLabel);
-      }
-      if (!multiple2 && !isEmpty(modelValue)) {
-        label.value = findLabel(modelValue);
-      }
-      if (!multiple2 && isEmpty(modelValue)) {
-        label.value = "";
-      }
-    }
     function validateWithTrigger(trigger) {
       nextTick(() => {
         const { validateTrigger, rules, modelValue } = props2;
         vt(validateTrigger, trigger, rules, modelValue);
       });
     }
-    function findValueOrLabel({ value, label: label2 }) {
-      if (value.value != null) {
-        return value.value;
-      }
-      return label2.value;
-    }
-    function findLabel(modelValue) {
-      var _a;
-      let option = options.find(({ value }) => value.value === modelValue);
-      if (!option) {
-        option = options.find(({ label: label2 }) => label2.value === modelValue);
-      }
-      return (_a = option == null ? void 0 : option.label.value) != null ? _a : "";
-    }
     function handleFocus() {
       const { disabled, readonly, onFocus } = props2;
       if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
@@ -346,7 +322,7 @@ const __sfc__ = defineComponent({
       if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
         return;
       }
-      const selectedValue = multiple2 ? options.filter(({ selected }) => selected.value).map(findValueOrLabel) : findValueOrLabel(option);
+      const selectedValue = getSelectedValue(option);
       call(props2["onUpdate:modelValue"], selectedValue);
       call(onChange, selectedValue);
       validateWithTrigger("onChange");
@@ -377,26 +353,17 @@ const __sfc__ = defineComponent({
       if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly) {
         return;
       }
-      const rawModelValue = modelValue;
       const option = options.find(({ label: label2 }) => label2.value === text);
-      const currentModelValue = rawModelValue.filter((value) => {
-        var _a;
-        return value !== ((_a = option.value.value) != null ? _a : option.label.value);
-      });
+      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 syncOptions() {
-      const { multiple: multiple2, modelValue } = props2;
-      if (multiple2) {
-        const rawModelValue = modelValue;
-        options.forEach((option) => option.sync(rawModelValue.includes(findValueOrLabel(option))));
-      } else {
-        options.forEach((option) => option.sync(modelValue === findValueOrLabel(option)));
-      }
-      computeLabel();
-    }
     function focus() {
       offsetY.value = toPxNum(props2.offsetY);
       isFocus.value = true;

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
+};

package/es/slider/Slider.mjs

@@ -6,7 +6,7 @@ import { useValidation, createNamespace, call } from "../utils/components.mjs";
 import { useForm } from "../form/provide.mjs";
 import { getLeft, multiplySizeUnit } from "../utils/elements.mjs";
 import { warn } from "../utils/logger.mjs";
-import { isArray, isNumber, toNumber, getRect } from "@varlet/shared";
+import { isArray, isNumber, toNumber, getRect, preventDefault } from "@varlet/shared";
 import { props, Thumbs } from "./props.mjs";
 import { onSmartMounted } from "@varlet/use";
 const { name, n, classes } = createNamespace("slider");
@@ -367,7 +367,7 @@ const __sfc__ = defineComponent({
       thumbsProps[type].startPosition = isVertical.value ? clientY : clientX;
     }
     function move(event) {
-      event.preventDefault();
+      preventDefault(event);
       if (isDisabled.value || isReadonly.value || !isScroll.value)
         return;
       const { startPosition, currentOffset } = thumbsProps[activeThumb];