@phelan/design 0.0.1 → 0.0.2

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

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

@@ -1,8 +0,0 @@
-import Description from './src/description.vue';
-import DescriptionItem from './src/description-item.vue';
-
-export const MDescription = Description;
-export const MDescriptionItem = DescriptionItem;
-
-export * from './src/description';
-export * from './src/description-item';

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

@@ -1,12 +0,0 @@
-export const descriptionItemProps = {
-  span: {
-    type: Number,
-    default: 1,
-  },
-  label: {
-    type: String,
-    default: '',
-  },
-};
-
-export type DescriptionItemProps = typeof descriptionItemProps;

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

@@ -1,103 +0,0 @@
-<template>
-  <div
-    class="m-descriptions-item"
-    :style="itemStyle"
-  >
-    <div
-      v-if="label"
-      class="m-descriptions-item-label"
-      >{{ label }}</div
-    >
-    <m-tooltip
-      ref="tooltipRef"
-      :content="contentText"
-      placement="top"
-      :disabled="!isOverflow"
-      :teleported="true"
-    >
-      <div
-        ref="contentRef"
-        class="m-descriptions-item-content"
-        @mouseenter="handleTooltipShow"
-        ><slot></slot
-      ></div>
-    </m-tooltip>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { inject, computed, ref, nextTick, onMounted, onUnmounted } from 'vue';
-import { descriptionItemProps } from './description-item';
-
-const props = defineProps(descriptionItemProps);
-
-const totalColumns = inject('totalColumns', 3);
-const gutter = inject('gutter', 12);
-const rowGap = inject('rowGap', 10);
-const labelJustify = inject('labelJustify', 'center');
-
-const itemWidth = computed(() => {
-  const safeSpan = Math.min(props.span, totalColumns);
-  return `${(safeSpan / totalColumns) * 100}%`;
-});
-
-const itemStyle = computed(() => ({
-  width: itemWidth.value,
-  paddingLeft: gutter > 0 ? `${gutter / 2}px` : '0',
-  paddingRight: gutter > 0 ? `${gutter / 2}px` : '0',
-  marginBottom: rowGap > 0 ? `${rowGap}px` : '0',
-  alignItems: labelJustify,
-}));
-const debounce = (fn: Function, delay = 50) => {
-  let timer: any = null;
-  const debounced = (...args: any[]) => {
-    if (timer) clearTimeout(timer);
-    timer = setTimeout(() => fn.apply(this, args), delay);
-  };
-  debounced.flush = (...args: any[]) => {
-    if (timer) clearTimeout(timer);
-    fn.apply(this, args);
-  };
-  debounced.cancel = () => {
-    if (timer) clearTimeout(timer);
-    timer = null;
-  };
-  return debounced;
-};
-
-const contentRef = ref<HTMLElement | null>(null);
-const tooltipRef = ref<any>(null);
-// 是否超出容器
-const isOverflow = ref<boolean | null>(null);
-// 缓存文本内容
-const contentText = ref<string>('');
-
-const checkTextOverflow = debounce(() => {
-  if (!contentRef.value) return;
-  const el = contentRef.value as HTMLElement;
-  const { scrollWidth, clientWidth, textContent } = el;
-  isOverflow.value = scrollWidth > clientWidth;
-  contentText.value = textContent ? textContent?.trim() : '';
-}, 50);
-
-const handleTooltipShow = () => {
-  if (isOverflow.value !== null) return;
-  nextTick(() => {
-    // 立即执行（跳过防抖），保证Tooltip显示时机
-    checkTextOverflow.flush();
-  });
-};
-
-onMounted(() => {
-  // 监听窗口resize（带防抖），适配响应式布局
-  window.addEventListener('resize', checkTextOverflow);
-});
-
-onUnmounted(() => {
-  window.removeEventListener('resize', checkTextOverflow);
-  checkTextOverflow.cancel();
-  if (tooltipRef.value) {
-    tooltipRef.value?.doClose();
-  }
-});
-</script>

package/packages/components/src/description/src/description.ts

@@ -1,20 +0,0 @@
-export const descriptionProps = {
-  columns: {
-    type: Number,
-    default: 3,
-  },
-  gutter: {
-    type: Number,
-    default: 12,
-  },
-  rowGap: {
-    type: Number,
-    default: 10,
-  },
-  labelJustify: {
-    type: String,
-    default: 'center',
-  },
-};
-
-export type DescriptionProps = typeof descriptionProps;

