fast-element-plus 2.0.16 → 2.0.17
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +19 -0
- package/dist/component.d.ts +6570 -2
- package/dist/component.mjs.map +1 -1
- package/dist/components/avatar/src/avatar.d.ts +19 -7
- package/dist/components/avatar/src/avatar.mjs +5 -0
- package/dist/components/avatar/src/avatar.mjs.map +1 -1
- package/dist/components/button/src/button.d.ts +4 -4
- package/dist/components/button/src/button.mjs +3 -4
- package/dist/components/button/src/button.mjs.map +1 -1
- package/dist/components/carNumber/src/carNumber.mjs +7 -9
- package/dist/components/carNumber/src/carNumber.mjs.map +1 -1
- package/dist/components/contextMenu/src/contextMenu.mjs +8 -7
- package/dist/components/contextMenu/src/contextMenu.mjs.map +1 -1
- package/dist/components/dialog/src/dialog.d.ts +7 -4
- package/dist/components/dialog/src/dialog.mjs +6 -7
- package/dist/components/dialog/src/dialog.mjs.map +1 -1
- package/dist/components/drawer/src/drawer.mjs +14 -14
- package/dist/components/drawer/src/drawer.mjs.map +1 -1
- package/dist/components/form/src/form.d.ts +36 -24
- package/dist/components/form/src/form.mjs +8 -9
- package/dist/components/form/src/form.mjs.map +1 -1
- package/dist/components/form/src/formItem.d.ts +3 -3
- package/dist/components/form/src/formItem.mjs +18 -17
- package/dist/components/form/src/formItem.mjs.map +1 -1
- package/dist/components/form/utils/form.d.ts +2 -2
- package/dist/components/form/utils/form.mjs +2 -2
- package/dist/components/form/utils/form.mjs.map +1 -1
- package/dist/components/icon/src/icon.mjs.map +1 -1
- package/dist/components/iconSelector/src/iconSelector.d.ts +2 -2
- package/dist/components/iconSelector/src/iconSelector.mjs +4 -5
- package/dist/components/iconSelector/src/iconSelector.mjs.map +1 -1
- package/dist/components/image/src/image.d.ts +1 -1
- package/dist/components/image/src/image.mjs +2 -2
- package/dist/components/image/src/image.mjs.map +1 -1
- package/dist/components/inputDialogPage/src/inputDialogPage.mjs +10 -12
- package/dist/components/inputDialogPage/src/inputDialogPage.mjs.map +1 -1
- package/dist/components/layoutGrid/src/layoutGrid.d.ts +23 -11
- package/dist/components/layoutGrid/src/layoutGrid.mjs +42 -43
- package/dist/components/layoutGrid/src/layoutGrid.mjs.map +1 -1
- package/dist/components/layoutGrid/src/layoutGrid.type.d.ts +1 -1
- package/dist/components/layoutGrid/src/layoutGridItem.mjs +13 -14
- package/dist/components/layoutGrid/src/layoutGridItem.mjs.map +1 -1
- package/dist/components/select/src/select.d.ts +27 -12
- package/dist/components/select/src/select.mjs +46 -44
- package/dist/components/select/src/select.mjs.map +1 -1
- package/dist/components/select/src/selectOption.mjs +4 -5
- package/dist/components/select/src/selectOption.mjs.map +1 -1
- package/dist/components/selectPage/src/selectPage.d.ts +24 -9
- package/dist/components/selectPage/src/selectPage.mjs +45 -52
- package/dist/components/selectPage/src/selectPage.mjs.map +1 -1
- package/dist/components/selectV2/src/selectV2.d.ts +49 -29
- package/dist/components/selectV2/src/selectV2.mjs +64 -62
- package/dist/components/selectV2/src/selectV2.mjs.map +1 -1
- package/dist/components/table/src/table.d.ts +63 -29
- package/dist/components/table/src/table.mjs +77 -81
- package/dist/components/table/src/table.mjs.map +1 -1
- package/dist/components/table/src/table.type.d.ts +2 -2
- package/dist/components/table/src/table.type.mjs.map +1 -1
- package/dist/components/table/src/tableColumn.d.ts +7 -7
- package/dist/components/table/src/tableColumn.mjs +17 -30
- package/dist/components/table/src/tableColumn.mjs.map +1 -1
- package/dist/components/table/src/tableColumnSettingDialog.mjs +24 -14
- package/dist/components/table/src/tableColumnSettingDialog.mjs.map +1 -1
- package/dist/components/table/src/tablePagination.mjs +2 -3
- package/dist/components/table/src/tablePagination.mjs.map +1 -1
- package/dist/components/table/src/tableSearchForm.d.ts +4 -4
- package/dist/components/table/src/tableSearchForm.mjs +24 -27
- package/dist/components/table/src/tableSearchForm.mjs.map +1 -1
- package/dist/components/table/src/tableSearchFormItem.d.ts +1 -7
- package/dist/components/table/src/tableSearchFormItem.mjs +3 -6
- package/dist/components/table/src/tableSearchFormItem.mjs.map +1 -1
- package/dist/components/table/src/useTable.d.ts +4 -4
- package/dist/components/table/src/useTable.mjs +13 -14
- package/dist/components/table/src/useTable.mjs.map +1 -1
- package/dist/components/table/utils/table.mjs +5 -7
- package/dist/components/table/utils/table.mjs.map +1 -1
- package/dist/components/tree/src/tree.d.ts +6 -6
- package/dist/components/tree/src/tree.mjs +28 -26
- package/dist/components/tree/src/tree.mjs.map +1 -1
- package/dist/components/treeSelect/src/treeSelect.d.ts +30 -27
- package/dist/components/treeSelect/src/treeSelect.mjs +45 -43
- package/dist/components/treeSelect/src/treeSelect.mjs.map +1 -1
- package/dist/components/upload/src/upload.d.ts +1 -1
- package/dist/components/upload/src/upload.mjs +4 -5
- package/dist/components/upload/src/upload.mjs.map +1 -1
- package/dist/components/upload/src/useUpload.mjs +5 -7
- package/dist/components/upload/src/useUpload.mjs.map +1 -1
- package/dist/components/upload/utils/upload.mjs +1 -1
- package/dist/components/upload/utils/upload.mjs.map +1 -1
- package/dist/components/uploadImage/src/uploadImage.d.ts +1 -1
- package/dist/components/uploadImage/src/uploadImage.mjs +7 -8
- package/dist/components/uploadImage/src/uploadImage.mjs.map +1 -1
- package/dist/components/uploadImages/src/uploadImages.d.ts +1 -1
- package/dist/components/uploadImages/src/uploadImages.mjs +7 -8
- package/dist/components/uploadImages/src/uploadImages.mjs.map +1 -1
- package/dist/directives/click-copy/index.mjs +5 -9
- package/dist/directives/click-copy/index.mjs.map +1 -1
- package/dist/element-plus.mjs +5 -6
- package/dist/element-plus.mjs.map +1 -1
- package/dist/hooks/use-screenFull/index.mjs.map +1 -1
- package/dist/index.css +1 -1
- package/dist/index.css.map +1 -1
- package/dist/index.global.min.js +4 -4
- package/dist/index.global.min.js.map +1 -1
- package/dist/utils/index.d.ts +1 -0
- package/dist/utils/object/index.d.ts +8 -0
- package/dist/utils/object/index.mjs +113 -0
- package/dist/utils/object/index.mjs.map +1 -0
- package/dist/utils/string/index.mjs.map +1 -1
- package/dist/utils/vue/emits.mjs.map +1 -1
- package/dist/utils/vue/install.mjs.map +1 -1
- package/dist/utils/vue/render.mjs.map +1 -1
- package/dist/version.d.ts +1 -1
- package/dist/version.mjs +1 -1
- package/dist/version.mjs.map +1 -1
- package/package.json +4 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"form.mjs","names":[],"sources":["../../../../src/components/form/utils/form.ts"],"sourcesContent":["import { RegExps } from \"../../../constants\";\nimport type { FormInstance, FormItemRule, FormValidationResult } from \"element-plus\";\nimport type { Ref } from \"vue\";\n\ntype ValidationCallback = (error?: Error) => void;\n\n/**\n * 表单工具类\n */\nexport const formUtil = {\n\t/**\n\t * ElForm 表单验证\n\t * @param elFormRef ElForm 组件ref\n\t */\n\tvalidate(elFormRef: Ref<FormInstance | undefined
|
|
1
|
+
{"version":3,"file":"form.mjs","names":[],"sources":["../../../../src/components/form/utils/form.ts"],"sourcesContent":["import { RegExps } from \"../../../constants\";\nimport type { FormInstance, FormItemRule, FormValidationResult } from \"element-plus\";\nimport type { Ref } from \"vue\";\n\ntype ValidationCallback = (error?: Error) => void;\n\n/**\n * 表单工具类\n */\nexport const formUtil = {\n\t/**\n\t * ElForm 表单验证\n\t * @param elFormRef ElForm 组件ref\n\t */\n\tvalidate(elFormRef: Readonly<Ref<FormInstance | null | undefined>>): FormValidationResult {\n\t\treturn new Promise<boolean>((resolve, reject) => {\n\t\t\tconst form = elFormRef.value;\n\t\t\tif (form == null) {\n\t\t\t\treject(new Error(\"ElForm 实例尚未挂载。\"));\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tform.validate((isValid: boolean, invalidFields?) => {\n\t\t\t\tif (isValid) {\n\t\t\t\t\tresolve(isValid);\n\t\t\t\t} else {\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n\t\t\t\t\treject(invalidFields);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t},\n\t/**\n\t * ElForm 表单验证,带滚动\n\t * @param elFormRef ElForm 组件ref\n\t */\n\tvalidateScrollToField(elFormRef: Readonly<Ref<FormInstance | null | undefined>>): FormValidationResult {\n\t\treturn new Promise<boolean>((resolve, reject) => {\n\t\t\tconst form = elFormRef.value;\n\t\t\tif (form == null) {\n\t\t\t\treject(new Error(\"ElForm 实例尚未挂载。\"));\n\t\t\t\treturn;\n\t\t\t}\n\t\t\tform.validate((isValid: boolean, invalidFields?) => {\n\t\t\t\tif (isValid) {\n\t\t\t\t\tresolve(isValid);\n\t\t\t\t} else {\n\t\t\t\t\tform.scrollToField(Object.keys(invalidFields ?? {}));\n\t\t\t\t\t// eslint-disable-next-line @typescript-eslint/prefer-promise-reject-errors\n\t\t\t\t\treject(invalidFields);\n\t\t\t\t}\n\t\t\t});\n\t\t});\n\t},\n\t/**\n\t * 手机号\n\t */\n\tmobile(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (!value) {\n\t\t\tcallback(new Error(\"请输入手机号码\"));\n\t\t} else if (RegExps.Mobile.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入正确的手机号码\"));\n\t\t}\n\t},\n\t/**\n\t * 电话号码\n\t */\n\tphone(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (!value) {\n\t\t\tcallback();\n\t\t} else if (RegExps.Phone.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入正确的电话号码\"));\n\t\t}\n\t},\n\t/**\n\t * 邮箱\n\t */\n\temail(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (!value) {\n\t\t\tcallback();\n\t\t} else if (RegExps.Email.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入正确的邮箱地址\"));\n\t\t}\n\t},\n\t/**\n\t * 身份证\n\t */\n\tidCard(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.IdCard.test(value) || !value) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入正确的身份证号码\"));\n\t\t}\n\t},\n\t/**\n\t * 车牌号\n\t */\n\tcarNumber(_rule: FormItemRule, value: string | null | undefined, callback: ValidationCallback): void {\n\t\tlet success = false;\n\t\tif (value?.length === 7) {\n\t\t\tsuccess = RegExps.CarNumber.test(value);\n\t\t} else if (value?.length === 8) {\n\t\t\tsuccess = RegExps.NewEnergyCarNumber.test(value);\n\t\t}\n\t\tif (success) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入正确的车牌号码\"));\n\t\t}\n\t},\n\t/**\n\t * editor 必填\n\t */\n\teditorRequired(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (value === \"<p><br></p>\") {\n\t\t\tcallback(new Error(\"内容不能为空\"));\n\t\t} else {\n\t\t\tcallback();\n\t\t}\n\t},\n\t/**\n\t * 外部链接\n\t */\n\texternal(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.External.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入正确的外部链接\"));\n\t\t}\n\t},\n\t/**\n\t * 有效的URL\n\t */\n\turl(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.Url.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的 URL。\"));\n\t\t}\n\t},\n\t/**\n\t * 邮政编码\n\t */\n\tpostCode(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.PostCode.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的邮政编码\"));\n\t\t}\n\t},\n\t/**\n\t * 账号(6-20位字母或数字,必须以字母开头,不能全为数字)\n\t */\n\taccount(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.Account.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的账号(6-20位字母或数字,必须以字母开头,不能全为数字)\"));\n\t\t}\n\t},\n\t/**\n\t * 弱密码(只包含字母和数字,长度为6到18位)\n\t */\n\tpassword(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.Password.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的密码(只包含字母和数字,长度为6到18位)\"));\n\t\t}\n\t},\n\t/**\n\t * 强密码(8到20位,包含大小写字母、数字及特殊字符)\n\t */\n\tstrongPassword(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.StrongPassword.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的密码(8到20位,包含大小写字母、数字及特殊字符)\"));\n\t\t}\n\t},\n\t/**\n\t * 中文字符\n\t */\n\tchinese(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.Chinese.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的中文字符\"));\n\t\t}\n\t},\n\t/**\n\t * 英文字符\n\t */\n\tenglish(_rule: FormItemRule, value: string, callback: ValidationCallback): void {\n\t\tif (RegExps.English.test(value)) {\n\t\t\tcallback();\n\t\t} else {\n\t\t\tcallback(new Error(\"请输入有效的英文字符\"));\n\t\t}\n\t},\n\t/**\n\t * 文本框必填\n\t */\n\tinputRequired(message: string, trigger = \"blur\"): FormItemRule {\n\t\treturn {\n\t\t\trequired: true,\n\t\t\tmessage,\n\t\t\ttrigger,\n\t\t};\n\t},\n\t/**\n\t * 选择器必选\n\t */\n\tselectRequired(message: string, trigger = \"change\"): FormItemRule {\n\t\treturn {\n\t\t\trequired: true,\n\t\t\tmessage,\n\t\t\ttrigger,\n\t\t};\n\t},\n};\n"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"icon.mjs","names":[],"sources":["../../../../src/components/icon/src/icon.tsx"],"sourcesContent":["import { computed, defineComponent, h, reactive, resolveComponent } from \"vue\";\nimport { ElIcon } from \"element-plus\";\nimport { RegExps } from \"../../../constants\";\nimport { addCssUnit, useRender } from \"../../../utils\";\nimport type { CSSProperties } from \"vue\";\n\n/** FaIcon 的运行时 Props 定义。 */\nexport const faIconProps = {\n\t/** @description el-icon- 使用 El-icon 的图标;fa-icon 使用 Fast 图标组件库; */\n\tname: {\n\t\ttype: String,\n\t\trequired: true
|
|
1
|
+
{"version":3,"file":"icon.mjs","names":[],"sources":["../../../../src/components/icon/src/icon.tsx"],"sourcesContent":["import { computed, defineComponent, h, reactive, resolveComponent } from \"vue\";\nimport { ElIcon } from \"element-plus\";\nimport { RegExps } from \"../../../constants\";\nimport { addCssUnit, useRender } from \"../../../utils\";\nimport type { CSSProperties, ComponentObjectPropsOptions } from \"vue\";\n\n/** FaIcon 的运行时 Props 定义。 */\nexport const faIconProps = {\n\t/** @description el-icon- 使用 El-icon 的图标;fa-icon 使用 Fast 图标组件库; */\n\tname: {\n\t\ttype: String,\n\t\trequired: true,\n\t},\n\t/** @description 大小 */\n\tsize: {\n\t\ttype: [String, Number],\n\t},\n\t/** @description 颜色*/\n\tcolor: String,\n} satisfies ComponentObjectPropsOptions;\n\nexport default defineComponent({\n\tname: \"FaIcon\",\n\tprops: faIconProps,\n\tsetup(props, { attrs }) {\n\t\tconst state = reactive({\n\t\t\tisUrl: computed(() => RegExps.External.test(props.name)),\n\t\t\tstyle: computed(() => {\n\t\t\t\tconst result: CSSProperties & { \"-webkit-mask\"?: string } = {};\n\t\t\t\tif (props.size) {\n\t\t\t\t\tresult.fontSize = addCssUnit(props.size);\n\t\t\t\t}\n\t\t\t\tif (props.color) {\n\t\t\t\t\tresult.color = props.color;\n\t\t\t\t}\n\t\t\t\tif (state.isUrl) {\n\t\t\t\t\tresult.mask = `url(${props.name}) no-repeat 50% 50%`;\n\t\t\t\t\tresult[\"-webkit-mask\"] = `url(${props.name}) no-repeat 50% 50%`;\n\t\t\t\t}\n\t\t\t\treturn result;\n\t\t\t}),\n\t\t});\n\n\t\tuseRender(() =>\n\t\t\tprops.name.startsWith(\"el-icon-\") ? (\n\t\t\t\t<ElIcon {...attrs} {...props} class={[\"fa-icon\", props.name]}>\n\t\t\t\t\t{h(resolveComponent(props.name))}\n\t\t\t\t</ElIcon>\n\t\t\t) : props.name.startsWith(\"fa-icon\") ? (\n\t\t\t\t<ElIcon {...attrs} {...props} class={[\"fa-icon\", props.name]}>\n\t\t\t\t\t{h(resolveComponent(props.name))}\n\t\t\t\t</ElIcon>\n\t\t\t) : state.isUrl ? (\n\t\t\t\t<div {...attrs} class=\"el-icon fa-icon url-icon\" style={state.style} />\n\t\t\t) : (\n\t\t\t\t<i {...attrs} class={[\"el-icon fa-icon\", props.name]} style={state.style} />\n\t\t\t)\n\t\t);\n\t},\n});\n"],"mappings":";;;;;;;AAMA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAA,QAAA,CAAA;AAAA;AACA,MAAa,cAAc;;CAE1B,MAAM;EACL,MAAM;EACN,UAAU;CACX;;CAEA,MAAM,EACL,MAAM,CAAC,QAAQ,MAAM,EACtB;;CAEA,OAAO;AACR;AAEA,IAAA,eAAe,gBAAgB;CAC9B,MAAM;CACN,OAAO;CACP,MAAM,OAAO,EAAE,SAAS;EACvB,MAAM,QAAQ,SAAS;GACtB,OAAO,eAAe,QAAQ,SAAS,KAAK,MAAM,IAAI,CAAC;GACvD,OAAO,eAAe;IACrB,MAAM,SAAsD,CAAC;IAC7D,IAAI,MAAM,MACT,OAAO,WAAW,WAAW,MAAM,IAAI;IAExC,IAAI,MAAM,OACT,OAAO,QAAQ,MAAM;IAEtB,IAAI,MAAM,OAAO;KAChB,OAAO,OAAO,OAAO,MAAM,KAAI;KAC/B,OAAO,kBAAkB,OAAO,MAAM,KAAI;IAC3C;IACA,OAAO;GACR,CAAC;EACF,CAAC;EAED,gBAAU;GAAA,IAAA,OAAA;GAAA,OACT,MAAM,KAAK,WAAW,UAAU,IAAC,YAAA,QAAA,WACpB,OAAW,OAAK,EAAA,SAAS,CAAC,WAAW,MAAM,IAAI,EAAC,CAAA,GAAA,QAAA,QAC1D,EAAE,iBAAiB,MAAM,IAAI,CAAC,CAAC,IAAA,QAAA,EAAA,eAAA,CAAA,KAAA,EAAA,CAAA,IAE9B,MAAM,KAAK,WAAW,SAAS,IAAC,YAAA,QAAA,WACvB,OAAW,OAAK,EAAA,SAAS,CAAC,WAAW,MAAM,IAAI,EAAC,CAAA,GAAA,QAAA,SAC1D,EAAE,iBAAiB,MAAM,IAAI,CAAC,CAAC,IAAA,SAAA,EAAA,eAAA,CAAA,MAAA,EAAA,CAAA,IAE9B,MAAM,QAAK,YAAA,OAAA,WACL,OAAK;IAAA,SAAA;IAAA,SAA0C,MAAM;GAAK,CAAA,GAAA,IAAA,IAAA,YAAA,KAAA,WAE5D,OAAK;IAAA,SAAS,CAAC,mBAAmB,MAAM,IAAI;IAAC,SAAS,MAAM;GAAK,CAAA,GAAA,IAAA;EACxE,CACF;CACD;AACD,CAAC"}
|
|
@@ -6,7 +6,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
6
6
|
/** @description 自定义图标 */
|
|
7
7
|
customIcons: {
|
|
8
8
|
type: PropType<string[]>;
|
|
9
|
-
default: () =>
|
|
9
|
+
default: () => never[];
|
|
10
10
|
};
|
|
11
11
|
}>, {
|
|
12
12
|
/** 当前图标来源。 */
|
|
@@ -24,7 +24,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
24
24
|
/** @description 自定义图标 */
|
|
25
25
|
customIcons: {
|
|
26
26
|
type: PropType<string[]>;
|
|
27
|
-
default: () =>
|
|
27
|
+
default: () => never[];
|
|
28
28
|
};
|
|
29
29
|
}>> & Readonly<{
|
|
30
30
|
onChange?: ((value: string | null) => any) | undefined;
|
|
@@ -8,7 +8,6 @@ import { computed, createTextVNode, createVNode, defineComponent, isVNode, react
|
|
|
8
8
|
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
|
9
9
|
import { ChromeFilled, RefreshRight } from "@element-plus/icons-vue";
|
|
10
10
|
import { ElIcon, ElInput, ElPopover, ElScrollbar } from "element-plus";
|
|
11
|
-
import { isNull, isString } from "lodash-unified";
|
|
12
11
|
//#region src/components/iconSelector/src/iconSelector.tsx
|
|
13
12
|
function _isSlot(s) {
|
|
14
13
|
return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
|
|
@@ -26,13 +25,13 @@ var iconSelector_default = defineComponent({
|
|
|
26
25
|
},
|
|
27
26
|
emits: {
|
|
28
27
|
/** @description v-model 回调 */
|
|
29
|
-
"update:modelValue": (value) =>
|
|
28
|
+
"update:modelValue": (value) => typeof value === "string" || value === null,
|
|
30
29
|
/** @description 改变 */
|
|
31
|
-
change: (value) =>
|
|
30
|
+
change: (value) => typeof value === "string" || value === null
|
|
32
31
|
},
|
|
33
32
|
setup(props, { emit, expose }) {
|
|
34
33
|
const state = reactive({
|
|
35
|
-
value: withDefineType(
|
|
34
|
+
value: withDefineType(null),
|
|
36
35
|
searchValue: withDefineType(),
|
|
37
36
|
iconType: withDefineType("ele"),
|
|
38
37
|
popoverVisible: false,
|
|
@@ -77,7 +76,7 @@ var iconSelector_default = defineComponent({
|
|
|
77
76
|
};
|
|
78
77
|
watch(() => props.modelValue, (newValue) => {
|
|
79
78
|
state.value = newValue ?? null;
|
|
80
|
-
});
|
|
79
|
+
}, { immediate: true });
|
|
81
80
|
watch(() => props.customIcons, () => {
|
|
82
81
|
if (state.iconType === "local") state.iconNames = [...props.customIcons];
|
|
83
82
|
}, { deep: true });
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"iconSelector.mjs","names":["update:modelValue"],"sources":["../../../../src/components/iconSelector/src/iconSelector.tsx"],"sourcesContent":["import { computed, defineComponent, reactive, watch } from \"vue\";\nimport * as ElementPlusIconsVue from \"@element-plus/icons-vue\";\nimport { ChromeFilled, RefreshRight } from \"@element-plus/icons-vue\";\nimport { ElIcon, ElInput, ElPopover, ElScrollbar } from \"element-plus\";\nimport * as FastElementPlusIconsVue from \"@fast-element-plus/icons-vue\";\nimport { isNull, isString } from \"lodash-unified\";\nimport { definePropType, useExpose, useRender, withDefineType } from \"../../../utils\";\nimport { FaIcon } from \"../../icon\";\nimport type { PropType } from \"vue\";\n\ntype IconType = \"ele\" | \"fastEle\" | \"local\";\n\nexport default defineComponent({\n\tname: \"FaIconSelector\",\n\tprops: {\n\t\t/** @description v-model绑定值 */\n\t\tmodelValue: String as PropType<string | null>,\n\t\t/** @description 自定义图标 */\n\t\tcustomIcons: {\n\t\t\ttype: definePropType<string[]>(Array),\n\t\t\tdefault: (): string[] => [],\n\t\t},\n\t},\n\temits: {\n\t\t/** @description v-model 回调 */\n\t\t\"update:modelValue\": (value: string | null) => isString(value) || isNull(value),\n\t\t/** @description 改变 */\n\t\tchange: (value: string | null) => isString(value) || isNull(value),\n\t},\n\tsetup(props, { emit, expose }) {\n\t\tconst state = reactive({\n\t\t\tvalue: withDefineType<string | null>(props.modelValue ?? null),\n\t\t\tsearchValue: withDefineType<string | null>(),\n\t\t\ticonType: withDefineType<IconType>(\"ele\"),\n\t\t\tpopoverVisible: false,\n\t\t\ticonNames: withDefineType<string[]>(Object.keys(ElementPlusIconsVue).map((name) => `el-icon-${name}`)),\n\t\t\trenderIconNames: computed((): string[] => {\n\t\t\t\tif (!state.searchValue) return state.iconNames;\n\t\t\t\treturn state.iconNames.filter((f) => f.toLowerCase().includes(state.searchValue?.toLowerCase() ?? \"\"));\n\t\t\t}),\n\t\t});\n\t\tconst popoverVisibleModel = computed({\n\t\t\tget: () => state.popoverVisible,\n\t\t\tset: (visible: boolean) => {\n\t\t\t\tstate.popoverVisible = visible;\n\t\t\t\tif (!visible) state.searchValue = null;\n\t\t\t},\n\t\t});\n\n\t\tconst handleTabClick = (iconType: IconType): void => {\n\t\t\tstate.iconType = iconType;\n\t\t\tstate.iconNames = [];\n\t\t\tswitch (iconType) {\n\t\t\t\tcase \"ele\":\n\t\t\t\t\tstate.iconNames = Object.keys(ElementPlusIconsVue).map((name) => `el-icon-${name}`);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"fastEle\":\n\t\t\t\t\tstate.iconNames = Object.keys(FastElementPlusIconsVue).map((name) => `fa-icon-${name}`);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"local\":\n\t\t\t\t\tstate.iconNames = props.customIcons;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t};\n\n\t\tconst handleIconClick = (value: string): void => {\n\t\t\tstate.popoverVisible = false;\n\t\t\tstate.value = value;\n\t\t\tstate.searchValue = \"\";\n\t\t\temit(\"update:modelValue\", value);\n\t\t\temit(\"change\", value);\n\t\t};\n\n\t\tconst handleRefresh = (): void => {\n\t\t\tstate.value = null;\n\t\t\tstate.searchValue = null;\n\t\t\temit(\"update:modelValue\", null);\n\t\t\temit(\"change\", null);\n\t\t};\n\n\t\twatch(\n\t\t\t() => props.modelValue,\n\t\t\t(newValue) => {\n\t\t\t\tstate.value = newValue ?? null;\n\t\t\t}\n\t\t);\n\n\t\twatch(\n\t\t\t() => props.customIcons,\n\t\t\t() => {\n\t\t\t\tif (state.iconType === \"local\") state.iconNames = [...props.customIcons];\n\t\t\t},\n\t\t\t{ deep: true }\n\t\t);\n\n\t\tuseRender(() => (\n\t\t\t<ElPopover\n\t\t\t\tpopperClass=\"fa-icon-selector-popover\"\n\t\t\t\tvModel:visible={popoverVisibleModel.value}\n\t\t\t\twidth=\"auto\"\n\t\t\t\ttrigger=\"click\"\n\t\t\t\tshowArrow={false}\n\t\t\t\tshowAfter={0}\n\t\t\t\thideAfter={0}\n\t\t\t>\n\t\t\t\t{{\n\t\t\t\t\treference: () => (\n\t\t\t\t\t\t<ElInput\n\t\t\t\t\t\t\tclass=\"fa-icon-selector\"\n\t\t\t\t\t\t\tmodelValue={state.popoverVisible ? (state.searchValue ?? \"\") : (state.value ?? \"\")}\n\t\t\t\t\t\t\tplaceholder={state.popoverVisible ? \"搜索图标\" : \"请选择图标\"}\n\t\t\t\t\t\t\treadonly={!state.popoverVisible}\n\t\t\t\t\t\t\tonInput={(value: string) => {\n\t\t\t\t\t\t\t\tif (state.popoverVisible) state.searchValue = value;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{\n\t\t\t\t\t\t\t\tprepend: () => <ElIcon>{state.value ? <FaIcon name={state.value} /> : <ChromeFilled />}</ElIcon>,\n\t\t\t\t\t\t\t\tappend: () => (\n\t\t\t\t\t\t\t\t\t<ElIcon\n\t\t\t\t\t\t\t\t\t\tonClick={(event: MouseEvent) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\thandleRefresh();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<RefreshRight />\n\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</ElInput>\n\t\t\t\t\t),\n\t\t\t\t\tdefault: () => (\n\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box\">\n\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-header\">\n\t\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-header__title\">请选择图标</div>\n\t\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-header__tab\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass={{ \"is-active\": state.iconType === \"ele\" }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Element Plus 图标\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleTabClick(\"ele\")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tele\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass={{ \"is-active\": state.iconType === \"fastEle\" }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Fast Element Plus 图标\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleTabClick(\"fastEle\")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tfastEle\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass={{ \"is-active\": state.iconType === \"local\" }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"本地图标\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleTabClick(\"local\")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tlocal\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-body\">\n\t\t\t\t\t\t\t\t<ElScrollbar>\n\t\t\t\t\t\t\t\t\t{state.renderIconNames.map((m) => (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\t\t\t\tclass=\"fa-icon-selector-popover__box-body__item\"\n\t\t\t\t\t\t\t\t\t\t\ttitle={m}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleIconClick(m)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FaIcon name={m} />\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ElScrollbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t</ElPopover>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** 当前图标来源。 */\n\t\t\ticonType: computed(() => state.iconType),\n\t\t\t/** 当前选中的图标名称。 */\n\t\t\tvalue: computed(() => state.value),\n\t\t});\n\t},\n});\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"iconSelector.mjs","names":["update:modelValue"],"sources":["../../../../src/components/iconSelector/src/iconSelector.tsx"],"sourcesContent":["import { computed, defineComponent, reactive, watch } from \"vue\";\nimport * as ElementPlusIconsVue from \"@element-plus/icons-vue\";\nimport { ChromeFilled, RefreshRight } from \"@element-plus/icons-vue\";\nimport { ElIcon, ElInput, ElPopover, ElScrollbar } from \"element-plus\";\nimport * as FastElementPlusIconsVue from \"@fast-element-plus/icons-vue\";\nimport { definePropType, useExpose, useRender, withDefineType } from \"../../../utils\";\nimport { FaIcon } from \"../../icon\";\nimport type { PropType } from \"vue\";\n\ntype IconType = \"ele\" | \"fastEle\" | \"local\";\n\nexport default defineComponent({\n\tname: \"FaIconSelector\",\n\tprops: {\n\t\t/** @description v-model绑定值 */\n\t\tmodelValue: String as PropType<string | null>,\n\t\t/** @description 自定义图标 */\n\t\tcustomIcons: {\n\t\t\ttype: definePropType<string[]>(Array),\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\temits: {\n\t\t/** @description v-model 回调 */\n\t\t\"update:modelValue\": (value: string | null) => typeof value === \"string\" || value === null,\n\t\t/** @description 改变 */\n\t\tchange: (value: string | null) => typeof value === \"string\" || value === null,\n\t},\n\tsetup(props, { emit, expose }) {\n\t\tconst state = reactive({\n\t\t\tvalue: withDefineType<string | null>(null),\n\t\t\tsearchValue: withDefineType<string | null>(),\n\t\t\ticonType: withDefineType<IconType>(\"ele\"),\n\t\t\tpopoverVisible: false,\n\t\t\ticonNames: withDefineType<string[]>(Object.keys(ElementPlusIconsVue).map((name) => `el-icon-${name}`)),\n\t\t\trenderIconNames: computed((): string[] => {\n\t\t\t\tif (!state.searchValue) return state.iconNames;\n\t\t\t\treturn state.iconNames.filter((f) => f.toLowerCase().includes(state.searchValue?.toLowerCase() ?? \"\"));\n\t\t\t}),\n\t\t});\n\t\tconst popoverVisibleModel = computed({\n\t\t\tget: () => state.popoverVisible,\n\t\t\tset: (visible: boolean) => {\n\t\t\t\tstate.popoverVisible = visible;\n\t\t\t\tif (!visible) state.searchValue = null;\n\t\t\t},\n\t\t});\n\n\t\tconst handleTabClick = (iconType: IconType) => {\n\t\t\tstate.iconType = iconType;\n\t\t\tstate.iconNames = [];\n\t\t\tswitch (iconType) {\n\t\t\t\tcase \"ele\":\n\t\t\t\t\tstate.iconNames = Object.keys(ElementPlusIconsVue).map((name) => `el-icon-${name}`);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"fastEle\":\n\t\t\t\t\tstate.iconNames = Object.keys(FastElementPlusIconsVue).map((name) => `fa-icon-${name}`);\n\t\t\t\t\tbreak;\n\t\t\t\tcase \"local\":\n\t\t\t\t\tstate.iconNames = props.customIcons;\n\t\t\t\t\tbreak;\n\t\t\t}\n\t\t};\n\n\t\tconst handleIconClick = (value: string) => {\n\t\t\tstate.popoverVisible = false;\n\t\t\tstate.value = value;\n\t\t\tstate.searchValue = \"\";\n\t\t\temit(\"update:modelValue\", value);\n\t\t\temit(\"change\", value);\n\t\t};\n\n\t\tconst handleRefresh = () => {\n\t\t\tstate.value = null;\n\t\t\tstate.searchValue = null;\n\t\t\temit(\"update:modelValue\", null);\n\t\t\temit(\"change\", null);\n\t\t};\n\n\t\twatch(\n\t\t\t() => props.modelValue,\n\t\t\t(newValue) => {\n\t\t\t\tstate.value = newValue ?? null;\n\t\t\t},\n\t\t\t{ immediate: true }\n\t\t);\n\n\t\twatch(\n\t\t\t() => props.customIcons,\n\t\t\t() => {\n\t\t\t\tif (state.iconType === \"local\") state.iconNames = [...props.customIcons];\n\t\t\t},\n\t\t\t{ deep: true }\n\t\t);\n\n\t\tuseRender(() => (\n\t\t\t<ElPopover\n\t\t\t\tpopperClass=\"fa-icon-selector-popover\"\n\t\t\t\tvModel:visible={popoverVisibleModel.value}\n\t\t\t\twidth=\"auto\"\n\t\t\t\ttrigger=\"click\"\n\t\t\t\tshowArrow={false}\n\t\t\t\tshowAfter={0}\n\t\t\t\thideAfter={0}\n\t\t\t>\n\t\t\t\t{{\n\t\t\t\t\treference: () => (\n\t\t\t\t\t\t<ElInput\n\t\t\t\t\t\t\tclass=\"fa-icon-selector\"\n\t\t\t\t\t\t\tmodelValue={state.popoverVisible ? (state.searchValue ?? \"\") : (state.value ?? \"\")}\n\t\t\t\t\t\t\tplaceholder={state.popoverVisible ? \"搜索图标\" : \"请选择图标\"}\n\t\t\t\t\t\t\treadonly={!state.popoverVisible}\n\t\t\t\t\t\t\tonInput={(value: string) => {\n\t\t\t\t\t\t\t\tif (state.popoverVisible) state.searchValue = value;\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{{\n\t\t\t\t\t\t\t\tprepend: () => <ElIcon>{state.value ? <FaIcon name={state.value} /> : <ChromeFilled />}</ElIcon>,\n\t\t\t\t\t\t\t\tappend: () => (\n\t\t\t\t\t\t\t\t\t<ElIcon\n\t\t\t\t\t\t\t\t\t\tonClick={(event: MouseEvent) => {\n\t\t\t\t\t\t\t\t\t\t\tevent.stopPropagation();\n\t\t\t\t\t\t\t\t\t\t\thandleRefresh();\n\t\t\t\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t<RefreshRight />\n\t\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t\t),\n\t\t\t\t\t\t\t}}\n\t\t\t\t\t\t</ElInput>\n\t\t\t\t\t),\n\t\t\t\t\tdefault: () => (\n\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box\">\n\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-header\">\n\t\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-header__title\">请选择图标</div>\n\t\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-header__tab\">\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass={{ \"is-active\": state.iconType === \"ele\" }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Element Plus 图标\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleTabClick(\"ele\")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tele\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass={{ \"is-active\": state.iconType === \"fastEle\" }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"Fast Element Plus 图标\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleTabClick(\"fastEle\")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tfastEle\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\tclass={{ \"is-active\": state.iconType === \"local\" }}\n\t\t\t\t\t\t\t\t\t\ttitle=\"本地图标\"\n\t\t\t\t\t\t\t\t\t\tonClick={() => handleTabClick(\"local\")}\n\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\tlocal\n\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div class=\"fa-icon-selector-popover__box-body\">\n\t\t\t\t\t\t\t\t<ElScrollbar>\n\t\t\t\t\t\t\t\t\t{state.renderIconNames.map((m) => (\n\t\t\t\t\t\t\t\t\t\t<button\n\t\t\t\t\t\t\t\t\t\t\ttype=\"button\"\n\t\t\t\t\t\t\t\t\t\t\tkey={m}\n\t\t\t\t\t\t\t\t\t\t\tclass=\"fa-icon-selector-popover__box-body__item\"\n\t\t\t\t\t\t\t\t\t\t\ttitle={m}\n\t\t\t\t\t\t\t\t\t\t\tonClick={() => handleIconClick(m)}\n\t\t\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t\t\t<FaIcon name={m} />\n\t\t\t\t\t\t\t\t\t\t</button>\n\t\t\t\t\t\t\t\t\t))}\n\t\t\t\t\t\t\t\t</ElScrollbar>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t),\n\t\t\t\t}}\n\t\t\t</ElPopover>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** 当前图标来源。 */\n\t\t\ticonType: computed(() => state.iconType),\n\t\t\t/** 当前选中的图标名称。 */\n\t\t\tvalue: computed(() => state.value),\n\t\t});\n\t},\n});\n"],"mappings":"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"}
|
|
@@ -254,12 +254,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
254
254
|
onShow?: (() => any) | undefined;
|
|
255
255
|
}>, {
|
|
256
256
|
small: boolean;
|
|
257
|
+
fit: import("element-plus/es/utils/vue/props/types.mjs").EpPropMergeType<StringConstructor, "" | "cover" | "fill" | "none" | "contain" | "scale-down", unknown>;
|
|
257
258
|
base64: boolean;
|
|
258
259
|
original: boolean;
|
|
259
260
|
normal: boolean;
|
|
260
261
|
thumb: boolean;
|
|
261
262
|
src: string;
|
|
262
|
-
fit: import("element-plus/es/utils/vue/props/types.mjs").EpPropMergeType<StringConstructor, "" | "cover" | "fill" | "none" | "contain" | "scale-down", unknown>;
|
|
263
263
|
closeOnPressEscape: import("element-plus/es/utils/vue/props/types.mjs").EpPropMergeType<BooleanConstructor, unknown, unknown>;
|
|
264
264
|
hideOnClickModal: boolean;
|
|
265
265
|
previewTeleported: boolean;
|
|
@@ -3,7 +3,7 @@ import { useExpose } from "../../../utils/vue/expose.mjs";
|
|
|
3
3
|
import { useProps } from "../../../utils/vue/props.mjs";
|
|
4
4
|
import { useRender } from "../../../utils/vue/render.mjs";
|
|
5
5
|
import { makeSlots } from "../../../utils/vue/slots.mjs";
|
|
6
|
-
import { computed, createVNode, defineComponent, mergeProps, reactive,
|
|
6
|
+
import { computed, createVNode, defineComponent, mergeProps, reactive, shallowRef, watch } from "vue";
|
|
7
7
|
import { Picture } from "@element-plus/icons-vue";
|
|
8
8
|
import { ElIcon, ElImage, imageEmits, imageProps } from "element-plus";
|
|
9
9
|
//#region src/components/image/src/image.tsx
|
|
@@ -49,6 +49,7 @@ var image_default = defineComponent({
|
|
|
49
49
|
emits: faImageEmits,
|
|
50
50
|
slots: makeSlots(),
|
|
51
51
|
setup(props, { slots, emit, expose }) {
|
|
52
|
+
const imageRef = shallowRef(null);
|
|
52
53
|
const state = reactive({
|
|
53
54
|
/** 图片加载错误 */
|
|
54
55
|
loadError: false,
|
|
@@ -63,7 +64,6 @@ var image_default = defineComponent({
|
|
|
63
64
|
}),
|
|
64
65
|
previewList: computed(() => props.preview && props.src ? [props.base64 ? `data:image/png;base64,${props.src}` : props.src] : [])
|
|
65
66
|
});
|
|
66
|
-
const imageRef = ref();
|
|
67
67
|
watch(() => props.src, () => {
|
|
68
68
|
state.loadError = false;
|
|
69
69
|
});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"image.mjs","names":["viewer-error"],"sources":["../../../../src/components/image/src/image.tsx"],"sourcesContent":["import { computed, defineComponent, reactive,
|
|
1
|
+
{"version":3,"file":"image.mjs","names":["viewer-error"],"sources":["../../../../src/components/image/src/image.tsx"],"sourcesContent":["import { computed, defineComponent, reactive, shallowRef, watch } from \"vue\";\nimport { Picture as ElIconPicture } from \"@element-plus/icons-vue\";\nimport { ElIcon, ElImage, imageEmits, imageProps } from \"element-plus\";\nimport { makeSlots, useEmits, useExpose, useProps, useRender } from \"../../../utils\";\nimport type { ImageInstance, ImageViewerAction } from \"element-plus\";\n\n/** FaImage 的运行时 Props 定义。 */\nexport const faImageProps = {\n\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- Element Plus 2.x 尚未提供可替代的公开运行时 props 定义。\n\t...imageProps,\n\t/** @description when enabling preview, use this flag to control whether clicking on backdrop can exit preview mode. */\n\thideOnClickModal: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description whether to append image-viewer to body. A nested parent element attribute transform should have this attribute set to `true`. */\n\tpreviewTeleported: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description whether to use lazy load. */\n\tlazy: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n\t/** @description Base64图片 */\n\tbase64: Boolean,\n\t/** @description 原图 */\n\toriginal: Boolean,\n\t/** @description 标准 */\n\tnormal: Boolean,\n\t/** @description 小图 */\n\tsmall: Boolean,\n\t/** @description 缩略图 */\n\tthumb: Boolean,\n\t/** @description 是否可以预览图片 */\n\tpreview: {\n\t\ttype: Boolean,\n\t\tdefault: true,\n\t},\n};\n\n/** FaImage 的运行时事件定义。 */\nexport const faImageEmits = {\n\t...imageEmits,\n};\n\n/** FaImage 的插槽参数。 */\nexport interface FaImageSlots extends Record<string, unknown> {\n\t/** @description 当图像尚未加载时,自定义的占位符内容 */\n\tplaceholder: never;\n\t/** @description 自定义图像加载失败的内容 */\n\terror: never;\n\t/** @description 当图像预览时自定义内容 */\n\tviewer: { src?: string };\n\t/** @description 图片预览进度内容 */\n\tprogress: { activeIndex: number; total: number };\n\t/** @description 图片预览工具栏内容 */\n\ttoolbar: {\n\t\tactions: (action: ImageViewerAction, options?: Record<string, never>) => void;\n\t\tprev: () => void;\n\t\tnext: () => void;\n\t\treset: () => void;\n\t\tactiveIndex: number;\n\t\tsetActiveItem: (index: number) => void;\n\t};\n\t/** @description 图片预览加载失败内容 */\n\t\"viewer-error\": { activeIndex: number; src: string };\n}\n\nexport default defineComponent({\n\tname: \"FaImage\",\n\tprops: faImageProps,\n\temits: faImageEmits,\n\tslots: makeSlots<FaImageSlots>(),\n\tsetup(props, { slots, emit, expose }) {\n\t\tconst imageRef = shallowRef<ImageInstance | null>(null);\n\n\t\tconst state = reactive({\n\t\t\t/** 图片加载错误 */\n\t\t\tloadError: false,\n\t\t\tsrc: computed(() => {\n\t\t\t\tif (!props.src) return undefined;\n\t\t\t\tif (props.base64) {\n\t\t\t\t\treturn `data:image/png;base64,${props.src}`;\n\t\t\t\t} else if (props.original || state.loadError) {\n\t\t\t\t\treturn props.src;\n\t\t\t\t} else if (props.normal) {\n\t\t\t\t\treturn `${props.src}@!normal`;\n\t\t\t\t} else if (props.small) {\n\t\t\t\t\treturn `${props.src}@!small`;\n\t\t\t\t} else if (props.thumb) {\n\t\t\t\t\treturn `${props.src}@!thumb`;\n\t\t\t\t} else {\n\t\t\t\t\t// 默认使用缩略图\n\t\t\t\t\treturn `${props.src}@!thumb`;\n\t\t\t\t}\n\t\t\t}),\n\t\t\tpreviewList: computed(() => (props.preview && props.src ? [props.base64 ? `data:image/png;base64,${props.src}` : props.src] : [])),\n\t\t});\n\t\twatch(\n\t\t\t() => props.src,\n\t\t\t() => {\n\t\t\t\tstate.loadError = false;\n\t\t\t}\n\t\t);\n\n\t\t// eslint-disable-next-line @typescript-eslint/no-deprecated -- 透传范围必须与继承的 Element Plus 2.x 运行时 props 保持一致。\n\t\tconst bindProps = useProps(props, imageProps, [\"src\", \"previewSrcList\"]);\n\t\tconst bindEmits = useEmits(imageEmits, emit, [\"error\"]);\n\n\t\tuseRender(() => (\n\t\t\t<ElImage\n\t\t\t\t{...bindProps.value}\n\t\t\t\t{...bindEmits.value}\n\t\t\t\tclass=\"fa-image\"\n\t\t\t\tref={imageRef}\n\t\t\t\tsrc={state.src}\n\t\t\t\tpreviewSrcList={state.previewList}\n\t\t\t\tonError={(event) => {\n\t\t\t\t\tstate.loadError ||= true;\n\t\t\t\t\temit(\"error\", event);\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{{\n\t\t\t\t\terror: () =>\n\t\t\t\t\t\tslots.error ? (\n\t\t\t\t\t\t\tslots.error()\n\t\t\t\t\t\t) : (\n\t\t\t\t\t\t\t<div class=\"fa-image__error-image\">\n\t\t\t\t\t\t\t\t<ElIcon class=\"icon\">\n\t\t\t\t\t\t\t\t\t<ElIconPicture />\n\t\t\t\t\t\t\t\t</ElIcon>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t),\n\t\t\t\t\t...(slots.placeholder && { placeholder: () => slots.placeholder?.() ?? [] }),\n\t\t\t\t\t...(slots.viewer && { viewer: () => slots.viewer?.({ src: state.src }) ?? [] }),\n\t\t\t\t\t...(slots.progress && {\n\t\t\t\t\t\tprogress: (scope: { activeIndex: number; total: number }) => slots.progress?.(scope) ?? [],\n\t\t\t\t\t}),\n\t\t\t\t\t...(slots.toolbar && {\n\t\t\t\t\t\ttoolbar: (scope: FaImageSlots[\"toolbar\"]) => slots.toolbar?.(scope) ?? [],\n\t\t\t\t\t}),\n\t\t\t\t\t...(slots[\"viewer-error\"] && {\n\t\t\t\t\t\t\"viewer-error\": (scope: { activeIndex: number; src: string }) => slots[\"viewer-error\"]?.(scope) ?? [],\n\t\t\t\t\t}),\n\t\t\t\t}}\n\t\t\t</ElImage>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** @description 手动打开图片预览。 */\n\t\t\tshowPreview: computed(() => imageRef.value?.showPreview),\n\t\t});\n\t},\n});\n"],"mappings":";;;;;;;;;;AAOA,MAAa,eAAe;CAE3B,GAAG;;CAEH,kBAAkB;EACjB,MAAM;EACN,SAAS;CACV;;CAEA,mBAAmB;EAClB,MAAM;EACN,SAAS;CACV;;CAEA,MAAM;EACL,MAAM;EACN,SAAS;CACV;;CAEA,QAAQ;;CAER,UAAU;;CAEV,QAAQ;;CAER,OAAO;;CAEP,OAAO;;CAEP,SAAS;EACR,MAAM;EACN,SAAS;CACV;AACD;;AAGA,MAAa,eAAe,EAC3B,GAAG,WACJ;AAyBA,IAAA,gBAAe,gBAAgB;CAC9B,MAAM;CACN,OAAO;CACP,OAAO;CACP,OAAO,UAAwB;CAC/B,MAAM,OAAO,EAAE,OAAO,MAAM,UAAU;EACrC,MAAM,WAAW,WAAiC,IAAI;EAEtD,MAAM,QAAQ,SAAS;;GAEtB,WAAW;GACX,KAAK,eAAe;IACnB,IAAI,CAAC,MAAM,KAAK,OAAO,KAAA;IACvB,IAAI,MAAM,QACT,OAAO,yBAAyB,MAAM;SAChC,IAAI,MAAM,YAAY,MAAM,WAClC,OAAO,MAAM;SACP,IAAI,MAAM,QAChB,OAAO,GAAG,MAAM,IAAG;SACb,IAAI,MAAM,OAChB,OAAO,GAAG,MAAM,IAAG;SACb,IAAI,MAAM,OAChB,OAAO,GAAG,MAAM,IAAG;SAGnB,OAAO,GAAG,MAAM,IAAG;GAErB,CAAC;GACD,aAAa,eAAgB,MAAM,WAAW,MAAM,MAAM,CAAC,MAAM,SAAS,yBAAyB,MAAM,QAAQ,MAAM,GAAG,IAAI,CAAA,CAAG;EAClI,CAAC;EACD,YACO,MAAM,WACN;GACL,MAAM,YAAY;EACnB,CACD;EAGA,MAAM,YAAY,SAAS,OAAO,YAAY,CAAC,OAAO,gBAAgB,CAAC;EACvE,MAAM,YAAY,SAAS,YAAY,MAAM,CAAC,OAAO,CAAC;EAEtD,gBAAU,YAAA,SAAA,WAEJ,UAAU,OACV,UAAU,OAAK;GAAA,SAAA;GAAA,OAEd;GAAQ,OACR,MAAM;GAAG,kBACE,MAAM;GAAW,YACvB,UAAU;IACnB,MAAM,cAAc;IACpB,KAAK,SAAS,KAAK;GACpB;EAAC,CAAA,GAAA;GAGA,aACC,MAAM,QACL,MAAM,MAAM,IAAC,YAAA,OAAA,EAAA,SAAA,wBAAA,GAAA,CAAA,YAAA,QAAA,EAAA,SAAA,OAAA,GAAA,EAAA,eAAA,CAAA,YAAA,SAAA,MAAA,IAAA,CAAA,EAAA,CAAA,CAAA,CAAA;GAQf,GAAI,MAAM,eAAe,EAAE,mBAAmB,MAAM,cAAc,KAAK,CAAA,EAAG;GAC1E,GAAI,MAAM,UAAU,EAAE,cAAc,MAAM,SAAS,EAAE,KAAK,MAAM,IAAI,CAAC,KAAK,CAAA,EAAG;GAC7E,GAAI,MAAM,YAAY,EACrB,WAAW,UAAkD,MAAM,WAAW,KAAK,KAAK,CAAA,EACzF;GACA,GAAI,MAAM,WAAW,EACpB,UAAU,UAAmC,MAAM,UAAU,KAAK,KAAK,CAAA,EACxE;GACA,GAAI,MAAM,mBAAmB,EAC5B,iBAAiB,UAAgD,MAAM,eAAe,GAAG,KAAK,KAAK,CAAA,EACpG;EAAE,CAAA,CAGJ;EAED,OAAO,UAAU,QAAQ;;AAExB,aAAa,eAAe,SAAS,OAAO,WAAW,EACxD,CAAC;CACF;AACD,CAAC"}
|
|
@@ -5,11 +5,9 @@ import { makeSlots } from "../../../utils/vue/slots.mjs";
|
|
|
5
5
|
import { withDefineType } from "../../../utils/vue/with.mjs";
|
|
6
6
|
import { FaDialog } from "../../dialog/index.mjs";
|
|
7
7
|
import { FaTable } from "../../table/index.mjs";
|
|
8
|
-
import { computed, createVNode, defineComponent, reactive,
|
|
8
|
+
import { computed, createVNode, defineComponent, reactive, shallowRef, useModel } from "vue";
|
|
9
9
|
import { Delete, Search } from "@element-plus/icons-vue";
|
|
10
10
|
import { ElButton, ElButtonGroup, ElInput } from "element-plus";
|
|
11
|
-
import { isFunction, isNull, isNumber, isString } from "lodash-unified";
|
|
12
|
-
import { useVModel } from "@vueuse/core";
|
|
13
11
|
//#region src/components/inputDialogPage/src/inputDialogPage.tsx
|
|
14
12
|
/** FaInputDialogPage 的运行时 Props 定义。 */
|
|
15
13
|
const faInputDialogPageProps = {
|
|
@@ -48,9 +46,9 @@ const faInputDialogPageProps = {
|
|
|
48
46
|
/** FaInputDialogPage 的运行时 Emits 定义。 */
|
|
49
47
|
const faInputDialogPageEmits = {
|
|
50
48
|
/** @description v-model 回调 */
|
|
51
|
-
"update:modelValue": (value) =>
|
|
49
|
+
"update:modelValue": (value) => typeof value === "string" || typeof value === "number" || value === null,
|
|
52
50
|
/** @description v-model:label 回调 */
|
|
53
|
-
"update:label": (value) =>
|
|
51
|
+
"update:label": (value) => typeof value === "string" || value === null,
|
|
54
52
|
/** @description 选中数据改变 */
|
|
55
53
|
change: (_data, _value) => true
|
|
56
54
|
};
|
|
@@ -60,11 +58,11 @@ var inputDialogPage_default = defineComponent({
|
|
|
60
58
|
emits: faInputDialogPageEmits,
|
|
61
59
|
slots: makeSlots(),
|
|
62
60
|
setup(props, { slots, emit, expose }) {
|
|
63
|
-
const modelValue =
|
|
64
|
-
const selectedLabel =
|
|
61
|
+
const modelValue = useModel(props, "modelValue");
|
|
62
|
+
const selectedLabel = useModel(props, "label");
|
|
63
|
+
const faDialogRef = shallowRef(null);
|
|
64
|
+
const faTableRef = shallowRef(null);
|
|
65
65
|
const state = reactive({ selectionRow: withDefineType() });
|
|
66
|
-
const faDialogRef = ref();
|
|
67
|
-
const faTableRef = ref();
|
|
68
66
|
const handleDeleteClick = () => {
|
|
69
67
|
modelValue.value = null;
|
|
70
68
|
selectedLabel.value = null;
|
|
@@ -74,9 +72,9 @@ var inputDialogPage_default = defineComponent({
|
|
|
74
72
|
const handleSearchClick = async () => {
|
|
75
73
|
await faDialogRef.value?.open(() => {
|
|
76
74
|
const table = faTableRef.value;
|
|
77
|
-
if (table ===
|
|
75
|
+
if (table === null) return;
|
|
78
76
|
if (state.selectionRow) {
|
|
79
|
-
const rawRowKey =
|
|
77
|
+
const rawRowKey = typeof props.rowKey === "function" ? props.rowKey(state.selectionRow) : state.selectionRow[props.rowKey];
|
|
80
78
|
if (!((typeof rawRowKey === "string" || typeof rawRowKey === "number") && table.selectedListIds.includes(rawRowKey))) table.toggleRowSelection?.(state.selectionRow);
|
|
81
79
|
}
|
|
82
80
|
});
|
|
@@ -87,7 +85,7 @@ var inputDialogPage_default = defineComponent({
|
|
|
87
85
|
const selectedData = table?.selectedList[0];
|
|
88
86
|
if (table?.selected && selectedData) {
|
|
89
87
|
state.selectionRow = selectedData;
|
|
90
|
-
const selectedValue =
|
|
88
|
+
const selectedValue = typeof props.rowKey === "function" ? props.rowKey(selectedData) : selectedData[props.rowKey];
|
|
91
89
|
modelValue.value = typeof selectedValue === "string" || typeof selectedValue === "number" ? selectedValue : null;
|
|
92
90
|
const label = selectedData[props.labelKey];
|
|
93
91
|
selectedLabel.value = typeof label === "string" ? label : null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"inputDialogPage.mjs","names":["update:modelValue","update:label"],"sources":["../../../../src/components/inputDialogPage/src/inputDialogPage.tsx"],"sourcesContent":["import {
|
|
1
|
+
{"version":3,"file":"inputDialogPage.mjs","names":["update:modelValue","update:label"],"sources":["../../../../src/components/inputDialogPage/src/inputDialogPage.tsx"],"sourcesContent":["import { computed, defineComponent, reactive, shallowRef, useModel } from \"vue\";\nimport { Delete, Search } from \"@element-plus/icons-vue\";\nimport { ElButton, ElButtonGroup, ElInput } from \"element-plus\";\nimport { definePropType, makeSlots, useExpose, useRender, withDefineType } from \"../../../utils\";\nimport FaDialog from \"../../dialog\";\nimport { FaTable } from \"../../table\";\nimport type { TableProps } from \"element-plus\";\nimport type { PropType } from \"vue\";\nimport type { FaDialogInstance } from \"../../dialog\";\nimport type { DefaultRow, FaTableInstance, PagedInput, PagedResult } from \"../../table\";\n\n/** FaInputDialogPage 的运行时 Props 定义。 */\nexport const faInputDialogPageProps = {\n\t/** @description key of row data, used for optimizing rendering. Required if `reserve-selection` is on or display tree data. When its type is String, multi-level access is supported, e.g. `user.info.id`, but `user.info[0].id` is not supported, in which case `Function` should be used */\n\trowKey: {\n\t\ttype: [String, Function] as PropType<NonNullable<TableProps<DefaultRow>[\"rowKey\"]>>,\n\t\tdefault: \"id\",\n\t},\n\t/** @description v-model绑定值 */\n\tmodelValue: [String, Number] as PropType<string | number | null>,\n\t/** @description v-model:label绑定值 */\n\tlabel: String as PropType<string | null>,\n\t/** @description 输入框占位文本 */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: \"请选择\",\n\t},\n\t/** @description 禁用 */\n\tdisabled: Boolean,\n\t/** @description 标题 */\n\ttitle: String,\n\t/** @description 请求api */\n\trequestApi: {\n\t\ttype: definePropType<(params?: PagedInput) => Promise<PagedResult | DefaultRow[]>>(Function),\n\t},\n\t/** 初始化参数 */\n\tinitParam: definePropType<string | number | PagedInput>([String, Number, Object]),\n\t/** @description 显示文本 Key */\n\tlabelKey: {\n\t\ttype: String,\n\t\tdefault: \"name\",\n\t},\n};\n\n/** FaInputDialogPage 的运行时 Emits 定义。 */\nexport const faInputDialogPageEmits = {\n\t/** @description v-model 回调 */\n\t\"update:modelValue\": (value: string | number | null) => typeof value === \"string\" || typeof value === \"number\" || value === null,\n\t/** @description v-model:label 回调 */\n\t\"update:label\": (value: string | null) => typeof value === \"string\" || value === null,\n\t/** @description 选中数据改变 */\n\tchange: (_data: DefaultRow | null, _value?: string | number | null) => true,\n};\n\n/** FaInputDialogPage 的插槽参数。 */\nexport interface FaInputDialogPageSlots extends Record<string, unknown> {\n\t/** @description 默认内容插槽 */\n\tdefault: never;\n}\n\nexport default defineComponent({\n\tname: \"FaInputDialogPage\",\n\tprops: faInputDialogPageProps,\n\temits: faInputDialogPageEmits,\n\tslots: makeSlots<FaInputDialogPageSlots>(),\n\tsetup(props, { slots, emit, expose }) {\n\t\tconst modelValue = useModel(props, \"modelValue\");\n\t\tconst selectedLabel = useModel(props, \"label\");\n\n\t\tconst faDialogRef = shallowRef<FaDialogInstance | null>(null);\n\t\tconst faTableRef = shallowRef<FaTableInstance | null>(null);\n\n\t\tconst state = reactive({\n\t\t\tselectionRow: withDefineType<DefaultRow | undefined>(),\n\t\t});\n\n\t\tconst handleDeleteClick = () => {\n\t\t\tmodelValue.value = null;\n\t\t\tselectedLabel.value = null;\n\t\t\tstate.selectionRow = undefined;\n\t\t\temit(\"change\", null, null);\n\t\t};\n\n\t\tconst handleSearchClick = async () => {\n\t\t\tawait faDialogRef.value?.open(() => {\n\t\t\t\tconst table = faTableRef.value;\n\t\t\t\tif (table === null) return;\n\t\t\t\tif (state.selectionRow) {\n\t\t\t\t\t// 判断当前行是否选中\n\t\t\t\t\tconst rawRowKey: unknown =\n\t\t\t\t\t\ttypeof props.rowKey === \"function\" ? props.rowKey(state.selectionRow) : state.selectionRow[props.rowKey];\n\t\t\t\t\tconst rowSelected = (typeof rawRowKey === \"string\" || typeof rawRowKey === \"number\") && table.selectedListIds.includes(rawRowKey);\n\t\t\t\t\tif (!rowSelected) {\n\t\t\t\t\t\ttable.toggleRowSelection?.(state.selectionRow);\n\t\t\t\t\t}\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst handleConfirmClick = () => {\n\t\t\tfaDialogRef.value?.close(() => {\n\t\t\t\tconst table = faTableRef.value;\n\t\t\t\tconst selectedData = table?.selectedList[0];\n\t\t\t\tif (table?.selected && selectedData) {\n\t\t\t\t\tstate.selectionRow = selectedData;\n\t\t\t\t\tconst selectedValue: unknown = typeof props.rowKey === \"function\" ? props.rowKey(selectedData) : selectedData[props.rowKey];\n\t\t\t\t\tmodelValue.value = typeof selectedValue === \"string\" || typeof selectedValue === \"number\" ? selectedValue : null;\n\t\t\t\t\tconst label: unknown = selectedData[props.labelKey];\n\t\t\t\t\tselectedLabel.value = typeof label === \"string\" ? label : null;\n\t\t\t\t\temit(\"change\", selectedData, modelValue.value);\n\t\t\t\t} else {\n\t\t\t\t\tmodelValue.value = null;\n\t\t\t\t\tselectedLabel.value = null;\n\t\t\t\t\tstate.selectionRow = undefined;\n\t\t\t\t\temit(\"change\", null, null);\n\t\t\t\t}\n\t\t\t});\n\t\t};\n\n\t\tconst handleTableRowDblclick = (row: DefaultRow) => {\n\t\t\tfaTableRef.value?.clearSelection?.();\n\t\t\tfaTableRef.value?.toggleRowSelection?.(row);\n\t\t\tstate.selectionRow = row;\n\t\t\thandleConfirmClick();\n\t\t};\n\n\t\tuseRender(() => (\n\t\t\t<div class=\"fa-input-dialog-page\">\n\t\t\t\t<ElInput vModel={selectedLabel.value} placeholder={props.placeholder} disabled={props.disabled} readonly>\n\t\t\t\t\t{{\n\t\t\t\t\t\tappend: () => (\n\t\t\t\t\t\t\t<ElButtonGroup>\n\t\t\t\t\t\t\t\t<ElButton disabled={props.disabled} icon={Delete} onClick={handleDeleteClick} />\n\t\t\t\t\t\t\t\t<ElButton disabled={props.disabled} icon={Search} onClick={handleSearchClick} />\n\t\t\t\t\t\t\t</ElButtonGroup>\n\t\t\t\t\t\t),\n\t\t\t\t\t}}\n\t\t\t\t</ElInput>\n\t\t\t\t<FaDialog\n\t\t\t\t\tref={faDialogRef}\n\t\t\t\t\tstyle=\"--height: 70%;\"\n\t\t\t\t\twidth=\"50%\"\n\t\t\t\t\ttitle={props.title}\n\t\t\t\t\tfullHeight\n\t\t\t\t\tdisabledConfirmButton={!faTableRef.value?.selected}\n\t\t\t\t\tonConfirmClick={handleConfirmClick}\n\t\t\t\t>\n\t\t\t\t\t<FaTable\n\t\t\t\t\t\tref={faTableRef}\n\t\t\t\t\t\trowKey={props.rowKey}\n\t\t\t\t\t\trequestApi={props.requestApi}\n\t\t\t\t\t\tinitParam={props.initParam}\n\t\t\t\t\t\tsingle\n\t\t\t\t\t\trowClickSelection\n\t\t\t\t\t\thideSearchTime\n\t\t\t\t\t\tonRowDblclick={handleTableRowDblclick}\n\t\t\t\t\t>\n\t\t\t\t\t\t{{\n\t\t\t\t\t\t\tdefault: () => slots.default?.(),\n\t\t\t\t\t\t}}\n\t\t\t\t\t</FaTable>\n\t\t\t\t</FaDialog>\n\t\t\t</div>\n\t\t));\n\n\t\treturn useExpose(expose, {\n\t\t\t/** @description 选择行数据 */\n\t\t\tselectionRow: computed(() => state.selectionRow),\n\t\t\t/** @description 打开选择器弹窗 */\n\t\t\topen: handleSearchClick,\n\t\t\t/** @description 清除选择 */\n\t\t\tclear: handleDeleteClick,\n\t\t});\n\t},\n});\n"],"mappings":"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"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import type {
|
|
1
|
+
import type { FaLayoutGridBreakpoint } from "./layoutGrid.type";
|
|
2
2
|
/** FaLayoutGrid 的插槽参数。 */
|
|
3
3
|
export interface FaLayoutGridSlots extends Record<string, unknown> {
|
|
4
4
|
/** @description 默认内容插槽 */
|
|
@@ -7,8 +7,14 @@ export interface FaLayoutGridSlots extends Record<string, unknown> {
|
|
|
7
7
|
declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
8
8
|
/** @description Grid布局列配置 */
|
|
9
9
|
cols: {
|
|
10
|
-
type: import("vue").PropType<string | number | Partial<Record<
|
|
11
|
-
default: () =>
|
|
10
|
+
type: import("vue").PropType<string | number | Partial<Record<FaLayoutGridBreakpoint, number>>>;
|
|
11
|
+
default: () => {
|
|
12
|
+
xs: number;
|
|
13
|
+
sm: number;
|
|
14
|
+
md: number;
|
|
15
|
+
lg: number;
|
|
16
|
+
xl: number;
|
|
17
|
+
};
|
|
12
18
|
};
|
|
13
19
|
/** @description 折叠 */
|
|
14
20
|
collapsed: BooleanConstructor;
|
|
@@ -24,17 +30,23 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
24
30
|
};
|
|
25
31
|
}>, {
|
|
26
32
|
/** @description 响应式断点 */
|
|
27
|
-
|
|
33
|
+
breakpoint: import("vue").Ref<FaLayoutGridBreakpoint, FaLayoutGridBreakpoint>;
|
|
28
34
|
}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
29
35
|
/** @description 断点变化事件 */
|
|
30
|
-
|
|
31
|
-
|
|
36
|
+
breakpointChange: ({ breakpoint: _breakpoint }: {
|
|
37
|
+
breakpoint: FaLayoutGridBreakpoint;
|
|
32
38
|
}) => true;
|
|
33
39
|
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
34
40
|
/** @description Grid布局列配置 */
|
|
35
41
|
cols: {
|
|
36
|
-
type: import("vue").PropType<string | number | Partial<Record<
|
|
37
|
-
default: () =>
|
|
42
|
+
type: import("vue").PropType<string | number | Partial<Record<FaLayoutGridBreakpoint, number>>>;
|
|
43
|
+
default: () => {
|
|
44
|
+
xs: number;
|
|
45
|
+
sm: number;
|
|
46
|
+
md: number;
|
|
47
|
+
lg: number;
|
|
48
|
+
xl: number;
|
|
49
|
+
};
|
|
38
50
|
};
|
|
39
51
|
/** @description 折叠 */
|
|
40
52
|
collapsed: BooleanConstructor;
|
|
@@ -49,12 +61,12 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
49
61
|
default: number;
|
|
50
62
|
};
|
|
51
63
|
}>> & Readonly<{
|
|
52
|
-
|
|
53
|
-
|
|
64
|
+
onBreakpointChange?: ((args_0: {
|
|
65
|
+
breakpoint: FaLayoutGridBreakpoint;
|
|
54
66
|
}) => any) | undefined;
|
|
55
67
|
}>, {
|
|
56
68
|
collapsed: boolean;
|
|
57
|
-
cols: string | number | Partial<Record<
|
|
69
|
+
cols: string | number | Partial<Record<FaLayoutGridBreakpoint, number>>;
|
|
58
70
|
collapsedRows: string | number;
|
|
59
71
|
gap: number | [number, number];
|
|
60
72
|
}, import("../../../utils").TypedSlotsDeclaration<FaLayoutGridSlots>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -2,8 +2,7 @@ import { useExpose } from "../../../utils/vue/expose.mjs";
|
|
|
2
2
|
import { definePropType } from "../../../utils/vue/props.mjs";
|
|
3
3
|
import { useRender } from "../../../utils/vue/render.mjs";
|
|
4
4
|
import { makeSlots } from "../../../utils/vue/slots.mjs";
|
|
5
|
-
import { computed, createVNode, defineComponent, nextTick, onActivated, onDeactivated, onMounted, onUnmounted, provide, ref, watch } from "vue";
|
|
6
|
-
import { isArray, isNumber, isObject } from "lodash-unified";
|
|
5
|
+
import { computed, createVNode, defineComponent, nextTick, onActivated, onDeactivated, onMounted, onUnmounted, provide, ref, shallowRef, watch } from "vue";
|
|
7
6
|
//#region src/components/layoutGrid/src/layoutGrid.tsx
|
|
8
7
|
var layoutGrid_default = defineComponent({
|
|
9
8
|
name: "FaLayoutGrid",
|
|
@@ -38,21 +37,34 @@ var layoutGrid_default = defineComponent({
|
|
|
38
37
|
},
|
|
39
38
|
emits: {
|
|
40
39
|
/** @description 断点变化事件 */
|
|
41
|
-
|
|
40
|
+
breakpointChange: ({ breakpoint: _breakpoint }) => true },
|
|
42
41
|
slots: makeSlots(),
|
|
43
42
|
setup(props, { slots, emit, expose }) {
|
|
44
|
-
const
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
43
|
+
const containerRef = shallowRef(null);
|
|
44
|
+
const horizontalGap = computed(() => Array.isArray(props.gap) ? props.gap[0] : props.gap);
|
|
45
|
+
provide("gap", horizontalGap);
|
|
46
|
+
const breakpoint = ref("xl");
|
|
47
|
+
provide("breakpoint", breakpoint);
|
|
48
|
+
const firstHiddenIndex = ref(-1);
|
|
49
|
+
provide("firstHiddenIndex", firstHiddenIndex);
|
|
50
50
|
const cols = computed(() => {
|
|
51
|
-
if (
|
|
51
|
+
if (typeof props.cols === "object" && props.cols !== null) return props.cols[breakpoint.value] ?? 1;
|
|
52
52
|
return props.cols;
|
|
53
53
|
});
|
|
54
54
|
provide("cols", cols);
|
|
55
|
-
const collapsedRows =
|
|
55
|
+
const collapsedRows = computed(() => typeof props.collapsedRows === "number" ? props.collapsedRows : Number(props.collapsedRows));
|
|
56
|
+
const gap = computed(() => {
|
|
57
|
+
if (typeof props.gap === "number") return `${props.gap}px`;
|
|
58
|
+
if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
|
|
59
|
+
return "unset";
|
|
60
|
+
});
|
|
61
|
+
const style = computed(() => {
|
|
62
|
+
return {
|
|
63
|
+
display: "grid",
|
|
64
|
+
gridGap: gap.value,
|
|
65
|
+
gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`
|
|
66
|
+
};
|
|
67
|
+
});
|
|
56
68
|
const breakpoints = {
|
|
57
69
|
xs: {
|
|
58
70
|
min: 0,
|
|
@@ -79,44 +91,31 @@ breakPointChange: ({ breakPoint: _breakPoint }) => true },
|
|
|
79
91
|
if (e.length !== 1 || e[0] === void 0) throw new Error("FaLayoutGrid 监听到了非预期数量的布局容器。");
|
|
80
92
|
const width = e[0].target.scrollWidth;
|
|
81
93
|
for (const [key, { min, max }] of Object.entries(breakpoints)) if (width >= min && width <= max) {
|
|
82
|
-
|
|
94
|
+
breakpoint.value = key;
|
|
83
95
|
break;
|
|
84
96
|
}
|
|
85
97
|
};
|
|
86
98
|
let resizeObserver;
|
|
87
99
|
const observeResize = () => {
|
|
88
|
-
const element =
|
|
100
|
+
const element = containerRef.value;
|
|
89
101
|
if (!element) return;
|
|
90
102
|
resizeObserver?.disconnect();
|
|
91
103
|
resizeObserver = new ResizeObserver(resize);
|
|
92
104
|
resizeObserver.observe(element);
|
|
93
105
|
};
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
watch(() => breakPoint.value, (newValue) => {
|
|
97
|
-
emit("breakPointChange", { breakPoint: newValue });
|
|
98
|
-
}, { immediate: true });
|
|
106
|
+
watch(() => breakpoint.value, (newValue) => {
|
|
107
|
+
emit("breakpointChange", { breakpoint: newValue });
|
|
99
108
|
});
|
|
100
|
-
|
|
109
|
+
onMounted(() => {
|
|
101
110
|
nextTick(observeResize);
|
|
111
|
+
emit("breakpointChange", { breakpoint: breakpoint.value });
|
|
102
112
|
});
|
|
103
|
-
|
|
104
|
-
resizeObserver?.disconnect();
|
|
105
|
-
});
|
|
113
|
+
onActivated(() => nextTick(observeResize));
|
|
106
114
|
onDeactivated(() => {
|
|
107
115
|
resizeObserver?.disconnect();
|
|
108
116
|
});
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
if (isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
|
|
112
|
-
return "unset";
|
|
113
|
-
});
|
|
114
|
-
const style = computed(() => {
|
|
115
|
-
return {
|
|
116
|
-
display: "grid",
|
|
117
|
-
gridGap: gap.value,
|
|
118
|
-
gridTemplateColumns: `repeat(${cols.value}, minmax(0, 1fr))`
|
|
119
|
-
};
|
|
117
|
+
onUnmounted(() => {
|
|
118
|
+
resizeObserver?.disconnect();
|
|
120
119
|
});
|
|
121
120
|
useRender(() => {
|
|
122
121
|
const defaultSlot = slots.default?.() ?? [];
|
|
@@ -129,30 +128,30 @@ breakPointChange: ({ breakPoint: _breakPoint }) => true },
|
|
|
129
128
|
});
|
|
130
129
|
let suffixCols = 0;
|
|
131
130
|
if (suffix?.props) {
|
|
132
|
-
const
|
|
133
|
-
suffixCols = (
|
|
131
|
+
const activeBreakpointProps = suffix.props[breakpoint.value];
|
|
132
|
+
suffixCols = (activeBreakpointProps?.span ?? Number(suffix.props["span"] ?? 1)) + (activeBreakpointProps?.offset ?? Number(suffix.props["offset"] ?? 0));
|
|
134
133
|
}
|
|
135
134
|
let occupiedCols = 0;
|
|
136
|
-
|
|
135
|
+
firstHiddenIndex.value = -1;
|
|
137
136
|
for (const [index, current] of fields.entries()) {
|
|
138
137
|
const currentProps = current.props;
|
|
139
138
|
if (currentProps === null) continue;
|
|
140
|
-
const
|
|
141
|
-
occupiedCols += (
|
|
142
|
-
if (occupiedCols > collapsedRows * Number(cols.value) - suffixCols) {
|
|
143
|
-
|
|
139
|
+
const activeBreakpointProps = currentProps[breakpoint.value];
|
|
140
|
+
occupiedCols += (activeBreakpointProps?.span ?? Number(currentProps["span"] ?? 1)) + (activeBreakpointProps?.offset ?? Number(currentProps["offset"] ?? 0));
|
|
141
|
+
if (occupiedCols > collapsedRows.value * Number(cols.value) - suffixCols) {
|
|
142
|
+
firstHiddenIndex.value = index;
|
|
144
143
|
break;
|
|
145
144
|
}
|
|
146
145
|
}
|
|
147
|
-
} else
|
|
146
|
+
} else firstHiddenIndex.value = -1;
|
|
148
147
|
return createVNode("div", {
|
|
149
|
-
"ref":
|
|
148
|
+
"ref": containerRef,
|
|
150
149
|
"style": style.value
|
|
151
150
|
}, [defaultSlot]);
|
|
152
151
|
});
|
|
153
152
|
return useExpose(expose, {
|
|
154
153
|
/** @description 响应式断点 */
|
|
155
|
-
|
|
154
|
+
breakpoint });
|
|
156
155
|
}
|
|
157
156
|
});
|
|
158
157
|
//#endregion
|