@phelan/design 0.0.1 → 0.0.2

package/docs/examples/arrow-steps/index.vue

@@ -1,15 +0,0 @@
-<template>
-  <MArrowSteps :active="2">
-    <MArrowStep title="title"></MArrowStep>
-    <MArrowStep title="很长很长很长很长很长很长很长的tiiiiiiiiiiiiiitle"></MArrowStep>
-    <MArrowStep>
-      <template #title>slotTitle</template>
-    </MArrowStep>
-    <MArrowStep>
-      <template #title>很长很长很长很长很长很长很长的slotTiiiiiiiiiiiiiitle</template>
-    </MArrowStep>
-    <MArrowStep title="无用de旁观title">
-      <template #title>在无用de旁观title面前鸠占鹊巢强力输出的slotTitle</template>
-    </MArrowStep>
-  </MArrowSteps>
-</template>

package/docs/examples/badge/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <m-badge></m-badge>
-</template>

package/docs/examples/batch-copy/index.vue

@@ -1,30 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button
-      plain
-      @click="dialogVisible = true"
-    >
-      Click to open the Dialog
-    </m-button>
-    <div> validData: {{ validData }} </div>
-    <m-batch-copy
-      v-model="dialogVisible"
-      @confirm="handleSubmit"
-    ></m-batch-copy>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-const dialogVisible = ref(false);
-
-const validData = ref([]);
-
-const handleSubmit = (data: any) => {
-  validData.value = data?.validData || [];
-};
-
-const handleCancel = () => {
-  console.log('handleSubmit');
-};
-</script>

package/docs/examples/batch-copy/validator.vue

@@ -1,73 +0,0 @@
-<template>
-  <h2>示例</h2>
-  <div>自定义分隔符:['@', '#', ',']</div>
-  <div>模拟校验函数:必须是数字且长度为6</div>
-  <div>模拟数据:{{ mockData }}</div>
-  <m-button @click="copyMockData">复制模拟数据</m-button>
-  <h2></h2>
-  <div class="vp-raw">
-    <m-button
-      plain
-      @click="dialogVisible = true"
-    >
-      Click to open the Dialog
-    </m-button>
-    <div> validData: {{ validData }} </div>
-    <div> invalidData: {{ invalidData }} </div>
-    <m-batch-copy
-      v-model="dialogVisible"
-      title="Batch Copy"
-      maxLength="5000"
-      :separator="separator"
-      :validator="validateIds"
-      @cancel="handleCancel"
-      @confirm="handleSubmit"
-    ></m-batch-copy>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ref } from 'vue';
-const dialogVisible = ref(false);
-
-// mock数据
-const mockData = '111111,222222,3,444444@5@666666#777777#888888,9,101010';
-
-const separator = ref(['@', '#', ',']);
-
-const validData = ref([]);
-const invalidData = ref([]);
-
-const copyMockData = () => {
-  navigator.clipboard.writeText(mockData);
-};
-
-// 自定义校验函数
-const validateIds = async (ids: string[]) => {
-  // 模拟异步校验
-  return new Promise((resolve) => {
-    setTimeout(() => {
-      const validData: string[] = [];
-      const invalidData: string[] = [];
-      ids.forEach((id) => {
-        // 示例：校验ID必须是数字且长度为6
-        if (/^\d{6}$/.test(id)) {
-          validData.push(id);
-        } else {
-          invalidData.push(id);
-        }
-      });
-      resolve({ validData, invalidData });
-    }, 500);
-  });
-};
-
-const handleSubmit = (data: any) => {
-  validData.value = data?.validData || [];
-  invalidData.value = data?.invalidData || [];
-};
-
-const handleCancel = () => {
-  console.log('handleSubmit');
-};
-</script>

package/docs/examples/batch-editor/basic.vue

