@varlet/ui 3.5.1 → 3.5.2

package/es/countdown/Countdown.mjs

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

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

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

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

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

package/es/counter/Counter.mjs

@@ -0,0 +1,332 @@
+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 } from "vue";
+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

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

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

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

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