@wlydfe/pro-ui 0.2.0

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

@@ -0,0 +1,13 @@
+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 '@wlydfe/pro-ui-components/display-item/style/index';
+import '@wlydfe/pro-ui-components/popover/style/index';
+import '@wlydfe/pro-ui-components/pagination/style/index';
+import '@wlydfe/pro-ui-theme-chalk/src/table.scss';

package/lib/components/table/style/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+require('element-plus/lib/components/table/style/index.js');
+require('element-plus/lib/components/table-column/style/index.js');
+require('element-plus/lib/components/button/style/index.js');
+require('element-plus/lib/components/link/style/index.js');
+require('element-plus/lib/components/tooltip/style/index.js');
+require('element-plus/lib/components/message-box/style/index.js');
+require('element-plus/lib/components/dropdown/style/index.js');
+require('element-plus/lib/components/dropdown-menu/style/index.js');
+require('element-plus/lib/components/dropdown-item/style/index.js');
+require('../../display-item/style/index.js');
+require('../../popover/style/index.js');
+require('../../pagination/style/index.js');
+require('../../../theme-chalk/src/table.scss.js');
+

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

@@ -0,0 +1,9 @@
+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/lib/components/utils/format.js

@@ -0,0 +1,13 @@
+'use strict';
+
+const elementPlus = require('element-plus');
+
+function formatDate(date, format = "YYYY-MM-DD HH:mm:ss") {
+  return elementPlus.dayjs(date || /* @__PURE__ */ new Date()).format(format);
+}
+function formatMoney(val, format = "\uFFE5", decimal = 2) {
+  return `${format}${Number(val).toFixed(decimal)}`;
+}
+
+exports.formatDate = formatDate;
+exports.formatMoney = formatMoney;

package/lib/components/utils/index.d.ts

@@ -0,0 +1,92 @@
+import type { FieldValueType, RecordType, PlusColumn } from '@wlydfe/pro-ui-types';
+import type { SetupContext } from 'vue';
+export * from './format';
+export * from './is';
+/**
+ * 获取table key
+ * @param item
+ * @returns
+ */
+export declare const getTableKey: (item: PlusColumn, hasEditable?: boolean) => string;
+/**
+ *  获取tooltip
+ * @param tooltip
+ * @returns
+ */
+export declare const getTooltip: (tooltip: PlusColumn['tooltip']) => RecordType | undefined;
+/**
+ * 获取自定义的props 支持对象 函数 和 Promise
+ * @param props
+ * @param value
+ * @param row
+ * @returns
+ */
+export declare const getCustomProps: (props: RecordType | ((...arg: any) => RecordType | Promise<RecordType>) | undefined, value: FieldValueType | undefined, row: RecordType, index: number, type: 'formItemProps' | 'fieldProps') => Promise<any>;
+/**
+ * 处理slots
+ */
+export declare const handleSlots: (slots: PlusColumn['slots'], value: FieldValueType | undefined, params: RecordType) => RecordType;
+/**
+ * 处理slot名称
+ */
+export declare const getSlotName: (type: string, prop?: string | number) => string;
+/**
+ * 处理form-item中的slot名称
+ */
+export declare const getFieldSlotName: (prop?: string | number) => string;
+/**
+ *   处理form-item中的label slot名称
+ */
+export declare const getLabelSlotName: (prop?: string | number) => string;
+/**
+ *   处理form-item中的 extra slot名称
+ */
+export declare const getExtraSlotName: (prop?: string | number) => string;
+/**
+ * 处理table中的 header slot名称
+ */
+export declare const getTableHeaderSlotName: (prop?: string | number) => string;
+/**
+ * 处理table中的 cell slot名称
+ */
+export declare const getTableCellSlotName: (prop?: string | number) => string;
+/**
+ * 处理el-descriptions-item 的  slot名称
+ */
+export declare const getDescSlotName: (prop?: string | number) => string;
+/**
+ * 处理el-descriptions-item  label的  slot名称
+ */
+export declare const getDescLabelSlotName: (prop?: string | number) => string;
+/**
+ * 过滤slots
+ * @param slots
+ * @param name
+ * @returns
+ */
+export declare const filterSlots: (slots: RecordType, name: string) => SetupContext['slots'];
+/**
+ *  获取值  支持 x.y.z
+ * @param target
+ * @param key
+ * @returns
+ */
+export declare const getValue: (target: RecordType, key: string) => any;
+/**
+ *  设置值  支持 x.y.z
+ * @param target
+ * @param key
+ * @returns
+ */
+export declare const setValue: (target: RecordType, key: string, value: any) => RecordType;
+/**
+ * 版本比较
+ * @param version1
+ * @param version2
+ * @returns
+ */
+export declare const compareVersion: (version1: string, version2: string) => 1 | -1 | 0;
+/**
+ * element-plus版本号是否小于'2.6.0'
+ */
+export declare const versionIsLessThan260: boolean;

