inl-ui 0.0.19 → 0.0.21

package/dist/index.cjs

@@ -0,0 +1,435 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var qiankun = require('vite-plugin-qiankun');
+var renderWithQiankun = require('vite-plugin-qiankun/dist/helper');
+var vue = require('vue');
+var axios = require('axios');
+var antDesignVue = require('ant-design-vue');
+var _ = require('lodash');
+var core = require('@vueuse/core');
+var dayjs = require('dayjs');
+var iconsVue = require('@ant-design/icons-vue');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var qiankun__default = /*#__PURE__*/_interopDefaultLegacy(qiankun);
+var renderWithQiankun__default = /*#__PURE__*/_interopDefaultLegacy(renderWithQiankun);
+var axios__default = /*#__PURE__*/_interopDefaultLegacy(axios);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+
+var version = "0.1.0-rc.13";
+
+const setTheme = theme => {
+  if (theme === "dark") {
+    document.getElementsByTagName("html")[0].setAttribute("data-doc-theme", "dark");
+    document.getElementsByTagName("body")[0].setAttribute("data-theme", "dark");
+    document.getElementsByTagName("html")[0].style.colorScheme = "dark";
+  } else {
+    document.getElementsByTagName("html")[0].setAttribute("data-doc-theme", "light");
+    document.getElementsByTagName("body")[0].setAttribute("data-theme", "light");
+    document.getElementsByTagName("html")[0].style.colorScheme = "light";
+  }
+};
+var changeTheme = {
+  set(theme) {
+    window.localStorage.setItem("theme", theme);
+    setTheme(theme);
+  },
+  settingTheme(theme) {
+    const systemTheme = window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+    theme = theme || window.localStorage.getItem("theme") || systemTheme;
+    setTheme(theme);
+  }
+};
+
+const setRem = opt => {
+  const fontSize = opt.fontSize || 14;
+  const designSize = opt.designSize || 1920;
+  const scale = document.documentElement.clientWidth / designSize;
+  document.documentElement.style.fontSize = `${fontSize * Math.min(scale, 2)}px`;
+};
+
+const isMicroApp = renderWithQiankun.qiankunWindow.__POWERED_BY_QIANKUN__;
+const transformRoutes = (appName, routes) => {
+  if (isMicroApp) {
+    let addBase = function (rs) {
+      for (const r of rs) {
+        r.path = `/${appName}${r.path}`;
+        if (r.children?.length) {
+          addBase(r.children);
+        }
+      }
+    };
+    const newRoutes = routes.filter(item => item.name !== "login" && item.path !== "/login");
+    addBase(routes);
+    newRoutes.push({
+      path: "/:pathMatch(.*)*",
+      component: {
+        render: () => ""
+      }
+    });
+    return newRoutes;
+  }
+  return routes;
+};
+function microAppPlugin(name) {
+  return qiankun__default["default"](name, {
+    useDevMode: true
+  });
+}
+function render(AppRoot, rootEl, configApp) {
+  let app;
+  const _render = (props = {}) => {
+    const {
+      container
+    } = props;
+    const root = container ? container.querySelector(rootEl) : rootEl;
+    app = vue.createApp(AppRoot);
+    configApp(app, props);
+    app.mount(root);
+  };
+  const initQianKun = () => {
+    renderWithQiankun__default["default"]({
+      bootstrap() {
+        console.log("\u5FAE\u5E94\u7528\uFF1Abootstrap");
+      },
+      mount(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Amount", props);
+        _render(props);
+      },
+      unmount(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Aunmount", props);
+        app.unmount();
+      },
+      update(props) {
+        console.log("\u5FAE\u5E94\u7528\uFF1Aupdate", props);
+      }
+    });
+  };
+  isMicroApp ? initQianKun() : _render();
+}
+const microAppUtils = {
+  isMicroApp,
+  transformRoutes,
+  microAppPlugin,
+  render
+};
+
+const config = {
+  prefix: "inl",
+  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
+};
+
+const getToken = () => sessionStorage.getItem("token");
+const getCorpId = () => sessionStorage.getItem("corpId");
+const getUserinfo = () => {
+  const jsonString = sessionStorage.getItem("userinfo");
+  if (jsonString) {
+    return JSON.parse(jsonString);
+  }
+};
+class ApiInstance {
+  instance;
+  config;
+  constructor(config$1) {
+    this.config = config$1;
+    this.instance = axios__default["default"].create(config$1);
+    this.instance.interceptors.request.use(config2 => {
+      const userinfo = getUserinfo();
+      const token = getToken();
+      const corpId = getCorpId();
+      if (!_.isEmpty(config2.data)) {
+        config2.data = _.omit(config2.data, ...config.requestOmitParams);
+      }
+      config2.headers.token = token;
+      config2.headers.userId = userinfo?.userId;
+      config2.headers.userName = userinfo?.userName;
+      config2.headers.corpId = corpId;
+      return config2;
+    }, err => {
+      return Promise.reject(err);
+    });
+    this.instance.interceptors.response.use(res => {
+      return new Promise((resolve, reject) => {
+        if (res.config.responseType === "blob") {
+          resolve(res.data);
+        }
+        if (res.data.code === "M0000") {
+          resolve(res.data);
+        } else if (res.data.code === "M4003") {
+          this.config.onTokenExpired?.(res);
+          reject(res);
+        } else {
+          const alertMessage = res.data.message ?? "\u7F51\u7EDC\u5F02\u5E38\uFF0C\u8BF7\u8054\u7CFB\u7BA1\u7406\u5458";
+          antDesignVue.message.error(alertMessage, alertMessage.length > 10 ? 10 : 3);
+          reject(res.data);
+        }
+      });
+    }, err => {
+      return Promise.reject(err);
+    });
+  }
+}
+
+const utils = {
+  changeTheme,
+  setRem,
+  microAppUtils,
+  ApiInstance
+};
+
+const focusDirective = {
+  mounted(el, {
+    value
+  }) {
+    if (value !== false) {
+      el.focus();
+    }
+  }
+};
+
+const autoScroll = {
+  mounted(el, {
+    value = "ant-table-body",
+    modifiers
+  }) {
+    let timer;
+    let timer2;
+    let hover = false;
+    let wait = false;
+    const {
+      self
+    } = modifiers;
+    const _baseWidth = window.innerWidth / window.innerHeight > 2 ? 7200 : 2880;
+    const step = Math.ceil(_baseWidth / window.innerWidth);
+    const onmouseenter = () => hover = true;
+    const onmouseleave = () => hover = false;
+    const scrollEl = self ? el : el.querySelector(`.${value}`);
+    if (!scrollEl) return;
+    const startScroll = () => {
+      if (!document.contains(el)) {
+        timer && clearInterval(timer);
+        el.removeEventListener("mouseenter", onmouseenter);
+        el.removeEventListener("mouseleave", onmouseleave);
+        return;
+      }
+      if (hover) return;
+      const scrollElHeight = scrollEl.getBoundingClientRect().height;
+      if (scrollElHeight >= scrollEl.scrollHeight) {
+        return;
+      }
+      if (!hover && scrollEl.scrollTop + scrollElHeight > scrollEl.scrollHeight - step) {
+        if (timer2) return;
+        timer2 = setTimeout(() => {
+          if (!hover) {
+            scrollEl.scrollTop = 0;
+          }
+          setTimeout(() => {
+            if (!hover) {
+              wait = false;
+            }
+          }, 1e3);
+          timer2 = null;
+        }, 1e3);
+        wait = true;
+      } else {
+        if (!wait) {
+          scrollEl.scrollTo({
+            top: scrollEl.scrollTop + step
+          });
+        }
+      }
+    };
+    timer = setInterval(startScroll, 100);
+    el.addEventListener("mouseenter", onmouseenter);
+    el.addEventListener("mouseleave", onmouseleave);
+  }
+};
+
+var directives = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  focusDirective: focusDirective,
+  autoScroll: autoScroll
+});
+
+function useNow(pattern) {
+  const now = vue.ref();
+  const updateNow = () => {
+    const nowDayjs = dayjs__default["default"]();
+    now.value = pattern ? nowDayjs.format(pattern) : nowDayjs;
+  };
+  core.useIntervalFn(updateNow, 1e3, {
+    immediate: false,
+    immediateCallback: true
+  });
+  return now;
+}
+
+function useTableList(getData, listProp, totalName = "totalCount") {
+  const tableList = vue.ref([]);
+  const isLoading = vue.ref(false);
+  const total = vue.ref(0);
+  const refresh = async () => {
+    isLoading.value = true;
+    try {
+      const {
+        data
+      } = await getData();
+      if (listProp) {
+        tableList.value = data[listProp];
+        total.value = data[totalName];
+      } else {
+        tableList.value = data;
+      }
+    } finally {
+      isLoading.value = false;
+    }
+  };
+  const refreshDebounced = _.debounce(refresh, 200);
+  const currPage = vue.ref(1);
+  const handlePageChange = page => {
+    currPage.value = page;
+    refresh();
+  };
+  vue.watch(total, () => {
+    const pageCount = Math.ceil(total.value / pageSize.value);
+    if (currPage.value > 1 && currPage.value > pageCount) {
+      currPage.value = pageCount;
+      refresh();
+    }
+  });
+  const pageSize = vue.ref(10);
+  const hanldePageSizeChange = size => {
+    currPage.value = 1;
+    pageSize.value = size;
+    refresh();
+  };
+  const pagination = vue.reactive({
+    current: currPage,
+    pageSize,
+    total,
+    showSizeChanger: true,
+    showQuickJumper: true,
+    showTotal: total2 => `\u5171 ${total2} \u6761`,
+    "onUpdate:current": handlePageChange,
+    "onUpdate:pageSize": hanldePageSizeChange
+  });
+  return {
+    isLoading,
+    tableList,
+    currPage,
+    handlePageChange,
+    pageSize,
+    hanldePageSizeChange,
+    total,
+    refresh: refreshDebounced,
+    pagination
+  };
+}
+
+function useModalVisible(defaultVisible = false) {
+  const visible = vue.ref(defaultVisible);
+  const record = vue.ref();
+  const onToggle = r => {
+    if (r) {
+      record.value = r;
+    }
+    visible.value = !visible.value;
+  };
+  return [visible, onToggle, record];
+}
+
+function useQianKunState(action) {
+  let isSync = false;
+  const state = vue.ref({});
+  if (___default["default"].isEmpty(action)) {
+    return state;
+  }
+  const {
+    onGlobalStateChange,
+    offGlobalStateChange,
+    setGlobalState
+  } = action;
+  const handleGlobalStateChange = value => {
+    isSync = true;
+    state.value = value;
+    vue.nextTick(() => isSync = false);
+  };
+  vue.watch(state, val => {
+    if (!isSync) {
+      setGlobalState(val);
+    }
+  }, {
+    deep: true
+  });
+  vue.onMounted(() => onGlobalStateChange(handleGlobalStateChange, true));
+  vue.onBeforeUnmount(() => offGlobalStateChange());
+  return state;
+}
+
+var hooks = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  useNow: useNow,
+  useTableList: useTableList,
+  useModalVisible: useModalVisible,
+  useQianKunState: useQianKunState
+});
+
+const {
+  prefix
+} = config;
+function installComponent(component, name, withPrefix = true) {
+  component.install = app => {
+    name = withPrefix ? `${prefix}-${name}` : name;
+    app.component(name, component);
+  };
+  return component;
+}
+
+const Demo = vue.defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: "\u5F20\u4E09"
+    }
+  },
+  setup(props) {
+    return () => vue.createVNode("div", {
+      "class": "Demo"
+    }, ["\u6211\u662Fdemo, ", props.name]);
+  }
+});
+var index$2 = installComponent(Demo, "demo");
+
+const IconFont = iconsVue.createFromIconfontCN();
+var index$1 = installComponent(IconFont, "icon-font", false);
+
+var components = /*#__PURE__*/Object.freeze({
+  __proto__: null,
+  Demo: index$2,
+  IconFont: index$1
+});
+
+var index = {
+  install(app) {
+    for (const component of Object.values(components)) {
+      app.use(component);
+    }
+    require("./iconfont.js");
+  },
+  version,
+  utils,
+  directives,
+  hooks,
+  components
+};
+
+exports.components = components;
+exports["default"] = index;
+exports.directives = directives;
+exports.hooks = hooks;
+exports.utils = utils;
+exports.version = version;

