@phelan/design 0.0.1 → 0.0.2

package/packages/components/src/table-head-editor/src/utils.ts

@@ -1,192 +0,0 @@
-import type { TreeItem } from './table-head-editor';
-
-// Tree 组件需要的数据格式
-export interface TreeNode {
-  id: string;
-  label: string;
-  visible: boolean;
-  fixed?: boolean;
-  fixedPosition?: 'left' | 'right' | undefined;
-  editable?: boolean;
-  disabled?: boolean; // 用于 tree 组件的 disabled 属性
-  children?: TreeNode[];
-}
-
-// 重置 ID 计数器（保留函数以保持兼容性，但不再需要计数器）
-export const resetIdCounter = () => {
-  // 不再需要计数器，因为使用 key 或 label 作为 id
-};
-
-// 将 TreeItem 转换为 TreeNode，并生成唯一 ID
-export const convertToTreeNode = (item: TreeItem, parentId = ''): TreeNode => {
-  // 如果 key 为空，使用 label 作为 key；否则使用 key
-  // 为了保持唯一性，结合 parentId 和计数器
-  const baseKey = item.key || item.label;
-  const id = parentId ? `${parentId}-${baseKey}` : baseKey;
-
-  // 先转换子节点
-  let children: TreeNode[] | undefined;
-  if (item.children && item.children.length > 0) {
-    children = item.children.map((child) => convertToTreeNode(child, id));
-  }
-
-  // 检查是否是半选状态：如果 item.visible=true 但子节点不是全部选中
-  // 在组件内部，半选状态通过 visible=false + hasIndeterminateState 来表示
-  let { visible } = item;
-  if (item.visible && children && children.length > 0) {
-    // 递归检查所有子节点是否全部被选中（包括子节点的子节点）
-    // 一个节点被认为是"完全选中"，需要满足：
-    // 1. 节点本身 visible=true
-    // 2. 如果有子节点，所有子节点也必须"完全选中"
-    const isFullyChecked = (node: TreeNode): boolean => {
-      if (!node.visible) {
-        return false;
-      }
-      if (node.children && node.children.length > 0) {
-        return node.children.every((child) => isFullyChecked(child));
-      }
-      return true;
-    };
-
-    const allChildrenVisible = children.every((child) => isFullyChecked(child));
-    // 如果节点 visible=true 但子节点不是全部选中，则设置为 false（半选状态）
-    if (!allChildrenVisible) {
-      visible = false;
-    }
-  }
-
-  const node: TreeNode = {
-    id,
-    label: item.label,
-    visible,
-    fixed: item.fixed,
-    fixedPosition: item.fixedPosition,
-    editable: item.editable,
-    disabled: item.editable === false, // 如果 editable 为 false，则禁用 checkbox
-    children,
-  };
-
-  return node;
-};
-
-// 将 TreeNode 转换回 TreeItem（用于确认时输出，半选状态转换为 visible=true）
-export const convertToTreeItem = (node: TreeNode): TreeItem => {
-  // 如果 node.id 等于 node.label，说明原本的 key 是空的，转换回去时也保持 key 为空
-  // 否则使用 node.id 作为 key
-  const key = node.id === node.label ? '' : node.id;
-
-  // 先转换子节点
-  let children: TreeItem[] | undefined;
-  if (node.children && node.children.length > 0) {
-    children = node.children.map((child) => convertToTreeItem(child));
-  }
-
-  // 确定 visible 值：
-  // - 如果节点 visible=true，直接使用 true
-  // - 如果节点 visible=false 但子节点有部分被选中（半选状态），转换为 visible=true（外部不需要理解半选的含义）
-  // - 如果节点 visible=false 且子节点全部未选中，保持 false
-  let { visible } = node;
-  if (!node.visible && children && children.length > 0) {
-    // 检查是否是半选状态
-    const isIndeterminate = hasIndeterminateState(node);
-    if (isIndeterminate) {
-      // 半选状态：转换为 visible=true，因为外部不需要理解半选的含义，半选就等同于可见
-      visible = true;
-    }
-    // 如果不是半选状态，保持 node.visible 的值（false）
-  }
-
-  const item: TreeItem = {
-    key,
-    label: node.label,
-    visible,
-    fixed: node.fixed,
-    fixedPosition: node.fixedPosition,
-    editable: node.editable,
-    children,
-  };
-
-  return item;
-};
-
-// 批量转换 TreeItem[] 到 TreeNode[]
-export const convertToTreeNodes = (items: TreeItem[]): TreeNode[] => {
-  resetIdCounter();
-  return items.map((item) => convertToTreeNode(item));
-};
-
-// 批量转换 TreeNode[] 到 TreeItem[]
-export const convertToTreeItems = (nodes: TreeNode[]): TreeItem[] => {
-  return nodes.map((node) => convertToTreeItem(node));
-};
-
-// 检查节点是否有半选状态（节点本身 visible=false，但子节点中有部分被选中）
-export const hasIndeterminateState = (node: TreeNode): boolean => {
-  if (!node.children || node.children.length === 0) {
-    return false;
-  }
-  // 如果节点本身是 visible=true，不算半选
-  if (node.visible) {
-    return false;
-  }
-  // 检查子节点中是否有被选中的
-  const hasCheckedChild = node.children.some((child) => {
-    if (child.visible) {
-      return true;
-    }
-    // 递归检查子节点的子节点
-    return hasIndeterminateState(child);
-  });
-  return hasCheckedChild;
-};
-
-// 获取节点的排序优先级
-// 1. 勾选 + fixed为true + fixedPosition为left|undefined|null -> 优先级 1
-// 2. 勾选 + fixed为false|undefined -> 优先级 2
-// 3. 勾选 + fixed为true + fixedPosition为right -> 优先级 3
-// 4. 未勾选的 -> 优先级 4
-const getNodeSortPriority = (node: TreeNode): number => {
-  const isChecked = node.visible || hasIndeterminateState(node);
-
-  if (!isChecked) {
-    return 4; // 未勾选的
-  }
-
-  if (node.fixed === true) {
-    if (
-      node.fixedPosition === 'left' ||
-      node.fixedPosition === undefined ||
-      node.fixedPosition === null
-    ) {
-      return 1; // 勾选 + fixed为true + fixedPosition为left|undefined|null
-    }
-    if (node.fixedPosition === 'right') {
-      return 3; // 勾选 + fixed为true + fixedPosition为right
-    }
-  }
-
-  // 勾选 + fixed为false|undefined
-  return 2;
-};
-
-// 对同层级的节点进行排序：按照新的排序规则
-export const sortNodesByVisible = (nodes: TreeNode[]): TreeNode[] => {
-  return [...nodes]
-    .map((node) => {
-      // 递归处理子节点
-      if (node.children && node.children.length > 0) {
-        return {
-          ...node,
-          children: sortNodesByVisible(node.children),
-        };
-      }
-      return node;
-    })
-    .sort((a, b) => {
-      const priorityA = getNodeSortPriority(a);
-      const priorityB = getNodeSortPriority(b);
-
-      // 优先级小的排在前面
-      return priorityA - priorityB;
-    });
-};

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

