@vtj/ui 0.0.5

package/src/components/XChartBar/Bar.vue

@@ -0,0 +1,27 @@
+<template>
+  <XChart :key="key" :optionFactory="optionFactory"></XChart>
+</template>
+<script lang="ts" setup>
+import { XChart } from '@vtj/ui';
+import useRectChart from '../../hooks/useRectChart';
+export type ISourceType = Array<Record<string, any>>;
+
+export type IOptionFactory = (
+  opt?: Record<string, any>
+) => Promise<Record<string, any>>;
+
+export interface Props {
+  category?: 'x' | 'y';
+  dimensions?: string[];
+  source?: ISourceType | (() => Promise<ISourceType>);
+  optionFactory?: IOptionFactory;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  category: 'x',
+  dimensions: () => [],
+  source: () => []
+});
+
+const { optionFactory, key } = useRectChart(props, 'bar');
+</script>

package/src/components/XChartBar/index.ts

@@ -0,0 +1,8 @@
+import Bar from './Bar.vue';
+import { App } from 'vue';
+
+Bar.install = function (app: App) {
+  app.component('XChartBar', Bar);
+};
+
+export default Bar;

package/src/components/XChartLine/Line.vue

@@ -0,0 +1,27 @@
+<template>
+  <XChart :key="key" :optionFactory="optionFactory"></XChart>
+</template>
+<script lang="ts" setup>
+import { XChart } from '@vtj/ui';
+import useRectChart from '../../hooks/useRectChart';
+export type ISourceType = Array<Record<string, any>>;
+
+export type IOptionFactory = (
+  opt?: Record<string, any>
+) => Promise<Record<string, any>>;
+
+export interface Props {
+  category?: 'x' | 'y';
+  dimensions?: string[];
+  source?: ISourceType | (() => Promise<ISourceType>);
+  optionFactory?: IOptionFactory;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  category: 'x',
+  dimensions: () => [],
+  source: () => []
+});
+
+const { optionFactory, key } = useRectChart(props, 'line');
+</script>

package/src/components/XChartLine/index.ts

@@ -0,0 +1,8 @@
+import Line from './Line.vue';
+import { App } from 'vue';
+
+Line.install = function (app: App) {
+  app.component('XChartLine', Line);
+};
+
+export default Line;

package/src/components/XChartPie/Pie.vue

@@ -0,0 +1,54 @@
+<template>
+  <XChart :key="key" :optionFactory="optionFactory"></XChart>
+</template>
+<script lang="ts" setup>
+import { XChart } from '@vtj/ui';
+import { merge } from '@vtj/utils';
+import { ref, watch } from 'vue';
+export type ISourceType = Array<Record<string, any>>;
+
+export type IOptionFactory = (
+  opt?: Record<string, any>
+) => Promise<Record<string, any>>;
+
+export interface Props {
+  dimensions?: string[];
+  source?: ISourceType | (() => Promise<ISourceType>);
+  optionFactory?: IOptionFactory;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  dimensions: () => [],
+  source: () => []
+});
+
+const key = ref(Symbol('key'));
+
+const optionFactory = async (opts: any) => {
+  const option = {
+    ...opts,
+    dataset: {
+      dimensions: props.dimensions,
+      source:
+        typeof props.source === 'function' ? await props.source() : props.source
+    },
+    series: [
+      {
+        type: 'pie'
+      }
+    ]
+  };
+
+  return merge(
+    option,
+    props.optionFactory ? await props.optionFactory(option) : {}
+  );
+};
+
+watch(
+  () => [props.dimensions, props.source, props.optionFactory],
+  () => {
+    key.value = Symbol('key');
+  }
+);
+</script>

package/src/components/XChartPie/index.ts

@@ -0,0 +1,8 @@
+import Pie from './Pie.vue';
+import { App } from 'vue';
+
+Pie.install = function (app: App) {
+  app.component('XChartPie', Pie);
+};
+
+export default Pie;

package/src/components/XTestSuit/TestSuit.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="x-test-suit">
+    <div class="x-test-suit__header">XTestSuit</div>
+    <div class="x-test-suit__body">
+      <div class="x-test-suit_props">
+        <div v-for="item in propList">
+          {{ item.name }}: {{ JSON.stringify(item.value) }}
+        </div>
+      </div>
+      <div class="x-test-suit_events">
+        <button @click="onClick">Tigger Click Event</button>
+      </div>
+      <div class="x-test-suit_slots">
+        <div>
+          <slot> Default Slot</slot>
+        </div>
+        <div v-if="$slots.footer">
+          <slot name="footer"></slot>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts" setup>
+import { computed } from 'vue';
+export interface Props {
+  p1?: string;
+  p2?: number;
+  p3?: boolean;
+  p4?: any;
+}
+const props = withDefaults(defineProps<Props>(), {});
+const emit = defineEmits(['click']);
+
+const propList = computed(() => {
+  return [
+    { name: 'p1', value: props.p1 },
+    { name: 'p2', value: props.p2 },
+    { name: 'p3', value: props.p3 },
+    { name: 'p4', value: props.p4 }
+  ];
+});
+
+const onClick = () => {
+  emit('click');
+};
+</script>

