@opentinyvue/vue-form-item 2.21.0

package/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022 - present TinyVue Authors.
+Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/index.d.ts

@@ -0,0 +1,13 @@
+/**
+ * Copyright (c) 2022 - present TinyVue Authors.
+ * Copyright (c) 2022 - present Huawei Cloud Computing Technologies Co., Ltd.
+ *
+ * Use of this source code is governed by an MIT-style license.
+ *
+ * THE OPEN SOURCE SOFTWARE IN THIS PRODUCT IS DISTRIBUTED IN THE HOPE THAT IT WILL BE USEFUL,
+ * BUT WITHOUT ANY WARRANTY, WITHOUT EVEN THE IMPLIED WARRANTY OF MERCHANTABILITY OR FITNESS FOR
+ * A PARTICULAR PURPOSE. SEE THE APPLICABLE LICENSES FOR MORE DETAILS.
+ *
+ */
+import FormItem from './src/index';
+export default FormItem;

package/lib/index.js

@@ -0,0 +1,103 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $prefix, $setup, $props } from "@opentinyvue/vue-common";
+import PcTemplate from "./pc.js";
+import MobileFirstTemplate from "./mobile-first.js";
+var template = function template2(mode) {
+  var _process$env;
+  var tinyMode = typeof process === "object" ? (_process$env = process.env) == null ? void 0 : _process$env.TINY_MODE : null;
+  if ("pc" === (tinyMode || mode)) {
+    return PcTemplate;
+  }
+  if ("mobile-first" === (tinyMode || mode)) {
+    return MobileFirstTemplate;
+  }
+  return PcTemplate;
+};
+var $constants = {
+  FORM_NAME: "Form",
+  FORM_ITEM_NAME: "FormItem"
+};
+var formItemProps = _extends({}, $props, {
+  _constants: {
+    type: Object,
+    default: function _default() {
+      return $constants;
+    }
+  },
+  appendToBody: {
+    type: Boolean,
+    default: void 0
+  },
+  error: {
+    type: String,
+    default: ""
+  },
+  for: String,
+  inlineMessage: {
+    type: Boolean,
+    default: void 0
+  },
+  messageType: String,
+  label: String,
+  labelWidth: String,
+  manual: Boolean,
+  popperOptions: {
+    type: Object,
+    default: function _default2() {
+      return {};
+    }
+  },
+  prop: String,
+  required: {
+    type: Boolean,
+    default: void 0
+  },
+  rules: [Object, Array],
+  showMessage: {
+    type: Boolean,
+    default: true
+  },
+  size: String,
+  tipContent: String,
+  validateDisabled: Boolean,
+  validateDebounce: Boolean,
+  validatePosition: String,
+  validateStatus: String,
+  validateType: String,
+  validateIcon: Object,
+  ellipsis: {
+    type: Boolean,
+    default: false
+  },
+  vertical: {
+    type: Boolean,
+    default: false
+  },
+  extra: String
+});
+var FormItem = defineComponent({
+  name: $prefix + "FormItem",
+  componentName: "FormItem",
+  props: formItemProps,
+  setup: function setup(props, context) {
+    return $setup({
+      props,
+      context,
+      template
+    });
+  }
+});
+FormItem.install = function(Vue) {
+  Vue.component(FormItem.name, FormItem);
+};
+export {
+  FormItem as default
+};

package/lib/label-wrap.js

