hfn-components 0.6.1 → 0.6.2

package/es/components/pieChart/src/HtPieChart.vue.d.ts

@@ -0,0 +1,109 @@
+export interface Legend {
+    name: string;
+    lineType: string;
+    isShow: boolean;
+    color: string;
+}
+declare const _default: import("vue").DefineComponent<{
+    readonly chartData: {
+        readonly type: import("vue").PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly legendData: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    readonly legendType: {
+        readonly type: StringConstructor;
+        readonly default: "scroll";
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    readonly legendFormatter: {
+        readonly type: FunctionConstructor;
+        readonly default: () => null;
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly lineColor: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: readonly [];
+    };
+}, {
+    props: import("@vue/shared").LooseRequired<{
+        readonly chartData: any[];
+        readonly chartId: string;
+        readonly floatNumber: number;
+        readonly watchResize: boolean;
+        readonly lineColor: string[];
+        readonly legendData: Record<string, any>;
+        readonly legendType: string;
+        readonly legendFormatter: Function;
+    } & {}>;
+    myChart: import("vue").ShallowRef<any>;
+    echartOptions: any;
+    chartResize: () => void;
+    noData: import("vue").Ref<boolean>;
+    allLegend: import("vue").Ref<{
+        name: string;
+        lineType: string;
+        isShow: boolean;
+        color: string;
+    }[]>;
+    drawGraph: () => void;
+    lengedDeal: () => void;
+    setEchartTooltip: () => void;
+    legendStatus: (item: Legend, index: number) => void;
+    echartInit: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    readonly chartData: {
+        readonly type: import("vue").PropType<any[]>;
+        readonly default: () => never[];
+    };
+    readonly legendData: {
+        readonly type: ObjectConstructor;
+        readonly default: () => void;
+    };
+    readonly legendType: {
+        readonly type: StringConstructor;
+        readonly default: "scroll";
+    };
+    readonly chartId: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly floatNumber: {
+        readonly type: NumberConstructor;
+        readonly default: 2;
+    };
+    readonly legendFormatter: {
+        readonly type: FunctionConstructor;
+        readonly default: () => null;
+    };
+    readonly watchResize: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly lineColor: {
+        readonly type: import("vue").PropType<string[]>;
+        readonly default: readonly [];
+    };
+}>>, {
+    readonly chartData: any[];
+    readonly chartId: string;
+    readonly floatNumber: number;
+    readonly watchResize: boolean;
+    readonly lineColor: string[];
+    readonly legendData: Record<string, any>;
+    readonly legendType: string;
+    readonly legendFormatter: Function;
+}, {}>;
+export default _default;

package/es/components/pieChart/src/HtPieChart.vue.mjs

@@ -0,0 +1,61 @@
+import _sfc_main from './HtPieChart.vue2.mjs';
+import { openBlock, createElementBlock, createElementVNode, createCommentVNode, Fragment, renderList, normalizeStyle, toDisplayString } from 'vue';
+import _export_sfc from '../../../_virtual/_plugin-vue_export-helper.mjs';
+
+const _hoisted_1 = { class: "echart-box" };
+const _hoisted_2 = { class: "echart-lenged" };
+const _hoisted_3 = ["onClick"];
+const _hoisted_4 = ["id"];
+const _hoisted_5 = {
+  key: 0,
+  class: "noData"
+};
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", _hoisted_1, [
+    createElementVNode("div", _hoisted_2, [
+      createCommentVNode('  @mouseover="legendEnter(index)"\n        @mouseleave="legendLeave()" '),
+      (openBlock(true), createElementBlock(
+        Fragment,
+        null,
+        renderList($setup.allLegend, (item, index) => {
+          return openBlock(), createElementBlock("div", {
+            class: "span-box mb10",
+            key: index,
+            onClick: ($event) => $setup.legendStatus(item, index)
+          }, [
+            createElementVNode(
+              "span",
+              {
+                class: "bg-span-bar",
+                style: normalizeStyle({ background: item.isShow ? item.color : "#ccc" })
+              },
+              null,
+              4
+              /* STYLE */
+            ),
+            createElementVNode(
+              "span",
+              {
+                style: normalizeStyle({ color: item.isShow ? "#000" : "#ccc" })
+              },
+              toDisplayString(item.name),
+              5
+              /* TEXT, STYLE */
+            )
+          ], 8, _hoisted_3);
+        }),
+        128
+        /* KEYED_FRAGMENT */
+      ))
+    ]),
+    createElementVNode("div", {
+      class: "_100",
+      id: _ctx.chartId
+    }, null, 8, _hoisted_4),
+    createCommentVNode(" \u56FE\u4F8B\u5168\u7F6E\u7070\u76D2\u5B50 "),
+    $setup.noData ? (openBlock(), createElementBlock("div", _hoisted_5, "\u6682\u65E0\u6570\u636E")) : createCommentVNode("v-if", true)
+  ]);
+}
+var htPieChart = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__file", "/Users/libiluo/Desktop/company/component-library/packages/components/pieChart/src/HtPieChart.vue"]]);
+
+export { htPieChart as default };

