@phelan/design 0.0.1 → 0.0.2

package/packages/components/src/batch-copy/src/batch-copy.vue

@@ -1,214 +0,0 @@
-<template>
-  <m-dialog
-    v-model="props.modelValue"
-    :title="props.title"
-    :width="props.width"
-    @Submit="handleConfirm"
-    @Cancel="handleCancel"
-    @close="handleCancel"
-    class="batch-copy-dialog"
-  >
-    <template #scroll>
-      <div class="m-batch-copy">
-        <div class="description">
-          {{ props.description }}
-        </div>
-        <div class="input-section">
-          <m-input
-            v-model="rawInput"
-            type="textarea"
-            :rows="2"
-            :placeholder="placeholder"
-            @focus="handleInputFocus"
-            @blur="handleInputBlur"
-            :maxlength="maxLength"
-            :show-word-limit="true"
-          />
-        </div>
-        <div class="data-section">
-          <m-table
-            :data="validDataObj"
-            stripe
-            empty-text="暂无数据"
-            max-height="450"
-          >
-            <el-table-column
-              prop="id"
-              :label="`${t('数据编码')}(${validDataObj.length})`"
-            />
-          </m-table>
-        </div>
-        <div
-          class="invalid-section"
-          v-if="invalidData.length > 0"
-        >
-          {{ `${t('识别到无效数据')}(${invalidData.length}):${invalidDataStr}` }}
-        </div>
-      </div>
-    </template>
-  </m-dialog>
-</template>
-
-<script lang="ts" setup>
-import { computed, ref } from 'vue';
-import type { BatchCopyProps, BatchCopyEmits } from './batch-copy';
-import { useLocale } from 'element-plus';
-
-const { t: oriT } = useLocale();
-const t = (key: string) => oriT(`m.batchCopy.${key}`);
-
-// Emits
-const emit = defineEmits<BatchCopyEmits>();
-
-// Props
-const props = withDefaults(defineProps<BatchCopyProps>(), {
-  modelValue: false,
-  title: '复制',
-  description: '从EXCEL复制数据后，按下Ctrl+V或点击右键粘贴。支持使用换行、空格、逗号或分号分隔',
-  separator: () => [' ', '\n', ',', ';', '，', '；'],
-  width: 568,
-});
-
-// 输入框的值
-const rawInput = ref('');
-
-// placeholder
-const placeholder = ref(t('请粘贴'));
-
-// 输入框的值缓存,获取焦点时记录,失去焦点时校验数据是否有改动,有改动则重新校验数据
-const cacheRawInput = ref('');
-
-// 合法数据
-const validData = ref<string[]>([]);
-
-// 非法数据
-const invalidData = ref<string[]>([]);
-
-const blurProcessing = ref(false);
-
-// 合法数据转为对象数组
-const validDataObj = computed(() => {
-  return validData.value.map((item) => ({ id: item }));
-});
-
-// 不合法数据转为字符串,使用'、'连接
-const invalidDataStr = computed(() => {
-  return invalidData.value.join('、');
-});
-
-// 分隔符正则表达式
-const separatorRegex = computed(() => {
-  if (!props.separator || props.separator.length === 0) {
-    return /[\n,;，； ]+/;
-  }
-
-  // 对特殊字符进行转义
-  const escapedSeparators = props.separator.map((sep) => {
-    // 处理特殊字符：\n, \t 等
-    if (sep === '\\n') return '\n';
-    if (sep === '\\t') return '\t';
-    if (sep === '\\r') return '\r';
-
-    // 转义正则特殊字符
-    return sep.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
-  });
-
-  return new RegExp(`[${escapedSeparators.join('')}]+`);
-});
-
-// 解析输入数据
-const parseInput = (input: string): string[] => {
-  if (!input.trim()) return [];
-
-  // 使用分隔符分割
-  const parts = input.split(separatorRegex.value);
-
-  // 清理数据：去除空格、空项
-  return parts.map((item) => item.trim()).filter((item) => item.length > 0);
-};
-
-// 校验数据
-const validateData = async (
-  data: string[],
-): Promise<{
-  validData: string[];
-  invalidData: string[];
-}> => {
-  if (!data || data.length === 0) {
-    return { validData: [], invalidData: [] };
-  }
-
-  if (props.validator && typeof props.validator === 'function') {
-    try {
-      const result = await props.validator(data);
-      return {
-        validData: result?.validData || [],
-        invalidData: result?.invalidData || [],
-      };
-    } catch (_error) {
-      // 校验失败时，视为所有数据都有效
-      return { validData: data, invalidData: [] };
-    }
-  } else {
-    // 没有校验函数，所有数据都视为合法
-    return { validData: data, invalidData: [] };
-  }
-};
-
-// 处理输入框获取焦点事件
-const handleInputFocus = () => {
-  cacheRawInput.value = rawInput.value;
-};
-
-// 处理输入框失去焦点事件
-const handleInputBlur = async () => {
-  if (rawInput.value === cacheRawInput.value || blurProcessing.value) return;
-  blurProcessing.value = true;
-  const parsed = parseInput(rawInput.value);
-  const result = await validateData(parsed);
-  // 复制数量限制-目前只考虑有效数据
-  if (props.copyLimit && result.validData.length > props.copyLimit) {
-    validData.value = result.validData.slice(0, props.copyLimit);
-  } else {
-    validData.value = result.validData;
-  }
-  invalidData.value = result.invalidData;
-  blurProcessing.value = false;
-};
-
-// 清空数据
-const clearData = () => {
-  rawInput.value = '';
-  cacheRawInput.value = '';
-  validData.value = [];
-  invalidData.value = [];
-};
-
-// 确认提交
-const handleConfirm = async () => {
-  // 考虑到输入后直接点击确定按钮,等待 blur 事件处理完成
-  if (blurProcessing.value) {
-    await new Promise<void>((resolve) => {
-      const checkInterval = setInterval(() => {
-        if (!blurProcessing.value) {
-          clearInterval(checkInterval);
-          resolve();
-        }
-      }, 50);
-    });
-  }
-  emit('confirm', {
-    validData: validData.value,
-    invalidData: invalidData.value,
-  });
-  emit('update:modelValue', false);
-  clearData();
-};
-
-// 取消
-const handleCancel = () => {
-  emit('cancel');
-  emit('update:modelValue', false);
-  clearData();
-};
-</script>