@@ -1,7 +0,0 @@
-import Tabs from './src/tabs.vue';
-import { ElTabPane } from 'element-plus';
-
-export const MTabs = Tabs;
-export const MTabPane = ElTabPane;
-
-export * from './src/tabs';

package/packages/components/src/tabs/src/tabs.ts

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

package/packages/components/src/tabs/src/tabs.vue

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

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

@@ -1,5 +0,0 @@
-import Tag from './src/tag.vue';
-
-export const MTag = Tag;
-
-export * from './src/tag';

package/packages/components/src/tag/src/tag.ts

@@ -1,47 +0,0 @@
-export const tagProps = {
-  /**
-   * @type 类型
-   */
-  type: {
-    type: String,
-    values: ['primary', 'success', 'info', 'warning', 'danger'],
-    default: 'primary',
-  },
-  /**
-   * @closable 是否可以关闭
-   */
-  closable: Boolean,
-  /**
-   * @dot 是否有圆点
-   */
-  dot: Boolean,
-  /**
-   * @icon 是否有icon图标
-   */
-  icon: Boolean,
-  /**
-   * @bgColor 背景颜色
-   */
-  bgColor: String,
-
-  /**
-   * @dotColor 标点颜色
-   */
-  dotColor: String,
-  /**
-   * @description 主题类型
-   */
-  effect: {
-    type: String,
-    values: ['plain', 'light'],
-    default: 'light',
-  },
-};
-
-export const tagEmits = {
-  close: () => true,
-  click: () => true,
-};
-
-export type TagEmits = typeof tagEmits;
-export type TagProps = typeof tagProps;