package/lib/components/utils/index.js

@@ -0,0 +1,147 @@
+'use strict';
+
+const elementPlus = require('element-plus');
+const lodashEs = require('lodash-es');
+const vue = require('vue');
+const is = require('./is.js');
+const format = require('./format.js');
+
+const getTableKey = (item, hasEditable = false) => hasEditable ? item.label + item.prop + item.editable : item.label + item.prop;
+const getTooltip = (tooltip) => {
+  if (is.isString(tooltip)) {
+    return { content: tooltip };
+  }
+  if (is.isPlainObject(tooltip)) {
+    return tooltip;
+  }
+};
+const throwError = (data, type) => {
+  if (!is.isPlainObject(data)) {
+    throw new Error(`${type} expected Object but got ${is.toRawType(data)}`);
+  }
+};
+const getCustomProps = async (props, value, row, index, type) => {
+  try {
+    let data = {};
+    const params = { row, index };
+    if (!props) {
+      data = {};
+    } else if (vue.isRef(props)) {
+      data = props.value;
+    } else if (is.isPlainObject(props)) {
+      data = { ...props };
+    } else if (is.isFunction(props)) {
+      data = await props(value, params);
+    } else if (is.isPromise(props)) {
+      data = await props;
+    } else {
+      data = props;
+    }
+    throwError(data, type);
+    return data;
+  } catch (error) {
+    return Promise.reject(error);
+  }
+};
+const handleSlots = (slots, value, params) => {
+  if (!slots || !is.isPlainObject(slots) || is.isEmptyObject(slots)) {
+    return {};
+  }
+  const slotsRes = {};
+  if (slots && !is.isEmptyObject(slots)) {
+    Object.keys(slots).forEach((key) => {
+      const temp = (...arg) => {
+        return () => slots[key](...arg);
+      };
+      slotsRes[key] = temp(value, params);
+    });
+  }
+  return slotsRes;
+};
+const getSlotName = (type, prop) => {
+  return prop ? `plus-${type}-${prop}` : `plus-${type}`;
+};
+const getFieldSlotName = (prop) => {
+  return `${getSlotName("field", prop)}`;
+};
+const getLabelSlotName = (prop) => {
+  return `${getSlotName("label", prop)}`;
+};
+const getExtraSlotName = (prop) => {
+  return `${getSlotName("extra", prop)}`;
+};
+const getTableHeaderSlotName = (prop) => {
+  return `${getSlotName("header", prop)}`;
+};
+const getTableCellSlotName = (prop) => {
+  return `${getSlotName("cell", prop)}`;
+};
+const getDescSlotName = (prop) => {
+  return `${getSlotName("desc", prop)}`;
+};
+const getDescLabelSlotName = (prop) => {
+  return `${getSlotName("desc-label", prop)}`;
+};
+const filterSlots = (slots, name) => {
+  const data = {};
+  Object.keys(slots || {}).forEach((key) => {
+    if (key.startsWith(name)) {
+      data[key] = slots[key];
+    }
+  });
+  return data;
+};
+const getValue = (target, key) => {
+  return lodashEs.get(target, key);
+};
+const setValue = (target, key, value) => {
+  return lodashEs.set(target, key, value);
+};
+const compareVersion = (version1, version2) => {
+  const arr1 = version1.split(".").map((item) => Number(item));
+  const arr2 = version2.split(".").map((item) => Number(item));
+  const length = Math.max(arr1.length, arr2.length);
+  for (let i = 0; i < length; i++) {
+    if ((arr1[i] || 0) > (arr2[i] || 0)) return 1;
+    if ((arr1[i] || 0) < (arr2[i] || 0)) return -1;
+  }
+  return 0;
+};
+const versionIsLessThan260 = compareVersion(elementPlus.version, "2.6.0") < 0;
+
+exports.isArray = is.isArray;
+exports.isBoolean = is.isBoolean;
+exports.isDate = is.isDate;
+exports.isEmptyObject = is.isEmptyObject;
+exports.isFunction = is.isFunction;
+exports.isMap = is.isMap;
+exports.isObject = is.isObject;
+exports.isPlainObject = is.isPlainObject;
+exports.isPromise = is.isPromise;
+exports.isRegExp = is.isRegExp;
+exports.isSet = is.isSet;
+exports.isString = is.isString;
+exports.isSymbol = is.isSymbol;
+exports.isUrl = is.isUrl;
+exports.objectToString = is.objectToString;
+exports.toRawType = is.toRawType;
+exports.toTypeString = is.toTypeString;
+exports.formatDate = format.formatDate;
+exports.formatMoney = format.formatMoney;
+exports.compareVersion = compareVersion;
+exports.filterSlots = filterSlots;
+exports.getCustomProps = getCustomProps;
+exports.getDescLabelSlotName = getDescLabelSlotName;
+exports.getDescSlotName = getDescSlotName;
+exports.getExtraSlotName = getExtraSlotName;
+exports.getFieldSlotName = getFieldSlotName;
+exports.getLabelSlotName = getLabelSlotName;
+exports.getSlotName = getSlotName;
+exports.getTableCellSlotName = getTableCellSlotName;
+exports.getTableHeaderSlotName = getTableHeaderSlotName;
+exports.getTableKey = getTableKey;
+exports.getTooltip = getTooltip;
+exports.getValue = getValue;
+exports.handleSlots = handleSlots;
+exports.setValue = setValue;
+exports.versionIsLessThan260 = versionIsLessThan260;

