cosey 0.4.52 → 0.5.0

package/components/remote-select/remote-select.vue.js

@@ -0,0 +1,187 @@
+import { defineComponent, ref, unref, computed, createVNode, mergeProps, nextTick } from 'vue';
+import { remoteSelectEmits, remoteSelectSlots, remoteSelectProps } from './remote-select.js';
+import stdin_default$1 from './style/index.js';
+import { ElSelect, ElPagination, ElOption } from 'element-plus';
+import { reactiveComputed } from '@vueuse/core';
+import { merge, get } from 'lodash-es';
+import { defaultTableConfig } from '../table/table.js';
+import stdin_default$2 from '../table/table-query/table-query.vue.js';
+import { useComponentConfig, useConfig } from '../config-provider/config-provider.js';
+import { useFetch } from '../../hooks/useFetch.js';
+import { createLoading, filterEmptyFormValue } from '../../utils/components.js';
+import { uniqid } from '../../utils/string.js';
+import { isObject, isFunction } from '../../utils/is.js';
+import { useProps } from '../../hooks/useProps.js';
+
+var stdin_default = defineComponent({
+  name: "RemoteSelect",
+  props: remoteSelectProps,
+  slots: remoteSelectSlots,
+  emits: remoteSelectEmits,
+  setup(props, {
+    slots,
+    emit,
+    attrs
+  }) {
+    const {
+      prefixCls
+    } = useComponentConfig("remote-select", props);
+    const {
+      hashId
+    } = stdin_default$1(prefixCls);
+    const {
+      table: tableConfig
+    } = useConfig();
+    const isFirstFetch = ref(true);
+    const tableData = ref([]);
+    const tableQueryRef = ref();
+    const tableKeys = reactiveComputed(() => {
+      return merge({}, defaultTableConfig.keys, unref(tableConfig)?.keys, props.keys);
+    });
+    const getFetchParams = () => {
+      const params = {
+        ...filterEmptyFormValue(tableQueryRef.value?.getFieldsValue() || {})
+      };
+      return filterEmptyFormValue(props.transformParams?.(params) || params);
+    };
+    const getFullFetchParams = () => {
+      return {
+        [tableKeys.page]: page.value,
+        [tableKeys.pageSize]: pageSize.value,
+        ...getFetchParams()
+      };
+    };
+    let loading;
+    const {
+      isFetching,
+      execute
+    } = useFetch(() => {
+      loading = createLoading(`.${popperId}`);
+      const params = getFullFetchParams();
+      return props.api?.(params);
+    }, {
+      immediate: props.immediate,
+      onSuccess(res) {
+        tableData.value = (tableKeys.list ? get(res, tableKeys.list) : res) || [];
+        total.value = +get(res, tableKeys.total) || 0;
+      },
+      onFinally() {
+        isFirstFetch.value = false;
+        loading?.close();
+      }
+    });
+    const pagination = reactiveComputed(() => {
+      return merge({}, defaultTableConfig.pagination, {
+        layout: "prev, pager, next"
+      }, unref(tableConfig)?.pagination, isObject(props.pagination) ? props.pagination : null);
+    });
+    const total = ref(0);
+    const page = ref(pagination.currentPage);
+    const pageSize = ref(pagination.pageSize);
+    const paginationProps = computed(() => {
+      if (props.pagination === false) {
+        return false;
+      }
+      return {
+        ...pagination,
+        total: total.value
+      };
+    });
+    const onPageSizeChange = () => {
+      page.value = 1;
+    };
+    const onPageChange = () => {
+      execute();
+    };
+    const onSubmit = async () => {
+      if (!isFetching.value) {
+        page.value = 1;
+        await execute();
+      }
+    };
+    const onReset = async () => {
+      if (!isFetching.value) {
+        page.value = 1;
+        await execute();
+      }
+    };
+    const onVisibleChange = visible => {
+      emit("visibleChange", visible);
+      if (visible) {
+        if (isFirstFetch.value && !props.immediate) {
+          execute();
+        }
+        nextTick(() => {
+          headerRef.value?.querySelector("input")?.focus();
+        });
+      }
+    };
+    const headerRef = ref();
+    const {
+      getLabel,
+      getValue,
+      getKey
+    } = useProps(props);
+    const popperId = uniqid();
+    return () => {
+      return createVNode(ElSelect, mergeProps(props, attrs, {
+        "class": `${hashId.value} ${prefixCls.value}`,
+        "popper-class": `${hashId.value} ${prefixCls.value}-popper ${popperId}`,
+        "onVisible-change": onVisibleChange
+      }), {
+        ...slots,
+        header: props.formProps ? () => {
+          return createVNode("div", {
+            "ref": headerRef,
+            "onKeydown": event => {
+              if (event.key === "Enter") {
+                event.preventDefault();
+              }
+            }
+          }, [createVNode(stdin_default$2, mergeProps({
+            "ref": tableQueryRef,
+            "inline": true,
+            "grid": false,
+            "size": "small",
+            "class": `${prefixCls.value}-form`,
+            "width": 120
+          }, props.formProps, {
+            "reset": onReset,
+            "submit": onSubmit
+          }), null)]);
+        } : null,
+        default: () => {
+          return tableData.value.map((row, index) => {
+            const value = getValue(row);
+            const label = getLabel(row);
+            const key = getKey(value);
+            const optionProps = props.optionProps;
+            return createVNode(ElOption, mergeProps({
+              "key": key,
+              "value": value,
+              "label": label
+            }, isFunction(optionProps) ? optionProps(row, index) : optionProps), {
+              default: () => [slots.option ? slots.option({
+                option: row,
+                index
+              }) : null]
+            });
+          });
+        },
+        footer: paginationProps.value ? () => createVNode(ElPagination, mergeProps({
+          "size": "small"
+        }, paginationProps.value, {
+          "current-page": page.value,
+          "onUpdate:current-page": $event => page.value = $event,
+          "page-size": pageSize.value,
+          "onUpdate:page-size": $event => pageSize.value = $event,
+          "style": "--el-pagination-bg-color: transparent; --el-pagination-button-disabled-bg-color: transparent;",
+          "onSize-change": onPageSizeChange,
+          "onChange": onPageChange
+        }), null) : null
+      });
+    };
+  }
+});
+
+export { stdin_default as default };

