xrk-components 0.3.0 → 0.3.3

package/packages/base/select/select.vue

@@ -1,258 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-21 11:16:27
--->
-<template>
-  <el-select
-    v-model="selectValue"
-    :placeholder="placeholder"
-    :multiple="multiple"
-    :disabled="disabled"
-    :size="size"
-    :clearable="clearable"
-    :collapseTags="collapseTags"
-    :collapseTagsTooltip="collapseTagsTooltip"
-    :multipleLimit="multipleLimit"
-    :filterable="_filterable"
-    :allowCreate="allowCreate"
-    :filterMethod="_filterMethod"
-    :loading="loading"
-    :remoteMethod="remoteMethod"
-    :loadingText="loadingText"
-    :noMatchText="noMatchText"
-    :noDataText="noDataText"
-    :fitInputWidth="fitInputWidth"
-    @change="handleChange"
-    @visible-change="handleVisibleChange"
-    @remove-tag="handleRemoveTag"
-    @clear="handleClear"
-  >
-    <template v-if="group">
-      <el-option-group
-        v-for="group in _options"
-        :key="_Reflect.get(group, labelKey)"
-        :label="_Reflect.get(group, labelKey)"
-      >
-        <el-option
-          class="option"
-          v-for="item in _Reflect.get(group, optionsKey) || []"
-          :key="item[valueKey]"
-          :label="item[labelKey]"
-          :value="item[valueKey]"
-        >
-          <base-tool-tip
-            :content="item[labelKey]"
-            :hideAfter="0"
-            :enterable="false"
-            transition="none"
-            :disabled="toolTipDisabled"
-            :overShow="true"
-          >
-            <span>{{ item[labelKey] }}</span>
-          </base-tool-tip>
-        </el-option>
-      </el-option-group>
-    </template>
-    <template v-else>
-      <el-option
-        class="option"
-        v-for="item in _options"
-        :key="_Reflect.get(item, labelKey)"
-        :label="_Reflect.get(item, labelKey)"
-        :value="_Reflect.get(item, valueKey)"
-      >
-        <base-tool-tip
-          :content="_Reflect.get(item, labelKey)"
-          :hideAfter="0"
-          :enterable="false"
-          transition="none"
-          :disabled="toolTipDisabled"
-          :overShow="true"
-        >
-          {{ _Reflect.get(item, labelKey) }}
-        </base-tool-tip>
-      </el-option>
-    </template>
-  </el-select>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-select'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElSelect, ElOption, ElOptionGroup } from 'element-plus';
-import { BaseToolTip } from '../tool-tip';
-import { ref, watch, computed, withDefaults, Ref } from 'vue';
-import { base } from 'xrk-tools';
-import { isFunction } from '../../../tools/check';
-import { SelectOptionType, SelectValueType, BaseSelectProps } from '.';
-
-const _Reflect = Reflect;
-
-const _props = withDefaults(
-  defineProps<{
-    init?: boolean; // 初始化组件时 执行 remoteMethod 方法
-    filterUseRemote?: boolean; // 使用远程搜索
-    options?: any; // 下拉选项
-    group?: boolean; // 是否分组
-    labelKey?: string;
-    valueKey?: string;
-    optionsKey?: string;
-
-    modelValue?: any; // 选中项绑定值
-    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 插槽设置自定义内容
-  }>(),
-  {
-    init: false,
-    filterUseRemote: false,
-    fitInputWidth: true,
-    labelKey: 'label',
-    valueKey: 'value',
-    optionsKey: 'options',
-    loadingText: '加载中',
-    noMatchText: '暂无数据',
-    noDataText: '暂无数据'
-  }
-);
-
-interface _BaseSelectProps extends BaseSelectProps {
-  valueKey: string;
-}
-
-const props = _props as Readonly<_BaseSelectProps>;
-
-const setOptionsData = async (val?: string) => {
-  if (isFunction(props.remoteMethod)) {
-    try {
-      loading.value = true;
-      const data = await props.remoteMethod?.(val);
-      loading.value = false;
-      // 避免多次请求接口 接口响应先后顺序不一致导致数据错乱
-      _options.value = Array.isArray(data)
-        ? data.filter(i => !val || `${i[props.valueKey]}`.indexOf(val) > -1)
-        : [];
-    } catch (error) {
-      loading.value = false;
-      console.error(error);
-    }
-  }
-};
-
-const _filterable = computed(
-  () => props.filterable || isFunction(props.remoteMethod)
-);
-const debounceSetOptionsData = base.debounce(setOptionsData, 600);
-const _filterMethod = (
-  props.filterUseRemote
-    ? (val: string) => {
-        loading.value = true;
-        debounceSetOptionsData(val);
-      }
-    : undefined
-) as Function | undefined;
-
-const toolTipDisabled = ref<boolean>(true);
-const loading = ref<boolean>(false);
-const _options = ref<typeof props.options>(props.options);
-const selectValue = ref<typeof props.modelValue>(
-  props.multiple && props.modelValue && !Array.isArray(props.modelValue)
-    ? [props.modelValue]
-    : props.modelValue
-) as Ref<any>;
-// 父组件值发生改变时，同步selectValue
-watch(
-  () => props.modelValue,
-  newV => {
-    selectValue.value = newV as SelectValueType;
-  }
-);
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', value: SelectValueType): void;
-  (
-    event: 'change',
-    value: SelectValueType,
-    SelectOption: Array<SelectOptionType>
-  ): void;
-  (event: 'remove-tag', value: SelectValueType): void;
-  (event: 'visible-change', visibleStatus: boolean): void;
-  (event: 'clear'): void;
-}>();
-
-const getSelectOptions = (
-  options: Array<SelectOptionType>,
-  selectValue: SelectValueType | Array<SelectValueType>
-) => {
-  return options.reduce((pre: typeof options, option: SelectOptionType) => {
-    if (
-      Array.isArray(selectValue)
-        ? selectValue.includes(Reflect.get(option, props.valueKey))
-        : Reflect.get(option, props.valueKey) == selectValue
-    ) {
-      pre.push(option);
-    }
-    if (Array.isArray(option.options)) {
-      pre.push(...getSelectOptions(option.options, selectValue));
-    }
-    return pre;
-  }, []);
-};
-
-const handleChange = (value: SelectValueType) => {
-  emits('update:modelValue', value);
-  emits(
-    'change',
-    value,
-    Array.isArray(_options.value) ? getSelectOptions(_options.value, value) : []
-  );
-};
-const handleVisibleChange = (visibleStatus: boolean) => {
-  toolTipDisabled.value = !visibleStatus;
-  if (visibleStatus) {
-    setOptionsData();
-  }
-  emits('visible-change', visibleStatus);
-};
-const handleClear = () => {
-  emits('clear');
-};
-const handleRemoveTag = (value: SelectValueType) => {
-  emits('remove-tag', value);
-};
-
-if (props.init) {
-  setOptionsData();
-}
-</script>
-
-<style lang="scss" scoped>
-@import '../../../styles/element/mixin.scss';
-.option {
-  padding-right: 18px;
-  ::v-deep {
-    .xrk-tooltip__trigger {
-      @include line_clamp(1);
-      word-break: break-all;
-    }
-  }
-}
-</style>

