@varlet/ui 2.17.0 → 2.18.0-alpha.1697472019506

package/es/option/Option.mjs

@@ -7,7 +7,7 @@ import { useSelect } from "./provide.mjs";
 import { createNamespace } from "../utils/components.mjs";
 import { props } from "./props.mjs";
 const { name, n, classes } = createNamespace("option");
-import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
+import { normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, resolveComponent as _resolveComponent, withModifiers as _withModifiers, openBlock as _openBlock, createBlock as _createBlock, createCommentVNode as _createCommentVNode, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createVNode as _createVNode, resolveDirective as _resolveDirective, createElementBlock as _createElementBlock, withDirectives as _withDirectives } from "vue";
 function __render__(_ctx, _cache) {
   const _component_var_checkbox = _resolveComponent("var-checkbox");
   const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
@@ -16,7 +16,7 @@ function __render__(_ctx, _cache) {
   return _withDirectives((_openBlock(), _createElementBlock(
     "div",
     {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")])),
+      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"), [_ctx.optionSelected, _ctx.n("--selected-color")], [_ctx.disabled, _ctx.n("--disabled")])),
       style: _normalizeStyle({
         color: _ctx.optionSelected ? _ctx.focusColor : void 0
       }),
@@ -38,36 +38,33 @@ function __render__(_ctx, _cache) {
       _ctx.multiple ? (_openBlock(), _createBlock(_component_var_checkbox, {
         key: 0,
         ref: "checkbox",
-        "checked-color": _ctx.focusColor,
         modelValue: _ctx.optionSelected,
         "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.optionSelected = $event),
+        "checked-color": _ctx.focusColor,
+        disabled: _ctx.disabled,
         onClick: _cache[1] || (_cache[1] = _withModifiers(() => {
         }, ["stop"])),
         onChange: _ctx.handleSelect
-      }, null, 8, ["checked-color", "modelValue", "onChange"])) : _createCommentVNode("v-if", true),
-      _createElementVNode(
-        "div",
-        {
-          class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
-        },
-        [
-          _renderSlot(_ctx.$slots, "default", {}, () => [
-            _createTextVNode(
-              _toDisplayString(_ctx.label),
-              1
-              /* TEXT */
-            )
-          ])
-        ],
-        2
-        /* CLASS */
-      ),
-      _createVNode(_component_var_hover_overlay, { hovering: _ctx.hovering }, null, 8, ["hovering"])
+      }, null, 8, ["modelValue", "checked-color", "disabled", "onChange"])) : _createCommentVNode("v-if", true),
+      _renderSlot(_ctx.$slots, "default", {}, () => [
+        _createElementVNode(
+          "div",
+          {
+            class: _normalizeClass(_ctx.classes(_ctx.n("text"), _ctx.n("$--ellipsis")))
+          },
+          _toDisplayString(_ctx.label),
+          3
+          /* TEXT, CLASS */
+        )
+      ]),
+      _createVNode(_component_var_hover_overlay, {
+        hovering: _ctx.hovering && !_ctx.disabled
+      }, null, 8, ["hovering"])
     ],
     6
     /* CLASS, STYLE */
   )), [
-    [_directive_ripple],
+    [_directive_ripple, { disabled: _ctx.disabled }],
     [_directive_hover, _ctx.handleHovering, "desktop"]
   ]);
 }
