yc-pro-components 0.0.1

package/es/components/table/src/type.d.ts

@@ -0,0 +1,513 @@
+import { PlusRadioProps } from 'yc-components/es/components/radio';
+import { ComponentSize } from 'element-plus/es/constants';
+import { RecordType, PageInfo, FieldValueType, PlusColumn, Mutable, IntrinsicAttributes } from 'yc-components/es/types';
+import { PlusPaginationProps } from 'yc-components/es/components/pagination';
+import { Options as SortableOptions } from 'sortablejs';
+import { Component, Ref, ComputedRef, AppContext, DirectiveArguments, CSSProperties } from 'vue';
+import { ElForm, ElFormItem, ElMessageBoxOptions, ButtonProps, LinkProps, IconProps, ElTooltipProps, TableColumnCtx, TableProps, PopconfirmProps } from 'element-plus';
+
+/**
+ * 按钮属性的类型
+ */
+export type ButtonRowProps = Partial<Mutable<ButtonProps & LinkProps & IconProps & IntrinsicAttributes>>;
+/**
+ * 表格列配置项的值的类型
+ * @version v0.1.27
+ */
+export type TableColumn = Partial<TableColumnCtx<RecordType>>;
+/**
+ * 表格操作栏按钮配置项的值的类型
+ */
+export interface ActionBarButtonsRow {
+    /**
+     * 操作文本
+     * @version v0.0.8 新增函数类型
+     */
+    text: string | Ref<string> | ComputedRef<string> | ((row: any, index: number, button: ActionBarButtonsRow) => string | Ref<string> | ComputedRef<string>);
+    /**
+     * 操作按钮唯一code，可用来判断按钮类型
+     */
+    code?: string | number;
+    /**
+     * `@element-plus/icons-vue` 的图标名称，对ElButton,ElLink 和ElIcon 组件同时生效
+     */
+    icon?: Component;
+    /**
+     * ElButton,ElLink和ElIcon 组件对应的props
+     *  @version v0.1.16 新增函数类型和计算属性
+     */
+    props?: ButtonRowProps | ((row: any, index: number, button: ActionBarButtonsRow) => ButtonRowProps) | ComputedRef<ButtonRowProps>;
+    /**
+     * ElTooltip组件的props， type 为icon 时生效
+     */
+    tooltipProps?: Partial<ElTooltipProps>;
+    /**
+     * 按钮显示的逻辑 默认 true 显示， 不需要显示给 false
+     *
+     * 可以用来控制权限
+     */
+    show?: boolean | Ref<boolean> | ComputedRef<boolean> | ((row: any, index: number, button: ActionBarButtonsRow) => boolean | Ref<boolean> | ComputedRef<boolean>);
+    /**
+     * 操作是不是需要二次确认  默认值为 `false`
+     */
+    confirm?: boolean | {
+        /**
+         * ElMessageBox.confirm 的title  默认 `提示`
+         */
+        title?: string | ((data: ButtonsCallBackParams) => string);
+        /**
+         * ElMessageBox.confirm  的message  默认 `确定执行本次操作`
+         *
+         * @version v0.1.17  message 会作为 ElPopconfirm 的title   当ActionBarProps.confirmType为 `popconfirm` 时生效
+         */
+        message?: string | ((data: ButtonsCallBackParams) => string);
+        /**
+         *  ElMessageBox.confirm 的options
+         */
+        options?: ElMessageBoxOptions;
+        /**
+         * ElPopconfirm的props
+         *
+         * 当ActionBarProps.confirmType为 `popconfirm` 时生效
+         *  @version v0.1.17
+         * @see https://element-plus.org/zh-CN/component/popconfirm.html#attributes
+         */
+        popconfirmProps?: Partial<Mutable<PopconfirmProps> & IntrinsicAttributes>;
+        /**
+         *  ElMessageBox.confirm 的appContext
+         */
+        appContext?: AppContext | null;
+    };
+    /**
+     * 指令，可以用来控制权限，数据类型是二维数组
+     * @version v0.1.7
+     * @see https://cn.vuejs.org/guide/extras/render-function.html#custom-directives
+     *
+     */
+    directives?: DirectiveArguments;
+    /**
+     * 点击当前按钮时触发，可与PlusTable的事件 `clickAction`  同时触发；
+     * 操作需要二次确认时：PlusTable的事件 `clickAction`会在确认时触发，而当前的onClick是在点击时触发；
+     * @version v0.1.8
+     * @param params
+     * @returns
+     */
+    onClick?: (params: ButtonsCallBackParams) => void;
+    /**
+     * 操作需要二次确认时，点击确认时触发
+     * @version v0.1.8
+     * @param params
+     * @returns
+     */
+    onConfirm?: (params: ButtonsCallBackParams) => void;
+    /**
+     * 操作需要二次确认时，点击取消时触发， 可与PlusTable的事件 `clickActionConfirmCancel`  同时触发
+     * @version v0.1.8
+     * @param params
+     * @returns
+     */
+    onCancel?: (params: ButtonsCallBackParams) => void;
+}
+/**
+ * 表格可编辑表单的行form 的参数类型
+ */
+export interface TableFormRefRow {
+    /**
+     * 单元格的表单实例
+     */
+    formInstance: Ref<InstanceType<typeof ElForm>>;
+    /**
+     * 单元格的表单单项实例
+     * @deprecated v0.0.1-beta.34
+     */
+    formItemInstance?: Ref<InstanceType<typeof ElFormItem>>;
+    /**
+     * 获取显示组件实例
+     */
+    getDisplayItemInstance: () => {
+        index: number;
+        /**
+         * 表格的行索引，同 index
+         * @version 0.1.20
+         */
+        rowIndex: number;
+        /**
+         * 单元格的列索引
+         * * @version 0.1.20
+         */
+        cellIndex: number;
+        prop: string;
+        formInstance: Ref<InstanceType<typeof ElForm>>;
+        /**
+         * 单元格的表单单项实例
+         * @deprecated v0.0.1-beta.34
+         */
+        formItemInstance?: Ref<InstanceType<typeof ElFormItem>>;
+    };
+    /**
+     * 表格的行索引
+     */
+    index: number;
+    /**
+     * 表格的行索引, 同 index
+     * @version 0.1.20
+     */
+    rowIndex: number;
+    /**
+     * 单元格的列索引
+     * * @version 0.1.20
+     */
+    cellIndex: number;
+    /**
+     * 表格的列字段
+     */
+    prop: string;
+    /**
+     * 单元格的表单开启编辑
+     * @returns
+     */
+    startCellEdit: () => void;
+    /**
+     * 单元格的表单停止编辑
+     * @returns
+     */
+    stopCellEdit: () => void;
+    /**
+     *  当前单元格是否可编辑
+     * @version v0.1.8
+     */
+    isEdit: Ref<boolean>;
+}
+/**
+ * 表格单元格回调参数
+ */
+export type TableCellParams = {
+    /**
+     * 表格行数据
+     */
+    row: RecordType;
+    /**
+     * 表格行索引
+     */
+    index: number;
+    /**
+     * 表格列数据
+     * @version v0.1.7
+     */
+    column: RecordType;
+    /**
+     * 表格行索引 同 index
+     * @version v0.1.7
+     */
+    rowIndex: number;
+    /**
+     * 表格列索引
+     * @version v0.1.7
+     */
+    cellIndex: number;
+    /**
+     * 表格store
+     * @version v0.1.7
+     */
+    store: RecordType;
+    /**
+     * 表格 expanded
+     * @version v0.1.7
+     */
+    expanded: boolean;
+    /**
+     * 表格  _self
+     * @version v0.1.7
+     */
+    _self: RecordType;
+};
+/**
+ * 点击按钮回调的参数的类型
+ */
+export interface ButtonsCallBackParams extends TableCellParams {
+    /**
+     * 点击按钮数据
+     */
+    buttonRow: ActionBarButtonsRow;
+    /**
+     * 解析后的按钮数据中的text
+     * @version v0.1.17
+     */
+    text: string;
+    /**
+     * 按钮点击事件数据
+     */
+    e: MouseEvent;
+    /**
+     * 可编辑表单的行form
+     */
+    formRefs?: TableFormRefRow[];
+}
+/**
+ * formChange回调的参数的类型
+ */
+export interface FormChangeCallBackParams extends TableCellParams {
+    /**
+     * 表单的值
+     */
+    value: FieldValueType;
+    /**
+     * 当前单元格的prop
+     */
+    prop: string;
+}
+/**
+ * 操作栏的整体类型
+ */ export interface ActionBarProps {
+    /**
+     * 操作栏名称  默认值为 `'操作栏'`
+     * @version v0.1.0 类型新增ComputedRef<string>
+     */
+    label?: string | ComputedRef<string>;
+    /**
+     * 操作栏固定   默认值为 `'right'`
+     */
+    fixed?: string;
+    /**
+     * 显示出来的按钮个数  默认值为 `3`
+     * @version 0.1.23 新增函数类型
+     * @default 3
+     */
+    showNumber?: number | ((row: RecordType, index: number) => number);
+    /**
+     * 更多按钮显示策略
+     * @version 0.1.20
+     * @default false
+     */
+    showLimitIncludeMore?: boolean;
+    /**
+     * 操作按钮的类型   默认值为 `'link'`
+     */
+    type?: 'icon' | 'button' | 'link';
+    /**
+     * 操作按钮集合   默认值为 `[]`
+     */
+    buttons?: ActionBarButtonsRow[];
+    /**
+     * 表格操作栏 el-table-column 的其width   默认值为 `200`
+     */
+    width?: string | number;
+    /**
+     * 表格操作栏 el-table-column 的其他props   默认值为 `{}`
+     */
+    actionBarTableColumnProps?: TableColumn;
+    /**
+     * 表格操作栏 需要二次确认的类型，默认是 messageBox
+     * @version v0.1.17
+     */
+    confirmType?: 'messageBox' | 'popconfirm';
+    /**
+     * 更多按钮的显示类型，text 显示文字和图标，icon 只显示图标
+     * @default 'text'
+     * @version v0.1.28
+     */
+    moreType?: 'text' | 'icon';
+}
+/**
+ * 表格自身状态
+ */
+export interface PlusTableState {
+    size?: ComponentSize;
+    /**
+     * 分页参数供表格自身使用
+     */
+    subPageInfo: PageInfo;
+}
+/**
+ * 列设置类型
+ * @version v0.1.20 新增reset,默认：true
+ */
+export type ColumnSetting = {
+    dragSort?: boolean | Partial<SortableOptions>;
+    /**
+     * 列设置是否需要重置按钮，当值为对象时是el-link按钮的props
+     * @version v0.1.20
+     * @default true
+     */
+    reset?: boolean | Partial<Mutable<LinkProps> & IntrinsicAttributes>;
+    /**
+     * 列设置popover的宽度
+     * @version v0.1.23
+     * @default 100
+     */
+    popoverWidth?: number | string;
+    /**
+     * 列设置 checkbox label 隐藏的长度
+     *  @version v0.1.23
+     * @default 6
+     */
+    overflowLabelLength?: number;
+};
+/**
+ * 标题栏
+ */
+export type TitleBar = Partial<{
+    /**
+     * 标题  使用title插槽则此配置不生效
+     */
+    title?: string;
+    /**
+     *  是否需要刷新  默认false
+     */
+    refresh?: boolean;
+    /**
+     *  是否需要密度控制  默认true
+     */
+    density?: boolean;
+    /**
+     * 是否需要列设置 默认true
+     */
+    columnSetting?: boolean | ColumnSetting;
+    /**
+     * 工具栏 icon 的大小和颜色配置
+     */
+    icon?: {
+        /**
+         * icon 的大小  默认 18
+         */
+        size?: string;
+        /**
+         * icon 的颜色  默认 #606266
+         */
+        color?: string;
+    };
+}>;
+/**
+ * 表格props
+ */
+export type PlusTableSelfProps = {
+    /** 表格数据 同data*/
+    tableData?: RecordType[];
+    /**
+     * 表格数据  同tableData
+     * @version 0.1.10
+     */
+    data?: RecordType[];
+    /** 表格配置信息*/
+    columns?: PlusColumn[];
+    defaultSize?: ComponentSize;
+    /** 分页参数*/
+    pagination?: false | Partial<PlusPaginationProps>;
+    /** 操作栏参数*/
+    actionBar?: false | Partial<ActionBarProps>;
+    /** 是否需要序号*/
+    hasIndexColumn?: boolean;
+    /** 是否工具栏*/
+    titleBar?: boolean | Partial<TitleBar>;
+    /**
+     * 是否是多选表格
+     *
+     */
+    isSelection?: boolean | 'radio';
+    /**
+     *是否是单选选表格
+     */
+    isRadio?: boolean;
+    /** 是否需要展开行*/
+    hasExpand?: boolean;
+    /** loading状态*/
+    loadingStatus?: boolean;
+    height?: TableProps<any[]>['height'];
+    /** 表格头样式*/
+    headerCellStyle?: Partial<TableProps<any[]>['headerCellStyle']>;
+    rowKey?: TableProps<any[]>['rowKey'];
+    /** sortablejs配置 */
+    dragSortable?: false | Partial<SortableOptions>;
+    dragSortableTableColumnProps?: TableColumn;
+    indexTableColumnProps?: TableColumn;
+    selectionTableColumnProps?: TableColumn;
+    /**
+     * 单选框的表格列配置
+     * @version 0.1.23
+     */
+    radioTableColumnProps?: TableColumn;
+    /**
+     *  单选框的props  (plus-radio)
+     * @version 0.1.23
+     * @see https://plus-pro-components.com/components/radio.html#radio-attributes
+     */
+    radioProps?: Partial<PlusRadioProps & IntrinsicAttributes>;
+    /**
+     * 默认选择的单选框值，对应表格某一行的数据
+     * @version 0.1.23
+     */
+    defaultSelectedRadioRow?: RecordType | ComputedRef<RecordType>;
+    expandTableColumnProps?: TableColumn;
+    indexContentStyle?: Partial<CSSProperties> | ((row: RecordType, index: number) => Partial<CSSProperties>);
+    editable?: boolean | 'click' | 'dblclick';
+    /**
+     * @version 0.1.17
+     * @default false
+     */
+    adaptive?: boolean | {
+        /** 表格距离页面底部的偏移量，默认值为 `20` */
+        offsetBottom?: number;
+        /** 页面 `resize` 时的防抖时间，默认值为 `60` ms */
+        timeout?: number;
+    };
+    /**
+     * @version 0.1.23
+     */
+    filterTableHeaderOverflowLabelLength?: number;
+};
+export type PlusTableProps = PlusTableSelfProps & Partial<TableProps<any[]>> & RecordType;
+/**
+ *
+ * @version v0.1.22
+ * 表头过滤的类型
+ * eventType  check：表头单个check；  allCheck：全选/取消全选check；  drag：拖拽；  reset：重置；
+ */
+export type FilterTableHeaderEventType = 'check' | 'allCheck' | 'drag' | 'reset';
+/**
+ * fork  https://github.com/element-plus/element-plus/blob/dev/packages/components/table/src/table.vue#L203-L222
+ *
+ */
+export type ElementPlusTableEmits = {
+    (e: 'select', selection: RecordType[], row: RecordType): void;
+    (e: 'select-all', selection: RecordType[]): void;
+    (e: 'selection-change', newSelection: any[]): void;
+    (e: 'cell-mouse-enter', row: RecordType, column: RecordType, cell: HTMLTableCellElement, event: Event): void;
+    (e: 'cell-mouse-leave', row: RecordType, column: RecordType, cell: HTMLTableCellElement, event: Event): any;
+    (e: 'cell-contextmenu', row: RecordType, column: RecordType, cell: HTMLTableCellElement, event: Event): void;
+    (e: 'row-click', row: RecordType, column: RecordType, event: Event): void;
+    (e: 'row-contextmenu', row: RecordType, column: RecordType, event: Event): void;
+    (e: 'row-dblclick', row: RecordType, column: RecordType, event: Event): void;
+    (e: 'header-click', column: RecordType, event: Event): void;
+    (e: 'header-contextmenu', column: RecordType, event: Event): void;
+    (e: 'sort-change', data: {
+        column: any;
+        prop: string;
+        order: any;
+    }): void;
+    (e: 'filter-change', newFilters: any): void;
+    (e: 'current-change', currentRow: RecordType, oldCurrentRow: RecordType): void;
+    (e: 'header-dragend', newWidth: number, oldWidth: number, column: RecordType, event: MouseEvent): void;
+    (e: 'expand-change', row: RecordType, expandedRows: RecordType[], expanded: boolean): void;
+};
+export type PlusTableEmits = {
+    (e: 'paginationChange', pageInfo: PageInfo): void;
+    (e: 'clickAction', data: ButtonsCallBackParams): void;
+    (e: 'clickActionConfirmCancel', data: ButtonsCallBackParams): void;
+    (e: 'dragSortEnd', newIndex: number, oldIndex: number): void;
+    (e: 'formChange', data: FormChangeCallBackParams): void;
+    (e: 'refresh'): void;
+    (e: 'edited'): void;
+    (e: 'cell-click', row: RecordType, column: PlusColumn, cell: HTMLTableCellElement, event: Event): void;
+    (e: 'cell-dblclick', row: RecordType, column: PlusColumn, cell: HTMLTableCellElement, event: Event): void;
+    /**
+     * @version 0.1.22
+     * 过滤表头  type含义  check：表头单个check  allCheck：全选/取消全选check  drag：拖拽
+     *
+     */
+    (e: 'filterTableHeader', columns: PlusColumn[], eventType: FilterTableHeaderEventType): void;
+    /**
+     * @version 0.1.23
+     * @version 0.1.24 参数新增radio 的值
+     */
+    (e: 'radioChange', row: RecordType, index: number, value: boolean): void;
+};