package/src/components/XTestSuit/index.ts

@@ -0,0 +1,8 @@
+import TestSuit from './TestSuit.vue';
+import { App } from 'vue';
+
+TestSuit.install = function (app: App) {
+  app.component('XTestSuit', TestSuit);
+};
+
+export default TestSuit;

package/src/components/XTestSuit/style.scss

@@ -0,0 +1,14 @@
+.x-test-suit {
+  width: 100%;
+  height: 100%;
+  border: 1px solid #ccc;
+  &__header {
+    padding: 5px 10px;
+    background-color: #efefef;
+  }
+  &__body {
+    padding: 10px;
+  }
+  &__props {
+  }
+}

package/src/hooks/useECharts.ts

@@ -0,0 +1,55 @@
+import { Ref, ref, onMounted, watch } from 'vue';
+import * as echarts from 'echarts';
+import { useResizeObserver } from '@vueuse/core';
+import { merge, debounce } from '@vtj/utils';
+
+export type IOptionFactory = (
+  opt?: Record<string, any>
+) => Promise<Record<string, any>>;
+
+export interface Props {
+  width?: string;
+  height?: string;
+  option?: Record<string, any>;
+  optionFactory?: IOptionFactory;
+}
+
+export default function (container: Ref, props: Props = {}) {
+  const done = ref(false);
+  let chart: any = null;
+  const init = async (opt?: Record<string, any>) => {
+    chart = echarts.init(container.value);
+    const option =
+      opt ||
+      merge(
+        {},
+        props.option,
+        props.optionFactory ? await props.optionFactory(props.option) : {}
+      );
+    chart.setOption(option);
+  };
+
+  const reset = () => {
+    chart?.dispose();
+    init();
+  };
+
+  const resize = debounce(() => {
+    if (!done.value) {
+      done.value = true;
+      return;
+    }
+    chart?.resize();
+  }, 100);
+
+  onMounted(init);
+
+  watch(() => [props.option, props.optionFactory], reset);
+  useResizeObserver(container, resize);
+  return {
+    getChart: () => chart,
+    echarts,
+    reset,
+    resize
+  };
+}

package/src/hooks/useRectChart.ts

@@ -0,0 +1,46 @@
+import { merge } from '@vtj/utils';
+import { ref, watch } from 'vue';
+export default function (props: any, chartType: 'line' | 'bar') {
+  const optionFactory = async (opt?: Record<string, any>) => {
+    const option: Record<string, any> = {
+      ...opt,
+      title: {},
+      xAxis: {},
+      yAxis: {}
+    };
+    if (props.category === 'x') {
+      option.xAxis = { type: 'category' };
+      option.yAxis = {};
+    } else {
+      option.xAxis = {};
+      option.yAxis = { type: 'category' };
+    }
+    option.dataset = {
+      dimensions: props.dimensions,
+      source:
+        typeof props.source === 'function' ? await props.source() : props.source
+    };
+    const length = (props.dimensions || []).length;
+    if (length > 1) {
+      const series = new Array(length - 1);
+      series.fill({ type: chartType });
+      option.series = series;
+    }
+
+    return merge(
+      option,
+      props.optionFactory ? await props.optionFactory(option) : {}
+    );
+  };
+  const key = ref(Symbol('key'));
+  watch(
+    () => [props.category, props.dimensions, props.source, props.optionFactory],
+    () => {
+      key.value = Symbol('key');
+    }
+  );
+  return {
+    optionFactory,
+    key
+  };
+}

package/src/index.ts

@@ -0,0 +1,23 @@
+import './theme/index.scss';
+import { App } from 'vue';
+import XTestSuit from './components/XTestSuit';
+import XChart from './components/XChart';
+import XChartBar from './components/XChartBar';
+import XChartLine from './components/XChartLine';
+import XChartPie from './components/XChartPie';
+
+const components: Record<string, any> = {
+  XTestSuit,
+  XChart,
+  XChartBar,
+  XChartLine,
+  XChartPie
+};
+
+components.install = function (app: App) {
+  Object.keys(components).forEach((key) => {
+    app.component(key, components[key]);
+  });
+};
+
+export { XTestSuit, XChart, XChartBar, XChartLine, XChartPie };

package/src/theme/_vars.scss

@@ -0,0 +1,8 @@
+$--color-primary: #409eff;
+$--color-primary-dark: #337ecc;
+
+$--white: #fff;
+$--black: #000;
+
+$--base-background: $--white;
+$--page-background: #f2f3f5;

package/src/theme/index.scss

@@ -0,0 +1,4 @@
+@import './vars';
+@import './base.scss';
+@import '../components/XTestSuit/style.scss';
+@import '../components/XChart/style.scss';

package/types/dev/vite-env.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="vite/client" />
+
+declare module '*.vue' {
+  import type { DefineComponent } from 'vue';
+  const component: DefineComponent<{}, {}, any>;
+  export default component;
+}

