jojotaoo_components 0.0.1-beta.0

package/dist/components/charts/DateTimeDisplay.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    datetimeProps?: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    option: Record<string, any>;
+    width: number;
+    componentId: string;
+    datetimeProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=DateTimeDisplay.vue.d.ts.map

package/dist/components/charts/DateTimeDisplay.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DateTimeDisplay.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/DateTimeDisplay.vue"],"names":[],"mappings":"AAuGA,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,aAAa,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACpC,CAAC;AA+IF,QAAA,MAAM,YAAY;YAjJP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WACpB,MAAM;iBAFA,MAAM;mBAIJ,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;6EAmJnC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/DateTimeDisplay.vue.js

@@ -0,0 +1,112 @@
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 60,
+    datetimeProps: () => ({}),
+});
+const now = ref(new Date());
+let timer = null;
+const dp = computed(() => props.datetimeProps ?? {});
+const showYear = computed(() => dp.value.showYear !== false);
+const showDate = computed(() => dp.value.showDate !== false);
+const showWeekday = computed(() => dp.value.showWeekday !== false);
+const showTime = computed(() => dp.value.showTime !== false);
+const autoUpdate = computed(() => dp.value.autoUpdate !== false);
+const refreshInterval = computed(() => dp.value.refreshInterval ?? 1000);
+const year = computed(() => now.value.getFullYear());
+const month = computed(() => String(now.value.getMonth() + 1).padStart(2, '0'));
+const day = computed(() => String(now.value.getDate()).padStart(2, '0'));
+const hour = computed(() => String(now.value.getHours()).padStart(2, '0'));
+const minute = computed(() => String(now.value.getMinutes()).padStart(2, '0'));
+const second = computed(() => String(now.value.getSeconds()).padStart(2, '0'));
+const weekdayNames = ['星期日', '星期一', '星期二', '星期三', '星期四', '星期五', '星期六'];
+const weekday = computed(() => weekdayNames[now.value.getDay()]);
+const wrapStyle = computed(() => ({
+    fontSize: (dp.value.fontSize ?? 24) + 'px',
+    color: dp.value.textColor ?? '#cdd6f4',
+    justifyContent: dp.value.textAlign === 'left' ? 'flex-start' : dp.value.textAlign === 'right' ? 'flex-end' : 'center',
+}));
+function startTimer() {
+    stopTimer();
+    if (autoUpdate.value) {
+        timer = setInterval(() => {
+            now.value = new Date();
+        }, refreshInterval.value);
+    }
+}
+function stopTimer() {
+    if (timer !== null) {
+        clearInterval(timer);
+        timer = null;
+    }
+}
+watch([autoUpdate, refreshInterval], () => {
+    startTimer();
+});
+onMounted(() => {
+    startTimer();
+});
+onUnmounted(() => {
+    stopTimer();
+});
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 60,
+    datetimeProps: () => ({}),
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "datetime-wrap" },
+    ...{ style: (__VLS_ctx.wrapStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['datetime-wrap']} */ ;
+if (__VLS_ctx.showYear) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "dt-part" },
+    });
+    /** @type {__VLS_StyleScopedClasses['dt-part']} */ ;
+    (__VLS_ctx.year);
+}
+if (__VLS_ctx.showDate) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "dt-part" },
+    });
+    /** @type {__VLS_StyleScopedClasses['dt-part']} */ ;
+    (__VLS_ctx.month);
+    (__VLS_ctx.day);
+}
+if (__VLS_ctx.showWeekday) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "dt-part" },
+    });
+    /** @type {__VLS_StyleScopedClasses['dt-part']} */ ;
+    (__VLS_ctx.weekday);
+}
+if (__VLS_ctx.showTime) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "dt-part" },
+    });
+    /** @type {__VLS_StyleScopedClasses['dt-part']} */ ;
+    (__VLS_ctx.hour);
+    (__VLS_ctx.minute);
+    (__VLS_ctx.second);
+}
+// @ts-ignore
+[wrapStyle, showYear, year, showDate, month, day, showWeekday, weekday, showTime, hour, minute, second,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/GroupComponent.vue.d.ts

@@ -0,0 +1,13 @@
+import type { CanvasComponent } from '../../types';
+import type { CreateComponentType } from '../../types';
+type __VLS_Props = {
+    component?: CanvasComponent | CreateComponentType;
+    scale?: number;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    component: CanvasComponent | CreateComponentType;
+    scale: number;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=GroupComponent.vue.d.ts.map

package/dist/components/charts/GroupComponent.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupComponent.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/GroupComponent.vue"],"names":[],"mappings":"AAqGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,aAAa,CAAA;AAClD,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAItD,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,eAAe,GAAG,mBAAmB,CAAA;IACjD,KAAK,CAAC,EAAE,MAAM,CAAA;CACf,CAAC;AAuHF,QAAA,MAAM,YAAY;eAzHJ,eAAe,GAAG,mBAAmB;WACzC,MAAM;6EA2Hd,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/GroupComponent.vue.js

@@ -0,0 +1,106 @@
+import { computed } from 'vue';
+import { componentMap, getComponentProps } from '../../composables/useComponentRender';
+import GroupComponent from './GroupComponent.vue';
+import DataFetchManager from './DataFetchManager.vue';
+import { useDashboardStore } from '../../stores/dashboard';
+const store = useDashboardStore();
+const props = withDefaults(defineProps(), {
+    component: undefined,
+    scale: 1,
+});
+const groupList = computed(() => props.component?.groupList ?? []);
+function childStyle(child) {
+    return {
+        left: child.attr.x + 'px',
+        top: child.attr.y + 'px',
+        width: child.attr.w + 'px',
+        height: child.attr.h + 'px',
+    };
+}
+function isSelected(id) {
+    return store.selectedIds.includes(id);
+}
+function onChildClick(event, id) {
+    if (event.ctrlKey || event.metaKey) {
+        store.toggleSelectComponent(id);
+    }
+    else {
+        store.selectComponent(id);
+    }
+}
+const __VLS_defaults = {
+    component: undefined,
+    scale: 1,
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+/** @type {__VLS_StyleScopedClasses['group-child']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "group-component" },
+    ...{ style: ({ backgroundColor: 'rgba(137, 180, 250, 0.06)' }) },
+});
+/** @type {__VLS_StyleScopedClasses['group-component']} */ ;
+for (const [child] of __VLS_vFor((__VLS_ctx.groupList))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ onClick: (...[$event]) => {
+                return __VLS_ctx.onChildClick($event, child.id);
+                // @ts-ignore
+                [groupList, onChildClick,];
+            } },
+        key: (child.id),
+        ...{ class: "group-child" },
+        ...{ class: ({ selected: __VLS_ctx.isSelected(child.id) }) },
+        ...{ style: (__VLS_ctx.childStyle(child)) },
+        'data-comp-id': (child.id),
+    });
+    /** @type {__VLS_StyleScopedClasses['group-child']} */ ;
+    /** @type {__VLS_StyleScopedClasses['selected']} */ ;
+    if (child.isGroup) {
+        const __VLS_0 = GroupComponent;
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+            component: (child),
+            scale: (__VLS_ctx.scale),
+        }));
+        const __VLS_2 = __VLS_1({
+            component: (child),
+            scale: (__VLS_ctx.scale),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    }
+    else {
+        const __VLS_5 = (__VLS_ctx.componentMap[child.key]);
+        // @ts-ignore
+        const __VLS_6 = __VLS_asFunctionalComponent1(__VLS_5, new __VLS_5({
+            ...(__VLS_ctx.getComponentProps(child)),
+        }));
+        const __VLS_7 = __VLS_6({
+            ...(__VLS_ctx.getComponentProps(child)),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    }
+    const __VLS_10 = DataFetchManager;
+    // @ts-ignore
+    const __VLS_11 = __VLS_asFunctionalComponent1(__VLS_10, new __VLS_10({
+        componentId: (child.id),
+        mode: "design",
+    }));
+    const __VLS_12 = __VLS_11({
+        componentId: (child.id),
+        mode: "design",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+    // @ts-ignore
+    [isSelected, childStyle, scale, componentMap, getComponentProps,];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/GroupPreview.vue.d.ts

@@ -0,0 +1,10 @@
+import type { CreateComponentType } from '../../types';
+type __VLS_Props = {
+    component?: CreateComponentType;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    component: CreateComponentType;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=GroupPreview.vue.d.ts.map

package/dist/components/charts/GroupPreview.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GroupPreview.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/GroupPreview.vue"],"names":[],"mappings":"AAiEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,aAAa,CAAA;AAEtD,KAAK,WAAW,GAAG;IACjB,SAAS,CAAC,EAAE,mBAAmB,CAAA;CAChC,CAAC;AAqFF,QAAA,MAAM,YAAY;eAtFJ,mBAAmB;6EAyF/B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/GroupPreview.vue.js

@@ -0,0 +1,76 @@
+import { computed } from 'vue';
+import { componentMap, getComponentProps } from '../../composables/useComponentRender';
+import GroupPreview from './GroupPreview.vue';
+import DataFetchManager from './DataFetchManager.vue';
+const props = withDefaults(defineProps(), {
+    component: undefined,
+});
+const groupList = computed(() => props.component?.groupList ?? []);
+const __VLS_defaults = {
+    component: undefined,
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "group-preview" },
+});
+/** @type {__VLS_StyleScopedClasses['group-preview']} */ ;
+for (const [child] of __VLS_vFor((__VLS_ctx.groupList))) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        key: (child.id),
+        ...{ class: "preview-child" },
+        ...{ style: ({
+                left: child.attr.x + 'px',
+                top: child.attr.y + 'px',
+                width: child.attr.w + 'px',
+                height: child.attr.h + 'px',
+            }) },
+    });
+    /** @type {__VLS_StyleScopedClasses['preview-child']} */ ;
+    if (child.isGroup) {
+        const __VLS_0 = GroupPreview;
+        // @ts-ignore
+        const __VLS_1 = __VLS_asFunctionalComponent1(__VLS_0, new __VLS_0({
+            component: (child),
+        }));
+        const __VLS_2 = __VLS_1({
+            component: (child),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_1));
+    }
+    else {
+        const __VLS_5 = (__VLS_ctx.componentMap[child.key]);
+        // @ts-ignore
+        const __VLS_6 = __VLS_asFunctionalComponent1(__VLS_5, new __VLS_5({
+            ...(__VLS_ctx.getComponentProps(child)),
+        }));
+        const __VLS_7 = __VLS_6({
+            ...(__VLS_ctx.getComponentProps(child)),
+        }, ...__VLS_functionalComponentArgsRest(__VLS_6));
+    }
+    const __VLS_10 = DataFetchManager;
+    // @ts-ignore
+    const __VLS_11 = __VLS_asFunctionalComponent1(__VLS_10, new __VLS_10({
+        componentId: (child.id),
+        mode: "preview",
+    }));
+    const __VLS_12 = __VLS_11({
+        componentId: (child.id),
+        mode: "preview",
+    }, ...__VLS_functionalComponentArgsRest(__VLS_11));
+    // @ts-ignore
+    [groupList, componentMap, getComponentProps,];
+}
+// @ts-ignore
+[];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/HeaderLineChart.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    lineProps?: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    option: Record<string, any>;
+    width: number;
+    componentId: string;
+    lineProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=HeaderLineChart.vue.d.ts.map

package/dist/components/charts/HeaderLineChart.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"HeaderLineChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/HeaderLineChart.vue"],"names":[],"mappings":"AAsEA,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,SAAS,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CAChC,CAAC;AA2EF,QAAA,MAAM,YAAY;YA7EP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WACpB,MAAM;iBAFA,MAAM;eAIR,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;6EA+E/B,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/HeaderLineChart.vue.js