package/components/remote-select/style/index.d.ts

@@ -0,0 +1,4 @@
+declare const _default: (_prefixCls?: import("vue").ComputedRef<string> | string, themeManager?: import("../../theme/theme-context").ThemeManager) => {
+    hashId: import("vue").Ref<string, string>;
+};
+export default _default;

package/components/remote-select/style/index.js

@@ -0,0 +1,33 @@
+import { getSimpleStyleHook } from 'cosey/components';
+
+var stdin_default = getSimpleStyleHook("RemoteSelect", (token) => {
+  const { componentCls } = token;
+  return {
+    [`${componentCls}`]: {},
+    [`${componentCls}-popper`]: {
+      display: "flex",
+      flexDirection: "column",
+      height: 320,
+      [`${componentCls}-form`]: {
+        ".el-form-item": {
+          marginBottom: 0,
+          marginRight: 16,
+          "&:last-child": {
+            marginRight: 0
+          }
+        }
+      },
+      ".el-scrollbar": {
+        flex: 1
+      },
+      ".el-select-dropdown__empty": {
+        flex: 1,
+        display: "flex",
+        justifyContent: "center",
+        alignItems: "center"
+      }
+    }
+  };
+});
+
+export { stdin_default as default };

package/components/table/table-query/table-query.vue.d.ts

@@ -306,6 +306,9 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     inlineMessage: boolean;
     showMessage: boolean;
     colProps: import("../..").ColProps;
+    schemes: import("./table-query").TableQueryScheme[];
+    minFields: number;
+    collapsed: boolean;
     submitText: string;
     resetText: string;
     hideSubmit: boolean;
@@ -317,9 +320,6 @@ declare const __VLS_component: import("vue").DefineComponent<import("vue").Extra
     hideRequiredAsterisk: boolean;
     scrollToError: boolean;
     scrollIntoViewOptions: boolean | Record<string, any>;
-    minFields: number;
-    collapsed: boolean;
-    schemes: import("./table-query").TableQueryScheme[];
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
 export default _default;

