persagy-vant 0.0.28 → 0.0.29

package/es/field/Field.mjs

@@ -1,510 +0,0 @@
-import { ref, watch, provide, computed, nextTick, reactive, onMounted, defineComponent, createVNode as _createVNode, mergeProps as _mergeProps, createTextVNode as _createTextVNode } from "vue";
-import { isDef, extend, addUnit, toArray, FORM_KEY, numericProp, unknownProp, resetScroll, formatNumber, preventDefault, makeStringProp, makeNumericProp, createNamespace } from "../utils/index.mjs";
-import { cutString, runSyncRule, endComposing, mapInputType, isEmptyValue, startComposing, getRuleMessage, resizeTextarea, getStringLength, runRuleValidator } from "./utils.mjs";
-import { cellSharedProps } from "../cell/Cell.mjs";
-import { useParent, useEventListener, CUSTOM_FIELD_INJECTION_KEY } from "@vant/use";
-import { useId } from "../composables/use-id.mjs";
-import { useExpose } from "../composables/use-expose.mjs";
-import { Icon } from "../icon/index.mjs";
-import { Cell } from "../cell/index.mjs";
-const [name, bem] = createNamespace("field");
-const fieldSharedProps = {
-  id: String,
-  name: String,
-  leftIcon: String,
-  rightIcon: String,
-  autofocus: Boolean,
-  clearable: Boolean,
-  maxlength: numericProp,
-  formatter: Function,
-  clearIcon: makeStringProp("clear"),
-  modelValue: makeNumericProp(""),
-  inputAlign: makeStringProp("right"),
-  placeholder: String,
-  autocomplete: String,
-  errorMessage: String,
-  enterkeyhint: String,
-  clearTrigger: makeStringProp("focus"),
-  formatTrigger: makeStringProp("onChange"),
-  error: {
-    type: Boolean,
-    default: null
-  },
-  disabled: {
-    type: Boolean,
-    default: null
-  },
-  readonly: {
-    type: Boolean,
-    default: null
-  }
-};
-const fieldProps = extend({}, cellSharedProps, fieldSharedProps, {
-  size: makeStringProp("normal"),
-  rows: numericProp,
-  type: makeStringProp("text"),
-  rules: Array,
-  autosize: [Boolean, Object],
-  labelWidth: numericProp,
-  labelClass: unknownProp,
-  labelAlign: String,
-  labelPosition: String,
-  showWordLimit: Boolean,
-  errorMessageAlign: String,
-  colon: {
-    type: Boolean,
-    default: null
-  },
-  errorBorder: {
-    type: Boolean,
-    default: false
-  }
-});
-var stdin_default = defineComponent({
-  name,
-  props: fieldProps,
-  emits: ["blur", "focus", "clear", "keypress", "click-input", "end-validate", "start-validate", "click-left-icon", "click-right-icon", "update:modelValue"],
-  setup(props, {
-    emit,
-    slots
-  }) {
-    const id = useId();
-    const state = reactive({
-      status: "unvalidated",
-      focused: false,
-      validateMessage: ""
-    });
-    const inputRef = ref();
-    const clearIconRef = ref();
-    const customValue = ref();
-    const {
-      parent: form
-    } = useParent(FORM_KEY);
-    const getModelValue = () => {
-      var _a;
-      return String((_a = props.modelValue) != null ? _a : "");
-    };
-    const getProp = (key) => {
-      if (isDef(props[key])) {
-        return props[key];
-      }
-      if (form && isDef(form.props[key])) {
-        return form.props[key];
-      }
-    };
-    const showClear = computed(() => {
-      const readonly = getProp("readonly");
-      if (props.clearable && !readonly) {
-        const hasValue = getModelValue() !== "";
-        const trigger = props.clearTrigger === "always" || props.clearTrigger === "focus" && state.focused;
-        return hasValue && trigger;
-      }
-      return false;
-    });
-    const formValue = computed(() => {
-      if (customValue.value && slots.input) {
-        return customValue.value();
-      }
-      return props.modelValue;
-    });
-    const runRules = (rules) => rules.reduce((promise, rule) => promise.then(() => {
-      if (state.status === "failed") {
-        return;
-      }
-      let {
-        value
-      } = formValue;
-      if (rule.formatter) {
-        value = rule.formatter(value, rule);
-      }
-      if (!runSyncRule(value, rule)) {
-        state.status = "failed";
-        state.validateMessage = getRuleMessage(value, rule);
-        return;
-      }
-      if (rule.validator) {
-        if (isEmptyValue(value) && rule.validateEmpty === false) {
-          return;
-        }
-        return runRuleValidator(value, rule).then((result) => {
-          if (result && typeof result === "string") {
-            state.status = "failed";
-            state.validateMessage = result;
-          } else if (result === false) {
-            state.status = "failed";
-            state.validateMessage = getRuleMessage(value, rule);
-          }
-        });
-      }
-    }), Promise.resolve());
-    const resetValidation = () => {
-      state.status = "unvalidated";
-      state.validateMessage = "";
-    };
-    const endValidate = () => emit("end-validate", {
-      status: state.status
-    });
-    const validate = (rules = props.rules) => new Promise((resolve) => {
-      resetValidation();
-      if (rules) {
-        emit("start-validate");
-        runRules(rules).then(() => {
-          if (state.status === "failed") {
-            resolve({
-              name: props.name,
-              message: state.validateMessage
-            });
-            endValidate();
-          } else {
-            state.status = "passed";
-            resolve();
-            endValidate();
-          }
-        });
-      } else {
-        resolve();
-      }
-    });
-    const validateWithTrigger = (trigger) => {
-      if (form && props.rules) {
-        const {
-          validateTrigger
-        } = form.props;
-        const defaultTrigger = toArray(validateTrigger).includes(trigger);
-        const rules = props.rules.filter((rule) => {
-          if (rule.trigger) {
-            return toArray(rule.trigger).includes(trigger);
-          }
-          return defaultTrigger;
-        });
-        if (rules.length) {
-          validate(rules);
-        }
-      }
-    };
-    const limitValueLength = (value) => {
-      var _a;
-      const {
-        maxlength
-      } = props;
-      if (isDef(maxlength) && getStringLength(value) > maxlength) {
-        const modelValue = getModelValue();
-        if (modelValue && getStringLength(modelValue) === +maxlength) {
-          return modelValue;
-        }
-        const selectionEnd = (_a = inputRef.value) == null ? void 0 : _a.selectionEnd;
-        if (state.focused && selectionEnd) {
-          const valueArr = [...value];
-          const exceededLength = valueArr.length - +maxlength;
-          valueArr.splice(selectionEnd - exceededLength, exceededLength);
-          return valueArr.join("");
-        }
-        return cutString(value, +maxlength);
-      }
-      return value;
-    };
-    const updateValue = (value, trigger = "onChange") => {
-      const originalValue = value;
-      value = limitValueLength(value);
-      const limitDiffLen = getStringLength(originalValue) - getStringLength(value);
-      if (props.type === "number" || props.type === "digit") {
-        const isNumber = props.type === "number";
-        value = formatNumber(value, isNumber, isNumber);
-      }
-      let formatterDiffLen = 0;
-      if (props.formatter && trigger === props.formatTrigger) {
-        const {
-          formatter,
-          maxlength
-        } = props;
-        value = formatter(value);
-        if (isDef(maxlength) && getStringLength(value) > maxlength) {
-          value = cutString(value, +maxlength);
-        }
-        if (inputRef.value && state.focused) {
-          const {
-            selectionEnd
-          } = inputRef.value;
-          const bcoVal = cutString(originalValue, selectionEnd);
-          formatterDiffLen = getStringLength(formatter(bcoVal)) - getStringLength(bcoVal);
-        }
-      }
-      if (inputRef.value && inputRef.value.value !== value) {
-        if (state.focused) {
-          let {
-            selectionStart,
-            selectionEnd
-          } = inputRef.value;
-          inputRef.value.value = value;
-          if (isDef(selectionStart) && isDef(selectionEnd)) {
-            const valueLen = getStringLength(value);
-            if (limitDiffLen) {
-              selectionStart -= limitDiffLen;
-              selectionEnd -= limitDiffLen;
-            } else if (formatterDiffLen) {
-              selectionStart += formatterDiffLen;
-              selectionEnd += formatterDiffLen;
-            }
-            inputRef.value.setSelectionRange(Math.min(selectionStart, valueLen), Math.min(selectionEnd, valueLen));
-          }
-        } else {
-          inputRef.value.value = value;
-        }
-      }
-      if (value !== props.modelValue) {
-        emit("update:modelValue", value);
-      }
-    };
-    const onInput = (event) => {
-      if (!event.target.composing) {
-        updateValue(event.target.value);
-      }
-    };
-    const blur = () => {
-      var _a;
-      return (_a = inputRef.value) == null ? void 0 : _a.blur();
-    };
-    const focus = () => {
-      var _a;
-      return (_a = inputRef.value) == null ? void 0 : _a.focus();
-    };
-    const adjustTextareaSize = () => {
-      const input = inputRef.value;
-      if (props.type === "textarea" && props.autosize && input) {
-        resizeTextarea(input, props.autosize);
-      }
-    };
-    const onFocus = (event) => {
-      state.focused = true;
-      emit("focus", event);
-      nextTick(adjustTextareaSize);
-      if (getProp("readonly")) {
-        blur();
-      }
-    };
-    const onBlur = (event) => {
-      if (getProp("readonly")) {
-        return;
-      }
-      state.focused = false;
-      updateValue(getModelValue(), "onBlur");
-      emit("blur", event);
-      validateWithTrigger("onBlur");
-      nextTick(adjustTextareaSize);
-      resetScroll();
-    };
-    const onClickInput = (event) => emit("click-input", event);
-    const onClickLeftIcon = (event) => emit("click-left-icon", event);
-    const onClickRightIcon = (event) => emit("click-right-icon", event);
-    const onClear = (event) => {
-      preventDefault(event);
-      emit("update:modelValue", "");
-      emit("clear", event);
-    };
-    const showError = computed(() => {
-      if (typeof props.error === "boolean") {
-        return props.error;
-      }
-      if (form && form.props.showError && state.status === "failed") {
-        return true;
-      }
-    });
-    const labelStyle = computed(() => {
-      const labelWidth = getProp("labelWidth");
-      if (labelWidth) {
-        return {
-          width: addUnit(labelWidth)
-        };
-      }
-    });
-    const onKeypress = (event) => {
-      const ENTER_CODE = 13;
-      if (event.keyCode === ENTER_CODE) {
-        const submitOnEnter = form && form.props.submitOnEnter;
-        if (!submitOnEnter && props.type !== "textarea") {
-          preventDefault(event);
-        }
-        if (props.type === "search") {
-          blur();
-        }
-      }
-      emit("keypress", event);
-    };
-    const getInputId = () => props.id || `${id}-input`;
-    const getValidationStatus = () => state.status;
-    const renderInput = () => {
-      const controlClass = bem("control", [getProp("inputAlign"), {
-        error: showError.value,
-        custom: !!slots.input,
-        "min-height": props.type === "textarea" && !props.autosize
-      }]);
-      if (slots.input) {
-        return _createVNode("div", {
-          "class": controlClass,
-          "onClick": onClickInput
-        }, [slots.input()]);
-      }
-      const inputAttrs = {
-        id: getInputId(),
-        ref: inputRef,
-        name: props.name,
-        rows: props.rows !== void 0 ? +props.rows : void 0,
-        class: controlClass,
-        disabled: getProp("disabled"),
-        readonly: getProp("readonly"),
-        autofocus: props.autofocus,
-        placeholder: props.placeholder,
-        autocomplete: props.autocomplete,
-        enterkeyhint: props.enterkeyhint,
-        "aria-labelledby": props.label ? `${id}-label` : void 0,
-        onBlur,
-        onFocus,
-        onInput,
-        onClick: onClickInput,
-        onChange: endComposing,
-        onKeypress,
-        onCompositionend: endComposing,
-        onCompositionstart: startComposing
-      };
-      if (props.type === "textarea") {
-        return _createVNode("textarea", inputAttrs, null);
-      }
-      return _createVNode("input", _mergeProps(mapInputType(props.type), inputAttrs), null);
-    };
-    const renderLeftIcon = () => {
-      const leftIconSlot = slots["left-icon"];
-      if (props.leftIcon || leftIconSlot) {
-        return _createVNode("div", {
-          "class": bem("left-icon"),
-          "onClick": onClickLeftIcon
-        }, [leftIconSlot ? leftIconSlot() : _createVNode(Icon, {
-          "name": props.leftIcon,
-          "classPrefix": props.iconPrefix
-        }, null)]);
-      }
-    };
-    const renderRightIcon = () => {
-      const rightIconSlot = slots["right-icon"];
-      if (props.rightIcon || rightIconSlot) {
-        return _createVNode("div", {
-          "class": bem("right-icon"),
-          "onClick": onClickRightIcon
-        }, [rightIconSlot ? rightIconSlot() : _createVNode(Icon, {
-          "name": props.rightIcon,
-          "classPrefix": props.iconPrefix
-        }, null)]);
-      }
-    };
-    const renderWordLimit = () => {
-      if (props.showWordLimit && props.maxlength) {
-        const count = getStringLength(getModelValue());
-        return _createVNode("div", {
-          "class": bem("word-limit")
-        }, [_createVNode("span", {
-          "class": bem("word-num")
-        }, [count]), _createTextVNode("/"), props.maxlength]);
-      }
-    };
-    const renderMessage = () => {
-      if (form && form.props.showErrorMessage === false) {
-        return;
-      }
-      const message = props.errorMessage || state.validateMessage;
-      if (message) {
-        const slot = slots["error-message"];
-        const errorMessageAlign = getProp("errorMessageAlign");
-        return _createVNode("div", {
-          "class": bem("error-message", errorMessageAlign)
-        }, [slot ? slot({
-          message
-        }) : message]);
-      }
-    };
-    const renderLabel = () => {
-      const colon = getProp("colon") ? ":" : "";
-      if (slots.label) {
-        return [slots.label(), colon];
-      }
-      if (props.label) {
-        return _createVNode("label", {
-          "id": `${id}-label`,
-          "for": getInputId()
-        }, [props.label + colon]);
-      }
-    };
-    const renderFieldBody = () => [_createVNode("div", {
-      "class": bem("body")
-    }, [renderInput(), showClear.value && _createVNode(Icon, {
-      "ref": clearIconRef,
-      "name": props.clearIcon,
-      "class": bem("clear")
-    }, null), renderRightIcon(), slots.button && _createVNode("div", {
-      "class": bem("button")
-    }, [slots.button()])]), renderWordLimit(), renderMessage()];
-    useExpose({
-      blur,
-      focus,
-      validate,
-      formValue,
-      resetValidation,
-      getValidationStatus
-    });
-    provide(CUSTOM_FIELD_INJECTION_KEY, {
-      customValue,
-      resetValidation,
-      validateWithTrigger
-    });
-    watch(() => props.modelValue, () => {
-      updateValue(getModelValue());
-      resetValidation();
-      validateWithTrigger("onChange");
-      nextTick(adjustTextareaSize);
-    });
-    onMounted(() => {
-      updateValue(getModelValue(), props.formatTrigger);
-      nextTick(adjustTextareaSize);
-    });
-    useEventListener("touchstart", onClear, {
-      target: computed(() => {
-        var _a;
-        return (_a = clearIconRef.value) == null ? void 0 : _a.$el;
-      })
-    });
-    return () => {
-      const disabled = getProp("disabled");
-      const labelAlign = getProp("labelAlign");
-      const Label = renderLabel();
-      const LeftIcon = renderLeftIcon();
-      return _createVNode(Cell, {
-        "size": props.size,
-        "icon": props.leftIcon,
-        "class": bem({
-          error: showError.value,
-          disabled,
-          [`label-${labelAlign}`]: labelAlign,
-          [`label-${props.labelPosition}`]: props.labelPosition
-        }),
-        "center": props.center,
-        "border": props.border,
-        "errorBorder": props.errorBorder,
-        "isLink": props.isLink,
-        "clickable": props.clickable,
-        "titleStyle": labelStyle.value,
-        "valueClass": bem("value"),
-        "titleClass": [bem("label", [labelAlign, {
-          required: props.required
-        }]), props.labelClass],
-        "arrowDirection": props.arrowDirection
-      }, {
-        icon: LeftIcon ? () => LeftIcon : null,
-        title: Label ? () => Label : null,
-        value: renderFieldBody,
-        extra: slots.extra
-      });
-    };
-  }
-});
-export {
-  stdin_default as default,
-  fieldSharedProps
-};