package/packages/components/src/batch-editor/index.ts

@@ -1,5 +0,0 @@
-import BatchEditor from './src/batch-editor.vue';
-
-export const MBatchEditor = BatchEditor;
-
-export * from './src/batch-editor';

package/packages/components/src/batch-editor/src/batch-editor.ts

@@ -1,21 +0,0 @@
-export interface TableColumnItem {
-  label?: string;
-  prop?: string;
-  width?: string | number;
-  minWidth?: string | number;
-  showOverflowTooltip?: boolean;
-}
-
-export interface TableDataItem {
-  [key: string]: string | number;
-}
-
-export interface BatchEditorProps {
-  modelValue?: boolean;
-  title?: string;
-  width?: string | number;
-  tableColumn?: TableColumnItem[];
-  tableData?: TableDataItem[];
-  desc?: string;
-  confirmButtonText?: string;
-}

package/packages/components/src/batch-editor/src/batch-editor.vue

@@ -1,73 +0,0 @@
-<template>
-  <m-drawer
-    v-model="visible"
-    class="m-batch-editor"
-    :title="title || t('批量编辑')"
-    :size="width"
-    @close="handleCancel"
-  >
-    <div
-      v-if="desc"
-      class="desc"
-      >{{ desc }}</div
-    >
-    <slot name="form"></slot>
-    <slot name="table">
-      <m-table :data="tableData">
-        <m-table-column
-          v-for="item in tableColumn"
-          :key="item.prop"
-          :property="item.prop"
-          :label="item.label"
-          :min-width="item.minWidth"
-          :width="item.width"
-          :show-overflow-tooltip="item.showOverflowTooltip"
-        />
-      </m-table>
-    </slot>
-    <div class="footer">
-      <slot name="footer">
-        <m-button
-          type="primary"
-          @click="handleSubmit"
-          >{{ t('保存') || confirmButtonText }}</m-button
-        >
-      </slot>
-    </div>
-  </m-drawer>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { BatchEditorProps } from './batch-editor';
-import { useLocale } from 'element-plus';
-const { t: oriT } = useLocale();
-const t = (key: string) => oriT(`m.batchEditor.${key}`);
-const props = withDefaults(defineProps<BatchEditorProps>(), {
-  modelValue: false,
-  width: '50%',
-  tableColumn: () => [],
-  tableData: () => [],
-});
-const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);
-// 控制对话框显示隐藏
-const visible = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', value);
-  },
-});
-
-// 确定事件
-const handleSubmit = () => {
-  emit('confirm');
-};
-
-// 关闭事件
-
-const handleCancel = () => {
-  emit('cancel');
-};
-</script>

package/packages/components/src/border/index.ts

@@ -1,5 +0,0 @@
-import Border from './src/border.vue';
-
-export const MBorder = Border;
-
-export * from './src/border';

package/packages/components/src/border/src/border.ts

