xrk-components 0.3.0 → 0.3.3

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

@@ -1,182 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-28 14:58:39
--->
-<template>
-  <div class="base-tag-group">
-    <base-tag
-      class="base-tag"
-      v-for="(item, index) in modelValue"
-      :key="index"
-      :type="type"
-      :closable="item['closable']"
-      :disableTransitions="disableTransitions"
-      :hit="hit"
-      :color="color"
-      :size="size"
-      :effect="effect"
-      :round="round"
-      v-loading="closeIndex == index"
-      @close="handleTagClose(index)"
-      @click="handleTagClick(index)"
-    >
-      {{ _Reflect.get(item, labelKey) }}
-    </base-tag>
-    <template v-if="showAdd">
-      <base-input
-        v-if="inputVisible"
-        class="base-input"
-        clearable
-        :disabled="adding"
-        ref="InputRef"
-        v-model="inputValue"
-        :size="size"
-        :maxlength="maxlength"
-        v-loading="adding"
-        @keyup.enter="handleInputConfirm"
-        @blur="handleInputConfirm"
-      />
-      <base-button v-else :size="size" @click="showInput" :disabled="adding">
-        {{ addBtnText }}
-      </base-button>
-    </template>
-  </div>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-tag-group'
-};
-</script>
-<script lang="tsx" setup>
-import { BaseInput } from '../input';
-import { BaseButton } from '../button';
-import BaseTag from './tag.vue';
-import { withDefaults, ref, nextTick } from 'vue';
-import { isFunction } from '../../../tools/check';
-import { check } from 'xrk-tools';
-import { BaseTagGroupProps, TagOption } from './index';
-import { vLoading as _vLoading } from 'element-plus';
-
-const vLoading = _vLoading;
-const _Reflect = Reflect;
-
-const _props = withDefaults(
-  defineProps<{
-    modelValue?: Array<any>;
-    labelKey?: string;
-    type?: 'success' | 'info' | 'warning' | 'danger';
-    disableTransitions?: boolean;
-    hit?: boolean;
-    color?: string;
-    size?: 'large' | 'default' | 'small';
-    effect?: 'dark' | 'light' | 'plain';
-    round?: boolean;
-
-    beforeClose?: any;
-    beforeAdd?: (val: any) => any;
-    showAdd?: boolean;
-    addBtnText?: string;
-    maxlength?: number;
-  }>(),
-  { labelKey: 'label', showAdd: false, maxlength: 20, addBtnText: '新增' }
-);
-
-const props = _props as Readonly<BaseTagGroupProps>;
-
-const emits = defineEmits<{
-  (event: 'update:modelValue', tags: any): void;
-  (event: 'change', tags: any): void;
-  (event: 'click', tag: any): void;
-}>();
-
-const tagsValue = ref<any>(props.modelValue);
-const closeIndex = ref<number>(-1);
-const adding = ref<boolean>(false);
-
-const handleTagClose = async (index: number) => {
-  if (closeIndex.value > -1) return;
-  try {
-    closeIndex.value = index;
-    if (isFunction(props.beforeClose)) {
-      await props.beforeClose?.(tagsValue.value?.[index] as TagOption);
-    }
-    tagsValue.value?.splice(index, 1);
-    emits('update:modelValue', tagsValue.value);
-    emits('change', tagsValue.value);
-    closeIndex.value = -1;
-  } catch (error) {
-    console.error(error);
-    closeIndex.value = -1;
-  }
-};
-const handleTagClick = (index: number) => {
-  emits('click', tagsValue.value?.[index] as TagOption);
-};
-
-/**
- * 增加标签逻辑
- */
-const InputRef = ref<any>(null);
-const inputVisible = ref<boolean>(false);
-const inputValue = ref<string>('');
-const showInput = () => {
-  inputVisible.value = true;
-  nextTick(() => {
-    InputRef.value.focus();
-  });
-};
-const handleInputConfirm = async () => {
-  if (adding.value) {
-    return;
-  }
-  if (check.isFalseValue(inputValue.value)) {
-    inputVisible.value = false;
-    return;
-  }
-  try {
-    adding.value = true;
-    const _value = (
-      isFunction(props.beforeAdd)
-        ? await props.beforeAdd?.(inputValue.value)
-        : { label: inputValue.value, value: inputValue.value, closable: true }
-    ) as TagOption;
-    tagsValue.value?.push(_value);
-    emits('update:modelValue', tagsValue.value);
-    emits('change', tagsValue.value);
-    inputVisible.value = false;
-    adding.value = false;
-    inputValue.value = '';
-  } catch (error) {
-    adding.value = false;
-    inputVisible.value = false;
-    inputValue.value = '';
-  }
-};
-</script>
-
-<style lang="scss" scoped>
-.base-tag-group {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  .base-tag {
-    margin-right: 5px;
-    margin-bottom: 3px;
-    margin-top: 3px;
-    ::v-deep {
-      .xrk-loading-spinner .circular {
-        width: 20px;
-      }
-    }
-  }
-  .base-input {
-    width: 150px;
-    ::v-deep {
-      .xrk-loading-spinner .circular {
-        width: 20px;
-      }
-    }
-  }
-}
-</style>

