yc-pro-components 0.0.1

package/lib/locale/lang/zh-tw.js

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var zhTw = {
+  name: "zh-tw",
+  plus: {
+    dialog: {
+      confirmText: "\u78BA\u5B9A",
+      cancelText: "\u53D6\u6D88",
+      title: "\u5F48\u7A97"
+    },
+    datepicker: {
+      startPlaceholder: "\u8ACB\u9078\u64C7\u958B\u59CB\u6642\u9593",
+      endPlaceholder: "\u8ACB\u9078\u64C7\u7D50\u675F\u6642\u9593"
+    },
+    dialogForm: {
+      title: "\u5F48\u7A97\u8868\u55AE"
+    },
+    drawerForm: {
+      title: "\u62BD\u5C5C\u8868\u55AE",
+      confirmText: "\u78BA\u5B9A",
+      cancelText: "\u53D6\u6D88"
+    },
+    form: {
+      submitText: "\u63D0\u4EA4",
+      resetText: "\u91CD\u7F6E",
+      errorTip: "\u8ACB\u5B8C\u6574\u586B\u5BEB\u8868\u55AE\u7136\u5F8C\u518D\u6B21\u63D0\u4EA4\uFF01"
+    },
+    field: {
+      pleaseEnter: "\u8ACB\u8F38\u5165",
+      pleaseSelect: "\u8ACB\u9078\u64C7"
+    },
+    popover: {
+      confirmText: "\u78BA\u5B9A",
+      cancelText: "\u53D6\u6D88"
+    },
+    search: {
+      searchText: "\u641C\u5C0B",
+      resetText: "\u91CD\u7F6E",
+      expand: "\u5C55\u958B",
+      retract: "\u6536\u8D77"
+    },
+    table: {
+      title: "\u8868\u683C",
+      density: "\u5BC6\u5EA6",
+      refresh: "\u5237\u65B0",
+      columnSettings: "\u5217\u8A2D\u5B9A",
+      selectAll: "\u5168\u9078",
+      default: "\u9810\u8A2D",
+      loose: "\u5BEC\u9B06",
+      compact: "\u7DCA\u6E4A",
+      action: "\u64CD\u4F5C",
+      more: "\u66F4\u591A",
+      confirmToPerformThisOperation: "\u78BA\u5B9A\u57F7\u884C\u672C\u6B21\u64CD\u4F5C?",
+      prompt: "\u63D0\u793A",
+      sort: "\u6392\u5E8F",
+      resetText: "\u91CD\u7F6E"
+    },
+    stepsForm: {
+      nextText: "\u4E0B\u4E00\u6B65",
+      preText: "\u4E0A\u4E00\u6B65",
+      submitText: "\u63D0\u4EA4"
+    },
+    inputTag: {
+      placeholder: "\u8ACB\u8F38\u5165\u95DC\u9375\u5B57\u5F8C\u6309\u56DE\u8ECA/\u7A7A\u767D\u9375"
+    },
+    header: {
+      logout: "\u767B\u51FA"
+    }
+  }
+};
+
+exports.default = zhTw;

package/lib/make-installer.d.ts

@@ -0,0 +1,5 @@
+import { App, Component } from 'vue';
+
+export declare const makeInstaller: (components?: Component[]) => {
+    install: (app: App) => void;
+};

package/lib/make-installer.js

@@ -0,0 +1,12 @@
+'use strict';
+
+const makeInstaller = (components = []) => {
+  const install = (app) => {
+    components.forEach((component) => app.component(component.name, component));
+  };
+  return {
+    install
+  };
+};
+
+exports.makeInstaller = makeInstaller;

package/lib/types/form.d.ts

