@meethive/components 0.0.3 → 0.0.4

package/lib/ProTable/ProTable.js

@@ -1,279 +1,259 @@
- function _nullishCoalesce(lhs, rhsFn) { if (lhs != null) { return lhs; } else { return rhsFn(); } } function _optionalChain(ops) { let lastAccessLHS = undefined; let value = ops[0]; let i = 1; while (i < ops.length) { const op = ops[i]; const fn = ops[i + 1]; i += 2; if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) { return undefined; } if (op === 'access' || op === 'optionalAccess') { lastAccessLHS = value; value = fn(value); } else if (op === 'call' || op === 'optionalCall') { value = fn((...args) => value.call(lastAccessLHS, ...args)); lastAccessLHS = undefined; } } return value; }
-import { defineComponent, useSlots, watch, onMounted, onUnmounted, computed, ref, reactive, inject } from 'vue'
-import { Spin } from 'ant-design-vue'
-import { debounce } from 'lodash-es'
-import Header from './Header.js'
-import Alert from './Alert.js'
-import Content from './Content.js'
-import JPagination from './Pagination.js'
-import { proTableProps } from './setting'
-import { TableConfig } from '../utils/constants'
-import { useTableInject } from './hooks'
-import useProTableStyle from './style'
-import { onlyMessage } from '@meethive/utils'
-import { useLocaleReceiver } from '../LocaleReciver'
-
-export default defineComponent({
-  name: 'JProTable',
-  components: {
-    Spin,
-    Header,
-    Alert,
-    Content,
-    JPagination
-  },
-  props: {
-    ...proTableProps
-  } ,
-  setup(props, { expose }) {
-    const tableConfig = inject(TableConfig, {
-      pagination: {}
-    })
-    const slots = useSlots()
-
-    const myPagination = computed(() => {
-      const globalPagination = (tableConfig ).pagination || {}
-      let showQuickJumper = _nullishCoalesce(_nullishCoalesce(globalPagination.showQuickJumper, () => ( props.pagination.showQuickJumper)), () => ( false))
-      return {
-        showSizeChanger: true,
-        size: 'size',
-        pageSizeOptions: ['12', '24', '48', '96'],
-        ...globalPagination,
-        ...props.pagination,
-        showQuickJumper
-      }
-    })
-
-    const loading = ref(false)
-    const _dataSource = ref([])
-    const _mode = ref(props.mode || props.modeValue || 'CARD')
-    const column = ref(4)
-
-    const page = reactive({
-      pageIndex: 0,
-      pageSize: 12,
-      total: 0,
-      loading: false
-    })
-
-    const prefixCls = computed(() => 'pro-table')
-    const [wrapSSR, hashId] = useProTableStyle(prefixCls)
-    const [contextLocale] = useLocaleReceiver('ProTable')
-
-    let currentRequestId = 0
-    const extraSlots = ['headerRightRender', 'headerLeftRender', 'paginationRender', 'alertRender']
-
-    const _rowSelection = useTableInject()
-
-    const showAlert = computed(() => {
-      return props.alertShow && (_optionalChain([props, 'access', _ => _.rowSelection, 'optionalAccess', _2 => _2.selectedRowKeys, 'optionalAccess', _3 => _3.length]) || _optionalChain([_rowSelection, 'optionalAccess', _4 => _4.value, 'optionalAccess', _5 => _5.selectedRowKeys, 'optionalAccess', _6 => _6.length]))
-    })
-
-    const showPagination = computed(() => {
-      return !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE'
-    })
-
-    const onCheck = (e) => {
-      _mode.value = e.target.value
-    }
-
-    const handleData = (result, _params) => {
-      if (props.type === 'PAGE') {
-        // 判断如果是最后一页且最后一页为空，就跳转到前一页
-        // 判断条件：如果是total分开查询，判断result的长度；如果不分开查询就判断result.data的长度
-        if (props.totalRequest) {
-          if (result.length === 0) {
-            return true
-          } else {
-            _dataSource.value = result || []
-            page.pageIndex = _optionalChain([_params, 'optionalAccess', _7 => _7.pageIndex]) || 0
-            page.pageSize = _optionalChain([_params, 'optionalAccess', _8 => _8.pageSize]) || 12
-            page.total = page.pageSize * (page.pageIndex + 1) + 1
-          }
-        } else {
-          if (
-            _optionalChain([result, 'optionalAccess', _9 => _9.total]) &&
-            _optionalChain([result, 'optionalAccess', _10 => _10.pageSize]) &&
-            _optionalChain([result, 'optionalAccess', _11 => _11.pageIndex]) &&
-            _optionalChain([result, 'optionalAccess', _12 => _12.data, 'optionalAccess', _13 => _13.length]) === 0
-          ) {
-            return true
-          } else {
-            _dataSource.value = _optionalChain([result, 'optionalAccess', _14 => _14.data]) || []
-            page.pageIndex = _optionalChain([result, 'optionalAccess', _15 => _15.pageIndex]) || 0
-            page.pageSize = _optionalChain([result, 'optionalAccess', _16 => _16.pageSize]) || 12
-            page.total = _optionalChain([result, 'optionalAccess', _17 => _17.total]) || 0
-          }
-        }
-      } else {
-        _dataSource.value = result || []
-      }
-      return false
-    }
-
-    const handleSearch = async (_params) => {
-      if (Array.isArray(props.dataSource)) {
-        _dataSource.value = props.dataSource
-      } else if (props.request) {
-        const __params = {
-          pageIndex: page.pageIndex,
-          pageSize: Number(page.pageSize),
-          ...props.defaultParams,
-          ..._params,
-          terms: [
-            ...(_optionalChain([props, 'access', _18 => _18.defaultParams, 'optionalAccess', _19 => _19.terms]) || []),
-            ...(_optionalChain([_params, 'optionalAccess', _20 => _20.terms]) || [])
-          ]
-        }
-        loading.value = true
-        const resp = await props.request(__params).finally(() => {
-          loading.value = false
-        })
-        if (resp.success) {
-          const flag = handleData(resp.result || {}, _params)
-          if (flag) {
-            // 判断如果是最后一页且最后一页为空，就跳转到前一页
-            if (props.totalRequest) {
-              onlyMessage(_optionalChain([contextLocale, 'access', _21 => _21.value, 'access', _22 => _22.pagination, 'optionalAccess', _23 => _23.lastPage]) || '', 'error')
-              // 置灰下一页
-              page.total = page.pageSize * (page.pageIndex > 0 ? page.pageIndex : 1)
-            } else {
-              page.pageIndex = page.pageIndex > 0 ? page.pageIndex - 1 : 0
-              handleSearch({
-                ..._params,
-                pageSize: page.pageSize,
-                pageIndex: page.pageIndex
-              })
-            }
-          }
-        } else {
-          _dataSource.value = []
-        }
-        if (props.totalRequest) {
-          currentRequestId++
-          const requestId = currentRequestId
-          page.loading = true
-          props.totalRequest(__params).then((res) => {
-            if (res.success) {
-              page.total = res.result || 0
-            }
-          }).finally(() => {
-            if (requestId === currentRequestId) {
-              page.loading = false
-            }
-          })
-        }
-      } else {
-        _dataSource.value = []
-      }
-    }
-
-    const _debounceFn = debounce(handleSearch, 300)
-
-    const onPageChange = (_page, size) => {
-      handleSearch({
-        ...props.params,
-        pageSize: size,
-        pageIndex: page.pageSize === size ? (_page ? _page - 1 : 0) : 0
-      })
-    }
-
-    const onClose = () => {
-      if (props.rowSelection) {
-        _optionalChain([props, 'access', _24 => _24.rowSelection, 'access', _25 => _25.onChange, 'optionalCall', _26 => _26([], [])])
-        _optionalChain([props, 'access', _27 => _27.rowSelection, 'access', _28 => _28.onSelectNone, 'optionalCall', _29 => _29()])
-      } else if (_optionalChain([_rowSelection, 'optionalAccess', _30 => _30.value])) {
-        _optionalChain([_rowSelection, 'access', _31 => _31.value, 'optionalAccess', _32 => _32.onSelectNone, 'optionalCall', _33 => _33()])
-      }
-    }
-
+import { defineComponent, useSlots, watch, onMounted, onUnmounted, computed, ref, reactive, inject } from 'vue';
+import { Spin } from 'ant-design-vue';
+import { debounce } from 'lodash-es';
+import Header from './Header.js';
+import Alert from './Alert.js';
+import Content from './Content.js';
+import JPagination from './Pagination.js';
+import { proTableProps } from './setting';
+import { TableConfig } from '../utils/constants';
+import { useTableInject } from './hooks';
+import useProTableStyle from './style';
+import { onlyMessage } from '@meethive/utils';
+import { useLocaleReceiver } from '../LocaleReciver';
+export default defineComponent({
+  name: 'JProTable',
+  components: {
+    Spin,
+    Header,
+    Alert,
+    Content,
+    JPagination
+  },
+  props: {
+    ...proTableProps
+  },
+  setup(props, {
+    expose
+  }) {
+    const tableConfig = inject(TableConfig, {
+      pagination: {}
+    });
+    const slots = useSlots();
+    const myPagination = computed(() => {
+      const globalPagination = tableConfig.pagination || {};
+      let showQuickJumper = globalPagination.showQuickJumper ?? props.pagination.showQuickJumper ?? false;
+      return {
+        showSizeChanger: true,
+        size: 'size',
+        pageSizeOptions: ['12', '24', '48', '96'],
+        ...globalPagination,
+        ...props.pagination,
+        showQuickJumper
+      };
+    });
+    const loading = ref(false);
+    const _dataSource = ref([]);
+    const _mode = ref(props.mode || props.modeValue || 'CARD');
+    const column = ref(4);
+    const page = reactive({
+      pageIndex: 0,
+      pageSize: 12,
+      total: 0,
+      loading: false
+    });
+    const prefixCls = computed(() => 'pro-table');
+    const [wrapSSR, hashId] = useProTableStyle(prefixCls);
+    const [contextLocale] = useLocaleReceiver('ProTable');
+    let currentRequestId = 0;
+    const extraSlots = ['headerRightRender', 'headerLeftRender', 'paginationRender', 'alertRender'];
+    const _rowSelection = useTableInject();
+    const showAlert = computed(() => {
+      return props.alertShow && (props.rowSelection?.selectedRowKeys?.length || _rowSelection?.value?.selectedRowKeys?.length);
+    });
+    const showPagination = computed(() => {
+      return !!_dataSource.value.length && !props.noPagination && props.type === 'PAGE';
+    });
+    const onCheck = e => {
+      _mode.value = e.target.value;
+    };
+    const handleData = (result, _params) => {
+      if (props.type === 'PAGE') {
+        // 判断如果是最后一页且最后一页为空，就跳转到前一页
+        // 判断条件：如果是total分开查询，判断result的长度；如果不分开查询就判断result.data的长度
+        if (props.totalRequest) {
+          if (result.length === 0) {
+            return true;
+          } else {
+            _dataSource.value = result || [];
+            page.pageIndex = _params?.pageIndex || 0;
+            page.pageSize = _params?.pageSize || 12;
+            page.total = page.pageSize * (page.pageIndex + 1) + 1;
+          }
+        } else {
+          if (result?.total && result?.pageSize && result?.pageIndex && result?.data?.length === 0) {
+            return true;
+          } else {
+            _dataSource.value = result?.data || [];
+            page.pageIndex = result?.pageIndex || 0;
+            page.pageSize = result?.pageSize || 12;
+            page.total = result?.total || 0;
+          }
+        }
+      } else {
+        _dataSource.value = result || [];
+      }
+      return false;
+    };
+    const handleSearch = async _params => {
+      if (Array.isArray(props.dataSource)) {
+        _dataSource.value = props.dataSource;
+      } else if (props.request) {
+        const __params = {
+          pageIndex: page.pageIndex,
+          pageSize: Number(page.pageSize),
+          ...props.defaultParams,
+          ..._params,
+          terms: [...(props.defaultParams?.terms || []), ...(_params?.terms || [])]
+        };
+        loading.value = true;
+        const resp = await props.request(__params).finally(() => {
+          loading.value = false;
+        });
+        if (resp.success) {
+          const flag = handleData(resp.result || {}, _params);
+          if (flag) {
+            // 判断如果是最后一页且最后一页为空，就跳转到前一页
+            if (props.totalRequest) {
+              onlyMessage(contextLocale.value.pagination?.lastPage || '', 'error');
+              // 置灰下一页
+              page.total = page.pageSize * (page.pageIndex > 0 ? page.pageIndex : 1);
+            } else {
+              page.pageIndex = page.pageIndex > 0 ? page.pageIndex - 1 : 0;
+              handleSearch({
+                ..._params,
+                pageSize: page.pageSize,
+                pageIndex: page.pageIndex
+              });
+            }
+          }
+        } else {
+          _dataSource.value = [];
+        }
+        if (props.totalRequest) {
+          currentRequestId++;
+          const requestId = currentRequestId;
+          page.loading = true;
+          props.totalRequest(__params).then(res => {
+            if (res.success) {
+              page.total = res.result || 0;
+            }
+          }).finally(() => {
+            if (requestId === currentRequestId) {
+              page.loading = false;
+            }
+          });
+        }
+      } else {
+        _dataSource.value = [];
+      }
+    };
+    const _debounceFn = debounce(handleSearch, 300);
+    const onPageChange = (_page, size) => {
+      handleSearch({
+        ...props.params,
+        pageSize: size,
+        pageIndex: page.pageSize === size ? _page ? _page - 1 : 0 : 0
+      });
+    };
+    const onClose = () => {
+      if (props.rowSelection) {
+        props.rowSelection.onChange?.([], []);
+        props.rowSelection.onSelectNone?.();
+      } else if (_rowSelection?.value) {
+        _rowSelection.value?.onSelectNone?.();
+      }
+    };
+
     /**
      * 刷新数据
      * @param _params
-     */
-    const reload = (_params) => {
-      handleSearch({
-        ...props.params,
-        ..._params,
-        pageSize: page.pageSize || 12,
-        pageIndex: page.pageIndex || 0
-      })
-    }
-
-    const _gridColumns = computed(() => {
-      if (_optionalChain([props, 'access', _34 => _34.gridColumns, 'optionalAccess', _35 => _35.length])) {
-        const arr = props.gridColumns
-        const lastValue = _optionalChain([arr, 'access', _36 => _36.slice, 'call', _37 => _37(-1), 'optionalAccess', _38 => _38[0]])
-        if (_optionalChain([arr, 'optionalAccess', _39 => _39.length]) < 4) {
-          while (arr.length < 4) {
-            arr.push(lastValue)
-          }
-          return arr
-        } else {
-          return props.gridColumns.slice(0, 4)
-        }
-      } else {
-        return [1, 2, 3, 4]
-      }
-    })
-
-    // 监听宽度，计算显示卡片个数
-    const windowChange = () => {
-      const ele = document.getElementById('jtable-body-spin')
-      if (ele) {
-        const styles = window.getComputedStyle(ele)
-        const width = parseFloat(styles.width)
-        if (width <= 992) {
-          column.value = _optionalChain([_gridColumns, 'access', _40 => _40.value, 'optionalAccess', _41 => _41[0]]) || 1
-        } else if (width > 992 && width <= 1440) {
-          column.value = _optionalChain([_gridColumns, 'access', _42 => _42.value, 'optionalAccess', _43 => _43[1]]) || 2
-        } else if (width > 1440 && width <= 1600) {
-          column.value = _optionalChain([_gridColumns, 'access', _44 => _44.value, 'optionalAccess', _45 => _45[2]]) || 3
-        } else if (width > 1600) {
-          column.value = _optionalChain([_gridColumns, 'access', _46 => _46.value, 'optionalAccess', _47 => _47[3]]) || 4
-        }
-      }
-    }
-
-    watch(() => props.params, (newValue) => {
-      _debounceFn(newValue || {})
-    }, { deep: true, immediate: true })
-
-    watch(() => props.dataSource, (newVal) => {
-      if (newVal && !props.request) {
-        handleSearch(props.params)
-      }
-    }, { deep: true, immediate: true })
-
-    onMounted(() => {
-      windowChange() // 初始化
-      window.onresize = () => {
-        windowChange()
-      }
-    })
-
-    onUnmounted(() => {
-      window.onresize = null
-    })
-
-    expose({ reload, dataSource: _dataSource })
-
-    return {
-      slots,
-      hashId,
-      loading,
-      _dataSource,
-      _mode,
-      column,
-      page,
-      myPagination,
-      showAlert,
-      showPagination,
-      extraSlots,
-      _rowSelection,
-      onCheck,
-      onPageChange,
-      onClose
-    }
-  }
-})
+     */
+    const reload = _params => {
+      handleSearch({
+        ...props.params,
+        ..._params,
+        pageSize: page.pageSize || 12,
+        pageIndex: page.pageIndex || 0
+      });
+    };
+    const _gridColumns = computed(() => {
+      if (props.gridColumns?.length) {
+        const arr = props.gridColumns;
+        const lastValue = arr.slice(-1)?.[0];
+        if (arr?.length < 4) {
+          while (arr.length < 4) {
+            arr.push(lastValue);
+          }
+          return arr;
+        } else {
+          return props.gridColumns.slice(0, 4);
+        }
+      } else {
+        return [1, 2, 3, 4];
+      }
+    });
+
+    // 监听宽度，计算显示卡片个数
+    const windowChange = () => {
+      const ele = document.getElementById('jtable-body-spin');
+      if (ele) {
+        const styles = window.getComputedStyle(ele);
+        const width = parseFloat(styles.width);
+        if (width <= 992) {
+          column.value = _gridColumns.value?.[0] || 1;
+        } else if (width > 992 && width <= 1440) {
+          column.value = _gridColumns.value?.[1] || 2;
+        } else if (width > 1440 && width <= 1600) {
+          column.value = _gridColumns.value?.[2] || 3;
+        } else if (width > 1600) {
+          column.value = _gridColumns.value?.[3] || 4;
+        }
+      }
+    };
+    watch(() => props.params, newValue => {
+      _debounceFn(newValue || {});
+    }, {
+      deep: true,
+      immediate: true
+    });
+    watch(() => props.dataSource, newVal => {
+      if (newVal && !props.request) {
+        handleSearch(props.params);
+      }
+    }, {
+      deep: true,
+      immediate: true
+    });
+    onMounted(() => {
+      windowChange(); // 初始化
+      window.onresize = () => {
+        windowChange();
+      };
+    });
+    onUnmounted(() => {
+      window.onresize = null;
+    });
+    expose({
+      reload,
+      dataSource: _dataSource
+    });
+    return {
+      slots,
+      hashId,
+      loading,
+      _dataSource,
+      _mode,
+      column,
+      page,
+      myPagination,
+      showAlert,
+      showPagination,
+      extraSlots,
+      _rowSelection,
+      onCheck,
+      onPageChange,
+      onClose
+    };
+  }
+});

