xrk-components 0.3.0 → 0.3.3

package/lib/packages/base/dialog/index.d.ts

@@ -15,9 +15,10 @@ export declare type BaseDialogProps = {
     width?: string | number;
     title?: string;
     content?: string;
-    titleRender?: () => Component;
-    contentRender?: () => Component;
-    footerRender?: () => Component;
+    showFooter?: boolean;
+    titleRender?: (done: Function) => Component;
+    contentRender?: (done: Function) => Component;
+    footerRender?: (done: Function) => Component;
     confirmBtnConfig?: DialogBtnConfigProps;
     cancelBtnConfig?: DialogBtnConfigProps;
     onClose?: () => Promise<void> | void;

package/lib/packages/base/select/index.d.ts

@@ -26,8 +26,11 @@ export interface BaseSelectProps {
     filterable?: boolean;
     allowCreate?: boolean;
     fitInputWidth?: boolean;
+    /**
+     * 自定义筛选方法
+     */
     filterMethod?: (searchVal: string) => Array<SelectValueType>;
-    remoteMethod?: Function;
+    remoteMethod?: (searchVal?: string) => any;
     loadingText?: string;
     noMatchText?: string;
     noDataText?: string;

package/lib/packages/xrk/table/table.d.ts

@@ -19,12 +19,6 @@ declare const _default: import("vue").DefineComponent<{
     paginationConfig: {
         type: ObjectConstructor;
         required: false;
-        default: () => {
-            pageNoKey: string;
-            pageSizeKey: string;
-            paginationPageSize: number;
-            paginationCurrentPage: number;
-        };
     };
 }, (_ctx: any, _cache: any) => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
     [key: string]: any;
@@ -49,15 +43,8 @@ declare const _default: import("vue").DefineComponent<{
     paginationConfig: {
         type: ObjectConstructor;
         required: false;
-        default: () => {
-            pageNoKey: string;
-            pageSizeKey: string;
-            paginationPageSize: number;
-            paginationCurrentPage: number;
-        };
     };
 }>>, {
     requestNow: boolean;
-    paginationConfig: Record<string, any>;
 }>;
 export default _default;

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

@@ -15,7 +15,7 @@ export declare type XrkTableProps = {
     paginationConfig?: {
         pageNoKey?: string;
         pageSizeKey?: string;
-        paginationPageSize: number;
-        paginationCurrentPage: number;
+        paginationPageSize?: number;
+        paginationCurrentPage?: number;
     };
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "xrk-components",
-  "version": "0.3.0",
+  "version": "0.3.3",
   "description": "",
   "main": "lib/index.esm.js",
   "typings": "lib/packages/index.d.ts",

package/packages/base/button/button.vue

@@ -1,83 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:14:09
--->
-<template>
-  <el-button
-    @click="handleClick"
-    :loading="isLoading"
-    :size="size"
-    :type="type"
-    :plain="plain"
-    :round="round"
-    :circle="circle"
-    :disabled="disabled"
-    :autofocus="autofocus"
-    :autoInsertSpace="autoInsertSpace"
-    :nativeType="nativeType"
-    :loadingIcon="loadingIcon"
-    :icon="icon"
-  >
-    <slot></slot>
-  </el-button>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-button'
-};
-</script>
-
-<script lang="tsx" setup>
-import { Component, computed, ref } from 'vue';
-import { ElButton } from 'element-plus';
-import { BaseButtonProps } from './index';
-
-const _props = withDefaults(
-  defineProps<{
-    click?: any; // 自定义方法 ， 用于事件同步执行
-    loading?: boolean; // 是否为加载中状态
-    loadingIcon?: any; // 自定义加载中状态图标组件
-    size?: 'large' | 'default' | 'small'; // 尺寸
-    type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
-    plain?: boolean; // 是否为朴素按钮
-    round?: boolean; // 是否为圆角按钮
-    circle?: boolean; // 是否为圆形按钮
-    disabled?: boolean; // 按钮是否为禁用状态
-    autofocus?: boolean; // 原生 autofocus 属性
-    autoInsertSpace?: boolean; // 自动在两个中文字符之间插入空格
-    nativeType?: 'button' | 'submit' | 'reset'; // 原生 type 属性
-    icon?: any; // 图标组件
-  }>(),
-  {
-    type: 'primary',
-    size: 'default'
-  }
-);
-
-const props = _props as Readonly<BaseButtonProps>;
-
-const { handleClick, isLoading } = (() => {
-  const _loading = ref<boolean>(false);
-  const isLoading = computed(() => {
-    return props.loading || _loading.value;
-  });
-  return {
-    isLoading: isLoading,
-    handleClick: (props.click
-      ? async () => {
-          _loading.value = true;
-          try {
-            await props.click?.();
-            _loading.value = false;
-          } catch (error) {
-            console.warn(error);
-            _loading.value = false;
-          }
-        }
-      : undefined) as ((evt: MouseEvent) => any) | undefined
-  };
-})();
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/button/index.ts

@@ -1,26 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-30 22:57:42
- */
-import { Component, DefineComponent } from 'vue';
-import _BaseButton from './button.vue';
-
-export type BaseButtonProps = {
-  click?: (...preload: Array<any>) => Promise<any> | void | any; // 自定义方法 ， 用于事件同步执行
-  loading?: boolean; // 是否为加载中状态
-  loadingIcon?: string | Component; // 自定义加载中状态图标组件
-  size?: 'large' | 'default' | 'small'; // 尺寸
-  type?: 'primary' | 'success' | 'warning' | 'danger' | 'info' | 'text';
-  plain?: boolean; // 是否为朴素按钮
-  round?: boolean; // 是否为圆角按钮
-  circle?: boolean; // 是否为圆形按钮
-  disabled?: boolean; // 按钮是否为禁用状态
-  autofocus?: boolean; // 原生 autofocus 属性
-  autoInsertSpace?: boolean; // 自动在两个中文字符之间插入空格
-  nativeType?: 'button' | 'submit' | 'reset'; // 原生 type 属性
-  icon?: string | Component; // 图标组件
-
-  onClick?: Function;
-};
-
-export const BaseButton = _BaseButton as DefineComponent<BaseButtonProps>;

package/packages/base/checkbox/checkbox-button.vue

@@ -1,54 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:37
--->
-<template>
-  <el-checkbox-button
-    :model-value="modelValue"
-    :size="size"
-    :name="name"
-    :label="label"
-    :disabled="disabled"
-    :border="border"
-    :true-label="trueLabel"
-    :false-label="falseLabel"
-    :checked="checked"
-    @change="handleChange"
-  >
-    <slot></slot>
-  </el-checkbox-button>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-checkbox-button'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElCheckboxButton } from 'element-plus';
-
-defineProps<{
-  modelValue?: string | number | boolean; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Checkbox 的尺寸
-  name?: string; // 原生 name 属性
-  label?: string | number | boolean; // 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
-  disabled?: boolean; // 	是否禁用
-  border?: boolean; // 	是否显示边框
-  trueLabel?: string | number; // 选中时的值
-  falseLabel?: string | number; // 没有选中时的值
-  checked?: boolean; // 当前是否勾选
-}>();
-
-const emits = defineEmits<{
-  (event: 'change', activeValue: any): void;
-  (event: 'update:modelValue', activeValue: any): void;
-}>();
-
-const handleChange = (activeValue: any) => {
-  emits('update:modelValue', activeValue);
-  emits('change', activeValue);
-};
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/checkbox/checkbox-group.vue

@@ -1,85 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:37
--->
-<template>
-  <el-checkbox-group
-    class="base-checkbox-group"
-    :model-value="modelValue"
-    :size="size"
-    :disabled="disabled"
-    :text-color="textColor"
-    :fill="fill"
-    :label="label"
-    :min="min"
-    :max="max"
-    @change="handleChange"
-  >
-    <div style="display: inline-block" v-loading="_loading">
-      <slot></slot>
-    </div>
-  </el-checkbox-group>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-checkbox-group'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ref } from 'vue';
-import { ElCheckboxGroup, vLoading as _vLoading } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-
-const vLoading = _vLoading;
-const props = defineProps<{
-  modelValue?: Array<any>; // 绑定值
-  size?: 'large' | 'default' | 'small'; // 多选框组尺寸
-  disabled?: boolean; // 是否禁用
-  textColor?: string; // 当按钮为活跃状态时的字体颜色
-  fill?: string; // 当按钮为活跃状态时的边框和背景颜色
-  label?: string; // 为屏幕阅读器准备的标签
-  min?: number; // 可被勾选的 checkbox 的最小数量
-  max?: number; // 可被勾选的 checkbox 的最大数量
-
-  checkBefore?: (activeValue: any, done: Function) => void;
-}>();
-
-const emits = defineEmits<{
-  (event: 'change', activeValue: any): void;
-  (event: 'update:modelValue', activeValue: any): void;
-}>();
-
-const _loading = ref(false);
-
-const handleChange = async (activeValue: any) => {
-  if (_loading.value) return;
-  _loading.value = true;
-  try {
-    if (
-      (props.modelValue?.length || 0) < activeValue?.length &&
-      isFunction(props.checkBefore)
-    ) {
-      await props.checkBefore(activeValue, () => {
-        emits('update:modelValue', activeValue);
-        emits('change', activeValue);
-      });
-    } else {
-      emits('update:modelValue', activeValue);
-      emits('change', activeValue);
-    }
-  } catch (error) {}
-  _loading.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.base-checkbox-group {
-  ::v-deep {
-    .xrk-loading-spinner .circular {
-      width: 20px;
-    }
-  }
-}
-</style>

package/packages/base/checkbox/checkbox.vue

@@ -1,85 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:37
--->
-<template>
-  <el-checkbox
-    class="base-checkbox"
-    :model-value="modelValue"
-    :size="size"
-    :name="name"
-    :label="label"
-    :disabled="disabled"
-    :border="border"
-    :true-label="trueLabel"
-    :false-label="falseLabel"
-    :checked="checked"
-    :indeterminate="indeterminate"
-    v-loading="_loading"
-    @change="handleChange"
-  >
-    <slot></slot>
-  </el-checkbox>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-checkbox'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ref } from 'vue';
-import { ElCheckbox, vLoading as _vLoading } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-
-const vLoading = _vLoading;
-const props = defineProps<{
-  modelValue?: string | number | boolean; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Checkbox 的尺寸
-  name?: string; // 原生 name 属性
-  label?: string | number | boolean; // 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
-  disabled?: boolean; // 	是否禁用
-  border?: boolean; // 	是否显示边框
-  trueLabel?: string | number; // 选中时的值
-  falseLabel?: string | number; // 没有选中时的值
-  checked?: boolean; // 当前是否勾选
-  indeterminate?: boolean; // 设置 indeterminate 状态，只负责样式控制
-
-  checkBefore?: (activeValue: any, done: Function) => void;
-}>();
-
-const emits = defineEmits<{
-  (event: 'change', activeValue: any): void;
-  (event: 'update:modelValue', activeValue: any): void;
-}>();
-
-const _loading = ref(false);
-
-const handleChange = async (activeValue: any) => {
-  if (_loading.value) return;
-  _loading.value = true;
-  try {
-    if (activeValue && isFunction(props.checkBefore)) {
-      await props.checkBefore(activeValue, () => {
-        emits('update:modelValue', activeValue);
-        emits('change', activeValue);
-      });
-    } else {
-      emits('update:modelValue', activeValue);
-      emits('change', activeValue);
-    }
-  } catch (error) {}
-  _loading.value = false;
-};
-</script>
-
-<style lang="scss" scoped>
-.base-checkbox {
-  ::v-deep {
-    .xrk-loading-spinner .circular {
-      width: 20px;
-    }
-  }
-}
-</style>

package/packages/base/checkbox/index.ts

@@ -1,62 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 10:29:26
- */
-import { DefineComponent } from 'vue';
-import _BaseCheckboxButton from './checkbox-button.vue';
-import _BaseCheckboxGroup from './checkbox-group.vue';
-import _BaseCheckbox from './checkbox.vue';
-
-export type BaseCheckboxButtonProps = {
-  modelValue?: string | number | boolean; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Checkbox 的尺寸
-  name?: string; // 原生 name 属性
-  label?: string | number | boolean; // 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
-  disabled?: boolean; // 	是否禁用
-  border?: boolean; // 	是否显示边框
-  trueLabel?: string | number; // 选中时的值
-  falseLabel?: string | number; // 没有选中时的值
-  checked?: boolean; // 当前是否勾选
-
-  onChange?: (activeValue: any) => void;
-  onClick?: (payload?: MouseEvent) => void;
-};
-
-export type BaseCheckboxGroupProps = {
-  modelValue?: Array<any>; // 绑定值
-  size?: 'large' | 'default' | 'small'; // 多选框组尺寸
-  disabled?: boolean; // 是否禁用
-  textColor?: string; // 当按钮为活跃状态时的字体颜色
-  fill?: string; // 当按钮为活跃状态时的边框和背景颜色
-  label?: string; // 为屏幕阅读器准备的标签
-  min?: number; // 可被勾选的 checkbox 的最小数量
-  max?: number; // 可被勾选的 checkbox 的最大数量
-  checkBefore?: (activeValue: any, done: Function) => void;
-
-  onChange?: (activeValue: any) => void;
-};
-
-export type BaseCheckboxProps = {
-  modelValue?: string | number | boolean; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Checkbox 的尺寸
-  name?: string; // 原生 name 属性
-  label?: string | number | boolean; // 选中状态的值（只有在checkbox-group或者绑定对象类型为array时有效）
-  disabled?: boolean; // 	是否禁用
-  border?: boolean; // 	是否显示边框
-  trueLabel?: string | number; // 选中时的值
-  falseLabel?: string | number; // 没有选中时的值
-  checked?: boolean; // 当前是否勾选
-  indeterminate?: boolean; // 设置 indeterminate 状态，只负责样式控制
-  checkBefore?: (activeValue: any, done: Function) => void;
-
-  onChange?: (activeValue: any) => void;
-  onClick?: (payload?: MouseEvent) => void;
-};
-
-export const BaseCheckboxButton =
-  _BaseCheckboxButton as DefineComponent<BaseCheckboxButtonProps>;
-
-export const BaseCheckboxGroup =
-  _BaseCheckboxGroup as DefineComponent<BaseCheckboxGroupProps>;
-
-export const BaseCheckbox = _BaseCheckbox as DefineComponent<BaseCheckboxProps>;

package/packages/base/date-picker/date-picker.vue

@@ -1,144 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:17:01
--->
-<template>
-  <el-date-picker
-    v-model="dateValue"
-    :readonly="readonly"
-    :disabled="disabled"
-    :size="size"
-    :editable="editable"
-    :clearable="clearable"
-    :placeholder="placeholder"
-    :start-placeholder="startPlaceholder"
-    :end-placeholder="endPlaceholder"
-    :type="type"
-    :format="format"
-    :popper-class="popperClass"
-    :range-separator="rangeSeparator"
-    :default-value="defaultValue"
-    :default-time="defaultTime"
-    :value-format="valueFormat"
-    :unlink-panels="unlinkPanels"
-    :prefix-icon="prefixIcon"
-    :clear-icon="clearIcon"
-    :validate-event="validateEvent"
-    :disabled-date="_disabledDate"
-    :shortcuts="shortcuts"
-    :cell-class-name="cellClassName"
-    :teleported="teleported"
-    @change="handleChange"
-    @visible-change="handleVisibleChange"
-    @calendar-change="handleCalendarChange"
-  ></el-date-picker>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-date-picker'
-};
-</script>
-<script lang="tsx" setup>
-import { withDefaults, ref, Component, computed, watch } from 'vue';
-import { ElDatePicker } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-import { BaseDatePickerProps } from './index';
-
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: any; // 选中项绑定值
-    readonly?: boolean; // 只读
-    disabled?: boolean; // 禁用
-    size?: 'large' | 'default' | 'small'; // 输入框尺寸
-    editable?: boolean; // 文本框可输入
-    clearable?: boolean; // 是否显示清除按钮
-    placeholder?: string; // 非范围选择时的占位内容
-    startPlaceholder?: string; // 范围选择时开始日期的占位内容
-    endPlaceholder?: string; // 范围选择时结束日期的占位内容
-    type?:
-      | 'year'
-      | 'month'
-      | 'date'
-      | 'dates'
-      | 'datetime'
-      | 'week'
-      | 'datetimerange'
-      | 'daterange'
-      | 'monthrange'; // 显示类型
-    format?: string; // 显示在输入框中的格式
-    popperClass?: string; // DatePicker 下拉框的类名
-    rangeSeparator?: string; // 选择范围时的分隔符
-    defaultValue?: any; // 可选，选择器打开时默认显示的时间
-    defaultTime?: any; // 范围选择时选中日期所使用的当日内具体时刻
-    valueFormat?: string; // 可选，绑定值的格式。 不指定则绑定值为 Date 对象
-    unlinkPanels?: boolean; // 在范围选择器里取消两个日期面板之间的联动
-    prefixIcon?: any; // 自定义前缀图标
-    clearIcon?: any; // 自定义清除图标
-    validateEvent?: boolean; // 输入时是否触发表单的校验
-    disabledDate?: (date: Date, startDt: Date | null) => boolean; // 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
-    shortcuts?: any; // 设置快捷选项，需要传入数组对象
-    cellClassName?: (date: Date) => string; // 设置自定义类名
-    teleported?: boolean; // 是否将 date-picker 的下拉列表插入至 body 元素
-  }>(),
-  {
-    type: 'date',
-    placeholder: '请选择日期',
-    startPlaceholder: '请选择开始日期',
-    endPlaceholder: '请选择结束日期',
-    teleported: true,
-    clearable: true
-  }
-);
-
-const props = _props as Readonly<BaseDatePickerProps>;
-
-const emits = defineEmits<{
-  (event: 'change', activeValue: any): void;
-  (event: 'visibleChange', visibility: boolean): void;
-  (event: 'calendarChange', val: [Date, Date | null]): void;
-  (event: 'update:modelValue', activeValue: any): void;
-}>();
-
-// 越过类型不匹配导致的ts报错
-const defaultTime = computed(() => props.defaultTime) as any;
-
-const valueFormat = computed(
-  () =>
-    props.valueFormat ||
-    (props.type &&
-      (['datetime', 'datetimerange'].includes(props.type)
-        ? 'YYYY-MM-DD HH:mm:ss'
-        : 'YYYY-MM-DD'))
-);
-
-const startDt = ref<Date | null>(null);
-const dateValue = ref<any>(props.modelValue);
-// 父组件值发生改变时，同步dateValue
-watch(
-  () => props.modelValue,
-  newV => {
-    dateValue.value = newV;
-  }
-);
-
-const _disabledDate = (date: Date) => {
-  if (isFunction(props?.disabledDate)) {
-    return props?.disabledDate?.(date, startDt.value);
-  }
-};
-
-const handleChange: any = (val: typeof props.modelValue) => {
-  emits('update:modelValue', val);
-  emits('change', val);
-};
-const handleVisibleChange: any = (visibility: boolean) => {
-  emits('visibleChange', visibility);
-};
-const handleCalendarChange: any = (val: [Date, Date | null]) => {
-  startDt.value = val[0];
-  emits('calendarChange', val);
-};
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/date-picker/index.ts