package/es/components/table/src/type.mjs

@@ -0,0 +1 @@
+

package/es/components/table/style/css.d.ts

@@ -0,0 +1,15 @@
+import "element-plus/es/components/table/style/css";
+import "element-plus/es/components/table-column/style/css";
+import "element-plus/es/components/button/style/css";
+import "element-plus/es/components/link/style/css";
+import "element-plus/es/components/tooltip/style/css";
+import "element-plus/es/components/message-box/style/css";
+import "element-plus/es/components/dropdown/style/css";
+import "element-plus/es/components/dropdown-menu/style/css";
+import "element-plus/es/components/dropdown-item/style/css";
+import "element-plus/es/components/popconfirm/style/css";
+import "yc-components/es/components/display-item/style/css";
+import "yc-components/es/components/popover/style/css";
+import "yc-components/es/components/pagination/style/css";
+import "yc-components/es/components/radio/style/css";
+import "yc-components/theme-chalk/plus-table.css";

package/es/components/table/style/css.mjs

@@ -0,0 +1,11 @@
+import 'element-plus/es/components/table/style/css.mjs';
+import 'element-plus/es/components/table-column/style/css.mjs';
+import 'element-plus/es/components/button/style/css.mjs';
+import 'element-plus/es/components/link/style/css.mjs';
+import 'element-plus/es/components/tooltip/style/css.mjs';
+import 'element-plus/es/components/message-box/style/css.mjs';
+import 'element-plus/es/components/dropdown/style/css.mjs';
+import 'element-plus/es/components/dropdown-menu/style/css.mjs';
+import 'element-plus/es/components/dropdown-item/style/css.mjs';
+import 'element-plus/es/components/popconfirm/style/css.mjs';
+import 'yc-components/theme-chalk/plus-table.css';

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