@@ -0,0 +1,324 @@
+import { Mutable, RecordType } from './global';
+import { PropsItemType, PlusColumn, OptionsRow, RenderTypes, IntrinsicAttributes } from './plus';
+import { PlusFormProps, PlusRadioProps, PlusDatePickerProps, PlusInputTagProps } from 'yc-components/es/components';
+import { TimeSelectProps } from 'element-plus/es/components/time-select/src/time-select';
+import { FormItemProps, ColProps, RowProps, AutocompleteProps, cascaderProps, CheckboxGroupProps, ColorPickerProps, DatePickerProps, InputProps, InputAutoSize, InputNumberProps, RadioGroupProps, RateProps, ISelectProps, SliderProps, SwitchProps, TimePickerDefaultProps, TextProps, ImageProps, LinkProps, TagProps, ProgressProps } from 'element-plus';
+import { Ref, ComputedRef, ExtractPropTypes, CSSProperties } from 'vue';
+
+export {};
+/**
+ * 级联类型
+ */
+export type CascaderProps = ExtractPropTypes<typeof cascaderProps>;
+/**
+ * 原生input所有的type类型
+ * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#input_types
+ */
+export type InputType = 'button' | 'checkbox' | 'color' | 'date' | 'datetime-local' | 'email' | 'file' | 'hidden' | 'image' | 'month' | 'number' | 'password' | 'radio' | 'range' | 'reset' | 'search' | 'submit' | 'tel' | 'text' | 'time' | 'url' | 'week';
+/**
+ * 需要去除或者需要重新定义的类型
+ */
+export type OmitTypes = 'modelValue' | 'src' | 'autocomplete' | 'type' | 'loading' | 'step' | 'format' | 'filterMethod' | 'id' | 'effect' | 'height' | 'autosize';
+/**
+ * 表单和显示组件所有字段类型
+ */
+export type FieldProps = Partial<{
+    [index: string]: any;
+    [index: number]: any;
+    [index: symbol]: any;
+    /**
+     * @version v0.1.27
+     */
+    class: any;
+    style: CSSProperties;
+    /**
+     * @version v0.1.27
+     */
+    modelModifiers: {
+        [index: string]: any;
+        lazy?: boolean;
+        trim?: boolean;
+        number?: boolean;
+    };
+    /**
+     * @desc 输入框行数，仅 type 为 'textarea' 时有效
+     * @desc 补充element-plus input:type='textarea' 时的ts类型缺失
+     */
+    rows: number;
+    autocomplete: string;
+    /**
+     * type 类型
+     */
+    type: DatePickerProps['type'] | TextProps['type'] | LinkProps['type'] | ProgressProps['type'] | InputType | 'textarea';
+    /**
+     *@desc `valueType` 为 `img `时是 `"lazy" | "eager"`，其余是`boolean`类型
+     */
+    loading: SwitchProps['loading'] | ImageProps['loading'];
+    /**
+     * @desc `valueType` 为 `time-select` 时是`string`类型， 其余是`number`类型
+     */
+    step: SliderProps['step'] | TimeSelectProps['step'] | InputNumberProps['step'];
+    /**
+     *@desc `valueType` 为 `progress` 时是函数类型，其余是字符串类型
+     */
+    format: DatePickerProps['format'] | TimePickerDefaultProps['format'] | TimeSelectProps['format'] | ProgressProps['format'];
+    /**
+     * @desc `valueType` 为 `cascader` 时是`(node: Node, keyword: string) => boolean`类型
+     * @desc `valueType` 为 `select` 时是`() => void`类型
+     */
+    filterMethod: CascaderProps['filterMethod'] | ISelectProps['filterMethod'];
+    /**
+     * @desc `valueType` 为 `date-picker` 时**可能**是`[string, string]`类型，其余是`string`类型
+     */
+    id: string | [string, string];
+    /**
+     * @desc el-select，el-time-select 的 effect
+     */
+    effect: ISelectProps['effect'];
+    /**
+     * @desc `valueType` 为 `slider` 时是`string`类型，其余是`number`类型
+     */
+    height: string | number;
+    /**
+     * @desc `valueType` 为 `textarea` 时
+     */
+    autosize: InputAutoSize;
+} & Mutable<Omit<AutocompleteProps, OmitTypes> & Omit<CascaderProps, OmitTypes> & Omit<CheckboxGroupProps, OmitTypes> & Omit<ColorPickerProps, OmitTypes> & Omit<DatePickerProps, OmitTypes> & Omit<InputProps, OmitTypes> & Omit<InputNumberProps, OmitTypes> & Omit<RadioGroupProps, OmitTypes> & Omit<RateProps, OmitTypes> & Omit<ISelectProps, OmitTypes> & Omit<SliderProps, OmitTypes> & Omit<SwitchProps, OmitTypes> & Omit<TimePickerDefaultProps, OmitTypes> & Omit<TimeSelectProps, OmitTypes> & Omit<PlusRadioProps, OmitTypes> & Omit<PlusDatePickerProps, OmitTypes> & Omit<PlusInputTagProps, OmitTypes> & Omit<TextProps, OmitTypes> & Omit<ImageProps, OmitTypes> & Omit<LinkProps, OmitTypes> & Omit<TagProps, OmitTypes> & Omit<ProgressProps, OmitTypes>>>;
+/**
+ * 所有表单的类型 默认是  input
+ */
+export type FormItemValueType = 'autocomplete' | 'cascader' | 'checkbox' | 'color-picker' | 'date-picker' | 'input-number' | 'radio' | 'rate' | 'select' | 'slider' | 'switch' | 'time-picker' | 'time-select' | 'textarea' | 'input' | 'text' | 'plus-radio' | 'plus-date-picker' | 'plus-input-tag'
+/**
+ * @version 0.1.1 新增
+ */
+ | 'transfer'
+/**
+ * @version 0.1.1 新增
+ */
+ | 'tree-select'
+/**
+ * @version 0.1.21 新增
+ */
+ | 'select-v2' | undefined;
+/**
+ * el-col列的props
+ * @version v0.1.27
+ * @see https://element-plus.org/zh-CN/component/layout#col-api
+ */
+export type PlusColProps = Partial<Mutable<ColProps> & IntrinsicAttributes>;
+/**
+ * el-row列的props
+ * @version v0.1.27
+ * @see https://element-plus.org/zh-CN/component/layout#row-api
+ */
+export type PlusRowProps = Partial<Mutable<RowProps> & IntrinsicAttributes>;
+/**
+ * 表单项的props
+ */
+export interface FormColumnProps {
+    /**
+     * @desc 传递给 PlusForm的配置， 支持所有 el-form的props。值支持对象object。
+     * @version 0.1.17 新增
+     * @version 0.1.19  新增 computed，函数支持，不支持Promise
+     */
+    formProps?: Partial<PlusFormProps> | ComputedRef<Partial<PlusFormProps>> | ((value: FieldValueType, data: {
+        row: Record<string, any>;
+        index: number;
+    }) => Partial<PlusFormProps>);
+    /**
+     * @desc 传递给 el-form-item 的配置， 支持所有 el-form-item的props。值支持对象 object，computed，函数和 Promise。
+     */
+    formItemProps?: PropsItemType<Mutable<FormItemProps> & {
+        [key: string]: any;
+        style?: CSSProperties;
+    }>;
+    /**
+     * @desc 支持类似el-input，el-select等所有表单项的props 以及 表格显示的每行 props。值支持对象 object，computed，函数和 Promise。
+     */
+    fieldProps?: PropsItemType<FieldProps>;
+    /**
+     * @desc 自定义渲染 el-form-item 下的field-item组件。
+     * @example
+     * ```ts
+     * import { h } from 'vue'
+     * import { ElTag } from 'element-plus'
+     * import type { PlusColumn } from 'yc-components'
+  
+     * const columns:PlusColumn[]= [
+     *  {
+     *    label: '自定义el-input',
+     *    prop: 'elData',
+     *    fieldProps: {
+     *     // 优先级低于 renderField 的props
+     *      placeholder: '请输入'
+     *    },
+     *     renderField: (value, onChange) => {
+     *        return h(ElInput as any, {
+     *         // 优先级高于 fieldProps
+     *           placeholder: '请输入自定义el-input',
+     *           type: 'textarea',
+     *           onChange
+     *      })
+     *  }
+     * ]
+     *
+     * ```
+     */
+    renderField?: (value: FieldValueType, onChange: (value: FieldValueType) => void, props: PlusColumn) => RenderTypes;
+    /**
+     * @desc el-col 的 props
+     * @version v0.1.30 新增 computed 支持
+     */
+    colProps?: PlusColProps | ComputedRef<PlusColProps>;
+    /**
+     * 表单中单个项目是否需要 label，默认undefined，优先级高于表单的整体 hasLabel
+     */
+    hasLabel?: boolean | Ref<boolean> | ComputedRef<boolean>;
+    /**
+     * @desc 渲染form表单的label
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { ElButton } from 'element-plus'
+     * import type { PlusColumn } from 'yc-components'
+     *
+     * const columns: PlusColumn[] = [
+     *   {
+     *    label: '名称',
+     *    prop: 'name',
+     *    renderLabel:() => 'renderExtra'
+     *   },
+     *   {
+     *    label: '标签',
+     *    prop: 'tag',
+     *    renderLabel: () => h(ElButton,'tag')
+     *   }
+     * ]
+     *
+     * ```
+     */
+    renderLabel?: (label: string, props: PlusColumn) => RenderTypes;
+    /**
+     * @desc  渲染el-form-item 下一行额外的内容
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { ElButton } from 'element-plus'
+     * import type { PlusColumn } from 'yc-components'
+     *
+     * const columns: PlusColumn[] = [
+     *   {
+     *    label: '名称',
+     *    prop: 'name',
+     *    renderExtra:() => 'renderExtra'
+     *   },
+     *   {
+     *    label: '标签',
+     *    prop: 'tag',
+     *    renderExtra: () => h(ElButton,'tag')
+     *   }
+     * ]
+     *
+     * ```
+     */
+    renderExtra?: (column: PlusColumn) => RenderTypes;
+    /**
+     * @desc  渲染el-form-item 上一行的内容
+     * @version 0.1.25 新增
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { ElButton } from 'element-plus'
+     * import type { PlusColumn } from 'yc-components'
+     *
+     * const columns: PlusColumn[] = [
+     *   {
+     *    label: '名称',
+     *    prop: 'name',
+     *    renderPrevious:() => 'renderPrevious'
+     *   },
+     *   {
+     *    label: '标签',
+     *    prop: 'tag',
+     *    renderPrevious: () => h(ElButton,'tag')
+     *   }
+     * ]
+     *
+     * ```
+     */
+    renderPrevious?: (column: PlusColumn) => RenderTypes;
+    /**
+     * @desc 表单（表格）单个项目的插槽，支持类似el-input，el-select， el-image ，el-link等所有表单（表格）单项的插槽
+     * @example
+     * ```ts
+     * import { ref, h } from 'vue'
+     * import { Search } from '@element-plus/icons-vue'
+     * import { ElIcon } from 'element-plus'
+     * import type { PlusColumn } from 'yc-components'
+     *
+     * const columns: PlusColumn[] = [
+     *  {
+     *   label: '名称',
+     *   prop: 'name',
+     *   fieldSlots: {
+     *     suffix: () => h(ElIcon, null, () => h(Search)),
+     *     prefix: () => 'prefix',
+     *     prepend: () => 'prepend',
+     *     append: () => 'append'
+     *   }
+     *  },
+     *  {
+     *   label: '链接',
+     *   prop: 'place',
+     *   valueType: 'link',
+     *   linkText: 'link',
+     *   fieldSlots: {
+     *     default: () => 'prefix'
+     *   }
+     *  },
+     * ]
+     *
+     * ```
+     */
+    fieldSlots?: {
+        [slotName: string]: (data?: any) => RenderTypes;
+    };
+    /**
+     *
+     * 自定义表单每一项子项的插槽 valueType 为 `checkbox` | `radio` | `select` |`plus-radio` 之一时生效。
+     * el-checkbox-group下的，所有el-checkbox的内容整体插槽(即el-checkbox的default插槽)。
+     * el-radio-group下的，所有el-checkbox的内容整体插槽(即el-radio的default插槽)。
+     * el-select下的，所有el-option的内容整体插槽(即el-option的default插槽)。
+     *
+     * @see https://element-plus.org/zh-CN/component/checkbox.html#checkbox-slots
+     * @see https://element-plus.org/zh-CN/component/radio.html#radio-slots
+     * @see https://element-plus.gitee.io/zh-CN/component/select.html#option-slots
+     */
+    fieldChildrenSlot?: (option?: OptionsRow) => RenderTypes;
+    /**
+     * 渲染el-form-item的error 信息
+     * @param column
+     * @version 0.1.23
+     * @returns
+     */
+    renderErrorMessage?: (props: PlusColumn & {
+        value?: FieldValueType;
+        error?: string;
+        label?: string;
+    }) => RenderTypes;
+}
+/**
+ * 通用的单个表单值的类型，适用于大多数通用场景
+ */
+export type FieldValueType = string | number | boolean | null | undefined | Date | string[] | number[] | boolean[] | Date[] | [Date, Date] | [number, number] | [string, string] | string[][] | number[][] | RecordType;
+/**
+ * 通用的整体表单值的类型
+ */
+export type FieldValues = Record<keyof any, FieldValueType>;
+/**
+ * FieldRefs 的类型
+ */
+export type FormFieldRefsType = {
+    fieldInstance?: any;
+    valueIsReady?: Ref<boolean>;
+};