@@ -0,0 +1,62 @@
+import { computed } from 'vue';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 1,
+    lineProps: () => ({}),
+});
+const lp = computed(() => props.lineProps ?? {});
+const lineStyle = computed(() => {
+    const color = lp.value.lineColor ?? '#00c8ff';
+    const opacity = lp.value.lineOpacity ?? 0.3;
+    const direction = lp.value.lineDirection ?? 'right';
+    const h = lp.value.height ?? 1;
+    const marginX = lp.value.marginX ?? 24;
+    const dir = direction === 'left' ? '270deg' : direction === 'center' ? '90deg' : '90deg';
+    const dirLabel = direction === 'left' ? 'left' : 'center';
+    const gradient = dirLabel === 'center'
+        ? `linear-gradient(90deg, transparent, ${color}, transparent)`
+        : direction === 'left'
+            ? `linear-gradient(270deg, transparent, ${color})`
+            : `linear-gradient(90deg, transparent, ${color})`;
+    return {
+        height: h + 'px',
+        background: gradient,
+        opacity,
+        marginRight: direction === 'right' ? marginX + 'px' : '0',
+        marginLeft: direction === 'left' ? marginX + 'px' : '0',
+    };
+});
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 1,
+    lineProps: () => ({}),
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "header-line-wrap" },
+});
+/** @type {__VLS_StyleScopedClasses['header-line-wrap']} */ ;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "header-line" },
+    ...{ style: (__VLS_ctx.lineStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['header-line']} */ ;
+// @ts-ignore
+[lineStyle,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/ImageDisplay.vue.d.ts

@@ -0,0 +1,17 @@
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    imageProps?: Record<string, any>;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    height: number;
+    option: Record<string, any>;
+    width: number;
+    componentId: string;
+    imageProps: Record<string, any>;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=ImageDisplay.vue.d.ts.map

package/dist/components/charts/ImageDisplay.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ImageDisplay.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/ImageDisplay.vue"],"names":[],"mappings":"AA4HA,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;CACjC,CAAC;AAgIF,QAAA,MAAM,YAAY;YAlIP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;WACpB,MAAM;iBAFA,MAAM;gBAIP,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;6EAoIhC,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}

package/dist/components/charts/ImageDisplay.vue.js

@@ -0,0 +1,106 @@
+import { ref, watch } from 'vue';
+const props = withDefaults(defineProps(), {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    imageProps: () => ({}),
+});
+const imageUrl = ref('');
+const localImageScale = ref('cover');
+const localBorderRadius = ref(0);
+const localOpacity = ref(1);
+const localBorderWidth = ref(0);
+const localBorderColor = ref('#45475a');
+const localBgColor = ref('transparent');
+function syncFromProps() {
+    const ip = props.imageProps ?? {};
+    imageUrl.value = props.option?.dataset ?? '';
+    localImageScale.value = ip.imageScale ?? 'cover';
+    localBorderRadius.value = ip.borderRadius ?? 0;
+    localOpacity.value = ip.opacity ?? 1;
+    localBorderWidth.value = ip.borderWidth ?? 0;
+    localBorderColor.value = ip.borderColor ?? '#45475a';
+    localBgColor.value = ip.bgColor ?? 'transparent';
+}
+function onImageError() {
+    imageUrl.value = '';
+}
+const containerStyle = ref({});
+const imageStyle = ref({});
+function rebuildStyles() {
+    containerStyle.value = {
+        backgroundColor: localBgColor.value,
+        borderRadius: `${localBorderRadius.value}px`,
+        width: '100%',
+        height: '100%',
+        boxSizing: 'border-box',
+        overflow: 'hidden',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+    };
+    imageStyle.value = {
+        width: '100%',
+        height: '100%',
+        objectFit: localImageScale.value,
+        borderRadius: `${localBorderRadius.value}px`,
+        opacity: localOpacity.value,
+        border: localBorderWidth.value > 0 ? `${localBorderWidth.value}px solid ${localBorderColor.value}` : 'none',
+    };
+}
+watch(() => props.imageProps, syncFromProps, { deep: true, immediate: true });
+watch(() => props.option, syncFromProps, { deep: true, immediate: true });
+watch([imageUrl, localImageScale, localBorderRadius, localOpacity, localBorderWidth, localBorderColor, localBgColor], rebuildStyles, { immediate: true });
+const __VLS_defaults = {
+    componentId: '',
+    option: () => ({}),
+    width: 400,
+    height: 300,
+    imageProps: () => ({}),
+};
+const __VLS_ctx = {
+    ...{},
+    ...{},
+    ...{},
+    ...{},
+};
+let __VLS_components;
+let __VLS_intrinsics;
+let __VLS_directives;
+__VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+    ...{ class: "image-display" },
+    ...{ style: (__VLS_ctx.containerStyle) },
+});
+/** @type {__VLS_StyleScopedClasses['image-display']} */ ;
+if (__VLS_ctx.imageUrl) {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.img)({
+        ...{ onError: (__VLS_ctx.onImageError) },
+        ...{ class: "image-content" },
+        src: (__VLS_ctx.imageUrl),
+        ...{ style: (__VLS_ctx.imageStyle) },
+        alt: "",
+    });
+    /** @type {__VLS_StyleScopedClasses['image-content']} */ ;
+}
+else {
+    __VLS_asFunctionalElement1(__VLS_intrinsics.div, __VLS_intrinsics.div)({
+        ...{ class: "image-placeholder" },
+    });
+    /** @type {__VLS_StyleScopedClasses['image-placeholder']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "placeholder-icon" },
+    });
+    /** @type {__VLS_StyleScopedClasses['placeholder-icon']} */ ;
+    __VLS_asFunctionalElement1(__VLS_intrinsics.span, __VLS_intrinsics.span)({
+        ...{ class: "placeholder-text" },
+    });
+    /** @type {__VLS_StyleScopedClasses['placeholder-text']} */ ;
+}
+// @ts-ignore
+[containerStyle, imageUrl, imageUrl, onImageError, imageStyle,];
+const __VLS_export = (await import('vue')).defineComponent({
+    __typeProps: {},
+    props: {},
+});
+export default {};

