@varlet/ui 3.5.1 → 3.5.2

package/es/pull-refresh/PullRefresh.mjs

@@ -0,0 +1,217 @@
+var __async = (__this, __arguments, generator) => {
+  return new Promise((resolve, reject) => {
+    var fulfilled = (value) => {
+      try {
+        step(generator.next(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var rejected = (value) => {
+      try {
+        step(generator.throw(value));
+      } catch (e) {
+        reject(e);
+      }
+    };
+    var step = (x) => x.done ? resolve(x.value) : Promise.resolve(x.value).then(fulfilled, rejected);
+    step((generator = generator.apply(__this, __arguments)).next());
+  });
+};
+import VarIcon from "../icon/index.mjs";
+import { defineComponent, ref, computed, watch, nextTick } from "vue";
+import { getParentScroller, getTarget } from "../utils/elements.mjs";
+import { props } from "./props.mjs";
+import { isNumber, isString, toNumber, getRect, preventDefault, getScrollTop, call } from "@varlet/shared";
+import { createNamespace } from "../utils/components.mjs";
+import { useEventListener, onSmartMounted, useTouch } from "@varlet/use";
+const { name, n, classes } = createNamespace("pull-refresh");
+const ICON_TRANSITION = 150;
+import { resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, renderSlot as _renderSlot, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      ref: "freshNode",
+      class: _normalizeClass(_ctx.n()),
+      onTouchstart: _cache[0] || (_cache[0] = (...args) => _ctx.handleTouchstart && _ctx.handleTouchstart(...args)),
+      onTouchend: _cache[1] || (_cache[1] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args)),
+      onTouchcancel: _cache[2] || (_cache[2] = (...args) => _ctx.handleTouchend && _ctx.handleTouchend(...args))
+    },
+    [
+      _createElementVNode(
+        "div",
+        {
+          ref: "controlNode",
+          class: _normalizeClass(_ctx.classes(_ctx.n("control"), _ctx.n("$-elevation--2"), [_ctx.isSuccess, _ctx.n("control-success")])),
+          style: _normalizeStyle(_ctx.controlStyle)
+        },
+        [
+          _createVNode(_component_var_icon, {
+            name: _ctx.iconName,
+            transition: _ctx.ICON_TRANSITION,
+            class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.refreshStatus === "loading", _ctx.n("animation")])),
+            "var-pull-refresh-cover": ""
+          }, null, 8, ["name", "transition", "class"])
+        ],
+        6
+        /* CLASS, STYLE */
+      ),
+      _renderSlot(_ctx.$slots, "default")
+    ],
+    34
+    /* CLASS, NEED_HYDRATION */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  components: { VarIcon },
+  props,
+  setup(props2) {
+    const controlPosition = ref(0);
+    const freshNode = ref(null);
+    const controlNode = ref(null);
+    const startPosition = ref(0);
+    const distance = ref("-125%");
+    const iconName = ref("arrow-down");
+    const refreshStatus = ref("default");
+    const isEnd = ref(false);
+    const maxDistance = computed(() => Math.abs(2 * controlPosition.value));
+    const isSuccess = computed(() => refreshStatus.value === "success");
+    const isTouchable = computed(
+      () => refreshStatus.value !== "loading" && refreshStatus.value !== "success" && !props2.disabled
+    );
+    const controlStyle = computed(() => ({
+      transform: `translate3d(0px, ${isString(distance.value) ? distance.value : `${distance.value}px`}, 0px) translate(-50%, 0)`,
+      transition: isEnd.value ? `transform ${props2.animationDuration}ms` : void 0,
+      background: isSuccess.value ? props2.successBgColor : props2.bgColor,
+      color: isSuccess.value ? props2.successColor : props2.color
+    }));
+    const { startTouch, moveTouch, endTouch, isReachTop } = useTouch();
+    let scroller;
+    let eventTargetScroller;
+    watch(
+      () => props2.modelValue,
+      (newValue) => {
+        if (newValue === false) {
+          isEnd.value = true;
+          refreshStatus.value = "success";
+          iconName.value = "checkbox-marked-circle";
+          setTimeout(() => {
+            distance.value = controlPosition.value;
+            reset();
+          }, toNumber(props2.successDuration));
+        }
+      }
+    );
+    onSmartMounted(setScroller);
+    useEventListener(freshNode, "touchmove", handleTouchmove);
+    function startIconTransition(name2) {
+      return __async(this, null, function* () {
+        if (iconName.value === name2) {
+          return;
+        }
+        iconName.value = name2;
+        return new Promise((resolve) => {
+          window.setTimeout(resolve, ICON_TRANSITION);
+        });
+      });
+    }
+    function lockEvent(action) {
+      const el = "classList" in scroller ? scroller : document.body;
+      el.classList[action](`${n()}--lock`);
+    }
+    function handleTouchstart(event) {
+      startTouch(event);
+      if (controlPosition.value === 0) {
+        const { width } = getRect(controlNode.value);
+        controlPosition.value = -(width + width * 0.25);
+      }
+      eventTargetScroller = getParentScroller(event.target);
+    }
+    function handleTouchmove(event) {
+      moveTouch(event);
+      if (!isTouchable.value || !eventTargetScroller) {
+        return;
+      }
+      if (eventTargetScroller !== scroller && getScrollTop(eventTargetScroller) > 0) {
+        return;
+      }
+      const scrollTop = getScrollTop(scroller);
+      if (scrollTop > 0) {
+        return;
+      }
+      if (isReachTop(scroller)) {
+        preventDefault(event);
+      }
+      if (refreshStatus.value !== "pulling") {
+        refreshStatus.value = "pulling";
+        startPosition.value = event.touches[0].clientY;
+      }
+      if (isReachTop(scroller) && isNumber(distance.value) && distance.value > controlPosition.value) {
+        lockEvent("add");
+      }
+      const moveDistance = (event.touches[0].clientY - startPosition.value) / 2 + controlPosition.value;
+      distance.value = moveDistance >= maxDistance.value ? maxDistance.value : moveDistance;
+      startIconTransition(distance.value >= maxDistance.value * 0.2 ? "refresh" : "arrow-down");
+    }
+    function handleTouchend() {
+      return __async(this, null, function* () {
+        endTouch();
+        if (!isTouchable.value) {
+          return;
+        }
+        isEnd.value = true;
+        if (toNumber(distance.value) >= maxDistance.value * 0.2) {
+          yield startIconTransition("refresh");
+          refreshStatus.value = "loading";
+          distance.value = maxDistance.value * 0.3;
+          call(props2["onUpdate:modelValue"], true);
+          nextTick(() => {
+            call(props2.onRefresh);
+          });
+          lockEvent("remove");
+        } else {
+          refreshStatus.value = "loosing";
+          iconName.value = "arrow-down";
+          distance.value = controlPosition.value;
+          setTimeout(() => {
+            isEnd.value = false;
+            lockEvent("remove");
+          }, toNumber(props2.animationDuration));
+        }
+        eventTargetScroller = null;
+      });
+    }
+    function setScroller() {
+      scroller = props2.target ? getTarget(props2.target, "PullRefresh") : getParentScroller(freshNode.value);
+    }
+    function reset() {
+      setTimeout(() => {
+        refreshStatus.value = "default";
+        iconName.value = "arrow-down";
+        isEnd.value = false;
+      }, toNumber(props2.animationDuration));
+    }
+    return {
+      ICON_TRANSITION,
+      refreshStatus,
+      freshNode,
+      controlNode,
+      iconName,
+      controlStyle,
+      isSuccess,
+      n,
+      classes,
+      handleTouchstart,
+      handleTouchmove,
+      handleTouchend
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/pull-refresh/index.mjs

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

package/es/pull-refresh/props.mjs

@@ -0,0 +1,23 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: Boolean,
+  disabled: Boolean,
+  animationDuration: {
+    type: [Number, String],
+    default: 300
+  },
+  successDuration: {
+    type: [Number, String],
+    default: 2e3
+  },
+  bgColor: String,
+  successBgColor: String,
+  color: String,
+  successColor: String,
+  target: [String, Object],
+  onRefresh: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/pull-refresh/pullRefresh.css

@@ -0,0 +1 @@
+:root { --pull-refresh-size: 40px; --pull-refresh-background: #fff; --pull-refresh-color: var(--color-primary); --pull-refresh-success-color: var(--color-success); --pull-refresh-icon-size: 25px;}.var-pull-refresh { overflow: hidden; position: relative; user-select: none; width: 100%;}.var-pull-refresh__control { display: flex; width: var(--pull-refresh-size); height: var(--pull-refresh-size); align-items: center; justify-content: center; background-color: var(--pull-refresh-background); border-radius: 50%; position: absolute; left: 50%; z-index: 90; color: var(--pull-refresh-color);}.var-pull-refresh__control-success { color: var(--pull-refresh-success-color);}.var-pull-refresh__icon[var-pull-refresh-cover] { font-size: var(--pull-refresh-icon-size);}.var-pull-refresh__animation { transform: rotate(0deg); animation: iconRotate 0.6s infinite linear;}.var-pull-refresh--lock { overflow: hidden !important;}@keyframes iconRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); }}

package/es/pull-refresh/style/index.mjs

@@ -0,0 +1,5 @@
+import '../../styles/common.css'
+import '../../styles/elevation.css'
+import '../../icon/icon.css'
+import '../pullRefresh.css'
+import '../PullRefreshSfc.css'

package/es/radio/Radio.mjs

@@ -0,0 +1,244 @@
+import VarIcon from "../icon/index.mjs";
+import VarFormDetails from "../form-details/index.mjs";
+import Ripple from "../ripple/index.mjs";
+import Hover from "../hover/index.mjs";
+import VarHoverOverlay, { useHoverOverlay } from "../hover-overlay/index.mjs";
+import { computed, defineComponent, nextTick, ref } from "vue";
+import { props } from "./props.mjs";
+import { useValidation, createNamespace } from "../utils/components.mjs";
+import { useRadioGroup } from "./provide.mjs";
+import { useForm } from "../form/provide.mjs";
+import { call, preventDefault } from "@varlet/shared";
+import { useEventListener, useVModel } from "@varlet/use";
+const { name, n, classes } = createNamespace("radio");
+import { renderSlot as _renderSlot, resolveComponent as _resolveComponent, normalizeClass as _normalizeClass, createVNode as _createVNode, createCommentVNode as _createCommentVNode, normalizeStyle as _normalizeStyle, resolveDirective as _resolveDirective, openBlock as _openBlock, createElementBlock as _createElementBlock, withDirectives as _withDirectives, mergeProps as _mergeProps, createElementVNode as _createElementVNode } from "vue";
+const _hoisted_1 = ["tabindex"];
+function __render__(_ctx, _cache) {
+  const _component_var_icon = _resolveComponent("var-icon");
+  const _component_var_hover_overlay = _resolveComponent("var-hover-overlay");
+  const _component_var_form_details = _resolveComponent("var-form-details");
+  const _directive_ripple = _resolveDirective("ripple");
+  const _directive_hover = _resolveDirective("hover");
+  return _openBlock(), _createElementBlock(
+    "div",
+    {
+      class: _normalizeClass(_ctx.n("wrap"))
+    },
+    [
+      _createElementVNode(
+        "div",
+        _mergeProps({
+          class: _ctx.n(),
+          onClick: _cache[3] || (_cache[3] = (...args) => _ctx.handleClick && _ctx.handleClick(...args))
+        }, _ctx.$attrs),
+        [
+          _withDirectives((_openBlock(), _createElementBlock("div", {
+            ref: "action",
+            class: _normalizeClass(
+              _ctx.classes(
+                _ctx.n("action"),
+                [_ctx.checked, _ctx.n("--checked"), _ctx.n("--unchecked")],
+                [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
+                [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+              )
+            ),
+            tabindex: _ctx.formDisabled || _ctx.disabled ? void 0 : "0",
+            style: _normalizeStyle({ color: _ctx.checked ? _ctx.checkedColor : _ctx.uncheckedColor }),
+            onFocus: _cache[0] || (_cache[0] = ($event) => _ctx.isFocusing = true),
+            onBlur: _cache[1] || (_cache[1] = ($event) => _ctx.isFocusing = false)
+          }, [
+            _ctx.checked ? _renderSlot(_ctx.$slots, "checked-icon", { key: 0 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                "var-radio-cover": "",
+                name: "radio-marked",
+                size: _ctx.iconSize
+              }, null, 8, ["class", "size"])
+            ]) : _renderSlot(_ctx.$slots, "unchecked-icon", { key: 1 }, () => [
+              _createVNode(_component_var_icon, {
+                class: _normalizeClass(_ctx.classes(_ctx.n("icon"), [_ctx.withAnimation, _ctx.n("--with-animation")])),
+                "var-radio-cover": "",
+                name: "radio-blank",
+                size: _ctx.iconSize
+              }, null, 8, ["class", "size"])
+            ]),
+            _createVNode(_component_var_hover_overlay, {
+              hovering: !_ctx.disabled && !_ctx.formDisabled && _ctx.hovering,
+              focusing: !_ctx.disabled && !_ctx.formDisabled && _ctx.isFocusing
+            }, null, 8, ["hovering", "focusing"])
+          ], 46, _hoisted_1)), [
+            [_directive_ripple, { disabled: _ctx.formReadonly || _ctx.readonly || _ctx.formDisabled || _ctx.disabled || !_ctx.ripple }],
+            [_directive_hover, _ctx.handleHovering, "desktop"]
+          ]),
+          _ctx.$slots.default ? (_openBlock(), _createElementBlock(
+            "div",
+            {
+              key: 0,
+              class: _normalizeClass(
+                _ctx.classes(
+                  _ctx.n("text"),
+                  [_ctx.errorMessage || _ctx.radioGroupErrorMessage, _ctx.n("--error")],
+                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")]
+                )
+              ),
+              onClick: _cache[2] || (_cache[2] = (...args) => _ctx.handleTextClick && _ctx.handleTextClick(...args))
+            },
+            [
+              _renderSlot(_ctx.$slots, "default", { checked: _ctx.checked })
+            ],
+            2
+            /* CLASS */
+          )) : _createCommentVNode("v-if", true)
+        ],
+        16
+        /* FULL_PROPS */
+      ),
+      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
+    ],
+    2
+    /* CLASS */
+  );
+}
+const __sfc__ = defineComponent({
+  name,
+  directives: { Ripple, Hover },
+  components: {
+    VarIcon,
+    VarFormDetails,
+    VarHoverOverlay
+  },
+  inheritAttrs: false,
+  props,
+  setup(props2) {
+    const action = ref();
+    const isFocusing = ref(false);
+    const value = useVModel(props2, "modelValue");
+    const checked = computed(() => value.value === props2.checkedValue);
+    const withAnimation = ref(false);
+    const { radioGroup, bindRadioGroup } = useRadioGroup();
+    const { hovering, handleHovering } = useHoverOverlay();
+    const { form, bindForm } = useForm();
+    const {
+      errorMessage,
+      validateWithTrigger: vt,
+      validate: v,
+      // expose
+      resetValidation
+    } = useValidation();
+    const radioProvider = {
+      sync,
+      validate,
+      resetValidation,
+      reset,
+      isFocusing: computed(() => isFocusing.value),
+      // keyboard arrow move
+      move() {
+        action.value.focus();
+        action.value.click();
+      },
+      moveable() {
+        return !(form == null ? void 0 : form.disabled.value) && !props2.disabled && !(form == null ? void 0 : form.readonly.value) && !props2.readonly;
+      }
+    };
+    call(bindRadioGroup, radioProvider);
+    call(bindForm, radioProvider);
+    useEventListener(() => window, "keydown", handleKeydown);
+    useEventListener(() => window, "keyup", handleKeyup);
+    function handleKeydown(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      const { key } = event;
+      if (key === "Enter" || key === " ") {
+        preventDefault(event);
+      }
+      if (key === "Enter") {
+        action.value.click();
+      }
+    }
+    function handleKeyup(event) {
+      if (!isFocusing.value) {
+        return;
+      }
+      if (event.key === " ") {
+        preventDefault(event);
+        action.value.click();
+      }
+    }
+    function validateWithTrigger(trigger) {
+      nextTick(() => {
+        const { validateTrigger, rules, modelValue } = props2;
+        vt(validateTrigger, trigger, rules, modelValue);
+      });
+    }
+    function change(changedValue) {
+      const { checkedValue, onChange } = props2;
+      if (radioGroup && value.value === checkedValue) {
+        return;
+      }
+      value.value = changedValue;
+      call(onChange, value.value);
+      radioGroup == null ? void 0 : radioGroup.onToggle(checkedValue);
+      validateWithTrigger("onChange");
+    }
+    function handleClick(e) {
+      const { disabled, readonly, uncheckedValue, checkedValue, onClick } = props2;
+      if ((form == null ? void 0 : form.disabled.value) || disabled) {
+        return;
+      }
+      call(onClick, e);
+      if ((form == null ? void 0 : form.readonly.value) || readonly) {
+        return;
+      }
+      withAnimation.value = true;
+      change(checked.value ? uncheckedValue : checkedValue);
+    }
+    function handleTextClick() {
+      action.value.focus();
+    }
+    function sync(v2) {
+      const { checkedValue, uncheckedValue } = props2;
+      value.value = v2 === checkedValue ? checkedValue : uncheckedValue;
+    }
+    function reset() {
+      value.value = props2.uncheckedValue;
+      resetValidation();
+    }
+    function validate() {
+      return v(props2.rules, props2.modelValue);
+    }
+    function toggle(changedValue) {
+      const { uncheckedValue, checkedValue } = props2;
+      const shouldReverse = ![uncheckedValue, checkedValue].includes(changedValue);
+      if (shouldReverse) {
+        changedValue = checked.value ? uncheckedValue : checkedValue;
+      }
+      change(changedValue);
+    }
+    return {
+      action,
+      isFocusing,
+      withAnimation,
+      checked,
+      errorMessage,
+      radioGroupErrorMessage: radioGroup == null ? void 0 : radioGroup.errorMessage,
+      formDisabled: form == null ? void 0 : form.disabled,
+      formReadonly: form == null ? void 0 : form.readonly,
+      hovering,
+      handleHovering,
+      n,
+      classes,
+      handleClick,
+      handleTextClick,
+      toggle,
+      reset,
+      validate,
+      resetValidation
+    };
+  }
+});
+__sfc__.render = __render__;
+var stdin_default = __sfc__;
+export {
+  stdin_default as default
+};

package/es/radio/index.mjs

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

package/es/radio/props.mjs

@@ -0,0 +1,35 @@
+import { defineListenerProp } from "../utils/components.mjs";
+const props = {
+  modelValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: false
+  },
+  checkedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: true
+  },
+  uncheckedValue: {
+    type: [String, Number, Boolean, Object, Array],
+    default: false
+  },
+  disabled: Boolean,
+  readonly: Boolean,
+  checkedColor: String,
+  uncheckedColor: String,
+  iconSize: [String, Number],
+  ripple: {
+    type: Boolean,
+    default: true
+  },
+  validateTrigger: {
+    type: Array,
+    default: () => ["onChange"]
+  },
+  rules: [Array, Function, Object],
+  onClick: defineListenerProp(),
+  onChange: defineListenerProp(),
+  "onUpdate:modelValue": defineListenerProp()
+};
+export {
+  props
+};

package/es/radio/provide.mjs

@@ -0,0 +1,13 @@
+import { useParent } from "@varlet/use";
+import { RADIO_GROUP_BIND_RADIO_KEY } from "../radio-group/provide.mjs";
+function useRadioGroup() {
+  const { bindParent, parentProvider, index } = useParent(RADIO_GROUP_BIND_RADIO_KEY);
+  return {
+    index,
+    radioGroup: parentProvider,
+    bindRadioGroup: bindParent
+  };
+}
+export {
+  useRadioGroup
+};

package/es/radio/radio.css

@@ -0,0 +1 @@
+:root { --radio-checked-color: var(--color-primary); --radio-unchecked-color: #555; --radio-disabled-color: var(--color-text-disabled); --radio-error-color: var(--color-danger); --radio-icon-size: 24px; --radio-action-padding: 6px; --radio-text-color: #555;}@keyframes var-vibrate-animation { 0% { opacity: 1; transform: scale(1); } 50% { opacity: 0.8; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1); }}.var-radio { display: flex; align-items: center; transform: translateX(calc(-1 * var(--radio-action-padding))); cursor: pointer; -webkit-tap-highlight-color: transparent;}.var-radio__wrap { display: inline-flex; flex-direction: column;}.var-radio__action { position: relative; display: flex; justify-content: center; align-items: center; flex-shrink: 0; padding: var(--radio-action-padding); border-radius: 50%; outline: none; transition: background-color 0.25s, color 0.25s;}.var-radio__icon[var-radio-cover] { display: block; font-size: var(--radio-icon-size);}.var-radio__text { color: var(--radio-text-color);}.var-radio--with-animation[var-radio-cover] { animation: var-vibrate-animation 0.25s;}.var-radio--checked { color: var(--radio-checked-color);}.var-radio--unchecked { color: var(--radio-unchecked-color);}.var-radio--disabled { color: var(--radio-disabled-color); cursor: not-allowed;}.var-radio--error { color: var(--radio-error-color);}

package/es/radio/style/index.mjs

@@ -0,0 +1,7 @@
+import '../../styles/common.css'
+import '../../ripple/ripple.css'
+import '../../icon/icon.css'
+import '../../form-details/formDetails.css'
+import '../../hover-overlay/hoverOverlay.css'
+import '../radio.css'
+import '../RadioSfc.css'