package/lib/components/utils/is.d.ts

@@ -0,0 +1,98 @@
+/**
+ * Object.prototype.toString 别名
+ */
+export declare const objectToString: () => string;
+/**
+ * 获取类型
+ * @param value
+ * @returns
+ */
+export declare const toTypeString: (value: any) => string;
+/**
+ * 拿到类型字符串
+ * @param value
+ * @returns
+ */
+export declare const toRawType: (value: any) => string;
+/**
+ * 判断是否是数组
+ */
+export declare const isArray: (arg: any) => arg is any[];
+/**
+ * 判断是否是Map
+ * @param val
+ * @returns
+ */
+export declare const isMap: (val: any) => boolean;
+/**
+ * 判断是否是Set
+ * @param val
+ * @returns
+ */
+export declare const isSet: (val: any) => boolean;
+/**
+ * 判断是否是Date
+ * @param val
+ * @returns
+ */
+export declare const isDate: (val: any) => boolean;
+/**
+ * 判断是否是Reg
+ * @param val
+ * @returns
+ */
+export declare const isRegExp: (val: any) => boolean;
+/**
+ * 判断是否是函数
+ * @param val
+ * @returns
+ */
+export declare const isFunction: (val: any) => boolean;
+/**
+ * 判断是否是字符串
+ * @param val
+ * @returns
+ */
+export declare const isString: (val: any) => boolean;
+/**
+ * 判断是否是Symbol
+ * @param val
+ * @returns
+ */
+export declare const isSymbol: (val: any) => boolean;
+/**
+ * 判断是否是boolean
+ * @param val
+ * @returns
+ */
+export declare const isBoolean: (val: any) => boolean;
+/**
+ * 判断是否是object
+ * @param val
+ * @returns
+ */
+export declare const isObject: (val: any) => boolean;
+/**
+ * 判断是否是Promise
+ * @param val
+ * @returns
+ */
+export declare const isPromise: (val: any) => boolean;
+/**
+ * 判断是否是 纯对象 object
+ * @param val
+ * @returns
+ */
+export declare const isPlainObject: (val: any) => boolean;
+/**
+ * 是否是空对象
+ * @param val
+ * @returns
+ */
+export declare const isEmptyObject: (val: any) => boolean;
+/**
+ * 是否是链接
+ * @param url
+ * @returns
+ */
+export declare function isUrl(url: string): boolean;

package/lib/components/utils/is.js