package/dist/index.d.ts

@@ -0,0 +1,177 @@
+import { AxiosInstance, AxiosRequestConfig, AxiosResponse } from 'axios';
+import * as vite_plugin_qiankun_dist_helper from 'vite-plugin-qiankun/dist/helper';
+import * as vue from 'vue';
+import { Directive, Ref, App } from 'vue';
+import * as vite from 'vite';
+import * as vue_router from 'vue-router';
+import { Dayjs } from 'dayjs';
+import * as lodash from 'lodash';
+import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
+
+interface IApiInstanceConfig extends AxiosRequestConfig {
+    onTokenExpired?: (res: AxiosResponse) => void;
+}
+declare class ApiInstance {
+    instance: AxiosInstance;
+    config: IApiInstanceConfig;
+    constructor(config: IApiInstanceConfig);
+}
+
+var version = "0.1.0-rc.13";
+
+declare const utils: {
+    changeTheme: {
+        set(theme: string): void;
+        settingTheme(theme?: string | undefined): void;
+    };
+    setRem: (opt: {
+        fontSize?: number | undefined;
+        designSize?: number | undefined;
+    }) => void;
+    microAppUtils: {
+        isMicroApp: boolean | undefined;
+        transformRoutes: (appName: string, routes: vue_router.RouteRecordRaw[]) => vue_router.RouteRecordRaw[];
+        microAppPlugin: (name: string) => vite.PluginOption;
+        render: (AppRoot: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions>, rootEl: string, configApp: (app: vue.App<any>, props?: vite_plugin_qiankun_dist_helper.QiankunProps | undefined) => any) => void;
+    };
+    ApiInstance: typeof ApiInstance;
+};
+
+/**
+ * 输入框自动获取焦点
+ */
+declare const focusDirective: Directive;
+
+/**
+ * 列表自动滚动
+ * 用法 v-autoScroll={'class'} class: 需要滚动的类名，必须是指令所在元素的子元素
+ * 修饰符： self:作用在v-autoScoll本身的元素上
+ */
+declare const autoScroll: Directive;
+
+/**
+ * 通用指令
+ * import { xxx } from 'inl-ui/dist/directives'
+ */
+
+declare const directives_focusDirective: typeof focusDirective;
+declare const directives_autoScroll: typeof autoScroll;
+declare namespace directives {
+  export {
+    directives_focusDirective as focusDirective,
+    directives_autoScroll as autoScroll,
+  };
+}
+
+declare function useNow(): Ref<Dayjs>;
+declare function useNow(pattern: string): Ref<string>;
+
+/**
+ * 通用表格查询hook
+ * @param getData 获取数据的函数 返回Promise
+ * @param listProp 数据列表在data中的属性 不传代表不分页
+ * @param totalName 总数在data中的属性 默认为totalCount
+ */
+declare function useTableList(getData: () => Promise<any>, listProp?: string, totalName?: string): {
+    isLoading: vue.Ref<boolean>;
+    tableList: any;
+    currPage: vue.Ref<number>;
+    handlePageChange: (page: number) => void;
+    pageSize: vue.Ref<number>;
+    hanldePageSizeChange: (size: number) => void;
+    total: vue.Ref<number>;
+    refresh: lodash.DebouncedFunc<() => Promise<void>>;
+    pagination: {
+        current: number;
+        pageSize: number;
+        total: number;
+        showSizeChanger: boolean;
+        showQuickJumper: boolean;
+        showTotal: (total: number) => string;
+        "onUpdate:current": (page: number) => void;
+        "onUpdate:pageSize": (size: number) => void;
+    };
+};
+
+/**
+ * 控制是否展示对话框
+ * @param defaultVisible 默认是否展示
+ * @returns {[boolean, function, object]} [是否显示，处理点击(传入row)，传入的对象]
+ */
+declare function useModalVisible<T = any>(defaultVisible?: boolean): [Ref<Boolean>, (r?: T) => void, Ref<T | undefined>];
+
+/**
+ * 获取qiankun的state 父/子应用通用
+ * 只能在App中使用，获取到的state用provide共享给自组件
+ * @param action qiankun的全局状态action
+ */
+declare function useQianKunState(action: any): vue.Ref<{}>;
+
+/**
+ * inl hooks 业务上的hook
+ * 用法： import { xxx } from 'inl-ui/dist/hooks'
+ * 更多通用的hooks从[@vueuse]中导入https://vueuse.org/
+ */
+
+declare const hooks_useNow: typeof useNow;
+declare const hooks_useTableList: typeof useTableList;
+declare const hooks_useModalVisible: typeof useModalVisible;
+declare const hooks_useQianKunState: typeof useQianKunState;
+declare namespace hooks {
+  export {
+    hooks_useNow as useNow,
+    hooks_useTableList as useTableList,
+    hooks_useModalVisible as useModalVisible,
+    hooks_useQianKunState as useQianKunState,
+  };
+}
+
+declare const _default$2: vue.DefineComponent<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+}, () => JSX.Element, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
+    name: {
+        type: StringConstructor;
+        default: string;
+    };
+}>>, {
+    name: string;
+}>;
+
+declare const _default$1: vue.FunctionalComponent<_ant_design_icons_vue_lib_components_IconFont.IconFontProps, {}>;
+
+declare namespace components {
+  export {
+    _default$2 as Demo,
+    _default$1 as IconFont,
+  };
+}
+
+declare const _default: {
+    install(app: App): void;
+    version: string;
+    utils: {
+        changeTheme: {
+            set(theme: string): void;
+            settingTheme(theme?: string | undefined): void;
+        };
+        setRem: (opt: {
+            fontSize?: number | undefined;
+            designSize?: number | undefined;
+        }) => void;
+        microAppUtils: {
+            isMicroApp: boolean | undefined;
+            transformRoutes: (appName: string, routes: vue_router.RouteRecordRaw[]) => vue_router.RouteRecordRaw[];
+            microAppPlugin: (name: string) => vite.PluginOption;
+            render: (AppRoot: vue.Component<any, any, any, vue.ComputedOptions, vue.MethodOptions>, rootEl: string, configApp: (app: App<any>, props?: vite_plugin_qiankun_dist_helper.QiankunProps | undefined) => any) => void;
+        };
+        ApiInstance: typeof ApiInstance;
+    };
+    directives: typeof directives;
+    hooks: typeof hooks;
+    components: typeof components;
+};
+
+export { components, _default as default, directives, hooks, utils, version };