package/packages/base/tag/tag.vue

@@ -1,54 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-28 14:48:20
--->
-<template>
-  <el-tag
-    :type="type"
-    :closable="closable"
-    :disableTransitions="disableTransitions"
-    :hit="hit"
-    :color="color"
-    :size="size"
-    :effect="effect"
-    :round="round"
-    @click="emits('click')"
-    @close="emits('close')"
-  >
-    <slot></slot>
-  </el-tag>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-tag'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElTag } from 'element-plus';
-import { withDefaults } from 'vue';
-
-withDefaults(
-  defineProps<{
-    type?: 'success' | 'info' | 'warning' | 'danger';
-    closable?: boolean;
-    disableTransitions?: boolean;
-    hit?: boolean;
-    color?: string;
-    size?: 'large' | 'default' | 'small';
-    effect?: 'dark' | 'light' | 'plain';
-    round?: boolean;
-  }>(),
-  {
-    size: 'large'
-  }
-);
-
-const emits = defineEmits<{
-  (event: 'click', tag?: any): void;
-  (event: 'close', tag?: any): void;
-}>();
-</script>
-
-<style lang="scss" scoped></style>

package/packages/base/tool-tip/index.ts

@@ -1,30 +0,0 @@
-import { StyleValue, DefineComponent } from 'vue';
-import _BaseToolTip from './tool-tip.vue';
-
-export type BaseToolTipProps = {
-  popperClass?: string; // 弹出框的样式名，默认base-tool-tip（限制了最大宽度400）
-  trigger?: 'hover' | 'click' | 'focus' | 'contextmenu'; // 如何触发 tooltip (来显示)
-  transition?: 'el-fade-in-linear' | 'none'; // 动画名称
-  disabled?: boolean; // Tooltip 组件是否禁用
-  enterable?: boolean; // 鼠标是否可进入到 tooltip 中
-  hideAfter?: number; // 延迟关闭，单位毫秒
-  placement?:
-    | 'top'
-    | 'top-start'
-    | 'top-end'
-    | 'bottom'
-    | 'bottom-start'
-    | 'bottom-end'
-    | 'left'
-    | 'left-start'
-    | 'left-end'
-    | 'right'
-    | 'right-start'
-    | 'right-end'; // Tooltip 组件出现的位置
-  content?: string | number; // 显示的内容，也可被 slot#content 覆盖
-
-  style?: StyleValue | undefined;
-  overShow?: boolean; // 内容超出才显示toolTip
-};
-
-export const BaseToolTip = _BaseToolTip as DefineComponent<BaseToolTipProps>;

package/packages/base/tool-tip/tool-tip.vue

