xrk-components 0.3.0 → 0.3.3

package/packages/base/pagination/pagination.vue

@@ -1,160 +0,0 @@
-<!--
- * @Description: 考虑currentPage 和 pageSize 使用双向绑定，使父组件可修改页码 和 每页数量
-                 父组件如果同时修改这两个属性，会导致同时触发size-change 和 current-change（最终可能会导致父组件的回调混乱）
-                 所以不使用双向绑定，还是使用父调子的 setPageInfo 方法来设置
-                 然后父通过子的 getPageInfo 方法来获取 currentPage 和 pageSize 属性
- * @Date: 2022-06-28 17:21:55
--->
-<template>
-  <el-pagination
-    class="base-pagination"
-    :small="small"
-    :page-size="_pageSize"
-    :current-page="_currentPage"
-    :layout="_layout"
-    :total="total"
-    :pagerCount="pagerCount"
-    :pageSizes="pageSizes"
-    :hideOnSinglePage="hideOnSinglePage"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrenChange"
-  ></el-pagination>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-pagination'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElPagination } from 'element-plus';
-import { withDefaults, ref, computed } from 'vue';
-import { PaginationInfoType } from './index';
-
-const props = withDefaults(
-  defineProps<{
-    small?: boolean;
-    currentPage?: number; // 当前页数
-    pageSize?: number; // 每页显示条目个数
-    total?: number; // 总条目数
-    pagerCount?: number; // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
-    pageSizes?: Array<number>; // 每页显示个数选择器的选项设置
-    hideOnSinglePage?: boolean; // 只有一页时是否隐藏
-    layout?: Array<
-      'sizes' | 'prev' | 'pager' | 'next' | 'jumper' | '->' | 'total' | 'slot'
-    >; // 组件布局，子组件名
-  }>(),
-  {
-    small: true,
-    pageSize: 15,
-    pagerCount: 7,
-    currentPage: 1,
-    pageSizes: () => [15, 60, 100],
-    hideOnSinglePage: false,
-    layout: () => ['total', 'sizes', 'prev', 'pager', 'next', 'jumper']
-  }
-);
-
-const emits = defineEmits<{
-  (event: 'size-change', paginationInfo: PaginationInfoType): void;
-  (event: 'current-change', paginationInfo: PaginationInfoType): void;
-  // (event: 'update:currentPage', currentPage: number): void;
-  // (event: 'update:pageSize', pageSize: number): void;
-}>();
-
-const _pageSize = ref<number>(props.pageSize);
-const _currentPage = ref<number>(props.currentPage);
-const _layout = ref<string>(
-  Array.isArray(props.layout) ? props.layout.join(',') : props.layout
-);
-const maxPage = computed(() => Math.ceil((props.total || 0) / _pageSize.value));
-
-const setCurrentPage = (newCurrentPage: number) => {
-  if (!newCurrentPage || newCurrentPage == _currentPage.value) return;
-  if (newCurrentPage > maxPage.value) {
-    // 设置的页码超过最大页码
-    console.warn(`currentPage ${newCurrentPage} 大于最大页码 ${maxPage.value}`);
-  } else {
-    _currentPage.value = newCurrentPage;
-  }
-};
-
-const setPageSize = (newPageSize: number) => {
-  if (!newPageSize || newPageSize == _pageSize.value) return;
-  if (props.pageSizes.includes(newPageSize)) {
-    _pageSize.value = newPageSize;
-  } else {
-    console.warn(
-      `pageSize ${newPageSize} 不在 pageSizes ${props.pageSizes} 中`
-    );
-  }
-};
-
-// watch(
-//   () => [props.currentPage, props.pageSize],
-//   ([newCurrentPage, newPageSize]) => {
-//     if (newCurrentPage > maxPage.value) {
-//       // 设置的页码超过最大页码
-//       emits('update:currentPage', _currentPage.value);
-//       console.warn(
-//         `currentPage ${newCurrentPage} 大于最大页码 ${maxPage.value}`
-//       );
-//     } else {
-//       _currentPage.value = newCurrentPage;
-//     }
-
-//     if (props.pageSizes.includes(newPageSize)) {
-//       _pageSize.value = newPageSize;
-//     } else {
-//       emits('update:pageSize', _pageSize.value);
-//       console.warn(
-//         `pageSize ${newPageSize} 不在 pageSizes ${props.pageSizes} 中`
-//       );
-//     }
-//   }
-// );
-
-const handleSizeChange = (pageSize: number) => {
-  _pageSize.value = pageSize;
-  // emits('update:pageSize', pageSize);
-  if (maxPage.value >= _currentPage.value) {
-    // 组件不会再次触发size-change事件，没有这个判断，会导致同事触发size-change 和 size-change
-    emits('size-change', {
-      pageSize: pageSize,
-      currentPage: _currentPage.value
-    });
-  }
-};
-const handleCurrenChange = (currentPage: number) => {
-  _currentPage.value = currentPage;
-  // emits('update:currentPage', currentPage);
-  emits('current-change', {
-    pageSize: _pageSize.value,
-    currentPage: currentPage
-  });
-};
-
-defineExpose({
-  // 父组件调用，修改组件内页面显示，不会触发emits事件。
-  setPageInfo: (info: { pageSize: number; currentPage: number }) => {
-    setPageSize(info.pageSize);
-    setCurrentPage(info.currentPage);
-  },
-  getPageInfo: () => ({
-    pageSize: _pageSize.value,
-    currentPage: _currentPage.value
-  })
-});
-</script>
-
-<style lang="scss" scoped>
-.base-pagination {
-  justify-content: center;
-  ::v-deep {
-    .el-input__suffix {
-      right: 12px;
-    }
-  }
-}
-</style>