package/packages/base/switch/index.ts

@@ -1,26 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 11:19:18
- */
-import { Component, DefineComponent } from 'vue';
-
-import _BaseSwitch from './switch.vue';
-
-export type BaseSwitchProps = {
-  modelValue?: boolean | string | number;
-  disabled?: boolean;
-  loading?: boolean;
-  size?: 'large' | 'default' | 'small';
-  width?: number;
-  activeIcon?: string | Component;
-  activeText?: string;
-  activeValue?: boolean | string | number;
-  inactiveIcon?: string | Component;
-  inactiveText?: string;
-  inactiveValue?: boolean | string | number;
-  beforeChange?: () => Promise<any> | boolean;
-
-  onChange?: (value: boolean | string | number) => void;
-};
-
-export const BaseSwitch = _BaseSwitch as DefineComponent<BaseSwitchProps>;

package/packages/base/switch/switch.vue

@@ -1,103 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-28 13:56:17
--->
-<template>
-  <el-switch
-    class="base-switch"
-    v-model="_switchValue"
-    :disabled="disabled"
-    :loading="_loading"
-    :size="size"
-    :width="width"
-    :activeIcon="activeIcon"
-    :activeText="activeText"
-    :activeValue="activeValue"
-    :inactiveIcon="inactiveIcon"
-    :inactiveText="inactiveText"
-    :inactiveValue="inactiveValue"
-    :beforeChange="_beforeChange"
-    @change="handleChange"
-  ></el-switch>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-switch'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElSwitch } from 'element-plus';
-import { withDefaults, Component, ref, watch } from 'vue';
-import { isFunction } from '../../../tools/check';
-import { BaseSwitchProps } from '.';
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: boolean | string | number;
-    disabled?: boolean;
-    loading?: boolean;
-    size?: 'large' | 'default' | 'small';
-    width?: number;
-    activeIcon?: any;
-    activeText?: string;
-    activeValue?: boolean | string | number;
-    inactiveIcon?: any;
-    inactiveText?: string;
-    inactiveValue?: boolean | string | number;
-    beforeChange?: () => Promise<any> | boolean;
-  }>(),
-  {
-    activeValue: true,
-    inactiveValue: false
-  }
-);
-
-const props = _props as Readonly<BaseSwitchProps>;
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', value: typeof props.modelValue): void;
-  (event: 'change', value: typeof props.modelValue): void;
-}>();
-
-const _loading = ref<boolean | undefined>(props.loading);
-
-const _switchValue = ref<typeof props.modelValue>(props.modelValue);
-// 父组件值发生改变时，同步_switchValue
-watch(
-  () => props.modelValue,
-  newV => {
-    _switchValue.value = newV;
-  }
-);
-const _beforeChange = (async () => {
-  try {
-    _loading.value = true;
-    if (isFunction(props.beforeChange)) {
-      await props.beforeChange?.();
-    }
-    _loading.value = false;
-    return true;
-  } catch (error) {
-    console.error('switch change fail', error);
-    _loading.value = false;
-    return false;
-  }
-}) as typeof props.beforeChange;
-
-const handleChange = (val: typeof props.modelValue) => {
-  _switchValue.value = val;
-  emits('update:modelValue', val);
-  emits('change', val);
-};
-</script>
-
-<style lang="scss" scoped>
-.base-switch {
-  ::v-deep {
-    .el-icon {
-      z-index: 1;
-    }
-  }
-}
-</style>

