xrk-components 0.3.0 → 0.3.3

package/packages/xrk/search/search.vue

@@ -1,197 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-29 14:48:27
--->
-<template>
-  <div class="xrk-search">
-    <base-form :model="searchValue">
-      <base-form-item
-        v-for="{
-          style,
-          label,
-          prop,
-          type,
-          disabled,
-          config,
-          listener
-        } in columns"
-        :prop="prop"
-        :label="label"
-        :key="prop"
-      >
-        <component
-          v-if="type"
-          :style="style"
-          :is="components[type]"
-          v-bind="{ ...config, ...proxyColumnListener(listener || {}) }"
-          :disabled="isFunction(disabled) ? disabled(searchValue) : disabled"
-          v-model="searchValue[prop]"
-        ></component>
-      </base-form-item>
-      <base-button v-if="searchBtn.show" :click="handleSearchClick">
-        {{ searchBtn.text }}
-      </base-button>
-      <base-button v-if="resetBtn.show" :plain="true" :click="handleResetClick">
-        {{ resetBtn.text }}
-      </base-button>
-      <base-search-render
-        :render="render"
-        v-for="({ render }, index) in otherComponents"
-        :key="index"
-      ></base-search-render>
-    </base-form>
-  </div>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'xrk-search'
-};
-</script>
-
-<script lang="tsx" setup>
-import BaseForm from '../../base/form/form.vue';
-import BaseFormItem from '../../base/form/form-item.vue';
-import BaseButton from '../../base/button/button.vue';
-import BaseInput from '../../base/input/input.vue';
-import BaseSelect from '../../base/select/select.vue';
-import BaseDatePicker from '../../base/date-picker/date-picker.vue';
-
-import {
-  ComponentsType,
-  SerachColumnType,
-  SearchBtnType,
-  ResetBtnType,
-  ComponentRender
-} from './types/type';
-
-import { ref, withDefaults, reactive, shallowRef, defineComponent } from 'vue';
-import { base, check } from 'xrk-tools';
-import { isFunction } from '../../../tools/check';
-
-const components = ref<ComponentsType>({
-  input: shallowRef(BaseInput),
-  select: shallowRef(BaseSelect),
-  datePicker: shallowRef(BaseDatePicker)
-});
-
-const _props = withDefaults(
-  defineProps<{
-    columns: any;
-    searchBtn?: any;
-    resetBtn?: any;
-    otherComponents?: any;
-  }>(),
-  {
-    searchBtn: () => ({
-      text: '搜索',
-      show: true
-    }),
-    resetBtn: () => ({
-      text: '重置',
-      show: true
-    })
-  }
-);
-
-const props = _props as Readonly<{
-  columns: Array<SerachColumnType>;
-  searchBtn?: SearchBtnType | undefined;
-  resetBtn?: ResetBtnType | undefined;
-  otherComponents?: ComponentRender[] | undefined;
-}>;
-
-const emits = defineEmits<{
-  (event: 'search', searchValue: Record<string, any>): void;
-}>();
-
-const columnsToSearchValue = (columns: typeof props.columns) => {
-  return columns.reduce((pre: Record<string, any>, { prop, defaultValue }) => {
-    pre[prop] = defaultValue || '';
-    return pre;
-  }, {});
-};
-
-// 将 searchValue 传入 每个搜索项的监听事件
-const proxyColumnListener = (listener: Record<string, Function>) => {
-  return Object.keys(listener).reduce((pre: Record<string, Function>, cur) => {
-    pre[cur] = (...args: any) => {
-      listener[cur](...args, searchValue);
-    };
-    return pre;
-  }, {});
-};
-
-const searchValue = reactive<Record<string, any>>(
-  columnsToSearchValue(props.columns)
-);
-
-const BaseSearchRender = defineComponent({
-  name: 'search-render',
-  props: {
-    render: Function
-  },
-  render: (ctx: { render: ComponentRender['render'] }) => {
-    return ctx.render
-      ? ctx.render({ columns: props.columns, searchValue })
-      : '';
-  }
-});
-
-const handleSearchClick = async () => {
-  let _searchValue = base.deepClone(searchValue);
-  if (isFunction(props.searchBtn?.beforeSearch)) {
-    _searchValue = await props.searchBtn?.beforeSearch?.(_searchValue);
-  }
-
-  emits('search', _searchValue);
-
-  if (isFunction(props.searchBtn?.afterSearch)) {
-    await props.searchBtn?.afterSearch?.(_searchValue);
-  }
-};
-
-const handleResetClick = async () => {
-  Object.keys(searchValue).forEach(
-    searchKey => (searchValue[searchKey] = null)
-  );
-  let _searchValue = base.deepClone(searchValue);
-  if (isFunction(props.resetBtn?.beforeReset)) {
-    _searchValue = await props.resetBtn?.beforeReset?.(_searchValue);
-  }
-  emits('search', _searchValue);
-
-  if (isFunction(props.resetBtn?.afterReset)) {
-    await props.resetBtn?.afterReset?.(_searchValue);
-  }
-};
-
-defineExpose({
-  getSearchValue: (): Record<string, any> => {
-    return base.deepClone(searchValue);
-  },
-  setSearchValue: (key: string | number, value: any) => {
-    if (props.columns.findIndex(({ prop }) => prop == key) == -1) {
-      console.warn(`原始search配置项不存在${key}属性，建议修改`);
-    }
-    searchValue[key] = value;
-  },
-  handleSearchClick: handleSearchClick,
-  handleResetClick: handleResetClick
-});
-</script>
-
-<style lang="scss" scoped>
-.xrk-search {
-  ::v-deep {
-    & > .xrk-form {
-      display: flex;
-      flex-wrap: wrap;
-      .xrk-form-item {
-        margin-bottom: 12px;
-        margin-right: 12px;
-      }
-    }
-  }
-}
-</style>