package/packages/components/src/description/src/description.vue

@@ -1,28 +0,0 @@
-<template>
-  <div class="m-descriptions">
-    <div
-      class="m-descriptions-container"
-      :style="containerStyle"
-    >
-      <slot></slot>
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { provide, computed } from 'vue';
-import { descriptionProps } from './description';
-
-const props = defineProps(descriptionProps);
-
-provide('totalColumns', props.columns);
-provide('gutter', props.gutter);
-provide('rowGap', props.rowGap);
-provide('labelJustify', props.labelJustify);
-
-const containerStyle = computed(() => ({
-  marginLeft: props.gutter > 0 ? `-${props.gutter / 2}px` : '0',
-  marginRight: props.gutter > 0 ? `-${props.gutter / 2}px` : '0',
-  marginBottom: props.rowGap > 0 ? `-${props.rowGap}px` : '0',
-}));
-</script>

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

@@ -1,6 +0,0 @@
-import Dialog from './src/dialog.vue';
-export const MDialog = Dialog;
-export * from './src/dialog';
-
-import { msgDialog } from './src/msg-dialog';
-export const MMessageDialog = msgDialog;

package/packages/components/src/dialog/src/dialog.ts

@@ -1,62 +0,0 @@
-import { Error } from '@m-design/icons';
-
-export const dialogProps = {
-  /**
-   * @size 对话框大小
-   */
-  size: String,
-  /**
-   * @showDefaultFooter 是否显示底部按钮
-   */
-  showDefaultFooter: {
-    type: Boolean,
-    default: true,
-  },
-  /**
-   * @iconType
-   */
-  iconType: {
-    type: String,
-    default: '',
-  },
-  /**
-   * @type 标题图标（info ｜ warning ｜ success ｜ error）
-   */
-  type: {
-    type: String,
-    default: '',
-  },
-  /**
-   * @pop 是否是消息弹出框
-   */
-  pop: {
-    type: Boolean,
-    default: false,
-  },
-  /**
-   * @cancelButtonText 确认按钮文本
-   */
-  confirmButtonText: {
-    type: String,
-  },
-  /**
-   * @cancelButtonText 取消按钮文本
-   */
-  cancelButtonText: {
-    type: String,
-  },
-  /**
-   * @closeIcon 自定义关闭图标，默认 Close
-   */
-  closeIcon: {
-    type: Object,
-    default: () => Error,
-  },
-};
-
-export const dialogEmits = {
-  submit: () => true,
-  cancel: () => true,
-};
-export type DialogEmits = typeof dialogEmits;
-export type DialogProps = typeof dialogProps;

package/packages/components/src/dialog/src/dialog.vue

@@ -1,121 +0,0 @@
-<template>
-  <el-dialog
-    :class="['m-dialog', size == 'big' ? 'big-dialog' : '']"
-    v-bind="filteredAttrs"
-    ref="adDialog"
-    align-center
-    :close-icon="closeIcon"
-  >
-    <template #header="scopeProps">
-      <slot
-        v-if="$slots.header"
-        v-bind="scopeProps"
-        name="header"
-      />
-      <template v-else>
-        <template v-if="type">
-          <m-icon
-            class="header-icon"
-            :icon="type"
-            :color="iconTypeColor[type]"
-            size="24"
-          >
-            <component :is="iconConfig[type]"></component>
-          </m-icon>
-        </template>
-        <span>{{ filteredAttrs.title }}</span>
-      </template>
-    </template>
-    <slot />
-    <slot name="top" />
-    <div
-      v-if="$slots.scroll"
-      class="m-dialog-scroll"
-    >
-      <!-- 可滚动区域 -->
-      <slot name="scroll" />
-    </div>
-    <slot name="bottom" />
-    <template #footer="scopeProps">
-      <slot
-        name="footer"
-        v-if="$slots.footer"
-        v-bind="scopeProps"
-      />
-      <div v-else-if="showDefaultFooter">
-        <m-button
-          class="default-btn"
-          type="primary"
-          plain
-          @click="handleCancel"
-          >{{ finalCancelButtonText }}</m-button
-        >
-        <m-button
-          class="default-btn"
-          type="primary"
-          @click="handleSubmit"
-          >{{ finalConfirmButtonText }}</m-button
-        >
-      </div>
-    </template>
-  </el-dialog>
-</template>
-
-<script lang="ts" setup>
-import { computed, useAttrs, ref } from 'vue';
-import { dialogEmits, dialogProps } from './dialog';
-import { ElDialog, useLocale } from 'element-plus';
-import { MButton } from '../../button';
-import { MIcon } from '../../icon';
-import { Info, Warning, Success, Error } from '@m-design/icons';
-import { IconTypeColor, IconConfig } from './types';
-const { t: oriT } = useLocale();
-const t = (key: string) => oriT(`m.dialog.${key}`);
-
-const iconConfig = ref<IconConfig>({
-  info: Info,
-  warning: Warning,
-  success: Success,
-  error: Error,
-});
-const iconTypeColor = ref<IconTypeColor>({
-  info: '#0D3A93',
-  success: '#009258',
-  warning: '#FF6200',
-  error: '#D70000',
-});
-const { size, showDefaultFooter, pop, type, confirmButtonText, cancelButtonText } =
-  defineProps(dialogProps);
-
-const adDialog = ref();
-const emit = defineEmits(dialogEmits);
-const attrs = useAttrs();
-const filteredAttrs = computed(() => {
-  const { ...rest } = attrs;
-  return rest;
-});
-
-const finalConfirmButtonText = computed(() => {
-  return confirmButtonText || t('确认');
-});
-
-const finalCancelButtonText = computed(() => {
-  return cancelButtonText || t('取消');
-});
-
-const handleCancel = () => {
-  emit('cancel');
-  if (!pop) {
-    if (adDialog.value.handleClose) {
-      adDialog.value.handleClose();
-    } else {
-      // 兼容老版本
-      adDialog.value.visible = false;
-    }
-  }
-};
-
-const handleSubmit = () => {
-  emit('submit');
-};
-</script>

