@wlydfe/pro-ui 0.2.0

package/es/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/es/components/table/style/index.mjs

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

package/es/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/es/components/utils/format.mjs

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

package/es/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/es/components/utils/index.mjs

@@ -0,0 +1,111 @@
+import { version } from 'element-plus';
+import { get, set } from 'lodash-es';
+import { isRef } from 'vue';
+import { isString, isPlainObject, toRawType, isFunction, isPromise, isEmptyObject } from './is.mjs';
+export { isArray, isBoolean, isDate, isMap, isObject, isRegExp, isSet, isSymbol, isUrl, objectToString, toTypeString } from './is.mjs';
+export { formatDate, formatMoney } from './format.mjs';
+
+const getTableKey = (item, hasEditable = false) => hasEditable ? item.label + item.prop + item.editable : item.label + item.prop;
+const getTooltip = (tooltip) => {
+  if (isString(tooltip)) {
+    return { content: tooltip };
+  }
+  if (isPlainObject(tooltip)) {
+    return tooltip;
+  }
+};
+const throwError = (data, type) => {
+  if (!isPlainObject(data)) {
+    throw new Error(`${type} expected Object but got ${toRawType(data)}`);
+  }
+};
+const getCustomProps = async (props, value, row, index, type) => {
+  try {
+    let data = {};
+    const params = { row, index };
+    if (!props) {
+      data = {};
+    } else if (isRef(props)) {
+      data = props.value;
+    } else if (isPlainObject(props)) {
+      data = { ...props };
+    } else if (isFunction(props)) {
+      data = await props(value, params);
+    } else if (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 || !isPlainObject(slots) || isEmptyObject(slots)) {
+    return {};
+  }
+  const slotsRes = {};
+  if (slots && !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 get(target, key);
+};
+const setValue = (target, key, value) => {
+  return 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(version, "2.6.0") < 0;
+
+export { compareVersion, filterSlots, getCustomProps, getDescLabelSlotName, getDescSlotName, getExtraSlotName, getFieldSlotName, getLabelSlotName, getSlotName, getTableCellSlotName, getTableHeaderSlotName, getTableKey, getTooltip, getValue, handleSlots, isEmptyObject, isFunction, isPlainObject, isPromise, isString, setValue, toRawType, versionIsLessThan260 };

package/es/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/es/components/utils/is.mjs

@@ -0,0 +1,29 @@
+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);
+}
+
+export { isArray, isBoolean, isDate, isEmptyObject, isFunction, isMap, isObject, isPlainObject, isPromise, isRegExp, isSet, isString, isSymbol, isUrl, objectToString, toRawType, toTypeString };

package/es/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/es/constants/form.mjs

@@ -0,0 +1,13 @@
+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"];
+
+export { DatePickerValueIsArrayList, TableFormRefInjectionKey, ValueIsArrayList, ValueIsBooleanList, ValueIsNumberList };

package/es/constants/index.d.ts

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

package/es/constants/index.mjs

@@ -0,0 +1,2 @@
+export { DefaultPageInfo, DefaultPageSizeList } from './page.mjs';
+export { DatePickerValueIsArrayList, TableFormRefInjectionKey, ValueIsArrayList, ValueIsBooleanList, ValueIsNumberList } from './form.mjs';

package/es/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/es/constants/page.mjs

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

package/es/defaults.d.ts

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

package/es/defaults.mjs

@@ -0,0 +1,7 @@
+import { makeInstaller } from './make-installer.mjs';
+import plugins from './component.mjs';
+import directives from './directive.mjs';
+
+const installer = makeInstaller([...plugins], directives);
+
+export { installer as default };

package/es/directive.d.ts

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

package/es/directive.mjs

@@ -0,0 +1,8 @@
+import './directives/index.mjs';
+import click from './directives/click/index.mjs';
+
+const directives = {
+  click: click
+};
+
+export { directives as default };

package/es/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/es/directives/click/hook/useClickControl.mjs

@@ -0,0 +1,75 @@
+import { ref } from 'vue';
+import { CLICK_CONST } from '../type/index.mjs';
+
+function useClickControl() {
+  const isProcessing = ref(false);
+  const lastInvokeTime = 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 = CLICK_CONST.DEFAULT.DELAY, mode = 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
+  };
+}
+
+export { useClickControl };

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

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