package/components/table/table.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, useSlots, unref, computed, ref, useTemplateRef, mergeProps, watch, onMounted, onBeforeUnmount, resolveComponent, resolveDirective, createBlock, openBlock, Teleport, withDirectives, createElementBlock, normalizeStyle, normalizeClass, createCommentVNode, createElementVNode, createVNode, renderSlot, withCtx, createSlots, Fragment, renderList, vShow, normalizeProps, guardReactiveProps } from 'vue';
-import { merge, cloneDeep, get } from 'lodash-es';
+import { merge, get, cloneDeep } from 'lodash-es';
 import { reactiveComputed, reactiveOmit } from '@vueuse/core';
 import { useNamespace, useZIndex, ElButton, Mousewheel } from 'element-plus';
 import { tableEmitEvents, tableProps, tableEmitOnEvents, defaultTableConfig, elSlotsName, omittedTableProps, tableExposeKeys } from './table.js';
@@ -8,22 +8,22 @@ import stdin_default$6 from './table-column-editor/table-column-editor.vue.js';
 import stdin_default$2 from './table-query/table-query.vue.js';
 import stdin_default$5 from './table-export/table-export.vue.js';
 import stdin_default$4 from '../icon/icon.vue.js';
-import { filterEmptyFormValue } from './utils.js';
 import stdin_default$1 from './table.style.js';
 import { hColgroup } from 'element-plus/es/components/table/src/h-helper.mjs';
 import stdin_default$8 from './table-footer/index.js';
 import { defaultSummaryMethod } from './table-footer/utils.js';
 import stdin_default$3 from './table-stats/table-stats.vue.js';
-import { uniqid } from '../../utils/string.js';
-import { useComponentConfig, useConfig } from '../config-provider/config-provider.js';
 import { flatColumns } from '../../utils/excel/index.js';
-import { useFetch } from '../../hooks/useFetch.js';
 import { useFullPage } from '../../hooks/useFullPage.js';
 import { useLocale } from '../../hooks/useLocale.js';
+import { uniqid } from '../../utils/string.js';
+import { useComponentConfig, useConfig } from '../config-provider/config-provider.js';
 import { addPxUnit } from '../../utils/css.js';
 import { isNullish, isObject, isFunction } from '../../utils/is.js';
 import { getVNodeText, createMergedExpose } from '../../utils/vue.js';
+import { useFetch } from '../../hooks/useFetch.js';
 import { useResizeObserver } from '../../hooks/useResizeObserver.js';