package/packages/components/src/tag/src/tag.vue

@@ -1,60 +0,0 @@
-<template>
-    <div class="m-tag" :style="{
-        backgroundColor: effect === 'plain' ? '' : bgColor || bgTypeColor[type],
-        color: bgColor || dotTypeColor[type],
-        borderColor: effect === 'plain' ? dotTypeColor[type] : bgTypeColor[type],
-    }" @click="handleClick">
-        <span v-if="dot" class="m-tag-dot" :style="{ backgroundColor: dotColor || dotTypeColor[type] }"></span>
-        <span class="m-tag-icon" v-else-if="icon">
-            <m-icon :icon="type" :color="dotTypeColor[type]" size="12">
-                <component :is="iconConfig[type]"></component>
-            </m-icon>
-        </span>
-        <slot></slot>
-        <m-icon v-if="closable" class="m-tag-close" @click.stop="handleClose" icon="Close" />
-    </div>
-</template>
-
-<script lang="ts" setup>
-import { Info, Success, Error } from '@m-design/icons';
-import { tagProps, tagEmits } from './tag';
-const { dot, icon, type, closable, bgColor, dotColor, effect } = defineProps(tagProps);
-const emit = defineEmits(tagEmits);
-import { TypeColor, IconConfig } from '../../tag/src/types';
-
-// 背景色配置
-const bgTypeColor: TypeColor = {
-    primary: '#EAF2FE',
-    success: '#DDFCEF',
-    info: '#E7E7E7',
-    warning: '#FFF1E5',
-    error: '#FFF0ED',
-};
-
-// 点状颜色配置
-const dotTypeColor: TypeColor = {
-    primary: '#0D3A93',
-    success: '#009258',
-    info: '#7B8187',
-    warning: '#FF6200',
-    error: '#D70000',
-};
-
-const iconConfig: IconConfig = {
-    primary: Info,
-    success: Success,
-    info: Info,
-    warning: Info,
-    error: Error,
-};
-
-// 关闭
-const handleClose = () => {
-    emit('close');
-};
-
-// 点击
-const handleClick = () => {
-    emit('click');
-};
-</script>

package/packages/components/src/tag/src/types.ts

@@ -1,8 +0,0 @@
-import type { Component } from 'vue';
-export interface TypeColor {
-  [key: string]: string;
-}
-
-export interface IconConfig {
-  [key: string]: Component;
-}

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

@@ -1,5 +0,0 @@
-import Text from './src/text.vue';
-
-export const MText = Text;
-
-export * from './src/text';

package/packages/components/src/text/src/text.ts

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

package/packages/components/src/text/src/text.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 { textProps } from './text';
-
-defineProps(textProps);
-
-const count = ref(100);
-
-function increment() {
-  count.value++;
-}
-
-onMounted(() => {
-  console.log(`The initial count is ${count.value}.`);
-});
-</script>

package/packages/components/src/time-picker/index.ts

@@ -1,5 +0,0 @@
-import TimePicker from './src/time-picker.vue';
-
-export const MTimePicker = TimePicker;
-
-export * from './src/time-picker';

package/packages/components/src/time-picker/src/time-picker.ts

@@ -1,3 +0,0 @@
-import type { TimePickerDefaultProps as ElementTimePickerProps } from 'element-plus';
-
-export type TimePickerProps = ElementTimePickerProps & {};

package/packages/components/src/time-picker/src/time-picker.vue

@@ -1,14 +0,0 @@
-<template>
-  <el-time-picker
-    v-bind="{ ...props, ...$attrs }"
-    class="m-time-picker"
-    :popper-class="`m-time-picker-popper ${props.popperClass || ''}`"
-  >
-  </el-time-picker>
-</template>
-<script lang="ts" setup>
-import { ElTimePicker } from 'element-plus';
-import { TimePickerProps } from './time-picker';
-
-const props = defineProps<Partial<TimePickerProps>>();
-</script>