package/packages/xrk/search/types/type.ts

@@ -1,95 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-29 16:09:25
- */
-import { Component, CSSProperties } from 'vue';
-import { BaseInputProps } from '../../../base/input';
-import { BaseDatePickerProps } from '../../../base/date-picker';
-import {
-  BaseSelectProps,
-  SelectOptionType,
-  SelectValueType
-} from '../../../base/select';
-import { FormItemRule } from 'element-plus';
-
-type AnyObject = Record<string, any>;
-
-export type BaseSelectListener = {
-  onChange?: (
-    value: SelectValueType,
-    selectOptions: Array<SelectOptionType>,
-    searchValue: AnyObject
-  ) => void;
-  onRemoveTag?: (value: SelectValueType, searchValue: AnyObject) => void;
-  onVisibleChange?: (visibleStatus: boolean, searchValue: AnyObject) => void;
-  onClear?: (searchValue: AnyObject) => void;
-};
-
-export type BaseInputListener = {
-  onBlur?: (events: Event, searchValue: AnyObject) => void;
-  onFocus?: (events: Event, searchValue: AnyObject) => void;
-  onKeyup?: (events: Event, searchValue: AnyObject) => void;
-  onChange?: (
-    value: string | number | KeyboardEvent,
-    searchValue: AnyObject
-  ) => void;
-  onInput?: (
-    value: string | number | KeyboardEvent,
-    searchValue: AnyObject
-  ) => void;
-  onClear?: (searchValue: AnyObject) => void;
-};
-
-export type BaseDatePickerListener = {
-  onChange?: (value: any, searchValue: AnyObject) => void;
-  onVisibleChange?: (visibleStatus: boolean, searchValue: AnyObject) => void;
-  onCalendarChange?: (val: [Date, Date | null], searchValue: AnyObject) => void;
-};
-
-export interface ComponentsType {
-  input: Component;
-  select: Component;
-  datePicker: Component;
-}
-
-export type SerachColumnBaseType<T, S> = {
-  type?: keyof ComponentsType;
-  label?: string;
-  style?: CSSProperties;
-  defaultValue?: any;
-  prop: string;
-  rules?: FormItemRule | Array<FormItemRule>;
-  disabled?: boolean | ((searchValue: AnyObject) => Promise<boolean> | boolean);
-  config?: T;
-  listener?: S;
-};
-
-export type SerachColumnType = SerachColumnBaseType<
-  BaseInputProps | BaseSelectProps | BaseDatePickerProps,
-  BaseInputListener | BaseSelectListener | BaseDatePickerListener
->;
-
-export type SearchBtnType = {
-  text?: string;
-  show?: boolean;
-  beforeSearch?: (searchValue: AnyObject) => AnyObject | Promise<AnyObject>;
-  afterSearch?: (
-    searchValue: AnyObject
-  ) => void | AnyObject | Promise<AnyObject>;
-};
-
-export type ResetBtnType = {
-  text?: string;
-  show?: boolean;
-  beforeReset?: (searchValue: AnyObject) => AnyObject | Promise<AnyObject>;
-  afterReset?: (
-    searchValue: AnyObject
-  ) => void | AnyObject | Promise<AnyObject>;
-};
-
-export interface ComponentRender {
-  render: (renderInfo: {
-    columns: Array<SerachColumnType>;
-    searchValue: Record<string, any>;
-  }) => Component;
-}