@@ -0,0 +1,107 @@
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+import { defineComponent, $props, h, setup as _setup } from "@opentinyvue/vue-common";
+var labelWrap = defineComponent({
+  props: _extends({}, $props, {
+    isAutoWidth: Boolean,
+    updateAll: Boolean,
+    isMobile: Boolean,
+    isMobileFirst: Boolean
+  }),
+  inject: ["form", "formItem"],
+  render: function render() {
+    var slotsDefault = this.slots.default && this.slots.default();
+    var classPrefix = this.isMobile ? "tiny-mobile-" : "tiny-";
+    if (!slotsDefault) return null;
+    if (this.isAutoWidth) {
+      var autoLabelWidth = this.form.autoLabelWidth;
+      var style = {};
+      if (autoLabelWidth && autoLabelWidth !== "auto") {
+        var marginLeft = parseInt(autoLabelWidth, 10) - this.computedWidth;
+        if (marginLeft) {
+          style.marginLeft = marginLeft + "px";
+        }
+      }
+      return h("div", {
+        class: this.isMobileFirst ? "float-left" : classPrefix + "form-item_label-wrap",
+        style
+      }, slotsDefault);
+    } else {
+      return slotsDefault[0];
+    }
+  },
+  methods: {
+    getLabelWidth: function getLabelWidth() {
+      var computedStylWidth = function computedStylWidth2(elem) {
+        return window.getComputedStyle(elem).width;
+      };
+      var ceilFloat = function ceilFloat2(f) {
+        return Math.ceil(parseFloat(f));
+      };
+      return !this.$el || !this.$el.firstElementChild ? 0 : ceilFloat(computedStylWidth(this.$el.firstElementChild));
+    },
+    updateLabelWidth: function updateLabelWidth(action) {
+      var _this = this;
+      if (action === void 0) {
+        action = "update";
+      }
+      if (!this.$slots.default || !this.isAutoWidth || !this.$el.firstElementChild) {
+        return;
+      }
+      var setComputedWidth = function setComputedWidth2() {
+        return _this.computedWidth = _this.getLabelWidth();
+      };
+      var deregisterFormLabelWidth = function deregisterFormLabelWidth2() {
+        return _this.form.deregisterLabelWidth(_this.computedWidth);
+      };
+      if (action === "update") {
+        setComputedWidth();
+      } else if (action === "remove") {
+        deregisterFormLabelWidth();
+      }
+    }
+  },
+  watch: {
+    computedWidth: function computedWidth(val, oldVal) {
+      if (this.updateAll) {
+        this.form.registerLabelWidth(val, oldVal);
+        this.formItem.updateComputedLabelWidth(val);
+      }
+    }
+  },
+  setup: function setup(props, context) {
+    var renderless = function renderless2(props2, _ref, _ref2) {
+      var onMounted = _ref.onMounted, onUpdated = _ref.onUpdated, onBeforeUnmount = _ref.onBeforeUnmount;
+      var vm = _ref2.vm;
+      onMounted(function() {
+        return vm.updateLabelWidth("update");
+      });
+      onUpdated(function() {
+        return vm.updateLabelWidth("update");
+      });
+      onBeforeUnmount(function() {
+        return vm.updateLabelWidth("remove");
+      });
+      return {
+        computedWidth: 0
+      };
+    };
+    var api = ["computedWidth"];
+    return _setup({
+      props,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+export {
+  labelWrap as default
+};

package/lib/mobile-first.js

@@ -0,0 +1,197 @@
+import { defineComponent, $prefix, setup, $props } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/form-item/vue';
+import LabelWrap from './label-wrap';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import { IconHelpCircle } from '@opentinyvue/vue-icon';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var $constants = {
+  FORM_NAME: "Form",
+  FORM_ITEM_NAME: "FormItem"
+};
+var __vue2_script = defineComponent({
+  name: $prefix + "FormItem",
+  componentName: "FormItem",
+  components: {
+    LabelWrap,
+    TinyTooltip: Tooltip,
+    IconHelpCircle: IconHelpCircle()
+  },
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    appendToBody: {
+      type: Boolean,
+      default: void 0
+    },
+    error: String,
+    for: String,
+    inlineMessage: {
+      type: [String, Boolean],
+      default: ""
+    },
+    label: String,
+    labelWidth: String,
+    manual: Boolean,
+    popperOptions: {
+      type: Object,
+      default: function _default2() {
+        return {};
+      }
+    },
+    prop: String,
+    required: {
+      type: Boolean,
+      default: void 0
+    },
+    rules: [Object, Array],
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+    size: String,
+    tipContent: String,
+    validateDisabled: Boolean,
+    validateDebounce: Boolean,
+    validatePosition: String,
+    validateStatus: String,
+    validateType: String
+  }),
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api
+    });
+  }
+});
+var render = function render2() {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c("div", {
+    class: _vm.m("flex min-h-[theme(spacing.12)] sm:min-h-[theme(spacing.7)] mb-0 p-0 sm:mb-4 box-border after:content-[''] after:table after:clear-both before:content-['']  before:table border-b-0.5 border-color-border-separator sm:border-none", _vm.state.validateState === "error" && _vm.state.validateType === "text" ? "mb-0 sm:mb-5" : "", _vm.state.formInline ? "align-sub" : "", _vm.state.labelPosition === "top" ? "block mb-4" : "", _vm.state.validateState === "error" ? "[&_.tiny-range-editor]:border-color-error [&_[data-tag~=tiny-range-editor]]:border-color-error [&_[data-tag=tiny-numeric-main]]:border-color-error [&_input]:border-color-error [&_textarea]:border-color-error [&_input:focus]:border-color-error [&_input:hover]:border-color-error [&_textarea:focus]:border-color-error [&_textarea:hover]:border-color-error" : "", _vm.state.labelPosition === "top" && !_vm.state.hideRequiredAsterisk ? "pl-0" : "", !_vm.slots.label && !_vm.label ? "border-none" : "", _vm.state.isDisplayOnly ? "border-none py-0.5" : ""),
+    attrs: {
+      "data-tag": "tiny-form-item"
+    }
+  }, [_c("label-wrap", {
+    attrs: {
+      "is-auto-width": _vm.state.labelStyle && _vm.state.labelStyle.width === "auto",
+      "update-all": _vm.state.labelWidth === "auto",
+      "is-mobile-first": true
+    }
+  }, [_vm.slots.label || _vm.label ? _c("label", {
+    class: _vm.m("py-3 sm:py-1.5 sm:min-h-[theme(spacing.7)] relative align-bottom float-left text-sm pr-3 sm:pr-4 box-border leading-5", "overflow-hidden text-ellipsis", _vm.state.labelPosition === "top" ? "float-none inline-block text-left sm:text-left leading-none px-0 pt-0 pb-1.5 h-auto min-h-0 sm:py-0 sm:pb-1 sm:min-h-[theme(spacing.0)]" : "min-h-[theme(spacing.9)]", _vm.state.labelPosition === "right" ? "text-right sm:text-right" : "", _vm.state.labelPosition === "left" ? "text-left sm:text-left" : "", _vm.state.formInline && _vm.state.labelPosition === "top" ? "block" : "", _vm.state.isDisplayOnly ? "leading-none h-auto align-[inherit] pr-4" : "", _vm.tipContent ? "pr-5 sm:pr-7" : "", _vm.state.labelPosition === "top" && !_vm.state.hideRequiredAsterisk ? "overflow-visible relative before:absolute before:-left-2.5" : "", _vm.state.disabled ? "text-color-icon-placeholder sm:text-color-text-secondary" : "text-color-text-secondary", _vm.state.formItemSize !== "mini" ? "sm:text-sm" : "sm:text-xs"),
+    style: _vm.state.labelStyle,
+    attrs: {
+      "data-tag": "tiny-item-label",
+      "for": _vm.state.labelFor
+    }
+  }, [_c("span", {
+    class: _vm.m("max-h-[theme(spacing.10)] line-clamp-2 inline-block relative top-px leading-normal", (_vm.state.isRequired || _vm.required) && !_vm.state.hideRequiredAsterisk ? "before:content-['*'] before:text-color-error before:relative before:mr-1" : "", _vm.state.isDisplayOnly ? "pl-0 before:hidden" : "")
+  }, [_vm._t("label", function() {
+    return [_vm._v(" " + _vm._s(_vm.label + _vm.state.labelSuffix) + " ")];
+  })], 2), _vm.tipContent ? _c("tiny-tooltip", {
+    attrs: {
+      "effect": "light",
+      "content": _vm.tipContent,
+      "placement": "top"
+    }
+  }, [_c("icon-help-circle", {
+    class: [_vm.state.labelPosition === "top" ? "top-0.5 sm:top-1.5" : "top-3.5 sm:top-1.5"],
+    attrs: {
+      "custom-class": "h-4 w-4 ml-0.5 absolute right-1 sm:right-2 align-text-bottom fill-color-text-secondary"
+    }
+  })], 1) : _vm._e()], 1) : _vm._e()]), _c("div", {
+    class: _vm.m("flex-1 m-0 sm:m-auto relative sm:pt-0 sm:top-auto text-sm after:content-['']  after:table after:clear-both before:content-['']  before:table [&_button:not(:last-child)]:mr-2", "[&_[data-tag=tiny-checkbox]]:py-0 [&_[data-tag=tiny-input]]:w-full", "[&_[data-tag=tiny-input]_textarea]:px-0 sm:[&_[data-tag=tiny-input]_textarea]:px-3 [&_[data-tag=tiny-input]_textarea]:w-full [&_[data-tag=tiny-input]_textarea]:pt-1 sm:[&_[data-tag=tiny-input]_textarea]:pt-2", _vm.state.formInline ? "align-sub leading-none" : "", _vm.state.labelPosition === "top" && !_vm.state.hideRequiredAsterisk ? _vm.state.isDisplayOnly ? "pl-0" : "pl-2 sm:pl-0" : "pt-2", _vm.state.formItemSize !== "mini" ? "sm:text-sm" : "sm:text-xs"),
+    attrs: {
+      "data-tag": "tiny-form-item-inline"
+    }
+  }, [_vm.state.isDisplayOnly && _vm.state.isBasicComp ? _c("div", {
+    class: ["break-all min-h-[28px] leading-7 text-color-text-primary", _vm.state.typeName === "textarea" ? "line-clamp-3" : "line-clamp-1"],
+    attrs: {
+      "data-tag": "tiny-form-item-display-only",
+      "type-name": _vm.state.typeName
+    },
+    on: {
+      "mouseenter": _vm.handleMouseenter,
+      "mouseleave": _vm.handleMouseleave
+    }
+  }, [_vm._v(" " + _vm._s(_vm.state.displayedValue || "-") + " ")]) : _vm._e(), _c("div", {
+    directives: [{
+      name: "show",
+      rawName: "v-show",
+      value: !(_vm.state.isDisplayOnly && _vm.state.isBasicComp),
+      expression: "!(state.isDisplayOnly && state.isBasicComp)"
+    }],
+    class: ["[&_[aria-label=checkbox-group]]:pl-0.5 sm:[&_[aria-label=checkbox-group]]:pl-0", "[&_>:first-child[data-tag=tiny-checkbox]]:pl-0.5 sm:[&_>:first-child[data-tag=tiny-checkbox]]:pl-0", "[&_[class^=tiny-autocomplete]]:w-full", "[&_[class^=tiny-cascader]]:w-full", _vm.state.isDisplayOnly ? "[&_>*:not([data-tag^=tiny-],[class^=tiny-])]:leading-8 [&_>*:not([data-tag^=tiny-],[class^=tiny-])]:sm:leading-normal" : ""],
+    attrs: {
+      "data-tag": "tiny-form-item-show"
+    }
+  }, [_vm._t("default")], 2), _vm.state.validateState === "error" && _vm.showMessage && _vm.state.showMessage ? _vm._t("error", function() {
+    return [_c("div", {
+      class: _vm.m("relative sm:absolute left-0 bottom-1 sm:-bottom-5 text-color-error text-xs leading-normal line-clamp-3 sm:line-clamp-1 break-all", typeof _vm.inlineMessage === "boolean" && _vm.inlineMessage || _vm.state.inlineMessage ? "relative top-auto left-auto inline-block" : "", _vm.state.formItemSize === "small" ? "pt-0.5" : "", _vm.state.formItemSize === "mini" ? "pt-px" : ""),
+      attrs: {
+        "title": _vm.state.validateMessage
+      }
+    }, [_vm._v(" " + _vm._s(_vm.state.validateMessage) + " ")])];
+  }, {
+    "dataTag": "tiny-form-item-error"
+  }) : _vm._e(), _vm.state.validateState !== "error" && _vm.showMessage && _vm.state.showMessage ? _vm._t("prompt") : _vm._e()], 2)], 1);
+};
+var staticRenderFns = [];
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, render, staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var mobileFirst = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { mobileFirst as default };