package/packages/components/src/time-select/index.ts

@@ -1,5 +0,0 @@
-import TimeSelect from './src/time-select.vue';
-
-export const MTimeSelect = TimeSelect;
-
-export * from './src/time-select';

package/packages/components/src/time-select/src/time-select.ts

@@ -1,5 +0,0 @@
-export const timeSelectProps = {
-  popperClass: String,
-};
-
-export type TimeSelectProps = typeof timeSelectProps;

package/packages/components/src/time-select/src/time-select.vue

@@ -1,14 +0,0 @@
-<template>
-  <el-time-select
-    v-bind="{ ...props, ...$attrs }"
-    class="m-time-select"
-    :popper-class="`m-time-select-popper ${props.popperClass || ''}`"
-  >
-  </el-time-select>
-</template>
-<script lang="ts" setup>
-import { ElTimeSelect } from 'element-plus';
-import { timeSelectProps } from './time-select';
-
-const props = defineProps(timeSelectProps);
-</script>

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

@@ -1,5 +0,0 @@
-import Tooltip from './src/tooltip.vue';
-
-export const MTooltip = Tooltip;
-
-export * from './src/tooltip';

package/packages/components/src/tooltip/src/tooltip.ts

@@ -1,6 +0,0 @@
-import type { ElTooltipProps } from 'element-plus/lib/components/tooltip';
-import { ExtractPropTypes } from 'vue';
-
-export const tooltipProps = {};
-
-export type TooltipProps = ExtractPropTypes<typeof tooltipProps> & ElTooltipProps;

package/packages/components/src/tooltip/src/tooltip.vue

@@ -1,71 +0,0 @@
-<template>
-  <el-tooltip
-    ref="elTooltipRef"
-    :class="tooltipClass"
-    :popper-class="popperClass"
-    v-bind="tooltipAttrs"
-  >
-    <template
-      v-for="(_, slot) in $slots"
-      #[slot]="scope"
-    >
-      <slot
-        :name="slot"
-        v-bind="scope"
-      />
-    </template>
-  </el-tooltip>
-</template>
-
-<script lang="ts" setup>
-import { ElTooltip } from 'element-plus';
-import { computed, useAttrs, ref } from 'vue';
-import { tooltipProps } from './tooltip';
-
-defineProps(tooltipProps);
-const attrs = useAttrs();
-const elTooltipRef = ref();
-
-// 合并内部 class 和用户传入的 class
-const tooltipClass = computed(() => {
-  const internalClass = ['m-tooltip'];
-  const userClass = attrs.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;
-});
-
-// popper-class 添加 m-tooltip-popper 如果用户传入了popper-class，则合并
-const popperClass = computed(() => {
-  const internalClass = 'm-tooltip-popper';
-  const userPopperClass = attrs.popperClass as string | undefined;
-
-  if (userPopperClass && typeof userPopperClass === 'string') {
-    return `${userPopperClass} ${internalClass}`;
-  }
-
-  return internalClass;
-});
-
-// 提取公共的 attrs（排除 class 和 popper-class，因为已经单独处理）
-const tooltipAttrs = computed(() => {
-  const { class: _, 'popper-class': __, ...rest } = attrs;
-  return rest;
-});
-
-defineExpose({
-  hide: () => elTooltipRef.value?.hide(),
-  show: () => elTooltipRef.value?.show(),
-});
-</script>

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

@@ -1,5 +0,0 @@
-import Tour from './src/tour.vue';
-
-export const MTour = Tour;
-
-export * from './src/tour';

package/packages/components/src/tour/src/tour.ts

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

package/packages/components/src/tour/src/tour.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 { tourProps } from './tour';
-
-defineProps(tourProps);
-
-const count = ref(100);
-
-function increment() {
-  count.value++;
-}
-
-onMounted(() => {
-  console.log(`The initial count is ${count.value}.`);
-});
-</script>

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

@@ -1,5 +0,0 @@
-import Tree from './src/tree.vue';
-
-export const MTree = Tree;
-
-export * from './src/tree';

package/packages/components/src/tree/src/tree.ts

