254 lines
13 KiB
JavaScript
254 lines
13 KiB
JavaScript
import { w as withInstall } from "../badge/index2.js";
|
|
import { defineComponent, computed, ref, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, unref, toDisplayString } from "vue";
|
|
import { i as iconfont } from "../checkbox/index2.js";
|
|
import { _ as _sfc_main$1 } from "../dropdown/index2.js";
|
|
import { _ as _sfc_main$2 } from "../input/index2.js";
|
|
import { _ as _sfc_main$3 } from "../scroll/index2.js";
|
|
import "../_chunks/@vueuse/index.js";
|
|
import "../dropdownMenu/index2.js";
|
|
var index = /* @__PURE__ */ (() => ".layui-dropdown{position:relative;display:inline-block}.layui-dropdown-content{position:absolute;z-index:99999;background-color:#fff;box-sizing:border-box;border:1px solid #e4e7ed;border-radius:2px;box-shadow:0 2px 12px #0000001a}.layui-dropdown-content>.layui-dropdown-menu{border-radius:var(--global-border-radius);margin:5px 0}.layui-dropdown-content .layui-menu{position:relative;background-color:#fff}.layui-dropdown-content .layui-menu li,.layui-dropdown-content .layui-menu-body-title a{padding:5px 15px}.layui-dropdown-content .layui-menu li{position:relative;display:flex;margin:1px 0;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;cursor:pointer}.layui-dropdown-content .layui-menu li:hover{background-color:var(--global-neutral-color-2)}.layui-dropdown-content .layui-menu-body-title{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.layui-dropdown-menu-prefix{margin-right:8px}.layui-dropdown-menu-suffix{margin-left:15px}.layui-dropdown-content .layui-menu li.layui-disabled:hover{background-color:inherit}:root{--icon-picker-border-radius: var(--global-border-radius);--icon-picker-checked-color: var(--global-checked-color)}.layui-iconpicker{position:relative;height:38px;line-height:38px;border-width:1px;border-style:solid;border-radius:var(--icon-picker-border-radius);cursor:pointer}.layui-iconpicker .layui-inline{height:36px;line-height:36px;vertical-align:top}.layui-iconpicker-title{padding-left:5px}.layui-iconpicker-main{padding:0 10px}.layui-iconpicker-main .layui-icon{font-size:20px}.layui-iconpicker-main .layui-inline{vertical-align:top}.layui-iconpicker-split .layui-iconpicker-main{padding:0 15px;border-right-width:1px;border-right-style:solid}.layui-iconpicker-suffix{position:relative;width:35px;text-align:center}.layui-iconpicker-suffix .layui-icon{font-size:14px;color:#00000080;transition:all .3s}.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down{transform:rotate(180deg)}.layui-iconpicker-search{padding:10px;box-shadow:0 2px 8px #f0f1f2;border-bottom:1px solid whitesmoke}.layui-iconpicker-list{width:321px}.layui-iconpicker-list ul{margin:6px}.layui-iconpicker-list li{vertical-align:top;display:inline-block;width:60px;margin:2.5px;padding:5px;overflow:hidden;border:1px solid #eee;border-radius:2px;cursor:pointer;text-align:center}.layui-iconpicker-list li:hover{background-color:var(--global-neutral-color-1);color:#00000080}.layui-iconpicker-list li.layui-this{border-color:var(--icon-picker-checked-color);color:var(--icon-picker-checked-color)}.layui-iconpicker-list li .layui-icon{font-size:20px}.layui-iconpicker-list li .layui-elip{margin-top:2px;line-height:20px;font-size:12px}.layui-iconpicker-list .layui-none{margin:30px 0 35px}.layui-iconpicker-scroll .layui-iconpicker-list{max-height:200px}.layui-iconpicker-page{position:relative;padding:10px 10px 5px;border-top:1px solid #eee;text-align:right}.layui-iconpicker-page .layui-laypage{margin:0}.layui-iconpicker-page .layui-laypage a,.layui-iconpicker-page .layui-laypage span{padding:0 10px;color:#666}.layui-iconpicker-page .layui-laypage-count{position:absolute;left:10px}.layui-iconpicker-page .layui-laypage-curr .layui-laypage-em{background:0 0}.layui-iconpicker-page .layui-laypage-curr em{color:#666;color:#0009}.layui-iconpicker-page .layui-laypage-first,.layui-iconpicker-page .layui-laypage-last,.layui-iconpicker-page .layui-laypage-spr{display:none}.layui-colorpicker-disabled{opacity:.6}.layui-colorpicker-disabled,.layui-colorpicker-disabled *{cursor:not-allowed!important}\n")();
|
|
const _hoisted_1 = { class: "layui-inline layui-iconpicker-main" };
|
|
const _hoisted_2 = /* @__PURE__ */ createElementVNode("span", { class: "layui-inline layui-iconpicker-suffix" }, [
|
|
/* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-down layui-anim" })
|
|
], -1);
|
|
const _hoisted_3 = { class: "layui-iconpicker-view layui-iconpicker-scroll" };
|
|
const _hoisted_4 = {
|
|
key: 0,
|
|
class: "layui-iconpicker-search"
|
|
};
|
|
const _hoisted_5 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-search" }, null, -1);
|
|
const _hoisted_6 = { class: "layui-iconpicker-list" };
|
|
const _hoisted_7 = ["onClick"];
|
|
const _hoisted_8 = { class: "layui-elip" };
|
|
const _hoisted_9 = {
|
|
key: 1,
|
|
class: "layui-iconpicker-page"
|
|
};
|
|
const _hoisted_10 = {
|
|
id: "layui-laypage-1",
|
|
class: "layui-laypage layui-laypage-default"
|
|
};
|
|
const _hoisted_11 = { class: "layui-laypage-count" };
|
|
const _hoisted_12 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-left" }, null, -1);
|
|
const _hoisted_13 = [
|
|
_hoisted_12
|
|
];
|
|
const _hoisted_14 = { class: "layui-laypage-curr" };
|
|
const _hoisted_15 = /* @__PURE__ */ createElementVNode("em", { class: "layui-laypage-em" }, null, -1);
|
|
const _hoisted_16 = /* @__PURE__ */ createElementVNode("span", { class: "layui-laypage-spr" }, "\u2026", -1);
|
|
const _hoisted_17 = /* @__PURE__ */ createElementVNode("a", {
|
|
href: "javascript:;",
|
|
class: "layui-laypage-last",
|
|
title: "\u5C3E\u9875"
|
|
}, "14", -1);
|
|
const _hoisted_18 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-right" }, null, -1);
|
|
const _hoisted_19 = [
|
|
_hoisted_18
|
|
];
|
|
const __default__ = {
|
|
name: "LayIconPicker"
|
|
};
|
|
const _sfc_main = defineComponent({
|
|
...__default__,
|
|
props: {
|
|
page: { type: Boolean, default: false },
|
|
modelValue: { default: "layui-icon-face-smile" },
|
|
disabled: { type: Boolean, default: false },
|
|
showSearch: { type: Boolean },
|
|
contentClass: null,
|
|
contentStyle: null
|
|
},
|
|
emits: ["update:modelValue", "change"],
|
|
setup(__props, { emit }) {
|
|
const props = __props;
|
|
const selectedIcon = computed(() => props.modelValue);
|
|
const dropdownRef = ref(null);
|
|
const selectIcon = function(icon) {
|
|
var _a;
|
|
emit("update:modelValue", icon);
|
|
emit("change", icon);
|
|
(_a = dropdownRef.value) == null ? void 0 : _a.hide();
|
|
};
|
|
const icones = ref([]);
|
|
const total = ref(iconfont.length);
|
|
const totalPage = ref(total.value / 12);
|
|
const currentPage = ref(1);
|
|
if (props.page) {
|
|
icones.value = iconfont.slice(0, 12);
|
|
} else {
|
|
icones.value = iconfont;
|
|
}
|
|
const next = () => {
|
|
if (currentPage.value === totalPage.value) {
|
|
return;
|
|
}
|
|
currentPage.value = currentPage.value + 1;
|
|
const start = (currentPage.value - 1) * 12;
|
|
const end = start + 12;
|
|
icones.value = iconfont.slice(start, end);
|
|
};
|
|
const prev = () => {
|
|
if (currentPage.value === 1) {
|
|
return;
|
|
}
|
|
currentPage.value = currentPage.value - 1;
|
|
const start = (currentPage.value - 1) * 12;
|
|
const end = start + 12;
|
|
icones.value = iconfont.slice(start, end);
|
|
};
|
|
const clear = () => {
|
|
const start = (currentPage.value - 1) * 12;
|
|
const end = start + 12;
|
|
if (props.page) {
|
|
icones.value = iconfont.slice(start, end);
|
|
total.value = iconfont.length;
|
|
totalPage.value = Math.ceil(iconfont.length / 12);
|
|
} else {
|
|
icones.value = iconfont;
|
|
}
|
|
};
|
|
const search = (e) => {
|
|
currentPage.value = 1;
|
|
const start = (currentPage.value - 1) * 12;
|
|
const end = start + 12;
|
|
const text = e;
|
|
if (text) {
|
|
if (props.page) {
|
|
icones.value = searchList(text, iconfont).slice(start, end);
|
|
total.value = searchList(text, iconfont).length;
|
|
totalPage.value = Math.ceil(searchList(text, iconfont).length / 12);
|
|
} else {
|
|
icones.value = searchList(text, iconfont);
|
|
}
|
|
} else {
|
|
if (props.page) {
|
|
icones.value = iconfont.slice(start, end);
|
|
total.value = iconfont.length;
|
|
totalPage.value = Math.ceil(iconfont.length / 12);
|
|
} else {
|
|
icones.value = iconfont;
|
|
}
|
|
}
|
|
};
|
|
const searchList = (str, container) => {
|
|
var newList = [];
|
|
var startChar = str.charAt(0);
|
|
var strLen = str.length;
|
|
for (var i = 0; i < container.length; i++) {
|
|
var obj = container[i];
|
|
var isMatch = false;
|
|
for (var p in obj) {
|
|
if (typeof obj[p] == "function") {
|
|
obj[p]();
|
|
} else {
|
|
var curItem = "";
|
|
if (obj[p] != null) {
|
|
curItem = obj[p];
|
|
}
|
|
for (var j = 0; j < curItem.length; j++) {
|
|
if (curItem.charAt(j) == startChar) {
|
|
if (curItem.substring(j).substring(0, strLen) == str) {
|
|
isMatch = true;
|
|
break;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
if (isMatch) {
|
|
newList.push(obj);
|
|
}
|
|
}
|
|
return newList;
|
|
};
|
|
return (_ctx, _cache) => {
|
|
return openBlock(), createBlock(_sfc_main$1, {
|
|
ref_key: "dropdownRef",
|
|
ref: dropdownRef,
|
|
disabled: __props.disabled,
|
|
contentClass: __props.contentClass,
|
|
contentStyle: __props.contentStyle,
|
|
updateAtScroll: ""
|
|
}, {
|
|
content: withCtx(() => [
|
|
createElementVNode("div", _hoisted_3, [
|
|
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
|
createVNode(_sfc_main$2, {
|
|
onInput: search,
|
|
onClear: clear,
|
|
autocomplete: "true",
|
|
"allow-clear": true
|
|
}, {
|
|
prefix: withCtx(() => [
|
|
_hoisted_5
|
|
]),
|
|
_: 1
|
|
})
|
|
])) : createCommentVNode("", true),
|
|
createElementVNode("div", _hoisted_6, [
|
|
createVNode(_sfc_main$3, {
|
|
style: { "height": "200px" },
|
|
thumbColor: "rgb(238, 238, 238)"
|
|
}, {
|
|
default: withCtx(() => [
|
|
createElementVNode("ul", null, [
|
|
(openBlock(true), createElementBlock(Fragment, null, renderList(icones.value, (icon) => {
|
|
return openBlock(), createElementBlock("li", {
|
|
key: icon,
|
|
class: normalizeClass([unref(selectedIcon) === icon.class ? "layui-this" : ""]),
|
|
onClick: ($event) => selectIcon(icon.class)
|
|
}, [
|
|
createElementVNode("i", {
|
|
class: normalizeClass(["layui-icon", [icon.class]])
|
|
}, null, 2),
|
|
createElementVNode("p", _hoisted_8, toDisplayString(icon.name), 1)
|
|
], 10, _hoisted_7);
|
|
}), 128))
|
|
])
|
|
]),
|
|
_: 1
|
|
})
|
|
]),
|
|
__props.page ? (openBlock(), createElementBlock("div", _hoisted_9, [
|
|
createElementVNode("div", _hoisted_10, [
|
|
createElementVNode("span", _hoisted_11, "\u5171 " + toDisplayString(total.value) + " \u4E2A", 1),
|
|
createElementVNode("a", {
|
|
href: "javascript:;",
|
|
class: normalizeClass(["layui-laypage-prev", [currentPage.value === 1 ? "layui-disabled" : ""]]),
|
|
onClick: _cache[0] || (_cache[0] = ($event) => prev())
|
|
}, _hoisted_13, 2),
|
|
createElementVNode("span", _hoisted_14, [
|
|
_hoisted_15,
|
|
createElementVNode("em", null, toDisplayString(currentPage.value) + " / " + toDisplayString(totalPage.value), 1)
|
|
]),
|
|
_hoisted_16,
|
|
_hoisted_17,
|
|
createElementVNode("a", {
|
|
href: "javascript:;",
|
|
class: normalizeClass([[currentPage.value === totalPage.value ? "layui-disabled" : ""], "layui-laypage-next"]),
|
|
onClick: _cache[1] || (_cache[1] = ($event) => next())
|
|
}, _hoisted_19, 2)
|
|
])
|
|
])) : createCommentVNode("", true)
|
|
])
|
|
]),
|
|
default: withCtx(() => [
|
|
createElementVNode("div", {
|
|
class: normalizeClass(["layui-inline layui-border-box layui-iconpicker layui-iconpicker-split", [{ "layui-colorpicker-disabled": __props.disabled }]])
|
|
}, [
|
|
createElementVNode("div", _hoisted_1, [
|
|
createElementVNode("i", {
|
|
class: normalizeClass(["layui-inline layui-icon", [unref(selectedIcon)]])
|
|
}, null, 2)
|
|
]),
|
|
_hoisted_2
|
|
], 2)
|
|
]),
|
|
_: 1
|
|
}, 8, ["disabled", "contentClass", "contentStyle"]);
|
|
};
|
|
}
|
|
});
|
|
const component = withInstall(_sfc_main);
|
|
export { component as default };
|