package/lib/pc.js

@@ -0,0 +1,314 @@
+import { defineComponent, $prefix, setup, isVue2, parseVnode, hooks, stringifyCssClass, deduplicateCssClass, $props } from '@opentinyvue/vue-common';
+import { renderless, api } from '@opentinyvue/vue-renderless/form-item/vue';
+import LabelWrap from './label-wrap';
+import Tooltip from '@opentinyvue/vue-tooltip';
+import { iconError } from '@opentinyvue/vue-icon';
+
+function normalizeComponent(scriptExports, render, staticRenderFns, functionalTemplate, injectStyles, scopeId, moduleIdentifier, shadowMode) {
+  var options = typeof scriptExports === "function" ? scriptExports.options : scriptExports;
+  if (render) {
+    options.render = render;
+    options.staticRenderFns = staticRenderFns;
+    options._compiled = true;
+  }
+  var hook;
+  if (injectStyles) {
+    hook = injectStyles;
+  }
+  if (hook) {
+    if (options.functional) {
+      options._injectStyles = hook;
+      var originalRender = options.render;
+      options.render = function renderWithStyleInjection(h, context) {
+        hook.call(context);
+        return originalRender(h, context);
+      };
+    } else {
+      var existing = options.beforeCreate;
+      options.beforeCreate = existing ? [].concat(existing, hook) : [hook];
+    }
+  }
+  return {
+    exports: scriptExports,
+    options
+  };
+}
+
+function _extends() {
+  return _extends = Object.assign ? Object.assign.bind() : function(n) {
+    for (var e = 1; e < arguments.length; e++) {
+      var t = arguments[e];
+      for (var r in t) ({}).hasOwnProperty.call(t, r) && (n[r] = t[r]);
+    }
+    return n;
+  }, _extends.apply(null, arguments);
+}
+var $constants = {
+  FORM_NAME: "Form",
+  FORM_ITEM_NAME: "FormItem"
+};
+var __vue2_script = defineComponent({
+  name: $prefix + "FormItem",
+  componentName: "FormItem",
+  components: {
+    LabelWrap,
+    Tooltip,
+    IconError: iconError()
+  },
+  props: _extends({}, $props, {
+    _constants: {
+      type: Object,
+      default: function _default() {
+        return $constants;
+      }
+    },
+    appendToBody: {
+      type: Boolean,
+      default: void 0
+    },
+    error: String,
+    for: String,
+    inlineMessage: {
+      type: Boolean,
+      default: void 0
+    },
+    messageType: String,
+    label: String,
+    labelWidth: String,
+    manual: Boolean,
+    popperOptions: {
+      type: Object,
+      default: function _default2() {
+        return {};
+      }
+    },
+    prop: String,
+    required: {
+      type: Boolean,
+      default: void 0
+    },
+    rules: [Object, Array],
+    showMessage: {
+      type: Boolean,
+      default: true
+    },
+    size: String,
+    validateDisabled: Boolean,
+    validateDebounce: Boolean,
+    validatePosition: String,
+    validateStatus: String,
+    validateType: String,
+    validateIcon: {
+      type: Object,
+      default: null
+    },
+    ellipsis: {
+      type: Boolean,
+      default: false
+    },
+    vertical: {
+      type: Boolean,
+      default: false
+    },
+    extra: String
+  }),
+  setup: function setup$1(props, context) {
+    return setup({
+      props,
+      context,
+      renderless,
+      api
+    });
+  },
+  render: function render() {
+    var _state$formInstance, _state$formInstance2, _state$formInstance3, _state$formInstance4, _this = this, _class, _class2, _class3, _class4, _class5;
+    var h = arguments[0];
+    var state = this.state, required = this.required, slots = this.slots, label = this.label, scopedSlots = this.scopedSlots, showMessage = this.showMessage; this.inlineMessage; var ellipsis = this.ellipsis, vertical = this.vertical, handleLabelMouseenter = this.handleLabelMouseenter, handleMouseleave = this.handleMouseleave;
+    var validateIcon = state.validateIcon, isErrorInline = state.isErrorInline, isErrorBlock = state.isErrorBlock, tooltipType = state.tooltipType;
+    var isMobile = state.mode === "mobile";
+    var classPrefix = isMobile ? "tiny-mobile-" : "tiny-";
+    var labelSlot = slots.label ? slots.label() : null;
+    var defaultSlots = slots.default ? slots.default() : null;
+    var errorSlot = scopedSlots.error && scopedSlots.error(state.validateMessage);
+    var formItemClass = classPrefix + "form-item--" + (state.sizeClass ? state.sizeClass : "default");
+    var isShowError = state.validateState === "error" && showMessage && state.form.showMessage;
+    var validateTag = (_state$formInstance = state.formInstance) == null ? void 0 : _state$formInstance.validateTag;
+    var wrapFragment = (_state$formInstance2 = state.formInstance) == null ? void 0 : _state$formInstance2.wrapFragment;
+    var validateMessage;
+    var formAppendToBody = (_state$formInstance3 = state.formInstance) == null ? void 0 : _state$formInstance3.appendToBody;
+    var appendToBody = typeof this.appendToBody === "boolean" ? this.appendToBody : typeof formAppendToBody === "boolean" ? formAppendToBody : true;
+    var validatePosition = this.validatePosition || ((_state$formInstance4 = state.formInstance) == null ? void 0 : _state$formInstance4.validatePosition) || "top-end";
+    var popperOptions = _extends({}, state.formInstance.popperOptions, this.popperOptions, {
+      forceAbsolute: !appendToBody,
+      onUpdate: function onUpdate(options) {
+        var popper = options.instance._popper;
+        var translate3d = popper.style.transform;
+        var matchTranslate = translate3d.match(/translate3d\((\w+)px, (\w+)px, (\w+)px\)/);
+        if (!Array.isArray(matchTranslate)) {
+          return;
+        }
+        var _matchTranslate$slice = matchTranslate.slice(1), x = _matchTranslate$slice[0], y = _matchTranslate$slice[1], z = _matchTranslate$slice[2];
+        popper.style.transform = "translate3d(" + x + "px, " + parseInt(y, 10) + "px, " + z + "px)";
+      }
+    });
+    var validateIconNode = validateIcon ? h(validateIcon, {
+      class: "tooltip-validate-icon"
+    }) : null;
+    var ItemContent = defaultSlots ? defaultSlots.map(function(vnode) {
+      if (isVue2 && !vnode.componentOptions && !validateTag) return vnode;
+      var item = parseVnode(vnode);
+      item.props = item.props || {};
+      var _item = item, type = _item.type;
+      item.dynamicProps = item.dynamicProps || [];
+      if (!item.dynamicProps.includes("size")) {
+        item.dynamicProps.push("size");
+      }
+      Object.assign(item.props, {
+        size: state.formItemSize,
+        mini: state.formItemSize === "mini" || Boolean(item.props.mini)
+      });
+      if (type && type.name && type.name.toLowerCase().endsWith("button")) {
+        return item;
+      }
+      var propsData = item.props;
+      if (propsData) {
+        if (!state.isRequired) {
+          state.validationRequired = propsData.validation && !!propsData.validation.required;
+        }
+        if (propsData.validation) {
+          return item;
+        }
+      }
+      if (isMobile) {
+        return h("div", {
+          class: classPrefix + "form-item__value",
+          style: state.valueStyle
+        }, [item]);
+      }
+      if (!isVue2) {
+        if (item.type === hooks.Fragment) {
+          if (wrapFragment) {
+            item = h(wrapFragment, [item]);
+          }
+        } else if (item.type === hooks.Text) {
+          item = h("span", [item]);
+        }
+      }
+      var data;
+      if (isVue2) {
+        if (!item.data) {
+          item.data = {};
+        }
+        data = item.data;
+      } else {
+        if (!item.props) {
+          item.props = {};
+        }
+        data = item.props;
+      }
+      var mergeClass = "tiny-tooltip " + stringifyCssClass(data.class);
+      data.class = deduplicateCssClass(mergeClass);
+      return item;
+    }) : null;
+    state.isMultiple = (ItemContent == null ? void 0 : ItemContent.length) > 1;
+    var getFormItemContnet = function getFormItemContnet2() {
+      if (isMobile) {
+        var _validatePosition = _this.validatePosition || state.formInstance.validatePosition || "right";
+        validateMessage = state.validateMessage ? _validatePosition === "right" ? h("div", {
+          "class": "tiny-mobile-input-form__error align-right"
+        }, [state.validateMessage]) : h("div", {
+          "class": "tiny-mobile-input-form__error align-left"
+        }, [state.validateMessage]) : null;
+        return ItemContent;
+      }
+      return ItemContent;
+    };
+    var FormItemContnet = ItemContent ? getFormItemContnet() : null;
+    var ErrorContent = isShowError && state.getValidateType === "text" ? errorSlot || h("div", {
+      class: (_class = {}, _class[classPrefix + "form-item__error"] = true, _class[classPrefix + "form-item__error--inline"] = isErrorInline, _class[classPrefix + "form-item__error--block"] = isErrorBlock, _class),
+      attrs: {
+        title: [state.validateMessage]
+      }
+    }, [validateIcon ? h(validateIcon, {
+      class: "validate-icon"
+    }) : null, h("span", {
+      "class": classPrefix + "form-item__validate-message"
+    }, [state.validateMessage])]) : null;
+    var LabelContent = h("label-wrap", {
+      props: {
+        isAutoWidth: state.labelStyle && state.labelStyle.width === "auto",
+        updateAll: state.form.labelWidth === "auto",
+        isMobile: state.mode === "mobile"
+      }
+    }, [labelSlot || label ? h("label", {
+      class: (_class2 = {}, _class2[classPrefix + "form-item__label"] = true, _class2["is-ellipsis"] = isMobile && ellipsis, _class2),
+      style: state.labelStyle,
+      attrs: {
+        for: state.labelFor
+      },
+      on: {
+        mouseenter: handleLabelMouseenter,
+        mouseleave: handleMouseleave
+      }
+    }, labelSlot || label + state.form.labelSuffix) : null]);
+    var ExtraTip = this.extra ? h("div", {
+      class: (_class3 = {}, _class3[classPrefix + "form-item__extra-tip"] = true, _class3)
+    }, this.extra) : null;
+    return h("div", {
+      class: (_class4 = {}, _class4[classPrefix + "form-item"] = true, _class4[classPrefix + "form-item--feedback"] = state.formInstance && state.formInstance.statusIcon, _class4["is-error"] = state.validateState === "error", _class4["is-text"] = state.getValidateType === "text", _class4["is-validating"] = state.validateState === "validating", _class4["is-success"] = state.validateState === "success", _class4["is-required"] = state.isRequired || required, _class4["is-no-asterisk"] = state.hideRequiredAsterisk, _class4[formItemClass] = true, _class4)
+    }, [!isMobile ? LabelContent : null, this.showMessage && !isMobile && h("tooltip", {
+      props: {
+        popperClass: classPrefix + "form__valid",
+        arrowOffset: 0,
+        adjustArrow: true,
+        type: tooltipType,
+        disabled: state.getValidateType !== "tip",
+        placement: validatePosition,
+        manual: true,
+        appendToBody,
+        popperOptions,
+        modelValue: isShowError ? state.canShowTip : false,
+        zIndex: "relative",
+        renderContent: function renderContent() {
+          var h2 = this.$createElement;
+          var tooltipContent;
+          if (errorSlot) {
+            tooltipContent = [errorSlot];
+          } else {
+            tooltipContent = [validateIconNode, h2("span", {
+              "class": classPrefix + "form-item__validate-message"
+            }, [state.validateMessage])];
+          }
+          return tooltipContent;
+        }
+      },
+      on: {
+        "update:modelValue": function updateModelValue(value) {
+          state.canShowTip = value;
+        }
+      },
+      ref: "tooltip"
+    }), h("div", {
+      class: (_class5 = {}, _class5[classPrefix + "form-item__content"] = true, _class5["is-vertical"] = isMobile && vertical, _class5),
+      style: !isMobile && state.contentStyle,
+      ref: "content"
+    }, [isMobile ? LabelContent : null, FormItemContnet, isMobile ? validateMessage : null, h("transition", {
+      attrs: {
+        name: classPrefix + "zoom-in-top"
+      }
+    }, [ErrorContent]), isMobile ? null : ExtraTip])]);
+  }
+});
+var __vue2_render, __vue2_staticRenderFns;
+var __cssModules = {};
+var __component__ = /* @__PURE__ */ normalizeComponent(__vue2_script, __vue2_render, __vue2_staticRenderFns, false, __vue2_injectStyles);
+function __vue2_injectStyles(context) {
+  for (var o in __cssModules) {
+    this[o] = __cssModules[o];
+  }
+}
+var pc = /* @__PURE__ */ function() {
+  return __component__.exports;
+}();
+
+export { pc as default };