@@ -1,8 +0,0 @@
-import { TreeComponentProps as ElTreeProps } from 'element-plus/es/components/tree/src/tree.type';
-import { ExtractPropTypes } from 'vue';
-
-export const treeProps = {
-  // 可以在这里添加自定义的 props，或者直接使用 Element Plus 的 props
-};
-
-export type TreeProps = ExtractPropTypes<typeof treeProps> & ElTreeProps;

package/packages/components/src/tree/src/tree.vue

@@ -1,77 +0,0 @@
-<template>
-  <el-tree
-    ref="elTreeRef"
-    class="m-tree"
-    :icon="treeIcon"
-    v-bind="filteredAttrs"
-  >
-    <template
-      v-for="(_, slot) in $slots"
-      #[slot]="scope"
-    >
-      <slot
-        :name="slot"
-        v-bind="scope"
-      />
-    </template>
-  </el-tree>
-</template>
-
-<script lang="ts" setup>
-import { ElTree } from 'element-plus';
-import { ref, computed, useAttrs, h, type Component } from 'vue';
-import { treeProps } from './tree';
-import { MIcon } from '../../icon';
-
-defineProps(treeProps);
-const attrs = useAttrs();
-const elTreeRef = ref();
-
-// 使用 m-icon 包装 TreeTriangle 作为默认图标组件
-const DefaultTreeIcon: Component = () => {
-  return h(MIcon, { icon: 'TreeTriangle', size: '10', style: { paddingLeft: '2px' } });
-};
-
-// 如果没有传入 icon，则使用默认的 TreeTriangle（通过 m-icon）
-const treeIcon = computed(() => {
-  const { icon } = attrs;
-  if (icon === null || icon === undefined) {
-    return DefaultTreeIcon;
-  }
-  return icon as string | Component;
-});
-
-// 过滤掉 icon，避免重复传递
-const filteredAttrs = computed(() => {
-  const { icon: _icon, ...rest } = attrs;
-  return rest;
-});
-
-defineExpose({
-  filter: (value: string) => elTreeRef.value?.filter(value),
-  updateKeyChildren: (key: string | number, data: any[]) =>
-    elTreeRef.value?.updateKeyChildren(key, data),
-  getCheckedNodes: (leafOnly?: boolean, includeHalfChecked?: boolean) =>
-    elTreeRef.value?.getCheckedNodes(leafOnly, includeHalfChecked),
-  setCheckedNodes: (nodes: any[], leafOnly?: boolean) =>
-    elTreeRef.value?.setCheckedNodes(nodes, leafOnly),
-  getCheckedKeys: (leafOnly?: boolean) => elTreeRef.value?.getCheckedKeys(leafOnly),
-  setCheckedKeys: (keys: (string | number)[], leafOnly?: boolean) =>
-    elTreeRef.value?.setCheckedKeys(keys, leafOnly),
-  setChecked: (key: string | number, checked: boolean, deep?: boolean) =>
-    elTreeRef.value?.setChecked(key, checked, deep),
-  getHalfCheckedNodes: () => elTreeRef.value?.getHalfCheckedNodes(),
-  getHalfCheckedKeys: () => elTreeRef.value?.getHalfCheckedKeys(),
-  getCurrentKey: () => elTreeRef.value?.getCurrentKey(),
-  getCurrentNode: () => elTreeRef.value?.getCurrentNode(),
-  setCurrentKey: (key: string | number, shouldAutoExpandParent?: boolean) =>
-    elTreeRef.value?.setCurrentKey(key, shouldAutoExpandParent),
-  setCurrentNode: (node: any, shouldAutoExpandParent?: boolean) =>
-    elTreeRef.value?.setCurrentNode(node, shouldAutoExpandParent),
-  getNode: (data: any) => elTreeRef.value?.getNode(data),
-  remove: (data: any) => elTreeRef.value?.remove(data),
-  append: (data: any, parentNode: any) => elTreeRef.value?.append(data, parentNode),
-  insertBefore: (data: any, refNode: any) => elTreeRef.value?.insertBefore(data, refNode),
-  insertAfter: (data: any, refNode: any) => elTreeRef.value?.insertAfter(data, refNode),
-});
-</script>

package/packages/components/src/tree-select/index.ts

@@ -1,3 +0,0 @@
-import TreeSelect from './src/tree-select.vue';
-
-export const MTreeSelect = TreeSelect;