init
This commit is contained in:
Binary file not shown.
@@ -0,0 +1,35 @@
|
||||
const useMove = function (el: HTMLElement, callback: Function) {
|
||||
if (el != null) {
|
||||
el.addEventListener("mousedown", function (event: any) {
|
||||
const path = (event.composedPath && event.composedPath()) || event.path;
|
||||
if (path[0].className === "layui-layer-resize") {
|
||||
if (event.button == 0 && el != null) {
|
||||
var x = el.offsetLeft;
|
||||
var y = el.offsetTop;
|
||||
const move = function (moveEvent: any) {
|
||||
if (el != null) {
|
||||
var offsetX = moveEvent.clientX;
|
||||
var offsetY = moveEvent.clientY;
|
||||
var w = offsetX - x;
|
||||
var h = offsetY - y;
|
||||
w < 260 && (w = 260);
|
||||
h < 115 && (h = 115);
|
||||
el.style.width = `${w}px`;
|
||||
el.style.height = `${h}px`;
|
||||
callback(el.style.width, el.style.height);
|
||||
}
|
||||
return false;
|
||||
};
|
||||
document.addEventListener("mousemove", move);
|
||||
const stop = function () {
|
||||
document.removeEventListener("mousemove", move);
|
||||
document.removeEventListener("mouseup", stop);
|
||||
};
|
||||
document.addEventListener("mouseup", stop);
|
||||
}
|
||||
}
|
||||
return false;
|
||||
});
|
||||
}
|
||||
};
|
||||
export default useMove;
|
||||
@@ -0,0 +1,145 @@
|
||||
import { DropdownPlacement } from "./interface";
|
||||
|
||||
import { Component, onMounted, onUpdated, ref, VNode, VNodeTypes } from "vue";
|
||||
|
||||
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 ||
|
||||
element.scrollWidth > element.offsetWidth
|
||||
);
|
||||
};
|
||||
|
||||
export const getScrollElements = (container: HTMLElement | undefined) => {
|
||||
const scrollElements: HTMLElement[] = [];
|
||||
let element: HTMLElement | undefined = container;
|
||||
while (element && element !== document.documentElement) {
|
||||
if (isScrollElement(element)) {
|
||||
scrollElements.push(element);
|
||||
}
|
||||
element = element.parentElement ?? 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;
|
||||
}
|
||||
if (Array.isArray(vn)) {
|
||||
return vn;
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const getFirstElementFromVNode = (
|
||||
vn: VNode
|
||||
): HTMLElement | undefined => {
|
||||
if (isElement(vn)) {
|
||||
return vn.el as HTMLElement;
|
||||
}
|
||||
if (isComponent(vn)) {
|
||||
if ((vn.el as Node)?.nodeType === 1) {
|
||||
return vn.el as HTMLElement;
|
||||
}
|
||||
if (vn.component?.subTree) {
|
||||
const ele = getFirstElementFromVNode(vn.component.subTree);
|
||||
if (ele) return ele;
|
||||
}
|
||||
} else {
|
||||
const children = getChildrenArray(vn);
|
||||
return getFirstElementFromChildren(children);
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const getFirstElementFromChildren = (
|
||||
children: VNode[] | undefined
|
||||
): HTMLElement | undefined => {
|
||||
if (children && children.length > 0) {
|
||||
for (const child of children) {
|
||||
const element = getFirstElementFromVNode(child);
|
||||
if (element) return element;
|
||||
}
|
||||
}
|
||||
return undefined;
|
||||
};
|
||||
|
||||
export const useFirstElement = () => {
|
||||
const children: SlotChildren = {};
|
||||
const firstElement = ref<HTMLElement>();
|
||||
|
||||
const getFirstElement = () => {
|
||||
const element = getFirstElementFromChildren(children.value);
|
||||
if (element !== firstElement.value) {
|
||||
firstElement.value = element;
|
||||
}
|
||||
};
|
||||
|
||||
onMounted(() => getFirstElement());
|
||||
|
||||
onUpdated(() => getFirstElement());
|
||||
|
||||
return {
|
||||
children,
|
||||
firstElement,
|
||||
};
|
||||
};
|
||||
|
||||
export const transformPlacement = (
|
||||
placement: DropdownPlacement
|
||||
): DropdownPlacement => {
|
||||
const shouldTransform = placement.includes("-");
|
||||
const placementMap: any = {
|
||||
top: "start",
|
||||
left: "start",
|
||||
bottom: "end",
|
||||
right: "end",
|
||||
};
|
||||
|
||||
if (shouldTransform) {
|
||||
const separated = placement.split("-");
|
||||
return `${separated[0]}-${
|
||||
placementMap[separated[1]] || separated[1]
|
||||
}` as DropdownPlacement;
|
||||
}
|
||||
|
||||
return placement;
|
||||
};
|
||||
Binary file not shown.
@@ -0,0 +1,2 @@
|
||||
import Component from "./index.vue";
|
||||
export default Component;
|
||||
@@ -0,0 +1,123 @@
|
||||
import { w as withInstall } from "../badge/index2.js";
|
||||
import { defineComponent, ref, computed, openBlock, createElementBlock, normalizeClass, unref, normalizeStyle, renderSlot, createCommentVNode, 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")();
|
||||
const _hoisted_1 = {
|
||||
key: 0,
|
||||
class: "layui-tag-icon"
|
||||
};
|
||||
const _hoisted_2 = ["onClick"];
|
||||
const __default__ = {
|
||||
name: "LayTag"
|
||||
};
|
||||
const _sfc_main = defineComponent({
|
||||
...__default__,
|
||||
props: {
|
||||
type: null,
|
||||
color: null,
|
||||
closable: { type: Boolean },
|
||||
size: { default: "md" },
|
||||
bordered: { type: Boolean, default: true },
|
||||
disabled: { type: Boolean },
|
||||
shape: { default: "square" },
|
||||
maxWidth: null,
|
||||
variant: { default: "dark" }
|
||||
},
|
||||
emits: ["close", "check", "update:checked"],
|
||||
setup(__props, { emit }) {
|
||||
const props = __props;
|
||||
const visible = ref(true);
|
||||
const handleClose = (e) => {
|
||||
if (props.disabled)
|
||||
return;
|
||||
emit("close", e);
|
||||
};
|
||||
const classTag = computed(() => [
|
||||
"layui-tag",
|
||||
`layui-tag-size-${props.size}`,
|
||||
`layui-tag-shap-${props.shape}`,
|
||||
{
|
||||
[`layui-tag-variant-${props.variant}`]: props.variant,
|
||||
[`layui-tag-variant-${props.variant}-bordered`]: props.bordered,
|
||||
[`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
|
||||
}
|
||||
]);
|
||||
const styleTag = computed(() => {
|
||||
var _a;
|
||||
return [
|
||||
{
|
||||
"max-width": (_a = props.maxWidth) != null ? _a : "unset",
|
||||
...useTagCustomStyle(props).value
|
||||
}
|
||||
];
|
||||
});
|
||||
function useTagCustomStyle(props2) {
|
||||
return computed(() => {
|
||||
let styles = {};
|
||||
const tagColor = props2.color;
|
||||
if (tagColor) {
|
||||
const color = new TinyColor(tagColor);
|
||||
if (props2.variant === "dark") {
|
||||
const isDark = color.getBrightness() < 190;
|
||||
const textColor = isDark ? "#FFF" : "#000000";
|
||||
styles = {
|
||||
"--layui-tag-bg-color": tagColor,
|
||||
"--layui-tag-border-color": props2.bordered ? tagColor : "transparent",
|
||||
"--layui-tag-hover-color": tagColor,
|
||||
"--layui-tag-text-color": textColor
|
||||
};
|
||||
} else if (props2.variant === "light") {
|
||||
styles = {
|
||||
"--layui-tag-bg-color": color.tint(90).toString(),
|
||||
"--layui-tag-border-color": props2.bordered ? color.tint(50).toString() : "transparent",
|
||||
"--layui-tag-hover-color": color.tint(90).toString(),
|
||||
"--layui-tag-text-color": tagColor
|
||||
};
|
||||
} else if (props2.variant === "plain") {
|
||||
styles = {
|
||||
"--layui-tag-bg-color": "transparent",
|
||||
"--layui-tag-border-color": props2.bordered ? tagColor : "transparent",
|
||||
"--layui-tag-hover-color": "transparent",
|
||||
"--layui-tag-text-color": tagColor
|
||||
};
|
||||
}
|
||||
}
|
||||
return styles;
|
||||
});
|
||||
}
|
||||
return (_ctx, _cache) => {
|
||||
return visible.value ? (openBlock(), createElementBlock("span", {
|
||||
key: 0,
|
||||
class: normalizeClass(unref(classTag)),
|
||||
style: normalizeStyle(unref(styleTag))
|
||||
}, [
|
||||
_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"
|
||||
}, [
|
||||
renderSlot(_ctx.$slots, "default")
|
||||
], 4)) : renderSlot(_ctx.$slots, "default", { key: 2 }),
|
||||
__props.closable ? (openBlock(), createElementBlock("span", {
|
||||
key: 3,
|
||||
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)
|
||||
], 6)) : createCommentVNode("", true);
|
||||
};
|
||||
}
|
||||
});
|
||||
const component = withInstall(_sfc_main);
|
||||
export { _sfc_main as _, component as c };
|
||||
Reference in New Issue
Block a user