package/packages/components/src/dialog/src/msg-dialog.ts

@@ -1,84 +0,0 @@
-import { h, render } from 'vue';
-import type { AppContext } from 'vue';
-import { getCurrentInstance } from 'vue';
-import Dialog from './dialog.vue';
-
-export interface PayLoadType {
-  type?: 'info' | 'success' | 'warning' | 'error';
-  content?: string;
-  width?: string;
-  confirmButtonText?: string;
-  cancelButtonText?: string;
-}
-
-let dialogAppContext: AppContext | null = null;
-
-export const setDialogAppContext = (context: AppContext) => {
-  dialogAppContext = context;
-};
-
-const ensureAppContext = () => {
-  if (!dialogAppContext) {
-    const instance = getCurrentInstance();
-    if (instance) {
-      dialogAppContext = instance.appContext;
-    }
-  }
-  return dialogAppContext;
-};
-
-const msgDialogFn = (content: string, title: string, payLoad: PayLoadType = {}) => {
-  return new Promise((resolve, reject) => {
-    // 取消按钮事件
-    const onCancel = () => {
-      closeBox();
-      reject(new Error('cancel'));
-    };
-    // 确定按钮事件
-    const onSubmit = () => {
-      closeBox();
-      resolve('success');
-    };
-
-    // 关闭弹层事件
-    const closeBox = () => {
-      render(null, document.body);
-    };
-    // 1. 生成 vnode
-    const vnode = h(
-      Dialog,
-      {
-        title,
-        modelValue: true,
-        showClose: false,
-        confirmButtonText: payLoad.confirmButtonText,
-        cancelButtonText: payLoad.cancelButtonText,
-        'close-on-click-modal': false,
-        'close-on-press-escape': false,
-        pop: true,
-        type: payLoad.type || undefined,
-        width: payLoad.width || '420',
-        onCancel,
-        onSubmit,
-      },
-      [content],
-    );
-
-    const appContext = ensureAppContext();
-    if (appContext) {
-      vnode.appContext = appContext;
-    }
-
-    // 2. render 渲染
-    render(vnode, document.body);
-  });
-};
-
-export const msgDialog = Object.assign(msgDialogFn, {
-  confirm: (content: string, title: string, payLoad: PayLoadType = {}) => {
-    return msgDialogFn(content, title, {
-      ...payLoad,
-      type: payLoad.type,
-    });
-  },
-});

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

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

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

@@ -1,5 +0,0 @@
-import Drawer from './src/drawer.vue';
-
-export const MDrawer = Drawer;
-
-export * from './src/drawer';

package/packages/components/src/drawer/src/drawer.ts

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

package/packages/components/src/drawer/src/drawer.vue