package/es/field/index.css

@@ -1 +0,0 @@
-:root{--van-field-label-width: 6.2em;--van-field-label-color: var(--van-gray-8);--van-field-label-margin-right: var(--van-padding-sm);--van-field-input-font-size: var(--van-font-size-lg);--van-field-input-text-color: var(--van-text-color);--van-field-input-error-text-color: var(--van-danger-color);--van-field-input-disabled-text-color: var(--van-text-color-3);--van-field-placeholder-text-color: var(--van-text-color-3);--van-field-icon-size: 16px;--van-field-clear-icon-size: 16px;--van-field-clear-icon-color: var(--van-gray-5);--van-field-right-icon-color: var(--van-gray-6);--van-field-error-message-color: var(--van-danger-color);--van-field-error-message-font-size: 12px;--van-field-text-area-min-height: 60px;--van-field-word-limit-color: var(--van-gray-7);--van-field-word-limit-font-size: var(--van-font-size-sm);--van-field-word-limit-line-height: 16px;--van-field-disabled-text-color: var(--van-text-color-3);--van-field-required-mark-color: var(--van-red)}.van-field__label{flex:none;box-sizing:border-box;width:var(--van-field-label-width);margin-right:var(--van-field-label-margin-right);color:var(--van-field-label-color);text-align:left;word-wrap:break-word}.van-field__label--center{text-align:center}.van-field__label--right{text-align:right}.van-field__label--required{position:relative}.van-field__label--required:before{color:var(--van-field-required-mark-color);content:"*";position:absolute;left:-8px;font-size:14px}.van-field--disabled .van-field__label{color:var(--van-field-disabled-text-color)}.van-field--label-top{flex-direction:column;align-items:stretch}.van-field--label-top .van-cell__title,.van-field--label-top .van-cell__value{flex:none;width:100%}.van-field--label-top .van-field__label{width:auto;margin-right:0;margin-bottom:var(--van-padding-xs)}.van-field.van-cell--normal{--van-field-input-font-size: var(--van-font-size-md)}.van-field__value{overflow:visible}.van-field__body{display:flex;align-items:center}.van-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--van-field-input-text-color);font-size:var(--van-field-input-font-size);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;-moz-user-select:auto;user-select:auto}.van-field__control::-moz-placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control::placeholder{color:var(--van-field-placeholder-text-color)}.van-field__control:disabled{color:var(--van-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--van-field-input-disabled-text-color)}.van-field__control:-moz-read-only{cursor:default}.van-field__control:read-only{cursor:default}.van-field__control--center{justify-content:center;text-align:center}.van-field__control--right{justify-content:flex-end;text-align:right}.van-field__control--custom{display:flex;align-items:center;min-height:var(--van-cell-line-height)}.van-field__control--error::-moz-placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--error,.van-field__control--error::placeholder{color:var(--van-field-input-error-text-color);-webkit-text-fill-color:currentColor}.van-field__control--min-height{min-height:var(--van-field-text-area-min-height)}.van-field__control[type=date],.van-field__control[type=time],.van-field__control[type=datetime-local]{min-height:var(--van-cell-line-height)}.van-field__control[type=search]{-webkit-appearance:none}.van-field__clear,.van-field__icon,.van-field__button,.van-field__right-icon{flex-shrink:0}.van-field__clear,.van-field__right-icon{margin-right:calc(var(--van-padding-xs) * -1);padding:0 var(--van-padding-xs);line-height:inherit}.van-field__clear{color:var(--van-field-clear-icon-color);font-size:var(--van-field-clear-icon-size);cursor:pointer}.van-field__left-icon .van-icon,.van-field__right-icon .van-icon{display:block;font-size:var(--van-field-icon-size);line-height:inherit}.van-field__left-icon{margin-right:var(--van-padding-base)}.van-field__right-icon{color:var(--van-field-right-icon-color)}.van-field__button{padding-left:var(--van-padding-xs)}.van-field__error-message{color:var(--van-field-error-message-color);font-size:var(--van-field-error-message-font-size);text-align:left}.van-field__error-message--center{text-align:center}.van-field__error-message--right{text-align:right}.van-field__word-limit{margin-top:var(--van-padding-base);color:var(--van-field-word-limit-color);font-size:var(--van-field-word-limit-font-size);line-height:var(--van-field-word-limit-line-height);text-align:right}