@@ -1,8 +0,0 @@
-export const borderProps = {
-  /**
-   * @description 名字
-   */
-  name: String,
-};
-
-export type BorderProps = typeof borderProps;

package/packages/components/src/border/src/border.vue

@@ -1,20 +0,0 @@
-<template>
-  <button @click="increment">{{ name }}'s happiness index is {{ count }}</button>
-</template>
-
-<script lang="ts" setup>
-import { onMounted, ref } from 'vue';
-import { borderProps } from './border';
-
-defineProps(borderProps);
-
-const count = ref(100);
-
-function increment() {
-  count.value++;
-}
-
-onMounted(() => {
-  console.log(`The initial count is ${count.value}.`);
-});
-</script>

package/packages/components/src/breadcrumb/index.ts

@@ -1,8 +0,0 @@
-import Breadcrumb from './src/breadcrumb.vue';
-import BreadcrumbItem from './src/breadcrumb-item.vue';
-
-export const MBreadcrumb = Breadcrumb;
-export const MBreadcrumbItem = BreadcrumbItem;
-
-export * from './src/breadcrumb';
-export * from './src/breadcrumb-item';

package/packages/components/src/breadcrumb/src/breadcrumb-item.ts

@@ -1,8 +0,0 @@
-export const breadcrumbItemProps = {
-  /**
-   * @description 名字
-   */
-  name: String,
-};
-
-export type BreadcrumbItemProps = typeof breadcrumbItemProps;

package/packages/components/src/breadcrumb/src/breadcrumb-item.vue

@@ -1,20 +0,0 @@
-<template>
-  <el-breadcrumb-item class="m-breadcrumb-item" v-bind="filteredAttrs">
-    <slot></slot>
-  </el-breadcrumb-item>
-</template>
-
-<script lang="ts" setup>
-import { computed, useAttrs } from 'vue';
-import { ElBreadcrumbItem } from 'element-plus';
-import { breadcrumbItemProps } from './breadcrumb-item';
-
-defineProps(breadcrumbItemProps);
-
-const attrs = useAttrs();
-
-const filteredAttrs = computed(() => {
-  const { ...rest } = attrs;
-  return rest;
-});
-</script>

package/packages/components/src/breadcrumb/src/breadcrumb.ts

@@ -1,8 +0,0 @@
-export const breadcrumbProps = {
-  /**
-   * @description 名字
-   */
-  name: String,
-};
-
-export type BreadcrumbProps = typeof breadcrumbProps;

package/packages/components/src/breadcrumb/src/breadcrumb.vue

@@ -1,20 +0,0 @@
-<template>
-  <el-breadcrumb class="m-breadcrumb" v-bind="filteredAttrs">
-    <slot></slot>
-  </el-breadcrumb>
-</template>
-
-<script lang="ts" setup>
-import { computed, useAttrs } from 'vue';
-import { ElBreadcrumb } from 'element-plus';
-import { breadcrumbProps } from './breadcrumb';
-
-defineProps(breadcrumbProps);
-
-const attrs = useAttrs();
-
-const filteredAttrs = computed(() => {
-  const { ...rest } = attrs;
-  return rest;
-});
-</script>

package/packages/components/src/button/index.ts

@@ -1,5 +0,0 @@
-import Button from './src/button.vue';
-
-export const MButton = Button;
-
-export * from './src/button';

package/packages/components/src/button/src/button.ts

@@ -1,12 +0,0 @@
-import { ButtonProps as ElButtonProps } from 'element-plus';
-import { iconPropType } from 'element-plus/es/utils/vue/icon';
-import { ExtractPropTypes } from 'vue';
-
-export const buttonProps = {
-  /**
-   * @description 默认图标组件
-   */
-  icon: iconPropType,
-} as const;
-
-export type ButtonProps = ExtractPropTypes<typeof buttonProps> & ElButtonProps;

package/packages/components/src/button/src/button.vue