package/packages/xrk/table/hooks/use-table.tsx

@@ -1,34 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-04 16:46:02
- */
-import { ref } from 'vue';
-import { isFunction } from '../../../../tools/check';
-
-export const useTable = (config: any) => {
-  const pageIsLoading = ref<boolean>(false);
-  const pageAllData = ref<Array<any>>([]);
-  const paginationTotal = ref<number>(0);
-
-  const getList = async (query: any) => {
-    if (pageIsLoading.value) return;
-    pageIsLoading.value = true;
-    try {
-      if (isFunction(config.getListAjax)) {
-        const res = await config.getListAjax(query);
-        pageAllData.value = res.data.list;
-        paginationTotal.value = res.data.total;
-      }
-    } catch (error) {
-      console.warn(error);
-    }
-    pageIsLoading.value = false;
-  };
-
-  return {
-    pageIsLoading,
-    pageAllData,
-    paginationTotal,
-    getList
-  };
-};

package/packages/xrk/table/index.ts

@@ -1,10 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-04 17:18:12
- */
-import { DefineComponent } from 'vue';
-
-import _XrkTable from './table.vue';
-import { XrkTableProps } from './types/type';
-
-export const XrkTable = _XrkTable as DefineComponent<XrkTableProps>;

package/packages/xrk/table/table.vue

