@varlet/ui 3.5.0 → 3.5.1

package/es/pull-refresh/PullRefresh.mjs

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

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

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

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

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

package/es/radio/Radio.mjs

@@ -1,245 +0,0 @@
-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, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-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

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

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

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

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

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