xrk-components 0.3.0 → 0.3.1

package/packages/base/input/input.vue

@@ -1,175 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:15
--->
-<template>
-  <el-input
-    class="base-input"
-    :type="type"
-    :model-value="modelValue"
-    :minlength="minlength"
-    :maxlength="maxlength"
-    :show-word-limit="showWordLimit"
-    :placeholder="placeholder"
-    :clearable="clearable"
-    :formatter="formatter"
-    :parser="parser"
-    :show-password="showPassword"
-    :disabled="disabled"
-    :size="size"
-    :prefix-icon="prefixIcon"
-    :suffix-icon="suffixIcon"
-    :rows="rows"
-    :autosize="autosize"
-    :autocomplete="autocomplete"
-    :name="name"
-    :readonly="readonly"
-    :max="max"
-    :min="min"
-    :step="step"
-    :resize="resize"
-    :autofocus="autofocus"
-    :form="form"
-    :label="label"
-    :tabindex="tabindex"
-    :validate-event="validateEvent"
-    :input-style="inputStyle"
-    ref="BaseInputRef"
-    @blur="handleBlur"
-    @focus="handleFocus"
-    @input="handleInput"
-    @change="handleChange"
-    @clear="handleClear"
-    @keyup.enter="handleKeyupEnter"
-  ></el-input>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-input'
-};
-</script>
-
-<script lang="tsx" setup>
-import { withDefaults, ref, Component, CSSProperties } from 'vue';
-import { ElInput } from 'element-plus';
-import { isFunction } from '../../../tools/check';
-import { BaseInputProps } from './index';
-
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: string | number; // 选中项绑定值
-    type?: 'text' | 'textarea' | 'password' | 'number'; // 类型
-    maxlength?: string | number; // 最大输入长度
-    minlength?: string | number; // 原生属性，最小输入长度
-    showWordLimit?: boolean; // 是否显示输入字数统计，只在 type = "text" 或 type = "textarea" 时有效
-    placeholder?: string; // 输入框占位文本
-    clearable?: boolean; // 是否可清空
-    formatter?: (value: string | number) => string; // 指定输入值的格式。(只有当 type 是"text"时才能工作)
-    parser?: (value: string) => string; // 指定从格式化器输入中提取的值。(仅当 type 是"text"时才起作用)
-    showPassword?: boolean; // 是否显示切换密码图标
-    disabled?: boolean; // 是否禁用
-    size?: 'large' | 'default' | 'small'; // 输入框尺寸，只在 type 不为 'textarea' 时有效
-    prefixIcon?: any; // 自定义前缀图标
-    suffixIcon?: any; // 自定义后缀图标
-    rows?: number; // 输入框行数，仅 type 为 'textarea' 时有效
-    autosize?: any; // textarea 高度是否自适应，仅 type 为 'textarea' 时生效。 可以接受一个对象，比如: { minRows: 2, maxRows: 6 }
-    autocomplete?: string; // 原生 autocomplete 属性
-    name?: string; // 等价于原生 input name 属性
-    readonly?: boolean; // 原生  readonly 属性，是否只读
-    max?: number; // 原生 max 属性，设置最大值
-    min?: number; // 原生属性，设置最小值
-    step?: number; // 原生属性，设置输入字段的合法数字间隔
-    resize?: 'none' | 'both' | 'horizontal' | 'vertical'; // 控制是否能被用户缩放
-    autofocus?: boolean; // 原生属性，自动获取焦点
-    form?: string; // 原生属性
-    label?: string; // 标签文本
-    tabindex?: string | number; // 输入框的 tabindex
-    validateEvent?: boolean; // 输入时是否触发表单的校验
-    inputStyle?: any; // input 元素或 textarea 元素的 style
-
-    inputRewrite?: any; // 输入时处理输入值
-    changeRewrite?: any; // 发生改变时处理输入值
-  }>(),
-  {
-    type: 'text',
-    rows: 2,
-    autocomplete: 'off',
-    placeholder: '请输入',
-    validateEvent: true
-  }
-);
-
-const props = _props as Readonly<BaseInputProps>;
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', value: string | number): void;
-  (event: 'blur', events: Event): void;
-  (event: 'focus', events: Event): void;
-  (event: 'keyup', events: KeyboardEvent): void;
-  (event: 'change', value?: string | number | KeyboardEvent): void;
-  (event: 'input', value?: string | number | KeyboardEvent): void;
-  (event: 'clear'): void;
-}>();
-
-const updateValue = (value: string | number) => {
-  emits('update:modelValue', value); // 更新父级v-model绑定变量的值;
-};
-
-const handleBlur = (event: Event) => {
-  emits('blur', event);
-};
-const handleFocus = (event: Event) => {
-  emits('focus', event);
-};
-const handleChange = async (value: string | number) => {
-  const _value = (
-    isFunction(props.changeRewrite) ? await props.changeRewrite?.(value) : value
-  ) as string | number;
-  updateValue(_value);
-  emits('change', _value);
-};
-const handleInput = async (value: string | number) => {
-  const _value = (
-    isFunction(props.inputRewrite) ? await props.inputRewrite?.(value) : value
-  ) as string | number;
-  updateValue(_value);
-  emits('input', _value);
-};
-const handleClear = () => {
-  emits('clear');
-};
-const handleKeyupEnter = (event: KeyboardEvent) => {
-  emits('keyup', event);
-};
-
-const BaseInputRef = ref<{
-  focus: Function;
-  blur: Function;
-  select: Function;
-} | null>(null);
-
-defineExpose({
-  focus: () => {
-    BaseInputRef.value?.focus?.();
-  },
-  blur: () => {
-    BaseInputRef.value?.blur?.();
-  },
-  select: () => {
-    BaseInputRef.value?.select?.();
-  }
-});
-</script>
-
-<style lang="scss" scoped>
-.base-input {
-  ::v-deep input::-webkit-outer-spin-button,
-  ::v-deep input::-webkit-inner-spin-button {
-    -webkit-appearance: none !important;
-  }
-  ::v-deep input[type='‘number’'] {
-    -moz-appearance: textfield !important;
-  }
-}
-</style>

package/packages/base/pagination/index.ts

@@ -1,30 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 11:12:14
- */
-import { DefineComponent } from 'vue';
-import _BasePagination from './pagination.vue';
-
-export type PaginationInfoType = {
-  pageSize: number;
-  currentPage: number;
-};
-
-export type BasePaginationProps = {
-  small?: boolean;
-  currentPage?: number; // 当前页数
-  pageSize?: number; // 每页显示条目个数
-  total?: number; // 总条目数
-  pagerCount?: number; // 设置最大页码按钮数。 页码按钮的数量，当总页数超过该值时会折叠
-  pageSizes?: Array<number>; // 每页显示个数选择器的选项设置
-  hideOnSinglePage?: boolean; // 只有一页时是否隐藏
-  layout?: Array<
-    'sizes' | 'prev' | 'pager' | 'next' | 'jumper' | '->' | 'total' | 'slot'
-  >; // 组件布局，子组件名
-
-  onSizeChange?: (paginationInfo: PaginationInfoType) => void;
-  onCurrentChange?: (paginationInfo: PaginationInfoType) => void;
-};
-
-export const BasePagination =
-  _BasePagination as DefineComponent<BasePaginationProps>;

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>;