element-ps 1.0.20 → 1.0.21

package/lib/packages/components/icon/src/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sources":["../../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-ps/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;MAGa,YAAYA,iBAAW;AAAA,EAClC,MAAM;AAAA,IACJ,MAAMC,qBAAgC,CAAC,QAAQ;AAAA;AAAA,EAEjD,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;;;;"}
+{"version":3,"file":"icon.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/packages/components/icon/src/icon.vue_vue&type=script&lang.js

@@ -4,7 +4,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
 var util = require('../../../utils/util.js');
-var icon = require('./icon.js');
+var icon = require('./icon2.js');
 var shared = require('@vue/shared');
 
 var script = vue.defineComponent({

package/lib/packages/components/icon/src/icon2.js

@@ -2,11 +2,16 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var icon_vue_vue_type_script_lang = require('./icon.vue_vue&type=script&lang.js');
-var icon_vue_vue_type_template_id_89b755b6_lang = require('./icon.vue_vue&type=template&id=89b755b6&lang.js');
+var props = require('../../../utils/props.js');
 
-icon_vue_vue_type_script_lang["default"].render = icon_vue_vue_type_template_id_89b755b6_lang.render;
-icon_vue_vue_type_script_lang["default"].__file = "packages/components/icon/src/icon.vue";
+const iconProps = props.buildProps({
+  size: {
+    type: props.definePropType([Number, String])
+  },
+  color: {
+    type: String
+  }
+});
 
-exports["default"] = icon_vue_vue_type_script_lang["default"];
+exports.iconProps = iconProps;
 //# sourceMappingURL=icon2.js.map

package/lib/packages/components/icon/src/icon2.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"icon2.js","sources":["../../../../../../../packages/components/icon/src/icon.ts"],"sourcesContent":["import { definePropType, buildProps } from '@element-ps/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const iconProps = buildProps({\n  size: {\n    type: definePropType<number | string>([Number, String]),\n  },\n  color: {\n    type: String,\n  },\n} as const)\nexport type IconProps = ExtractPropTypes<typeof iconProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;MAGa,YAAYA,iBAAW;AAAA,EAClC,MAAM;AAAA,IACJ,MAAMC,qBAAgC,CAAC,QAAQ;AAAA;AAAA,EAEjD,OAAO;AAAA,IACL,MAAM;AAAA;AAAA;;;;"}

package/lib/packages/components/image-viewer/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('../../utils/with-install.js');
-require('./src/image-viewer2.js');
-var imageViewer = require('./src/image-viewer.js');
+require('./src/image-viewer.js');
+var imageViewer = require('./src/image-viewer2.js');
 var imageViewer_vue_vue_type_script_lang = require('./src/image-viewer.vue_vue&type=script&lang.js');
 
 const PsImageViewer = withInstall.withInstall(imageViewer_vue_vue_type_script_lang["default"]);

package/lib/packages/components/image-viewer/src/image-viewer.js

@@ -2,30 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var props = require('../../../utils/props.js');
+var imageViewer_vue_vue_type_script_lang = require('./image-viewer.vue_vue&type=script&lang.js');
+var imageViewer_vue_vue_type_template_id_4b22ad85_lang = require('./image-viewer.vue_vue&type=template&id=4b22ad85&lang.js');
 
-const imageViewerProps = props.buildProps({
-  urlList: {
-    type: props.definePropType(Array),
-    default: () => props.mutable([])
-  },
-  zIndex: {
-    type: Number,
-    default: 2e3
-  },
-  initialIndex: {
-    type: Number,
-    default: 0
-  },
-  infinite: {
-    type: Boolean,
-    default: true
-  },
-  hideOnClickModal: {
-    type: Boolean,
-    default: false
-  }
-});
+imageViewer_vue_vue_type_script_lang["default"].render = imageViewer_vue_vue_type_template_id_4b22ad85_lang.render;
+imageViewer_vue_vue_type_script_lang["default"].__file = "packages/components/image-viewer/src/image-viewer.vue";
 
-exports.imageViewerProps = imageViewerProps;
+exports["default"] = imageViewer_vue_vue_type_script_lang["default"];
 //# sourceMappingURL=image-viewer.js.map

package/lib/packages/components/image-viewer/src/image-viewer.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer.js","sources":["../../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-ps/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n    default: 2000,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;MAGa,mBAAmBA,iBAAW;AAAA,EACzC,SAAS;AAAA,IACP,MAAMC,qBAAyB;AAAA,IAC/B,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;;;;"}
+{"version":3,"file":"image-viewer.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/packages/components/image-viewer/src/image-viewer.vue_vue&type=script&lang.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var vue = require('vue');
-var imageViewer = require('./image-viewer.js');
+var imageViewer = require('./image-viewer2.js');
 var index = require('../../icon/index.js');
 var icons = require('@element-plus/icons');
 

package/lib/packages/components/image-viewer/src/image-viewer2.js

@@ -2,11 +2,30 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var imageViewer_vue_vue_type_script_lang = require('./image-viewer.vue_vue&type=script&lang.js');
-var imageViewer_vue_vue_type_template_id_4b22ad85_lang = require('./image-viewer.vue_vue&type=template&id=4b22ad85&lang.js');
+var props = require('../../../utils/props.js');
 
-imageViewer_vue_vue_type_script_lang["default"].render = imageViewer_vue_vue_type_template_id_4b22ad85_lang.render;
-imageViewer_vue_vue_type_script_lang["default"].__file = "packages/components/image-viewer/src/image-viewer.vue";
+const imageViewerProps = props.buildProps({
+  urlList: {
+    type: props.definePropType(Array),
+    default: () => props.mutable([])
+  },
+  zIndex: {
+    type: Number,
+    default: 2e3
+  },
+  initialIndex: {
+    type: Number,
+    default: 0
+  },
+  infinite: {
+    type: Boolean,
+    default: true
+  },
+  hideOnClickModal: {
+    type: Boolean,
+    default: false
+  }
+});
 
-exports["default"] = imageViewer_vue_vue_type_script_lang["default"];
+exports.imageViewerProps = imageViewerProps;
 //# sourceMappingURL=image-viewer2.js.map

package/lib/packages/components/image-viewer/src/image-viewer2.js.map

@@ -1 +1 @@
-{"version":3,"file":"image-viewer2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"image-viewer2.js","sources":["../../../../../../../packages/components/image-viewer/src/image-viewer.ts"],"sourcesContent":["import { buildProps, definePropType, mutable } from '@element-ps/utils/props'\nimport type { ExtractPropTypes } from 'vue'\n\nexport const imageViewerProps = buildProps({\n  urlList: {\n    type: definePropType<string[]>(Array),\n    default: () => mutable([] as const),\n  },\n  zIndex: {\n    type: Number,\n    default: 2000,\n  },\n  initialIndex: {\n    type: Number,\n    default: 0,\n  },\n  infinite: {\n    type: Boolean,\n    default: true,\n  },\n  hideOnClickModal: {\n    type: Boolean,\n    default: false,\n  },\n} as const)\nexport type ImageViewerProps = ExtractPropTypes<typeof imageViewerProps>\n"],"names":["buildProps","definePropType","mutable"],"mappings":";;;;;;MAGa,mBAAmBA,iBAAW;AAAA,EACzC,SAAS;AAAA,IACP,MAAMC,qBAAyB;AAAA,IAC/B,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,kBAAkB;AAAA,IAChB,MAAM;AAAA,IACN,SAAS;AAAA;AAAA;;;;"}

package/lib/packages/components/index.js

@@ -70,32 +70,32 @@ var index$11 = require('./upload/index.js');
 require('./virtual-list/index.js');
 var index$12 = require('./loading/index.js');
 var index$13 = require('./popover/index.js');
-var affix = require('./affix/src/affix2.js');
+var affix = require('./affix/src/affix.js');
 var alert = require('./alert/src/alert2.js');
 var avatar = require('./avatar/src/avatar.js');
-var backtop = require('./backtop/src/backtop.js');
-var badge = require('./badge/src/badge.js');
+var backtop = require('./backtop/src/backtop2.js');
+var badge = require('./badge/src/badge2.js');
 var breadcrumb = require('./breadcrumb/src/breadcrumb.js');
 var breadcrumbItem = require('./breadcrumb/src/breadcrumb-item.js');
 var button = require('./button/src/button.js');
-var card = require('./card/src/card.js');
+var card = require('./card/src/card2.js');
 var types = require('./cascader-panel/src/types.js');
 var config = require('./cascader-panel/src/config.js');
 var col = require('./col/src/col.js');
 var configProvider = require('./config-provider/src/config-provider.js');
 var useDialog = require('./dialog/src/use-dialog.js');
 var dialog = require('./dialog/src/dialog.js');
-var divider = require('./divider/src/divider.js');
-var empty = require('./empty/src/empty.js');
-var icon = require('./icon/src/icon.js');
+var divider = require('./divider/src/divider2.js');
+var empty = require('./empty/src/empty2.js');
+var icon = require('./icon/src/icon2.js');
 var image = require('./image/src/image.js');
-var imageViewer = require('./image-viewer/src/image-viewer.js');
-var input = require('./input/src/input.js');
+var imageViewer = require('./image-viewer/src/image-viewer2.js');
+var input = require('./input/src/input2.js');
 var inputNumber = require('./input-number/src/input-number.js');
-var link = require('./link/src/link2.js');
+var link = require('./link/src/link.js');
 var menu = require('./menu/src/menu.js');
-var menuItem = require('./menu/src/menu-item.js');
-var menuItemGroup = require('./menu/src/menu-item-group2.js');
+var menuItem = require('./menu/src/menu-item2.js');
+var menuItemGroup = require('./menu/src/menu-item-group.js');
 var subMenu = require('./menu/src/sub-menu.js');
 var overlay = require('./overlay/src/overlay.js');
 var pageHeader = require('./page-header/src/page-header.js');

package/lib/packages/components/input/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('../../utils/with-install.js');
-require('./src/input2.js');
-var input = require('./src/input.js');
+require('./src/input.js');
+var input = require('./src/input2.js');
 var input_vue_vue_type_script_lang = require('./src/input.vue_vue&type=script&lang.js');
 
 const PsInput = withInstall.withInstall(input_vue_vue_type_script_lang["default"]);

package/lib/packages/components/input/src/input.js

@@ -2,84 +2,11 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-require('../../../hooks/index.js');
-var props = require('../../../utils/props.js');
-var index = require('../../../hooks/use-form-item/index.js');
+var input_vue_vue_type_script_lang = require('./input.vue_vue&type=script&lang.js');
+var input_vue_vue_type_template_id_3290dcb6_lang = require('./input.vue_vue&type=template&id=3290dcb6&lang.js');
 
-const inputProps = props.buildProps({
-  ...index.useFormItemProps,
-  _modelValue: {
-    type: props.definePropType(void 0),
-    default: ""
-  },
-  type: {
-    type: String,
-    default: "text"
-  },
-  resize: {
-    type: String,
-    values: ["none", "both", "horizontal", "vertical"]
-  },
-  autosize: {
-    type: props.definePropType([Boolean, Object]),
-    default: false
-  },
-  autocomplete: {
-    type: String,
-    default: "off"
-  },
-  placeholder: {
-    type: String
-  },
-  form: {
-    type: String,
-    default: ""
-  },
-  readonly: {
-    type: Boolean,
-    default: false
-  },
-  clearable: {
-    type: Boolean,
-    default: false
-  },
-  showPassword: {
-    type: Boolean,
-    default: false
-  },
-  showWordLimit: {
-    type: Boolean,
-    default: false
-  },
-  suffixIcon: {
-    type: props.definePropType([String, Object]),
-    default: ""
-  },
-  prefixIcon: {
-    type: props.definePropType([String, Object]),
-    default: ""
-  },
-  label: {
-    type: String
-  },
-  tabindex: {
-    type: [Number, String]
-  },
-  validateEvent: {
-    type: Boolean,
-    default: true
-  },
-  inputStyle: {
-    type: props.definePropType([Object, Array, String]),
-    default: () => props.mutable({})
-  },
-  maxlength: {
-    type: [Number, String]
-  },
-  widget: {
-    type: String
-  }
-});
+input_vue_vue_type_script_lang["default"].render = input_vue_vue_type_template_id_3290dcb6_lang.render;
+input_vue_vue_type_script_lang["default"].__file = "packages/components/input/src/input.vue";
 
-exports.inputProps = inputProps;
+exports["default"] = input_vue_vue_type_script_lang["default"];
 //# sourceMappingURL=input.js.map

package/lib/packages/components/input/src/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","sources":["../../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { useFormItemProps } from '@element-ps/hooks'\nimport { buildProps, definePropType, mutable } from '@element-ps/utils/props'\nimport type { StyleValue } from '@element-ps/utils/types'\nimport type { ExtractPropTypes, Component } from 'vue'\n\ntype AutoSize = { minRows?: number; maxRows?: number } | boolean\n\nexport const inputProps = buildProps({\n  ...useFormItemProps,\n  _modelValue: {\n    type: definePropType<string | number | null | undefined>(undefined),\n    default: '',\n  },\n  type: {\n    type: String,\n    default: 'text',\n  },\n  resize: {\n    type: String,\n    values: ['none', 'both', 'horizontal', 'vertical'],\n  },\n  autosize: {\n    type: definePropType<AutoSize>([Boolean, Object]),\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n  placeholder: {\n    type: String,\n  },\n  form: {\n    type: String,\n    default: '',\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  clearable: {\n    type: Boolean,\n    default: false,\n  },\n  showPassword: {\n    type: Boolean,\n    default: false,\n  },\n  showWordLimit: {\n    type: Boolean,\n    default: false,\n  },\n  suffixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  prefixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  label: {\n    type: String,\n  },\n  tabindex: {\n    type: [Number, String],\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  inputStyle: {\n    type: definePropType<StyleValue>([Object, Array, String]),\n    default: () => mutable({} as const),\n  },\n  maxlength: {\n    type: [Number, String],\n  },\n  widget: {\n    type: String,\n  },\n} as const)\nexport type InputProps = ExtractPropTypes<typeof inputProps>\n"],"names":["buildProps","useFormItemProps","definePropType","mutable"],"mappings":";;;;;;;;MAOa,aAAaA,iBAAW;AAAA,KAChCC;AAAA,EACH,aAAa;AAAA,IACX,MAAMC,qBAAmD;AAAA,IACzD,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ,CAAC,QAAQ,QAAQ,cAAc;AAAA;AAAA,EAEzC,UAAU;AAAA,IACR,MAAMA,qBAAyB,CAAC,SAAS;AAAA,IACzC,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAMA,qBAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAMA,qBAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,EAER,UAAU;AAAA,IACR,MAAM,CAAC,QAAQ;AAAA;AAAA,EAEjB,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAMA,qBAA2B,CAAC,QAAQ,OAAO;AAAA,IACjD,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA;AAAA,EAEjB,QAAQ;AAAA,IACN,MAAM;AAAA;AAAA;;;;"}
+{"version":3,"file":"input.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}

package/lib/packages/components/input/src/input.vue_vue&type=script&lang.js

@@ -9,7 +9,7 @@ var constants = require('../../../utils/constants.js');
 require('../../../utils/util.js');
 var isServer = require('../../../utils/isServer.js');
 var calcTextareaHeight = require('./calc-textarea-height.js');
-var input = require('./input.js');
+var input = require('./input2.js');
 var index = require('../../icon/index.js');
 var icons = require('@element-plus/icons');
 var index$1 = require('../../../hooks/use-attrs/index.js');

package/lib/packages/components/input/src/input.vue_vue&type=script&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.vue_vue&type=script&lang.js","sources":["../../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? 'el-textarea' : 'el-input',\n      inputSize ? 'el-input--' + inputSize : '',\n      {\n        'is-disabled': inputDisabled,\n        'is-exceed': inputExceed,\n        'el-input-group': $slots.prepend || $slots.append,\n        'el-input-group--append': $slots.append,\n        'el-input-group--prepend': $slots.prepend,\n        'el-input--prefix': $slots.prefix || prefixIcon,\n        'el-input--suffix':\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        'el-input--suffix--password-clear': clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    :widget=\"widget || undefined\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        class=\"el-input__inner\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" class=\"el-input__prefix\">\n        <span class=\"el-input__prefix-inner\">\n          <slot name=\"prefix\"></slot>\n          <ps-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n            <component :is=\"prefixIcon\" />\n          </ps-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n        <span class=\"el-input__suffix-inner\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <ps-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n              <component :is=\"suffixIcon\" />\n            </ps-icon>\n          </template>\n          <ps-icon v-if=\"showClear\" class=\"el-input__icon el-input__clear\">\n            <circle-close />\n          </ps-icon>\n          <ps-icon v-if=\"showPwdVisible\" class=\"el-input__icon el-input__clear\">\n            <icon-view />\n          </ps-icon>\n          <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n            <span class=\"el-input__count-inner\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <ps-icon\n          v-if=\"validateState && validateIcon\"\n          class=\"el-input__icon el-input__validateIcon\"\n        >\n          <component :is=\"validateIcon\" />\n        </ps-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        class=\"el-textarea__inner\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n      />\n      <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useAttrs, useFormItem } from '@element-ps/hooks'\nimport { VALIDATE_STATE_MAP } from '@element-ps/utils/constants'\nimport { isObject } from '@element-ps/utils/util'\nimport isServer from '@element-ps/utils/isServer'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps } from './input'\nimport type { StyleValue } from '@element-ps/utils/types'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons'\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'PsInput',\n  inheritAttrs: false,\n  components: { PsIcon, CircleClose, IconView },\n  props: inputProps,\n\n  setup(props, { slots, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const elForm = inject(elFormKey, undefined)\n    const elFormItem = inject(elFormItemKey, undefined)\n\n    const { size: inputSize, disabled: inputDisabled } = useFormItem({})\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n    const needStatusIcon = computed(() => elForm?.statusIcon ?? false)\n    const validateState = computed(() => elFormItem?.validateState || '')\n    const validateIcon = computed(() => VALIDATE_STATE_MAP[validateState.value])\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props._modelValue === null || props._modelValue === undefined\n        ? ''\n        : String(props._modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (isServer || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.el-input__${place}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props._modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          elFormItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","PsIcon","CircleClose","IconView","inputProps","getCurrentInstance","useAttrs","inject","elFormKey","elFormItemKey","useFormItem","ref","shallowRef","computed","VALIDATE_STATE_MAP","isServer","isObject","calcTextareaHeight"],"mappings":"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"}
+{"version":3,"file":"input.vue_vue&type=script&lang.js","sources":["../../../../../../../packages/components/input/src/input.vue"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? 'el-textarea' : 'el-input',\n      inputSize ? 'el-input--' + inputSize : '',\n      {\n        'is-disabled': inputDisabled,\n        'is-exceed': inputExceed,\n        'el-input-group': $slots.prepend || $slots.append,\n        'el-input-group--append': $slots.append,\n        'el-input-group--prepend': $slots.prepend,\n        'el-input--prefix': $slots.prefix || prefixIcon,\n        'el-input--suffix':\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        'el-input--suffix--password-clear': clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    :widget=\"widget\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        class=\"el-input__inner\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" class=\"el-input__prefix\">\n        <span class=\"el-input__prefix-inner\">\n          <slot name=\"prefix\"></slot>\n          <ps-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n            <component :is=\"prefixIcon\" />\n          </ps-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n        <span class=\"el-input__suffix-inner\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <ps-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n              <component :is=\"suffixIcon\" />\n            </ps-icon>\n          </template>\n          <ps-icon v-if=\"showClear\" class=\"el-input__icon el-input__clear\">\n            <circle-close />\n          </ps-icon>\n          <ps-icon v-if=\"showPwdVisible\" class=\"el-input__icon el-input__clear\">\n            <icon-view />\n          </ps-icon>\n          <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n            <span class=\"el-input__count-inner\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <ps-icon\n          v-if=\"validateState && validateIcon\"\n          class=\"el-input__icon el-input__validateIcon\"\n        >\n          <component :is=\"validateIcon\" />\n        </ps-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        class=\"el-textarea__inner\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n      />\n      <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useAttrs, useFormItem } from '@element-ps/hooks'\nimport { VALIDATE_STATE_MAP } from '@element-ps/utils/constants'\nimport { isObject } from '@element-ps/utils/util'\nimport isServer from '@element-ps/utils/isServer'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps } from './input'\nimport type { StyleValue } from '@element-ps/utils/types'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons'\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'PsInput',\n  inheritAttrs: false,\n  components: { PsIcon, CircleClose, IconView },\n  props: inputProps,\n\n  setup(props, { slots, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const elForm = inject(elFormKey, undefined)\n    const elFormItem = inject(elFormItemKey, undefined)\n\n    const { size: inputSize, disabled: inputDisabled } = useFormItem({})\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n    const needStatusIcon = computed(() => elForm?.statusIcon ?? false)\n    const validateState = computed(() => elFormItem?.validateState || '')\n    const validateIcon = computed(() => VALIDATE_STATE_MAP[validateState.value])\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props._modelValue === null || props._modelValue === undefined\n        ? ''\n        : String(props._modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (isServer || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.el-input__${place}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props._modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          elFormItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n    }\n  },\n})\n</script>\n"],"names":["defineComponent","PsIcon","CircleClose","IconView","inputProps","getCurrentInstance","useAttrs","inject","elFormKey","elFormItemKey","useFormItem","ref","shallowRef","computed","VALIDATE_STATE_MAP","isServer","isObject","calcTextareaHeight"],"mappings":"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"}

package/lib/packages/components/input/src/input.vue_vue&type=template&id=3290dcb6&lang.js

@@ -55,7 +55,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       _ctx.$attrs.class
     ]),
     style: vue.normalizeStyle(_ctx.containerStyle),
-    widget: _ctx.widget || void 0
+    widget: _ctx.widget
   }, [
     vue.createCommentVNode(" input "),
     _ctx.type !== "textarea" ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [

package/lib/packages/components/input/src/input.vue_vue&type=template&id=3290dcb6&lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.vue_vue&type=template&id=3290dcb6&lang.js","sources":["../../../../../../../packages/components/input/src/input.vue?vue&type=template&id=3290dcb6&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? 'el-textarea' : 'el-input',\n      inputSize ? 'el-input--' + inputSize : '',\n      {\n        'is-disabled': inputDisabled,\n        'is-exceed': inputExceed,\n        'el-input-group': $slots.prepend || $slots.append,\n        'el-input-group--append': $slots.append,\n        'el-input-group--prepend': $slots.prepend,\n        'el-input--prefix': $slots.prefix || prefixIcon,\n        'el-input--suffix':\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        'el-input--suffix--password-clear': clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    :widget=\"widget || undefined\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        class=\"el-input__inner\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" class=\"el-input__prefix\">\n        <span class=\"el-input__prefix-inner\">\n          <slot name=\"prefix\"></slot>\n          <ps-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n            <component :is=\"prefixIcon\" />\n          </ps-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n        <span class=\"el-input__suffix-inner\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <ps-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n              <component :is=\"suffixIcon\" />\n            </ps-icon>\n          </template>\n          <ps-icon v-if=\"showClear\" class=\"el-input__icon el-input__clear\">\n            <circle-close />\n          </ps-icon>\n          <ps-icon v-if=\"showPwdVisible\" class=\"el-input__icon el-input__clear\">\n            <icon-view />\n          </ps-icon>\n          <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n            <span class=\"el-input__count-inner\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <ps-icon\n          v-if=\"validateState && validateIcon\"\n          class=\"el-input__icon el-input__validateIcon\"\n        >\n          <component :is=\"validateIcon\" />\n        </ps-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        class=\"el-textarea__inner\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n      />\n      <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useAttrs, useFormItem } from '@element-ps/hooks'\nimport { VALIDATE_STATE_MAP } from '@element-ps/utils/constants'\nimport { isObject } from '@element-ps/utils/util'\nimport isServer from '@element-ps/utils/isServer'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps } from './input'\nimport type { StyleValue } from '@element-ps/utils/types'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons'\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'PsInput',\n  inheritAttrs: false,\n  components: { PsIcon, CircleClose, IconView },\n  props: inputProps,\n\n  setup(props, { slots, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const elForm = inject(elFormKey, undefined)\n    const elFormItem = inject(elFormItemKey, undefined)\n\n    const { size: inputSize, disabled: inputDisabled } = useFormItem({})\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n    const needStatusIcon = computed(() => elForm?.statusIcon ?? false)\n    const validateState = computed(() => elFormItem?.validateState || '')\n    const validateIcon = computed(() => VALIDATE_STATE_MAP[validateState.value])\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props._modelValue === null || props._modelValue === undefined\n        ? ''\n        : String(props._modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (isServer || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.el-input__${place}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props._modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          elFormItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createCommentVNode","_renderSlot","_createElementVNode","_mergeProps","_createBlock","_createVNode"],"mappings":";;;;;;;;;EAyBiC,OAAM;AAAA;;;;EAmBQ,OAAM;AAAA;qBACvC,OAAM;;;EASa,OAAM;AAAA;qBACzB,OAAM;;;EAasB,OAAM;AAAA;qBAC9B,OAAM;;;EAcQ,OAAM;AAAA;;;;EAmBA,OAAM;AAAA;;;;;8CArG1CA;IAEG;;;;;;;;;;;;;;;IAgBA,0BAAO;IACP,QAAQ,eAAU;AAAA;IAEnBC;IACgB,6CAAhBD;MACEC;MACW,YAAO,4BAAlBD,8BAAA;QACEE;;MAGFC,gCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,MAAM,oBAAgB,6CAAyC;QAC/D,UAAU;QACV,UAAU;QACV,cAAc;QACd,UAAU;QACV,cAAY;QACZ,aAAa;QACb,OAAO;;MAGVH;MACY,YAAO,UAAU,oCAA7BD,+BAAA;QACEG,+BAAA;UACED;UACe,oCAAfG;;YAA2B,OAAM;AAAA;iCAC/B;gCAAAA,4CAAgB;;;;;;MAKtBJ;MACY,uCAAZD,+BAAA;QACEG,+BAAA;WACmB,mBAAc,wBAAmB,4CAAlDH;YACEE;YACe,oCAAfG;;cAA2B,OAAM;AAAA;mCAC/B;kCAAAA,4CAAgB;;;;;UAGL,mCAAfA;;YAA0B,OAAM;AAAA;iCAC9B;cAAAC;;;;UAEa,wCAAfD;;YAA+B,OAAM;AAAA;iCACnC;cAAAC;;;;UAEU,4CAAZN,+BAAA;YACEG,+BAAA,gCACK,+CAAmB,WAAM;;;QAK1B,sBAAiB,sCADzBE;;UAEE,OAAM;AAAA;+BAEN;8BAAAA,4CAAgB;;;;;MAIpBJ;MACW,YAAO,2BAAlBD,8BAAA;QACEE;;gCAKJF;MADAC;MAEEE,mCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,UAAU;QACV,UAAU;QACV,UAAU;QACV,cAAc;QACd,OAAO;QACP,cAAY;QACZ,aAAa;;MAEJ,4CAAZJ,+BAAA,iCACK,+CAAmB,WAAM;;;gBArGxB;;;;;;"}
+{"version":3,"file":"input.vue_vue&type=template&id=3290dcb6&lang.js","sources":["../../../../../../../packages/components/input/src/input.vue?vue&type=template&id=3290dcb6&lang.js"],"sourcesContent":["<template>\n  <div\n    v-show=\"type !== 'hidden'\"\n    :class=\"[\n      type === 'textarea' ? 'el-textarea' : 'el-input',\n      inputSize ? 'el-input--' + inputSize : '',\n      {\n        'is-disabled': inputDisabled,\n        'is-exceed': inputExceed,\n        'el-input-group': $slots.prepend || $slots.append,\n        'el-input-group--append': $slots.append,\n        'el-input-group--prepend': $slots.prepend,\n        'el-input--prefix': $slots.prefix || prefixIcon,\n        'el-input--suffix':\n          $slots.suffix || suffixIcon || clearable || showPassword,\n        'el-input--suffix--password-clear': clearable && showPassword,\n      },\n      $attrs.class,\n    ]\"\n    :style=\"containerStyle\"\n    :widget=\"widget\"\n  >\n    <!-- input -->\n    <template v-if=\"type !== 'textarea'\">\n      <!-- prepend slot -->\n      <div v-if=\"$slots.prepend\" class=\"el-input-group__prepend\">\n        <slot name=\"prepend\" />\n      </div>\n\n      <input\n        ref=\"input\"\n        class=\"el-input__inner\"\n        v-bind=\"attrs\"\n        :type=\"showPassword ? (passwordVisible ? 'text' : 'password') : type\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :tabindex=\"tabindex\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n        :style=\"inputStyle\"\n      />\n\n      <!-- prefix slot -->\n      <span v-if=\"$slots.prefix || prefixIcon\" class=\"el-input__prefix\">\n        <span class=\"el-input__prefix-inner\">\n          <slot name=\"prefix\"></slot>\n          <ps-icon v-if=\"prefixIcon\" class=\"el-input__icon\">\n            <component :is=\"prefixIcon\" />\n          </ps-icon>\n        </span>\n      </span>\n\n      <!-- suffix slot -->\n      <span v-if=\"suffixVisible\" class=\"el-input__suffix\">\n        <span class=\"el-input__suffix-inner\">\n          <template v-if=\"!showClear || !showPwdVisible || !isWordLimitVisible\">\n            <slot name=\"suffix\"></slot>\n            <ps-icon v-if=\"suffixIcon\" class=\"el-input__icon\">\n              <component :is=\"suffixIcon\" />\n            </ps-icon>\n          </template>\n          <ps-icon v-if=\"showClear\" class=\"el-input__icon el-input__clear\">\n            <circle-close />\n          </ps-icon>\n          <ps-icon v-if=\"showPwdVisible\" class=\"el-input__icon el-input__clear\">\n            <icon-view />\n          </ps-icon>\n          <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n            <span class=\"el-input__count-inner\">\n              {{ textLength }} / {{ attrs.maxlength }}\n            </span>\n          </span>\n        </span>\n        <ps-icon\n          v-if=\"validateState && validateIcon\"\n          class=\"el-input__icon el-input__validateIcon\"\n        >\n          <component :is=\"validateIcon\" />\n        </ps-icon>\n      </span>\n\n      <!-- append slot -->\n      <div v-if=\"$slots.append\" class=\"el-input-group__append\">\n        <slot name=\"append\" />\n      </div>\n    </template>\n\n    <!-- textarea -->\n    <template v-else>\n      <textarea\n        ref=\"textarea\"\n        class=\"el-textarea__inner\"\n        v-bind=\"attrs\"\n        :tabindex=\"tabindex\"\n        :disabled=\"inputDisabled\"\n        :readonly=\"readonly\"\n        :autocomplete=\"autocomplete\"\n        :style=\"computedTextareaStyle\"\n        :aria-label=\"label\"\n        :placeholder=\"placeholder\"\n      />\n      <span v-if=\"isWordLimitVisible\" class=\"el-input__count\">\n        {{ textLength }} / {{ attrs.maxlength }}\n      </span>\n    </template>\n  </div>\n</template>\n\n<script lang=\"ts\">\nimport {\n  defineComponent,\n  inject,\n  computed,\n  watch,\n  nextTick,\n  getCurrentInstance,\n  ref,\n  shallowRef,\n  onMounted,\n  onUpdated,\n} from 'vue'\nimport { elFormKey, elFormItemKey } from '@element-ps/tokens'\nimport { useAttrs, useFormItem } from '@element-ps/hooks'\nimport { VALIDATE_STATE_MAP } from '@element-ps/utils/constants'\nimport { isObject } from '@element-ps/utils/util'\nimport isServer from '@element-ps/utils/isServer'\nimport { calcTextareaHeight } from './calc-textarea-height'\nimport { inputProps } from './input'\nimport type { StyleValue } from '@element-ps/utils/types'\nimport { PsIcon } from '@element-ps/components/icon'\nimport { CircleClose, View as IconView } from '@element-plus/icons'\n\nconst PENDANT_MAP = {\n  suffix: 'append',\n  prefix: 'prepend',\n} as const\n\nexport default defineComponent({\n  name: 'PsInput',\n  inheritAttrs: false,\n  components: { PsIcon, CircleClose, IconView },\n  props: inputProps,\n\n  setup(props, { slots, attrs: rawAttrs }) {\n    const instance = getCurrentInstance()!\n    const attrs = useAttrs()\n\n    const elForm = inject(elFormKey, undefined)\n    const elFormItem = inject(elFormItemKey, undefined)\n\n    const { size: inputSize, disabled: inputDisabled } = useFormItem({})\n\n    const input = ref<HTMLInputElement>()\n    const textarea = ref<HTMLTextAreaElement>()\n    const focused = ref(false)\n    const hovering = ref(false)\n    const passwordVisible = ref(false)\n    const _textareaCalcStyle = shallowRef(props.inputStyle)\n\n    const inputOrTextarea = computed(() => input.value || textarea.value)\n    const needStatusIcon = computed(() => elForm?.statusIcon ?? false)\n    const validateState = computed(() => elFormItem?.validateState || '')\n    const validateIcon = computed(() => VALIDATE_STATE_MAP[validateState.value])\n    const containerStyle = computed(() => rawAttrs.style as StyleValue)\n    const computedTextareaStyle = computed<StyleValue>(() => [\n      props.inputStyle,\n      _textareaCalcStyle.value,\n      { resize: props.resize },\n    ])\n    const nativeInputValue = computed(() =>\n      props._modelValue === null || props._modelValue === undefined\n        ? ''\n        : String(props._modelValue)\n    )\n    const showClear = computed(\n      () =>\n        props.clearable &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !!nativeInputValue.value &&\n        (focused.value || hovering.value)\n    )\n    const showPwdVisible = computed(\n      () =>\n        props.showPassword &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        (!!nativeInputValue.value || focused.value)\n    )\n    const isWordLimitVisible = computed(\n      () =>\n        props.showWordLimit &&\n        !!attrs.value.maxlength &&\n        (props.type === 'text' || props.type === 'textarea') &&\n        !inputDisabled.value &&\n        !props.readonly &&\n        !props.showPassword\n    )\n    const textLength = computed(() => Array.from(nativeInputValue.value).length)\n    const inputExceed = computed(\n      () =>\n        // show exceed style if length of initial value greater then maxlength\n        !!isWordLimitVisible.value &&\n        textLength.value > Number(attrs.value.maxlength)\n    )\n\n    const resizeTextarea = () => {\n      const { type, autosize } = props\n\n      if (isServer || type !== 'textarea') return\n\n      if (autosize) {\n        const minRows = isObject(autosize) ? autosize.minRows : undefined\n        const maxRows = isObject(autosize) ? autosize.maxRows : undefined\n        _textareaCalcStyle.value = {\n          ...calcTextareaHeight(textarea.value!, minRows, maxRows),\n        }\n      } else {\n        _textareaCalcStyle.value = {\n          minHeight: calcTextareaHeight(textarea.value!).minHeight,\n        }\n      }\n    }\n\n    const setNativeInputValue = () => {\n      const input = inputOrTextarea.value\n      if (!input || input.value === nativeInputValue.value) return\n      input.value = nativeInputValue.value\n    }\n\n    const calcIconOffset = (place: 'prefix' | 'suffix') => {\n      const { el } = instance.vnode\n      if (!el) return\n      const elList: HTMLSpanElement[] = Array.from(\n        el.querySelectorAll(`.el-input__${place}`)\n      )\n      const target = elList.find((item) => item.parentNode === el)\n\n      if (!target) return\n\n      const pendant = PENDANT_MAP[place]\n\n      if (slots[pendant]) {\n        target.style.transform = `translateX(${place === 'suffix' ? '-' : ''}${\n          el.querySelector(`.el-input-group__${pendant}`).offsetWidth\n        }px)`\n      } else {\n        target.removeAttribute('style')\n      }\n    }\n\n    const updateIconOffset = () => {\n      calcIconOffset('prefix')\n      calcIconOffset('suffix')\n    }\n\n    const suffixVisible = computed(\n      () =>\n        !!slots.suffix ||\n        !!props.suffixIcon ||\n        showClear.value ||\n        props.showPassword ||\n        isWordLimitVisible.value ||\n        (!!validateState.value && needStatusIcon.value)\n    )\n\n    watch(\n      () => props._modelValue,\n      () => {\n        nextTick(resizeTextarea)\n        if (props.validateEvent) {\n          elFormItem?.validate?.('change')\n        }\n      }\n    )\n\n    // native input value is set explicitly\n    // do not use v-model / :value in template\n    // see: https://github.com/ElemeFE/element/issues/14521\n    watch(nativeInputValue, () => setNativeInputValue())\n\n    // when change between <input> and <textarea>,\n    // update DOM dependent value and styles\n    // https://github.com/ElemeFE/element/issues/14857\n    watch(\n      () => props.type,\n      () => {\n        nextTick(() => {\n          setNativeInputValue()\n          resizeTextarea()\n          updateIconOffset()\n        })\n      }\n    )\n\n    onMounted(() => {\n      setNativeInputValue()\n      updateIconOffset()\n      nextTick(resizeTextarea)\n    })\n\n    onUpdated(() => {\n      nextTick(updateIconOffset)\n    })\n\n    return {\n      input,\n      textarea,\n      attrs,\n      inputSize,\n      validateState,\n      validateIcon,\n      containerStyle,\n      computedTextareaStyle,\n      inputDisabled,\n      showClear,\n      showPwdVisible,\n      isWordLimitVisible,\n      textLength,\n      hovering,\n      inputExceed,\n      passwordVisible,\n      inputOrTextarea,\n      suffixVisible,\n    }\n  },\n})\n</script>\n"],"names":["_createElementBlock","_createCommentVNode","_renderSlot","_createElementVNode","_mergeProps","_createBlock","_createVNode"],"mappings":";;;;;;;;;EAyBiC,OAAM;AAAA;;;;EAmBQ,OAAM;AAAA;qBACvC,OAAM;;;EASa,OAAM;AAAA;qBACzB,OAAM;;;EAasB,OAAM;AAAA;qBAC9B,OAAM;;;EAcQ,OAAM;AAAA;;;;EAmBA,OAAM;AAAA;;;;;8CArG1CA;IAEG;;;;;;;;;;;;;;;IAgBA,0BAAO;IACP,QAAQ;;IAETC;IACgB,6CAAhBD;MACEC;MACW,YAAO,4BAAlBD,8BAAA;QACEE;;MAGFC,gCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,MAAM,oBAAgB,6CAAyC;QAC/D,UAAU;QACV,UAAU;QACV,cAAc;QACd,UAAU;QACV,cAAY;QACZ,aAAa;QACb,OAAO;;MAGVH;MACY,YAAO,UAAU,oCAA7BD,+BAAA;QACEG,+BAAA;UACED;UACe,oCAAfG;;YAA2B,OAAM;AAAA;iCAC/B;gCAAAA,4CAAgB;;;;;;MAKtBJ;MACY,uCAAZD,+BAAA;QACEG,+BAAA;WACmB,mBAAc,wBAAmB,4CAAlDH;YACEE;YACe,oCAAfG;;cAA2B,OAAM;AAAA;mCAC/B;kCAAAA,4CAAgB;;;;;UAGL,mCAAfA;;YAA0B,OAAM;AAAA;iCAC9B;cAAAC;;;;UAEa,wCAAfD;;YAA+B,OAAM;AAAA;iCACnC;cAAAC;;;;UAEU,4CAAZN,+BAAA;YACEG,+BAAA,gCACK,+CAAmB,WAAM;;;QAK1B,sBAAiB,sCADzBE;;UAEE,OAAM;AAAA;+BAEN;8BAAAA,4CAAgB;;;;;MAIpBJ;MACW,YAAO,2BAAlBD,8BAAA;QACEE;;gCAKJF;MADAC;MAEEE,mCAAAC;QACE,KAAI;AAAA,QACJ,OAAM;AAAA,SACE;QACP,UAAU;QACV,UAAU;QACV,UAAU;QACV,cAAc;QACd,OAAO;QACP,cAAY;QACZ,aAAa;;MAEJ,4CAAZJ,+BAAA,iCACK,+CAAmB,WAAM;;;gBArGxB;;;;;;"}

package/lib/packages/components/input/src/input2.js

@@ -2,11 +2,84 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var input_vue_vue_type_script_lang = require('./input.vue_vue&type=script&lang.js');
-var input_vue_vue_type_template_id_3290dcb6_lang = require('./input.vue_vue&type=template&id=3290dcb6&lang.js');
+require('../../../hooks/index.js');
+var props = require('../../../utils/props.js');
+var index = require('../../../hooks/use-form-item/index.js');
 
-input_vue_vue_type_script_lang["default"].render = input_vue_vue_type_template_id_3290dcb6_lang.render;
-input_vue_vue_type_script_lang["default"].__file = "packages/components/input/src/input.vue";
+const inputProps = props.buildProps({
+  ...index.useFormItemProps,
+  _modelValue: {
+    type: props.definePropType(void 0),
+    default: ""
+  },
+  type: {
+    type: String,
+    default: "text"
+  },
+  resize: {
+    type: String,
+    values: ["none", "both", "horizontal", "vertical"]
+  },
+  autosize: {
+    type: props.definePropType([Boolean, Object]),
+    default: false
+  },
+  autocomplete: {
+    type: String,
+    default: "off"
+  },
+  placeholder: {
+    type: String
+  },
+  form: {
+    type: String,
+    default: ""
+  },
+  readonly: {
+    type: Boolean,
+    default: false
+  },
+  clearable: {
+    type: Boolean,
+    default: false
+  },
+  showPassword: {
+    type: Boolean,
+    default: false
+  },
+  showWordLimit: {
+    type: Boolean,
+    default: false
+  },
+  suffixIcon: {
+    type: props.definePropType([String, Object]),
+    default: ""
+  },
+  prefixIcon: {
+    type: props.definePropType([String, Object]),
+    default: ""
+  },
+  label: {
+    type: String
+  },
+  tabindex: {
+    type: [Number, String]
+  },
+  validateEvent: {
+    type: Boolean,
+    default: true
+  },
+  inputStyle: {
+    type: props.definePropType([Object, Array, String]),
+    default: () => props.mutable({})
+  },
+  maxlength: {
+    type: [Number, String]
+  },
+  widget: {
+    type: String
+  }
+});
 
-exports["default"] = input_vue_vue_type_script_lang["default"];
+exports.inputProps = inputProps;
 //# sourceMappingURL=input2.js.map

package/lib/packages/components/input/src/input2.js.map

@@ -1 +1 @@
-{"version":3,"file":"input2.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"input2.js","sources":["../../../../../../../packages/components/input/src/input.ts"],"sourcesContent":["import { useFormItemProps } from '@element-ps/hooks'\nimport { buildProps, definePropType, mutable } from '@element-ps/utils/props'\nimport type { StyleValue } from '@element-ps/utils/types'\nimport type { ExtractPropTypes, Component } from 'vue'\n\ntype AutoSize = { minRows?: number; maxRows?: number } | boolean\n\nexport const inputProps = buildProps({\n  ...useFormItemProps,\n  _modelValue: {\n    type: definePropType<string | number | null | undefined>(undefined),\n    default: '',\n  },\n  type: {\n    type: String,\n    default: 'text',\n  },\n  resize: {\n    type: String,\n    values: ['none', 'both', 'horizontal', 'vertical'],\n  },\n  autosize: {\n    type: definePropType<AutoSize>([Boolean, Object]),\n    default: false,\n  },\n  autocomplete: {\n    type: String,\n    default: 'off',\n  },\n  placeholder: {\n    type: String,\n  },\n  form: {\n    type: String,\n    default: '',\n  },\n  readonly: {\n    type: Boolean,\n    default: false,\n  },\n  clearable: {\n    type: Boolean,\n    default: false,\n  },\n  showPassword: {\n    type: Boolean,\n    default: false,\n  },\n  showWordLimit: {\n    type: Boolean,\n    default: false,\n  },\n  suffixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  prefixIcon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n  label: {\n    type: String,\n  },\n  tabindex: {\n    type: [Number, String],\n  },\n  validateEvent: {\n    type: Boolean,\n    default: true,\n  },\n  inputStyle: {\n    type: definePropType<StyleValue>([Object, Array, String]),\n    default: () => mutable({} as const),\n  },\n  maxlength: {\n    type: [Number, String],\n  },\n  widget: {\n    type: String,\n  },\n} as const)\nexport type InputProps = ExtractPropTypes<typeof inputProps>\n"],"names":["buildProps","useFormItemProps","definePropType","mutable"],"mappings":";;;;;;;;MAOa,aAAaA,iBAAW;AAAA,KAChCC;AAAA,EACH,aAAa;AAAA,IACX,MAAMC,qBAAmD;AAAA,IACzD,SAAS;AAAA;AAAA,EAEX,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,QAAQ;AAAA,IACN,MAAM;AAAA,IACN,QAAQ,CAAC,QAAQ,QAAQ,cAAc;AAAA;AAAA,EAEzC,UAAU;AAAA,IACR,MAAMA,qBAAyB,CAAC,SAAS;AAAA,IACzC,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,aAAa;AAAA,IACX,MAAM;AAAA;AAAA,EAER,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU;AAAA,IACR,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,cAAc;AAAA,IACZ,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAMA,qBAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAMA,qBAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA,EAEX,OAAO;AAAA,IACL,MAAM;AAAA;AAAA,EAER,UAAU;AAAA,IACR,MAAM,CAAC,QAAQ;AAAA;AAAA,EAEjB,eAAe;AAAA,IACb,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,YAAY;AAAA,IACV,MAAMA,qBAA2B,CAAC,QAAQ,OAAO;AAAA,IACjD,SAAS,MAAMC,cAAQ;AAAA;AAAA,EAEzB,WAAW;AAAA,IACT,MAAM,CAAC,QAAQ;AAAA;AAAA,EAEjB,QAAQ;AAAA,IACN,MAAM;AAAA;AAAA;;;;"}

package/lib/packages/components/link/index.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var withInstall = require('../../utils/with-install.js');
-require('./src/link.js');
-var link = require('./src/link2.js');
+require('./src/link2.js');
+var link = require('./src/link.js');
 var link_vue_vue_type_script_lang = require('./src/link.vue_vue&type=script&lang.js');
 
 const PsLink = withInstall.withInstall(link_vue_vue_type_script_lang["default"]);

package/lib/packages/components/link/src/link.js

@@ -2,11 +2,25 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-var link_vue_vue_type_script_lang = require('./link.vue_vue&type=script&lang.js');
-var link_vue_vue_type_template_id_6a422645_lang = require('./link.vue_vue&type=template&id=6a422645&lang.js');
+var props = require('../../../utils/props.js');
 
-link_vue_vue_type_script_lang["default"].render = link_vue_vue_type_template_id_6a422645_lang.render;
-link_vue_vue_type_script_lang["default"].__file = "packages/components/link/src/link.vue";
+const linkProps = props.buildProps({
+  type: {
+    type: String,
+    values: ["primary", "success", "warning", "info", "danger", "default"],
+    default: "default"
+  },
+  underline: {
+    type: Boolean,
+    default: true
+  },
+  disabled: { type: Boolean, default: false },
+  href: { type: String, default: "" },
+  icon: {
+    type: props.definePropType([String, Object]),
+    default: ""
+  }
+});
 
-exports["default"] = link_vue_vue_type_script_lang["default"];
+exports.linkProps = linkProps;
 //# sourceMappingURL=link.js.map

package/lib/packages/components/link/src/link.js.map

@@ -1 +1 @@
-{"version":3,"file":"link.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;"}
+{"version":3,"file":"link.js","sources":["../../../../../../../packages/components/link/src/link.ts"],"sourcesContent":["import { buildProps, definePropType } from '@element-ps/utils/props'\nimport type { Component, ExtractPropTypes } from 'vue'\n\nexport const linkProps = buildProps({\n  type: {\n    type: String,\n    values: ['primary', 'success', 'warning', 'info', 'danger', 'default'],\n    default: 'default',\n  },\n  underline: {\n    type: Boolean,\n    default: true,\n  },\n  disabled: { type: Boolean, default: false },\n  href: { type: String, default: '' },\n  icon: {\n    type: definePropType<string | Component>([String, Object]),\n    default: '',\n  },\n} as const)\nexport type LinkProps = ExtractPropTypes<typeof linkProps>\n"],"names":["buildProps","definePropType"],"mappings":";;;;;;MAGa,YAAYA,iBAAW;AAAA,EAClC,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,QAAQ,CAAC,WAAW,WAAW,WAAW,QAAQ,UAAU;AAAA,IAC5D,SAAS;AAAA;AAAA,EAEX,WAAW;AAAA,IACT,MAAM;AAAA,IACN,SAAS;AAAA;AAAA,EAEX,UAAU,EAAE,MAAM,SAAS,SAAS;AAAA,EACpC,MAAM,EAAE,MAAM,QAAQ,SAAS;AAAA,EAC/B,MAAM;AAAA,IACJ,MAAMC,qBAAmC,CAAC,QAAQ;AAAA,IAClD,SAAS;AAAA;AAAA;;;;"}