package/packages/base/radio/index.ts

@@ -1,49 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 10:29:26
- */
-import { DefineComponent } from 'vue';
-import _BaseRadioButton from './radio-button.vue';
-import _BaseRadioGroup from './radio-group.vue';
-import _BaseRadio from './radio.vue';
-
-export type BaseRadioButtonProps = {
-  modelValue?: any; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Radio 的尺寸
-  name?: string; // 生 name 属性
-  label?: string | number | boolean; // 	单选框对应的值
-  disabled?: boolean; // 是否禁用单选框
-
-  onChange?: (activeValue: any) => void;
-};
-
-export type BaseRadioGroupProps = {
-  modelValue?: any; // 绑定值
-  size?: 'large' | 'default' | 'small'; // 单选框组尺寸
-  textColor?: string; // 按钮形式的 Radio 激活时的文本颜色
-  fill?: string; // 按钮形式的 Radio 激活时的填充色和边框色
-  disabled?: boolean; // 是否禁用
-  checkBefore?: (activeValue: any, done: Function) => void;
-
-  onChange?: (activeValue: any) => void;
-};
-
-export type BaseRadioProps = {
-  modelValue?: any; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Radio 的尺寸
-  name?: string; // 生 name 属性
-  label?: string | number | boolean; // 	单选框对应的值
-  disabled?: boolean; // 是否禁用单选框
-  border?: boolean; // 是否显示边框
-  checkBefore?: (activeValue: any, done: Function) => void;
-
-  onChange?: (activeValue: any) => void;
-};
-
-export const BaseRadioButton =
-  _BaseRadioButton as DefineComponent<BaseRadioButtonProps>;
-
-export const BaseRadioGroup =
-  _BaseRadioGroup as DefineComponent<BaseRadioGroupProps>;
-
-export const BaseRadio = _BaseRadio as DefineComponent<BaseRadioProps>;

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

