@varlet/ui 2.20.0 → 2.20.1

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: rgba(0, 0, 0, 0); box-shadow: none; -webkit-tap-highlight-color: rgba(0, 0, 0, 0); -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: [String, 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,
-  onBeforeChange: defineListenerProp(),
-  onChange: defineListenerProp(),
-  onIncrement: defineListenerProp(),
-  onDecrement: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-};
-export {
-  props
-};

package/es/counter/provide.ts

@@ -1,3 +0,0 @@
-import { Validation } from '../form/provide'
-
-export type CounterProvider = Validation

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'