@@ -1,120 +0,0 @@
-<template>
-  <m-button
-    type="primary"
-    @click="visible = true"
-  >
-    Open BatchEditor
-  </m-button>
-  <m-batch-editor
-    v-model="visible"
-    :tableData="tableData"
-    :tableColumn="tableColumn"
-    @confirm="handleConfirm"
-    @cancel="handleCancel"
-  >
-    <template #form>
-      <m-form
-        :model="form"
-        label-position="top"
-      >
-        <m-form-item
-          label="supplier"
-          prop="supplier"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-            v-model="form.supplier"
-          >
-            <el-option
-              label="Apple"
-              value="apple"
-            ></el-option>
-            <el-option
-              label="Google"
-              value="google"
-            ></el-option>
-          </el-select>
-        </m-form-item>
-      </m-form>
-    </template>
-  </m-batch-editor>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const form = ref({ supplier: '' });
-const tableData = [
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-  {
-    articleCode: '123456',
-    articleNameCn: '德式图林根味香肠 400g',
-    articleNameEn: '德式图林根味香肠 400g',
-  },
-];
-
-const tableColumn = [
-  {
-    label: 'Article code',
-    prop: 'articleCode',
-    showOverflowTooltip: false,
-  },
-  {
-    label: 'Article Name CN',
-    prop: 'articleNameCn',
-    showOverflowTooltip: true,
-  },
-  {
-    label: 'Article Name EN',
-    prop: 'articleNameEn',
-    showOverflowTooltip: true,
-  },
-];
-
-const handleConfirm = () => {
-  console.log('handleConfirm');
-};
-
-const handleCancel = () => {
-  console.log('handleCancel');
-};
-</script>

package/docs/examples/batch-editor/customization.vue

@@ -1,167 +0,0 @@
-<template>
-  <m-button
-    type="primary"
-    @click="visible = true"
-  >
-    Open BatchEditor
-  </m-button>
-  <m-batch-editor
-    v-model="visible"
-    desc="温馨提示"
-    @confirm="handleConfirm"
-    @cancel="handleCancel"
-  >
-    <template #form>
-      <m-form
-        :model="form"
-        label-position="top"
-      >
-        <m-form-item
-          label="name"
-          prop="name"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-            v-model="form.name"
-          >
-            <el-option
-              label="Apple"
-              value="apple"
-            ></el-option>
-            <el-option
-              label="Google"
-              value="google"
-            ></el-option>
-          </el-select>
-        </m-form-item>
-        <m-form-item
-          label="name"
-          prop="name"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-            v-model="form.name"
-          >
-            <el-option
-              label="Apple"
-              value="apple"
-            ></el-option>
-            <el-option
-              label="Google"
-              value="google"
-            ></el-option>
-          </el-select>
-        </m-form-item>
-        <m-form-item
-          label="name"
-          prop="name"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-            v-model="form.name"
-          >
-            <el-option
-              label="Apple"
-              value="apple"
-            ></el-option>
-            <el-option
-              label="Google"
-              value="google"
-            ></el-option>
-          </el-select>
-        </m-form-item>
-        <m-form-item
-          label="name"
-          prop="name"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-            v-model="form.name"
-          >
-            <el-option
-              label="Apple"
-              value="apple"
-            ></el-option>
-            <el-option
-              label="Google"
-              value="google"
-            ></el-option>
-          </el-select>
-        </m-form-item>
-        <m-form-item
-          label="name"
-          prop="name"
-        >
-          <el-select
-            placeholder="请选择"
-            clearable
-            v-model="form.name"
-          >
-            <el-option
-              label="Apple"
-              value="apple"
-            ></el-option>
-            <el-option
-              label="Google"
-              value="google"
-            ></el-option>
-          </el-select>
-        </m-form-item>
-      </m-form>
-    </template>
-    <template #table>
-      这里是自定义table部分
-      <m-table :data="tableData">
-        <el-table-column
-          label="name"
-          prop="name"
-        ></el-table-column>
-        <el-table-column
-          label="name"
-          prop="name"
-        ></el-table-column>
-        <el-table-column
-          label="name"
-          prop="name"
-        ></el-table-column>
-        <el-table-column />
-      </m-table>
-    </template>
-    <template #footer>
-      <m-button @click="handleCancel"> 取消 </m-button>
-      <m-button
-        type="primary"
-        @click="handleConfirm"
-      >
-        确定
-      </m-button>
-    </template>
-  </m-batch-editor>
-</template>
-<script lang="ts" setup>
-import { ref } from 'vue';
-const visible = ref(false);
-const form = ref({ name: '' });
-const tableData = ref([
-  {
-    name: 'Apple',
-  },
-  {
-    name: 'Apple',
-  },
-  {
-    name: 'Apple',
-  },
-]);
-const handleConfirm = () => {
-  console.log('handleConfirm');
-};
-
-const handleCancel = () => {
-  console.log('handleCancel');
-};
-</script>

