inl-ui 0.0.20 → 0.0.21

package/dist/components/index.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var iconsVue = require('@ant-design/icons-vue');
+
+const config = {
+  prefix: "inl",
+  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
+};
+
+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$1 = installComponent(Demo, "demo");
+
+const IconFont = iconsVue.createFromIconfontCN();
+var index = installComponent(IconFont, "icon-font", false);
+
+exports.Demo = index$1;
+exports.IconFont = index;

package/dist/components/index.d.ts

@@ -0,0 +1,20 @@
+import * as vue from 'vue';
+import * as _ant_design_icons_vue_lib_components_IconFont from '@ant-design/icons-vue/lib/components/IconFont';
+
+declare const _default$1: 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: vue.FunctionalComponent<_ant_design_icons_vue_lib_components_IconFont.IconFontProps, {}>;
+
+export { _default$1 as Demo, _default as IconFont };

package/dist/components/index.js

@@ -0,0 +1,38 @@
+import { defineComponent, createVNode } from 'vue';
+import { createFromIconfontCN } from '@ant-design/icons-vue';
+
+const config = {
+  prefix: "inl",
+  requestOmitParams: ["createDt", "createUser", "updateDt", "updateUser"]
+};
+
+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 = defineComponent({
+  props: {
+    name: {
+      type: String,
+      default: "\u5F20\u4E09"
+    }
+  },
+  setup(props) {
+    return () => createVNode("div", {
+      "class": "Demo"
+    }, ["\u6211\u662Fdemo, ", props.name]);
+  }
+});
+var index$1 = installComponent(Demo, "demo");
+
+const IconFont = createFromIconfontCN();
+var index = installComponent(IconFont, "icon-font", false);
+
+export { index$1 as Demo, index as IconFont };

package/dist/directives/index.cjs

@@ -0,0 +1,74 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+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);
+  }
+};
+
+exports.autoScroll = autoScroll;
+exports.focusDirective = focusDirective;

package/dist/directives/index.d.ts

@@ -0,0 +1,15 @@
+import { Directive } from 'vue';
+
+/**
+ * 输入框自动获取焦点
+ */
+declare const focusDirective: Directive;
+
+/**
+ * 列表自动滚动
+ * 用法 v-autoScroll={'class'} class: 需要滚动的类名，必须是指令所在元素的子元素
+ * 修饰符： self:作用在v-autoScoll本身的元素上
+ */
+declare const autoScroll: Directive;
+
+export { autoScroll, focusDirective };

package/dist/directives/index.js

@@ -0,0 +1,69 @@
+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);
+  }
+};
+
+export { autoScroll, focusDirective };

package/dist/hooks/index.cjs

@@ -0,0 +1,133 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var core = require('@vueuse/core');
+var dayjs = require('dayjs');
+var _ = require('lodash');
+
+function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
+
+var dayjs__default = /*#__PURE__*/_interopDefaultLegacy(dayjs);
+var ___default = /*#__PURE__*/_interopDefaultLegacy(_);
+
+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;
+}
+
+exports.useModalVisible = useModalVisible;
+exports.useNow = useNow;
+exports.useQianKunState = useQianKunState;
+exports.useTableList = useTableList;

package/dist/hooks/index.d.ts

@@ -0,0 +1,50 @@
+import * as vue from 'vue';
+import { Ref } from 'vue';
+import { Dayjs } from 'dayjs';
+import * as lodash from 'lodash';
+
+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<{}>;
+
+export { useModalVisible, useNow, useQianKunState, useTableList };

package/dist/hooks/index.js

@@ -0,0 +1,121 @@
+import { ref, watch, reactive, onMounted, onBeforeUnmount, nextTick } from 'vue';
+import { useIntervalFn } from '@vueuse/core';
+import dayjs from 'dayjs';
+import _, { debounce } from 'lodash';
+
+function useNow(pattern) {
+  const now = ref();
+  const updateNow = () => {
+    const nowDayjs = dayjs();
+    now.value = pattern ? nowDayjs.format(pattern) : nowDayjs;
+  };
+  useIntervalFn(updateNow, 1e3, {
+    immediate: false,
+    immediateCallback: true
+  });
+  return now;
+}
+
+function useTableList(getData, listProp, totalName = "totalCount") {
+  const tableList = ref([]);
+  const isLoading = ref(false);
+  const total = 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 = ref(1);
+  const handlePageChange = page => {
+    currPage.value = page;
+    refresh();
+  };
+  watch(total, () => {
+    const pageCount = Math.ceil(total.value / pageSize.value);
+    if (currPage.value > 1 && currPage.value > pageCount) {
+      currPage.value = pageCount;
+      refresh();
+    }
+  });
+  const pageSize = ref(10);
+  const hanldePageSizeChange = size => {
+    currPage.value = 1;
+    pageSize.value = size;
+    refresh();
+  };
+  const pagination = 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 = ref(defaultVisible);
+  const record = 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 = ref({});
+  if (_.isEmpty(action)) {
+    return state;
+  }
+  const {
+    onGlobalStateChange,
+    offGlobalStateChange,
+    setGlobalState
+  } = action;
+  const handleGlobalStateChange = value => {
+    isSync = true;
+    state.value = value;
+    nextTick(() => isSync = false);
+  };
+  watch(state, val => {
+    if (!isSync) {
+      setGlobalState(val);
+    }
+  }, {
+    deep: true
+  });
+  onMounted(() => onGlobalStateChange(handleGlobalStateChange, true));
+  onBeforeUnmount(() => offGlobalStateChange());
+  return state;
+}
+
+export { useModalVisible, useNow, useQianKunState, useTableList };