@@ -1,24 +0,0 @@
-<template>
-  <el-drawer class="m-drawer" v-bind="filteredAttrs">
-    <template v-for="(_, slotName) in $slots" #[slotName]="props">
-      <slot :name="slotName" v-bind="props" />
-    </template>
-  </el-drawer>
-</template>
-
-<script lang="ts" setup>
-import { useAttrs, computed } from 'vue';
-import { drawerProps } from './drawer';
-import { ElDrawer } from 'element-plus';
-
-type ElDrawerSlots = InstanceType<typeof ElDrawer>['$slots'];
-defineSlots<ElDrawerSlots>();
-defineProps(drawerProps);
-
-const attrs = useAttrs();
-
-const filteredAttrs = computed(() => {
-  const { ...rest } = attrs;
-  return rest;
-});
-</script>

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

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

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

@@ -1,13 +0,0 @@
-export interface ViewDataItem {
-  label?: string;
-  value?: string | number;
-}
-
-export interface EditorProps {
-  modelValue?: boolean;
-  title?: string;
-  width?: string | number;
-  viewData?: ViewDataItem[];
-  viewColumns?: number;
-  closeOnClickModal?: boolean;
-}

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

@@ -1,70 +0,0 @@
-<template>
-  <m-dialog
-    v-model="visible"
-    class="m-editor"
-    :title="title || t('编辑')"
-    :width="width"
-    :close-on-click-modal="closeOnClickModal"
-    @close="handleCancel"
-    @submit="handleConfirm"
-    @cancel="handleCancel"
-  >
-    <!-- 查看区域 -->
-    <slot name="description">
-      <m-description
-        :columns="viewColumns"
-        class="view-area"
-      >
-        <m-description-item
-          v-for="(item, index) in viewData"
-          :label="item.label"
-          :key="index"
-        >
-          {{ item.value }}
-        </m-description-item>
-      </m-description>
-    </slot>
-    <!-- 表单区域 -->
-    <template #scroll>
-      <slot name="form"></slot>
-    </template>
-  </m-dialog>
-</template>
-
-<script lang="ts" setup>
-import { computed } from 'vue';
-import { EditorProps } from './editor';
-import { useLocale } from 'element-plus';
-const { t: oriT } = useLocale();
-const t = (key: string) => oriT(`m.editor.${key}`);
-const props = withDefaults(defineProps<EditorProps>(), {
-  modelValue: false,
-  width: '570',
-  viewData: () => [],
-  viewColumns: 2,
-  closeOnClickModal: false,
-});
-const emit = defineEmits(['update:modelValue', 'cancel', 'confirm']);
-// 控制对话框显示隐藏
-const visible = computed({
-  get() {
-    return props.modelValue;
-  },
-  set(value) {
-    emit('update:modelValue', value);
-  },
-});
-
-// 处理取消/关闭事件
-const handleCancel = () => {
-  emit('update:modelValue', false);
-  emit('cancel');
-};
-
-// 处理确认事件
-const handleConfirm = () => {
-  // 调用确认回调
-  emit('confirm');
-  // 需要用户自己操作动作 并且关闭对话框
-};
-</script>

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

@@ -1,5 +0,0 @@
-import Empty from './src/empty.vue';
-
-export const MEmpty = Empty;
-
-export * from './src/empty';

package/packages/components/src/empty/src/empty.ts

@@ -1,3 +0,0 @@
-export const emptyProps = {};
-
-export type EmptyProps = typeof emptyProps;

package/packages/components/src/empty/src/empty.vue

@@ -1,37 +0,0 @@
-<template>
-  <el-empty
-    class="m-empty"
-    v-bind="filteredAttrs"
-  >
-    <template
-      #image
-      v-if="!$slots.image"
-    >
-      <img-empty />
-    </template>
-
-    <template
-      v-for="(_, slotName) in $slots"
-      #[slotName]
-    >
-      <slot :name="slotName">
-        <!-- 图片默认占位图 -->
-        <img-empty v-if="slotName === 'image'" />
-      </slot>
-    </template>
-  </el-empty>
-</template>
-
-<script lang="ts" setup>
-import { computed, useAttrs } from 'vue';
-import { emptyProps } from './empty';
-import ImgEmpty from './img-empty.vue';
-defineProps(emptyProps);
-
-const attrs = useAttrs();
-
-const filteredAttrs = computed(() => {
-  const { ...rest } = attrs;
-  return rest;
-});
-</script>