@@ -0,0 +1,47 @@
+'use strict';
+
+const objectToString = Object.prototype.toString;
+const toTypeString = (value) => objectToString.call(value);
+const toRawType = (value) => {
+  return toTypeString(value).slice(8, -1);
+};
+const isArray = Array.isArray;
+const isMap = (val) => toTypeString(val) === "[object Map]";
+const isSet = (val) => toTypeString(val) === "[object Set]";
+const isDate = (val) => toTypeString(val) === "[object Date]";
+const isRegExp = (val) => toTypeString(val) === "[object RegExp]";
+const isFunction = (val) => typeof val === "function";
+const isString = (val) => typeof val === "string";
+const isSymbol = (val) => typeof val === "symbol";
+const isBoolean = (val) => typeof val === "boolean";
+const isObject = (val) => val !== null && typeof val === "object";
+const isPromise = (val) => {
+  return isObject(val) && isFunction(val.then) && isFunction(val.catch);
+};
+const isPlainObject = (val) => toTypeString(val) === "[object Object]";
+const isEmptyObject = (val) => isPlainObject(val) && Object.keys(val).length === 0;
+function isUrl(url) {
+  const regex = new RegExp(
+    "^(https?:\\/\\/)?((([a-z\\d]([a-z\\d-]*[a-z\\d])*)\\.)+[a-z]{2,}|((\\d{1,3}\\.){3}\\d{1,3}))(\\:\\d+)?(\\/[-a-z\\d%_.~+]*)*(\\?[;&a-z\\d%_.~+=-]*)?(\\#[-a-z\\d_]*)?$",
+    "i"
+  );
+  return regex.test(url);
+}
+
+exports.isArray = isArray;
+exports.isBoolean = isBoolean;
+exports.isDate = isDate;
+exports.isEmptyObject = isEmptyObject;
+exports.isFunction = isFunction;
+exports.isMap = isMap;
+exports.isObject = isObject;
+exports.isPlainObject = isPlainObject;
+exports.isPromise = isPromise;
+exports.isRegExp = isRegExp;
+exports.isSet = isSet;
+exports.isString = isString;
+exports.isSymbol = isSymbol;
+exports.isUrl = isUrl;
+exports.objectToString = objectToString;
+exports.toRawType = toRawType;
+exports.toTypeString = toTypeString;

package/lib/constants/form.d.ts

@@ -0,0 +1,20 @@
+/**
+ * 表格里表单的provide(inject) key
+ */
+export declare const TableFormRefInjectionKey: unique symbol;
+/**
+ *  表单ElDatePicker 组件 值是数组的type列表
+ */
+export declare const DatePickerValueIsArrayList: string[];
+/**
+ * 表单组件值是数字类型的valueType列表
+ */
+export declare const ValueIsNumberList: string[];
+/**
+ * 表单组件值是数字类型的valueType列表
+ */
+export declare const ValueIsBooleanList: string[];
+/**
+ *  表单组件值是数组的valueType列表
+ */
+export declare const ValueIsArrayList: string[];

package/lib/constants/form.js

@@ -0,0 +1,19 @@
+'use strict';
+
+const TableFormRefInjectionKey = Symbol("tableFormRefInjectionKey");
+const DatePickerValueIsArrayList = [
+  "datetimerange",
+  "daterange",
+  "monthrange",
+  "years",
+  "dates"
+];
+const ValueIsNumberList = ["rate", "input-number", "slider"];
+const ValueIsBooleanList = ["switch"];
+const ValueIsArrayList = ["checkbox", "cascader", "plus-date-picker", "plus-input-tag"];
+
+exports.DatePickerValueIsArrayList = DatePickerValueIsArrayList;
+exports.TableFormRefInjectionKey = TableFormRefInjectionKey;
+exports.ValueIsArrayList = ValueIsArrayList;
+exports.ValueIsBooleanList = ValueIsBooleanList;
+exports.ValueIsNumberList = ValueIsNumberList;

package/lib/constants/index.d.ts

@@ -0,0 +1,2 @@
+export * from './page';
+export * from './form';

package/lib/constants/index.js

@@ -0,0 +1,14 @@
+'use strict';
+
+const page = require('./page.js');
+const form = require('./form.js');
+
+
+
+exports.DefaultPageInfo = page.DefaultPageInfo;
+exports.DefaultPageSizeList = page.DefaultPageSizeList;
+exports.DatePickerValueIsArrayList = form.DatePickerValueIsArrayList;
+exports.TableFormRefInjectionKey = form.TableFormRefInjectionKey;
+exports.ValueIsArrayList = form.ValueIsArrayList;
+exports.ValueIsBooleanList = form.ValueIsBooleanList;
+exports.ValueIsNumberList = form.ValueIsNumberList;

