@vtj/ui 0.0.5 → 0.4.0

package/src/components/XChartBar/Bar.vue

@@ -1,27 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,27 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,54 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,47 +0,0 @@
-<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

@@ -1,8 +0,0 @@
-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

@@ -1,14 +0,0 @@
-.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

@@ -1,55 +0,0 @@
-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

@@ -1,46 +0,0 @@
-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

@@ -1,23 +0,0 @@
-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

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

package/src/theme/index.scss

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

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

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

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

@@ -1,69 +0,0 @@
-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

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

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

@@ -1,124 +0,0 @@
-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

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

package/types/src/components/XChartLine/Line.vue.d.ts

@@ -1,124 +0,0 @@
-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;