package/es/components/pieChart/src/HtPieChart.vue2.mjs

@@ -0,0 +1,103 @@
+import { defineComponent, shallowRef, reactive, watch, ref } from 'vue';
+import { pieProps } from './HtPieChart.mjs';
+import cloneDeep from 'lodash.clonedeep';
+import { useBasicPieConfig } from '../../../constants/chartConfig.mjs';
+import * as echarts from 'echarts/core';
+
+var _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "HtPieChart",
+  props: pieProps,
+  setup(__props, { expose: __expose }) {
+    __expose();
+    const props = __props;
+    const myChart = shallowRef();
+    const echartOptions = reactive(cloneDeep(useBasicPieConfig(props.floatNumber)));
+    watch(
+      () => props.chartData,
+      (val) => {
+        echartOptions.series[0].data = cloneDeep(val);
+        drawGraph();
+      },
+      { deep: true }
+    );
+    watch(
+      () => props.watchResize,
+      () => {
+        chartResize();
+      }
+    );
+    watch(
+      () => props.lineColor,
+      (val) => {
+        if (val && val.length > 0) {
+          echartOptions.color = props.lineColor;
+          if (myChart.value) {
+            echartInit();
+          }
+        }
+      },
+      { deep: true, immediate: true }
+    );
+    const chartResize = () => {
+      myChart.value.resize();
+    };
+    const noData = ref(false);
+    const allLegend = ref([]);
+    const drawGraph = () => {
+      lengedDeal();
+      setEchartTooltip();
+      echartInit();
+    };
+    const lengedDeal = () => {
+      allLegend.value = [];
+      props.chartData.forEach((item, index) => {
+        const data = {
+          name: item.name,
+          isShow: true,
+          lineType: item.type,
+          color: echartOptions.color[index % echartOptions.color.length]
+        };
+        allLegend.value.push(data);
+      });
+    };
+    const setEchartTooltip = () => {
+      echartOptions.tooltip = {
+        trigger: "item",
+        // eslint-disable-next-line @typescript-eslint/no-explicit-any
+        formatter: function(params) {
+          let html;
+          html = `<div>${params.seriesName}</div>`;
+          html += `<span> ${params.name}: 
+            ${params.data.percent ? (params.data.percent * 100).toFixed(props.floatNumber) : params.percent.toFixed(props.floatNumber)}%<span>`;
+          return html;
+        }
+      };
+    };
+    const legendStatus = (item, index) => {
+      const status = !item.isShow;
+      allLegend.value[index].isShow = status;
+      if (allLegend.value.every((item2) => item2.isShow === false)) {
+        noData.value = true;
+      } else {
+        noData.value = false;
+      }
+      myChart.value.setOption({
+        legend: { selected: { [item.name]: status } }
+      });
+    };
+    const echartInit = () => {
+      setTimeout(() => {
+        if (!myChart.value) {
+          const ele = document.getElementById(props.chartId);
+          myChart.value = echarts.init(ele, null, { devicePixelRatio: 2, locale: "ZH" });
+        }
+        myChart.value.setOption(echartOptions, true);
+      }, 200);
+    };
+    const __returned__ = { props, myChart, echartOptions, chartResize, noData, allLegend, drawGraph, lengedDeal, setEchartTooltip, legendStatus, echartInit };
+    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
+    return __returned__;
+  }
+});
+
+export { _sfc_main as default };

package/es/components/pieChart/style/index.d.ts

@@ -0,0 +1 @@
+import 'hfn-components/theme-chalk/src/chart.scss';

package/es/components/pieChart/style/index.mjs

@@ -0,0 +1 @@
+import 'hfn-components/theme-chalk/src/chart.scss';

package/es/components/table/HtTable.d.ts