@@ -0,0 +1,15 @@
+import "element-plus/es/components/table/style/index";
+import "element-plus/es/components/table-column/style/index";
+import "element-plus/es/components/button/style/index";
+import "element-plus/es/components/link/style/index";
+import "element-plus/es/components/tooltip/style/index";
+import "element-plus/es/components/message-box/style/index";
+import "element-plus/es/components/dropdown/style/index";
+import "element-plus/es/components/dropdown-menu/style/index";
+import "element-plus/es/components/dropdown-item/style/index";
+import "element-plus/es/components/popconfirm/style/index";
+import "yc-components/es/components/display-item/style/index";
+import "yc-components/es/components/popover/style/index";
+import "yc-components/es/components/pagination/style/index";
+import "yc-components/es/components/radio/style/index";
+import "yc-components/theme-chalk/src/table.scss";

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

@@ -0,0 +1,11 @@
+import 'element-plus/es/components/table/style/index.mjs';
+import 'element-plus/es/components/table-column/style/index.mjs';
+import 'element-plus/es/components/button/style/index.mjs';
+import 'element-plus/es/components/link/style/index.mjs';
+import 'element-plus/es/components/tooltip/style/index.mjs';
+import 'element-plus/es/components/message-box/style/index.mjs';
+import 'element-plus/es/components/dropdown/style/index.mjs';
+import 'element-plus/es/components/dropdown-menu/style/index.mjs';
+import 'element-plus/es/components/dropdown-item/style/index.mjs';
+import 'element-plus/es/components/popconfirm/style/index.mjs';
+import 'yc-components/theme-chalk/src/table.scss';

package/es/components/utils/format.d.ts

@@ -0,0 +1,10 @@
+import { dayjs } from 'element-plus';
+
+/**
+ *
+ * @param {string | number | Date | Dayjs | null | undefined} date
+ * @param format 默认 YYYY-MM-DD HH:mm:ss
+ * @returns YYYY-MM-DD HH:mm:ss
+ */
+export declare function formatDate(date?: dayjs.ConfigType, format?: string): string;
+export declare function formatMoney(val: string | number, format?: string, decimal?: number): string;

package/es/components/utils/format.mjs

@@ -0,0 +1,12 @@
+import { dayjs } from 'element-plus';
+
+function formatDate(date, format = "YYYY-MM-DD HH:mm:ss") {
+  if (!date) return "";
+  return dayjs(date || /* @__PURE__ */ new Date()).format(format);
+}
+function formatMoney(val, format = "\uFFE5", decimal = 2) {
+  if (!val) return "";
+  return `${format}${Number(val).toFixed(decimal)}`;
+}
+
+export { formatDate, formatMoney };