tav-ui
Version:
200 lines (195 loc) • 8.31 kB
JavaScript
;
Object.defineProperty(exports, '__esModule', { value: true });
var vue = require('vue');
var core = require('@vueuse/core');
var antDesignVue = require('ant-design-vue');
var useCopyToClipboard = require('../../../hooks/web/useCopyToClipboard2.js');
var usePagination = require('../../../hooks/web/usePagination2.js');
var index = require('../../container-scroll/index2.js');
var index$2 = require('../../icon/index2.js');
var index$1 = require('../../icon-svg/index2.js');
var useMessage = require('../../../hooks/web/useMessage2.js');
require('../../../locales/index2.js');
var icons_data = require('../data/icons.data2.js');
var types = require('./types2.js');
var pluginVue_exportHelper = require('../../../../_virtual/plugin-vue_export-helper.js');
var transfer = require('../../../locales/transfer2.js');
const AInput = antDesignVue.Input;
const APopover = antDesignVue.Popover;
const APagination = antDesignVue.Pagination;
const AEmpty = antDesignVue.Empty;
const { createMessage } = useMessage.useMessage();
const _sfc_main = vue.defineComponent({
name: "TaIconPicker",
components: { AInput, APopover, APagination, AEmpty, ScrollContainer: index.TaContainerScroll, SvgIcon: index$1.TaIconSvg, Icon: index$2.TaIcon },
props: types.iconPickerProps,
emits: ["change", "update:value"],
setup(props, { emit }) {
function getIcons() {
const data = icons_data["default"];
const prefix = data?.prefix ?? "";
let result = [];
if (prefix)
result = (data?.icons ?? []).map((item) => `${prefix}:${item}`);
else if (Array.isArray(icons_data["default"]))
result = icons_data["default"];
return result;
}
const isSvgMode = props.mode === "svg";
const icons = getIcons();
const currentSelect = vue.ref("");
const visible = vue.ref(false);
const currentList = vue.ref(icons);
const prefixCls = "ta-icon-picker";
const debounceHandleSearchChange = core.useDebounceFn(handleSearchChange, 100);
const { clipboardRef, isSuccessRef } = useCopyToClipboard.useCopyToClipboard(props.value);
const { getPaginationList, getTotal, setCurrentPage } = usePagination.usePagination(currentList, props.pageSize);
vue.watchEffect(() => {
currentSelect.value = props.value;
});
vue.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 (vue.unref(isSuccessRef))
createMessage.success(transfer.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: transfer.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 = vue.resolveComponent("AInput");
const _component_SvgIcon = vue.resolveComponent("SvgIcon");
const _component_Icon = vue.resolveComponent("Icon");
const _component_ScrollContainer = vue.resolveComponent("ScrollContainer");
const _component_a_pagination = vue.resolveComponent("a-pagination");
const _component_a_empty = vue.resolveComponent("a-empty");
const _component_a_popover = vue.resolveComponent("a-popover");
return vue.openBlock(), vue.createBlock(_component_AInput, {
value: _ctx.currentSelect,
"onUpdate:value": _cache[1] || (_cache[1] = ($event) => _ctx.currentSelect = $event),
disabled: "",
style: vue.normalizeStyle({ width: _ctx.width }),
placeholder: _ctx.tavI18n("Tav.icon.1"),
class: vue.normalizeClass(_ctx.prefixCls)
}, {
addonAfter: vue.withCtx(() => [
vue.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: vue.withCtx(() => [
vue.createElementVNode("div", _hoisted_1, [
vue.createVNode(_component_AInput, {
placeholder: _ctx.tavI18n("Tav.common.queryText"),
"allow-clear": "",
onChange: _ctx.debounceHandleSearchChange
}, null, 8, ["placeholder", "onChange"])
])
]),
content: vue.withCtx(() => [
_ctx.getPaginationList.length ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_2, [
vue.createVNode(_component_ScrollContainer, { class: "border border-solid border-t-0" }, {
default: vue.withCtx(() => [
vue.createElementVNode("ul", _hoisted_3, [
(vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.getPaginationList, (icon) => {
return vue.openBlock(), vue.createElementBlock("li", {
key: icon,
class: vue.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)
}, [
vue.createCommentVNode(' <Icon :icon="icon" :prefix="prefix" /> '),
_ctx.isSvgMode ? (vue.openBlock(), vue.createBlock(_component_SvgIcon, {
key: 0,
name: icon
}, null, 8, ["name"])) : (vue.openBlock(), vue.createBlock(_component_Icon, {
key: 1,
icon
}, null, 8, ["icon"]))
], 10, _hoisted_4);
}), 128))
])
]),
_: 1
}),
_ctx.getTotal >= _ctx.pageSize ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_5, [
vue.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"])
])) : vue.createCommentVNode("v-if", true)
])) : (vue.openBlock(), vue.createElementBlock("div", _hoisted_6, [
vue.createVNode(_component_a_empty)
]))
]),
default: vue.withCtx(() => [
_ctx.isSvgMode && _ctx.currentSelect ? (vue.openBlock(), vue.createElementBlock("span", _hoisted_7, [
vue.createVNode(_component_SvgIcon, { name: _ctx.currentSelect }, null, 8, ["name"])
])) : (vue.openBlock(), vue.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__ */ pluginVue_exportHelper["default"](_sfc_main, [["render", _sfc_render], ["__file", "/home/runner/work/tav-ui/tav-ui/packages/components/icon-picker/src/icon-picker.vue"]]);
exports["default"] = IconPicker;
//# sourceMappingURL=icon-picker2.js.map