saturn-ui
Version:
🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍
300 lines (291 loc) • 12.5 kB
JavaScript
import { defineComponent, ref, watch, nextTick, openBlock, createElementBlock, createElementVNode, normalizeStyle, createCommentVNode, computed, onMounted, onUnmounted, createBlock, Teleport, withDirectives, normalizeClass, unref, renderSlot, toDisplayString, createVNode, Fragment, renderList, withModifiers, vShow } from 'vue';
const _hoisted_1$1 = {
key: 0,
class: "ice-icon"
};
const _hoisted_2$1 = ["data-icon"];
var script$1 = defineComponent({
props: {
icon: { type: null, required: true },
size: { type: null, required: false, default: () => 16 }
},
setup(__props) {
const props = __props;
const show = ref(true);
watch(props, () => {
show.value = false;
nextTick(() => {
show.value = true;
});
});
return (_ctx, _cache) => {
return (show.value)
? (openBlock(), createElementBlock("span", _hoisted_1$1, [
createElementVNode("span", {
class: "iconify",
"data-icon": __props.icon,
style: normalizeStyle({ fontSize: __props.size + 'px' })
}, null, 12, _hoisted_2$1)
]))
: createCommentVNode("v-if", true);
};
}
});
script$1.__file = "packages/IceIcon/index.vue";
const withInstall = (main, extra) => {
main.install = (app) => {
for (const comp of [main, ...Object.values(extra ?? {})]) {
app.component(comp.name, comp);
}
};
if (extra) {
for (const [key, comp] of Object.entries(extra)) {
main[key] = comp;
}
}
return main;
};
const IceIcon = withInstall(script$1, { name: 'IceIcon' });
const _hoisted_1 = { class: "title" };
const _hoisted_2 = { class: "ice-dialog__body" };
const _hoisted_3 = { class: "content" };
const _hoisted_4 = {
key: 0,
class: "footer"
};
const _hoisted_5 = { class: "footer-content" };
const _hoisted_6 = ["onMousedown"];
var script = defineComponent({
props: {
el: { type: String, required: false, default: 'app' },
title: { type: String, required: false, default: '' },
visible: { type: Boolean, required: true, default: false },
width: { type: [Number, String], required: false, default: 500 },
height: { type: [Number, String], required: false },
left: { type: [Number, String], required: false },
right: { type: [Number, String], required: false },
top: { type: [Number, String], required: false },
bottom: { type: [Number, String], required: false },
handles: { type: [Boolean, String], required: false, default: true },
minWidth: { type: Number, required: false, default: 100 },
minHeight: { type: Number, required: false, default: 100 },
maxWidth: { type: Number, required: false, default: 1000 },
maxHeight: { type: Number, required: false, default: 1000 },
zIndex: { type: Number, required: false },
customClass: { type: String, required: false }
},
emits: ['update:visible'],
setup(__props, { emit: emits }) {
const props = __props;
const animationClass = computed(() => {
const left = parseInt((props.left || '').toString());
const right = parseInt((props.right || '').toString());
if (props.left && left > 0 && left < 40) {
return 'fadein-left';
}
if (props.right && right > 0 && right < 40) {
return 'fadein-right';
}
return 'fadein-popup';
});
const pannelBox = ref();
onMounted(() => {
initSize();
initPosition();
addEvent(window, 'resize', resize);
});
onUnmounted(() => {
removeEvent(window, 'resize', resize);
});
const closeModel = () => {
emits('update:visible', false);
};
function initPosition() {
const pannelStyle = pannelBox.value.style;
pannelStyle.zIndex = props.zIndex;
if (props.left !== undefined) {
pannelStyle.left = antoUnit(props.left);
}
else if (props.right !== undefined) {
pannelStyle.right = antoUnit(props.right);
pannelStyle.left = 'initial';
}
if (props.top !== undefined) {
pannelStyle.top = antoUnit(props.top);
}
if (props.bottom !== undefined) {
pannelStyle.bottom = antoUnit(props.bottom);
}
}
function initSize() {
const pannelStyle = pannelBox.value.style;
if (props.width) {
pannelStyle.width = antoUnit(props.width);
}
if (!props.top || !props.bottom) {
if (props.height) {
pannelStyle.height = antoUnit(props.height);
}
}
}
function resize() {
const pb = pannelBox.value;
const warpper = document.getElementById(props.el);
if (pb.offsetTop + pb.offsetHeight > warpper.offsetHeight) {
pb.style.height = antoUnit(Math.max(warpper.offsetHeight - pb.offsetTop, props.minHeight));
}
if (pb.offsetLeft + pb.offsetWidth > warpper.offsetWidth) {
pb.style.width = antoUnit(Math.max(warpper.offsetWidth - pb.offsetLeft, props.minWidth));
}
}
function antoUnit(value) {
if (typeof value === 'number' || (typeof value === 'string' && /^[0-9]*$/.test(value))) {
return `${value}px`;
}
return value;
}
function mousedown(event) {
const warpper = document.getElementById(props.el);
const pb = pannelBox.value;
const x = event.clientX;
const y = event.clientY;
const bl = pb.offsetLeft;
const bt = pb.offsetTop;
const maxLeft = warpper.offsetWidth - pb.offsetWidth;
const maxTop = warpper.offsetHeight - pb.offsetHeight;
addEvent(document.documentElement, 'mousemove', toPointerPosition);
addEvent(document.documentElement, 'mouseup', handleUp);
function toPointerPosition(e) {
e.preventDefault();
const distanceX = e.clientX - x;
const distanceY = e.clientY - y;
const left = bl + distanceX;
const top = bt + distanceY;
if (props.top && props.bottom) {
pb.style.height = antoUnit(pb.offsetHeight);
pb.style.bottom = 'initial';
}
pb.style.left = `${Math.min(Math.max(0, left), maxLeft)}px`;
pb.style.top = `${Math.min(Math.max(0, top), maxTop)}px`;
}
function handleUp(e) {
e.preventDefault();
removeEvent(document.documentElement, 'mousemove', toPointerPosition);
removeEvent(document.documentElement, 'mouseup', handleUp);
}
}
const defaultHandles = ['x', 'y', 'xy'];
let handleName = '';
const actualHandles = computed(() => {
if (!props.handles) {
return [];
}
if (typeof props.handles === 'string') {
return props.handles.split('');
}
return defaultHandles;
});
function handleDown(handle, event) {
handleName = handle;
const x = event.clientX;
const y = event.clientY;
const bw = pannelBox.value.offsetWidth || 0;
const bh = pannelBox.value.offsetHeight || 0;
addEvent(document.documentElement, 'mousemove', handleMove);
addEvent(document.documentElement, 'mouseup', handleUp);
function handleMove(e) {
e.preventDefault();
if (handleName.indexOf('x') !== -1) {
const width = bw + e.clientX - x;
pannelBox.value.style.width = `${Math.min(Math.max(props.minWidth, width, 0), props.maxWidth)}px`;
}
if (handleName.indexOf('y') !== -1) {
const height = bh + e.clientY - y;
pannelBox.value.style.height = `${Math.min(Math.max(props.minHeight, height, 0), props.maxHeight)}px`;
}
}
function handleUp(e) {
e.preventDefault();
removeEvent(document.documentElement, 'mousemove', handleMove);
removeEvent(document.documentElement, 'mouseup', handleUp);
}
}
function addEvent(el, event, handler) {
if (!el) {
return;
}
if (el.attachEvent) {
el.attachEvent(`on${event}`, handler);
}
else if (el.addEventListener) {
el.addEventListener(event, handler);
}
else {
el[`on${event}`] = handler;
}
}
function removeEvent(el, event, handler) {
if (!el) {
return;
}
if (el.detachEvent) {
el.detachEvent(`on${event}`, handler);
}
else if (el.removeEventListener) {
el.removeEventListener(event, handler);
}
else {
el[`on${event}`] = null;
}
}
return (_ctx, _cache) => {
return (openBlock(), createBlock(Teleport, { to: "body" }, [
withDirectives(createElementVNode("div", {
class: normalizeClass(["ice-dialog", [__props.customClass, unref(animationClass)]]),
ref_key: "pannelBox",
ref: pannelBox
}, [
createElementVNode("div", {
ref: "modelHeader",
class: "ice-dialog__header",
onMousedown: mousedown
}, [
renderSlot(_ctx.$slots, "icon"),
createElementVNode("span", _hoisted_1, toDisplayString(__props.title), 1),
createVNode(unref(IceIcon), {
icon: "icon-park-outline:close",
class: "close-btn",
onClick: closeModel
})
], 544),
createElementVNode("div", _hoisted_2, [
createElementVNode("div", _hoisted_3, [
renderSlot(_ctx.$slots, "default", { visible: __props.visible })
]),
(_ctx.$slots.footer)
? (openBlock(), createElementBlock("div", _hoisted_4, [
createElementVNode("div", _hoisted_5, [
renderSlot(_ctx.$slots, "footer")
])
]))
: createCommentVNode("v-if", true)
]),
(openBlock(true), createElementBlock(Fragment, null, renderList(unref(actualHandles), (handle) => {
return (openBlock(), createElementBlock("div", {
key: handle,
class: normalizeClass(["handle", ['handle-' + handle]]),
onMousedown: withModifiers(($event) => (handleDown(handle, $event)), ["stop", "prevent"])
}, [
renderSlot(_ctx.$slots, handle)
], 42, _hoisted_6));
}), 128))
], 2), [
[vShow, __props.visible]
])
]));
};
}
});
script.__file = "packages/IceDialog/index.vue";
const IceDialog = withInstall(script, { name: 'IceDialog' });
export { IceDialog, IceDialog as default };