package/docs/examples/border/index.vue

@@ -1,3 +0,0 @@
-<template>
-  <m-border></m-border>
-</template>

package/docs/examples/breadcrumb/index.vue

@@ -1,33 +0,0 @@
-<template>
-  <div class="breadcrumb-demo">
-    <h3>基础用法</h3>
-    <m-breadcrumb separator="/">
-      <m-breadcrumb-item :to="{ path: '/' }">homepage</m-breadcrumb-item>
-      <m-breadcrumb-item>
-        <a href="/">promotion management</a>
-      </m-breadcrumb-item>
-      <m-breadcrumb-item>promotion list</m-breadcrumb-item>
-      <m-breadcrumb-item>promotion detail</m-breadcrumb-item>
-    </m-breadcrumb>
-
-    <h3>图标分隔符</h3>
-    <m-breadcrumb :separator-icon="ArrowRight">
-      <m-breadcrumb-item :to="{ path: '/' }">homepage</m-breadcrumb-item>
-      <m-breadcrumb-item>promotion management</m-breadcrumb-item>
-      <m-breadcrumb-item>promotion list</m-breadcrumb-item>
-      <m-breadcrumb-item>promotion detail</m-breadcrumb-item>
-    </m-breadcrumb>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { ArrowRight } from '@element-plus/icons-vue';
-</script>
-
-<style scoped>
-.breadcrumb-demo h3 {
-  margin: 20px 0;
-  font-weight: 500;
-  color: #1f2f3d;
-}
-</style>

package/docs/examples/button/demo1.vue

@@ -1,119 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <div class="mb-4">
-      <m-button>Default</m-button>
-      <m-button type="primary">Primary</m-button>
-      <m-button type="success">Success</m-button>
-      <m-button type="info">Info</m-button>
-      <m-button type="warning">Warning</m-button>
-      <m-button type="danger">Danger</m-button>
-    </div>
-
-    <div class="mb-4">
-      <m-button plain>Plain</m-button>
-      <m-button
-        type="primary"
-        plain
-        >Primary</m-button
-      >
-      <m-button
-        type="success"
-        plain
-        >Success</m-button
-      >
-      <m-button
-        type="info"
-        plain
-        >Info</m-button
-      >
-      <m-button
-        type="warning"
-        plain
-        >Warning</m-button
-      >
-      <m-button
-        type="danger"
-        plain
-        >Danger</m-button
-      >
-    </div>
-
-    <div class="mb-4">
-      <m-button round>Round</m-button>
-      <m-button
-        type="primary"
-        round
-        >Primary</m-button
-      >
-      <m-button
-        type="success"
-        round
-        >Success</m-button
-      >
-      <m-button
-        type="info"
-        round
-        >Info</m-button
-      >
-      <m-button
-        type="warning"
-        round
-        >Warning</m-button
-      >
-      <m-button
-        type="danger"
-        round
-        >Danger</m-button
-      >
-    </div>
-
-    <div class="mb-4 small-title"> Aim Design Icons </div>
-    <div class="mb-4">
-      <m-button
-        icon="Search"
-        circle
-      />
-      <m-button
-        type="primary"
-        icon="Edit"
-        circle
-      />
-    </div>
-    <div class="mb-4 small-title"> element-plus Icons </div>
-    <div class="mb-4">
-      <m-button
-        type="success"
-        :icon="Check"
-        circle
-      />
-      <m-button
-        type="info"
-        :icon="Message"
-        circle
-      />
-      <m-button
-        type="warning"
-        :icon="Star"
-        circle
-      />
-      <m-button
-        type="danger"
-        :icon="Delete"
-        circle
-      />
-    </div>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { Check, Delete, Message, Star } from '@element-plus/icons-vue';
-</script>
-
-<style scoped>
-.small-title {
-  font-size: 16px;
-  font-weight: 600;
-  color: #333;
-  margin-bottom: 16px;
-}
-</style>