@@ -1,108 +0,0 @@
-<!--
- * @Description: 
- * @Date: 2022-06-30 23:31:05
--->
-<!--
- * @Description:
- * @Date: 2022-06-28 11:06:06
--->
-<template>
-  <el-tooltip
-    :key="_overShow ? '1' : '0'"
-    :popper-class="popperClass"
-    :trigger="trigger"
-    :transition="transition"
-    :disabled="_overShow || disabled"
-    :placement="placement"
-    :hideAfter="hideAfter"
-    :enterable="enterable"
-    :content="_content"
-  >
-    <template #content>
-      <slot name="content"></slot>
-    </template>
-    <div
-      v-if="overShow"
-      style="width: 100%"
-      :style="style"
-      @mousemove="handleMouseMove"
-      ref="toolTipDefault"
-    >
-      <span ref="toolTipDefaultContent">
-        <slot></slot>
-      </span>
-    </div>
-    <slot v-else></slot>
-  </el-tooltip>
-</template>
-
-<script lang="tsx">
-export default {
-  name: 'base-tool-tip'
-};
-</script>
-
-<script lang="tsx" setup>
-import { ElTooltip } from 'element-plus';
-import { computed, ref, StyleValue, withDefaults } from 'vue';
-
-const props = withDefaults(
-  defineProps<{
-    popperClass?: string; // 弹出框的样式名，默认base-tool-tip（限制了最大宽度400）
-    trigger?: 'hover' | 'click' | 'focus' | 'contextmenu'; // 如何触发 tooltip (来显示)
-    transition?: 'el-fade-in-linear' | 'none'; // 动画名称
-    disabled?: boolean; // Tooltip 组件是否禁用
-    enterable?: boolean; // 鼠标是否可进入到 tooltip 中
-    hideAfter?: number; // 延迟关闭，单位毫秒
-    placement?:
-      | 'top'
-      | 'top-start'
-      | 'top-end'
-      | 'bottom'
-      | 'bottom-start'
-      | 'bottom-end'
-      | 'left'
-      | 'left-start'
-      | 'left-end'
-      | 'right'
-      | 'right-start'
-      | 'right-end'; // Tooltip 组件出现的位置
-    content?: string | number; // 显示的内容，也可被 slot#content 覆盖
-
-    style?: StyleValue | undefined;
-    overShow?: boolean; // 内容超出才显示toolTip
-  }>(),
-  {
-    overShow: false,
-    transition: 'el-fade-in-linear',
-    enterable: true,
-    hideAfter: 100,
-    placement: 'top',
-    popperClass: 'base-tool-tip'
-  }
-);
-
-const _overShow = ref<boolean>(props.overShow);
-const toolTipDefault = ref<HTMLElement | null>(null);
-const toolTipDefaultContent = ref<HTMLElement | null>(null);
-
-const _content = computed<string>(() => props.content as string);
-
-const handleMouseMove = () => {
-  if (toolTipDefault.value?.tagName && toolTipDefaultContent.value?.tagName) {
-    const { offsetWidth, offsetHeight } = toolTipDefault.value;
-    const { offsetWidth: childOffsetWidth, offsetHeight: childOffsetHeight } =
-      toolTipDefaultContent.value;
-
-    _overShow.value = !(
-      offsetWidth < childOffsetWidth || offsetHeight < childOffsetHeight
-    );
-  }
-};
-</script>
-
-<style lang="scss">
-.base-tool-tip {
-  max-width: 400px;
-}
-</style>

package/packages/components.ts

@@ -1,33 +0,0 @@
-/*
- * @Description: 
- * @Date: 2022-07-05 16:34:24
- */
-export { BaseButton } from './base/button';
-
-export { BaseRadio, BaseRadioGroup, BaseRadioButton } from './base/radio';
-
-export {
-  BaseCheckbox,
-  BaseCheckboxGroup,
-  BaseCheckboxButton
-} from './base/checkbox';
-
-export { BaseDatePicker } from './base/date-picker';
-
-export { BaseInput } from './base/input';
-
-export { BaseSelect } from './base/select';
-
-export { BaseSwitch } from './base/switch';
-
-export { BaseTag, BaseTagGroup } from './base/tag';
-
-export { BasePagination } from './base/pagination';
-
-export { BaseForm, BaseFormItem } from './base/form/';
-
-export { XrkSearch } from './xrk/search';
-export { BaseTable } from './base/table';
-
-export { XrkTable } from './xrk/table';
-export { BaseDialog } from './base/dialog';

package/packages/functions.ts

@@ -1,16 +0,0 @@
-/*
- * @Description: 
- * @Date: 2022-07-05 16:34:24
- */
-export { useTableColumn } from './base/table';
-export { createDialog } from './base/dialog';
-
-export {
-  useInputColumn,
-  useSearchColumns,
-  useSelectColumn,
-  useSearchBtn,
-  useResetBtn,
-  useDatePickerColumn,
-  useOtherComponents
-} from './xrk/search/hooks/use-search';

package/packages/index.ts

@@ -1,30 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-30 22:57:28
- */
-
-import { App } from 'vue';
-import ElementPlus from 'element-plus';
-import locale from 'element-plus/lib/locale/lang/zh-cn';
-import '../styles/element/index.scss';
-
-import * as AllComponents from './components';
-
-// 所有组件列表
-const components = Object.values(AllComponents).map(i => i);
-
-const install = (app: App): void => {
-  app.use(ElementPlus, { namespace: 'xrk', locale });
-  components.map(component => {
-    app.component(component.name, component);
-  });
-};
-
-export * from './components';
-export * from './functions';
-export * from './types';
-
-export default {
-  version: '0.3.0',
-  install
-};

package/packages/types.ts

