@phelan/design 0.0.1

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

@@ -0,0 +1,8 @@
+import Card from './src/card.vue';
+import Title from './src/title.vue';
+
+export const MCard = Card;
+export const MTitle = Title;
+
+export * from './src/card';
+export * from './src/title';

package/packages/components/src/card/src/card.ts

@@ -0,0 +1,29 @@
+export const cardProps = {
+  // 大小
+  size: {
+    type: String,
+    default: 'default', // small(padding：20px 24px)和default(padding：24px),默认default
+  },
+  // 副标题样式
+  sub: {
+    type: Boolean,
+    default: false,
+  },
+  // 面板标题
+  title: {
+    type: String,
+    default: '',
+  },
+  // 是否可折叠
+  collapsible: {
+    type: Boolean,
+    default: false,
+  },
+  // 默认是否展开
+  defaultExpanded: {
+    type: Boolean,
+    default: true,
+  },
+};
+
+export type CardProps = typeof cardProps;

package/packages/components/src/card/src/card.vue

@@ -0,0 +1,106 @@
+<template>
+  <div :class="`m-card-panel m-card-panel-${size}`">
+    <div
+      class="m-panel-header flex justify-between"
+      @click="handleHeaderClick"
+    >
+      <div>
+        <slot name="title">
+          <div class="m-panel-title flex">
+            <div
+              v-if="sub"
+              class="m-panel-prologue"
+            ></div>
+            {{ title }}
+          </div>
+        </slot>
+      </div>
+
+      <div>
+        <slot name="extra">
+          <div
+            v-if="collapsible"
+            class="m-panel-extra flex"
+            @click.stop="toggleExpand"
+          >
+            {{ expanded ? t('收起') : t('展开') }}
+            <m-icon
+              class="m-panel-extra-icon"
+              :icon="expanded ? 'ArrowUp' : 'ArrowDown'"
+              size="14"
+              color="#71777E"
+            />
+          </div>
+        </slot>
+      </div>
+    </div>
+    <div
+      :class="`${collapsible ? 'm-panel-content ' : ''} overflow-hidden`"
+      :style="{ maxHeight: expanded ? contentHeight : '0px' }"
+    >
+      <div
+        ref="contentRef"
+        class="overflow-hidden"
+      >
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, onMounted, nextTick, onUnmounted } from 'vue';
+import { cardProps } from './card';
+import { useLocale } from 'element-plus';
+const { t: oriT } = useLocale();
+const t = (key: string) => oriT(`m.searchPanel.${key}`);
+
+const props = defineProps(cardProps);
+
+const expanded = ref(props.defaultExpanded);
+const contentRef = ref();
+const contentHeight = ref('1000px'); // 设置默认最高高度,省略初始动画
+
+const resizeObserver = ref<ResizeObserver | null>(null);
+
+const toggleExpand = () => {
+  expanded.value = !expanded.value;
+};
+
+const handleResize = () => {
+  if (expanded.value) contentHeight.value = `${contentRef.value?.scrollHeight}px`;
+};
+
+const handleHeaderClick = () => {
+  if (props.collapsible) {
+    toggleExpand();
+  }
+};
+
+watch(expanded, (newVal) => {
+  if (newVal) {
+    nextTick(() => {
+      contentHeight.value = `${contentRef.value?.scrollHeight}px`;
+    });
+  } else {
+    contentHeight.value = `${contentRef.value?.scrollHeight}px`;
+    nextTick(() => {
+      contentHeight.value = '0px';
+    });
+  }
+});
+
+onMounted(() => {
+  nextTick(() => {
+    if (expanded.value) contentHeight.value = `${contentRef.value?.scrollHeight}px`;
+    resizeObserver.value = new ResizeObserver(handleResize);
+    resizeObserver.value.observe(contentRef.value);
+  });
+});
+
+onUnmounted(() => {
+  if (resizeObserver.value && contentRef.value) {
+    resizeObserver.value.unobserve(contentRef.value);
+  }
+});
+</script>

package/packages/components/src/card/src/title.ts

@@ -0,0 +1,8 @@
+export const titleProps = {
+  sub: {
+    type: Boolean,
+    default: false,
+  },
+};
+
+export type titleProps = typeof titleProps;

