saturn-ui
Version:
🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍
1,300 lines (1,240 loc) • 55.8 kB
JavaScript
import { defineComponent, openBlock, createElementBlock, createElementVNode, toDisplayString, createCommentVNode, renderSlot, ref, watch, nextTick, normalizeStyle, Fragment, renderList, createVNode, unref, provide, inject, getCurrentInstance, normalizeClass, reactive, onMounted, withDirectives, vShow, computed, onUnmounted, createBlock, Teleport, withModifiers } from 'vue';
const Throttle = (fn, time = 1000) => {
let timer = null;
return (e) => {
!timer &&
(timer = setTimeout(() => {
fn(e);
timer = null;
}, time));
};
};
const DateFormat = (date, format = 'yyyy-MM-dd hh:mm:ss') => {
const year = `${date.getFullYear()}`;
let month = `${date.getMonth() + 1}`;
if (month.length === 1) {
month = `0${month}`;
}
let day = `${date.getDate()}`;
if (day.length === 1) {
day = `0${day}`;
}
let hours = `${date.getHours()}`;
if (hours.length === 1) {
hours = `0${hours}`;
}
let minutes = `${date.getMinutes()}`;
if (minutes.length === 1) {
minutes = `0${minutes}`;
}
let seconds = `${date.getSeconds()}`;
if (seconds.length === 1) {
seconds = `0${seconds}`;
}
return format
.replace(/yyyy/gi, year)
.replace(/MM/g, month)
.replace(/dd/gi, day)
.replace(/hh/gi, hours)
.replace(/mm/g, minutes)
.replace(/ss/gi, seconds);
};
const _hoisted_1$j = { class: "ice-header" };
var script$m = defineComponent({
props: {
title: {
type: String,
required: false,
default: '可视化数据展示平台'
}
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$j, [
createElementVNode("div", null, toDisplayString(__props.title), 1)
]));
};
}
});
script$m.__file = "packages/IceHeader/header1/index.vue";
const _hoisted_1$i = { class: "ice-header-2" };
var script$l = defineComponent({
props: {
title: {
type: String,
required: false,
default: '可视化数据展示平台'
}
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$i, [
createElementVNode("div", null, toDisplayString(__props.title), 1)
]));
};
}
});
script$l.__file = "packages/IceHeader/header2/index.vue";
const _hoisted_1$h = { class: "ice-header-3" };
const _hoisted_2$b = { class: "left" };
const _hoisted_3$5 = ["src"];
const _hoisted_4$3 = { class: "title" };
const _hoisted_5$3 = { class: "menu" };
const _hoisted_6$2 = { class: "right" };
var script$k = defineComponent({
props: {
logo: {
type: String,
required: false
},
title: {
type: String,
required: false,
default: '可视化数据展示平台'
}
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$h, [
createElementVNode("div", _hoisted_2$b, [
(__props.logo)
? (openBlock(), createElementBlock("img", {
key: 0,
class: "logo",
src: __props.logo,
alt: "logo"
}, null, 8, _hoisted_3$5))
: createCommentVNode("v-if", true),
createElementVNode("div", _hoisted_4$3, toDisplayString(__props.title), 1),
createElementVNode("div", _hoisted_5$3, [
renderSlot(_ctx.$slots, "default")
])
]),
createElementVNode("div", _hoisted_6$2, [
renderSlot(_ctx.$slots, "right")
])
]));
};
}
});
script$k.__file = "packages/IceHeader/header3/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 IceHeader = withInstall(script$m, { name: 'IceHeader' });
const IceHeader2 = withInstall(script$l, { name: 'IceHeader2' });
const IceHeader3 = withInstall(script$k, { name: 'IceHeader3' });
const _hoisted_1$g = {
key: 0,
class: "ice-icon"
};
const _hoisted_2$a = ["data-icon"];
var script$j = 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$g, [
createElementVNode("span", {
class: "iconify",
"data-icon": __props.icon,
style: normalizeStyle({ fontSize: __props.size + 'px' })
}, null, 12, _hoisted_2$a)
]))
: createCommentVNode("v-if", true);
};
}
});
script$j.__file = "packages/IceIcon/index.vue";
const IceIcon = withInstall(script$j, { name: 'IceIcon' });
const _hoisted_1$f = { class: "ice-menu" };
const _hoisted_2$9 = { class: "title_tab" };
const __default__ = { name: 'IceMenu' };
var script$i = defineComponent({
...__default__,
props: {
data: { type: Array, required: false, default: () => [
{
title: '菜单',
icon: 'icon-park-outline:application-menu'
},
{
title: '菜单',
icon: 'icon-park-outline:application-menu'
},
{
title: '菜单',
icon: 'icon-park-outline:application-menu'
}
] }
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$f, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.data, (item, index) => {
return (openBlock(), createElementBlock("div", { key: index }, [
createVNode(unref(IceIcon), {
icon: item.icon,
size: 20
}, null, 8, ["icon"]),
createElementVNode("div", _hoisted_2$9, toDisplayString(item.title), 1)
]));
}), 128))
]));
};
}
});
script$i.__file = "packages/IceMenu/menu1/index.vue";
const _hoisted_1$e = { class: "ice-menu-2" };
var script$h = defineComponent({
emits: ['active'],
setup(__props, { emit: emits }) {
const activekey = ref();
provide('activekey', activekey);
watch(activekey, () => {
emits('active', activekey.value.key);
});
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$e, [
renderSlot(_ctx.$slots, "default")
]));
};
}
});
script$h.__file = "packages/IceMenu/menu2/index.vue";
var script$g = defineComponent({
setup(__props) {
const activekey = inject('activekey');
const instance = getCurrentInstance();
const { key } = instance.vnode;
function active() {
activekey.value = { key };
}
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", {
class: normalizeClass(["ice-menu-item", { 'ice-menu-item-active': unref(activekey) == unref(key) }]),
onClick: active
}, [
renderSlot(_ctx.$slots, "default")
], 2));
};
}
});
script$g.__file = "packages/IceMenu/menu2/item.vue";
const _hoisted_1$d = { class: "ice-menu-item-group" };
const _hoisted_2$8 = { class: "item-group-title" };
var script$f = defineComponent({
setup(__props) {
const isflex = inject('isflex');
isflex.value = true;
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$d, [
createElementVNode("div", _hoisted_2$8, [
renderSlot(_ctx.$slots, "title")
]),
renderSlot(_ctx.$slots, "default")
]));
};
}
});
script$f.__file = "packages/IceMenu/menu2/itemGroup.vue";
const _hoisted_1$c = { class: "ice-menu-item" };
var script$e = defineComponent({
setup(__props) {
const showsub = ref(false);
const subRef = ref(null);
const iceSubStyle = reactive({});
const subMinWidth = ref(0);
onMounted(() => {
subMinWidth.value = subRef.value?.clientWidth;
});
watch(subMinWidth, val => {
iceSubStyle.minWidth = `${val}px`;
});
const isflex = ref(false);
provide('isflex', isflex);
watch(isflex, val => {
if (val) {
iceSubStyle.display = 'flex';
}
});
const isactive = ref(false);
const activekey = inject('activekey');
watch(activekey, () => {
nextTick(() => {
isactive.value = !!subRef.value?.getElementsByClassName('ice-menu-item-active').length;
showsub.value = false;
});
});
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", {
class: normalizeClass(["ice-sub-item", { 'ice-sub-item-active': isactive.value }]),
onMouseover: _cache[0] || (_cache[0] = ($event) => (showsub.value = true)),
onMouseleave: _cache[1] || (_cache[1] = ($event) => (showsub.value = false)),
ref_key: "subRef",
ref: subRef
}, [
createElementVNode("div", _hoisted_1$c, [
renderSlot(_ctx.$slots, "title")
]),
withDirectives(createElementVNode("div", null, [
createElementVNode("div", {
style: normalizeStyle(unref(iceSubStyle)),
class: "ice-sub"
}, [
renderSlot(_ctx.$slots, "default")
], 4)
], 512), [
[vShow, showsub.value]
])
], 34));
};
}
});
script$e.__file = "packages/IceMenu/menu2/subMenu.vue";
const IceMenu = withInstall(script$i, { name: 'IceMenu' });
const IceMenu2 = withInstall(script$h, { name: 'IceMenu2' });
const IceMenuItem = withInstall(script$g, { name: 'IceMenuItem' });
const IceMenuItemGroup = withInstall(script$f, { name: 'IceMenuItemGroup' });
const IceSubMenu = withInstall(script$e, { name: 'IceSubMenu' });
const _hoisted_1$b = { class: "ice-wrapper-1" };
var script$d = defineComponent({
props: {
visible: { type: Boolean, required: false, default: false },
direction: { type: String, required: false, default: 'left' }
},
setup(__props) {
const props = __props;
const show = ref(props.visible);
function change() {
show.value = !show.value;
}
const itemnum = ref(0);
provide('itemnum', itemnum);
provide('direction', props.direction);
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$b, [
createElementVNode("div", {
class: normalizeClass(["wrap", [__props.direction == 'right' ? 'wrap-right' : 'wrap-left', show.value ? (__props.direction == 'right' ? 'showright' : 'showleft') : __props.direction == 'right' ? 'hideright' : 'hideleft']])
}, [
createVNode(unref(IceIcon), {
icon: `icon-park-outline:double-${__props.direction}`,
style: normalizeStyle(`transform: ${show.value ? '' : 'rotate(180deg)'}`),
size: 30,
class: "icon",
onClick: change
}, null, 8, ["icon", "style"]),
renderSlot(_ctx.$slots, "default")
], 2)
]));
};
}
});
script$d.__file = "packages/IceWrapper/wrapper1/index.vue";
const _hoisted_1$a = { class: "ice-wrapper-2" };
var script$c = defineComponent({
props: {
visible: { type: Boolean, required: false, default: true },
direction: { type: String, required: false, default: 'left' }
},
setup(__props) {
const props = __props;
const show = ref(props.visible);
function change() {
show.value = !show.value;
}
const iconstyle = computed(() => {
const style = {
transform: show.value ? '' : 'rotate(180deg)'
};
if (show.value) {
return style;
}
if (props.direction == 'left') {
style.right = '-30px';
}
if (props.direction == 'right') {
style.right = 'auto';
style.left = '-30px';
}
if (props.direction == 'down') {
style.top = '-50px';
}
return style;
});
const itemnum = ref(0);
provide('itemnum', itemnum);
provide('direction', props.direction);
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$a, [
createElementVNode("div", {
class: normalizeClass(["wrap", [`wrap-${__props.direction}`, show.value ? `show${__props.direction}` : `hide${__props.direction}`]])
}, [
createVNode(unref(IceIcon), {
icon: `icon-park-outline:double-${__props.direction}`,
style: normalizeStyle(unref(iconstyle)),
size: 20,
class: "icon",
onClick: change
}, null, 8, ["icon", "style"]),
renderSlot(_ctx.$slots, "default")
], 2)
]));
};
}
});
script$c.__file = "packages/IceWrapper/wrapper2/index.vue";
var script$b = defineComponent({
setup(__props) {
const itemnum = inject('itemnum');
const direction = inject('direction');
itemnum.value++;
const style = computed(() => {
const style = {};
if (direction == 'down') {
style.width = `${100 / itemnum.value}%`;
}
else {
style.height = `${100 / itemnum.value}%`;
}
return style;
});
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", {
style: normalizeStyle(unref(style))
}, [
renderSlot(_ctx.$slots, "default")
], 4));
};
}
});
script$b.__file = "packages/IceWrapper/wrapperItem/index.vue";
const IceWrapper = withInstall(script$d, { name: 'IceWrapper' });
const IceWrapper2 = withInstall(script$c, { name: 'IceWrapper2' });
const IceWrapperItem = withInstall(script$b, { name: 'IceWrapperItem' });
const _hoisted_1$9 = { class: "ice-panel-1" };
const _hoisted_2$7 = { class: "title" };
const _hoisted_3$4 = { class: "content" };
var script$a = defineComponent({
props: {
title: { type: String, required: false }
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$9, [
createElementVNode("div", _hoisted_2$7, toDisplayString(__props.title), 1),
createElementVNode("div", _hoisted_3$4, [
renderSlot(_ctx.$slots, "default")
])
]));
};
}
});
script$a.__file = "packages/IcePanel/panel1/index.vue";
const _hoisted_1$8 = { class: "ice-panel-2" };
const _hoisted_2$6 = { class: "title" };
const _hoisted_3$3 = { class: "content" };
var script$9 = defineComponent({
props: {
title: { type: String, required: false }
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$8, [
createElementVNode("div", _hoisted_2$6, toDisplayString(__props.title), 1),
createElementVNode("div", _hoisted_3$3, [
renderSlot(_ctx.$slots, "default")
])
]));
};
}
});
script$9.__file = "packages/IcePanel/panel2/index.vue";
const IcePanel = withInstall(script$a, { name: 'IcePanel' });
const IcePanel2 = withInstall(script$9, { name: 'IcePanel2' });
const _hoisted_1$7 = { class: "title" };
const _hoisted_2$5 = { class: "ice-dialog__body" };
const _hoisted_3$2 = { class: "content" };
const _hoisted_4$2 = {
key: 0,
class: "footer"
};
const _hoisted_5$2 = { class: "footer-content" };
const _hoisted_6$1 = ["onMousedown"];
var script$8 = 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$7, toDisplayString(__props.title), 1),
createVNode(unref(IceIcon), {
icon: "icon-park-outline:close",
class: "close-btn",
onClick: closeModel
})
], 544),
createElementVNode("div", _hoisted_2$5, [
createElementVNode("div", _hoisted_3$2, [
renderSlot(_ctx.$slots, "default", { visible: __props.visible })
]),
(_ctx.$slots.footer)
? (openBlock(), createElementBlock("div", _hoisted_4$2, [
createElementVNode("div", _hoisted_5$2, [
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$1));
}), 128))
], 2), [
[vShow, __props.visible]
])
]));
};
}
});
script$8.__file = "packages/IceDialog/index.vue";
const IceDialog = withInstall(script$8, { name: 'IceDialog' });
const _hoisted_1$6 = { class: "ice-list" };
const _hoisted_2$4 = ["title"];
var script$7 = defineComponent({
props: {
listData: {
type: Array,
required: true,
default: () => [
{
name: '小明',
age: 18,
grade: '一年级',
tset: '00000000000000000000000000000000000000000'
},
{ name: '小明', age: 18, grade: '一年级', tset: '00' },
{ name: '小明', age: 18, grade: '一年级', tset: '00' },
{ name: '小明', age: 18, grade: '一年级', tset: '00' },
{ name: '小明', age: 18, grade: '一年级', tset: '00' },
{ name: '小明', age: 18, grade: '一年级', tset: '00' }
]
},
width: {
type: String,
required: true,
default: '110%'
},
maxHeight: {
type: Number,
required: true,
default: 234
},
rowHeight: {
type: Number,
required: true,
default: 50
}
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$6, [
createElementVNode("table", {
style: normalizeStyle({ width: __props.width + 'px' || __props.width })
}, [
createElementVNode("thead", null, [
createElementVNode("tr", {
style: normalizeStyle({ height: __props.rowHeight + 'px' })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(Object.keys(__props.listData[0]), (item) => {
return (openBlock(), createElementBlock("th", { key: item }, toDisplayString(item), 1));
}), 128))
], 4)
]),
createElementVNode("tbody", {
style: normalizeStyle({ maxHeight: __props.maxHeight + 'px' })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(__props.listData, (row) => {
return (openBlock(), createElementBlock("tr", {
key: row,
style: normalizeStyle({ height: __props.rowHeight + 'px' })
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(Object.values(row), (row_item, index) => {
return (openBlock(), createElementBlock("td", {
key: row_item + '_' + index,
title: String(row_item)
}, toDisplayString(row_item), 9, _hoisted_2$4));
}), 128))
], 4));
}), 128))
], 4)
], 4)
]));
};
}
});
script$7.__file = "packages/IceList/index.vue";
const IceList = withInstall(script$7, { name: 'IceList' });
var script$6 = defineComponent({
props: {
maxHeight: { type: Number, required: false, default: 100 },
width: { type: String, required: false, default: '100%' }
},
setup(__props) {
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", {
class: "ice-scrollbar",
style: normalizeStyle({ maxHeight: __props.maxHeight + 'px', width: __props.width + 'px' || __props.width })
}, [
createElementVNode("div", null, [
renderSlot(_ctx.$slots, "default")
])
], 4));
};
}
});
script$6.__file = "packages/IceScrollbar/index.vue";
const IceScrollbar = withInstall(script$6, { name: 'IceScrollbar' });
const _hoisted_1$5 = { class: "time" };
const _hoisted_2$3 = {
key: 0,
class: "week"
};
var script$5 = defineComponent({
props: {
fontSize: { type: Number, required: false, default: 16 },
color: { type: String, required: false, default: '#fff' },
format: { type: String, required: false, default: 'MM月DD日 HH:mm:ss' },
showWeek: { type: Boolean, required: false, default: true }
},
setup(__props) {
const props = __props;
const weekDict = ['周日', '周一', '周二', '周三', '周四', '周五'];
const customStyle = {
fontSize: `${props.fontSize}px`,
color: props.color
};
const time = ref();
const week = ref();
const updateTime = () => {
const now = new Date();
time.value = DateFormat(now, props.format);
week.value = weekDict[now.getDay()];
};
updateTime();
setInterval(updateTime, 1000);
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", {
class: "ice-clock",
style: customStyle
}, [
createElementVNode("span", _hoisted_1$5, toDisplayString(time.value), 1),
(__props.showWeek)
? (openBlock(), createElementBlock("span", _hoisted_2$3, toDisplayString(week.value), 1))
: createCommentVNode("v-if", true)
]));
};
}
});
script$5.__file = "packages/IceClock/index.vue";
const IceClock = withInstall(script$5, { name: 'IceClock' });
const _hoisted_1$4 = ["title"];
const _hoisted_2$2 = { key: 0 };
var script$4 = defineComponent({
props: {
city: { type: String, required: false, default: undefined },
apiKey: { type: String, required: false, default: 'c382f210cef36955b06c5f472af64a52' },
showCity: { type: Boolean, required: false, default: false }
},
setup(__props) {
const props = __props;
const weatherIcon = ref();
const todayWeather = ref();
const showWeather = ref(false);
const weatherTitle = computed(() => {
return `${todayWeather.value.city}, ${todayWeather.value.weather}, ${todayWeather.value.temperature}℃`;
});
const legendClass = value => {
switch (value) {
case '晴':
weatherIcon.value = 'weather-1';
break;
case '多云':
weatherIcon.value = `weather-2`;
break;
case '阴':
weatherIcon.value = `weather-3`;
break;
case '小雨':
weatherIcon.value = `weather-4`;
break;
case '中雨' :
weatherIcon.value = `weather-5`;
break;
case '大雨' :
weatherIcon.value = `weather-6`;
break;
case '暴雨' :
weatherIcon.value = `weather-7`;
break;
case '小雪':
weatherIcon.value = `weather-8`;
break;
case '中雪' :
weatherIcon.value = `weather-9`;
break;
case '大雪' :
weatherIcon.value = `weather-10`;
break;
case '暴雪' :
weatherIcon.value = `weather-11`;
break;
case '雾':
weatherIcon.value = `weather-12`;
break;
case '霾':
weatherIcon.value = `weather-13`;
break;
default:
weatherIcon.value = 'weather-1';
}
};
const weatherInfo = city => {
return fetch(`https://restapi.amap.com/v3/weather/weatherInfo?key=${props.apiKey}&city=${city}&extensions=base`)
.then(response => response.json())
.then(data => {
return data.lives;
});
};
const coords2city = coords => {
return fetch(`https://restapi.amap.com/v3/geocode/regeo?location=${coords.longitude},${coords.latitude}&key=${props.apiKey}`)
.then(response => response.json())
.then(data => {
const { city } = data.regeocode.addressComponent;
return city;
});
};
const handleWeather = weather => {
todayWeather.value = weather;
legendClass(todayWeather.value.weather);
showWeather.value = true;
};
onMounted(() => {
if (props.city) {
weatherInfo(props.city).then(lives => handleWeather({ ...lives[0] }));
}
else if ('geolocation' in navigator) {
navigator.geolocation.getCurrentPosition(position => {
coords2city(position.coords).then(city => {
weatherInfo(city).then(lives => handleWeather({ ...lives[0] }));
});
});
}
});
return (_ctx, _cache) => {
return (showWeather.value)
? (openBlock(), createElementBlock("div", {
key: 0,
class: "ice-weather",
title: unref(weatherTitle)
}, [
(props.showCity)
? (openBlock(), createElementBlock("span", _hoisted_2$2, toDisplayString(todayWeather.value?.city), 1))
: createCommentVNode("v-if", true),
createElementVNode("span", {
class: normalizeClass(["weather-icon", weatherIcon.value])
}, null, 2),
createElementVNode("span", null, toDisplayString(todayWeather.value?.temperature + '℃'), 1)
], 8, _hoisted_1$4))
: createCommentVNode("v-if", true);
};
}
});
script$4.__file = "packages/IceWeather/index.vue";
const IceWeather = withInstall(script$4, { name: 'IceWeather' });
const _hoisted_1$3 = { class: "ice-number-flop" };
const _hoisted_2$1 = { class: "front face" };
const _hoisted_3$1 = { class: "text" };
const _hoisted_4$1 = { class: "back face" };
const _hoisted_5$1 = { class: "text" };
var script$3 = defineComponent({
props: {
number: { type: Number, required: false, default: 0 },
separator: { type: String, required: false, default: '' }
},
setup(__props) {
const props = __props;
const formatNumber = (number, separator) => {
const fmt = `${(number || 0).toString()}`;
return fmt.replace(/(\d)(?=(?:\d{3})+$)/g, `$1${separator}`);
};
const flipArr = ref();
const newArr = ref();
const oldArr = ref();
onMounted(() => {
watch(() => props.number, (newVal, oldVal) => {
newArr.value = formatNumber(newVal, props.separator).split('');
oldArr.value = formatNumber(oldVal, props.separator).split('');
console.log('newArr>>>>>>', newArr.value);
console.log('oldVal>>>>>>', oldArr.value);
const beforeFlipArr = [];
const afterFlipArr = [];
for (let i = 0; i < newArr.value.length; i++) {
if (newArr.value[i] !== oldArr.value[i]) {
beforeFlipArr.push(true);
}
else {
beforeFlipArr.push(false);
}
afterFlipArr.push(false);
}
flipArr.value = beforeFlipArr;
setTimeout(() => {
flipArr.value = afterFlipArr;
}, 300);
}, { immediate: true });
});
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", _hoisted_1$3, [
(openBlock(true), createElementBlock(Fragment, null, renderList(newArr.value, (item, index) => {
return (openBlock(), createElementBlock("div", {
class: normalizeClass(['anim-object', 'active', { 'flip-vertical-left': flipArr.value[index] }]),
key: index
}, [
createElementVNode("div", _hoisted_2$1, [
createElementVNode("div", _hoisted_3$1, toDisplayString(item), 1)
]),
createElementVNode("div", _hoisted_4$1, [
createElementVNode("div", _hoisted_5$1, toDisplayString(oldArr.value[index]), 1)
])
], 2));
}), 128))
]));
};
}
});
script$3.__file = "packages/IceNumberFlip/index.vue";
const IceNumberFlip = withInstall(script$3, { name: 'IceNumberFlip' });
const _hoisted_1$2 = ["src"];
var script$2 = defineComponent({
props: {
src: { type: String, required: false },
width: { type: Number, required: false },
height: { type: Number, required: false }
},
setup(__props) {
const props = __props;
const DEFAULTIMAGE = '/packages/IceImage/default.svg';
const LOSINGIMAGE = '/packages/IceImage/losing.svg';
const iceimage = ref(null);
const currentlabel = ref();
const currentImage = ref(DEFAULTIMAGE);
const hasScrolled = (el, direction = 'vertical') => {
const overflow = el.style ? el.style.overflow : window.getComputedStyle(el).getPropertyValue('overflow');
if (overflow === 'hidden') {
return false;
}
if (direction === 'vertical') {
return el.scrollHeight > el.clientHeight;
}
if (direction === 'horizontal') {
return el.scrollWidth > el.clientWidth;
}
return false;
};
const isViewingArea = () => {
const offset = iceimage.value?.getBoundingClientRect();
const offsetTop = offset?.top;
const offsetBottom = offset?.bottom;
if (offsetTop <= window.innerHeight && offsetBottom >= 0) {
if (props.src) {
currentImage.value = String(props.src);
}
}
};
const bindEventListener = () => {
if (hasScrolled(currentlabel.value)) {
currentlabel.value.addEventListener('scroll', () => {
isViewingArea();
}, true);
}
else {
currentlabel.value = currentlabel.value.parentElement;
bindEventListener();
}
};
const nofind = event => {
const img = event.srcElement;
img.src = LOSINGIMAGE;
img.onerror = null;
};
onMounted(() => {
isViewingArea();
currentlabel.value = iceimage.value?.parentElement;
bindEventListener();
});
return (_ctx, _cache) => {
return (openBlock(), createElementBlock("div", {
ref_key: "iceimage",
ref: iceimage,
style: normalizeStyle({ width: __props.width + 'px' || 'auto', height: __props.height + 'px' || 'auto' }),
class: "ice-image"
}, [
createElementVNode("img", {
src: currentImage.value,
onerror: nofind
}, null, 8, _hoisted_1$2)
], 4));
};
}
});
script$2.__file = "packages/IceImage/index.vue";
const IceImage = withInstall(script$2, { name: 'IceImage' });
const useHandler = (props, emit) => {
const scrollBarHeight = ref(0);
const scrollTranslateY = ref(0);
const listData = ref([]);
const startIndex = ref(0);
const endIndex = ref(0);
const nodes = [];
const prevScreen = computed(() => props.remain * props.screen[0]);
const nextScreen = computed(() => props.remain * props.screen[1]);
const prevCount = computed(() => Math.min(startIndex.value, prevScreen.value));
const nextCount = computed(() => Math.min(props.list.length - endIndex.value, nextScreen.value));
const renderData = computed(() => listData.value.slice(startIndex.value - prevCount.value, endIndex.value + nextCount.value));
const updateHeight = () => {
nextTick(() => {
if (props.itemHeight === 0) {
nodes.forEach(node => {
const { height } = node.getBoundingClientRect();
const index = +node.dataset.index;
const oldHeight = listData.value[index].height;
height && oldHeight !== height && (listData.value[index].height = height);
});
}
scrollBarHeight.value = listData.value.reduce((prev, item) => prev + item.height, 0);
});
};
let onScroll = (e) => {
const { scrollTop, clientHeight, scrollHeight } = e.target;
if (props.itemHeight) {
startIndex.value = ~~(scrollTop / props.itemHeight);
endIndex.value = startIndex.value + props.remain;
scrollTranslateY.value = (startIndex.value - prevCount.value) * props.itemHeight;
}
else {
let prevSum = 0;
const index = listData.value.findIndex(item => {
prevSum += item.height;
return prevSum > scrollTop;
});
startIndex.value = index;
endIndex.value = startIndex.value + props.remain;
let curPrevSum = 0;
const maxindex = startIndex.value - prevCount.value;
listData.value.find((item, i) => {
if (i >= maxindex) {
return true;
}
curPrevSum += item.height;
return false;
});
scrollTranslateY.value = curPrevSum;
updateHeight();
}
nextTick(() => {
scrollTop + clientHeight >= scrollHeight - props.distance && emit('on-load-more');
});
};
onScroll = Throttle(onScroll, props.interval);
const setItemRef = (el, index) => {
el && (nodes[index] = el);
};
watch(() => props.list, value => {
const height = props.itemHeight || 100;
listData.value = value.map((item, virtualId) => ({ ...item, virtualId, height }));
updateHeight();
}, { deep: true, immediate: true });
return { scrollBarHeight, scrollTranslateY, renderData, onScroll, setItemRef };
};
var script$1 = defineComponent({
name: 'IceVirtualList',
emits: ['on-load-more'],
props: {
list: {
type: Array,
default: () => []
},
interval: {
type: Number,
default: 100
},
height: {
type: String,
default: '100%'
},
itemHeight: {
type: Number,
default: 0
},
distance: {
type: Number,
default: 50
},
screen: {
type: Array,
default: () => [1, 1]
},
remain: {
type: Number,
default: 8
}
},
setup(props, { emit }) {
const { scrollBarHeight, scrollTranslateY, renderData, onScroll, setItemRef } = useHandler(props, emit);
return { scrollBarHeight, scrollTranslateY, renderData, onScroll, setItemRef };
}
});
const _hoisted_1$1 = ["data-index"];
function render(_ctx, _cache, $props, $setup, $data, $options) {
return (openBlock(), createElementBlock(Fragment, null, [
createCommentVNode(" 虚拟列表 "),
createElementVNode("div", {
class: "ice-virtual-list",
style: normalizeStyle(`height:${_ctx.height};`),
onScrollPassive: _cache[0] || (_cache[0] = (...args) => (_ctx.onScroll && _ctx.onScroll(...args)))
}, [
createCommentVNode(" 滚动高度 "),
createElementVNode("div", {
class: "u-scroll-bar",
style: normalizeStyle(`height:${_ctx.scrollBarHeight}px;`)
}, null, 4 /* STYLE */),
createCommentVNode(" 列表 "),
createElementVNode("ul", {
class: "m-list-scroll",
style: normalizeStyle(`transform:translateY(${_ctx.scrollTranslateY}px);`)
}, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.renderData, (item) => {
return (openBlock(), createElementBlock("li", {
key: item.virtualId,
"data-index": item.virtualId,
ref_for: true,
ref: $event => _ctx.setItemRef($event, item.virtualId)
}, [
r