@@ -1,218 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-07-04 16:42:21
--->
-<template>
-  <xrk-search
-    ref="XrkSearchRef"
-    :columns="searchConfig.searchColumns"
-    :search-btn="searchConfig.searchBtn"
-    :reset-btn="searchConfig.resetBtn"
-    :other-components="searchConfig.othertComponents"
-    @search="handleSearch"
-  ></xrk-search>
-  <div class="slot-before slot">
-    <slot
-      name="tableBefore"
-      :selectionRows="TableSelectionRows"
-      :tableData="pageAllData"
-      :searchQuery="query"
-    ></slot>
-  </div>
-  <base-table
-    class="xrk-table-content"
-    v-loading="pageIsLoading"
-    ref="XrkTablebaseTableRef"
-    :data="pageAllData"
-    :columns="tableConfig.tableColumns"
-    @select-all="handleTableSelect"
-    @select="handleTableSelect"
-  ></base-table>
-  <div class="slot-after slot">
-    <slot
-      name="tableAfter"
-      :selectionRows="TableSelectionRows"
-      :tableData="pageAllData"
-      :searchQuery="query"
-    ></slot>
-  </div>
-  <base-pagination
-    ref="BasePaginationRef"
-    :total="paginationTotal"
-    :pageSize="paginationConfig.paginationPageSize"
-    :currentPage="paginationConfig.paginationCurrentPage"
-    @size-change="handlePageChange"
-    @current-change="handlePageChange"
-  ></base-pagination>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'xrk-table'
-};
-</script>
-
-<script lang="tsx" setup>
-import XrkSearch from '../search/search.vue';
-import { BaseTable } from '../../base/table';
-import { BasePagination } from '../../base/pagination';
-import { useTable } from './hooks/use-table';
-import { base } from 'xrk-tools';
-import { BaseTableColumnProps } from '../../base/table/types/type';
-import { onBeforeMount } from 'vue-demi';
-import { computed, onMounted, ref } from 'vue';
-import { vLoading as _vLoading } from 'element-plus';
-import { XrkTableProps } from './types/type';
-const _props = withDefaults(
-  defineProps<{
-    requestNow?: boolean;
-    getListAjax: (...args: any) => Promise<any> | any;
-    searchConfig: {
-      searchColumns: Array<any>;
-      searchBtn?: any;
-      resetBtn?: any;
-      othertComponents?: Array<any>;
-    };
-    tableConfig: {
-      tableColumns: Array<any>;
-    };
-    paginationConfig?: {
-      pageNoKey?: string;
-      pageSizeKey?: string;
-      paginationPageSize: number;
-      paginationCurrentPage: number;
-    };
-  }>(),
-  {
-    requestNow: true,
-    paginationConfig: () => ({
-      pageNoKey: 'pageNo',
-      pageSizeKey: 'pageSize',
-      paginationPageSize: 60,
-      paginationCurrentPage: 1
-    })
-  }
-);
-
-interface _XrkTableProps extends XrkTableProps {
-  paginationConfig: {
-    pageNoKey: string;
-    pageSizeKey: string;
-    paginationPageSize: number;
-    paginationCurrentPage: number;
-  };
-}
-
-const props = _props as Readonly<_XrkTableProps>;
-
-const vLoading = _vLoading;
-
-const TableSelectionRows = ref<any>([]);
-const XrkSearchRef = ref<any>(null);
-const XrkTablebaseTableRef = ref<any>(null);
-const BasePaginationRef = ref<any>(null);
-const pageNoKey = props.paginationConfig.pageNoKey as string;
-const pageSizeKey = props.paginationConfig.pageSizeKey as string;
-
-const paginationQuery = ref<{
-  [propname: string]: number;
-}>({
-  [pageNoKey]: props.paginationConfig?.paginationCurrentPage,
-  [pageSizeKey]: props.paginationConfig?.paginationPageSize
-});
-const searchQuery = ref<Record<string, any>>({});
-
-const query = computed(() => ({
-  ...paginationQuery.value,
-  ...searchQuery.value
-}));
-
-const initSearchQuery = () => {
-  const searchQueryDefault = XrkSearchRef.value?.getSearchValue?.() || {};
-  searchQuery.value = searchQueryDefault;
-};
-
-const initPageInfo = (pageNo = 1) => {
-  BasePaginationRef.value?.setPageInfo({
-    pageSize: paginationQuery.value[pageSizeKey],
-    currentPage: pageNo
-  });
-  paginationQuery.value[pageNoKey] = pageNo;
-};
-
-const clearSelectionRows = () => {
-  XrkTablebaseTableRef.value?.clearSelectionRows?.();
-  TableSelectionRows.value = [];
-};
-
-const handleSearch = (searchValue: any) => {
-  searchQuery.value = base.deepClone(searchValue);
-  initPageInfo(1);
-  clearSelectionRows();
-  getList?.(query.value);
-};
-
-const handlePageChange = () => {
-  const pageInfo = BasePaginationRef.value?.getPageInfo?.();
-  paginationQuery.value = {
-    [pageNoKey]: pageInfo.currentPage,
-    [pageSizeKey]: pageInfo.pageSize
-  };
-  getList?.(query.value);
-};
-
-const handleTableSelect = () => {
-  const res = XrkTablebaseTableRef.value?.getSelectionRows?.();
-  TableSelectionRows.value = Array.isArray(res) ? res : [];
-};
-
-const { pageAllData, getList, paginationTotal, pageIsLoading } = useTable({
-  getListAjax: props.getListAjax
-});
-
-onMounted(() => {
-  initSearchQuery();
-  clearSelectionRows();
-  props.requestNow && getList?.(query.value);
-});
-
-defineExpose({
-  getSelectionRows: () => XrkTablebaseTableRef.value?.getSelectionRows?.(),
-  addSelectionRow: (rowId: string | number, row: any) =>
-    XrkTablebaseTableRef.value?.addSelectionRow?.(rowId, row),
-  removeSelectionRow: (rowId: string | number) =>
-    XrkTablebaseTableRef.value?.removeSelectionRow?.(rowId),
-  clearSelectionRows: () => XrkTablebaseTableRef.value?.clearSelectionRows?.(),
-
-  setSearchValue: (key: string | number, value: any) =>
-    XrkSearchRef.value?.setSearchValue?.(key, value),
-  initCurrentList: (customQuery: any) => {
-    initSearchQuery();
-    getList?.({ ...(customQuery || {}), ...query.value });
-  },
-  initList: (customQuery: any) => {
-    initSearchQuery();
-    initPageInfo(1);
-    getList?.({ ...(customQuery || {}), ...query.value });
-  }
-});
-</script>
-
-<style lang="scss" scope>
-$margin: 12px;
-.xrk-table-content {
-  margin: $margin 0;
-}
-.slot {
-  &:empty {
-    margin-top: 0;
-    margin-bottom: 0;
-  }
-  &-before {
-    margin-top: $margin;
-  }
-  &-after {
-    margin-bottom: $margin;
-  }
-}
-</style>

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

