@varlet/ui 3.5.0 → 3.5.1

package/es/input/Input.mjs

@@ -1,381 +0,0 @@
-import VarFormDetails from "../form-details/index.mjs";
-import VarFieldDecorator from "../field-decorator/index.mjs";
-import { defineComponent, ref, computed, nextTick } from "vue";
-import { props } from "./props.mjs";
-import { isEmpty, preventDefault, toNumber, call } from "@varlet/shared";
-import { useValidation, createNamespace } from "../utils/components.mjs";
-import { useForm } from "../form/provide.mjs";
-import { onSmartMounted, useClientId } from "@varlet/use";
-const { name, n, classes } = createNamespace("input");
-import { renderSlot as _renderSlot, normalizeClass as _normalizeClass, normalizeStyle as _normalizeStyle, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, resolveComponent as _resolveComponent, normalizeProps as _normalizeProps, guardReactiveProps as _guardReactiveProps, withCtx as _withCtx, createSlots as _createSlots, createVNode as _createVNode, createBlock as _createBlock, pushScopeId as _pushScopeId, popScopeId as _popScopeId } from "vue";
-const _withScopeId = (n2) => (_pushScopeId(""), n2 = n2(), _popScopeId(), n2);
-const _hoisted_1 = ["placeholder", "enterkeyhint"];
-const _hoisted_2 = ["autocomplete", "id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "rows", "enterkeyhint", "inputmode"];
-const _hoisted_3 = ["autocomplete", "id", "disabled", "readonly", "type", "value", "placeholder", "maxlength", "enterkeyhint", "inputmode"];
-function __render__(_ctx, _cache) {
-  const _component_var_field_decorator = _resolveComponent("var-field-decorator");
-  const _component_var_form_details = _resolveComponent("var-form-details");
-  return _openBlock(), _createElementBlock(
-    "div",
-    {
-      class: _normalizeClass(_ctx.classes(_ctx.n(), _ctx.n("$--box"))),
-      onMousedown: _cache[12] || (_cache[12] = (...args) => _ctx.handleMousedown && _ctx.handleMousedown(...args))
-    },
-    [
-      _createVNode(
-        _component_var_field_decorator,
-        _normalizeProps(_guardReactiveProps({
-          value: _ctx.modelValue,
-          id: _ctx.id,
-          size: _ctx.size,
-          variant: _ctx.variant,
-          placeholder: _ctx.placeholder,
-          line: _ctx.line,
-          hint: _ctx.hint,
-          textColor: _ctx.textColor,
-          focusColor: _ctx.focusColor,
-          blurColor: _ctx.blurColor,
-          isFocusing: _ctx.isForceFocusingEffect != null ? _ctx.isForceFocusingEffect : _ctx.isFocusing,
-          isError: _ctx.isForceErrorEffect != null ? _ctx.isForceErrorEffect : !!_ctx.errorMessage,
-          formDisabled: _ctx.formDisabled,
-          disabled: _ctx.disabled,
-          clearable: _ctx.clearable,
-          cursor: _ctx.cursor,
-          composing: _ctx.isComposing,
-          hintCenter: !_ctx.textarea,
-          onClick: _ctx.handleClick,
-          onClear: _ctx.handleClear
-        })),
-        _createSlots({
-          "clear-icon": _withCtx(({ clear }) => [
-            _renderSlot(_ctx.$slots, "clear-icon", { clear })
-          ]),
-          "append-icon": _withCtx(() => [
-            _renderSlot(_ctx.$slots, "append-icon")
-          ]),
-          default: _withCtx(() => [
-            _ctx.normalizedType === "password" ? (_openBlock(), _createElementBlock("input", {
-              key: 0,
-              tabindex: "-1",
-              class: _normalizeClass(_ctx.n("autocomplete")),
-              placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
-              style: _normalizeStyle({
-                "--input-placeholder-color": _ctx.placeholderColor
-              }),
-              enterkeyhint: _ctx.enterkeyhint
-            }, null, 14, _hoisted_1)) : _createCommentVNode("v-if", true),
-            _ctx.textarea ? (_openBlock(), _createElementBlock("textarea", {
-              key: 1,
-              class: _normalizeClass(
-                _ctx.classes(
-                  _ctx.n("input"),
-                  _ctx.n("--textarea"),
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
-                  [_ctx.errorMessage, _ctx.n("--error")],
-                  [_ctx.errorMessage, _ctx.n("--caret-error")]
-                )
-              ),
-              ref: "el",
-              autocomplete: _ctx.autocomplete ? _ctx.autocomplete : "new-password",
-              id: _ctx.id,
-              disabled: _ctx.formDisabled || _ctx.disabled,
-              readonly: _ctx.formReadonly || _ctx.readonly,
-              type: _ctx.normalizedType,
-              value: _ctx.modelValue,
-              placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
-              maxlength: _ctx.maxlength,
-              rows: _ctx.rows,
-              enterkeyhint: _ctx.enterkeyhint,
-              inputmode: _ctx.type === "number" ? "decimal" : void 0,
-              style: _normalizeStyle({
-                color: !_ctx.errorMessage ? _ctx.textColor : void 0,
-                caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0,
-                resize: _ctx.resize ? "vertical" : "none",
-                "--input-placeholder-color": _ctx.placeholderColor
-              }),
-              onFocus: _cache[0] || (_cache[0] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-              onBlur: _cache[1] || (_cache[1] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
-              onInput: _cache[2] || (_cache[2] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
-              onChange: _cache[3] || (_cache[3] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
-              onCompositionstart: _cache[4] || (_cache[4] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
-              onCompositionend: _cache[5] || (_cache[5] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
-            }, null, 46, _hoisted_2)) : (_openBlock(), _createElementBlock("input", {
-              key: 2,
-              class: _normalizeClass(
-                _ctx.classes(
-                  _ctx.n("input"),
-                  [_ctx.formDisabled || _ctx.disabled, _ctx.n("--disabled")],
-                  [_ctx.errorMessage, _ctx.n("--error")],
-                  [_ctx.errorMessage, _ctx.n("--caret-error")]
-                )
-              ),
-              ref: "el",
-              autocomplete: _ctx.autocomplete ? _ctx.autocomplete : "new-password",
-              id: _ctx.id,
-              disabled: _ctx.formDisabled || _ctx.disabled,
-              readonly: _ctx.formReadonly || _ctx.readonly,
-              type: _ctx.normalizedType,
-              value: _ctx.modelValue,
-              placeholder: !_ctx.hint ? _ctx.placeholder : void 0,
-              maxlength: _ctx.maxlength,
-              enterkeyhint: _ctx.enterkeyhint,
-              inputmode: _ctx.type === "number" ? "decimal" : void 0,
-              style: _normalizeStyle({
-                color: !_ctx.errorMessage ? _ctx.textColor : void 0,
-                caretColor: !_ctx.errorMessage ? _ctx.focusColor : void 0,
-                "--input-placeholder-color": _ctx.placeholderColor
-              }),
-              onFocus: _cache[6] || (_cache[6] = (...args) => _ctx.handleFocus && _ctx.handleFocus(...args)),
-              onBlur: _cache[7] || (_cache[7] = (...args) => _ctx.handleBlur && _ctx.handleBlur(...args)),
-              onInput: _cache[8] || (_cache[8] = (...args) => _ctx.handleInput && _ctx.handleInput(...args)),
-              onChange: _cache[9] || (_cache[9] = (...args) => _ctx.handleChange && _ctx.handleChange(...args)),
-              onCompositionstart: _cache[10] || (_cache[10] = (...args) => _ctx.handleCompositionStart && _ctx.handleCompositionStart(...args)),
-              onCompositionend: _cache[11] || (_cache[11] = (...args) => _ctx.handleCompositionEnd && _ctx.handleCompositionEnd(...args))
-            }, null, 46, _hoisted_3))
-          ]),
-          _: 2
-          /* DYNAMIC */
-        }, [
-          _ctx.$slots["prepend-icon"] ? {
-            name: "prepend-icon",
-            fn: _withCtx(() => [
-              _renderSlot(_ctx.$slots, "prepend-icon")
-            ]),
-            key: "0"
-          } : void 0
-        ]),
-        1040
-        /* FULL_PROPS, DYNAMIC_SLOTS */
-      ),
-      _ctx.isShowFormDetails ? (_openBlock(), _createBlock(_component_var_form_details, {
-        key: 0,
-        "error-message": _ctx.errorMessage,
-        "extra-message": _ctx.maxlengthText
-      }, _createSlots({
-        _: 2
-        /* DYNAMIC */
-      }, [
-        _ctx.$slots["extra-message"] ? {
-          name: "extra-message",
-          fn: _withCtx(() => [
-            _renderSlot(_ctx.$slots, "extra-message")
-          ]),
-          key: "0"
-        } : void 0
-      ]), 1032, ["error-message", "extra-message"])) : _createCommentVNode("v-if", true)
-    ],
-    34
-    /* CLASS, NEED_HYDRATION */
-  );
-}
-const __sfc__ = defineComponent({
-  name,
-  components: {
-    VarFormDetails,
-    VarFieldDecorator
-  },
-  props,
-  setup(props2) {
-    const id = useClientId();
-    const el = ref(null);
-    const isFocusing = ref(false);
-    const isComposing = ref(false);
-    const { bindForm, form } = useForm();
-    const {
-      errorMessage,
-      validateWithTrigger: vt,
-      validate: v,
-      // expose
-      resetValidation
-    } = useValidation();
-    const cursor = computed(() => props2.disabled || props2.readonly ? "" : "text");
-    const normalizedType = computed(() => {
-      if (props2.type === "number") {
-        return "text";
-      }
-      return props2.type;
-    });
-    const maxlengthText = computed(() => {
-      const { maxlength, modelValue } = props2;
-      if (!maxlength) {
-        return "";
-      }
-      if (isEmpty(modelValue)) {
-        return `0 / ${maxlength}`;
-      }
-      return `${String(modelValue).length}/${maxlength}`;
-    });
-    const placeholderColor = computed(() => {
-      const { hint, blurColor, focusColor } = props2;
-      if (hint) {
-        return void 0;
-      }
-      if (errorMessage.value) {
-        return "var(--field-decorator-error-color)";
-      }
-      if (isFocusing.value) {
-        return focusColor || "var(--field-decorator-focus-color)";
-      }
-      return blurColor || "var(--field-decorator-placeholder-color, var(--field-decorator-blur-color))";
-    });
-    const inputProvider = {
-      reset,
-      validate,
-      resetValidation
-    };
-    call(bindForm, inputProvider);
-    onSmartMounted(() => {
-      if (props2.autofocus) {
-        focus();
-      }
-    });
-    function validateWithTrigger(trigger) {
-      nextTick(() => {
-        const { validateTrigger, rules, modelValue } = props2;
-        vt(validateTrigger, trigger, rules, modelValue);
-      });
-    }
-    function handleFocus(e) {
-      isFocusing.value = true;
-      call(props2.onFocus, e);
-      validateWithTrigger("onFocus");
-    }
-    function handleBlur(e) {
-      isFocusing.value = false;
-      call(props2.onBlur, e);
-      validateWithTrigger("onBlur");
-    }
-    function updateValue(e) {
-      const target = e.target;
-      let { value } = target;
-      if (props2.type === "number") {
-        value = formatNumber(value);
-      }
-      const targetValue = withMaxlength(value);
-      if (targetValue === props2.modelValue) {
-        target.value = targetValue;
-      }
-      return targetValue;
-    }
-    function handleCompositionStart() {
-      isComposing.value = true;
-    }
-    function handleCompositionEnd(e) {
-      if (!isComposing.value) {
-        return;
-      }
-      isComposing.value = false;
-      e.target.dispatchEvent(new Event("input"));
-    }
-    function handleInput(e) {
-      if (isComposing.value) {
-        return;
-      }
-      const value = updateValue(e);
-      call(props2["onUpdate:modelValue"], value);
-      call(props2.onInput, value, e);
-      validateWithTrigger("onInput");
-    }
-    function handleChange(e) {
-      const value = withTrim(updateValue(e));
-      if (props2.modelModifiers.trim) {
-        call(props2["onUpdate:modelValue"], value);
-      }
-      call(props2.onChange, value, e);
-      validateWithTrigger("onChange");
-    }
-    function handleClear() {
-      const { disabled, readonly, clearable, onClear } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || (form == null ? void 0 : form.readonly.value) || disabled || readonly || !clearable) {
-        return;
-      }
-      call(props2["onUpdate:modelValue"], "");
-      call(onClear, "");
-      validateWithTrigger("onClear");
-    }
-    function handleClick(e) {
-      const { disabled, onClick } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || disabled) {
-        return;
-      }
-      call(onClick, e);
-      validateWithTrigger("onClick");
-    }
-    function formatNumber(value) {
-      const minusIndex = value.indexOf("-");
-      const dotIndex = value.indexOf(".");
-      if (minusIndex > -1) {
-        value = minusIndex === 0 ? "-" + value.replace(/-/g, "") : value.replace(/-/g, "");
-      }
-      if (dotIndex > -1) {
-        value = value.slice(0, dotIndex + 1) + value.slice(dotIndex).replace(/\./g, "");
-      }
-      return value.replace(/[^-0-9.]/g, "");
-    }
-    function withTrim(value) {
-      return props2.modelModifiers.trim ? value.trim() : value;
-    }
-    function withMaxlength(value) {
-      return props2.maxlength ? value.slice(0, toNumber(props2.maxlength)) : value;
-    }
-    function handleMousedown(e) {
-      const { disabled } = props2;
-      if ((form == null ? void 0 : form.disabled.value) || disabled || e.target === el.value) {
-        return;
-      }
-      focus();
-      preventDefault(e);
-    }
-    function reset() {
-      call(props2["onUpdate:modelValue"], "");
-      resetValidation();
-    }
-    function validate() {
-      return v(props2.rules, props2.modelValue);
-    }
-    function focus() {
-      var _a;
-      ;
-      (_a = el.value) == null ? void 0 : _a.focus();
-    }
-    function blur() {
-      ;
-      el.value.blur();
-    }
-    return {
-      el,
-      id,
-      isFocusing,
-      isComposing,
-      errorMessage,
-      placeholderColor,
-      normalizedType,
-      cursor,
-      maxlengthText,
-      formDisabled: form == null ? void 0 : form.disabled,
-      formReadonly: form == null ? void 0 : form.readonly,
-      n,
-      classes,
-      isEmpty,
-      handleFocus,
-      handleBlur,
-      handleInput,
-      handleChange,
-      handleClear,
-      handleClick,
-      handleCompositionStart,
-      handleCompositionEnd,
-      handleMousedown,
-      validate,
-      resetValidation,
-      reset,
-      focus,
-      blur
-    };
-  }
-});
-__sfc__.render = __render__;
-var stdin_default = __sfc__;
-export {
-  stdin_default as default
-};

package/es/input/index.mjs

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

package/es/input/input.css

@@ -1 +0,0 @@
-:root { --input-input-height: 24px; --input-input-font-size: 16px; --input-textarea-height: auto;}.var-input { text-align: left;}.var-input__autocomplete { width: 0; height: 0; padding: 0; border: none; outline: none; font-size: 0;}.var-input__input { width: 100%; height: var(--input-input-height); padding: 0; outline: none; border: none; background: transparent; color: var(--field-decorator-text-color); caret-color: var(--field-decorator-focus-color); font-size: var(--input-input-font-size); transition: color 0.25s;}.var-input__input::placeholder { color: var(--input-placeholder-color);}.var-input--textarea { height: var(--input-textarea-height); min-height: var(--input-input-height);}.var-input--disabled { color: var(--field-decorator-disabled-color); cursor: not-allowed;}.var-input--error { color: var(--field-decorator-error-color);}.var-input--caret-error { caret-color: var(--field-decorator-error-color);}

package/es/input/props.mjs

@@ -1,84 +0,0 @@
-var __defProp = Object.defineProperty;
-var __defProps = Object.defineProperties;
-var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp(a, prop, b[prop]);
-    }
-  return a;
-};
-var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { defineListenerProp, pickProps } from "../utils/components.mjs";
-import { fieldDecoratorProps } from "../field-decorator/index.mjs";
-const props = __spreadProps(__spreadValues({
-  modelValue: String,
-  modelModifiers: {
-    type: Object,
-    default: () => ({})
-  },
-  type: {
-    type: String,
-    default: "text"
-  },
-  textarea: Boolean,
-  rows: {
-    type: [String, Number],
-    default: 8
-  },
-  maxlength: [String, Number],
-  readonly: Boolean,
-  resize: Boolean,
-  autofocus: Boolean,
-  validateTrigger: {
-    type: Array,
-    default: () => ["onInput", "onClear"]
-  },
-  rules: [Array, Function, Object],
-  enterkeyhint: String,
-  onFocus: defineListenerProp(),
-  onBlur: defineListenerProp(),
-  onInput: defineListenerProp(),
-  onChange: defineListenerProp(),
-  onClear: defineListenerProp(),
-  "onUpdate:modelValue": defineListenerProp()
-}, pickProps(fieldDecoratorProps, [
-  "size",
-  "variant",
-  "placeholder",
-  "line",
-  "hint",
-  "textColor",
-  "focusColor",
-  "blurColor",
-  "disabled",
-  "clearable",
-  "onClick"
-])), {
-  // internal start
-  autocomplete: String,
-  isForceFocusingEffect: {
-    type: Boolean,
-    default: void 0
-  },
-  isForceErrorEffect: {
-    type: Boolean,
-    default: void 0
-  },
-  isShowFormDetails: {
-    type: Boolean,
-    default: true
-  }
-  // internal end
-});
-export {
-  props
-};

package/es/input/style/index.mjs

@@ -1,6 +0,0 @@
-import '../../styles/common.css'
-import '../../icon/icon.css'
-import '../../field-decorator/fieldDecorator.css'
-import '../../form-details/formDetails.css'
-import '../input.css'
-import '../InputSfc.css'