package/dist/components/charts/LineChart.vue.d.ts

@@ -0,0 +1,20 @@
+import type { ChartStyleConfig } from '../../types';
+type __VLS_Props = {
+    componentId?: string;
+    option?: Record<string, any>;
+    width?: number;
+    height?: number;
+    bgColor?: string;
+    chartStyle?: ChartStyleConfig;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    bgColor: string;
+    height: number;
+    option: Record<string, any>;
+    chartStyle: ChartStyleConfig;
+    width: number;
+    componentId: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;
+//# sourceMappingURL=LineChart.vue.d.ts.map

package/dist/components/charts/LineChart.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LineChart.vue.d.ts","sourceRoot":"","sources":["../../../src/components/charts/LineChart.vue"],"names":[],"mappings":"AA4HA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,aAAa,CAAA;AAGnD,KAAK,WAAW,GAAG;IACjB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,MAAM,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,CAAA;IAC5B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,OAAO,CAAC,EAAE,MAAM,CAAA;IAChB,UAAU,CAAC,EAAE,gBAAgB,CAAA;CAC9B,CAAC;AAgIF,QAAA,MAAM,YAAY;aAlIN,MAAM;YADP,MAAM;YAFN,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC;gBAIf,gBAAgB;WAHrB,MAAM;iBAFA,MAAM;6EAyIpB,CAAC;wBACkB,OAAO,YAAY;AAAxC,wBAAyC"}