@@ -1,132 +0,0 @@
-<template>
-  <!-- 有文本内容的按钮 -->
-  <el-button
-    v-if="$slots.default"
-    :class="buttonClass"
-    v-bind="buttonAttrs"
-  >
-    <slot></slot>
-    <template
-      v-if="hasIconSlot"
-      #icon
-    >
-      <slot
-        v-if="$slots.icon"
-        name="icon"
-      />
-      <component
-        v-else-if="iconComponent"
-        :is="iconComponent"
-      />
-      <m-icon
-        v-else-if="iconName"
-        :icon="iconName"
-      />
-    </template>
-  </el-button>
-
-  <!-- 纯图标按钮 -->
-  <el-button
-    v-else
-    :class="buttonClass"
-    v-bind="buttonAttrs"
-  >
-    <template
-      v-if="hasIconSlot"
-      #icon
-    >
-      <slot
-        v-if="$slots.icon"
-        name="icon"
-      />
-      <component
-        v-else-if="iconComponent"
-        :is="iconComponent"
-      />
-      <m-icon
-        v-else-if="iconName"
-        :icon="iconName"
-      />
-    </template>
-  </el-button>
-</template>
-
-<script lang="ts" setup>
-import { computed, useAttrs, useSlots } from 'vue';
-import { ElButton } from 'element-plus';
-import { buttonProps } from './button';
-import { MIcon } from '../../icon';
-
-const props = defineProps(buttonProps);
-const attrs = useAttrs();
-const slots = useSlots();
-
-// 提取公共的 class 逻辑（合并内部 class 和用户传入的 class）
-const buttonClass = computed(() => {
-  const internalClass = ['m-button', slots.default && 'm-button-min-width'].filter(Boolean);
-  const userClass = attrs.class;
-
-  // 合并内部 class 和用户传入的 class
-  if (userClass) {
-    if (typeof userClass === 'string') {
-      return [...internalClass, userClass];
-    }
-    if (Array.isArray(userClass)) {
-      return [...internalClass, ...userClass];
-    }
-    if (typeof userClass === 'object') {
-      return [...internalClass, userClass];
-    }
-  }
-
-  return internalClass;
-});
-
-// 提取公共的 attrs
-const buttonAttrs = computed(() => {
-  const { class: _, ...rest } = attrs;
-  return rest;
-});
-
-// 判断是否是组件（Vue 组件可以是函数或对象）
-const isComponent = (val: any): boolean => {
-  if (!val) return false;
-  // 函数通常是组件
-  if (typeof val === 'function') return true;
-  // 字符串是图标名称，不是组件
-  if (typeof val === 'string') return false;
-  // 对象：检查是否是组件还是图标名称对象
-  if (typeof val === 'object' && val !== null) {
-    // 如果有 render、setup 或 __name，明确是组件
-    if ('render' in val || 'setup' in val || '__name' in val) return true;
-    // 如果对象只有 name 属性且 name 是字符串，是图标名称对象
-    const keys = Object.keys(val);
-    if (keys.length === 1 && keys[0] === 'name' && typeof val.name === 'string') {
-      return false;
-    }
-    // 其他对象可能是组件（让 Vue 的 component :is 自己判断）
-    return true;
-  }
-  return false;
-};
-
-// 提取图标名称计算逻辑（仅当 icon 是字符串或对象时使用）
-const iconName = computed(() => {
-  if (!props.icon) return '';
-  if (isComponent(props.icon)) return '';
-  return typeof props.icon === 'object' ? props.icon.name : (props.icon as string);
-});
-
-// 提取 icon 组件（仅当 icon 是组件时使用）
-const iconComponent = computed(() => {
-  if (props.icon && isComponent(props.icon)) {
-    return props.icon;
-  }
-  return null;
-});
-
-// 判断是否有图标需要渲染
-const hasIconSlot = computed(() => {
-  return !!(slots.icon || iconComponent.value || iconName.value);
-});
-</script>

package/packages/components/src/calendar/index.ts

@@ -1,5 +0,0 @@
-import Calendar from './src/calendar.vue';
-
-export const MCalendar = Calendar;
-
-export * from './src/calendar';

package/packages/components/src/calendar/src/calendar.ts

@@ -1,36 +0,0 @@
-export type MaybeDate = Date | string | number;
-
-export type TaskNodeFlag = 'head' | 'middle' | 'end' | 'single' | null;
-
-export interface Task {
-  id: string | number;
-  name: string;
-  startTime: string;
-  endTime: string;
-  bgColor?: string;
-  brandColor?: string;
-}
-
-export interface GanttTask extends Task {
-  taskNodeFlag?: TaskNodeFlag;
-  laneIndex?: number;
-  type?: string;
-  weekDuration?: number;
-  weekStart?: string;
-  weekEnd?: string;
-  weekDailyDates?: string[];
-  isExtra?: boolean;
-  extraCount?: number;
-  isEnded?: boolean;
-  isClicked?: boolean;
-  weekSegmentIndex?: number;
-}
-
-export interface CalendarProps {
-  modelValue?: MaybeDate;
-  range?: [Date, Date];
-  firstDayOfWeek?: 0 | 1 | 2 | 3 | 4 | 5 | 6;
-  tasks?: Task[];
-  // 允许透传 Element Plus Calendar 的所有其他属性
-  [key: string]: any;
-}