package/packages/components/src/card/src/title.vue

@@ -0,0 +1,14 @@
+<template>
+  <div class="m-title-module">
+    <div
+      v-if="props.sub"
+      class="m-title-module-block"
+    ></div>
+    <div class="m-title-module-content"><slot></slot></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { titleProps } from './title';
+const props = defineProps(titleProps);
+</script>

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

@@ -0,0 +1,5 @@
+import Carousel from './src/carousel.vue';
+
+export const MCarousel = Carousel;
+
+export * from './src/carousel';

package/packages/components/src/carousel/src/carousel.ts

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

package/packages/components/src/carousel/src/carousel.vue

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

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

@@ -0,0 +1,5 @@
+import Cascader from './src/cascader.vue';
+
+export const MCascader = Cascader;
+
+export * from './src/cascader';

package/packages/components/src/cascader/src/cascader.ts

@@ -0,0 +1,3 @@
+import type { CascaderProps as ElCascaderProps } from 'element-plus';
+
+export type CascaderProps = ElCascaderProps;

package/packages/components/src/cascader/src/cascader.vue

@@ -0,0 +1,62 @@
+<template>
+  <el-cascader
+    v-bind="{
+      ...props,
+      ...attrs,
+      disabled: typeof attrs.disabled === 'boolean' ? attrs.disabled : undefined,
+    }"
+    :class="cascaderClass"
+    :popper-class="popperClass"
+  >
+    <template
+      v-for="(_, slotName) in $slots"
+      #[slotName]="slotProps"
+    >
+      <slot
+        :name="slotName"
+        v-bind="slotProps"
+      />
+    </template>
+  </el-cascader>
+</template>
+
+<script lang="ts" setup>
+import { computed, useAttrs } from 'vue';
+import { ElCascader } from 'element-plus';
+import type { CascaderProps } from './cascader';
+
+const props = defineProps<Partial<CascaderProps>>();
+const attrs = useAttrs();
+
+// 合并内部 class 和用户传入的 class
+const cascaderClass = computed(() => {
+  const internalClass = 'm-cascader';
+  const userClass = (props as any).class || 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-cascader-dropdown 如果用户传入了popper-class，则合并
+const popperClass = computed(() => {
+  const internalClass = 'm-cascader-dropdown';
+  const userPopperClass = attrs.popperClass as string | undefined;
+
+  if (userPopperClass && typeof userPopperClass === 'string') {
+    return `${userPopperClass} ${internalClass}`;
+  }
+
+  return internalClass;
+});
+</script>

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

@@ -0,0 +1,11 @@
+import {
+  //   ElCheckbox as Checkbox,
+  ElCheckboxGroup as CheckboxGroup,
+  ElCheckboxButton as CheckboxButton,
+} from 'element-plus';
+
+import Checkbox from './src/checkbox.vue';
+
+export const MCheckbox = Checkbox;
+export const MCheckboxGroup = CheckboxGroup;
+export const MCheckboxButton = CheckboxButton;

package/packages/components/src/checkbox/src/checkbox.vue

@@ -0,0 +1,19 @@
+<template>
+  <el-checkbox
+    v-if="$slots.default"
+    class="m-checkbox"
+    v-bind="{ ...props, ...$attrs }"
+  >
+    <slot />
+  </el-checkbox>
+  <el-checkbox
+    v-else
+    class="m-checkbox"
+    v-bind="{ ...props, ...$attrs }"
+  />
+</template>
+
+<script lang="ts" setup>
+// import { CheckboxProps } from 'element-plus';
+const props = defineProps();
+</script>

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

@@ -0,0 +1,5 @@
+import Collapse from './src/collapse.vue';
+
+export const MCollapse = Collapse;
+
+export * from './src/collapse';

package/packages/components/src/collapse/src/collapse.ts

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

package/packages/components/src/collapse/src/collapse.vue

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

package/packages/components/src/column-table/index.ts

@@ -0,0 +1,7 @@
+import ColumnTableRow from './src/column-table-row.vue';
+import ColumnTable from './src/column-table.vue';
+
+export const MColumnTable = ColumnTable;
+export const MColumnTableRow = ColumnTableRow;
+
+export * from './src/column-table';

package/packages/components/src/column-table/src/column-table-row.ts

@@ -0,0 +1,30 @@
+import { ExtractPropTypes } from 'vue';
+
+export const columnTableRowProps = {
+  /**
+   * @description 显示的标题
+   */
+  label: String,
+  /**
+   * @description 字段名称 对应列内容的字段名
+   */
+  prop: String,
+  /**
+   * @description 对应Row的高度
+   */
+  height: [String, Number],
+  /**
+   * @description 对应Row的最小高度
+   */
+  minHeight: [String, Number],
+  /**
+   * @description 对应Row的最大高度
+   */
+  type: {
+    type: String,
+    default: '',
+    validator: (value: string) => ['', 'columnTitle'].includes(value),
+  },
+};
+
+export type ColumnTableRowProps = ExtractPropTypes<typeof columnTableRowProps>;

package/packages/components/src/column-table/src/column-table-row.vue

@@ -0,0 +1,17 @@
+<script lang="ts" setup>
+import { inject, onMounted } from 'vue';
+import { type ColumnTableRowProps, columnTableRowProps } from './column-table-row';
+import { TABLE_INJECTION_KEY } from './tokens';
+
+const rootTable = inject(TABLE_INJECTION_KEY);
+
+const props = defineProps(columnTableRowProps);
+const slots = defineSlots<{
+  default: (props: ColumnTableRowProps) => any;
+}>();
+
+onMounted(() => {
+  rootTable?.addRowItem(props);
+  rootTable?.addRowSlot(slots);
+});
+</script>

package/packages/components/src/column-table/src/column-table.ts

@@ -0,0 +1,60 @@
+export const columnTableProps = {
+  /**
+   * @description 表数据
+   */
+  data: Array,
+  /**
+   * @description 是否展示列头
+   */
+  showHeader: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description 列头样式
+   */
+  headerColumnStyle: {
+    type: [Object],
+    default: () => ({
+      width: '',
+    }),
+  },
+  /**
+   * @description 列项样式
+   */
+  columnStyle: {
+    type: [Object, Function],
+    default: () => ({
+      width: '',
+    }),
+  },
+  /**
+   * @description 列项样式
+   */
+  cellStyle: {
+    type: [Object, Function],
+    default: () => null,
+  },
+  cellClassName: {
+    type: [Object, Function],
+    default: () => '',
+  },
+  /**
+   * @description 边框
+   */
+  outline: {
+    type: Boolean,
+    default: true,
+  },
+  /**
+   * @description table 的宽度。 默认为自动宽度。 如果 height 为 number 类型，单位 px；如果 height 为 string 类型，
+   * 则这个宽度会设置为 Table 的 style.width 的值，Table 的宽度会受控于外部样式。
+   * 设置宽度后，列标题会固定
+   */
+  spanMethod: {
+    type: Function,
+    default: null,
+  },
+};
+
+export type ColumnTableProps = typeof columnTableProps;

package/packages/components/src/column-table/src/column-table.vue

@@ -0,0 +1,141 @@
+<template>
+  <el-table
+    :class="`m-column-table ${outline ? 'm-column-table-with-border' : ''}`"
+    :data="data"
+    :style="$attrs.style"
+    :span-method="spanMethod"
+    :stripe="false"
+    :show-header="false"
+    :cell-style="realCellStyle"
+    :cell-class-name="realCellClassName"
+  >
+    <!-- 首列显示标题名称 -->
+    <el-table-column
+      v-if="showHeader"
+      key="title"
+      prop="title"
+      :width="headerColumnStyle?.width"
+      :min-width="headerColumnStyle?.['min-width']"
+      :style="headerColumnStyle"
+      fixed
+    >
+    </el-table-column>
+
+    <!-- 动态生成数据列 -->
+    <el-table-column
+      v-for="(item, index) in dataColumns"
+      :key="index"
+      :label="item.label"
+      :prop="item.prop"
+      :width="realColumnStyle(item, index)?.width"
+      :min-width="realColumnStyle(item, index)?.['min-width']"
+      :style="realColumnStyle"
+    >
+      <template #default="row">
+        <component :is="renderRowSlot(row.$index, row, showHeader ? index + 1 : index)" />
+      </template>
+    </el-table-column>
+  </el-table>
+  <slot />
+</template>
+
+<script lang="ts" setup>
+import { computed, h, isVNode, provide, ref, Comment } from 'vue';
+import { columnTableProps } from './column-table';
+import { TABLE_INJECTION_KEY } from './tokens';
+import { TableColumnCtx } from 'element-plus';
+
+const props = defineProps(columnTableProps);
+const { showHeader, headerColumnStyle, columnStyle, cellStyle, cellClassName, spanMethod } = props;
+
+const rowItems = ref<any[]>([]);
+const rowSlots = ref<any[]>([]);
+
+const data = computed(() => {
+  return rowItems.value.map((rowItem) => {
+    return props.data?.reduce(
+      (res: Record<string, any>, dataItem: any, index) => {
+        res[`${index}`] = dataItem[rowItem.prop];
+        return res;
+      },
+      { title: rowItem.label },
+    );
+  });
+});
+
+const dataColumns = computed(() => {
+  return props.data?.map((dataItem: any, index) => {
+    return {
+      label: rowItems.value[dataItem.prop]?.label,
+      prop: `${index}`,
+    };
+  });
+});
+
+const renderRowSlot = computed(() => {
+  return (rowIndex: number, rowData: any, columnIndex: number) => {
+    const rowSlot = rowSlots.value?.[rowIndex];
+    const slotNodes = rowSlot.default?.({ row: rowData.row, index: columnIndex });
+    const slotNode = slotNodes?.filter((node: any) => isVNode(node) && node.type !== Comment)?.[0];
+    if (!slotNode) {
+      return null;
+    }
+    return h(slotNode.type, slotNode.props, slotNode.children);
+  };
+});
+
+const realCellStyle = (cellData: {
+  row: any;
+  rowIndex: number;
+  column: TableColumnCtx<any>;
+  columnIndex: number;
+}) => {
+  // 列头样式
+  if (props.showHeader && cellData.columnIndex === 0) {
+    return {
+      background: '#F5F5F6',
+      color: '#343D46',
+      fontWeight: '500',
+    };
+  }
+  // 行头样式
+  const rowTitleBools = rowItems.value.map((rowItem) => rowItem.type === 'columnTitle');
+  if (rowTitleBools.some((isTitle, index) => index === cellData.rowIndex && isTitle)) {
+    return {
+      background: '#F5F5F6',
+      color: '#343D46',
+      fontWeight: '500',
+    };
+  }
+  if (typeof cellStyle === 'function') {
+    return cellStyle(cellData);
+  }
+  return {
+    color: '#101316',
+  };
+};
+
+const realCellClassName = (cellData: any) => {
+  if (typeof cellClassName === 'function') {
+    return cellClassName(cellData);
+  }
+  return '';
+};
+
+const realColumnStyle = (columnItem: any, index: number) => {
+  if (typeof columnStyle === 'function') {
+    return columnStyle({ column: columnItem, index });
+  }
+  return columnStyle;
+};
+
+// 提供添加列的方法，供子组件注入
+provide(TABLE_INJECTION_KEY, {
+  addRowItem: (rowItem: any) => {
+    rowItems.value.push(rowItem);
+  },
+  addRowSlot: (slot: any) => {
+    rowSlots.value.push(slot);
+  },
+});
+</script>

package/packages/components/src/column-table/src/tokens.ts

@@ -0,0 +1,6 @@
+import type { InjectionKey } from 'vue';
+
+export const TABLE_INJECTION_KEY: InjectionKey<{
+  addRowItem: (rowItem: any) => void;
+  addRowSlot: (rowSlot: any) => void;
+}> = Symbol('ColumnTable');

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

@@ -0,0 +1,5 @@
+import DatePicker from './src/date-picker.vue';
+
+export const MDatePicker = DatePicker;
+
+export * from './src/date-picker';

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

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

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

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

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

@@ -0,0 +1,5 @@
+import Demo from './src/demo.vue';
+
+export const MDemo = Demo;
+
+export * from './src/demo';

package/packages/components/src/demo/src/demo.ts

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