package/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@opentinyvue/vue-form-item",
+  "type": "module",
+  "version": "2.21.0",
+  "description": "",
+  "license": "MIT",
+  "sideEffects": false,
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "dependencies": {
+    "@opentinyvue/vue-common": "~2.21.0",
+    "@opentinyvue/vue-icon": "~2.21.0",
+    "@opentinyvue/vue-renderless": "~3.21.0",
+    "@opentinyvue/vue-tooltip": "~2.21.0"
+  },
+  "types": "index.d.ts",
+  "scripts": {
+    "build": "pnpm -w build:ui $npm_package_name",
+    "//postversion": "pnpm build"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,69 @@
+export declare const $constants: {
+    FORM_NAME: string;
+    FORM_ITEM_NAME: string;
+};
+export declare const formItemProps: {
+    _constants: {
+        type: ObjectConstructor;
+        default: () => {
+            FORM_NAME: string;
+            FORM_ITEM_NAME: string;
+        };
+    };
+    appendToBody: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    error: {
+        type: StringConstructor;
+        default: string;
+    };
+    for: StringConstructor;
+    inlineMessage: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    messageType: StringConstructor;
+    label: StringConstructor;
+    labelWidth: StringConstructor;
+    manual: BooleanConstructor;
+    popperOptions: {
+        type: ObjectConstructor;
+        default: () => {};
+    };
+    prop: StringConstructor;
+    required: {
+        type: BooleanConstructor;
+        default: undefined;
+    };
+    rules: (ArrayConstructor | ObjectConstructor)[];
+    showMessage: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    size: StringConstructor;
+    tipContent: StringConstructor;
+    validateDisabled: BooleanConstructor;
+    validateDebounce: BooleanConstructor;
+    validatePosition: StringConstructor;
+    validateStatus: StringConstructor;
+    validateType: StringConstructor;
+    validateIcon: ObjectConstructor;
+    ellipsis: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    vertical: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    extra: StringConstructor;
+    tiny_mode: StringConstructor;
+    tiny_mode_root: BooleanConstructor;
+    tiny_template: (ObjectConstructor | FunctionConstructor)[];
+    tiny_renderless: FunctionConstructor;
+    tiny_theme: StringConstructor;
+    tiny_chart_theme: ObjectConstructor;
+};
+declare const _default: any;
+export default _default;

package/src/label-wrap.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/mobile-first.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

package/src/pc.vue.d.ts

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;