package/types/index.d.ts

@@ -0,0 +1,4 @@
+declare module '@vtj/ui' {
+  //@ts-ignore
+  export * from '@vtj/ui/types/src/index';
+}

package/types/src/components/XChart/Chart.vue.d.ts

@@ -0,0 +1,69 @@
+export declare type IOptionFactory = (opt?: Record<string, any>) => Promise<Record<string, any>>;
+export interface Props {
+    width?: string;
+    height?: string;
+    option?: Record<string, any>;
+    optionFactory?: IOptionFactory;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    width: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    option: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    optionFactory: {
+        type: FunctionConstructor;
+        required: false;
+    };
+}, {
+    props: {
+        width: string;
+        height: string;
+        option: Record<string, any>;
+        optionFactory?: IOptionFactory | undefined;
+    };
+    container: import("vue").Ref<HTMLElement | undefined>;
+    style: import("vue").ComputedRef<{
+        width: string;
+        height: string;
+    }>;
+    getChart: () => any;
+    reset: () => void;
+    resize: import("lodash").DebouncedFunc<() => void>;
+    echarts: typeof import("echarts/types/dist/echarts");
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    width: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    option: {
+        type: ObjectConstructor;
+        required: false;
+        default: () => {};
+    };
+    optionFactory: {
+        type: FunctionConstructor;
+        required: false;
+    };
+}>>, {
+    width: string;
+    height: string;
+    option: Record<string, any>;
+}>;
+export default _sfc_main;

package/types/src/components/XChart/index.d.ts

@@ -0,0 +1,2 @@
+import Chart from './Chart.vue';
+export default Chart;

package/types/src/components/XChartBar/Bar.vue.d.ts

@@ -0,0 +1,124 @@
+export declare type ISourceType = Array<Record<string, any>>;
+export declare type IOptionFactory = (opt?: Record<string, any>) => Promise<Record<string, any>>;
+export interface Props {
+    category?: 'x' | 'y';
+    dimensions?: string[];
+    source?: ISourceType | (() => Promise<ISourceType>);
+    optionFactory?: IOptionFactory;
+}
+declare const _sfc_main: import("vue").DefineComponent<{
+    category: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    dimensions: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => never[];
+    };
+    source: {
+        type: (FunctionConstructor | ArrayConstructor)[];
+        required: false;
+        default: () => never[];
+    };
+    optionFactory: {
+        type: FunctionConstructor;
+        required: false;
+    };
+}, {
+    props: {
+        category: 'x' | 'y';
+        dimensions: string[];
+        source: ISourceType | (() => Promise<ISourceType>);
+        optionFactory?: IOptionFactory | undefined;
+    };
+    optionFactory: (opt?: Record<string, any> | undefined) => Promise<any>;
+    key: import("vue").Ref<symbol>;
+    XChart: import("vue").DefineComponent<{
+        width: {
+            type: StringConstructor;
+            required: false;
+            default: string;
+        };
+        height: {
+            type: StringConstructor;
+            required: false;
+            default: string;
+        };
+        option: {
+            type: ObjectConstructor;
+            required: false;
+            default: () => {};
+        };
+        optionFactory: {
+            type: FunctionConstructor;
+            required: false;
+        };
+    }, {
+        props: {
+            width: string;
+            height: string;
+            option: Record<string, any>;
+            optionFactory?: import("../XChart/Chart.vue").IOptionFactory | undefined;
+        };
+        container: import("vue").Ref<HTMLElement | undefined>;
+        style: import("vue").ComputedRef<{
+            width: string;
+            height: string;
+        }>;
+        getChart: () => any;
+        reset: () => void;
+        resize: import("lodash").DebouncedFunc<() => void>;
+        echarts: typeof import("echarts/types/dist/echarts");
+    }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+        width: {
+            type: StringConstructor;
+            required: false;
+            default: string;
+        };
+        height: {
+            type: StringConstructor;
+            required: false;
+            default: string;
+        };
+        option: {
+            type: ObjectConstructor;
+            required: false;
+            default: () => {};
+        };
+        optionFactory: {
+            type: FunctionConstructor;
+            required: false;
+        };
+    }>>, {
+        width: string;
+        height: string;
+        option: Record<string, any>;
+    }>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, Record<string, any>, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    category: {
+        type: StringConstructor;
+        required: false;
+        default: string;
+    };
+    dimensions: {
+        type: ArrayConstructor;
+        required: false;
+        default: () => never[];
+    };
+    source: {
+        type: (FunctionConstructor | ArrayConstructor)[];
+        required: false;
+        default: () => never[];
+    };
+    optionFactory: {
+        type: FunctionConstructor;
+        required: false;
+    };
+}>>, {
+    category: string;
+    dimensions: unknown[];
+    source: Function | unknown[];
+}>;
+export default _sfc_main;

package/types/src/components/XChartBar/index.d.ts

@@ -0,0 +1,2 @@
+import Bar from './Bar.vue';
+export default Bar;