package/lib/constants/page.d.ts

@@ -0,0 +1,9 @@
+import type { PageInfo } from '@wlydfe/pro-ui-types';
+/**
+ *默认的分页列表
+ */
+export declare const DefaultPageSizeList: number[];
+/**
+ * 默认的分页参数
+ */
+export declare const DefaultPageInfo: PageInfo;

package/lib/constants/page.js

@@ -0,0 +1,10 @@
+'use strict';
+
+const DefaultPageSizeList = [10, 20, 30, 40, 50, 100, 200, 300, 400, 500];
+const DefaultPageInfo = {
+  page: 1,
+  pageSize: 10
+};
+
+exports.DefaultPageInfo = DefaultPageInfo;
+exports.DefaultPageSizeList = DefaultPageSizeList;

package/lib/defaults.d.ts

@@ -0,0 +1,4 @@
+declare const _default: {
+    install: (app: import("vue").App<any>) => void;
+};
+export default _default;

package/lib/defaults.js

@@ -0,0 +1,11 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const makeInstaller = require('./make-installer.js');
+const component = require('./component.js');
+const directive = require('./directive.js');
+
+const installer = makeInstaller.makeInstaller([...component.default], directive.default);
+
+exports.default = installer;

package/lib/directive.d.ts

@@ -0,0 +1,3 @@
+import type { Directive } from 'vue';
+declare const directives: Record<string, Directive>;
+export default directives;

package/lib/directive.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+require('./directives/index.js');
+const index = require('./directives/click/index.js');
+
+const directives = {
+  click: index.default
+};
+
+exports.default = directives;

package/lib/directives/click/hook/useClickControl.d.ts

@@ -0,0 +1,11 @@
+import type { ClickMode } from '../type';
+interface ClickControlOptions {
+    delay?: number;
+    mode?: ClickMode;
+}
+export declare function useClickControl(): {
+    executeHandler: <T extends (...args: any[]) => any>(handler: T, options?: ClickControlOptions) => Promise<void>;
+    isProcessing: import("vue").Ref<boolean, boolean>;
+    cleanup: () => void;
+};
+export {};

package/lib/directives/click/hook/useClickControl.js

@@ -0,0 +1,77 @@
+'use strict';
+
+const vue = require('vue');
+const index = require('../type/index.js');
+
+function useClickControl() {
+  const isProcessing = vue.ref(false);
+  const lastInvokeTime = vue.ref(0);
+  let timer;
+  function isPromise(value) {
+    return value !== null && (typeof value === "object" || typeof value === "function") && typeof value.then === "function";
+  }
+  const executeHandler = async (handler, options = {}) => {
+    const now = Date.now();
+    const { delay = index.CLICK_CONST.DEFAULT.DELAY, mode = index.CLICK_CONST.DEFAULT.MODE } = options;
+    if (isProcessing.value) {
+      return;
+    }
+    if (!lastInvokeTime.value) {
+      lastInvokeTime.value = now;
+      const result = handler();
+      if (isPromise(result)) {
+        try {
+          isProcessing.value = true;
+          await result;
+        } finally {
+          isProcessing.value = false;
+        }
+      }
+      return;
+    }
+    if (mode === "throttle") {
+      if (now - lastInvokeTime.value >= delay) {
+        lastInvokeTime.value = now;
+        const result = handler();
+        if (isPromise(result)) {
+          try {
+            isProcessing.value = true;
+            await result;
+          } finally {
+            isProcessing.value = false;
+          }
+        }
+      }
+    } else {
+      if (timer) {
+        clearTimeout(timer);
+      }
+      timer = setTimeout(async () => {
+        lastInvokeTime.value = Date.now();
+        const result = handler();
+        if (isPromise(result)) {
+          try {
+            isProcessing.value = true;
+            await result;
+          } finally {
+            isProcessing.value = false;
+          }
+        }
+      }, delay);
+    }
+  };
+  const cleanup = () => {
+    if (timer) {
+      clearTimeout(timer);
+    }
+    isProcessing.value = false;
+    lastInvokeTime.value = 0;
+  };
+  return {
+    executeHandler,
+    isProcessing,
+    cleanup
+  };
+}
+
+exports.useClickControl = useClickControl;

package/lib/directives/click/index.d.ts

@@ -0,0 +1,3 @@
+import type { Directive } from 'vue';
+declare const click: Directive;
+export default click;