Compare commits
3 Commits
60e7e0d3e4
...
254ef38f6a
| Author | SHA1 | Date | |
|---|---|---|---|
| 254ef38f6a | |||
| c696834501 | |||
| 093de34571 |
1
es/_chunks/@layui/index.css
Normal file
1
es/_chunks/@layui/index.css
Normal file
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1,15 +1,15 @@
|
||||
import { computed, isRef, reactive, unref, toRefs, getCurrentScope, onScopeDispose, getCurrentInstance, onMounted, nextTick, ref, watch, customRef, onUpdated } from "vue";
|
||||
var _a;
|
||||
const isClient = typeof window !== "undefined";
|
||||
const toString = Object.prototype.toString;
|
||||
var _a$1;
|
||||
const isClient$1 = typeof window !== "undefined";
|
||||
const toString$1 = Object.prototype.toString;
|
||||
const isFunction = (val) => typeof val === "function";
|
||||
const isNumber = (val) => typeof val === "number";
|
||||
const isString = (val) => typeof val === "string";
|
||||
const isObject = (val) => toString.call(val) === "[object Object]";
|
||||
const isObject$1 = (val) => toString$1.call(val) === "[object Object]";
|
||||
const clamp = (n, min, max) => Math.min(max, Math.max(min, n));
|
||||
const noop = () => {
|
||||
};
|
||||
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
||||
isClient$1 && ((_a$1 = window == null ? void 0 : window.navigator) == null ? void 0 : _a$1.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
||||
function resolveUnref(r) {
|
||||
return typeof r === "function" ? r() : unref(r);
|
||||
}
|
||||
@ -141,7 +141,7 @@ function useTimeoutFn(cb, interval, options = {}) {
|
||||
}
|
||||
if (immediate) {
|
||||
isPending.value = true;
|
||||
if (isClient)
|
||||
if (isClient$1)
|
||||
start();
|
||||
}
|
||||
tryOnScopeDispose(stop);
|
||||
@ -156,7 +156,7 @@ function unrefElement(elRef) {
|
||||
const plain = resolveUnref(elRef);
|
||||
return (_a2 = plain == null ? void 0 : plain.$el) != null ? _a2 : plain;
|
||||
}
|
||||
const defaultWindow = isClient ? window : void 0;
|
||||
const defaultWindow = isClient$1 ? window : void 0;
|
||||
function useEventListener(...args) {
|
||||
let target;
|
||||
let event;
|
||||
@ -561,4 +561,9 @@ function useWindowSize(options = {}) {
|
||||
useEventListener("orientationchange", update, { passive: true });
|
||||
return { width, height };
|
||||
}
|
||||
export { TransitionPresets as T, useResizeObserver as a, useThrottleFn as b, useEventListener as c, useEyeDropper as d, useTransition as e, useMousePressed as f, isObject as i, onClickOutside as o, reactiveOmit as r, templateRef as t, useWindowSize as u };
|
||||
var _a;
|
||||
const isClient = typeof window !== "undefined";
|
||||
const toString = Object.prototype.toString;
|
||||
const isObject = (val) => toString.call(val) === "[object Object]";
|
||||
isClient && ((_a = window == null ? void 0 : window.navigator) == null ? void 0 : _a.userAgent) && /iP(ad|hone|od)/.test(window.navigator.userAgent);
|
||||
export { TransitionPresets as T, useResizeObserver as a, useThrottleFn as b, useEventListener as c, useEyeDropper as d, useTransition as e, useMousePressed as f, isObject as g, isObject$1 as i, onClickOutside as o, reactiveOmit as r, templateRef as t, useWindowSize as u };
|
||||
|
||||
@ -1,2 +1,2 @@
|
||||
export { c as default } from "./index2.js";
|
||||
export { d as default } from "./index2.js";
|
||||
import "vue";
|
||||
|
||||
@ -6,6 +6,27 @@ const withInstall = (comp) => {
|
||||
};
|
||||
return component2;
|
||||
};
|
||||
const isElement = (vn) => {
|
||||
return Boolean(vn && vn.shapeFlag & 1);
|
||||
};
|
||||
const isComponent = (vn, type) => {
|
||||
return Boolean(vn && vn.shapeFlag & 6);
|
||||
};
|
||||
const isArrayChildren = (vn, children) => {
|
||||
return Boolean(vn && vn.shapeFlag & 16);
|
||||
};
|
||||
function convertSlotName(vm, name) {
|
||||
const camelCaseName = camelCase(name);
|
||||
const kebabCaseName = kebabCase(name);
|
||||
return vm.slots[camelCaseName] ? camelCaseName : vm.slots[kebabCaseName] ? kebabCaseName : name;
|
||||
}
|
||||
function camelCase(str) {
|
||||
return str.replace(/-(\w)/g, (_, c) => c ? c.toUpperCase() : "");
|
||||
}
|
||||
function kebabCase(key) {
|
||||
const result = key.replace(/([A-Z])/g, " $1").trim();
|
||||
return result.split(" ").join("-").toLowerCase();
|
||||
}
|
||||
var index = /* @__PURE__ */ (() => ".layui-badge,.layui-badge-dot,.layui-badge-rim{position:relative;display:inline-block;padding:0 6px;font-size:12px;text-align:center;background-color:#ff5722;color:#fff;border-radius:var(--global-border-radius)}.layui-badge{height:18px;line-height:18px}.layui-badge-dot{width:8px;height:8px;padding:0;border-radius:50%}.layui-badge-rim{height:18px;line-height:18px;border-width:1px;border-style:solid;background-color:#fff;border-color:var(--global-neutral-color-3);color:#666}.layui-badge-dot-ripple>span{position:absolute;top:0;left:0;width:100%;height:100%;display:block;border-radius:50%;box-sizing:border-box;animation:layui-badge-dot-anim-ripple 1.2s ease-in-out infinite}@keyframes layui-badge-dot-anim-ripple{0%{transform:scale(.8);opacity:.6}to{transform:scale(2.4);opacity:0}}.layui-btn .layui-badge,.layui-btn .layui-badge-dot{margin-left:5px}.layui-nav .layui-badge,.layui-nav .layui-badge-dot{position:absolute;top:50%;margin:-5px 6px 0}.layui-nav .layui-badge{margin-top:-10px}.layui-tab-title .layui-badge,.layui-tab-title .layui-badge-dot{left:5px;top:-2px}\n")();
|
||||
const __default__ = {
|
||||
name: "LayBadge"
|
||||
@ -51,4 +72,4 @@ const _sfc_main = defineComponent({
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { component as c, withInstall as w };
|
||||
export { isComponent as a, isArrayChildren as b, convertSlotName as c, component as d, isElement as i, withInstall as w };
|
||||
|
||||
@ -8,9 +8,13 @@ import "../dropdownMenu/index2.js";
|
||||
import "../_chunks/@vueuse/index.js";
|
||||
var index = /* @__PURE__ */ (() => ":root{--input-border-radius: var(--global-border-radius);--input-border-color: var(--global-neutral-color-3)}.layui-input{width:100%;height:38px;line-height:38px;border-width:1px;border-style:solid;border-color:var(--input-border-color);border-radius:var(--input-border-radius);display:inline-flex}.layui-input input{height:38px;line-height:38px;background-color:#fff;color:#000000d9;padding-left:10px;display:inline-block;border:none;height:100%;width:100%}.layui-input-append{background-color:#fafafa;border-left:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-input-prepend{background-color:#fafafa;border-right:1px solid var(--input-border-color);display:flex;padding:0 15px;flex:none;align-items:center}.layui-input-wrapper{width:100%;display:inline-flex;border:none}.layui-input:hover,.layui-input:focus-within{border-color:#d2d2d2}.layui-input-clear,.layui-input-prefix,.layui-input-suffix,.layui-input-password{background-color:#fff}.layui-input-clear,.layui-input-password,.layui-input-prefix,.layui-input-suffix{display:flex;flex:none;align-items:center;padding:0 10px}.layui-input-has-prefix input{padding:0}.layui-input-clear,.layui-input-password{color:#00000073}.layui-input-clear:hover{opacity:.6}.layui-input input::-webkit-input-placeholder{line-height:1.3}.layui-input input::-ms-reveal{display:none}.layui-input-disabled{border-color:var(--input-border-color)!important}.layui-input-disabled{opacity:.6}.layui-input-disabled,.layui-input-disabled *{cursor:not-allowed!important}.layui-input[size=lg]{height:44px}.layui-input[size=lg] .layui-input{height:44px;line-height:44px}.layui-input[size=md]{height:38px}.layui-input[size=md] .layui-input{height:38px;line-height:38px}.layui-input[size=sm]{height:32px}.layui-input[size=sm] .layui-input{height:32px;line-height:32px}.layui-input[size=xs]{height:26px}.layui-input[size=xs] .layui-input{height:26px;line-height:26px}.layui-cascader{display:inline-block}.layui-cascader[size=lg]{height:44px;width:260px}.layui-cascader[size=lg] .layui-input{height:44px;line-height:44px}.layui-cascader[size=md]{height:38px;width:220px}.layui-cascader[size=md] .layui-input{height:38px;line-height:38px}.layui-cascader[size=sm]{height:32px;width:180px}.layui-cascader[size=sm] .layui-input{height:32px;line-height:32px}.layui-cascader[size=xs]{height:26px;width:140px}.layui-cascader[size=xs] .layui-input{height:26px;line-height:26px}.layui-cascader .layui-input-suffix{padding-right:10px}.layui-cascader .layui-icon-triangle-d{transition:all .3s ease-in-out;transform:rotate(0);color:var(--global-neutral-color-8)}.layui-cascader-opend .layui-icon-triangle-d{transform:rotate(180deg)}.layui-cascader .layui-cascader-panel{box-sizing:border-box;border-radius:2px;line-height:26px;color:#000c;font-size:14px;white-space:nowrap;display:inline-flex}.layui-cascader-menu{display:inline-block;border-right:1px solid var(--global-neutral-color-3)}.layui-cascader-menu:last-child{border-right:none}.layui-cascader-menu-item{min-width:130px;padding:5px 9px 5px 15px;box-sizing:border-box;transition:all .1s ease-in-out;display:flex;justify-content:space-between;align-items:center;min-height:35px}.layui-cascader-menu-item:hover,.layui-cascader-selected{background-color:var(--global-checked-color);color:#fff}.layui-cascader-menu-item .layui-icon-right{margin-left:10px}.layui-cascader-disabled,.layui-cascader-disabled *{cursor:not-allowed!important}\n")();
|
||||
const _hoisted_1 = ["size"];
|
||||
const _hoisted_2 = { class: "layui-cascader-panel" };
|
||||
const _hoisted_3 = ["onClick"];
|
||||
const _hoisted_4 = {
|
||||
const _hoisted_2 = {
|
||||
key: 1,
|
||||
class: "slot-area"
|
||||
};
|
||||
const _hoisted_3 = { class: "layui-cascader-panel" };
|
||||
const _hoisted_4 = ["onClick"];
|
||||
const _hoisted_5 = {
|
||||
key: 2,
|
||||
class: "layui-icon layui-icon-right"
|
||||
};
|
||||
@ -49,10 +53,18 @@ const _sfc_main = defineComponent({
|
||||
initTreeData();
|
||||
});
|
||||
watch(() => props.modelValue, () => {
|
||||
if (props.modelValue === null || props.modelValue === "") {
|
||||
onClear();
|
||||
if (watchModelValue.value) {
|
||||
if (props.modelValue === null || props.modelValue === "") {
|
||||
onClear();
|
||||
} else {
|
||||
updateDisplayByModelValue();
|
||||
}
|
||||
setTimeout(() => {
|
||||
watchModelValue.value = true;
|
||||
}, 0);
|
||||
}
|
||||
});
|
||||
const watchModelValue = ref(true);
|
||||
const treeData = ref([]);
|
||||
const initTreeData = () => {
|
||||
let treeLvNum = getMaxFloor(props.options);
|
||||
@ -69,29 +81,25 @@ const _sfc_main = defineComponent({
|
||||
};
|
||||
}
|
||||
}
|
||||
updateDisplayByModelValue();
|
||||
};
|
||||
function updateDisplayByModelValue() {
|
||||
if (props.modelValue) {
|
||||
try {
|
||||
let valueData = props.modelValue.split(props.decollator);
|
||||
let data = [];
|
||||
for (let index2 = 0; index2 < treeData.value.length; index2++) {
|
||||
const element = treeData.value[index2];
|
||||
const nowValue = valueData[index2];
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const ele = element[i];
|
||||
if (nowValue === ele.value) {
|
||||
data.push(ele);
|
||||
element.selectIndex = i;
|
||||
}
|
||||
for (let index2 = 0; index2 < valueData.length; index2++) {
|
||||
const element = valueData[index2];
|
||||
let selectIndex = treeData.value[index2].data.findIndex((e) => e.value === element);
|
||||
if (selectIndex == -1) {
|
||||
break;
|
||||
}
|
||||
selectBar(treeData.value[index2].data[selectIndex], selectIndex, index2);
|
||||
}
|
||||
displayValue.value = data.map((e) => {
|
||||
return e.label;
|
||||
}).join(` ${props.decollator} `);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
function getMaxFloor(treeData2) {
|
||||
let max = 0;
|
||||
function each(data, floor) {
|
||||
@ -165,6 +173,7 @@ const _sfc_main = defineComponent({
|
||||
let value = data.map((e) => {
|
||||
return e.value;
|
||||
}).join(props.decollator);
|
||||
watchModelValue.value = false;
|
||||
emit("update:modelValue", value);
|
||||
let evt = {
|
||||
display: displayValue.value,
|
||||
@ -218,7 +227,7 @@ const _sfc_main = defineComponent({
|
||||
onHide: _cache[2] || (_cache[2] = ($event) => openState.value = false)
|
||||
}, {
|
||||
content: withCtx(() => [
|
||||
createElementVNode("div", _hoisted_2, [
|
||||
createElementVNode("div", _hoisted_3, [
|
||||
(openBlock(true), createElementBlock(Fragment, null, renderList(treeData.value, (itemCol, index2) => {
|
||||
return openBlock(), createElementBlock(Fragment, null, [
|
||||
itemCol.data.length ? (openBlock(), createBlock(_sfc_main$2, {
|
||||
@ -240,8 +249,8 @@ const _sfc_main = defineComponent({
|
||||
item.slot && unref(slots)[item.slot] ? renderSlot(_ctx.$slots, item.slot, { key: 0 }) : (openBlock(), createElementBlock(Fragment, { key: 1 }, [
|
||||
createTextVNode(toDisplayString(item.label), 1)
|
||||
], 64)),
|
||||
item.children && item.children.length ? (openBlock(), createElementBlock("i", _hoisted_4)) : createCommentVNode("", true)
|
||||
], 10, _hoisted_3);
|
||||
item.children && item.children.length ? (openBlock(), createElementBlock("i", _hoisted_5)) : createCommentVNode("", true)
|
||||
], 10, _hoisted_4);
|
||||
}), 128))
|
||||
]),
|
||||
_: 2
|
||||
@ -262,7 +271,9 @@ const _sfc_main = defineComponent({
|
||||
readonly: true,
|
||||
size: __props.size,
|
||||
onClear
|
||||
}, null, 8, ["modelValue", "placeholder", "allow-clear", "disabled", "size"])) : renderSlot(_ctx.$slots, "default", { key: 1 })
|
||||
}, null, 8, ["modelValue", "placeholder", "allow-clear", "disabled", "size"])) : (openBlock(), createElementBlock("div", _hoisted_2, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
]))
|
||||
]),
|
||||
_: 3
|
||||
}, 8, ["trigger", "disabled", "contentClass", "contentStyle"])
|
||||
|
||||
@ -1 +1 @@
|
||||
.layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}
|
||||
.layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border-top:1px solid var(--global-neutral-color-6);border-bottom:1px solid var(--global-neutral-color-6);border-right:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}
|
||||
|
||||
@ -3765,7 +3765,7 @@ var __default__$2F = {
|
||||
};
|
||||
}
|
||||
}));
|
||||
var index = /* @__PURE__ */ (() => ".layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}\n")();
|
||||
var index = /* @__PURE__ */ (() => ".layui-checkbox[size=lg]{height:18px;line-height:18px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:18px;height:18px;font-size:16px}.layui-checkbox[size=lg] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:18px;line-height:18px;font-size:16px}.layui-checkbox[size=md]{height:16px;line-height:16px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:16px;height:16px;font-size:14px}.layui-checkbox[size=md] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:16px;line-height:16px;font-size:14px}.layui-checkbox[size=sm]{height:14px;line-height:14px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:14px;height:14px;font-size:12px}.layui-checkbox[size=sm] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:14px;line-height:14px;font-size:12px}.layui-checkbox[size=xs]{height:12px;line-height:12px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-icon{width:12px;height:12px;font-size:10px}.layui-checkbox[size=xs] .layui-form-checkbox[lay-skin=primary] .layui-checkbox-label{height:12px;line-height:12px;font-size:10px}.layui-checkbox input[type=checkbox]{display:none}.layui-form-checkbox{position:relative;height:30px;line-height:30px;margin-right:10px;padding-right:30px;cursor:pointer;font-size:0;-webkit-transition:.1s linear;transition:.1s linear;box-sizing:border-box}.layui-form-checkbox span{padding:0 10px;height:100%;font-size:14px;border-radius:2px 0 0 2px;background-color:var(--global-neutral-color-6);color:#fff;overflow:hidden}.layui-form-checkbox:hover span{background-color:var(--global-neutral-color-8)}.layui-form-checkbox i{top:0;right:0;width:29px;height:28px;position:absolute;border-top:1px solid var(--global-neutral-color-6);border-bottom:1px solid var(--global-neutral-color-6);border-right:1px solid var(--global-neutral-color-6);border-radius:0 2px 2px 0;color:#fff;font-size:20px;text-align:center}.layui-form-checkbox:hover i{border-color:var(--global-neutral-color-8);color:var(--global-neutral-color-8)}.layui-form-checkbox[lay-skin=primary]{height:auto!important;line-height:normal!important;min-width:18px;min-height:18px;border:none!important;margin-right:0;padding-left:28px;padding-right:0;background:0 0}.layui-form-checkbox[lay-skin=primary] span{padding-left:0;padding-right:15px;line-height:18px;background:0 0;color:#666}.layui-form-checkbox[lay-skin=primary] i{right:auto;left:0;width:16px;height:16px;line-height:16px;border:1px solid var(--global-neutral-color-6);font-size:12px;border-radius:2px;background-color:#fff;-webkit-transition:.1s linear;transition:.1s linear}.layui-form-checkbox[lay-skin=primary]:hover i{border-color:var(--global-checked-color);color:#fff}.layui-form-checked,.layui-form-checked:hover{border-color:var(--global-checked-color)}.layui-form-checked i,.layui-form-checked:hover i{color:var(--global-checked-color)}.layui-form-checked span,.layui-form-checked:hover span{background-color:var(--global-checked-color)}.layui-form-checked[lay-skin=primary] i{border-color:var(--global-checked-color);background-color:var(--global-checked-color);color:#fff}.layui-form-checked[lay-skin=primary] span{background:0 0!important}.layui-checkbox-disabled[lay-skin=primary] span{background:0 0!important;color:var(--global-neutral-color-8)!important}.layui-checkbox-disabled[lay-skin=primary]:hover i{border-color:var(--global-neutral-color-6)}.layui-checkbox-disabled,.layui-checkbox-disabled i{border-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled span{background-color:var(--global-neutral-color-3)!important}.layui-checkbox-disabled em{color:var(--global-neutral-color-6)!important}.layui-checkbox-disabled:hover i{color:#fff!important}.layui-checkbox-disabled .layui-icon-ok,.layui-checkbox-disabled .layui-icon-subtraction{background-color:var(--global-neutral-color-3)!important;border-color:var(--global-neutral-color-3)!important}\n")();
|
||||
const _hoisted_1 = ["onClick", "size"];
|
||||
const _hoisted_2 = ["name", "value"];
|
||||
const _hoisted_3 = ["lay-skin"];
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { i as isElement, a as isComponent, b as isArrayChildren, w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, ref, onMounted, openBlock, createBlock, Teleport, renderSlot, onUpdated, useSlots, useAttrs, inject, shallowRef, reactive, toRefs, computed, onBeforeUnmount, watch, provide, createElementBlock, Fragment, createVNode, unref, mergeProps, withCtx, normalizeClass, normalizeStyle, createCommentVNode, cloneVNode, h, nextTick } from "vue";
|
||||
import { u as useWindowSize, a as useResizeObserver, o as onClickOutside, b as useThrottleFn } from "../_chunks/@vueuse/index.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}\n")();
|
||||
@ -56,15 +56,6 @@ const getScrollElements = (container) => {
|
||||
}
|
||||
return scrollElements;
|
||||
};
|
||||
const isElement = (vn) => {
|
||||
return Boolean(vn && vn.shapeFlag & 1);
|
||||
};
|
||||
const isComponent = (vn, type) => {
|
||||
return Boolean(vn && vn.shapeFlag & 6);
|
||||
};
|
||||
const isArrayChildren = (vn, children) => {
|
||||
return Boolean(vn && vn.shapeFlag & 16);
|
||||
};
|
||||
const getChildrenArray = (vn) => {
|
||||
if (isArrayChildren(vn, vn.children)) {
|
||||
return vn.children;
|
||||
|
||||
@ -1 +1 @@
|
||||
.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}
|
||||
.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;display:inline-block}.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-icon-picker-clear{color:#00000073;padding:0 0 0 10px}.layui-icon-picker-clear:hover,.layui-colorpicker-disabled{opacity:.6}.layui-colorpicker-disabled,.layui-colorpicker-disabled *{cursor:not-allowed!important}.transform{transform:rotate(180deg)}
|
||||
|
||||
@ -1,49 +1,51 @@
|
||||
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 { defineComponent, computed, ref, resolveComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, createVNode, createCommentVNode, Fragment, renderList, normalizeClass, unref, toDisplayString, withModifiers } 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")();
|
||||
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;display:inline-block}.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-icon-picker-clear{color:#00000073;padding:0 0 0 10px}.layui-icon-picker-clear:hover,.layui-colorpicker-disabled{opacity:.6}.layui-colorpicker-disabled,.layui-colorpicker-disabled *{cursor:not-allowed!important}.transform{transform:rotate(180deg)}\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 = {
|
||||
const _hoisted_2 = {
|
||||
key: 0,
|
||||
class: "layui-icon-picker-clear"
|
||||
};
|
||||
const _hoisted_3 = { class: "layui-inline layui-iconpicker-suffix" };
|
||||
const _hoisted_4 = { class: "layui-iconpicker-view layui-iconpicker-scroll" };
|
||||
const _hoisted_5 = {
|
||||
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 = {
|
||||
const _hoisted_6 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-search" }, null, -1);
|
||||
const _hoisted_7 = { class: "layui-iconpicker-list" };
|
||||
const _hoisted_8 = ["onClick"];
|
||||
const _hoisted_9 = { class: "layui-elip" };
|
||||
const _hoisted_10 = {
|
||||
key: 1,
|
||||
class: "layui-iconpicker-page"
|
||||
};
|
||||
const _hoisted_10 = {
|
||||
const _hoisted_11 = {
|
||||
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_12 = { class: "layui-laypage-count" };
|
||||
const _hoisted_13 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-left" }, null, -1);
|
||||
const _hoisted_14 = [
|
||||
_hoisted_13
|
||||
];
|
||||
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", {
|
||||
const _hoisted_15 = { class: "layui-laypage-curr" };
|
||||
const _hoisted_16 = /* @__PURE__ */ createElementVNode("em", { class: "layui-laypage-em" }, null, -1);
|
||||
const _hoisted_17 = /* @__PURE__ */ createElementVNode("span", { class: "layui-laypage-spr" }, "\u2026", -1);
|
||||
const _hoisted_18 = /* @__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 _hoisted_19 = /* @__PURE__ */ createElementVNode("i", { class: "layui-icon layui-icon-right" }, null, -1);
|
||||
const _hoisted_20 = [
|
||||
_hoisted_19
|
||||
];
|
||||
const __default__ = {
|
||||
name: "LayIconPicker"
|
||||
@ -55,6 +57,7 @@ const _sfc_main = defineComponent({
|
||||
modelValue: { default: "layui-icon-face-smile" },
|
||||
disabled: { type: Boolean, default: false },
|
||||
showSearch: { type: Boolean },
|
||||
allowClear: { type: Boolean },
|
||||
contentClass: null,
|
||||
contentStyle: null
|
||||
},
|
||||
@ -63,12 +66,19 @@ const _sfc_main = defineComponent({
|
||||
const props = __props;
|
||||
const selectedIcon = computed(() => props.modelValue);
|
||||
const dropdownRef = ref(null);
|
||||
const openState = ref(false);
|
||||
const selectIcon = function(icon) {
|
||||
var _a;
|
||||
emit("update:modelValue", icon);
|
||||
emit("change", icon);
|
||||
(_a = dropdownRef.value) == null ? void 0 : _a.hide();
|
||||
};
|
||||
const onClear = function() {
|
||||
emit("update:modelValue", "");
|
||||
};
|
||||
const hasContent = computed(() => {
|
||||
return props.modelValue != null && props.modelValue != "";
|
||||
});
|
||||
const icones = ref([]);
|
||||
const total = ref(iconfont.length);
|
||||
const totalPage = ref(total.value / 12);
|
||||
@ -162,17 +172,20 @@ const _sfc_main = defineComponent({
|
||||
return newList;
|
||||
};
|
||||
return (_ctx, _cache) => {
|
||||
const _component_lay_icon = resolveComponent("lay-icon");
|
||||
return openBlock(), createBlock(_sfc_main$1, {
|
||||
ref_key: "dropdownRef",
|
||||
ref: dropdownRef,
|
||||
disabled: __props.disabled,
|
||||
contentClass: __props.contentClass,
|
||||
contentStyle: __props.contentStyle,
|
||||
onHide: _cache[2] || (_cache[2] = ($event) => openState.value = false),
|
||||
onShow: _cache[3] || (_cache[3] = ($event) => openState.value = true),
|
||||
updateAtScroll: ""
|
||||
}, {
|
||||
content: withCtx(() => [
|
||||
createElementVNode("div", _hoisted_3, [
|
||||
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_4, [
|
||||
createElementVNode("div", _hoisted_4, [
|
||||
__props.showSearch ? (openBlock(), createElementBlock("div", _hoisted_5, [
|
||||
createVNode(_sfc_main$2, {
|
||||
onInput: search,
|
||||
onClear: clear,
|
||||
@ -180,12 +193,12 @@ const _sfc_main = defineComponent({
|
||||
"allow-clear": true
|
||||
}, {
|
||||
prefix: withCtx(() => [
|
||||
_hoisted_5
|
||||
_hoisted_6
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
])) : createCommentVNode("", true),
|
||||
createElementVNode("div", _hoisted_6, [
|
||||
createElementVNode("div", _hoisted_7, [
|
||||
createVNode(_sfc_main$3, {
|
||||
style: { "height": "200px" },
|
||||
thumbColor: "rgb(238, 238, 238)"
|
||||
@ -201,33 +214,33 @@ const _sfc_main = defineComponent({
|
||||
createElementVNode("i", {
|
||||
class: normalizeClass(["layui-icon", [icon.class]])
|
||||
}, null, 2),
|
||||
createElementVNode("p", _hoisted_8, toDisplayString(icon.name), 1)
|
||||
], 10, _hoisted_7);
|
||||
createElementVNode("p", _hoisted_9, toDisplayString(icon.name), 1)
|
||||
], 10, _hoisted_8);
|
||||
}), 128))
|
||||
])
|
||||
]),
|
||||
_: 1
|
||||
})
|
||||
]),
|
||||
__props.page ? (openBlock(), createElementBlock("div", _hoisted_9, [
|
||||
createElementVNode("div", _hoisted_10, [
|
||||
createElementVNode("span", _hoisted_11, "\u5171 " + toDisplayString(total.value) + " \u4E2A", 1),
|
||||
__props.page ? (openBlock(), createElementBlock("div", _hoisted_10, [
|
||||
createElementVNode("div", _hoisted_11, [
|
||||
createElementVNode("span", _hoisted_12, "\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,
|
||||
}, _hoisted_14, 2),
|
||||
createElementVNode("span", _hoisted_15, [
|
||||
_hoisted_16,
|
||||
createElementVNode("em", null, toDisplayString(currentPage.value) + " / " + toDisplayString(totalPage.value), 1)
|
||||
]),
|
||||
_hoisted_16,
|
||||
_hoisted_17,
|
||||
_hoisted_18,
|
||||
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)
|
||||
}, _hoisted_20, 2)
|
||||
])
|
||||
])) : createCommentVNode("", true)
|
||||
])
|
||||
@ -241,7 +254,17 @@ const _sfc_main = defineComponent({
|
||||
class: normalizeClass(["layui-inline layui-icon", [unref(selectedIcon)]])
|
||||
}, null, 2)
|
||||
]),
|
||||
_hoisted_2
|
||||
__props.allowClear && unref(hasContent) && !__props.disabled ? (openBlock(), createElementBlock("span", _hoisted_2, [
|
||||
createVNode(_component_lay_icon, {
|
||||
type: "layui-icon-close-fill",
|
||||
onClick: withModifiers(onClear, ["stop"])
|
||||
}, null, 8, ["onClick"])
|
||||
])) : createCommentVNode("", true),
|
||||
createElementVNode("span", _hoisted_3, [
|
||||
createElementVNode("i", {
|
||||
class: normalizeClass(["layui-icon layui-icon-down", [openState.value ? "transform" : ""]])
|
||||
}, null, 2)
|
||||
])
|
||||
], 2)
|
||||
]),
|
||||
_: 1
|
||||
|
||||
19
es/index.js
19
es/index.js
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -87,7 +87,8 @@ const _sfc_main = defineComponent({
|
||||
size: { default: "md" },
|
||||
maxlength: null,
|
||||
max: null,
|
||||
min: null
|
||||
min: null,
|
||||
qfw: { type: Boolean, default: false }
|
||||
},
|
||||
emits: ["blur", "input", "update:modelValue", "change", "focus", "clear"],
|
||||
setup(__props, { emit }) {
|
||||
@ -105,14 +106,20 @@ const _sfc_main = defineComponent({
|
||||
type.value = props.type;
|
||||
});
|
||||
watch(() => props.modelValue, () => {
|
||||
if (props.qfw && currentValue.value.indexOf(",") != -1) {
|
||||
return;
|
||||
}
|
||||
currentValue.value = String(props.modelValue == null ? "" : props.modelValue);
|
||||
});
|
||||
const onInput = function(event) {
|
||||
const inputElement = event.target;
|
||||
const value = inputElement.value;
|
||||
let value = inputElement.value;
|
||||
emit("input", value);
|
||||
if (composing.value)
|
||||
return;
|
||||
if (props.qfw) {
|
||||
value = value.replace(/,/g, "");
|
||||
}
|
||||
emit("update:modelValue", value);
|
||||
};
|
||||
const onClear = () => {
|
||||
@ -120,11 +127,15 @@ const _sfc_main = defineComponent({
|
||||
emit("clear");
|
||||
};
|
||||
const onFocus = (event) => {
|
||||
currentValue.value = new String(props.modelValue).replace(/,/g, "");
|
||||
emit("focus", event);
|
||||
};
|
||||
const onChange = (event) => {
|
||||
const inputElement = event.target;
|
||||
const value = inputElement.value;
|
||||
let value = inputElement.value;
|
||||
if (props.qfw) {
|
||||
value = value.replace(/,/g, "");
|
||||
}
|
||||
emit("change", value);
|
||||
};
|
||||
const onBlur = (event) => {
|
||||
@ -143,6 +154,10 @@ const _sfc_main = defineComponent({
|
||||
if (props.min && props.min > Number(value))
|
||||
value = props.min.toString();
|
||||
}
|
||||
if (props.qfw) {
|
||||
value = value.replace(/,/g, "");
|
||||
}
|
||||
currentValue.value = new String(props.modelValue).toLocaleString();
|
||||
emit("update:modelValue", value);
|
||||
};
|
||||
const onCompositionstart = () => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, useSlots, openBlock, createElementBlock, createElementVNode, renderSlot, normalizeClass, toDisplayString, unref, Fragment, createTextVNode } from "vue";
|
||||
import { c as convertSlotName, w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, useSlots, getCurrentInstance, openBlock, createElementBlock, createElementVNode, renderSlot, unref, normalizeClass, toDisplayString, Fragment, createTextVNode } from "vue";
|
||||
var index = /* @__PURE__ */ (() => '.lay-page-header{display:flex;line-height:24px}.lay-page-header__left{display:flex;cursor:pointer;margin-right:40px;position:relative;color:var(--global-neutral-color-8)}.lay-page-header__left:after{content:"";position:absolute;width:1px;height:16px;right:-20px;top:50%;transform:translateY(-50%);background-color:var(--global-neutral-color-8)}.lay-page-header__left:hover .layui-icon-return,.lay-page-header__left:hover .lay-page-header__title{color:var(--global-checked-color)!important}.lay-page-header__left .layui-icon-return{font-size:14px;margin-right:6px;align-self:center}.lay-page-header__title{font-size:14px}.lay-page-header__content{font-size:18px;color:#393d49}\n')();
|
||||
const _hoisted_1 = { class: "lay-page-header" };
|
||||
const _hoisted_2 = { class: "lay-page-header__title" };
|
||||
@ -17,13 +17,15 @@ const _sfc_main = defineComponent({
|
||||
emits: ["back"],
|
||||
setup(__props, { emit: emits }) {
|
||||
const slots = useSlots();
|
||||
const instance = getCurrentInstance();
|
||||
const backIconSlotName = convertSlotName(instance, "backIcon");
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createElementVNode("div", {
|
||||
class: "lay-page-header__left",
|
||||
onClick: _cache[0] || (_cache[0] = ($event) => emits("back"))
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "backIcon", {}, () => [
|
||||
renderSlot(_ctx.$slots, unref(backIconSlotName), {}, () => [
|
||||
createElementVNode("i", {
|
||||
class: normalizeClass(["layui-icon", [__props.backIcon]])
|
||||
}, null, 2)
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -16,6 +16,7 @@ const _sfc_main = defineComponent({
|
||||
const props = __props;
|
||||
const searchValue = inject("searchValue");
|
||||
const selectRef = inject("selectRef");
|
||||
const searchMethod = inject("searchMethod");
|
||||
const selectedValue = inject("selectedValue");
|
||||
const multiple = inject("multiple");
|
||||
const checkboxRef = ref();
|
||||
@ -39,8 +40,13 @@ const _sfc_main = defineComponent({
|
||||
return selectedValue.value === props.value;
|
||||
}
|
||||
});
|
||||
const first = ref(true);
|
||||
const display = computed(() => {
|
||||
var _a, _b;
|
||||
if (searchMethod && !first.value) {
|
||||
return searchMethod(searchValue.value, props);
|
||||
}
|
||||
first.value = false;
|
||||
return ((_a = props.keyword) == null ? void 0 : _a.toString().indexOf(searchValue.value)) > -1 || ((_b = props.label) == null ? void 0 : _b.toString().indexOf(searchValue.value)) > -1;
|
||||
});
|
||||
const classes = computed(() => {
|
||||
|
||||
@ -1,5 +1,5 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, useSlots, ref, reactive, computed, provide, shallowRef, watch, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, unref, createCommentVNode, Fragment, renderList, withModifiers, createBlock, createVNode, renderSlot, h, createTextVNode } from "vue";
|
||||
import { b as isArrayChildren, w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, useSlots, reactive, ref, computed, provide, shallowRef, watch, nextTick, onMounted, openBlock, createElementBlock, normalizeClass, createElementVNode, normalizeStyle, unref, createCommentVNode, Fragment, renderList, withModifiers, createBlock, createVNode, renderSlot, h, createTextVNode } from "vue";
|
||||
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
||||
import { T as TabInjectKey, _ as _sfc_main$1 } from "../tabItem/index2.js";
|
||||
import { R as RenderFunction } from "../dropdown/index2.js";
|
||||
@ -26,15 +26,14 @@ const _sfc_main = defineComponent({
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const slot = useSlots();
|
||||
const childrens = ref([]);
|
||||
const tabMap = reactive(/* @__PURE__ */ new Map());
|
||||
const childrens = ref([]);
|
||||
const setItemInstanceBySlot = function(nodes) {
|
||||
nodes == null ? void 0 : nodes.map((item) => {
|
||||
let component2 = item.type;
|
||||
if (item.type.toString() == "Symbol(Fragment)") {
|
||||
if (isArrayChildren(item, item.children)) {
|
||||
setItemInstanceBySlot(item.children);
|
||||
} else {
|
||||
if (component2.name == _sfc_main$1.name) {
|
||||
if (item.type.name == _sfc_main$1.name) {
|
||||
childrens.value.push(item);
|
||||
}
|
||||
}
|
||||
@ -226,6 +225,20 @@ const _sfc_main = defineComponent({
|
||||
}
|
||||
}
|
||||
};
|
||||
const horizontalScroll = (e) => {
|
||||
var _a, _b;
|
||||
e.preventDefault();
|
||||
const navSize = getNavSize();
|
||||
const containerSize = navRef.value[`offset${sizeName.value}`];
|
||||
const currentOffset = navOffset.value;
|
||||
const scrollNextSize = (_b = (_a = scrollNextRef.value) == null ? void 0 : _a[`offset${sizeName.value}`]) != null ? _b : 0;
|
||||
const direction = Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
|
||||
const distance = 50 * (direction > 0 ? 1 : -1);
|
||||
const newOffset = Math.max(currentOffset + distance, 0);
|
||||
if (navSize - currentOffset <= containerSize - scrollNextSize && direction > 0)
|
||||
return;
|
||||
navOffset.value = newOffset;
|
||||
};
|
||||
const renderTabIcon = (attrs) => {
|
||||
const tab = attrs.tabData;
|
||||
if (typeof tab.icon === "function") {
|
||||
@ -250,7 +263,7 @@ const _sfc_main = defineComponent({
|
||||
}
|
||||
};
|
||||
useResizeObserver(navRef, update);
|
||||
watch(tabMap, function() {
|
||||
watch(tabMap, () => {
|
||||
childrens.value = [];
|
||||
setItemInstanceBySlot(slot.default && slot.default());
|
||||
}, { immediate: true });
|
||||
@ -283,6 +296,7 @@ const _sfc_main = defineComponent({
|
||||
createElementVNode("ul", {
|
||||
ref_key: "navRef",
|
||||
ref: navRef,
|
||||
onWheel: horizontalScroll,
|
||||
class: normalizeClass([
|
||||
"layui-tab-title",
|
||||
props.tabPosition ? `is-${__props.tabPosition}` : ""
|
||||
@ -320,7 +334,7 @@ const _sfc_main = defineComponent({
|
||||
}, null, 8, _hoisted_2)) : createCommentVNode("", true)
|
||||
], 10, _hoisted_1);
|
||||
}), 128))
|
||||
], 6),
|
||||
], 38),
|
||||
scrollable.value ? (openBlock(), createElementBlock("span", {
|
||||
key: 0,
|
||||
ref_key: "scrollPrevRef",
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
.layui-tag{--layui-tag-bg-color: #fafafa;--layui-tag-border-color: #f0f0f0;--layui-tag-hover-color: #FFF;--layui-tag-text-color: currentColor;display:inline-flex;align-items:baseline;vertical-align:middle;box-sizing:border-box;height:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag-ellipsis .layui-tag-text{display:inline-block;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: #009688;--layui-tag-border-color: transparent;--layui-tag-hover-color: #009688;--layui-tag-text-color: #FFF}.layui-tag-primary-bordered{--layui-tag-border-color: #009688}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: #e6f5f3;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e6f5f3;--layui-tag-text-color: #009688}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: #80cbc4}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #009688;--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: #009688}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #FFF}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: #e9f5ff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e9f5ff;--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: #8fcfff}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #FFF}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: #fff8e6;--layui-tag-border-color: transparent;--layui-tag-hover-color: #fff8e6;--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffdc80}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #FFF}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: #ffeee9;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffeee9;--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffab91}.layui-tag-danger.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ff5722;--layui-tag-border-color: transparent}.layui-tag-danger.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ff5722}
|
||||
.layui-tag{--layui-tag-bg-color: #fafafa;--layui-tag-border-color: #f0f0f0;--layui-tag-hover-color: #FFF;--layui-tag-text-color: currentColor;display:inline-flex;align-items:baseline;vertical-align:middle;box-sizing:border-box;height:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag .layui-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: #009688;--layui-tag-border-color: transparent;--layui-tag-hover-color: #009688;--layui-tag-text-color: #FFF}.layui-tag-primary-bordered{--layui-tag-border-color: #009688}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: #e6f5f3;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e6f5f3;--layui-tag-text-color: #009688}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: #80cbc4}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #009688;--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: #009688}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #FFF}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: #e9f5ff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e9f5ff;--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: #8fcfff}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #FFF}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: #fff8e6;--layui-tag-border-color: transparent;--layui-tag-hover-color: #fff8e6;--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffdc80}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #FFF}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: #ffeee9;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffeee9;--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffab91}.layui-tag-danger.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ff5722;--layui-tag-border-color: transparent}.layui-tag-danger.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ff5722}
|
||||
|
||||
@ -1,13 +1,14 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createCommentVNode, withModifiers, createVNode } from "vue";
|
||||
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createCommentVNode, createElementVNode, withModifiers, createVNode } from "vue";
|
||||
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
||||
import { T as TinyColor } from "../_chunks/@ctrl/index.js";
|
||||
var index = /* @__PURE__ */ (() => ".layui-tag{--layui-tag-bg-color: #fafafa;--layui-tag-border-color: #f0f0f0;--layui-tag-hover-color: #FFF;--layui-tag-text-color: currentColor;display:inline-flex;align-items:baseline;vertical-align:middle;box-sizing:border-box;height:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag-ellipsis .layui-tag-text{display:inline-block;white-space:nowrap;word-wrap:normal;overflow:hidden;text-overflow:ellipsis}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: #009688;--layui-tag-border-color: transparent;--layui-tag-hover-color: #009688;--layui-tag-text-color: #FFF}.layui-tag-primary-bordered{--layui-tag-border-color: #009688}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: #e6f5f3;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e6f5f3;--layui-tag-text-color: #009688}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: #80cbc4}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #009688;--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: #009688}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #FFF}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: #e9f5ff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e9f5ff;--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: #8fcfff}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #FFF}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: #fff8e6;--layui-tag-border-color: transparent;--layui-tag-hover-color: #fff8e6;--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffdc80}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #FFF}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: #ffeee9;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffeee9;--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffab91}.layui-tag-danger.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ff5722;--layui-tag-border-color: transparent}.layui-tag-danger.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ff5722}\n")();
|
||||
var index = /* @__PURE__ */ (() => ".layui-tag{--layui-tag-bg-color: #fafafa;--layui-tag-border-color: #f0f0f0;--layui-tag-hover-color: #FFF;--layui-tag-text-color: currentColor;display:inline-flex;align-items:baseline;vertical-align:middle;box-sizing:border-box;height:26px;line-height:26px;padding:0 8px;font-size:14px;font-weight:500;color:var(--layui-tag-text-color);background-color:var(--layui-tag-bg-color);border-width:1px;border-style:solid;border-color:transparent;border-radius:var(--global-border-radius)}.layui-tag-icon{margin-right:4px}.layui-tag-bordered{border-color:var(--layui-tag-border-color)}.layui-tag-disabled{opacity:.4;cursor:not-allowed}.layui-tag-disabled .layui-tag-close-icon .layui-icon:hover{cursor:not-allowed!important;opacity:1}.layui-tag-shap-square{border-radius:var(--global-border-radius)}.layui-tag-shap-round{border-radius:12px}.layui-tag .layui-tag-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.layui-tag .layui-tag-close-icon{margin-left:4px;font-size:14px}.layui-tag .layui-tag-close-icon .layui-icon:hover{cursor:pointer;opacity:.5}.layui-tag-size-lg{height:30px;font-size:14px;line-height:30px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-md{height:26px;font-size:14px;line-height:26px}.layui-tag .layui-icon{font-size:14px}.layui-tag-size-sm{height:22px;font-size:12px;line-height:22px}.layui-tag-size-xs{height:18px;font-size:12px;line-height:18px}.layui-tag .layui-icon{font-size:12px}.layui-tag-primary{--layui-tag-bg-color: #009688;--layui-tag-border-color: transparent;--layui-tag-hover-color: #009688;--layui-tag-text-color: #FFF}.layui-tag-primary-bordered{--layui-tag-border-color: #009688}.layui-tag-primary.layui-tag-variant-light{--layui-tag-bg-color: #e6f5f3;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e6f5f3;--layui-tag-text-color: #009688}.layui-tag-primary.layui-tag-variant-light-bordered{--layui-tag-border-color: #80cbc4}.layui-tag-primary.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #009688;--layui-tag-border-color: transparent}.layui-tag-primary.layui-tag-variant-plain-bordered{--layui-tag-border-color: #009688}.layui-tag-normal{--layui-tag-bg-color: #1e9fff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #1e9fff;--layui-tag-text-color: #FFF}.layui-tag-normal-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light{--layui-tag-bg-color: #e9f5ff;--layui-tag-border-color: transparent;--layui-tag-hover-color: #e9f5ff;--layui-tag-text-color: #1e9fff}.layui-tag-normal.layui-tag-variant-light-bordered{--layui-tag-border-color: #8fcfff}.layui-tag-normal.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #1e9fff;--layui-tag-border-color: transparent}.layui-tag-normal.layui-tag-variant-plain-bordered{--layui-tag-border-color: #1e9fff}.layui-tag-warm{--layui-tag-bg-color: #ffb800;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffb800;--layui-tag-text-color: #FFF}.layui-tag-warm-bordered{--layui-tag-border-color: #ffb800}.layui-tag-warm.layui-tag-variant-light{--layui-tag-bg-color: #fff8e6;--layui-tag-border-color: transparent;--layui-tag-hover-color: #fff8e6;--layui-tag-text-color: #ffb800}.layui-tag-warm.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffdc80}.layui-tag-warm.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ffb800;--layui-tag-border-color: transparent}.layui-tag-warm.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ffb800}.layui-tag-danger{--layui-tag-bg-color: #ff5722;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ff5722;--layui-tag-text-color: #FFF}.layui-tag-danger-bordered{--layui-tag-border-color: #ff5722}.layui-tag-danger.layui-tag-variant-light{--layui-tag-bg-color: #ffeee9;--layui-tag-border-color: transparent;--layui-tag-hover-color: #ffeee9;--layui-tag-text-color: #ff5722}.layui-tag-danger.layui-tag-variant-light-bordered{--layui-tag-border-color: #ffab91}.layui-tag-danger.layui-tag-variant-plain{--layui-tag-bg-color: transparent;--layui-tag-hover-color: transparent;--layui-tag-text-color: #ff5722;--layui-tag-border-color: transparent}.layui-tag-danger.layui-tag-variant-plain-bordered{--layui-tag-border-color: #ff5722}\n")();
|
||||
const _hoisted_1 = {
|
||||
key: 0,
|
||||
class: "layui-tag-icon"
|
||||
};
|
||||
const _hoisted_2 = ["onClick"];
|
||||
const _hoisted_2 = { class: "layui-tag-text" };
|
||||
const _hoisted_3 = ["onClick"];
|
||||
const __default__ = {
|
||||
name: "LayTag"
|
||||
};
|
||||
@ -43,15 +44,14 @@ const _sfc_main = defineComponent({
|
||||
[`layui-tag-${props.type}-bordered`]: props.bordered,
|
||||
[`layui-tag-${props.type}`]: props.type,
|
||||
"layui-tag-bordered": props.bordered,
|
||||
"layui-tag-disabled": props.disabled,
|
||||
"layui-tag-ellipsis": props.maxWidth
|
||||
"layui-tag-disabled": props.disabled
|
||||
}
|
||||
]);
|
||||
const styleTag = computed(() => {
|
||||
var _a;
|
||||
return [
|
||||
{
|
||||
"max-width": (_a = props.maxWidth) != null ? _a : "unset",
|
||||
"max-width": (_a = props.maxWidth) != null ? _a : "100%",
|
||||
...useTagCustomStyle(props).value
|
||||
}
|
||||
];
|
||||
@ -99,22 +99,18 @@ const _sfc_main = defineComponent({
|
||||
_ctx.$slots.icon ? (openBlock(), createElementBlock("span", _hoisted_1, [
|
||||
renderSlot(_ctx.$slots, "icon")
|
||||
])) : createCommentVNode("", true),
|
||||
__props.maxWidth ? (openBlock(), createElementBlock("span", {
|
||||
key: 1,
|
||||
style: normalizeStyle(unref(styleTag)),
|
||||
class: "layui-tag-text"
|
||||
}, [
|
||||
createElementVNode("span", _hoisted_2, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
], 4)) : renderSlot(_ctx.$slots, "default", { key: 2 }),
|
||||
]),
|
||||
__props.closable ? (openBlock(), createElementBlock("span", {
|
||||
key: 3,
|
||||
key: 1,
|
||||
class: "layui-tag-close-icon",
|
||||
onClick: withModifiers(handleClose, ["stop"])
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "close-icon", {}, () => [
|
||||
createVNode(unref(_sfc_main$2E), { type: "layui-icon-close" })
|
||||
])
|
||||
], 8, _hoisted_2)) : createCommentVNode("", true)
|
||||
], 8, _hoisted_3)) : createCommentVNode("", true)
|
||||
], 6)) : createCommentVNode("", true);
|
||||
};
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -1 +1 @@
|
||||
:root{--textarea-border-radius: var(--global-border-radius);--textarea-border-color: var(--global-neutral-color-3)}.layui-textarea{border-width:1px;border-style:solid;background-color:#fff;color:#000000d9;border-radius:var(--textarea-border-radius);border-color:var(--textarea-border-color);display:block;width:100%;height:auto;line-height:20px;min-height:100px;padding:6px 10px;resize:vertical;position:relative}.layui-textarea-wrapper{position:relative}.layui-textarea:hover,.layui-textarea:focus{border-color:#d2d2d2!important}.layui-textarea-clear{position:absolute;color:#00000073;right:10px;top:10px}.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-texterea-count{color:inherit;white-space:nowrap;pointer-events:none;text-align:right;margin-top:4px}.layui-textarea-disabled{cursor:not-allowed!important;opacity:.6}
|
||||
:root{--textarea-border-radius: var(--global-border-radius);--textarea-border-color: var(--global-neutral-color-3)}.layui-textarea{border-width:1px;border-style:solid;background-color:#fff;color:#000000d9;border-radius:var(--textarea-border-radius);border-color:var(--textarea-border-color);display:block;width:100%;height:auto;line-height:20px;min-height:100px;padding:6px 10px;resize:vertical;position:relative;transition:none;-webkit-transition:none}.layui-textarea-wrapper{position:relative}.layui-textarea:hover,.layui-textarea:focus{border-color:#d2d2d2!important}.layui-textarea-clear{position:absolute;color:#00000073;right:10px;top:10px}.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-texterea-count{color:inherit;white-space:nowrap;pointer-events:none;text-align:right;margin-top:4px}.layui-textarea-disabled{cursor:not-allowed!important;opacity:.6}
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, ref, computed, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, createCommentVNode, toDisplayString } from "vue";
|
||||
import { defineComponent, ref, computed, watch, openBlock, createElementBlock, createElementVNode, normalizeClass, unref, createVNode, createCommentVNode, toDisplayString } from "vue";
|
||||
import { _ as _sfc_main$2E } from "../checkbox/index2.js";
|
||||
var index = /* @__PURE__ */ (() => ":root{--textarea-border-radius: var(--global-border-radius);--textarea-border-color: var(--global-neutral-color-3)}.layui-textarea{border-width:1px;border-style:solid;background-color:#fff;color:#000000d9;border-radius:var(--textarea-border-radius);border-color:var(--textarea-border-color);display:block;width:100%;height:auto;line-height:20px;min-height:100px;padding:6px 10px;resize:vertical;position:relative}.layui-textarea-wrapper{position:relative}.layui-textarea:hover,.layui-textarea:focus{border-color:#d2d2d2!important}.layui-textarea-clear{position:absolute;color:#00000073;right:10px;top:10px}.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-texterea-count{color:inherit;white-space:nowrap;pointer-events:none;text-align:right;margin-top:4px}.layui-textarea-disabled{cursor:not-allowed!important;opacity:.6}\n")();
|
||||
import { g as isObject } from "../_chunks/@vueuse/index.js";
|
||||
var index = /* @__PURE__ */ (() => ":root{--textarea-border-radius: var(--global-border-radius);--textarea-border-color: var(--global-neutral-color-3)}.layui-textarea{border-width:1px;border-style:solid;background-color:#fff;color:#000000d9;border-radius:var(--textarea-border-radius);border-color:var(--textarea-border-color);display:block;width:100%;height:auto;line-height:20px;min-height:100px;padding:6px 10px;resize:vertical;position:relative;transition:none;-webkit-transition:none}.layui-textarea-wrapper{position:relative}.layui-textarea:hover,.layui-textarea:focus{border-color:#d2d2d2!important}.layui-textarea-clear{position:absolute;color:#00000073;right:10px;top:10px}.layui-textarea::-webkit-input-placeholder{line-height:1.3}.layui-texterea-count{color:inherit;white-space:nowrap;pointer-events:none;text-align:right;margin-top:4px}.layui-textarea-disabled{cursor:not-allowed!important;opacity:.6}\n")();
|
||||
const _hoisted_1 = { class: "layui-textarea-wrapper" };
|
||||
const _hoisted_2 = ["value", "placeholder", "name", "disabled", "maxlength"];
|
||||
const _hoisted_3 = {
|
||||
@ -24,11 +25,13 @@ const _sfc_main = defineComponent({
|
||||
disabled: { type: Boolean },
|
||||
showCount: { type: Boolean },
|
||||
allowClear: { type: Boolean },
|
||||
maxlength: null
|
||||
maxlength: null,
|
||||
autosize: { type: [Boolean, Object] }
|
||||
},
|
||||
emits: ["blur", "input", "update:modelValue", "change", "focus", "clear"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const textareaRef = ref(null);
|
||||
const composing = ref(false);
|
||||
const onInput = function(event) {
|
||||
const inputElement = event.target;
|
||||
@ -71,9 +74,26 @@ const _sfc_main = defineComponent({
|
||||
}
|
||||
return count;
|
||||
});
|
||||
watch([() => props.modelValue, textareaRef], () => {
|
||||
var _a, _b;
|
||||
if (!textareaRef.value || !props.autosize)
|
||||
return;
|
||||
const height = ((_a = textareaRef.value) == null ? void 0 : _a.scrollHeight) + 2;
|
||||
if (isObject(props.autosize)) {
|
||||
const { minHeight, maxHeight } = props.autosize;
|
||||
if (height < minHeight || height > maxHeight)
|
||||
return;
|
||||
}
|
||||
textareaRef.value.style.height = "1px";
|
||||
textareaRef.value.style.height = `${((_b = textareaRef.value) == null ? void 0 : _b.scrollHeight) + 2}px`;
|
||||
}, {
|
||||
immediate: true
|
||||
});
|
||||
return (_ctx, _cache) => {
|
||||
return openBlock(), createElementBlock("div", _hoisted_1, [
|
||||
createElementVNode("textarea", {
|
||||
ref_key: "textareaRef",
|
||||
ref: textareaRef,
|
||||
class: normalizeClass(["layui-textarea", { "layui-textarea-disabled": __props.disabled }]),
|
||||
value: __props.modelValue,
|
||||
placeholder: __props.placeholder,
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
730
lib/index.js
730
lib/index.js
File diff suppressed because one or more lines are too long
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@layui/layui-vue",
|
||||
"version": "1.7.7",
|
||||
"version": "1.7.11",
|
||||
"author": "就眠儀式",
|
||||
"license": "MIT",
|
||||
"description": "a component library for Vue 3 base on layui-vue",
|
||||
|
||||
@ -31,7 +31,9 @@
|
||||
:size="size"
|
||||
@clear="onClear"
|
||||
></lay-input>
|
||||
<slot v-else></slot>
|
||||
<div class="slot-area" v-else>
|
||||
<slot></slot>
|
||||
</div>
|
||||
|
||||
<template #content>
|
||||
<div class="layui-cascader-panel">
|
||||
@ -137,12 +139,19 @@ watch(
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
if (props.modelValue === null || props.modelValue === "") {
|
||||
onClear();
|
||||
if (watchModelValue.value) {
|
||||
if (props.modelValue === null || props.modelValue === "") {
|
||||
onClear();
|
||||
} else {
|
||||
updateDisplayByModelValue();
|
||||
}
|
||||
setTimeout(() => {
|
||||
watchModelValue.value = true;
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
const watchModelValue = ref(true);
|
||||
const treeData = ref<any>([]);
|
||||
const initTreeData = () => {
|
||||
let treeLvNum = getMaxFloor(props.options);
|
||||
@ -159,31 +168,28 @@ const initTreeData = () => {
|
||||
};
|
||||
}
|
||||
}
|
||||
updateDisplayByModelValue();
|
||||
};
|
||||
|
||||
function updateDisplayByModelValue() {
|
||||
if (props.modelValue) {
|
||||
try {
|
||||
let valueData = props.modelValue.split(props.decollator);
|
||||
let data: any[] = [];
|
||||
for (let index = 0; index < treeData.value.length; index++) {
|
||||
const element = treeData.value[index];
|
||||
const nowValue = valueData[index];
|
||||
for (let i = 0; i < element.length; i++) {
|
||||
const ele = element[i];
|
||||
if (nowValue === ele.value) {
|
||||
data.push(ele);
|
||||
element.selectIndex = i;
|
||||
}
|
||||
for (let index = 0; index < valueData.length; index++) {
|
||||
const element = valueData[index];
|
||||
let selectIndex = treeData.value[index].data.findIndex(
|
||||
(e: { value: string }) => e.value === element
|
||||
);
|
||||
if (selectIndex == -1) {
|
||||
break;
|
||||
}
|
||||
selectBar(treeData.value[index].data[selectIndex], selectIndex, index);
|
||||
}
|
||||
displayValue.value = data
|
||||
.map((e) => {
|
||||
return e.label;
|
||||
})
|
||||
.join(` ${props.decollator} `);
|
||||
} catch (error) {
|
||||
console.error(error);
|
||||
}
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
function getMaxFloor(treeData: any) {
|
||||
//let floor = 0;
|
||||
@ -274,6 +280,7 @@ const selectBar = (item: any, selectIndex: number, parentIndex: number) => {
|
||||
return e.value;
|
||||
})
|
||||
.join(props.decollator);
|
||||
watchModelValue.value = false;
|
||||
emit("update:modelValue", value);
|
||||
let evt = {
|
||||
display: displayValue.value,
|
||||
|
||||
@ -79,7 +79,9 @@
|
||||
width: 29px;
|
||||
height: 28px;
|
||||
position: absolute;
|
||||
border: 1px solid var(--global-neutral-color-6);
|
||||
border-top: 1px solid var(--global-neutral-color-6);
|
||||
border-bottom: 1px solid var(--global-neutral-color-6);
|
||||
border-right: 1px solid var(--global-neutral-color-6);
|
||||
border-radius: 0 2px 2px 0;
|
||||
color: #fff;
|
||||
font-size: 20px;
|
||||
|
||||
@ -20,7 +20,6 @@ import {
|
||||
cloneVNode,
|
||||
useAttrs,
|
||||
StyleValue,
|
||||
PropType,
|
||||
} from "vue";
|
||||
import {
|
||||
computed,
|
||||
@ -45,9 +44,8 @@ import {
|
||||
DropdownContext,
|
||||
} from "./interface";
|
||||
import TeleportWrapper from "../_components/teleportWrapper.vue";
|
||||
import { useFirstElement, isScrollElement, getScrollElements } from "./util";
|
||||
import RenderFunction, { RenderFunc } from "../_components/renderFunction";
|
||||
import { transformPlacement } from "./util";
|
||||
import { useFirstElement, getScrollElements, transformPlacement } from "./util";
|
||||
import RenderFunction from "../_components/renderFunction";
|
||||
|
||||
export type DropdownTrigger = "click" | "hover" | "focus" | "contextMenu";
|
||||
|
||||
@ -105,7 +103,6 @@ const dropdownCtx = inject<DropdownContext | undefined>(
|
||||
undefined
|
||||
);
|
||||
const { children, firstElement: dropdownRef } = useFirstElement();
|
||||
//const dropdownRef = shallowRef<HTMLElement | undefined>();
|
||||
const contentRef = shallowRef<HTMLElement | undefined>();
|
||||
const contentStyle = ref<CSSProperties>({});
|
||||
const { width: windowWidth, height: windowHeight } = useWindowSize();
|
||||
|
||||
@ -1,27 +1,12 @@
|
||||
import { DropdownPlacement } from "./interface";
|
||||
|
||||
import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
|
||||
import { isArrayChildren, isComponent, isElement } from "../../utils";
|
||||
|
||||
export interface SlotChildren {
|
||||
value?: VNode[];
|
||||
}
|
||||
|
||||
// Quoted from arco-vue
|
||||
// https://github.com/arco-design/arco-design-vue/blob/main/packages/web-vue/components/_utils/vue-utils.ts
|
||||
export enum ShapeFlags {
|
||||
ELEMENT = 1,
|
||||
FUNCTIONAL_COMPONENT = 1 << 1,
|
||||
STATEFUL_COMPONENT = 1 << 2,
|
||||
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
|
||||
TEXT_CHILDREN = 1 << 3,
|
||||
ARRAY_CHILDREN = 1 << 4,
|
||||
SLOTS_CHILDREN = 1 << 5,
|
||||
TELEPORT = 1 << 6,
|
||||
SUSPENSE = 1 << 7,
|
||||
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
|
||||
COMPONENT_KEPT_ALIVE = 1 << 9,
|
||||
}
|
||||
|
||||
export const isScrollElement = (element: HTMLElement) => {
|
||||
return (
|
||||
element.scrollHeight > element.offsetHeight ||
|
||||
@ -41,24 +26,6 @@ export const getScrollElements = (container: HTMLElement | undefined) => {
|
||||
return scrollElements;
|
||||
};
|
||||
|
||||
export const isElement = (vn: VNode) => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
|
||||
};
|
||||
|
||||
export const isComponent = (
|
||||
vn: VNode,
|
||||
type?: VNodeTypes
|
||||
): type is Component => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
|
||||
};
|
||||
|
||||
export const isArrayChildren = (
|
||||
vn: VNode,
|
||||
children: VNode["children"]
|
||||
): children is VNode[] => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
|
||||
};
|
||||
|
||||
export const getChildrenArray = (vn: VNode): VNode[] | undefined => {
|
||||
if (isArrayChildren(vn, vn.children)) {
|
||||
return vn.children;
|
||||
@ -140,6 +107,5 @@ export const transformPlacement = (
|
||||
placementMap[separated[1]] || separated[1]
|
||||
}` as DropdownPlacement;
|
||||
}
|
||||
|
||||
return placement;
|
||||
};
|
||||
|
||||
@ -53,6 +53,7 @@
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.layui-iconpicker-down .layui-iconpicker-suffix .layui-icon-down {
|
||||
@ -151,6 +152,15 @@
|
||||
display: none;
|
||||
}
|
||||
|
||||
.layui-icon-picker-clear {
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
padding: 0px 0px 0px 10px;
|
||||
}
|
||||
|
||||
.layui-icon-picker-clear:hover {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.layui-colorpicker-disabled {
|
||||
opacity: 0.6;
|
||||
}
|
||||
@ -158,4 +168,8 @@
|
||||
.layui-colorpicker-disabled,
|
||||
.layui-colorpicker-disabled * {
|
||||
cursor: not-allowed !important;
|
||||
}
|
||||
|
||||
.transform{
|
||||
transform: rotate(180deg);
|
||||
}
|
||||
@ -17,6 +17,7 @@ export interface IconPickerProps {
|
||||
modelValue?: string;
|
||||
disabled?: boolean;
|
||||
showSearch?: boolean;
|
||||
allowClear?: boolean;
|
||||
contentClass?: string | Array<string | object> | object;
|
||||
contentStyle?: StyleValue;
|
||||
}
|
||||
@ -30,6 +31,7 @@ const props = withDefaults(defineProps<IconPickerProps>(), {
|
||||
const emit = defineEmits(["update:modelValue", "change"]);
|
||||
const selectedIcon = computed(() => props.modelValue);
|
||||
const dropdownRef = ref<any>(null);
|
||||
const openState = ref<boolean>(false);
|
||||
|
||||
const selectIcon = function (icon: string): void {
|
||||
emit("update:modelValue", icon);
|
||||
@ -37,6 +39,14 @@ const selectIcon = function (icon: string): void {
|
||||
dropdownRef.value?.hide();
|
||||
};
|
||||
|
||||
const onClear = function (): void {
|
||||
emit("update:modelValue", "");
|
||||
};
|
||||
|
||||
const hasContent = computed(() => {
|
||||
return props.modelValue != null && props.modelValue != "";
|
||||
});
|
||||
|
||||
const icones: Ref = ref([]);
|
||||
const total: Ref<number> = ref(icons.length);
|
||||
const totalPage: Ref<number> = ref(total.value / 12);
|
||||
@ -143,6 +153,8 @@ const searchList = (str: string, container: any) => {
|
||||
:disabled="disabled"
|
||||
:contentClass="contentClass"
|
||||
:contentStyle="contentStyle"
|
||||
@hide="openState = false"
|
||||
@show="openState = true"
|
||||
updateAtScroll
|
||||
>
|
||||
<div
|
||||
@ -152,8 +164,17 @@ const searchList = (str: string, container: any) => {
|
||||
<div class="layui-inline layui-iconpicker-main">
|
||||
<i class="layui-inline layui-icon" :class="[selectedIcon]"></i>
|
||||
</div>
|
||||
<span
|
||||
class="layui-icon-picker-clear"
|
||||
v-if="allowClear && hasContent && !disabled"
|
||||
>
|
||||
<lay-icon type="layui-icon-close-fill" @click.stop="onClear"></lay-icon>
|
||||
</span>
|
||||
<span class="layui-inline layui-iconpicker-suffix"
|
||||
><i class="layui-icon layui-icon-down layui-anim"></i
|
||||
><i
|
||||
class="layui-icon layui-icon-down"
|
||||
:class="[openState ? 'transform' : '']"
|
||||
></i
|
||||
></span>
|
||||
</div>
|
||||
<template #content>
|
||||
|
||||
@ -29,6 +29,7 @@ export interface InputProps {
|
||||
maxlength?: number;
|
||||
max?: number;
|
||||
min?: number;
|
||||
qfw?:boolean;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<InputProps>(), {
|
||||
@ -39,6 +40,7 @@ const props = withDefaults(defineProps<InputProps>(), {
|
||||
password: false,
|
||||
modelValue: "",
|
||||
size: "md",
|
||||
qfw: false
|
||||
});
|
||||
|
||||
interface InputEmits {
|
||||
@ -71,6 +73,9 @@ watch(
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
() => {
|
||||
if(props.qfw && currentValue.value.indexOf(",") != -1){
|
||||
return
|
||||
}
|
||||
currentValue.value = String(
|
||||
props.modelValue == null ? "" : props.modelValue
|
||||
);
|
||||
@ -79,9 +84,12 @@ watch(
|
||||
|
||||
const onInput = function (event: Event) {
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
const value = inputElement.value;
|
||||
let value = inputElement.value;
|
||||
emit("input", value);
|
||||
if (composing.value) return;
|
||||
if(props.qfw){
|
||||
value = value.replace(/,/g,"")
|
||||
}
|
||||
emit("update:modelValue", value);
|
||||
};
|
||||
|
||||
@ -91,12 +99,16 @@ const onClear = () => {
|
||||
};
|
||||
|
||||
const onFocus = (event: Event) => {
|
||||
currentValue.value = new String(props.modelValue).replace(/,/g,"")
|
||||
emit("focus", event);
|
||||
};
|
||||
|
||||
const onChange = (event: Event) => {
|
||||
const inputElement = event.target as HTMLInputElement;
|
||||
const value = inputElement.value;
|
||||
let value = inputElement.value;
|
||||
if(props.qfw){
|
||||
value = value.replace(/,/g,"")
|
||||
}
|
||||
emit("change", value);
|
||||
};
|
||||
|
||||
@ -115,6 +127,10 @@ const onNumberBlur = (event: Event) => {
|
||||
if (props.max && props.max < Number(value)) value = props.max.toString();
|
||||
if (props.min && props.min > Number(value)) value = props.min.toString();
|
||||
}
|
||||
if(props.qfw){
|
||||
value = value.replace(/,/g,"")
|
||||
}
|
||||
currentValue.value = new String(props.modelValue).toLocaleString()
|
||||
emit("update:modelValue", value);
|
||||
};
|
||||
|
||||
|
||||
@ -224,6 +224,6 @@ watch(
|
||||
{{ t("page.confirm") }}
|
||||
</button>
|
||||
</span>
|
||||
<span v-if="count">共{{count}}条</span>
|
||||
<span v-if="count">共{{ count }}条</span>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
<template>
|
||||
<div class="lay-page-header">
|
||||
<div class="lay-page-header__left" @click="emits('back')">
|
||||
<slot name="backIcon"
|
||||
<slot :name="backIconSlotName"
|
||||
><i class="layui-icon" :class="[backIcon]"></i
|
||||
></slot>
|
||||
<div class="lay-page-header__title">{{ backText }}</div>
|
||||
@ -19,7 +19,8 @@ export default {
|
||||
};
|
||||
</script>
|
||||
<script lang="ts" setup>
|
||||
import { useSlots } from "vue";
|
||||
import { convertSlotName } from "../../utils";
|
||||
import { getCurrentInstance, useSlots } from "vue";
|
||||
import "./index.less";
|
||||
|
||||
export interface PageHeaderProps {
|
||||
@ -34,6 +35,7 @@ const props = withDefaults(defineProps<PageHeaderProps>(), {
|
||||
});
|
||||
|
||||
const emits = defineEmits(["back"]);
|
||||
|
||||
const slots = useSlots();
|
||||
const instance = getCurrentInstance()!;
|
||||
const backIconSlotName = convertSlotName(instance, "backIcon");
|
||||
</script>
|
||||
|
||||
@ -18,6 +18,7 @@ import {
|
||||
watch,
|
||||
onUnmounted,
|
||||
StyleValue,
|
||||
Fragment,
|
||||
} from "vue";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import LayInput from "../input/index.vue";
|
||||
@ -25,12 +26,14 @@ import LayTagInput from "../tagInput/index.vue";
|
||||
import LayDropdown from "../dropdown/index.vue";
|
||||
import LaySelectOption, { SelectOptionProps } from "../selectOption/index.vue";
|
||||
import { SelectSize } from "./interface";
|
||||
import { isArrayChildren } from "../../utils";
|
||||
|
||||
export interface SelectProps {
|
||||
name?: string;
|
||||
disabled?: boolean;
|
||||
placeholder?: string;
|
||||
searchPlaceholder?: string;
|
||||
searchMethod?: Function;
|
||||
modelValue?: any;
|
||||
multiple?: boolean;
|
||||
items?: SelectOptionProps[];
|
||||
@ -73,15 +76,13 @@ var timer: any;
|
||||
|
||||
const getOption = (nodes: VNode[], newOptions: any[]) => {
|
||||
nodes?.map((item) => {
|
||||
let component = item.type as Component;
|
||||
if (item.type.toString() == "Symbol(Fragment)") {
|
||||
if (isArrayChildren(item, item.children)) {
|
||||
getOption(item.children as VNode[], newOptions);
|
||||
} else {
|
||||
if (component.name == LaySelectOption.name) {
|
||||
if ((item.type as Component).name == LaySelectOption.name) {
|
||||
if (item.children) {
|
||||
// @ts-ignore
|
||||
const label = item.children.default()[0].children;
|
||||
|
||||
if (typeof label == "string") {
|
||||
// @ts-ignore
|
||||
item.props.label = label;
|
||||
@ -122,7 +123,6 @@ const onCompositionend = (event: Event) => {
|
||||
onMounted(() => {
|
||||
intOption();
|
||||
timer = setInterval(intOption, 500);
|
||||
|
||||
watch(
|
||||
[selectedValue, options],
|
||||
() => {
|
||||
@ -178,11 +178,17 @@ const handleClear = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const handleHide = () => {
|
||||
searchValue.value = "";
|
||||
openState.value = false;
|
||||
};
|
||||
|
||||
provide("selectRef", selectRef);
|
||||
provide("openState", openState);
|
||||
provide("selectedValue", selectedValue);
|
||||
provide("searchValue", searchValue);
|
||||
provide("multiple", multiple);
|
||||
provide("searchMethod", props.searchMethod);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@ -194,22 +200,27 @@ provide("multiple", multiple);
|
||||
:contentStyle="contentStyle"
|
||||
:update-at-scroll="true"
|
||||
:autoFitWidth="true"
|
||||
@hide="openState = false"
|
||||
@hide="handleHide"
|
||||
@show="openState = true"
|
||||
>
|
||||
<lay-tag-input
|
||||
v-if="multiple"
|
||||
v-model="multipleValue"
|
||||
v-model:input-value="searchValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:collapseTagsTooltip="collapseTagsTooltip"
|
||||
:minCollapsedNum="minCollapsedNum"
|
||||
:disabledInput="true"
|
||||
:disabled="disabled"
|
||||
:disabledInput="!showSearch"
|
||||
:size="size"
|
||||
:class="{ 'layui-unselect': true }"
|
||||
@remove="handleRemove"
|
||||
@clear="handleClear"
|
||||
@input-value-change="handleSearch"
|
||||
@keyup.delete.capture.prevent.stop
|
||||
@keyup.backspace.capture.prevent.stop
|
||||
@keydown.enter.capture.prevent.stop
|
||||
>
|
||||
<template #suffix>
|
||||
<lay-icon
|
||||
@ -220,13 +231,13 @@ provide("multiple", multiple);
|
||||
</lay-tag-input>
|
||||
<lay-input
|
||||
v-else
|
||||
:modelValue="singleValue"
|
||||
:placeholder="placeholder"
|
||||
:allow-clear="allowClear"
|
||||
:readonly="!showSearch"
|
||||
:disabled="disabled"
|
||||
:class="{ 'layui-unselect': !showSearch }"
|
||||
:size="size"
|
||||
:disabled="disabled"
|
||||
:readonly="!showSearch"
|
||||
:modelValue="singleValue"
|
||||
:allow-clear="allowClear"
|
||||
:placeholder="placeholder"
|
||||
:class="{ 'layui-unselect': !showSearch }"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
@Input="handleSearch"
|
||||
@ -241,17 +252,6 @@ provide("multiple", multiple);
|
||||
</lay-input>
|
||||
<template #content>
|
||||
<dl class="layui-select-content">
|
||||
<div class="layui-select-search" v-if="multiple && showSearch">
|
||||
<lay-input
|
||||
:modelValue="searchValue"
|
||||
:placeholder="searchPlaceholder"
|
||||
@Input="handleSearch"
|
||||
@compositionstart="onCompositionstart"
|
||||
@compositionend="onCompositionend"
|
||||
prefix-icon="layui-icon-search"
|
||||
size="sm"
|
||||
></lay-input>
|
||||
</div>
|
||||
<template v-if="items">
|
||||
<lay-select-option
|
||||
v-for="(item, index) in items"
|
||||
|
||||
@ -30,6 +30,7 @@ const props = withDefaults(defineProps<SelectOptionProps>(), {
|
||||
|
||||
const searchValue: Ref<string> = inject("searchValue") as Ref<string>;
|
||||
const selectRef: Ref<HTMLElement> = inject("selectRef") as Ref<HTMLElement>;
|
||||
const searchMethod: Function = inject("searchMethod") as Function;
|
||||
const selectedValue: WritableComputedRef<any> = inject(
|
||||
"selectedValue"
|
||||
) as WritableComputedRef<any>;
|
||||
@ -59,7 +60,13 @@ const selected = computed(() => {
|
||||
}
|
||||
});
|
||||
|
||||
const first = ref(true);
|
||||
|
||||
const display = computed(() => {
|
||||
if (searchMethod && !first.value) {
|
||||
return searchMethod(searchValue.value, props);
|
||||
}
|
||||
first.value = false;
|
||||
return (
|
||||
props.keyword?.toString().indexOf(searchValue.value) > -1 ||
|
||||
props.label?.toString().indexOf(searchValue.value) > -1
|
||||
|
||||
@ -97,8 +97,6 @@
|
||||
border-bottom: 1px solid #eeeeee;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.layui-tab-title.is-right {
|
||||
border-left: 1px solid var(--global-neutral-color-3);
|
||||
}
|
||||
|
||||
@ -29,6 +29,7 @@ import {
|
||||
} from "vue";
|
||||
import { useResizeObserver } from "@vueuse/core";
|
||||
import { TabData, TabInjectKey, TabPosition } from "./interface";
|
||||
import { isArrayChildren } from "../../utils";
|
||||
|
||||
export interface TabProps {
|
||||
type?: string;
|
||||
@ -41,16 +42,15 @@ export interface TabProps {
|
||||
}
|
||||
|
||||
const slot = useSlots();
|
||||
const childrens: Ref<VNode[]> = ref([]);
|
||||
const tabMap = reactive(new Map<number, TabData>());
|
||||
const childrens: Ref<VNode[]> = ref([]);
|
||||
|
||||
const setItemInstanceBySlot = function (nodes: VNode[]) {
|
||||
nodes?.map((item) => {
|
||||
let component = item.type as Component;
|
||||
if (item.type.toString() == "Symbol(Fragment)") {
|
||||
if (isArrayChildren(item, item.children)) {
|
||||
setItemInstanceBySlot(item.children as VNode[]);
|
||||
} else {
|
||||
if (component.name == tabItem.name) {
|
||||
if ((item.type as Component).name == tabItem.name) {
|
||||
childrens.value.push(item);
|
||||
}
|
||||
}
|
||||
@ -265,6 +265,24 @@ const update = () => {
|
||||
}
|
||||
};
|
||||
|
||||
const horizontalScroll = (e: WheelEvent) => {
|
||||
e.preventDefault();
|
||||
const navSize = getNavSize();
|
||||
const containerSize = navRef.value![`offset${sizeName.value}`];
|
||||
const currentOffset = navOffset.value;
|
||||
const scrollNextSize = scrollNextRef.value?.[`offset${sizeName.value}`] ?? 0;
|
||||
const direction =
|
||||
Math.abs(e.deltaX) >= Math.abs(e.deltaY) ? e.deltaX : e.deltaY;
|
||||
const distance = 50 * (direction > 0 ? 1 : -1);
|
||||
const newOffset = Math.max(currentOffset + distance, 0);
|
||||
if (
|
||||
navSize - currentOffset <= containerSize - scrollNextSize &&
|
||||
direction > 0
|
||||
)
|
||||
return;
|
||||
navOffset.value = newOffset;
|
||||
};
|
||||
|
||||
const renderTabIcon = (attrs: Record<string, unknown>) => {
|
||||
const tab = attrs.tabData as TabData;
|
||||
if (typeof tab.icon === "function") {
|
||||
@ -293,7 +311,7 @@ useResizeObserver(navRef, update);
|
||||
|
||||
watch(
|
||||
tabMap,
|
||||
function () {
|
||||
() => {
|
||||
childrens.value = [];
|
||||
setItemInstanceBySlot((slot.default && slot.default()) as VNode[]);
|
||||
},
|
||||
@ -335,6 +353,7 @@ provide("active", active);
|
||||
>
|
||||
<ul
|
||||
ref="navRef"
|
||||
@wheel="horizontalScroll"
|
||||
:class="[
|
||||
'layui-tab-title',
|
||||
props.tabPosition ? `is-${tabPosition}` : '',
|
||||
|
||||
@ -21,7 +21,7 @@ export interface TablePageProps {
|
||||
total: number;
|
||||
limit: number;
|
||||
theme?: string;
|
||||
count?:number;
|
||||
count?: number;
|
||||
}
|
||||
|
||||
const props = withDefaults(defineProps<TablePageProps>(), {
|
||||
|
||||
@ -486,51 +486,58 @@ const radioProps = props.getRadioProps(props.data, props.index);
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
<div
|
||||
style="display: flex"
|
||||
:style="[
|
||||
{ textAlign: column.align, justifyContent: column.align },
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
<template #content>
|
||||
<lay-tooltip v-if="column.ellipsisTooltip" :isAutoShow="true">
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</template>
|
||||
</lay-tooltip>
|
||||
<slot
|
||||
v-else
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
<template #content>
|
||||
<slot
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</template>
|
||||
</lay-tooltip>
|
||||
<slot
|
||||
v-else
|
||||
:name="column.customSlot"
|
||||
:data="data"
|
||||
:column="column"
|
||||
></slot>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
|
||||
@ -558,39 +565,47 @@ const radioProps = props.getRadioProps(props.data, props.index);
|
||||
column.fixed ? `layui-table-fixed-${column.fixed}` : '',
|
||||
]"
|
||||
>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
:isAutoShow="true"
|
||||
<div
|
||||
style="display: flex"
|
||||
:style="[
|
||||
{ textAlign: column.align, justifyContent: column.align },
|
||||
]"
|
||||
>
|
||||
{{ data[column.key] }}
|
||||
</lay-tooltip>
|
||||
<span v-else> {{ data[column.key] }} </span>
|
||||
<span
|
||||
v-if="expandSpace && columnIndex === expandIndex"
|
||||
:style="{ 'margin-right': currentIndentSize + 'px' }"
|
||||
></span>
|
||||
|
||||
<span
|
||||
v-if="
|
||||
expandSpace &&
|
||||
!data[childrenColumnName] &&
|
||||
!slot.expand &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon-spaced"
|
||||
></span>
|
||||
|
||||
<lay-icon
|
||||
v-if="
|
||||
(slot.expand || data[childrenColumnName]) &&
|
||||
columnIndex === expandIndex
|
||||
"
|
||||
class="layui-table-cell-expand-icon"
|
||||
:type="expandIconType"
|
||||
@click="handleExpand"
|
||||
></lay-icon>
|
||||
|
||||
<lay-tooltip
|
||||
v-if="column.ellipsisTooltip"
|
||||
:content="data[column.key]"
|
||||
:isAutoShow="true"
|
||||
>
|
||||
{{ data[column.key] }}
|
||||
</lay-tooltip>
|
||||
|
||||
<span v-else> {{ data[column.key] }} </span>
|
||||
</div>
|
||||
</td>
|
||||
</template>
|
||||
</template>
|
||||
|
||||
@ -44,12 +44,11 @@
|
||||
|
||||
.layui-table-mend,
|
||||
.layui-table-tool,
|
||||
.layui-table-total,
|
||||
.layui-table-patch,
|
||||
.layui-table-click,
|
||||
.layui-table-hover,
|
||||
.layui-table-header,
|
||||
.layui-table-total tr,
|
||||
.layui-table-total td,
|
||||
.layui-table thead tr,
|
||||
.layui-table tbody tr:hover td,
|
||||
.layui-table.layui-table-even tr:nth-child(even) td {
|
||||
@ -305,6 +304,11 @@
|
||||
right: -1px;
|
||||
}
|
||||
|
||||
.layui-table-tool-self {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.layui-table-col-set {
|
||||
position: absolute;
|
||||
right: 0;
|
||||
|
||||
@ -32,7 +32,7 @@ export interface TableProps {
|
||||
page?: Recordable;
|
||||
columns: Recordable[];
|
||||
dataSource: Recordable[];
|
||||
defaultToolbar?: boolean | Recordable[];
|
||||
defaultToolbar?: boolean | any[];
|
||||
selectedKey?: string;
|
||||
selectedKeys?: Recordable[];
|
||||
indentSize?: number;
|
||||
@ -60,6 +60,7 @@ const props = withDefaults(defineProps<TableProps>(), {
|
||||
childrenColumnName: "children",
|
||||
dataSource: () => [],
|
||||
selectedKeys: () => [],
|
||||
defaultToolbar: false,
|
||||
selectedKey: "",
|
||||
maxHeight: "auto",
|
||||
even: false,
|
||||
@ -518,9 +519,6 @@ const childrenExpandSpace = computed(() => {
|
||||
);
|
||||
});
|
||||
|
||||
/**
|
||||
* @remark 排除 hide 列
|
||||
*/
|
||||
const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||
if (column.fixed) {
|
||||
if (column.fixed == "left") {
|
||||
@ -563,6 +561,55 @@ const renderFixedStyle = (column: any, columnIndex: number) => {
|
||||
return {} as StyleValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* @remark 排除 hide 列
|
||||
*/
|
||||
const renderHeadFixedStyle = (
|
||||
column: any,
|
||||
columnIndex: number,
|
||||
tableHeadColumn: any[]
|
||||
) => {
|
||||
if (column.fixed) {
|
||||
if (column.fixed == "left") {
|
||||
var left = 0;
|
||||
for (var i = 0; i < columnIndex; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "left" &&
|
||||
tableColumnKeys.value.includes(props.columns[i].key)
|
||||
) {
|
||||
left = left + Number(props.columns[i]?.width?.replace("px", ""));
|
||||
}
|
||||
}
|
||||
return { left: `${left}px` } as StyleValue;
|
||||
} else {
|
||||
var right = 0;
|
||||
for (var i = columnIndex + 1; i < props.columns.length; i++) {
|
||||
if (
|
||||
props.columns[i].fixed &&
|
||||
props.columns[i].fixed == "right" &&
|
||||
tableColumnKeys.value.includes(props.columns[i].key)
|
||||
) {
|
||||
right = right + Number(props.columns[i]?.width?.replace("px", ""));
|
||||
}
|
||||
}
|
||||
return { right: `${right}px` } as StyleValue;
|
||||
}
|
||||
} else {
|
||||
var isLast = true;
|
||||
for (var i = columnIndex + 1; i < tableHeadColumn.length; i++) {
|
||||
if (
|
||||
tableHeadColumn[i].fixed == undefined &&
|
||||
tableColumnKeys.value.includes(tableHeadColumn[i].key)
|
||||
) {
|
||||
isLast = false;
|
||||
}
|
||||
}
|
||||
return isLast ? ({ "border-right": "none" } as StyleValue) : {};
|
||||
}
|
||||
return {} as StyleValue;
|
||||
};
|
||||
|
||||
/**
|
||||
* @remark 排除 hide 列
|
||||
*/
|
||||
@ -628,6 +675,19 @@ const totalRowMethod = (column: any, dataSource: any[]) => {
|
||||
return total;
|
||||
};
|
||||
|
||||
const showToolbar = (toolbarName: string) => {
|
||||
if (props.defaultToolbar instanceof Array) {
|
||||
return props.defaultToolbar.includes(toolbarName);
|
||||
}
|
||||
return props.defaultToolbar;
|
||||
};
|
||||
|
||||
const toolbarStyle = (toolbarName: string) => {
|
||||
if (props.defaultToolbar instanceof Array) {
|
||||
return { order: props.defaultToolbar.indexOf(toolbarName) } as StyleValue;
|
||||
}
|
||||
};
|
||||
|
||||
onBeforeUnmount(() => {
|
||||
window.onresize = null;
|
||||
});
|
||||
@ -642,7 +702,12 @@ onBeforeUnmount(() => {
|
||||
<slot name="toolbar"></slot>
|
||||
</div>
|
||||
<div v-if="defaultToolbar" class="layui-table-tool-self">
|
||||
<lay-dropdown updateAtScroll>
|
||||
<!-- 筛选 -->
|
||||
<lay-dropdown
|
||||
v-if="showToolbar('filter')"
|
||||
updateAtScroll
|
||||
:style="toolbarStyle('filter')"
|
||||
>
|
||||
<div class="layui-inline" title="筛选" lay-event>
|
||||
<i class="layui-icon layui-icon-slider"></i>
|
||||
</div>
|
||||
@ -660,15 +725,28 @@ onBeforeUnmount(() => {
|
||||
</div>
|
||||
</template>
|
||||
</lay-dropdown>
|
||||
|
||||
<!-- 导出 -->
|
||||
<div
|
||||
v-if="showToolbar('export')"
|
||||
class="layui-inline"
|
||||
title="导出"
|
||||
lay-event
|
||||
:style="toolbarStyle('export')"
|
||||
@click="exportData()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-export"></i>
|
||||
</div>
|
||||
<div class="layui-inline" title="打印" lay-event @click="print()">
|
||||
|
||||
<!-- 打印 -->
|
||||
<div
|
||||
v-if="showToolbar('print')"
|
||||
:style="toolbarStyle('print')"
|
||||
class="layui-inline"
|
||||
title="打印"
|
||||
lay-event
|
||||
@click="print()"
|
||||
>
|
||||
<i class="layui-icon layui-icon-print"></i>
|
||||
</div>
|
||||
</div>
|
||||
@ -739,7 +817,11 @@ onBeforeUnmount(() => {
|
||||
{
|
||||
textAlign: column.align,
|
||||
},
|
||||
renderFixedStyle(column, columnIndex),
|
||||
renderHeadFixedStyle(
|
||||
column,
|
||||
columnIndex,
|
||||
tableHeadColumn
|
||||
),
|
||||
]"
|
||||
>
|
||||
<template v-if="column.type == 'checkbox'">
|
||||
|
||||
@ -73,12 +73,10 @@
|
||||
}
|
||||
}
|
||||
|
||||
&-ellipsis &-text {
|
||||
display: inline-block;
|
||||
white-space: nowrap;
|
||||
word-wrap: normal;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis
|
||||
& &-text {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap
|
||||
}
|
||||
|
||||
& &-close-icon {
|
||||
|
||||
@ -6,7 +6,7 @@ export default {
|
||||
<script lang="ts" setup>
|
||||
import "./index.less";
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, nextTick, ref } from "vue";
|
||||
import { TinyColor } from "@ctrl/tinycolor";
|
||||
import { TagShape, TagType, TagVariant } from "./interface";
|
||||
|
||||
@ -49,13 +49,12 @@ const classTag = computed(() => [
|
||||
[`layui-tag-${props.type}`]: props.type,
|
||||
"layui-tag-bordered": props.bordered,
|
||||
"layui-tag-disabled": props.disabled,
|
||||
"layui-tag-ellipsis": props.maxWidth,
|
||||
},
|
||||
]);
|
||||
|
||||
const styleTag = computed(() => [
|
||||
{
|
||||
"max-width": props.maxWidth ?? "unset",
|
||||
"max-width": props.maxWidth ?? "100%",
|
||||
...useTagCustomStyle(props).value,
|
||||
},
|
||||
]);
|
||||
@ -105,10 +104,9 @@ function useTagCustomStyle(props: TagProps) {
|
||||
<span v-if="$slots.icon" class="layui-tag-icon">
|
||||
<slot name="icon" />
|
||||
</span>
|
||||
<span v-if="maxWidth" :style="styleTag" class="layui-tag-text">
|
||||
<span class="layui-tag-text">
|
||||
<slot />
|
||||
</span>
|
||||
<slot v-else />
|
||||
<span
|
||||
v-if="closable"
|
||||
class="layui-tag-close-icon"
|
||||
|
||||
@ -86,7 +86,7 @@
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
width: fit-content;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
overflow: hidden;
|
||||
|
||||
@ -108,6 +108,9 @@
|
||||
.layui-tag-input-inner-input {
|
||||
height: @@height - (@@inner-padding + @tag-input-boeder)* 2;
|
||||
vertical-align: middle;
|
||||
&:disabled {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.layui-tag-input-inner {
|
||||
|
||||
@ -300,24 +300,22 @@ defineExpose({
|
||||
</template>
|
||||
</LayToopTip>
|
||||
</template>
|
||||
<template v-if="!disabledInput">
|
||||
<input
|
||||
ref="inputRefEl"
|
||||
class="layui-tag-input-inner-input"
|
||||
:style="inputStyle"
|
||||
:disabled="disabled"
|
||||
:placeholder="placeholder"
|
||||
:readonly="readonly"
|
||||
@keydown.enter="handleEnter"
|
||||
@keyup="handleBackspaceKeyUp"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
/>
|
||||
</template>
|
||||
<input
|
||||
ref="inputRefEl"
|
||||
class="layui-tag-input-inner-input"
|
||||
:style="inputStyle"
|
||||
:disabled="disabled || disabledInput"
|
||||
:placeholder="placeholder"
|
||||
:readonly="readonly"
|
||||
@keydown.enter="handleEnter"
|
||||
@keyup="handleBackspaceKeyUp"
|
||||
@input="handleInput"
|
||||
@focus="handleFocus"
|
||||
@blur="handleBlur"
|
||||
@compositionstart="handleComposition"
|
||||
@compositionupdate="handleComposition"
|
||||
@compositionend="handleComposition"
|
||||
/>
|
||||
</span>
|
||||
<span
|
||||
v-if="allowClear && tagData?.length && !disabled"
|
||||
|
||||
@ -18,6 +18,8 @@
|
||||
padding: 6px 10px;
|
||||
resize: vertical;
|
||||
position: relative;
|
||||
transition: none;
|
||||
-webkit-transition: none;
|
||||
}
|
||||
|
||||
.layui-textarea-wrapper {
|
||||
|
||||
@ -6,7 +6,8 @@ export default {
|
||||
|
||||
<script setup lang="ts">
|
||||
import { LayIcon } from "@layui/icons-vue";
|
||||
import { computed, ref } from "vue";
|
||||
import { computed, ref, watch } from "vue";
|
||||
import { isObject } from "@vueuse/shared";
|
||||
import "./index.less";
|
||||
|
||||
export interface TextareaProps {
|
||||
@ -17,6 +18,7 @@ export interface TextareaProps {
|
||||
showCount?: boolean;
|
||||
allowClear?: boolean;
|
||||
maxlength?: number;
|
||||
autosize?: boolean | { minHeight: number; maxHeight: number };
|
||||
}
|
||||
|
||||
const props = defineProps<TextareaProps>();
|
||||
@ -31,6 +33,7 @@ interface TextareaEmits {
|
||||
}
|
||||
|
||||
const emit = defineEmits<TextareaEmits>();
|
||||
const textareaRef = ref<HTMLTextAreaElement | null>(null);
|
||||
const composing = ref(false);
|
||||
|
||||
const onInput = function (event: Event) {
|
||||
@ -78,11 +81,31 @@ const wordCount = computed(() => {
|
||||
}
|
||||
return count;
|
||||
});
|
||||
|
||||
watch(
|
||||
[() => props.modelValue, textareaRef],
|
||||
() => {
|
||||
if (!textareaRef.value || !props.autosize) return;
|
||||
const height: number = textareaRef.value?.scrollHeight + 2; // 边框
|
||||
if (isObject(props.autosize)) {
|
||||
const { minHeight, maxHeight } = props.autosize;
|
||||
if (height < minHeight || height > maxHeight) return;
|
||||
}
|
||||
textareaRef.value!.style.height = "1px";
|
||||
textareaRef.value!.style.height = `${
|
||||
textareaRef.value?.scrollHeight + 2
|
||||
}px`;
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="layui-textarea-wrapper">
|
||||
<textarea
|
||||
ref="textareaRef"
|
||||
class="layui-textarea"
|
||||
:value="modelValue"
|
||||
:placeholder="placeholder"
|
||||
|
||||
@ -29,5 +29,7 @@
|
||||
--global-neutral-color-7: #cccccc;
|
||||
|
||||
--global-neutral-color-8: #c2c2c2;
|
||||
|
||||
--darkreader-border--global-primary-color: #0d796f;
|
||||
|
||||
}
|
||||
@ -1,3 +1,4 @@
|
||||
export * from "./domUtil";
|
||||
export * from "./withInstall";
|
||||
export * from "./arrayUtil";
|
||||
export * from "./vueUtil";
|
||||
|
||||
57
src/utils/vueUtil.ts
Normal file
57
src/utils/vueUtil.ts
Normal file
@ -0,0 +1,57 @@
|
||||
import { Component, ComponentInternalInstance, VNode, VNodeTypes } from "vue";
|
||||
|
||||
export enum ShapeFlags {
|
||||
ELEMENT = 1,
|
||||
FUNCTIONAL_COMPONENT = 1 << 1,
|
||||
STATEFUL_COMPONENT = 1 << 2,
|
||||
COMPONENT = ShapeFlags.STATEFUL_COMPONENT | ShapeFlags.FUNCTIONAL_COMPONENT,
|
||||
TEXT_CHILDREN = 1 << 3,
|
||||
ARRAY_CHILDREN = 1 << 4,
|
||||
SLOTS_CHILDREN = 1 << 5,
|
||||
TELEPORT = 1 << 6,
|
||||
SUSPENSE = 1 << 7,
|
||||
COMPONENT_SHOULD_KEEP_ALIVE = 1 << 8,
|
||||
COMPONENT_KEPT_ALIVE = 1 << 9,
|
||||
}
|
||||
|
||||
export const isElement = (vn: VNode) => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ELEMENT);
|
||||
};
|
||||
|
||||
export const isComponent = (
|
||||
vn: VNode,
|
||||
type?: VNodeTypes
|
||||
): type is Component => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.COMPONENT);
|
||||
};
|
||||
|
||||
export const isArrayChildren = (
|
||||
vn: VNode,
|
||||
children: VNode["children"]
|
||||
): children is VNode[] => {
|
||||
return Boolean(vn && vn.shapeFlag & ShapeFlags.ARRAY_CHILDREN);
|
||||
};
|
||||
|
||||
/**
|
||||
* 同时支持驼峰命名和破折号命名的插槽，示例：back-icon 和 backIcon
|
||||
* @param vm 组件实例
|
||||
* @param name 插槽名
|
||||
*/
|
||||
export function convertSlotName(vm: ComponentInternalInstance, name: string) {
|
||||
const camelCaseName = camelCase(name);
|
||||
const kebabCaseName = kebabCase(name);
|
||||
return vm.slots[camelCaseName]
|
||||
? camelCaseName
|
||||
: vm.slots[kebabCaseName]
|
||||
? kebabCaseName
|
||||
: name;
|
||||
}
|
||||
|
||||
export function camelCase(str: string) {
|
||||
return str.replace(/-(\w)/g, (_, c) => (c ? c.toUpperCase() : ""));
|
||||
}
|
||||
|
||||
export function kebabCase(key: string) {
|
||||
const result = key.replace(/([A-Z])/g, " $1").trim();
|
||||
return result.split(" ").join("-").toLowerCase();
|
||||
}
|
||||
20
types/component/dropdown/util.d.ts
vendored
20
types/component/dropdown/util.d.ts
vendored
@ -1,28 +1,10 @@
|
||||
import { DropdownPlacement } from "./interface";
|
||||
import { Component, VNode, VNodeTypes } from "vue";
|
||||
import { VNode } from "vue";
|
||||
export interface SlotChildren {
|
||||
value?: VNode[];
|
||||
}
|
||||
export declare enum ShapeFlags {
|
||||
ELEMENT = 1,
|
||||
FUNCTIONAL_COMPONENT = 2,
|
||||
STATEFUL_COMPONENT = 4,
|
||||
COMPONENT = 6,
|
||||
TEXT_CHILDREN = 8,
|
||||
ARRAY_CHILDREN = 16,
|
||||
SLOTS_CHILDREN = 32,
|
||||
TELEPORT = 64,
|
||||
SUSPENSE = 128,
|
||||
COMPONENT_SHOULD_KEEP_ALIVE = 256,
|
||||
COMPONENT_KEPT_ALIVE = 512
|
||||
}
|
||||
export declare const isScrollElement: (element: HTMLElement) => boolean;
|
||||
export declare const getScrollElements: (container: HTMLElement | undefined) => HTMLElement[];
|
||||
export declare const isElement: (vn: VNode) => boolean;
|
||||
export declare const isComponent: (vn: VNode, type?: VNodeTypes) => type is Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
|
||||
export declare const isArrayChildren: (vn: VNode, children: VNode["children"]) => children is VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
export declare const getChildrenArray: (vn: VNode) => VNode[] | undefined;
|
||||
export declare const getFirstElementFromVNode: (vn: VNode) => HTMLElement | undefined;
|
||||
export declare const getFirstElementFromChildren: (children: VNode[] | undefined) => HTMLElement | undefined;
|
||||
|
||||
1
types/utils/index.d.ts
vendored
1
types/utils/index.d.ts
vendored
@ -1,3 +1,4 @@
|
||||
export * from "./domUtil";
|
||||
export * from "./withInstall";
|
||||
export * from "./arrayUtil";
|
||||
export * from "./vueUtil";
|
||||
|
||||
27
types/utils/vueUtil.d.ts
vendored
Normal file
27
types/utils/vueUtil.d.ts
vendored
Normal file
@ -0,0 +1,27 @@
|
||||
import { Component, ComponentInternalInstance, VNode, VNodeTypes } from "vue";
|
||||
export declare enum ShapeFlags {
|
||||
ELEMENT = 1,
|
||||
FUNCTIONAL_COMPONENT = 2,
|
||||
STATEFUL_COMPONENT = 4,
|
||||
COMPONENT = 6,
|
||||
TEXT_CHILDREN = 8,
|
||||
ARRAY_CHILDREN = 16,
|
||||
SLOTS_CHILDREN = 32,
|
||||
TELEPORT = 64,
|
||||
SUSPENSE = 128,
|
||||
COMPONENT_SHOULD_KEEP_ALIVE = 256,
|
||||
COMPONENT_KEPT_ALIVE = 512
|
||||
}
|
||||
export declare const isElement: (vn: VNode) => boolean;
|
||||
export declare const isComponent: (vn: VNode, type?: VNodeTypes) => type is Component<any, any, any, import("vue").ComputedOptions, import("vue").MethodOptions>;
|
||||
export declare const isArrayChildren: (vn: VNode, children: VNode["children"]) => children is VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
||||
[key: string]: any;
|
||||
}>[];
|
||||
/**
|
||||
* 同时支持驼峰命名和破折号命名的插槽，示例：back-icon 和 backIcon
|
||||
* @param vm 组件实例
|
||||
* @param name 插槽名
|
||||
*/
|
||||
export declare function convertSlotName(vm: ComponentInternalInstance, name: string): string;
|
||||
export declare function camelCase(str: string): string;
|
||||
export declare function kebabCase(key: string): string;
|
||||
File diff suppressed because one or more lines are too long
200
umd/index.js
200
umd/index.js
File diff suppressed because one or more lines are too long
Loading…
x
Reference in New Issue
Block a user