package/es/directives/click/index.mjs

@@ -0,0 +1,51 @@
+import { watch } from 'vue';
+import { useClickControl } from './hook/useClickControl.mjs';
+import { CLICK_CONST } from './type/index.mjs';
+
+const click = {
+  mounted(el, binding) {
+    const handler = binding.value;
+    if (!handler) {
+      console.warn(CLICK_CONST.ERROR_MESSAGE.NO_HANDLER);
+      return;
+    }
+    const delay = Object.keys(binding.modifiers).find((key) => /^\d+$/.test(key));
+    const mode = binding.modifiers[CLICK_CONST.MODIFIERS.DEBOUNCE] ? CLICK_CONST.MODIFIERS.DEBOUNCE : CLICK_CONST.MODIFIERS.THROTTLE;
+    el._clickControl = useClickControl();
+    el._clickHandler = (event) => {
+      var _a;
+      (_a = el._clickControl) == null ? void 0 : _a.executeHandler(() => handler(event), {
+        delay: delay ? parseInt(delay) : void 0,
+        mode
+      });
+    };
+    el.addEventListener("click", el._clickHandler);
+    const unwatch = watch(
+      () => {
+        var _a;
+        return (_a = el._clickControl) == null ? void 0 : _a.isProcessing.value;
+      },
+      (isProcessing) => {
+        if (isProcessing) {
+          el.classList.add("is-clicking");
+        } else {
+          el.classList.remove("is-clicking");
+        }
+      }
+    );
+    el._unwatchLoading = unwatch;
+  },
+  unmounted(el) {
+    if (el._clickHandler) {
+      el.removeEventListener("click", el._clickHandler);
+    }
+    if (el._clickControl) {
+      el._clickControl.cleanup();
+    }
+    if (el._unwatchLoading) {
+      el._unwatchLoading();
+    }
+  }
+};
+
+export { click as default };

package/es/directives/click/type/index.d.ts

@@ -0,0 +1,16 @@
+export declare const CLICK_CONST: {
+    readonly MODIFIERS: {
+        readonly DEBOUNCE: "debounce";
+        readonly THROTTLE: "throttle";
+    };
+    readonly DEFAULT: {
+        readonly DELAY: 300;
+        readonly MODE: "throttle";
+    };
+    readonly ERROR_MESSAGE: {
+        readonly NO_HANDLER: "[v-click] handler is required";
+        readonly INVALID_HANDLER: "[v-click] handler must be a function";
+        readonly INVALID_DELAY: "[v-click] delay must be a positive number";
+    };
+};
+export type ClickMode = (typeof CLICK_CONST.MODIFIERS)[keyof typeof CLICK_CONST.MODIFIERS];

package/es/directives/click/type/index.mjs

@@ -0,0 +1,17 @@
+const CLICK_CONST = {
+  MODIFIERS: {
+    DEBOUNCE: "debounce",
+    THROTTLE: "throttle"
+  },
+  DEFAULT: {
+    DELAY: 300,
+    MODE: "throttle"
+  },
+  ERROR_MESSAGE: {
+    NO_HANDLER: "[v-click] handler is required",
+    INVALID_HANDLER: "[v-click] handler must be a function",
+    INVALID_DELAY: "[v-click] delay must be a positive number"
+  }
+};
+
+export { CLICK_CONST };

package/es/directives/index.d.ts

@@ -0,0 +1 @@
+export { default as Click } from './click';

package/es/directives/index.mjs

@@ -0,0 +1 @@
+export { default as Click } from './click/index.mjs';

package/es/hooks/index.d.ts

@@ -0,0 +1,3 @@
+export * from './useGetOptions';
+export * from './useLocale';
+export * from './useTable';

package/es/hooks/index.mjs

@@ -0,0 +1,3 @@
+export { useGetOptions } from './useGetOptions.mjs';
+export { buildLocaleContext, buildTranslator, translate, useLocale } from './useLocale.mjs';
+export { useTable } from './useTable.mjs';