@ctsy/layui-vue
Version:
a component library for Vue 3 base on layui-vue
249 lines (248 loc) • 9.88 kB
JavaScript
var __defProp = Object.defineProperty;
var __defProps = Object.defineProperties;
var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
var __getOwnPropSymbols = Object.getOwnPropertySymbols;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __propIsEnum = Object.prototype.propertyIsEnumerable;
var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
var __spreadValues = (a, b) => {
for (var prop in b || (b = {}))
if (__hasOwnProp.call(b, prop))
__defNormalProp(a, prop, b[prop]);
if (__getOwnPropSymbols)
for (var prop of __getOwnPropSymbols(b)) {
if (__propIsEnum.call(b, prop))
__defNormalProp(a, prop, b[prop]);
}
return a;
};
var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
import { defineComponent, ref, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, createCommentVNode, Fragment, renderList, normalizeClass, toDisplayString } from "vue";
import { i as iconfont } from "../icons-vue.es.js";
var index = "";
const _hoisted_1 = { class: "layui-inline layui-border-box layui-iconpicker layui-iconpicker-split" };
const _hoisted_2 = { class: "layui-inline layui-iconpicker-main" };
const _hoisted_3 = /* @__PURE__ */ createElementVNode("span", { class: "layui-inline layui-iconpicker-suffix" }, [
/* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-down layui-anim" })
], -1);
const _hoisted_4 = { class: "layui-iconpicker-view layui-iconpicker-scroll" };
const _hoisted_5 = {
key: 0,
class: "layui-iconpicker-search"
};
const _hoisted_6 = { class: "layui-form layui-input-wrap layui-input-wrap-prefix" };
const _hoisted_7 = /* @__PURE__ */ createElementVNode("div", { class: "layui-input-prefix" }, [
/* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-search" })
], -1);
const _hoisted_8 = /* @__PURE__ */ createElementVNode("div", { class: "layui-input-suffix layui-input-affix-event layui-hide" }, [
/* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-clear" })
], -1);
const _hoisted_9 = { class: "layui-iconpicker-list" };
const _hoisted_10 = ["onClick"];
const _hoisted_11 = { class: "layui-elip" };
const _hoisted_12 = {
key: 1,
class: "layui-iconpicker-page"
};
const _hoisted_13 = {
id: "layui-laypage-1",
class: "layui-box layui-laypage layui-laypage-default"
};
const _hoisted_14 = { class: "layui-laypage-count" };
const _hoisted_15 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-left" }, null, -1);
const _hoisted_16 = [
_hoisted_15
];
const _hoisted_17 = { class: "layui-laypage-curr" };
const _hoisted_18 = /* @__PURE__ */ createElementVNode("em", { class: "layui-laypage-em" }, null, -1);
const _hoisted_19 = /* @__PURE__ */ createElementVNode("span", { class: "layui-laypage-spr" }, "\u2026", -1);
const _hoisted_20 = /* @__PURE__ */ createElementVNode("a", {
href: "javascript:;",
class: "layui-laypage-last",
title: "\u5C3E\u9875"
}, "14", -1);
const _hoisted_21 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-right" }, null, -1);
const _hoisted_22 = [
_hoisted_21
];
const __default__ = {
name: "LayIconPicker"
};
const _sfc_main = /* @__PURE__ */ defineComponent(__spreadProps(__spreadValues({}, __default__), {
props: {
page: { type: Boolean, default: false },
modelValue: { default: "layui-icon-face-smile" },
showSearch: { type: Boolean }
},
emits: ["update:modelValue"],
setup(__props, { emit }) {
const props = __props;
const dropdownRef = ref(null);
const selectedIcon = ref(props.modelValue);
const selectIcon = function(icon) {
emit("update:modelValue", icon);
selectedIcon.value = icon;
dropdownRef.value.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 = function() {
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 = function() {
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 search = function(e) {
var text = e.target.value;
currentPage.value = 1;
const start = (currentPage.value - 1) * 12;
const end = start + 12;
if (text === "") {
if (props.page) {
icones.value = iconfont.slice(start, end);
total.value = iconfont.length;
totalPage.value = Math.ceil(iconfont.length / 12);
} else {
icones.value = iconfont;
}
} else {
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);
}
}
};
const searchList = function(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) => {
const _component_lay_dropdown = resolveComponent("lay-dropdown");
return openBlock(), createBlock(_component_lay_dropdown, {
ref_key: "dropdownRef",
ref: dropdownRef
}, {
content: withCtx(() => [
createElementVNode("div", _hoisted_4, [
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_5, [
createElementVNode("div", _hoisted_6, [
_hoisted_7,
createElementVNode("input", {
type: "text",
value: "",
placeholder: "search",
autocomplete: "off",
class: "layui-input",
"lay-affix": "clear",
onInput: search
}, null, 32),
_hoisted_8
])
])) : createCommentVNode("", true),
createElementVNode("div", _hoisted_9, [
createElementVNode("ul", null, [
(openBlock(true), createElementBlock(Fragment, null, renderList(icones.value, (icon) => {
return openBlock(), createElementBlock("li", {
key: icon,
class: normalizeClass([selectedIcon.value === icon.class ? "layui-this" : ""]),
onClick: ($event) => selectIcon(icon.class)
}, [
createElementVNode("i", {
class: normalizeClass(["layui-icon", [icon.class]])
}, null, 2),
createElementVNode("p", _hoisted_11, toDisplayString(icon.name), 1)
], 10, _hoisted_10);
}), 128))
])
]),
__props.page ? (openBlock(), createElementBlock("div", _hoisted_12, [
createElementVNode("div", _hoisted_13, [
createElementVNode("span", _hoisted_14, "\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_16, 2),
createElementVNode("span", _hoisted_17, [
_hoisted_18,
createElementVNode("em", null, toDisplayString(currentPage.value) + " / " + toDisplayString(totalPage.value), 1)
]),
_hoisted_19,
_hoisted_20,
createElementVNode("a", {
href: "javascript:;",
class: normalizeClass([[currentPage.value === totalPage.value ? "layui-disabled" : ""], "layui-laypage-next"]),
onClick: _cache[1] || (_cache[1] = ($event) => next())
}, _hoisted_22, 2)
])
])) : createCommentVNode("", true)
])
]),
default: withCtx(() => [
createElementVNode("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
createElementVNode("i", {
class: normalizeClass(["layui-inline layui-icon", [selectedIcon.value]])
}, null, 2)
]),
_hoisted_3
])
]),
_: 1
}, 512);
};
}
}));
_sfc_main.install = (app) => {
app.component(_sfc_main.name, _sfc_main);
};
export { _sfc_main as default };