package/docs/examples/button/demo2.vue

@@ -1,18 +0,0 @@
-<template>
-  <div class="mb-4">
-    <m-button disabled>Default</m-button>
-    <m-button type="primary" disabled>Primary</m-button>
-    <m-button type="success" disabled>Success</m-button>
-    <m-button type="info" disabled>Info</m-button>
-    <m-button type="warning" disabled>Warning</m-button>
-    <m-button type="danger" disabled>Danger</m-button>
-  </div>
-  <div class="mb-4">
-    <m-button plain>Plain</m-button>
-    <m-button type="primary" disabled plain>Primary</m-button>
-    <m-button type="success" disabled plain>Success</m-button>
-    <m-button type="info" disabled plain>Info</m-button>
-    <m-button type="warning" disabled plain>Warning</m-button>
-    <m-button type="danger" disabled plain>Danger</m-button>
-  </div>
-</template>

package/docs/examples/button/demo3.vue

@@ -1,32 +0,0 @@
-<template>
-  <p>Basic text button</p>
-  <div class="mb-4">
-    <m-button v-for="button in buttons" :key="button.text" :type="button.type" text>
-      {{ button.text }}
-    </m-button>
-  </div>
-
-  <p>Background color always on</p>
-  <div class="mb-4">
-    <m-button v-for="button in buttons" :key="button.text" :type="button.type" text bg>
-      {{ button.text }}
-    </m-button>
-  </div>
-
-  <p>Disabled text button</p>
-  <div>
-    <m-button v-for="button in buttons" :key="button.text" :type="button.type" text disabled>
-      {{ button.text }}
-    </m-button>
-  </div>
-</template>
-<script setup lang="ts">
-const buttons = [
-  { type: '', text: 'plain' },
-  { type: 'primary', text: 'primary' },
-  { type: 'success', text: 'success' },
-  { type: 'info', text: 'info' },
-  { type: 'warning', text: 'warning' },
-  { type: 'danger', text: 'danger' },
-] as const;
-</script>

package/docs/examples/button/demo4.vue

@@ -1,41 +0,0 @@
-<template>
-  <div>
-    <m-button
-      type="primary"
-      icon="Edit"
-    />
-    <m-button
-      type="primary"
-      :icon="Delete"
-    />
-    <m-button
-      type="primary"
-      :icon="Search"
-      >Search</m-button
-    >
-    <m-button type="primary">
-      Upload
-      <el-icon class="el-icon--right"><Upload /></el-icon>
-    </m-button>
-    <p>icon slot 用法</p>
-    <m-button type="primary">
-      <template #icon>
-        <m-icon
-          :icon="Search"
-          size="20"
-        />
-      </template>
-    </m-button>
-    <p>保留el-icon的用法</p>
-    <m-button
-      type="primary"
-      :icon="Share"
-    />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { Share } from '@element-plus/icons-vue';
-import { Delete, Search, Upload } from '@m-design/icons';
-import { ElIcon } from 'element-plus';
-</script>