package/lib/types/form.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/types/global.d.ts

@@ -0,0 +1,29 @@
+import { Mutable } from 'element-plus/es/utils';
+
+export {};
+/**
+ * ref 绑定的元素类型
+ */
+export type ElementRefType = HTMLElement | null;
+/**
+ * setTimeout 类型
+ */
+export type Timeout = ReturnType<typeof setTimeout>;
+/**
+ * setInterval 类型
+ */
+export type Interval = ReturnType<typeof setInterval>;
+/**
+ * 普通的对象的泛型
+ */
+export type RecordType = {
+    [index: keyof any]: any;
+};
+/**
+ * 允许null的泛型
+ */
+export type Nullable<T> = T | null;
+/**
+ * 去除只读状态
+ */
+export { Mutable };

package/lib/types/global.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/types/index.d.ts

@@ -0,0 +1,5 @@
+export * from './global';
+export * from './plus';
+export * from './form';
+export * from './table';
+export * from './layout';

package/lib/types/index.js

@@ -0,0 +1,2 @@
+'use strict';
+

package/lib/types/layout.d.ts

@@ -0,0 +1,44 @@
+import { VNode, Component } from 'vue';
+import { RouteRecordRaw } from 'vue-router';
+
+/**
+ * 路由配置类型
+ *
+ * @description 继承自 vue-router 的 RouteRecordRaw，无侵入，仅仅只扩展 meta，meta除了扩展的属性外，同时支持添加任意自定义属性，
+ * 外链的话  path给   '/'+链接   例： `/https://element-plus.org`
+ *
+ */
+export type PlusRouteRecordRaw = Partial<Omit<RouteRecordRaw, 'children'>> & {
+    /**
+     * meta除了扩展的属性外，同时支持添加任意自定义属性
+     *
+     */
+    meta?: {
+        /**
+         * 页面标题   标题存在面包屑和菜单名称显示标题  不存在显示路由的 name  name不存在显示路由的 path
+         */
+        title?: string;
+        /**
+         * 图标
+         */
+        icon?: Component | VNode | ((route: PlusRouteRecordRaw) => VNode);
+        /**
+         * 排序，默认为0 只对第一级有效
+         */
+        sort?: number;
+        /**
+         * 在侧边栏菜单中隐藏，默认false 不隐藏
+         */
+        hideInMenu?: boolean;
+        /**
+         * 隐藏面包屑，默认false 不隐藏
+         */
+        hideInBreadcrumb?: boolean;
+        /**
+         * 菜单是否禁用
+         * @see https://element-plus.org/zh-CN/component/menu.html#menu-item-attributes
+         */
+        disabled?: boolean;
+    };
+    children?: PlusRouteRecordRaw[];
+};

package/lib/types/layout.js

@@ -0,0 +1,2 @@
+'use strict';
+