package/packages/base/table/hooks/use-table.ts

@@ -1,15 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 15:57:35
- */
-import { BaseTableColumnProps } from '../types/type';
-
-export const useTableColumn = (
-  props: BaseTableColumnProps
-): BaseTableColumnProps => {
-  return {
-    minWidth: '120px',
-    width: props.type === 'index' ? '90px' : '',
-    ...props
-  };
-};

package/packages/base/table/index.ts

@@ -1,16 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-01 14:34:57
- */
-import { Component, CSSProperties, DefineComponent } from 'vue';
-
-import _BaseTable from './table.vue';
-import _BaseTableColumn from './table-column.vue';
-import { BaseTableColumnProps, BaseTableProps } from './types/type';
-import { useTableColumn as _useTableColumn } from './hooks/use-table';
-
-export const BaseTable = _BaseTable as DefineComponent<BaseTableProps>;
-export const BaseTableColumn =
-  _BaseTableColumn as DefineComponent<BaseTableColumnProps>;
-
-export const useTableColumn = _useTableColumn;

package/packages/base/table/store/index.ts

@@ -1,35 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-03-14 19:18:12
- */
-
-import { reactive } from 'vue';
-
-export const useTableSetup = () => {
-  const info = reactive<{ selectionRows: Map<number | string, any> }>({
-    selectionRows: new Map()
-  });
-
-  return {
-    selectionRows: info.selectionRows,
-    hasSelectionRow: (rowId: number | string) => {
-      return info.selectionRows.has(rowId);
-    },
-    addSelectionRow: (rowId: number | string, row: any) => {
-      info.selectionRows.set(rowId, row);
-    },
-    removeSelectionRow: (rowId: number | string) => {
-      info.selectionRows.delete(rowId);
-    },
-    getSelectionRows: () => {
-      const arr: Array<any> = [];
-      info.selectionRows.forEach(value => {
-        arr.push(value);
-      });
-      return arr;
-    },
-    clearSelectionRows: () => {
-      info.selectionRows.clear();
-    }
-  };
-};