@@ -1,52 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-29 19:10:13
- */
-import { Component, DefineComponent } from 'vue';
-import _BaseDatePicker from './date-picker.vue';
-
-export type BaseDatePickerProps = {
-  modelValue?: string | Date | Array<Date | string>; // 选中项绑定值
-  readonly?: boolean; // 只读
-  disabled?: boolean; // 禁用
-  size?: 'large' | 'default' | 'small'; // 输入框尺寸
-  editable?: boolean; // 文本框可输入
-  clearable?: boolean; // 是否显示清除按钮
-  placeholder?: string; // 非范围选择时的占位内容
-  startPlaceholder?: string; // 范围选择时开始日期的占位内容
-  endPlaceholder?: string; // 范围选择时结束日期的占位内容
-  type?:
-    | 'year'
-    | 'month'
-    | 'date'
-    | 'dates'
-    | 'datetime'
-    | 'week'
-    | 'datetimerange'
-    | 'daterange'
-    | 'monthrange'; // 显示类型
-  format?: string; // 显示在输入框中的格式
-  popperClass?: string; // DatePicker 下拉框的类名
-  rangeSeparator?: string; // 选择范围时的分隔符
-  defaultValue?: Date; // 可选，选择器打开时默认显示的时间
-  defaultTime?: Array<Date>; // 范围选择时选中日期所使用的当日内具体时刻
-  valueFormat?: string; // 可选，绑定值的格式。 不指定则绑定值为 Date 对象
-  unlinkPanels?: boolean; // 在范围选择器里取消两个日期面板之间的联动
-  prefixIcon?: string | Component; // 自定义前缀图标
-  clearIcon?: string | Component; // 自定义清除图标
-  validateEvent?: boolean; // 输入时是否触发表单的校验
-  disabledDate?: (date: Date, startDt: Date | null) => boolean; // 一个用来判断该日期是否被禁用的函数，接受一个 Date 对象作为参数。 应该返回一个 Boolean 值。
-  shortcuts?: Array<{
-    text: string;
-    value: Date | (() => void);
-  }>; // 设置快捷选项，需要传入数组对象
-  cellClassName?: (date: Date) => string; // 设置自定义类名
-  teleported?: boolean; // 是否将 date-picker 的下拉列表插入至 body 元素
-
-  onChange?: (activeValue: any) => void;
-  onVisibleChange?: (visibility: boolean) => void;
-  onCalendarChange?: (val: [Date, Date | null]) => void;
-};
-
-export const BaseDatePicker =
-  _BaseDatePicker as DefineComponent<BaseDatePickerProps>;