+import { filterEmptyFormValue } from '../../utils/components.js';
 import { walkTree } from '../../utils/tree.js';
 
 const _hoisted_1 = {

package/hooks/index.d.ts

@@ -20,3 +20,4 @@ export * from './useTreeCheck';
 export * from './useOptionalComponent';
 export * from './useMounted';
 export * from './useDir';
+export * from './useProps';

package/hooks/index.js

@@ -20,3 +20,4 @@ export { treeCheckContextKey, useTreeCheck, useTreeCheckInject } from './useTree
 export { useOptionalComponent } from './useOptionalComponent.js';
 export { useMounted } from './useMounted.js';
 export { useDir } from './useDir.js';
+export { defaultProps, useProps } from './useProps.js';

package/hooks/useProps.d.ts

@@ -0,0 +1,24 @@
+import { MaybeRef } from 'vue';
+export interface Props {
+    label?: string;
+    value?: string;
+    disabled?: string;
+    options?: string;
+}
+export declare const defaultProps: Required<Props>;
+export declare function useProps(props: MaybeRef<{
+    props?: Props;
+    valueKey?: any;
+}>): {
+    aliasProps: import("vue").ComputedRef<{
+        label: string;
+        value: string;
+        disabled: string;
+        options: string;
+    }>;
+    getLabel: (option: Record<PropertyKey, any>) => any;
+    getValue: (option: Record<PropertyKey, any>) => any;
+    getDisabled: (option: Record<PropertyKey, any>) => any;
+    getOptions: (option: Record<PropertyKey, any>) => any;
+    getKey: (value: any) => any;
+};

package/hooks/useProps.js

@@ -0,0 +1,29 @@
+import { get } from 'lodash-es';
+import { computed, unref } from 'vue';
+import { isObject } from '../utils/is.js';
+
+const defaultProps = {
+  label: "label",
+  value: "value",
+  disabled: "disabled",
+  options: "options"
+};
+function useProps(props) {
+  const aliasProps = computed(() => ({ ...defaultProps, ...unref(props).props }));
+  const valueKey = computed(() => unref(props).valueKey);
+  const getLabel = (option) => get(option, aliasProps.value.label);
+  const getValue = (option) => get(option, aliasProps.value.value);
+  const getDisabled = (option) => get(option, aliasProps.value.disabled);
+  const getOptions = (option) => get(option, aliasProps.value.options);
+  const getKey = (value) => isObject(value) && valueKey.value ? get(value, valueKey.value) : value;
+  return {
+    aliasProps,
+    getLabel,
+    getValue,
+    getDisabled,
+    getOptions,
+    getKey
+  };
+}
+
+export { defaultProps, useProps };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "cosey",
-  "version": "0.4.52",
+  "version": "0.5.0",
   "description": "基于 Vue3 + vite 的后台管理系统框架",
   "type": "module",
   "main": "index.js",

package/utils/components.d.ts

@@ -0,0 +1,29 @@
+/**
+ * 发送到服务器之前，过滤掉查询表单中为空的数据，包括空数组和空字符串
+ */
+export declare function filterEmptyFormValue(model: Record<string, any>): {
+    [k: string]: any;
+};
+export declare function createLoading(selector: string): {
+    setText: (text: string) => void;
+    removeElLoadingChild: () => void;
+    close: () => void;
+    handleAfterLeave: () => void;
+    vm: import("vue").ComponentPublicInstance<{}, {}, {}, {}, {}, {}, {}, {}, false, import("vue").ComponentOptionsBase<any, any, any, any, any, any, any, any, any, {}>>;
+    $el: HTMLElement;
+    originalPosition: import("vue").Ref<string>;
+    originalOverflow: import("vue").Ref<string>;
+    visible: import("vue").Ref<boolean>;
+    parent: import("vue").Ref<import("element-plus").LoadingParentElement>;
+    background: import("vue").Ref<string>;
+    svg: import("vue").Ref<string>;
+    svgViewBox: import("vue").Ref<string>;
+    spinner: import("vue").Ref<string | boolean>;
+    text: import("vue").Ref<string>;
+    fullscreen: import("vue").Ref<boolean>;
+    lock: import("vue").Ref<boolean>;
+    customClass: import("vue").Ref<string>;
+    target: import("vue").Ref<HTMLElement>;
+    beforeClose?: import("vue").Ref<(() => boolean) | undefined> | undefined;
+    closed?: import("vue").Ref<(() => void) | undefined> | undefined;
+};

package/utils/components.js

@@ -0,0 +1,13 @@
+import { ElLoading } from 'element-plus';
+import { isEmpty } from './is.js';
+
+function filterEmptyFormValue(model) {
+  return Object.fromEntries(Object.entries(model).filter(([, value]) => !isEmpty(value)));
+}
+function createLoading(selector) {
+  return ElLoading.service({
+    target: document.querySelector(selector)
+  });
+}
+
+export { createLoading, filterEmptyFormValue };

package/utils/index.d.ts

@@ -19,3 +19,4 @@ export * from './sleep';
 export * from './tree';
 export * from './message-box';
 export * from './env';
+export * from './components';

package/utils/index.js

@@ -18,6 +18,7 @@ export { sleep } from './sleep.js';
 export { arrayToTree, extraTreeToTable, mapTree, mapTreeExtra, walkAncestor, walkTree, walkTreeNode } from './tree.js';
 export { warningConfirm } from './message-box.js';
 export { isClient } from './env.js';
+export { createLoading, filterEmptyFormValue } from './components.js';
 import * as echarts from 'echarts/core';
 export { echarts };
 export { bookFormats } from './excel/bookFormats.js';

package/components/table/utils.d.ts

@@ -1,6 +0,0 @@
-/**
- * 发送到服务器之前，过滤掉查询表单中为空的数据，包括空数组和空字符串
- */
-export declare function filterEmptyFormValue(model: Record<string, any>): {
-    [k: string]: any;
-};

package/components/table/utils.js

@@ -1,7 +0,0 @@
-import { isEmpty } from '../../utils/is.js';
-
-function filterEmptyFormValue(model) {
-  return Object.fromEntries(Object.entries(model).filter(([, value]) => !isEmpty(value)));
-}
-
-export { filterEmptyFormValue };