zartui 3.0.1 → 3.0.3

package/es/field/Field.mjs

@@ -0,0 +1,510 @@
+import { createTextVNode as _createTextVNode, mergeProps as _mergeProps, createVNode as _createVNode } from "vue";
+import { ref, watch, provide, computed, nextTick, reactive, onMounted, defineComponent } 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 "@zartui/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,
+  titleIcon: String,
+  leftIcon: String,
+  rightIcon: String,
+  autofocus: Boolean,
+  clearable: Boolean,
+  maxlength: numericProp,
+  formatter: Function,
+  clearIcon: makeStringProp("clear-r"),
+  modelValue: makeNumericProp(""),
+  inputAlign: String,
+  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, {
+  rows: numericProp,
+  type: makeStringProp("text"),
+  rules: Array,
+  autosize: [Boolean, Object],
+  labelWidth: numericProp,
+  labelClass: unknownProp,
+  labelAlign: String,
+  showWordLimit: Boolean,
+  errorMessageAlign: String,
+  description: makeStringProp(""),
+  colon: {
+    type: Boolean,
+    default: null
+  }
+});
+var stdin_default = defineComponent({
+  name,
+  props: fieldProps,
+  emits: ["blur", "focus", "clear", "keypress", "clickInput", "endValidate", "startValidate", "clickLeftIcon", "clickRightIcon", "update:modelValue"],
+  setup(props, {
+    emit,
+    slots
+  }) {
+    const id = useId();
+    const state = reactive({
+      status: "unvalidated",
+      focused: false,
+      validateMessage: "",
+      showPassword: false
+    });
+    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("endValidate", {
+      status: state.status
+    });
+    const validate = (rules = props.rules) => new Promise((resolve) => {
+      resetValidation();
+      if (rules) {
+        emit("startValidate");
+        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) => {
+      const {
+        maxlength
+      } = props;
+      if (isDef(maxlength) && getStringLength(value) > maxlength) {
+        const modelValue = getModelValue();
+        if (modelValue && getStringLength(modelValue) === +maxlength) {
+          return modelValue;
+        }
+        return cutString(value, +maxlength);
+      }
+      return value;
+    };
+    const updateValue = (value, trigger = "onChange") => {
+      value = limitValueLength(value);
+      if (props.type === "number" || props.type === "digit") {
+        const isNumber = props.type === "number";
+        value = formatNumber(value, isNumber, isNumber);
+      }
+      if (props.formatter && trigger === props.formatTrigger) {
+        value = props.formatter(value);
+      }
+      if (inputRef.value && inputRef.value.value !== value) {
+        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("clickInput", event);
+    const onClickLeftIcon = (event) => emit("clickLeftIcon", event);
+    const changePasswordView = () => {
+      state.showPassword = !state.showPassword;
+    };
+    const onClickRightIcon = (event) => emit("clickRightIcon", 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);
+      }
+      if (props.type === "password") {
+        return _createVNode("div", {
+          "class": bem("password")
+        }, [_createVNode("input", _mergeProps({
+          "type": state.showPassword ? "text" : "password"
+        }, inputAttrs), null), _createVNode(Icon, {
+          "name": state.showPassword ? "eye" : "eye-closed",
+          "onClick": changePasswordView
+        }, 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 renderTitleIcon = () => {
+      const titleIconSlot = slots["title-icon"];
+      if (props.titleIcon || titleIconSlot) {
+        return _createVNode("div", {
+          "class": bem("title-icon")
+        }, [titleIconSlot ? titleIconSlot() : _createVNode(Icon, {
+          "name": props.titleIcon,
+          "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 >= props.maxlength ? "exceed" : "")
+        }, [count]), _createTextVNode("/"), props.maxlength]);
+      }
+    };
+    const renderDescription = () => {
+      if (!props.description) {
+        return;
+      }
+      return _createVNode("div", {
+        "class": bem("description")
+      }, [props.description]);
+    };
+    const showMessage = computed(() => !(form && form.props.showErrorMessage === false) && (props.errorMessage || state.validateMessage));
+    const renderMessage = () => {
+      if (!showMessage.value) {
+        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 renderBottom = () => {
+      if (!props.description && !showMessage.value) {
+        return;
+      }
+      return _createVNode("div", {
+        "class": bem("bottom")
+      }, [renderDescription(), renderMessage()]);
+    };
+    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()];
+    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 TitleIcon = renderTitleIcon();
+      const LeftIcon = renderLeftIcon();
+      return _createVNode(Cell, {
+        "direction": props.direction,
+        "title-icon": props.titleIcon,
+        "left-icon": props.leftIcon,
+        "class": bem({
+          error: showError.value,
+          disabled,
+          [`label-${labelAlign}`]: labelAlign,
+          "error-message": props.errorMessage !== "" && typeof props.errorMessage !== "undefined",
+          description: props.description !== "" && typeof props.description !== "undefined",
+          "is-link": props.isLink
+        }),
+        "center": props.center,
+        "border": props.border,
+        "isLink": props.isLink,
+        "clickable": props.clickable,
+        "titleStyle": labelStyle.value,
+        "valueClass": bem("value"),
+        "titleClass": [bem("label", [labelAlign, {
+          required: props.required
+        }]), props.labelClass],
+        "arrowDirection": props.arrowDirection
+      }, {
+        "title-icon": TitleIcon ? () => TitleIcon : null,
+        "left-icon": LeftIcon ? () => LeftIcon : null,
+        title: Label ? () => Label : null,
+        value: renderFieldBody,
+        extra: slots.extra,
+        bottom: renderBottom
+      });
+    };
+  }
+});
+export {
+  stdin_default as default,
+  fieldSharedProps
+};

package/es/field/index.css

@@ -0,0 +1 @@
+:root{--zt-field-label-width: 100%;--zt-field-label-color: var(--zt-text-color);--zt-field-label-margin: 16px 12px 8px 0;--zt-field-value-border-radius: var(--zt-radius-md);--zt-field-input-text-color: var(--zt-text-color);--zt-field-input-disabled-text-color: var(--zt-text-color-3);--zt-field-placeholder-text-color: var(--zt-placeholder-color);--zt-field-icon-size: 20px;--zt-field-clear-icon-size: 20px;--zt-field-clear-icon-color: var(--zt-gray-a6);--zt-field-left-icon-color: var(--zt-gray-a4);--zt-field-right-icon-color: var(--zt-gray-6);--zt-field-password-icon-color: var(--zt-gray-a6);--zt-field-error-message-background-color: #fff0eb;--zt-field-error-message-color: var(--zt-red);--zt-field-error-message-font-size: 12px;--zt-field-description-background-color: var(--zt-gray-a04);--zt-field-description-color: var(--zt-gray-a6);--zt-field-description-font-size: 12px;--zt-field-description-border-color: var(--zt-gray-a2);--zt-field-text-area-min-height: 60px;--zt-field-word-limit-color: var(--zt-gray-a4);--zt-field-word-limit-font-size: var(--zt-font-size-md);--zt-field-word-limit-line-height: var(--zt-line-height-md);--zt-field-disabled-text-color: var(--zt-gray-a6);--zt-field-required-mark-color: #ff4b50;--zt-field-required-mark-margin: 0 0 0 4px;--zt-field-caret-color: #0091fa}.zt-field__label{flex:none;box-sizing:border-box;word-wrap:break-word;overflow:hidden}.zt-field__label--center{text-align:center}.zt-field__label--right{text-align:right}.zt-field__label--required:after{margin:var(--zt-field-required-mark-margin);color:var(--zt-field-required-mark-color);content:"*";font-weight:var(--zt-font-bold);line-height:var(--zt-line-height-md)}.zt-field--disabled .zt-field__label{color:var(--zt-field-disabled-text-color)}.zt-field__value{display:block;overflow:visible;border-radius:var(--zt-field-value-border-radius)}.zt-field__body{width:100%;display:flex;align-items:center}.zt-field__body input,.zt-field__body textarea{caret-color:var(--zt-field-caret-color)}.zt-field__control{display:block;box-sizing:border-box;width:100%;min-width:0;margin:0;padding:0;color:var(--zt-field-input-text-color);line-height:inherit;text-align:left;background-color:transparent;border:0;resize:none;-webkit-user-select:auto;user-select:auto}.zt-field__control::-webkit-input-placeholder{color:var(--zt-field-placeholder-text-color)}.zt-field__control::placeholder{color:var(--zt-field-placeholder-text-color)}.zt-field__control:disabled{color:var(--zt-field-input-disabled-text-color);cursor:not-allowed;opacity:1;-webkit-text-fill-color:var(--zt-field-input-disabled-text-color)}.zt-field__control:read-only{cursor:default}.zt-field__control--center{justify-content:center;text-align:center}.zt-field__control--right{justify-content:flex-end;text-align:right}.zt-field__control--custom{display:flex;align-items:center;min-height:var(--zt-cell-line-height)}.zt-field__control--min-height{min-height:var(--zt-field-text-area-min-height)}.zt-field__control[type=date],.zt-field__control[type=time],.zt-field__control[type=datetime-local]{min-height:var(--zt-cell-line-height)}.zt-field__control[type=search]{-webkit-appearance:none}.zt-field__clear,.zt-field__icon,.zt-field__button,.zt-field__right-icon{flex-shrink:0}.zt-field__clear,.zt-field__right-icon{margin-right:calc(var(--zt-padding-xs) * -1);padding:0 var(--zt-padding-xs);line-height:inherit}.zt-field__clear{color:var(--zt-field-clear-icon-color);font-size:var(--zt-field-clear-icon-size);cursor:pointer}.zt-field__left-icon .zt-icon,.zt-field__right-icon .zt-icon{display:block;font-size:var(--zt-field-icon-size)}.zt-field__left-icon{color:var(--zt-field-left-icon-color);margin-right:var(--zt-padding-base);display:flex;align-items:center}.zt-field__right-icon{color:var(--zt-field-right-icon-color)}.zt-field__button{padding-left:var(--zt-padding-xs)}.zt-field__error-message{color:var(--zt-field-error-message-color);font-size:var(--zt-field-error-message-font-size);text-align:left}.zt-field__error-message--center{text-align:center}.zt-field__error-message--right{text-align:right}.zt-field__word-limit{margin-top:var(--zt-padding-md);color:var(--zt-field-word-limit-color);font-size:var(--zt-field-word-limit-font-size);line-height:var(--zt-field-word-limit-line-height)}.zt-field__word-num--exceed{color:var(--zt-field-error-message-color)}.zt-field--error-message .zt-cell__value,.zt-field--error .zt-cell__value,.zt-field--description .zt-cell__value{border-bottom-left-radius:0;border-bottom-right-radius:0}.zt-field__bottom{border-radius:0 0 var(--zt-radius-md) var(--zt-radius-md)}.zt-field--error-message .zt-field__label,.zt-field--error .zt-field__label{color:var(--zt-field-error-message-color)}.zt-field--error-message .zt-field__error-message,.zt-field--error .zt-field__error-message{background:var(--zt-field-error-message-background-color);border-radius:0 0 var(--zt-radius-md) var(--zt-radius-md);padding:var(--zt-padding-xs);font-size:var(--zt-field-error-message-font-size);color:var(--zt-field-error-message-color);letter-spacing:0;line-height:var(--zt-line-height-xs);position:relative}.zt-field--error-message .zt-field__error-message:before,.zt-field--error .zt-field__error-message:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-field-error-message-color);transform:scaleY(.5)}.zt-field--error-message.zt-field--description .zt-field__error-message,.zt-field--error.zt-field--description .zt-field__error-message{border-radius:0}.zt-field__description{background:var(--zt-field-description-background-color);border-radius:0 0 var(--zt-radius-md) var(--zt-radius-md);padding:var(--zt-padding-xs);font-size:var(--zt-field-description-font-size);color:var(--zt-field-description-color);letter-spacing:0;line-height:var(--zt-line-height-xs);position:relative}.zt-field__description:before{position:absolute;box-sizing:border-box;content:" ";pointer-events:none;top:0;right:0;left:0;border-top:1px solid var(--zt-field-description-border-color);transform:scaleY(.5)}.zt-field__password{width:100%;display:flex;justify-content:space-between;align-items:center}.zt-field__password .zt-icon{color:var(--zt-field-password-icon-color);font-size:var(--zt-field-icon-size)}.zt-field--is-link .zt-field__value{display:flex}