xrk-components 0.3.0 → 0.3.3

package/packages/base/table/table-column.vue

@@ -1,351 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-07-01 15:08:09
--->
-<template>
-  <el-table-column
-    :prop="prop"
-    :type="type"
-    :index="index"
-    :label="label"
-    :columnKey="columnKey"
-    :width="width"
-    :minWidth="minWidth"
-    :fixed="fixed"
-    :sortable="sortable"
-    :sortMethod="sortMethod"
-    :sortBy="sortBy"
-    :sortOrders="sortOrders"
-    :align="align"
-    :headerAlign="headerAlign"
-    :className="className"
-    :labelClassName="labelClassName"
-    :textLineClamp="textLineClamp"
-  >
-    <template v-slot="{ row, column, $index }">
-      <base-table-column-content-render
-        v-if="render"
-        :row="row"
-        :column="column"
-        :cellValue="prop ? row[prop] : ''"
-        :index="$index"
-      ></base-table-column-content-render>
-      <div
-        v-else-if="type == '_selection'"
-        style="display: inline-block"
-        @click.prevent="handleCheckboxClick(row)"
-      >
-        <base-checkbox
-          class="table-base-checkbox"
-          v-loading="row._selectionLoading"
-          :model-value="checked(row)"
-          :disabled="_selectionDisabled(row)"
-        ></base-checkbox>
-      </div>
-      <div v-else class="base-table-column">
-        <base-tool-tip
-          :content="getColumnValue(row, $index, column)"
-          :hideAfter="0"
-          :enterable="false"
-          transition="none"
-          :overShow="showOverflowTooltip"
-          :style="{ '-webkit-line-clamp': textLineClamp || 1 }"
-        >
-          {{ getColumnValue(row, $index, column) }}
-        </base-tool-tip>
-      </div>
-    </template>
-
-    <template v-slot:header="{ column, $index }" v-if="renderHeader">
-      <base-table-column-header-render
-        :index="$index"
-        :column="column"
-      ></base-table-column-header-render>
-    </template>
-    <template v-slot:header v-else-if="type == '_selection'">
-      <base-checkbox
-        class="table-base-checkbox"
-        v-loading="_selectionAllLoading"
-        @click.prevent="handleCheckboxAllClick"
-        :model-value="checkboxAllChecked"
-        :indeterminate="checkboxAllIndeterminate"
-      >
-        {{ selectionRows.size > 0 ? `已选${selectionRows.size}项` : '' }}
-      </base-checkbox>
-    </template>
-  </el-table-column>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-table-column'
-};
-</script>
-<script lang="tsx" setup>
-import { BaseToolTip } from '../tool-tip';
-import { BaseCheckbox } from '../checkbox';
-import { ElTableColumn, vLoading as _vLoading } from 'element-plus';
-import { computed, defineComponent, ref } from 'vue';
-import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
-import { useTableSetup } from './store';
-import { isFunction } from '../../../tools/check';
-import { BaseTableColumnProps } from './types/type';
-
-const vLoading = _vLoading;
-const _props = withDefaults(
-  defineProps<{
-    pageAllData?: Array<Record<string, any>>;
-    prop?: string;
-    type?: 'index' | 'expand' | '_selection';
-    index?: number | ((index: number) => number);
-    label?: string;
-    columnKey?: string;
-    width?: string | number;
-    minWidth?: string | number;
-    fixed?: boolean | 'left' | 'right';
-    sortable?: boolean | 'custom';
-    sortMethod?: (a: any, b: any) => number;
-    sortBy?: Array<string> | string | ((row: any, index: number) => string);
-    sortOrders?: Array<'ascending' | 'descending' | null>;
-    showOverflowTooltip?: boolean;
-    align?: 'left' | 'right' | 'center';
-    headerAlign?: 'left' | 'right' | 'center';
-    className?: string;
-    labelClassName?: string;
-
-    textLineClamp?: number;
-
-    renderHeader?: (info: any) => any;
-    formatter?: (info: any) => any;
-    render?: (info: any) => any;
-
-    selectionDisabled?: ((row: any) => boolean) | boolean;
-
-    selectionRows?: any;
-    hasSelectionRow?: (rowId: any) => boolean;
-    addSelectionRow?: (rowId: any, row: any) => void;
-    removeSelectionRow?: (rowId: any) => void;
-    getSelectionRows?: () => Array<any>;
-    clearSelectionRows?: () => void;
-
-    selectionAllBefore?: (done: Function) => Promise<void> | void;
-    selectionAddBefore?: (row: any, done: Function) => Promise<void> | void;
-    selectionAddAfter?: (row: any) => Promise<void> | void;
-    selectionRemoveBefore?: (row: any, done: Function) => Promise<void> | void;
-    selectionRemoveAfter?: (row: any) => Promise<void> | void;
-  }>(),
-  {
-    align: 'center',
-    showOverflowTooltip: true,
-    textLineClamp: 1
-  }
-);
-
-const props = _props as Readonly<BaseTableColumnProps>;
-
-const emits = defineEmits<{
-  (event: 'select', selection: any, row: any): void;
-  (event: 'select-all', selection: any): void;
-}>();
-
-const _selectionAllLoading = ref<boolean>(false);
-
-const BaseTableColumnHeaderRender = defineComponent({
-  name: 'table-column-header-render',
-  props: ['column', 'index'],
-  render: (params: any) => {
-    return props.renderHeader
-      ? props.renderHeader(
-          props.type == '_selection'
-            ? {
-                column: params.column,
-                index: params.index,
-                selectionInfo: {
-                  toggleCheckAll: handleCheckboxAllClick,
-                  checkboxAllChecked: checkboxAllChecked,
-                  checkboxAllIndeterminate: checkboxAllIndeterminate,
-                  selectionAllLoading: _selectionAllLoading
-                }
-              }
-            : { column: params.column, index: params.index }
-        )
-      : '';
-  }
-});
-const BaseTableColumnContentRender = defineComponent({
-  name: 'table-column-content-render',
-  props: ['column', 'cellValue', 'row', 'index'],
-  render: (params: any) => {
-    return props.render
-      ? props.render({
-          column: params.column,
-          index: params.index,
-          cellValue: params.cellValue,
-          row: params.row
-        })
-      : '';
-  }
-});
-
-const _selectionDisabled = (row: any) => {
-  if (isFunction(props.selectionDisabled)) {
-    const status = props?.selectionDisabled?.(row);
-    // if (status && props.prop && selectionRows?.has(row[props.prop])) {
-    //   console.log(row[props.prop], row, '已被禁用，无法设置选中');
-    //   removeSelectionRow?.(row[props.prop]);
-    // }
-    return status;
-  } else {
-    return props.selectionDisabled;
-  }
-};
-
-const getColumnValue = (row: any, index: number, column: any) => {
-  if (props.type == 'index') return `${index + 1}`;
-  if (props.formatter) {
-    return props.formatter({
-      row,
-      column: column,
-      cellValue: `${props.prop && row[props.prop]}`,
-      index: index
-    });
-  }
-  return `${props.prop && row[props.prop]}`;
-};
-
-const { selectionRows, addSelectionRow, removeSelectionRow, getSelectionRows } =
-  props;
-
-const checked = computed(() => {
-  return (row: any) => {
-    return props.prop && selectionRows?.has(row[props.prop]);
-  };
-});
-const filterPageAllData = computed(() =>
-  Array.isArray(props.pageAllData)
-    ? props.pageAllData.filter(row => !_selectionDisabled(row))
-    : []
-);
-
-const checkboxAllChecked = computed(() => {
-  return (
-    filterPageAllData.value.length > 0 &&
-    filterPageAllData.value.every(
-      (row: any) =>
-        props.prop && row[props.prop] && selectionRows?.has(row[props.prop])
-    )
-  );
-});
-const checkboxAllIndeterminate = computed(() => {
-  return (
-    filterPageAllData.value.length > 0 &&
-    !checkboxAllChecked.value &&
-    filterPageAllData.value.some(
-      (row: any) =>
-        props.prop && row[props.prop] && selectionRows?.has(row[props.prop])
-    )
-  );
-});
-
-const handleCheckboxAllClick = async () => {
-  if (Array.isArray(props.pageAllData)) {
-    if (_selectionAllLoading.value) return;
-    const fn = () => {
-      if (checkboxAllChecked.value) {
-        // 已经选择全部
-        filterPageAllData.value.forEach(row => {
-          props.prop && removeSelectionRow?.(row[props.prop]);
-        });
-      } else {
-        filterPageAllData.value.forEach(row => {
-          props.prop && addSelectionRow?.(row[props.prop], row);
-        });
-      }
-    };
-    try {
-      _selectionAllLoading.value = true;
-      if (isFunction(props.selectionAllBefore)) {
-        await props.selectionAllBefore(fn);
-      } else {
-        fn();
-      }
-    } catch (error) {}
-    _selectionAllLoading.value = false;
-  }
-  emits('select-all', getSelectionRows?.());
-};
-
-const handleCheckboxClick = async (row: any) => {
-  if (_selectionDisabled(row) || row._selectionLoading) return;
-  if (props.prop) {
-    row._selectionLoading = true;
-    try {
-      if (selectionRows?.has(row[props.prop])) {
-        if (isFunction(props.selectionRemoveBefore)) {
-          await props.selectionRemoveBefore(
-            row,
-            removeSelectionRow
-              ? removeSelectionRow.bind(null, row[props.prop])
-              : () => {}
-          );
-        } else {
-          removeSelectionRow?.(row[props.prop]);
-        }
-        row._selectionLoading = false;
-
-        isFunction(props.selectionRemoveAfter) &&
-          (await props.selectionRemoveAfter(row));
-      } else {
-        if (isFunction(props.selectionAddBefore)) {
-          await props.selectionAddBefore(
-            row,
-            addSelectionRow
-              ? addSelectionRow.bind(null, row[props.prop], row)
-              : () => {}
-          );
-        } else {
-          addSelectionRow?.(row[props.prop], row);
-        }
-        row._selectionLoading = false;
-
-        isFunction(props.selectionAddAfter) &&
-          (await props.selectionAddAfter(row));
-      }
-      emits('select', getSelectionRows?.(), row);
-    } catch (error) {
-      row._selectionLoading = false;
-    }
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/element/mixin.scss';
-.base-table-column {
-  ::v-deep {
-    .xrk-tooltip__trigger {
-      @include line_clamp(1);
-      word-break: break-all;
-    }
-  }
-}
-.table-base-checkbox {
-  ::v-deep {
-    .xrk-loading-mask {
-      background-color: transparent;
-    }
-    .xrk-loading-spinner {
-      width: 24px;
-      height: 24px;
-      margin-top: 0;
-      top: 50%;
-      left: -5px;
-      transform: translateY(-50%);
-      .circular {
-        width: 24px;
-        height: 24px;
-      }
-    }
-  }
-}
-</style>

package/packages/base/table/table.vue

@@ -1,168 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-07-01 14:34:52
--->
-<template>
-  <el-table
-    class="base-table"
-    :data="data"
-    :height="height"
-    :maxHeight="maxHeight"
-    :stripe="stripe"
-    :border="border"
-    :size="size"
-    :fit="fit"
-    :rowClassName="rowClassName"
-    :rowStyle="rowStyle"
-    :cellClassName="cellClassName"
-    :cellStyle="cellStyle"
-    :headerRowClassName="headerRowClassName"
-    :headerRowStyle="headerRowStyle"
-    :rowKey="rowKey"
-    :defaultExpandAll="defaultExpandAll"
-    :expandRowKeys="expandRowKeys"
-    :defaultSort="defaultSort"
-    :emptyText="emptyText"
-    @sort-change="handleSortChange"
-  >
-    <base-table-column
-      v-for="column in columns"
-      :key="column.prop"
-      :pageAllData="data"
-      :selectionRows="selectionRows"
-      :getSelectionRows="getSelectionRows"
-      :addSelectionRow="addSelectionRow"
-      :removeSelectionRow="removeSelectionRow"
-      :clearSelectionRows="clearSelectionRows"
-      v-bind="column"
-      @select="handleColumnSelect"
-      @select-all="handleColumnSelectAll"
-    ></base-table-column>
-    <template #empty><slot name="empty"></slot></template>
-  </el-table>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-table'
-};
-</script>
-<script lang="tsx" setup>
-import { ElTable } from 'element-plus';
-import { BaseTableColumn } from './index';
-import { BaseTableSortInfoType, BaseTableProps } from './types/type';
-import { useTableSetup } from './store';
-const {
-  selectionRows,
-  getSelectionRows,
-  addSelectionRow,
-  removeSelectionRow,
-  clearSelectionRows
-} = useTableSetup();
-const _props = withDefaults(
-  defineProps<{
-    data: Array<Record<string, any>>;
-    columns: any;
-
-    height?: string | number;
-    maxHeight?: string | number;
-    stripe?: boolean;
-    border?: boolean;
-    size?: 'large' | 'default' | 'small';
-    fit?: boolean;
-
-    rowClassName?: any;
-    rowStyle?: any;
-
-    cellClassName?: any;
-    cellStyle?: any;
-
-    headerRowClassName?: any;
-    headerRowStyle?: any;
-
-    headerCellClassName?: any;
-    headerCellStyle?: any;
-
-    rowKey?: ((row: Record<string, any>) => string) | string;
-    defaultExpandAll?: boolean;
-    expandRowKeys?: Array<string>;
-    emptyText?: string;
-    defaultSort?: { prop: string; order: 'ascending' | 'descending' };
-  }>(),
-  {
-    fit: true,
-    border: true,
-    emptyText: '暂无数据'
-  }
-);
-
-const props = _props as Readonly<BaseTableProps>;
-
-const emits = defineEmits<{
-  (event: 'sort-change', info: BaseTableSortInfoType): void;
-  (event: 'select', selection: any, row: any): void;
-  (event: 'select-all', selection: any): void;
-}>();
-
-const handleSortChange = (info: BaseTableSortInfoType) => {
-  emits('sort-change', info);
-};
-
-const handleColumnSelect = (selection: any, row: any) => {
-  emits('select', selection, row);
-};
-
-const handleColumnSelectAll = (selection: any) => {
-  emits('select-all', selection);
-};
-
-defineExpose({
-  getSelectionRows,
-  addSelectionRow,
-  removeSelectionRow,
-  clearSelectionRows
-});
-</script>
-
-<style lang="scss" scoped>
-.base-table {
-  --xrk-table-header-bg-color: #e6f1fc;
-  $headerBorderColor: rgba(
-    $color: #a3d0fd,
-    $alpha: 0.5
-  );
-  ::v-deep {
-    thead {
-      position: relative;
-      &::before,
-      &::after {
-        content: '';
-        position: absolute;
-        top: 0;
-        width: 1px;
-        height: 100%;
-        background-color: $headerBorderColor !important;
-        z-index: 4;
-      }
-      &::before {
-        left: 0;
-      }
-      &::after {
-        right: 0;
-      }
-    }
-    th.xrk-table__cell {
-      border-bottom-color: $headerBorderColor !important;
-      border-left-color: $headerBorderColor !important;
-      border-right-color: $headerBorderColor !important;
-      & > .cell {
-        color: #333;
-        font-weight: normal;
-      }
-    }
-    .xrk-table__inner-wrapper::after {
-      background-color: $headerBorderColor !important;
-    }
-  }
-}
-</style>

package/packages/base/table/types/type.ts

@@ -1,123 +0,0 @@
-import { TableColumnCtx } from 'element-plus/es/components/table/src/table-column/defaults';
-import { Component, ComputedRef, CSSProperties, Ref } from 'vue';
-
-export type RowClassNameType = (info: {
-  row: Record<string, any>;
-  rowIndex: string | number;
-}) => string;
-export type RowStyleType = (info: {
-  row: Record<string, any>;
-  rowIndex: string | number;
-}) => CSSProperties;
-export type CellClassNameType = (info: {
-  row: Record<string, any>;
-  column: TableColumnCtx<any>;
-  rowIndex: string | number;
-  columnIndex: string | number;
-}) => string;
-export type CellStyleType = (info: {
-  row: Record<string, any>;
-  column: TableColumnCtx<any>;
-  rowIndex: string | number;
-  columnIndex: string | number;
-}) => CSSProperties;
-export type BaseTableSortInfoType = {
-  column: TableColumnCtx<any>;
-  prop: string;
-  order: 'ascending' | 'descending' | null;
-};
-
-export type BaseTableProps = {
-  data: Array<Record<string, any>>;
-  columns: Array<BaseTableColumnProps>;
-
-  height?: string | number;
-  maxHeight?: string | number;
-  stripe?: boolean;
-  border?: boolean;
-  size?: 'large' | 'default' | 'small';
-  fit?: boolean;
-
-  rowClassName?: RowClassNameType;
-  rowStyle?: RowStyleType | CSSProperties;
-
-  cellClassName?: CellClassNameType;
-  cellStyle?: CellStyleType | CSSProperties;
-
-  headerRowClassName?: RowClassNameType;
-  headerRowStyle?: RowStyleType | CSSProperties;
-
-  headerCellClassName?: CellClassNameType;
-  headerCellStyle?: CellStyleType | CSSProperties;
-
-  rowKey?: ((row: Record<string, any>) => string) | string;
-  defaultExpandAll?: boolean;
-  expandRowKeys?: Array<string>;
-  emptyText?: string;
-  defaultSort?: { prop: string; order: 'ascending' | 'descending' };
-
-  onSortChange?: (info: BaseTableSortInfoType) => void;
-  onSelect?: (selection: any, row: any) => void;
-  onSelectAll?: (selection: any) => void;
-};
-
-export type BaseTableColumnProps = {
-  pageAllData?: Array<Record<string, any>>;
-  prop?: string;
-  type?: 'index' | 'expand' | '_selection';
-  index?: number | ((index: number) => number);
-  label?: string;
-  columnKey?: string;
-  width?: string | number;
-  minWidth?: string | number;
-  fixed?: boolean | 'left' | 'right';
-  sortable?: boolean | 'custom';
-  sortMethod?: (a: any, b: any) => number;
-  sortBy?: Array<string> | string | ((row: any, index: number) => string);
-  sortOrders?: Array<'ascending' | 'descending' | null>;
-  showOverflowTooltip?: boolean;
-  align?: 'left' | 'right' | 'center';
-  headerAlign?: 'left' | 'right' | 'center';
-  className?: string;
-  labelClassName?: string;
-
-  textLineClamp?: number;
-
-  renderHeader?: (info: {
-    column: TableColumnCtx<any>;
-    index: number;
-    selectionInfo?: {
-      toggleCheckAll?: () => void;
-      checkboxAllChecked: ComputedRef<boolean>;
-      checkboxAllIndeterminate: ComputedRef<boolean>;
-      selectionAllLoading: Ref<boolean>;
-    };
-  }) => JSX.Element;
-  formatter?: (info: {
-    row: Record<string, any>;
-    cellValue: any;
-    column: TableColumnCtx<any>;
-    index: number;
-  }) => any;
-  render?: (info: {
-    row: Record<string, any>;
-    cellValue: any;
-    column: TableColumnCtx<any>;
-    index: number;
-  }) => JSX.Element;
-
-  selectionDisabled?: ((row: any) => boolean) | boolean;
-
-  selectionRows?: Map<number | string, any>;
-  hasSelectionRow?: (rowId: any) => boolean;
-  addSelectionRow?: (rowId: any, row: any) => void;
-  removeSelectionRow?: (rowId: any) => void;
-  getSelectionRows?: () => Array<any>;
-  clearSelectionRows?: () => void;
-
-  selectionAllBefore?: (done: Function) => Promise<void> | void;
-  selectionAddBefore?: (row: any, done: Function) => Promise<void> | void;
-  selectionAddAfter?: (row: any) => Promise<void> | void;
-  selectionRemoveBefore?: (row: any, done: Function) => Promise<void> | void;
-  selectionRemoveAfter?: (row: any) => Promise<void> | void;
-};

package/packages/base/tag/index.ts

@@ -1,52 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-04 09:41:35
- */
-import { DefineComponent } from 'vue';
-import _BaseTagGroup from './tag-group.vue';
-import _BaseTag from './tag.vue';
-
-export type TagOption = {
-  label: string | number;
-  value: string | number;
-  closable?: boolean;
-};
-
-export type BaseTagGroupProps = {
-  modelValue?: Array<TagOption>;
-  labelKey?: string;
-  type?: 'success' | 'info' | 'warning' | 'danger';
-  disableTransitions?: boolean;
-  hit?: boolean;
-  color?: string;
-  size?: 'large' | 'default' | 'small';
-  effect?: 'dark' | 'light' | 'plain';
-  round?: boolean;
-
-  beforeClose?: (val: TagOption) => Promise<void>;
-  beforeAdd?: (val: string) => TagOption | Promise<TagOption>;
-  showAdd?: boolean;
-  addBtnText?: string;
-  maxlength?: number;
-
-  onChange?: (tags: Array<TagOption>) => void;
-  onClick?: (tag: TagOption) => void;
-};
-
-export type BaseTagProps = {
-  type?: 'success' | 'info' | 'warning' | 'danger';
-  closable?: boolean;
-  disableTransitions?: boolean;
-  hit?: boolean;
-  color?: string;
-  size?: 'large' | 'default' | 'small';
-  effect?: 'dark' | 'light' | 'plain';
-  round?: boolean;
-
-  onClick?: (tag: TagOption) => void;
-  onClose?: (tag: TagOption) => void;
-};
-
-export const BaseTag = _BaseTag as DefineComponent<BaseTagProps>;
-
-export const BaseTagGroup = _BaseTagGroup as DefineComponent<BaseTagGroupProps>;