@varlet/ui 3.5.1 → 3.5.2

package/es/input/Input.mjs

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

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

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

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

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