@@ -96,24 +93,27 @@ const __sfc__ = defineComponent({
     watch([() => props2.label, () => props2.value], computeLabel);
     bindSelect(optionProvider);
     function handleClick() {
+      if (props2.disabled) {
+        return;
+      }
+      handleSelect();
+    }
+    function handleSelect() {
       if (multiple.value) {
         optionSelected.value = !optionSelected.value;
       }
       onSelect(optionProvider);
     }
-    function handleSelect() {
-      return onSelect(optionProvider);
-    }
     function sync(checked) {
       optionSelected.value = checked;
     }
     return {
-      n,
-      classes,
       optionSelected,
       multiple,
       focusColor,
       hovering,
+      n,
+      classes,
       handleHovering,
       handleClick,
       handleSelect

package/es/option/option.css

@@ -1 +1 @@
-:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --options-text-color: #555;}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--options-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center; font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}
+:root { --option-height: 38px; --option-padding: 0 12px; --option-font-size: 16px; --option-selected-background: var(--field-decorator-focus-color); --option-text-color: #555; --option-disabled-color: var(--color-text-disabled);}.var-option { position: relative; display: flex; align-items: center; height: var(--option-height); padding: var(--option-padding); cursor: pointer; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); color: var(--option-text-color);}.var-option__cover { position: absolute; top: 0; left: 0; right: 0; bottom: 0; opacity: 0.2; background: transparent;}.var-option__text { display: flex; align-items: center; font-size: var(--option-font-size);}.var-option--selected-background { background: var(--option-selected-background);}.var-option--selected-color { color: var(--option-selected-background);}.var-option--disabled { color: var(--option-disabled-color); cursor: not-allowed;}

package/es/option/props.mjs

@@ -1,6 +1,7 @@
 const props = {
   label: {},
-  value: {}
+  value: {},
+  disabled: Boolean
 };
 export {
   props

package/es/popup/popup.css

@@ -1 +1 @@
-:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { min-width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { min-width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { min-height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { min-height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}
+:root { --popup-content-background-color: #fff; --popup-overlay-background-color: rgba(0, 0, 0, 0.6);}.var-fade-enter-from,.var-fade-leave-to { opacity: 0;}.var-fade-enter-active,.var-fade-leave-active { transition: opacity 0.25s;}.var-pop-center-enter-from,.var-pop-center-leave-to { transform: scale(0.3);}.var-pop-center-enter-active,.var-pop-center-leave-active { transition: all 0.25s;}.var-pop-bottom-enter-from,.var-pop-bottom-leave-to { transform: translateY(100%);}.var-pop-bottom-enter-active,.var-pop-bottom-leave-active { transition: all 0.25s;}.var-pop-top-enter-from,.var-pop-top-leave-to { transform: translateY(-100%);}.var-pop-top-enter-active,.var-pop-top-leave-active { transition: all 0.25s;}.var-pop-left-enter-from,.var-pop-left-leave-to { transform: translateX(-100%);}.var-pop-left-enter-active,.var-pop-left-leave-active { transition: all 0.25s;}.var-pop-right-enter-from,.var-pop-right-leave-to { transform: translateX(100%);}.var-pop-right-enter-active,.var-pop-right-leave-active { transition: all 0.25s;}.var-popup { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; overflow: auto;}.var-popup__overlay { display: flex; justify-content: center; align-items: center; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background-color: var(--popup-overlay-background-color); transition: all 0.25s;}.var-popup__content { overflow: auto; transition: all 0.25s;}.var-popup--content-background-color { background-color: var(--popup-content-background-color);}.var-popup--center { position: relative;}.var-popup--bottom { width: 100%; position: absolute; left: 0; bottom: 0;}.var-popup--top { width: 100%; position: absolute; left: 0; top: 0;}.var-popup--left { height: 100%; position: absolute; left: 0; top: 0;}.var-popup--right { height: 100%; position: absolute; right: 0; top: 0;}.var-popup--safe-area { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom);}.var-popup--safe-area-top { padding-top: constant(safe-area-inset-top); padding-top: env(safe-area-inset-top);}

package/es/pull-refresh/PullRefresh.mjs

@@ -22,7 +22,7 @@ import VarIcon from "../icon/index.mjs";
 import { defineComponent, ref, computed, watch, nextTick } from "vue";
 import { getParentScroller, getScrollTop, getTarget } from "../utils/elements.mjs";
 import { props } from "./props.mjs";
-import { isNumber, isString, toNumber, getRect } from "@varlet/shared";
+import { isNumber, isString, toNumber, getRect, preventDefault } from "@varlet/shared";
 import { call, createNamespace } from "../utils/components.mjs";
 import { useEventListener, onSmartMounted } from "@varlet/use";
 const { name, n, classes } = createNamespace("pull-refresh");
@@ -147,7 +147,7 @@ const __sfc__ = defineComponent({
       const touch = event.touches[0];
       deltaY = touch.clientY - startY;
       if (isReachTop && deltaY >= 0) {
-        event.preventDefault();
+        preventDefault(event);
       }
       if (refreshStatus.value !== "pulling") {
         refreshStatus.value = "pulling";

package/es/ripple/index.mjs

@@ -110,6 +110,7 @@ function mounted(el, binding) {
   el.addEventListener("dragstart", removeRipple, { passive: true });
   document.addEventListener("touchend", el._ripple.removeRipple, { passive: true });
   document.addEventListener("touchcancel", el._ripple.removeRipple, { passive: true });
+  document.addEventListener("dragend", el._ripple.removeRipple, { passive: true });
 }
 function unmounted(el) {
   el.removeEventListener("touchstart", createRipple);
@@ -117,6 +118,7 @@ function unmounted(el) {
   el.removeEventListener("dragstart", removeRipple);
   document.removeEventListener("touchend", el._ripple.removeRipple);
   document.removeEventListener("touchcancel", el._ripple.removeRipple);
+  document.removeEventListener("dragend", el._ripple.removeRipple);
 }
 function updated(el, binding) {
   var _a, _b, _c, _d, _e, _f;

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];