tav-ui
Version:
196 lines (193 loc) • 8.08 kB
JavaScript
import { defineComponent, ref, watchEffect, watch, unref, resolveComponent, openBlock, createBlock, normalizeStyle, normalizeClass, withCtx, createVNode, createElementVNode, createElementBlock, Fragment, renderList, createCommentVNode } from 'vue';
import { useDebounceFn } from '@vueuse/core';
import { Input, Popover, Pagination, Empty } from 'ant-design-vue';
import { useCopyToClipboard } from '../../../hooks/web/useCopyToClipboard2.mjs';
import { usePagination } from '../../../hooks/web/usePagination2.mjs';
import { TaContainerScroll } from '../../container-scroll/index2.mjs';
import { TaIcon } from '../../icon/index2.mjs';
import { TaIconSvg } from '../../icon-svg/index2.mjs';
import { useMessage } from '../../../hooks/web/useMessage2.mjs';
import '../../../locales/index2.mjs';
import iconsData from '../data/icons.data2.mjs';
import { iconPickerProps } from './types2.mjs';
import _export_sfc from '../../../../_virtual/plugin-vue_export-helper.mjs';
import { tavI18n } from '../../../locales/transfer2.mjs';
const AInput = Input;
const APopover = Popover;
const APagination = Pagination;
const AEmpty = Empty;
const { createMessage } = useMessage();
const _sfc_main = defineComponent({
name: "TaIconPicker",
components: { AInput, APopover, APagination, AEmpty, ScrollContainer: TaContainerScroll, SvgIcon: TaIconSvg, Icon: TaIcon },
props: iconPickerProps,
emits: ["change", "update:value"],
setup(props, { emit }) {
function getIcons() {
const data = iconsData;
const prefix = data?.prefix ?? "";
let result = [];
if (prefix)
result = (data?.icons ?? []).map((item) => `${prefix}:${item}`);
else if (Array.isArray(iconsData))
result = iconsData;
return result;
}
const isSvgMode = props.mode === "svg";
const icons = getIcons();
const currentSelect = ref("");
const visible = ref(false);
const currentList = ref(icons);
const prefixCls = "ta-icon-picker";
const debounceHandleSearchChange = useDebounceFn(handleSearchChange, 100);
const { clipboardRef, isSuccessRef } = useCopyToClipboard(props.value);
const { getPaginationList, getTotal, setCurrentPage } = usePagination(currentList, props.pageSize);
watchEffect(() => {
currentSelect.value = props.value;
});
watch(() => currentSelect.value, (v) => {
emit("update:value", v);
return emit("change", v);
});
function handlePageChange(page) {
setCurrentPage(page);
}
function handleClick(icon) {
currentSelect.value = icon;
if (props.copy) {
clipboardRef.value = icon;
if (unref(isSuccessRef))
createMessage.success(tavI18n("Tav.icon.2"));
}
}
function handleSearchChange(e) {
const value = e.target.value;
if (!value) {
setCurrentPage(1);
currentList.value = icons;
return;
}
currentList.value = icons.filter((item) => item.includes(value));
}
return {
isSvgMode,
tavI18n,
icons,
currentSelect,
visible,
currentList,
prefixCls,
debounceHandleSearchChange,
getPaginationList,
handleClick,
getTotal,
handlePageChange
};
}
});
const _hoisted_1 = { class: "flex justify-between" };
const _hoisted_2 = { key: 0 };
const _hoisted_3 = { class: "flex flex-wrap px-2" };
const _hoisted_4 = ["title", "onClick"];
const _hoisted_5 = {
key: 0,
class: "flex py-2 items-center justify-center"
};
const _hoisted_6 = {
key: 1,
class: "p-5"
};
const _hoisted_7 = {
key: 0,
class: "cursor-pointer px-2 py-1 flex items-center"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
const _component_AInput = resolveComponent("AInput");
const _component_SvgIcon = resolveComponent("SvgIcon");
const _component_Icon = resolveComponent("Icon");
const _component_ScrollContainer = resolveComponent("ScrollContainer");
const _component_a_pagination = resolveComponent("a-pagination");
const _component_a_empty = resolveComponent("a-empty");
const _component_a_popover = resolveComponent("a-popover");
return openBlock(), createBlock(_component_AInput, {
value: _ctx.currentSelect,
"onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.currentSelect = $event),
disabled: "",
style: normalizeStyle({ width: _ctx.width }),
placeholder: _ctx.tavI18n("Tav.icon.1"),
class: normalizeClass(_ctx.prefixCls)
}, {
addonAfter: withCtx(() => [
createVNode(_component_a_popover, {
modelValue: _ctx.visible,
"onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => _ctx.visible = $event),
placement: "bottomLeft",
trigger: "click",
"overlay-class-name": `${_ctx.prefixCls}-popover`
}, {
title: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createVNode(_component_AInput, {
placeholder: _ctx.tavI18n("Tav.common.queryText"),
"allow-clear": "",
onChange: _ctx.debounceHandleSearchChange
}, null, 8, ["placeholder", "onChange"])
])
]),
content: withCtx(() => [
_ctx.getPaginationList.length ? (openBlock(), createElementBlock("div", _hoisted_2, [
createVNode(_component_ScrollContainer, { class: "border border-solid border-t-0" }, {
default: withCtx(() => [
createElementVNode("ul", _hoisted_3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.getPaginationList, (icon) => {
return openBlock(), createElementBlock("li", {
key: icon,
class: normalizeClass([_ctx.currentSelect === icon ? "border border-primary" : "", "p-2 w-1/8 cursor-pointer mr-1 mt-1 flex justify-center items-center border border-solid hover:border-primary"]),
title: icon,
onClick: ($event) => _ctx.handleClick(icon)
}, [
createCommentVNode(' <Icon :icon="icon" :prefix="prefix" /> '),
_ctx.isSvgMode ? (openBlock(), createBlock(_component_SvgIcon, {
key: 0,
name: icon
}, null, 8, ["name"])) : (openBlock(), createBlock(_component_Icon, {
key: 1,
icon
}, null, 8, ["icon"]))
], 10, _hoisted_4);
}), 128))
])
]),
_: 1
}),
_ctx.getTotal >= _ctx.pageSize ? (openBlock(), createElementBlock("div", _hoisted_5, [
createVNode(_component_a_pagination, {
"show-less-items": "",
size: "small",
"page-size": _ctx.pageSize,
total: _ctx.getTotal,
onChange: _ctx.handlePageChange
}, null, 8, ["page-size", "total", "onChange"])
])) : createCommentVNode("v-if", true)
])) : (openBlock(), createElementBlock("div", _hoisted_6, [
createVNode(_component_a_empty)
]))
]),
default: withCtx(() => [
_ctx.isSvgMode && _ctx.currentSelect ? (openBlock(), createElementBlock("span", _hoisted_7, [
createVNode(_component_SvgIcon, { name: _ctx.currentSelect }, null, 8, ["name"])
])) : (openBlock(), createBlock(_component_Icon, {
key: 1,
icon: _ctx.currentSelect || "ion:apps-outline",
class: "cursor-pointer px-2 py-1"
}, null, 8, ["icon"]))
]),
_: 1
}, 8, ["modelValue", "overlay-class-name"])
]),
_: 1
}, 8, ["value", "style", "placeholder", "class"]);
}
var IconPicker = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/icon-picker/src/icon-picker.vue"]]);
export { IconPicker as default };
//# sourceMappingURL=icon-picker2.mjs.map