@@ -0,0 +1,142 @@
+import type HtTable from './HtTable.vue';
+import type { ExtractPropTypes, PropType } from 'vue';
+import { ColumnGroupType, ColumnType, TablePaginationConfig, SortOrder } from 'ant-design-vue/es/table/interface';
+import { TableColumnType } from 'ant-design-vue';
+interface CustomColumn {
+    title: string;
+    key: string;
+    titles: string[];
+    dataIndex?: string;
+    width?: string | number;
+    align?: 'left' | 'center' | 'right';
+    slotData?: string;
+    fixed?: 'left' | 'right';
+    filters?: any[];
+    filterMultiple?: boolean;
+    sorter?: boolean;
+    sortOrder?: SortOrder;
+}
+export type TableColumns = CustomColumn | ColumnGroupType<any> | ColumnType<any>;
+export interface ActionItem {
+    label?: string;
+    disabled?: boolean;
+    type: string;
+    icon?: string;
+    iconType?: string;
+    menu?: Array<any>;
+    url?: string;
+    handler: (record: any) => void;
+    showAction?: (record: any) => boolean;
+}
+export interface HtTableColumnType extends TableColumnType {
+    componentType: string;
+}
+export declare const tableProps: {
+    readonly loading: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly columns: {
+        readonly type: PropType<TableColumns[]>;
+        readonly default: () => never[];
+    };
+    readonly actions: {
+        readonly type: PropType<ActionItem[]>;
+        readonly default: () => never[];
+    };
+    readonly dataSource: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly total: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly pageSize: {
+        readonly type: NumberConstructor;
+        readonly default: 20;
+    };
+    readonly nowPage: {
+        readonly type: NumberConstructor;
+        readonly default: 1;
+    };
+    readonly selectShow: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly selectedKeys: {
+        readonly type: PropType<(string | number)[]>;
+        readonly default: () => never[];
+    };
+    readonly isPagination: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly showOriginalPagination: {
+        readonly type: PropType<false | object | TablePaginationConfig>;
+        readonly default: false;
+    };
+    readonly isScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly categoryList: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly yIsScroll: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly yHeight: {
+        readonly type: NumberConstructor;
+        readonly default: 0;
+    };
+    readonly isPeople: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly switching: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly selectKey: {
+        readonly type: StringConstructor;
+        readonly default: "";
+    };
+    readonly isTeam: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isTotal: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly totalData: {
+        readonly type: ArrayConstructor;
+        readonly default: () => never[];
+    };
+    readonly totalIndex: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly isExcess: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly isRowKey: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+    readonly isSticky: {
+        readonly type: BooleanConstructor;
+        readonly default: false;
+    };
+    readonly smallHeader: {
+        readonly type: BooleanConstructor;
+        readonly default: true;
+    };
+};
+export type TableProps = ExtractPropTypes<typeof tableProps>;
+export type HtTabletInstance = InstanceType<typeof HtTable>;
+export {};

package/es/components/table/HtTable.mjs

@@ -0,0 +1,136 @@
+const tableProps = {
+  // loading状态
+  loading: {
+    type: Boolean,
+    default: false
+  },
+  // 表格列配置
+  columns: {
+    type: Array,
+    default: () => []
+  },
+  actions: {
+    type: Array,
+    default: () => []
+  },
+  // 表格数据
+  dataSource: {
+    type: Array,
+    default: () => []
+  },
+  // 表格数据总数
+  total: {
+    type: Number,
+    default: 0
+  },
+  // 每页条数
+  pageSize: {
+    type: Number,
+    default: 20
+  },
+  // 当前页
+  nowPage: {
+    type: Number,
+    default: 1
+  },
+  // 是否显示选择框
+  selectShow: {
+    type: Boolean,
+    default: false
+  },
+  // 选中数据
+  selectedKeys: {
+    type: Array,
+    default: () => []
+  },
+  // isClear: {
+  //     type: Boolean,
+  //     default: false
+  // },
+  // isAdvisor: {
+  //     type: Boolean,
+  //     default: false
+  // },
+  // 是否显示分页
+  isPagination: {
+    type: Boolean,
+    default: true
+  },
+  // 是否启用表格分页器
+  showOriginalPagination: {
+    type: [Boolean, Object],
+    default: false
+  },
+  // 表格x轴是否可滚动
+  isScroll: {
+    type: Boolean,
+    default: true
+  },
+  categoryList: {
+    type: Array,
+    default: () => []
+  },
+  // isStrategy: {
+  //     type: Number,
+  //     default: 1
+  // },
+  // 表格y轴是否可滚动
+  yIsScroll: {
+    type: Boolean,
+    default: false
+  },
+  // y轴滚动高度
+  yHeight: {
+    type: Number,
+    default: 0
+  },
+  // 是否是个人
+  isPeople: {
+    type: Boolean,
+    default: false
+  },
+  switching: {
+    type: Boolean,
+    default: false
+  },
+  selectKey: {
+    // 多选时默认选择的字段
+    type: String,
+    default: ""
+  },
+  isTeam: {
+    // 区分个人&团队
+    type: Boolean,
+    default: false
+  },
+  isTotal: {
+    type: Boolean,
+    default: false
+  },
+  totalData: {
+    type: Array,
+    default: () => []
+  },
+  totalIndex: {
+    type: Boolean,
+    default: true
+  },
+  isExcess: {
+    type: Boolean,
+    default: false
+  },
+  isRowKey: {
+    type: Boolean,
+    default: true
+  },
+  isSticky: {
+    type: Boolean,
+    default: false
+  },
+  smallHeader: {
+    type: Boolean,
+    default: true
+  }
+};
+
+export { tableProps };