@@ -1,54 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-05 14:03:15
- */
-export type { BaseButtonProps } from './base/button';
-
-export type {
-  BaseRadioButtonProps,
-  BaseRadioGroupProps,
-  BaseRadioProps
-} from './base/radio';
-
-export type {
-  BaseCheckboxProps,
-  BaseCheckboxGroupProps,
-  BaseCheckboxButtonProps
-} from './base/checkbox';
-
-export type { BaseDatePickerProps } from './base/date-picker';
-
-export type { BaseInputProps } from './base/input';
-
-export type {
-  BaseSelectProps,
-  SelectOptionType,
-  SelectValueType
-} from './base/select';
-
-export type { BaseSwitch } from './base/switch';
-
-export type { BaseTagProps, BaseTagGroupProps, TagOption } from './base/tag';
-
-export type {
-  BasePaginationProps,
-  PaginationInfoType
-} from './base/pagination';
-
-export type { BaseFormProps, BaseFormItemProps } from './base/form/';
-
-export type {
-  BaseTableProps,
-  BaseTableColumnProps
-} from './base/table/types/type';
-
-export type { BaseDialogProps, DialogBtnConfigProps } from './base/dialog';
-
-export type { XrkSearchProps } from './xrk/search';
-export type {
-  ComponentRender,
-  ResetBtnType,
-  SearchBtnType,
-  SerachColumnType
-} from './xrk/search/types/type';
-export type { XrkTableProps } from './xrk/table/types/type';

package/packages/xrk/search/hooks/use-search.ts

@@ -1,96 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-06-29 15:58:37
- */
-
-import { BaseDatePickerProps } from '../../../base/date-picker';
-import { BaseInputProps } from '../../../base/input';
-import { BaseSelectProps } from '../../../base/select';
-import {
-  SerachColumnType,
-  SearchBtnType,
-  ResetBtnType,
-  SerachColumnBaseType,
-  BaseInputListener,
-  BaseSelectListener,
-  BaseDatePickerListener,
-  ComponentRender
-} from '../types/type';
-
-export const useInputColumn = (
-  column: SerachColumnBaseType<BaseInputProps, BaseInputListener>
-): SerachColumnBaseType<BaseInputProps, BaseInputListener> => {
-  return {
-    type: 'input',
-    ...column,
-    style: {
-      width: '220px',
-      ...(column.style || {})
-    }
-  };
-};
-
-export const useSelectColumn = (
-  column: SerachColumnBaseType<BaseSelectProps, BaseSelectListener>
-): SerachColumnBaseType<BaseSelectProps, BaseSelectListener> => {
-  return {
-    type: 'select',
-    ...column,
-    style: {
-      width: '220px',
-      ...(column.style || {})
-    }
-  };
-};
-
-export const useDatePickerColumn = (
-  column: SerachColumnBaseType<BaseDatePickerProps, BaseDatePickerListener>
-): SerachColumnBaseType<BaseDatePickerProps, BaseDatePickerListener> => {
-  return {
-    type: 'datePicker',
-    ...column,
-    style: {
-      width: ['datetimerange', 'daterange', 'monthrange'].includes(
-        column.config?.type || ''
-      )
-        ? '280px'
-        : '220px',
-      ...(column.style || {})
-    }
-  };
-};
-
-export const useSearchColumns = (
-  columns: Array<SerachColumnType>
-): Array<SerachColumnType> => {
-  return columns.map(column => ({
-    ...column,
-    listener: column.listener || {},
-    config: {
-      clearable: true,
-      ...(column.config || {})
-    }
-  }));
-};
-
-export const useSearchBtn = (searchBtnConfig: SearchBtnType) => {
-  return {
-    text: '搜索',
-    show: true,
-    ...searchBtnConfig
-  };
-};
-
-export const useResetBtn = (resetBtnConfig: ResetBtnType) => {
-  return {
-    text: '重置',
-    show: true,
-    ...resetBtnConfig
-  };
-};
-
-export const useOtherComponents = (
-  otherComponents: Array<ComponentRender>
-): Array<ComponentRender> => {
-  return otherComponents;
-};

package/packages/xrk/search/index.ts

@@ -1,22 +0,0 @@
-/*
- * @Description:
- * @Date: 2022-07-05 13:42:48
- */
-import { Component, CSSProperties, DefineComponent } from 'vue';
-
-import _XrkSearch from './search.vue';
-import {
-  ComponentRender,
-  ResetBtnType,
-  SearchBtnType,
-  SerachColumnType
-} from './types/type';
-
-export type XrkSearchProps = {
-  columns: Array<SerachColumnType>;
-  searchBtn?: SearchBtnType;
-  resetBtn?: ResetBtnType;
-  otherComponents?: Array<ComponentRender>;
-};
-
-export const XrkSearch = _XrkSearch as DefineComponent<XrkSearchProps>;