@varlet/ui 3.5.0 → 3.5.1

package/es/countdown/Countdown.mjs

@@ -1,168 +0,0 @@
-import { defineComponent, onActivated, onDeactivated, onMounted, onUnmounted, ref, watch } from "vue";
-import { props } from "./props.mjs";
-import { createNamespace } from "../utils/components.mjs";
-import { padStart } from "../utils/shared.mjs";
-import { toNumber, requestAnimationFrame, cancelAnimationFrame, call } from "@varlet/shared";
-const { name, n } = createNamespace("countdown");
-const SECOND = 1e3;
-const MINUTE = 60 * SECOND;
-const HOUR = 60 * MINUTE;
-const DAY = 24 * HOUR;
-import { normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, renderSlot as _renderSlot, toDisplayString as _toDisplayString, createTextVNode as _createTextVNode, normalizeClass as _normalizeClass, openBlock as _openBlock, createElementBlock as _createElementBlock } from "vue";
-function __render__(_ctx, _cache) {
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.n())
-    },
-    [
-      _renderSlot(_ctx.$slots, "default", _normalizeProps(_guardReactiveProps(_ctx.timeData)), () => [
-        _createTextVNode(
-          _toDisplayString(_ctx.showTime),
-          1
-          /* TEXT */
-        )
-      ])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const __sfc__ = defineComponent({
-  name,
-  props,
-  setup(props2) {
-    const showTime = ref("");
-    const timeData = ref({
-      days: 0,
-      hours: 0,
-      minutes: 0,
-      seconds: 0,
-      milliseconds: 0
-    });
-    let endTime = 0;
-    let isStart = false;
-    let handle = 0;
-    let remainingTime = 0;
-    let cacheIsStart;
-    watch(
-      () => props2.time,
-      () => {
-        reset();
-        if (props2.autoStart) {
-          start();
-        }
-      }
-    );
-    onMounted(() => {
-      countdown();
-      if (props2.autoStart) {
-        start();
-      }
-    });
-    onActivated(() => {
-      if (cacheIsStart == null) {
-        return;
-      }
-      isStart = cacheIsStart;
-      if (isStart === true) {
-        start(true);
-      }
-    });
-    onDeactivated(() => {
-      cacheIsStart = isStart;
-      pause();
-    });
-    onUnmounted(pause);
-    function parseFormat(format, time) {
-      const scannedTimes = Object.values(time);
-      const scannedFormats = ["DD", "HH", "mm", "ss"];
-      const padValues = [24, 60, 60, 1e3];
-      scannedFormats.forEach((scannedFormat, index) => {
-        if (!format.includes(scannedFormat)) {
-          scannedTimes[index + 1] += scannedTimes[index] * padValues[index];
-        } else {
-          format = format.replace(scannedFormat, padStart(`${scannedTimes[index]}`, 2, "0"));
-        }
-      });
-      if (format.includes("S")) {
-        const ms = padStart(`${scannedTimes[scannedTimes.length - 1]}`, 3, "0");
-        if (format.includes("SSS")) {
-          format = format.replace("SSS", ms);
-        } else if (format.includes("SS")) {
-          format = format.replace("SS", ms.slice(0, 2));
-        } else {
-          format = format.replace("S", ms.slice(0, 1));
-        }
-      }
-      return format;
-    }
-    function displayTime(durationTime) {
-      const days = Math.floor(durationTime / DAY);
-      const hours = Math.floor(durationTime % DAY / HOUR);
-      const minutes = Math.floor(durationTime % HOUR / MINUTE);
-      const seconds = Math.floor(durationTime % MINUTE / SECOND);
-      const milliseconds = Math.floor(durationTime % SECOND);
-      const time = {
-        days,
-        hours,
-        minutes,
-        seconds,
-        milliseconds
-      };
-      timeData.value = time;
-      call(props2.onChange, timeData.value);
-      showTime.value = parseFormat(props2.format, time);
-    }
-    function countdown() {
-      const { time, onEnd } = props2;
-      const now = performance.now();
-      if (!endTime) {
-        endTime = now + toNumber(time);
-      }
-      remainingTime = endTime - now;
-      if (remainingTime < 0) {
-        remainingTime = 0;
-      }
-      displayTime(remainingTime);
-      if (remainingTime === 0) {
-        call(onEnd);
-        return;
-      }
-      if (isStart) {
-        handle = requestAnimationFrame(countdown);
-      }
-    }
-    function start(resume = false) {
-      if (isStart && !resume) {
-        return;
-      }
-      isStart = true;
-      endTime = performance.now() + (remainingTime || toNumber(props2.time));
-      countdown();
-    }
-    function pause() {
-      isStart = false;
-      cancelAnimationFrame(handle);
-    }
-    function reset() {
-      endTime = 0;
-      isStart = false;
-      cancelAnimationFrame(handle);
-      countdown();
-    }
-    return {
-      showTime,
-      timeData,
-      n,
-      start,
-      pause,
-      reset
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/countdown/countdown.css

@@ -1 +0,0 @@
-:root { --countdown-text-color: var(--color-text); --countdown-text-font-size: var(--font-size-lg);}.var-countdown { color: var(--countdown-text-color); font-size: var(--countdown-text-font-size);}

package/es/countdown/index.mjs

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

package/es/countdown/props.mjs

@@ -1,20 +0,0 @@
-import { defineListenerProp } from "../utils/components.mjs";
-const props = {
-  time: {
-    type: [String, Number],
-    default: 0
-  },
-  format: {
-    type: String,
-    default: "HH : mm : ss"
-  },
-  autoStart: {
-    type: Boolean,
-    default: true
-  },
-  onEnd: defineListenerProp(),
-  onChange: defineListenerProp()
-};
-export {
-  props
-};

package/es/countdown/style/index.mjs

@@ -1,3 +0,0 @@
-import '../../styles/common.css'
-import '../countdown.css'
-import '../CountdownSfc.css'

package/es/counter/Counter.mjs

@@ -1,333 +0,0 @@
-import VarButton from "../button/index.mjs";
-import VarIcon from "../icon/index.mjs";
-import VarFormDetails from "../form-details/index.mjs";
-import Ripple from "../ripple/index.mjs";
-import { defineComponent, ref, watch, computed, nextTick } from "vue";
-import { Decimal } from "decimal.js";
-import { props } from "./props.mjs";
-import { toNumber, call } from "@varlet/shared";
-import { toSizeUnit } from "../utils/elements.mjs";
-import { useForm } from "../form/provide.mjs";
-import { useValidation, createNamespace, formatElevation } from "../utils/components.mjs";
-const SPEED = 100;
-const DELAY = 600;
-const { name, n, classes } = createNamespace("counter");
-import { resolveComponent as _resolveComponent, createVNode as _createVNode, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, withCtx as _withCtx, vModelText as _vModelText, createElementVNode as _createElementVNode, withDirectives as _withDirectives, mergeProps as _mergeProps, openBlock as _openBlock, createElementBlock as _createElementBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["inputmode", "readonly", "disabled"];
-function __render__(_ctx, _cache) {
-  const _component_var_icon = _resolveComponent("var-icon");
-  const _component_var_button = _resolveComponent("var-button");
-  const _component_var_form_details = _resolveComponent("var-form-details");
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box")))
-    },
-    [
-      _createElementVNode(
-        "div",
-        _mergeProps({
-          class: _ctx.classes(
-            _ctx.n("controller"),
-            _ctx.formatElevation(_ctx.elevation, 2),
-            [_ctx.disabled || _ctx.formDisabled, _ctx.n("--disabled")],
-            [_ctx.errorMessage, _ctx.n("--error")]
-          ),
-          style: { background: _ctx.color }
-        }, _ctx.$attrs),
-        [
-          _createVNode(_component_var_button, {
-            class: _normalizeClass(
-              _ctx.classes(
-                _ctx.n("decrement-button"),
-                [!_ctx.decrementButton, _ctx.n("--hidden")],
-                [_ctx.disabled || _ctx.formDisabled, _ctx.n("--not-allowed")]
-              )
-            ),
-            style: _normalizeStyle({
-              width: _ctx.toSizeUnit(_ctx.buttonSize),
-              height: _ctx.toSizeUnit(_ctx.buttonSize)
-            }),
-            round: "",
-            "var-counter-cover": "",
-            ripple: _ctx.ripple && _ctx.decrementButton && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly && !_ctx.disableDecrement && !_ctx.isMin,
-            onClick: _ctx.decrement,
-            onTouchstart: _ctx.pressDecrement,
-            onTouchend: _ctx.releaseDecrement,
-            onTouchcancel: _ctx.releaseDecrement
-          }, {
-            default: _withCtx(() => [
-              _createVNode(_component_var_icon, { name: "minus" })
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["class", "style", "ripple", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"]),
-          _withDirectives(_createElementVNode("input", {
-            class: _normalizeClass(_ctx.classes(_ctx.n("input"), [_ctx.disabled || _ctx.formDisabled, _ctx.n("--not-allowed")])),
-            style: _normalizeStyle({
-              width: _ctx.toSizeUnit(_ctx.inputWidth),
-              fontSize: _ctx.toSizeUnit(_ctx.inputTextSize)
-            }),
-            inputmode: _ctx.toNumber(_ctx.decimalLength) === 0 ? "numeric" : "decimal",
-            readonly: _ctx.readonly || _ctx.formReadonly,
-            disabled: _ctx.disabled || _ctx.formDisabled || _ctx.disableInput,
-            "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.inputValue = $event),
-            onChange: _cache[1] || (_cache[1] = (...args) => _ctx.handleChange && _ctx.handleChange(...args))
-          }, null, 46, _hoisted_1), [
-            [_vModelText, _ctx.inputValue]
-          ]),
-          _createVNode(_component_var_button, {
-            class: _normalizeClass(
-              _ctx.classes(
-                _ctx.n("increment-button"),
-                [!_ctx.incrementButton, _ctx.n("--hidden")],
-                [_ctx.disabled || _ctx.formDisabled, _ctx.n("--not-allowed")]
-              )
-            ),
-            style: _normalizeStyle({
-              width: _ctx.toSizeUnit(_ctx.buttonSize),
-              height: _ctx.toSizeUnit(_ctx.buttonSize)
-            }),
-            round: "",
-            "var-counter-cover": "",
-            ripple: _ctx.ripple && _ctx.incrementButton && !_ctx.disabled && !_ctx.formDisabled && !_ctx.readonly && !_ctx.formReadonly && !_ctx.disableIncrement && !_ctx.isMax,
-            onClick: _ctx.increment,
-            onTouchstart: _ctx.pressIncrement,
-            onTouchend: _ctx.releaseIncrement,
-            onTouchcancel: _ctx.releaseIncrement
-          }, {
-            default: _withCtx(() => [
-              _createVNode(_component_var_icon, { name: "plus" })
-            ]),
-            _: 1
-            /* STABLE */
-          }, 8, ["class", "style", "ripple", "onClick", "onTouchstart", "onTouchend", "onTouchcancel"])
-        ],
-        16
-        /* FULL_PROPS */
-      ),
-      _createVNode(_component_var_form_details, { "error-message": _ctx.errorMessage }, null, 8, ["error-message"])
-    ],
-    2
-    /* CLASS */
-  );
-}
-const __sfc__ = defineComponent({
-  name,
-  components: {
-    VarButton,
-    VarIcon,
-    VarFormDetails
-  },
-  directives: { Ripple },
-  inheritAttrs: false,
-  props,
-  setup(props2) {
-    const inputValue = ref("");
-    const { bindForm, form } = useForm();
-    const {
-      errorMessage,
-      validateWithTrigger: vt,
-      validate: v,
-      // expose
-      resetValidation
-    } = useValidation();
-    const { readonly: formReadonly, disabled: formDisabled } = form != null ? form : {};
-    const isMax = computed(() => {
-      const { max, modelValue } = props2;
-      return max != null && toNumber(modelValue) >= toNumber(max);
-    });
-    const isMin = computed(() => {
-      const { min, modelValue } = props2;
-      return min != null && toNumber(modelValue) <= toNumber(min);
-    });
-    let incrementTimer;
-    let decrementTimer;
-    let incrementDelayTimer;
-    let decrementDelayTimer;
-    const counterProvider = {
-      reset,
-      validate,
-      resetValidation
-    };
-    call(bindForm, counterProvider);
-    watch(
-      () => props2.modelValue,
-      (newValue) => {
-        setNormalizedValue(normalizeValue(String(newValue)));
-        call(props2.onChange, toNumber(newValue));
-      }
-    );
-    setNormalizedValue(normalizeValue(String(props2.modelValue)));
-    function validate() {
-      return v(props2.rules, props2.modelValue);
-    }
-    function validateWithTrigger(trigger) {
-      nextTick(() => {
-        const { validateTrigger, rules, modelValue } = props2;
-        vt(validateTrigger, trigger, rules, modelValue);
-      });
-    }
-    function reset() {
-      const { min } = props2;
-      call(props2["onUpdate:modelValue"], min != null ? toNumber(min) : 0);
-      resetValidation();
-    }
-    function normalizeValue(value) {
-      const { decimalLength, max, min } = props2;
-      let num = toNumber(value);
-      if (max != null && num > toNumber(max)) {
-        num = toNumber(max);
-      }
-      if (min != null && num < toNumber(min)) {
-        num = toNumber(min);
-      }
-      value = String(num);
-      if (decimalLength != null) {
-        value = num.toFixed(toNumber(decimalLength));
-      }
-      return value;
-    }
-    function handleChange(event) {
-      const { lazyChange, onBeforeChange } = props2;
-      const { value } = event.target;
-      const normalizedValue = normalizeValue(value);
-      lazyChange ? call(onBeforeChange, toNumber(normalizedValue), change) : setNormalizedValue(normalizedValue);
-      validateWithTrigger("onInputChange");
-    }
-    function decrement() {
-      const {
-        disabled,
-        readonly,
-        disableDecrement,
-        decrementButton,
-        lazyChange,
-        step,
-        modelValue,
-        onDecrement,
-        onBeforeChange
-      } = props2;
-      if ((formDisabled == null ? void 0 : formDisabled.value) || (formReadonly == null ? void 0 : formReadonly.value) || disabled || readonly || disableDecrement || !decrementButton) {
-        return;
-      }
-      if (isMin.value) {
-        return;
-      }
-      const value = new Decimal(toNumber(modelValue)).minus(new Decimal(toNumber(step))).toString();
-      const normalizedValue = normalizeValue(value);
-      const normalizedValueNum = toNumber(normalizedValue);
-      call(onDecrement, normalizedValueNum);
-      if (lazyChange) {
-        call(onBeforeChange, normalizedValueNum, change);
-      } else {
-        setNormalizedValue(normalizedValue);
-        validateWithTrigger("onDecrement");
-      }
-    }
-    function increment() {
-      const {
-        disabled,
-        readonly,
-        disableIncrement,
-        incrementButton,
-        lazyChange,
-        step,
-        modelValue,
-        onIncrement,
-        onBeforeChange
-      } = props2;
-      if ((formDisabled == null ? void 0 : formDisabled.value) || (formReadonly == null ? void 0 : formReadonly.value) || disabled || readonly || disableIncrement || !incrementButton) {
-        return;
-      }
-      if (isMax.value) {
-        return;
-      }
-      const value = new Decimal(toNumber(modelValue)).plus(new Decimal(toNumber(step))).toString();
-      const normalizedValue = normalizeValue(value);
-      const normalizedValueNum = toNumber(normalizedValue);
-      call(onIncrement, normalizedValueNum);
-      if (lazyChange) {
-        call(onBeforeChange, normalizedValueNum, change);
-      } else {
-        setNormalizedValue(normalizedValue);
-        validateWithTrigger("onIncrement");
-      }
-    }
-    function pressDecrement() {
-      const { press, lazyChange } = props2;
-      if (!press || lazyChange) {
-        return;
-      }
-      decrementDelayTimer = window.setTimeout(() => {
-        continuedDecrement();
-      }, DELAY);
-    }
-    function pressIncrement() {
-      const { press, lazyChange } = props2;
-      if (!press || lazyChange) {
-        return;
-      }
-      incrementDelayTimer = window.setTimeout(() => {
-        continuedIncrement();
-      }, DELAY);
-    }
-    function releaseDecrement() {
-      decrementTimer && clearTimeout(decrementTimer);
-      decrementDelayTimer && clearTimeout(decrementDelayTimer);
-    }
-    function releaseIncrement() {
-      incrementTimer && clearTimeout(incrementTimer);
-      incrementDelayTimer && clearTimeout(incrementDelayTimer);
-    }
-    function continuedIncrement() {
-      incrementTimer = window.setTimeout(() => {
-        increment();
-        continuedIncrement();
-      }, SPEED);
-    }
-    function continuedDecrement() {
-      decrementTimer = window.setTimeout(() => {
-        decrement();
-        continuedDecrement();
-      }, SPEED);
-    }
-    function setNormalizedValue(normalizedValue) {
-      inputValue.value = normalizedValue;
-      const normalizedValueNum = toNumber(normalizedValue);
-      call(props2["onUpdate:modelValue"], normalizedValueNum);
-    }
-    function change(value) {
-      setNormalizedValue(normalizeValue(String(value)));
-      validateWithTrigger("onLazyChange");
-    }
-    return {
-      inputValue,
-      errorMessage,
-      formDisabled,
-      formReadonly,
-      isMax,
-      isMin,
-      n,
-      classes,
-      formatElevation,
-      validate,
-      reset,
-      resetValidation,
-      handleChange,
-      decrement,
-      increment,
-      pressDecrement,
-      pressIncrement,
-      releaseDecrement,
-      releaseIncrement,
-      toSizeUnit,
-      toNumber
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/counter/counter.css

@@ -1 +0,0 @@
-:root { --counter-padding: 0 4px; --counter-font-color: #fff; --counter-background: var(--color-primary); --counter-input-width: 28px; --counter-input-margin: 0 4px; --counter-input-font-size: 14px; --counter-button-size: 28px; --counter-button-text-color: #fff; --counter-button-icon-size: 100%; --counter-disabled-color: var(--color-disabled); --counter-disabled-opacity: var(--opacity-disabled); --counter-error-color: var(--color-danger);}.var-counter { display: inline-flex; flex-direction: column; align-items: flex-start;}.var-counter__controller { display: flex; align-items: center; color: var(--counter-font-color); border-radius: var(--counter-button-size); padding: var(--counter-padding); background: var(--counter-background); transition: color 0.25s, background-color 0.25s, opacity 0.25s;}.var-counter__input { width: var(--counter-input-width); font-size: var(--counter-input-font-size); outline: none; border: none; background: transparent; padding: 0; text-align: center; color: var(--counter-font-color); margin: var(--counter-input-margin);}.var-counter__input[disabled] { background: transparent;}.var-counter__increment-button[var-counter-cover],.var-counter__decrement-button[var-counter-cover] { width: var(--counter-button-size); height: var(--counter-button-size); font-size: var(--counter-button-icon-size); color: var(--counter-button-text-color); border-radius: 50%; padding: 0; background-color: transparent; box-shadow: none; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;}.var-counter__increment-button[var-counter-cover]:active,.var-counter__decrement-button[var-counter-cover]:active { box-shadow: none;}.var-counter--disabled { opacity: var(--counter-disabled-opacity); cursor: not-allowed;}.var-counter--disabled .var-hover-overlay { opacity: 0;}.var-counter--not-allowed { cursor: not-allowed !important;}.var-counter--hidden { opacity: 0;}.var-counter--error { background: var(--counter-error-color);}

package/es/counter/index.mjs

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

package/es/counter/props.mjs

@@ -1,57 +0,0 @@
-import { defineListenerProp } from "../utils/components.mjs";
-const props = {
-  modelValue: {
-    type: Number,
-    default: 0
-  },
-  min: [String, Number],
-  max: [String, Number],
-  step: {
-    type: [String, Number],
-    default: 1
-  },
-  color: String,
-  inputWidth: [String, Number],
-  inputTextSize: [String, Number],
-  buttonSize: [String, Number],
-  elevation: {
-    type: [Boolean, Number, String],
-    default: true
-  },
-  decimalLength: [String, Number],
-  disabled: Boolean,
-  readonly: Boolean,
-  disableIncrement: Boolean,
-  disableDecrement: Boolean,
-  disableInput: Boolean,
-  lazyChange: Boolean,
-  incrementButton: {
-    type: Boolean,
-    default: true
-  },
-  decrementButton: {
-    type: Boolean,
-    default: true
-  },
-  press: {
-    type: Boolean,
-    default: true
-  },
-  ripple: {
-    type: Boolean,
-    default: true
-  },
-  validateTrigger: {
-    type: Array,
-    default: () => ["onInputChange", "onLazyChange", "onIncrement", "onDecrement"]
-  },
-  rules: [Array, Function, Object],
-  onBeforeChange: defineListenerProp(),
-  onChange: defineListenerProp(),
-  onIncrement: defineListenerProp(),
-  onDecrement: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-};
-export {
-  props
-};

package/es/counter/style/index.mjs

@@ -1,9 +0,0 @@
-import '../../styles/common.css'
-import '../../styles/elevation.css'
-import '../../icon/icon.css'
-import '../../loading/loading.css'
-import '../../button/button.css'
-import '../../form-details/formDetails.css'
-import '../../ripple/ripple.css'
-import '../counter.css'
-import '../CounterSfc.css'