{"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/** v-model 绑定值 */\n\t\tmodelValue: String as PropType<string | null>,\n\t\t/** 自定义图标 */\n\t\tcustomIcons: {\n\t\t\ttype: definePropType<string[]>(Array),\n\t\t\tdefault: () => [],\n\t\t},\n\t},\n\temits: {\n\t\t/** v-model 回调 */\n\t\t\"update:modelValue\": (value: string | null) => typeof value === \"string\" || value === null,\n\t\t/** 改变 */\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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"}