saturn-ui
Version:
🪐 一款轻量级、模块化的Web可视化UI组件库（含大屏、GIS、图表、视频、后台等模块） 👍
1,312 lines (1,254 loc) • 62.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';
var Validator = {
validPhone: /^1[3456789]\d{9}$/,
validPwd: /^(?!_+$)(?!\d+$)(?!\D+$)[A-Za-z0-9]{6,12}$/i,
validEmail: /^(\w|-)+@(\w|-)+(\.(\w|-)+)+$/i,
validIdcard: /^((\d{18})|([0-9x]{18})|([0-9X]{18}))$/i,
validImgs: /\.(svg|gif|png|jpe?g)$/i,
validThousand: /(\d)(?=(\d{3})+$)/g,
validThousandFloat: /(\d)(?=(\d{3})+\.)/g
};
const { validThousand, validThousandFloat } = Validator;
const IsType = (type, value) => Object.prototype.toString.call(value).slice(8, -1) === type;
const DeepCopyRA = (arg) => {
const newValue = IsType('Object', arg)
? {}
: IsType('Array', arg)
? []
: IsType('Date', arg)
? new arg.constructor(+arg)
: IsType('RegExp', arg) || IsType('Error', arg)
? new arg.constructor(arg)
: arg;
IsType('Object', arg) ||
(IsType('Array', arg) &&
Object.keys(arg).forEach(key => {
newValue[key] = DeepCopyRA(arg[key]);
}));
return newValue;
};
const IsLeapyear = (num) => {
if (!IsType('Number', num)) {
throw new Error(`${num} is not number`);
}
return (num % 4 === 0 && num % 100 !== 0) || num % 400 === 0;
};
const FormatTime = (arg = new Date()) => {
if (arg.trim() === '')
throw new Error(`${arg} is not null`);
const str = IsType('Number', arg) && String(arg).length < 13 ? arg * 1000 : arg;
IsType('string', arg) && str.replace(/-/g, '/');
const O = new Date(str);
const doubleDigit = (num) => (num < 10 ? `0${num}` : String(num));
const weeks = ['日', '一', '二', '三', '四', '五', '六'];
const [Y, M, D, w, h, m, s] = [
String(O.getFullYear()),
doubleDigit(O.getMonth() + 1),
doubleDigit(O.getDate()),
`星期${weeks[O.getDay()]}`,
doubleDigit(O.getHours()),
doubleDigit(O.getMinutes()),
doubleDigit(O.getSeconds())
];
const date = `${Y}-${M}-${D}`;
const time = `${h}:${m}:${s}`;
const datetime = `${date} ${time}`;
return { Y, M, D, w, h, m, s, date, time, datetime };
};
const CountDown = (num, format = 'hh:mm:ss') => {
if (!IsType('Number', num))
throw new Error(`${num} is not number`);
if (!'DD:hh:mm:ss:ms'.includes(format)) {
throw new Error(`${format} form error`);
}
const DD = ~~(num / (1000 * 60 * 60 * 24));
let hh = ~~((num / (1000 * 60 * 60)) % 24);
let mm = ~~((num / (1000 * 60)) % 60);
let ss = ~~((num / 1000) % 60);
let ms = ~~(num % 1000);
const formatData = {};
const doubleDigit = (digit) => (digit < 10 ? `0${digit}` : String(digit));
format.includes('DD') ? (formatData.DD = doubleDigit(DD)) : (hh += DD * 24);
format.includes('hh') ? (formatData.hh = doubleDigit(hh)) : (mm += hh * 60);
format.includes('mm') ? (formatData.mm = doubleDigit(mm)) : (ss += mm * 60);
format.includes('ss') ? (formatData.ss = doubleDigit(ss)) : (ms += ss * 1000);
if (format.includes('ms')) {
const curMs = format.includes('mm') ? doubleDigit(ms) : num;
formatData.ms = +String(curMs).slice(0, 2);
}
return formatData;
};
const Throttle = (fn, time = 1000) => {
let timer = null;
return (e) => {
!timer &&
(timer = setTimeout(() => {
fn(e);
timer = null;
}, time));
};
};
const Debounce = (fn, time = 300) => {
let timer;
return (e) => {
if (timer !== undefined)
clearTimeout(timer);
timer = setTimeout(() => {
fn(e);
}, time);
};
};
const FormatThousand = (num) => {
if (!IsType('Number', num))
throw new Error(`${num} is not number`);
const numStr = String(num);
return numStr.replace(numStr.includes('.') ? validThousandFloat : validThousand, '$1,');
};
const Locked = (fn, time = 5000) => {
let timer = null;
const isLocked = { value: false };
const isLockedProxy = new Proxy(isLocked, {
get(obj, prop) {
return obj[prop];
},
set(obj, prop, value) {
obj[prop] = value;
if (value) {
timer = setTimeout(() => {
obj[prop] = false;
}, time);
}
else {
clearInterval(timer);
}
return true;
}
});
return (e) => {
!isLockedProxy.value &&
fn(e, (value) => {
isLockedProxy.value = value;
});
};
};
const AddZero = (str, float1, float2) => str + new Array(Math.abs(float1 - float2) + 1).join('0');
const Calculation = (num1, num2) => {
if (!IsType('Number', num1) || !IsType('Number', num2)) {
throw new Error(`${num1} or ${num2} is not number`);
}
const list1 = String(num1).split('.');
const list2 = String(num2).split('.');
const float1 = list1[1]?.length ?? 0;
const float2 = list2[1]?.length ?? 0;
float1 < float2 && (list1[1] = AddZero(list1[1], float1, float2));
float1 > float2 && (list2[1] = AddZero(list2[1], float1, float2));
const newNum1 = +list1.join('');
const newNum2 = +list2.join('');
const maxFloat = Math.max(float1, float2);
const add = () => (newNum1 + newNum2) / 10 ** maxFloat;
const subtract = () => (newNum1 - newNum2) / 10 ** maxFloat;
const multiply = () => (newNum1 * newNum2) / 10 ** (maxFloat * 2);
const divide = () => newNum1 / newNum2;
return { add, subtract, multiply, divide };
};
const GenerateRandom = () => +new Date() + String.prototype.slice.call(Math.random(), 2, 7);
const Retarder = (time = 500) => new Promise(resolve => {
setTimeout(() => {
resolve(true);
}, 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 Random = (min, max) => {
return Math.floor(Math.random() * (max - min)) + min;
};
var API$1 = {
IsType,
DeepCopyRA,
IsLeapyear,
FormatTime,
CountDown,
Throttle,
Debounce,
FormatThousand,
Locked,
AddZero,
Calculation,
GenerateRandom,
Retarder,
DateFormat,
Random
};
const Bind = (dom, event, fn, flag = false) => {
dom.addEventListener(event, fn, flag);
return dom;
};
const Unbind = (dom, event, fn, flag = false) => {
dom.removeEventListener(event, fn, flag);
return dom;
};
var BindEvent = {
Bind,
Unbind
};
var IceAPI = { ...API$1, ...BindEvent, Validator };
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', () => {