@@ -1,46 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:37
--->
-<template>
-  <el-radio-button
-    :model-value="modelValue"
-    :disabled="disabled"
-    :name="name"
-    :label="label"
-    :size="size"
-    @change="handleChange"
-  >
-    <slot></slot>
-  </el-radio-button>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-radio-button'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElRadioButton } from 'element-plus';
-
-defineProps<{
-  modelValue?: any; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Radio 的尺寸
-  name?: string; // 生 name 属性
-  label?: string | number | boolean; // 	单选框对应的值
-  disabled?: 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/radio/radio-group.vue

@@ -1,77 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:37
--->
-<template>
-  <el-radio-group
-    class="base-radio-group"
-    :model-value="modelValue"
-    :size="size"
-    :disabled="disabled"
-    :text-color="textColor"
-    :fill="fill"
-    @change="handleChange"
-  >
-    <div style="display: inline-block" v-loading="_loading">
-      <slot></slot>
-    </div>
-  </el-radio-group>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-radio-group'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ref } from 'vue';
-import { ElRadioGroup, vLoading as _vLoading } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-
-const vLoading = _vLoading;
-const props = defineProps<{
-  modelValue?: any; // 绑定值
-  size?: 'large' | 'default' | 'small'; // 单选框组尺寸
-  textColor?: string; // 按钮形式的 Radio 激活时的文本颜色
-  fill?: string; // 按钮形式的 Radio 激活时的填充色和边框色
-  disabled?: boolean; // 是否禁用
-  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-radio-group {
-  ::v-deep {
-    .xrk-loading-spinner .circular {
-      width: 20px;
-    }
-  }
-}
-</style>

package/packages/base/radio/radio.vue

@@ -1,74 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:37
--->
-<template>
-  <el-radio
-    class="base-radio"
-    :model-value="modelValue"
-    :size="size"
-    :name="name"
-    :label="label"
-    :disabled="disabled"
-    :border="border"
-    @change="handleChange"
-  >
-    <slot></slot>
-  </el-radio>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-radio'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ref } from 'vue';
-import { ElRadio } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-
-const props = defineProps<{
-  modelValue?: any; // 选中项绑定值
-  size?: 'large' | 'default' | 'small'; // Radio 的尺寸
-  name?: string; // 生 name 属性
-  label?: string | number | boolean; // 	单选框对应的值
-  disabled?: boolean; // 是否禁用单选框
-  border?: boolean; // 是否显示边框
-
-  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-radio {
-  ::v-deep {
-    .xrk-loading-spinner .circular {
-      width: 20px;
-    }
-  }
-}
-</style>

package/packages/base/select/index.ts

@@ -1,62 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-29 18:18:19
- */
-
-import { DefineComponent } from 'vue';
-import _BaseSelect from './select.vue';
-
-export type SelectOptionType = {
-  label: string;
-  value?: string | number;
-  disabled?: boolean;
-  options?: Array<SelectOptionType>;
-};
-export type SelectValueType =
-  | string
-  | number
-  | boolean
-  | SelectOptionType
-  | null
-  | undefined;
-
-export interface BaseSelectProps {
-  init?: boolean; // 初始化组件时 执行 remoteMethod 方法
-  filterUseRemote?: boolean; // 使用远程搜索
-  options?: Array<SelectOptionType>; // 下拉选项
-  group?: boolean; // 是否分组
-  labelKey?: string;
-  valueKey?: string;
-  optionsKey?: string;
-
-  modelValue?:
-    | SelectValueType
-    | Array<string | number | boolean | SelectOptionType | null | undefined>; // 选中项绑定值
-  multiple?: boolean; // 是否多选
-  disabled?: boolean; // 是否禁用
-  size?: 'large' | 'default' | 'small'; // 输入框尺寸
-  clearable?: boolean; // 是否可以清空选项
-  collapseTags?: boolean; // 多选时是否将选中值按文字的形式展示
-  collapseTagsTooltip?: boolean; // 当鼠标悬停于折叠标签的文本时，是否显示所有选中的标签。 要使用此属性，collapse-tags属性必须设定为 true
-  multipleLimit?: number; // multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制
-  placeholder?: string; // 占位文字
-  filterable?: boolean; // Select 组件是否可筛选
-  allowCreate?: boolean; // 是否允许用户创建新条目， 只有当 filterable 设置为 true 时才会生效。
-  fitInputWidth?: boolean; // 下拉框的宽度是否与输入框相同
-  filterMethod?: (searchVal: string) => Array<SelectValueType>; // 自定义筛选方法
-
-  remoteMethod?: Function; // 远程方法
-  loadingText?: string; // 从服务器加载内容时显示的文本
-  noMatchText?: string; // 搜索条件无匹配时显示的文字，也可以使用 empty 插槽设置
-  noDataText?: string; // 无选项时显示的文字，也可以使用 empty 插槽设置自定义内容
-
-  onChange?: (
-    value: SelectValueType,
-    SelectOption: Array<SelectOptionType>
-  ) => void;
-  onRemoveTag?: (value: SelectValueType) => void;
-  onVisibleChange?: (visibleStatus: boolean) => void;
-  onClear?: () => void;
-}
-
-export const BaseSelect = _BaseSelect as DefineComponent<BaseSelectProps>;