package/lib/RadioButton/RadioButton.js

@@ -1,53 +1,48 @@
-
-import { defineComponent, ref, computed, watch } from 'vue'
-import useRadioButtonStyle from './style'
-
-export default defineComponent({
-  name: 'JRadioButton',
-  props: {
-    value: {
-      type: [String, Number],
-      default: undefined
-    },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    columns: {
-      type: Number,
-      default: 3
-    }
-  },
-  emits: ['update:value'],
-  setup(props, { emit }) {
-    const prefixCls = computed(() => 'j-radio-button')
-    const [wrapSSR, hashId] = useRadioButtonStyle(prefixCls)
-
-    const myValue = ref(props.value)
-
-    const styles = computed(() => {
-      return {
-        'grid-template-columns': `repeat(${props.columns}, 1fr)`
-      }
-    })
-
-    const onClick = (record) => {
-      if (myValue.value !== record.value) {
-        myValue.value = record.value
-        emit('update:value', record.value)
-        emit('select', record.value)
-      }
-    }
-
-    watch(() => props.value, () => {
-      myValue.value = props.value
-    })
-
-    return {
-      hashId,
-      myValue,
-      styles,
-      onClick
-    }
-  }
-})
+import { defineComponent, ref, computed, watch } from 'vue';
+import useRadioButtonStyle from './style';
+export default defineComponent({
+  name: 'JRadioButton',
+  props: {
+    value: {
+      type: [String, Number],
+      default: undefined
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    columns: {
+      type: Number,
+      default: 3
+    }
+  },
+  emits: ['update:value'],
+  setup(props, {
+    emit
+  }) {
+    const prefixCls = computed(() => 'j-radio-button');
+    const [wrapSSR, hashId] = useRadioButtonStyle(prefixCls);
+    const myValue = ref(props.value);
+    const styles = computed(() => {
+      return {
+        'grid-template-columns': `repeat(${props.columns}, 1fr)`
+      };
+    });
+    const onClick = record => {
+      if (myValue.value !== record.value) {
+        myValue.value = record.value;
+        emit('update:value', record.value);
+        emit('select', record.value);
+      }
+    };
+    watch(() => props.value, () => {
+      myValue.value = props.value;
+    });
+    return {
+      hashId,
+      myValue,
+      styles,
+      onClick
+    };
+  }
+});