@@ -1,31 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-04 17:19:44
- */
-import { BaseTableColumnProps } from '../../../base/table/types/type';
-import {
-  ComponentRender,
-  ResetBtnType,
-  SearchBtnType,
-  SerachColumnType
-} from '../../search/types/type';
-
-export type XrkTableProps = {
-  requestNow?: boolean;
-  getListAjax: (...args: any) => Promise<any> | any;
-  searchConfig: {
-    searchColumns: Array<SerachColumnType>;
-    searchBtn?: SearchBtnType;
-    resetBtn?: ResetBtnType;
-    othertComponents?: Array<ComponentRender>;
-  };
-  tableConfig: {
-    tableColumns: Array<BaseTableColumnProps>;
-  };
-  paginationConfig?: {
-    pageNoKey?: string;
-    pageSizeKey?: string;
-    paginationPageSize: number;
-    paginationCurrentPage: number;
-  };
-};

package/rollup.config.js

@@ -1,59 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-06 10:15:25
- */
-
-const path = require('path');
-
-import commonjs from '@rollup/plugin-commonjs';
-import resolve from '@rollup/plugin-node-resolve';
-
-import jsx from 'acorn-jsx';
-import babel from 'rollup-plugin-babel';
-import typescript from 'typescript';
-import clear from 'rollup-plugin-clear';
-import rollupTypescript from 'rollup-plugin-typescript2';
-import rollupVue from 'rollup-plugin-vue';
-import rollupPostcss from 'rollup-plugin-postcss';
-import autoprefixer from 'autoprefixer';
-
-const outdir = 'lib';
-
-export default {
-  input: 'packages/index.ts',
-  output: [
-    {
-      format: 'esm',
-      file: `${outdir}/index.esm.js`
-    },
-    {
-      name: 'Xrk',
-      format: 'umd',
-      file: `${outdir}/index.umd.js`
-    }
-  ],
-  plugins: [
-    clear({ targets: [outdir] }),
-    resolve(),
-    rollupTypescript({
-      check: false,
-      include: ['*.ts+(|x)', '**/*.ts+(|x)'],
-      exclude: 'node_modules/**',
-      typescript: typescript
-    }),
-    rollupVue({
-      preprocessStyles: true
-    }),
-    rollupPostcss({
-      extract: path.resolve(`${outdir}/index.css`),
-      plugins: [autoprefixer()]
-    }),
-    commonjs(),
-    babel({
-      runtimeHelpers: true,
-      exclude: 'node_modules/**'
-    })
-  ],
-  acornInjectPlugins: [jsx()],
-  external: ['vue', 'element-plus', 'xrk-tools']
-};

package/styles/element/index.scss

@@ -1,5 +0,0 @@
-@forward '~element-plus/theme-chalk/src/mixins/config.scss' with (
-  $namespace: 'xrk'
-);
-
-@import '~element-plus/theme-chalk/src/index.scss';

package/styles/element/mixin.scss

@@ -1,40 +0,0 @@
-// 清除浮动
-@mixin clearfix {
-  &:after {
-    content: '';
-    display: table;
-    clear: both;
-  }
-}
-
-@mixin flex_jc_ai($jc: space-between, $ai: center) {
-  display: flex;
-  justify-content: $jc;
-  align-items: $ai;
-}
-
-// 超出显示省略号
-@mixin line_clamp($condition: 2) {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  -webkit-box-orient: vertical;
-  display: -webkit-box;
-  -webkit-line-clamp: $condition;
-  white-space: initial;
-}
-
-// all 上下左右居中, x 左右居中，y上下居中
-@mixin absolute_mid($type: 'all') {
-  position: absolute;
-  @if $type == 'all' {
-    top: 50%;
-    left: 50%;
-    transform: translate(-50%, -50%);
-  } @else if $type == 'x' {
-    left: 50%;
-    transform: translateX(-50%);
-  } @else {
-    top: 50%;
-    transform: translateY(-50%);
-  }
-}

package/tools/check.ts

@@ -1,9 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 11:46:30
- */
-import { check } from 'xrk-tools';
-
-export function isFunction<T = Function>(val: unknown): val is T {
-  return check.isFunction(val) || check.isAsyncFunction(val);
-}