@phelan/design 0.0.1

package/docs/examples/drawer/nested.vue

@@ -0,0 +1,44 @@
+<template>
+  <m-button
+    type="primary"
+    @click="drawer = true"
+  >
+    open
+  </m-button>
+
+  <m-drawer
+    v-model="drawer"
+    title="I'm outer Drawer"
+    size="50%"
+  >
+    <div>
+      <m-button @click="innerDrawer = true">Click me!</m-button>
+      <m-drawer
+        v-model="innerDrawer"
+        title="I'm inner Drawer"
+        :append-to-body="true"
+        :before-close="handleClose"
+      >
+        <p>_(:зゝ∠)_</p>
+      </m-drawer>
+    </div>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElMessageBox } from 'element-plus';
+
+const drawer = ref(false);
+const innerDrawer = ref(false);
+
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('You still have unsaved data, proceed?')
+    .then(() => {
+      done();
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+</script>

package/docs/examples/drawer/no-title.vue

@@ -0,0 +1,22 @@
+<template>
+  <m-button
+    type="primary"
+    @click="drawer = true"
+  >
+    open
+  </m-button>
+
+  <m-drawer
+    v-model="drawer"
+    title="I am the title"
+    :with-header="false"
+  >
+    <span>Hi there!</span>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const drawer = ref(false);
+</script>

package/docs/examples/drawer/resizable.vue

@@ -0,0 +1,28 @@
+<template>
+  <el-radio-group
+    v-model="direction"
+    @change="drawer = true"
+  >
+    <el-radio-button value="ttb">top</el-radio-button>
+    <el-radio-button value="rtl">right</el-radio-button>
+    <el-radio-button value="btt">bottom</el-radio-button>
+    <el-radio-button value="ltr">left</el-radio-button>
+  </el-radio-group>
+
+  <m-drawer
+    v-model="drawer"
+    :direction="direction"
+    resizable
+  >
+    This is drawer content.
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { DrawerProps } from 'element-plus';
+
+const direction = ref<DrawerProps['direction']>();
+const drawer = ref(false);
+</script>

package/docs/examples/editor/basic.vue

@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <m-button @click="open = true">编辑</m-button>
+    <m-editor
+      v-model="open"
+      :viewData="viewData"
+      @confirm="handleConfirm"
+    >
+      <template #form>
+        <m-form
+          :model="form"
+          label-position="top"
+        >
+          <m-form-item
+            label="供应商"
+            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-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const open = ref(false);
+const form = ref({ supplier: '' });
+const viewData = ref([
+  { label: 'Username', value: 'kooriookami' },
+  { label: 'Telephone', value: '18100000000' },
+  { label: 'Place', value: 'Suzhou' },
+]);
+
+const handleConfirm = () => {
+  console.log('提交的数据:');
+};
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <m-button @click="open = true">编辑</m-button>
+    <m-editor
+      v-model="open"
+      :viewData="viewData"
+      @confirm="handleConfirm"
+    >
+      <template #description>
+        <span>这里是自定义部分</span>
+      </template>
+      <template #form>
+        <m-form
+          :model="form"
+          label-position="top"
+        >
+          <m-form-item
+            label="供应商"
+            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-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const open = ref(false);
+const form = ref({ supplier: '' });
+const viewData = ref([
+  { label: 'Username', value: 'kooriookami' },
+  { label: 'Telephone', value: '18100000000' },
+  { label: 'Place', value: 'Suzhou' },
+]);
+
+const handleConfirm = () => {
+  console.log('提交的数据:');
+};
+</script>

package/docs/examples/editor/more-demo.vue

@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <m-button @click="open = true">编辑</m-button>
+    <m-editor
+      v-model="open"
+      :viewData="viewData"
+      @confirm="handleConfirm"
+    >
+      <template #form>
+        <m-form
+          :model="form"
+          label-position="top"
+        >
+          <m-form-item
+            label="供应商"
+            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-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const open = ref(false);
+const form = ref({ supplier: '' });
+const viewData = ref([
+  { label: 'Username', value: 'kooriookami' },
+  { label: 'Telephone', value: '18100000000' },
+  { label: 'Place', value: 'Suzhou' },
+  { label: 'Remarks', value: 'ok' },
+]);
+
+const handleConfirm = () => {
+  console.log('提交的数据:');
+};
+</script>

package/docs/examples/editor/more-form.vue

@@ -0,0 +1,56 @@
+<template>
+  <div>
+    <m-button @click="open = true">编辑</m-button>
+    <m-editor
+      v-model="open"
+      :viewData="viewData"
+      title="添加"
+      width="600"
+      @confirm="handleConfirm"
+    >
+      <template #form>
+        <m-form
+          :model="form"
+          label-position="top"
+        >
+          <m-form-item
+            label="供应商"
+            prop="supplier"
+            v-for="_i in 10"
+          >
+            <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-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const open = ref(false);
+const form = ref({ supplier: '' });
+const viewData = ref([
+  { label: 'Username', value: 'kooriookami' },
+  { label: 'Telephone', value: '18100000000' },
+  { label: 'Place', value: 'Suzhou' },
+]);
+
+const handleConfirm = () => {
+  console.log('提交的数据:');
+};
+</script>

package/docs/examples/editor/number-desc.vue

@@ -0,0 +1,55 @@
+<template>
+  <div>
+    <m-button @click="open = true">编辑</m-button>
+    <m-editor
+      v-model="open"
+      :viewData="viewData"
+      @confirm="handleConfirm"
+      :viewColumns="2"
+    >
+      <template #form>
+        <m-form
+          :model="form"
+          label-position="top"
+        >
+          <m-form-item
+            label="供应商"
+            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-editor>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const open = ref(false);
+const form = ref({ supplier: '' });
+const viewData = ref([
+  { label: 'Username', value: 'kooriookami' },
+  { label: 'Telephone', value: '18100000000' },
+  { label: 'Place', value: 'Suzhou' },
+  { label: 'Remarks', value: 'ok' },
+]);
+
+const handleConfirm = () => {
+  console.log('提交的数据:');
+};
+</script>

package/docs/examples/empty/basic.vue

@@ -0,0 +1,4 @@
+<template>
+  <m-empty description="暂无数据" />
+</template>
+<script lang="ts"></script>

package/docs/examples/empty/bottom-content.vue

@@ -0,0 +1,5 @@
+<template>
+  <m-empty description="暂无数据">
+    <m-button type="primary">按钮</m-button>
+  </m-empty>
+</template>

package/docs/examples/empty/custom-image.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-empty
+    image="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
+    description="暂无数据"
+  ></m-empty>
+</template>

package/docs/examples/empty/image-size.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-empty
+    description="暂无数据"
+    :image-size="200"
+  ></m-empty>
+</template>

package/docs/examples/file-task-dialog/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <m-button @click="openFile = true"> 查看任务 </m-button>
+  <m-file-task-dialog
+    v-model="openFile"
+    :total="2"
+    :tableList="tableList"
+    @getList="getList"
+    type="article"
+    @download="handleDownload"
+    operationType="导入"
+  ></m-file-task-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const openFile = ref(false);
+const tableList = ref([
+  {
+    id: '1',
+    type: '任务1',
+    operationType: '导出',
+    updateBy: 'admin',
+    status: 'success',
+    progress: 100,
+    createTime: '2026-01-01 00:00:00',
+    endTime: '2026-01-01 01:00:00',
+    totalNum: '100',
+    successNum: '10',
+    failNum: '90',
+  },
+  {
+    id: '2',
+    type: '任务2',
+    operationType: '导出',
+    updateBy: 'admin',
+    status: 'success',
+    progress: 100,
+    createTime: '2026-01-01 00:00:00',
+    endTime: '2026-01-01 01:00:00',
+    totalNum: '100',
+    successNum: '10',
+    failNum: '90',
+  },
+]);
+const getList = (form: any) => {
+  console.log('form', form);
+};
+
+const handleDownload = () => {
+  console.log('下载模版');
+};
+</script>

package/docs/examples/form/accessibility.vue

@@ -0,0 +1,48 @@
+<template>
+  <el-form label-position="left" label-width="auto" style="max-width: 600px">
+    <el-space fill>
+      <el-alert type="info" show-icon :closable="false">
+        <p>"Full Name" label is automatically attached to the input:</p>
+      </el-alert>
+      <m-form-item label="Full Name">
+        <el-input v-model="formAccessibility.fullName" />
+      </m-form-item>
+    </el-space>
+    <el-space fill>
+      <el-alert type="info" show-icon :closable="false">
+        <p>
+          "Your Information" serves as a label for the group of inputs. <br />
+          You must specify labels on the individal inputs. Placeholders are not
+          replacements for using the "label" attribute.
+        </p>
+      </el-alert>
+      <m-form-item label="Your Information">
+        <el-row :gutter="20">
+          <el-col :span="12">
+            <el-input
+              v-model="formAccessibility.firstName"
+              aria-label="First Name"
+              placeholder="First Name"
+            />
+          </el-col>
+          <el-col :span="12">
+            <el-input
+              v-model="formAccessibility.lastName"
+              aria-label="Last Name"
+              placeholder="Last Name"
+            />
+          </el-col>
+        </el-row>
+      </m-form-item>
+    </el-space>
+  </m-form></template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue'
+
+const formAccessibility = reactive({
+  fullName: '',
+  firstName: '',
+  lastName: '',
+})
+</script>

package/docs/examples/form/alignment.vue

@@ -0,0 +1,68 @@
+<template>
+  <m-form
+    :label-position="labelPosition"
+    label-width="auto"
+    :model="formLabelAlign"
+    style="max-width: 600px"
+  >
+    <m-form-item
+      label="Form Align"
+      label-position="right"
+    >
+      <m-radio-group
+        v-model="labelPosition"
+        aria-label="label position"
+      >
+        <m-radio-button value="left">Left</m-radio-button>
+        <m-radio-button value="right">Right</m-radio-button>
+        <m-radio-button value="top">Top</m-radio-button>
+      </m-radio-group>
+    </m-form-item>
+    <m-form-item
+      label="Form Item Align"
+      label-position="right"
+    >
+      <m-radio-group
+        v-model="itemLabelPosition"
+        aria-label="item label position"
+      >
+        <m-radio-button value="">Empty</m-radio-button>
+        <m-radio-button value="left">Left</m-radio-button>
+        <m-radio-button value="right">Right</m-radio-button>
+        <m-radio-button value="top">Top</m-radio-button>
+      </m-radio-group>
+    </m-form-item>
+    <m-form-item
+      label="Name"
+      :label-position="itemLabelPosition"
+    >
+      <el-input v-model="formLabelAlign.name" />
+    </m-form-item>
+    <m-form-item
+      label="Activity zone"
+      :label-position="itemLabelPosition"
+    >
+      <el-input v-model="formLabelAlign.region" />
+    </m-form-item>
+    <m-form-item
+      label="Activity form"
+      :label-position="itemLabelPosition"
+    >
+      <el-input v-model="formLabelAlign.type" />
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import type { FormItemProps, FormProps } from 'element-plus';
+
+const labelPosition = ref<FormProps['labelPosition']>('right');
+const itemLabelPosition = ref<FormItemProps['labelPosition']>('');
+const formLabelAlign = reactive({
+  name: '',
+  region: '',
+  type: '',
+});
+</script>

package/docs/examples/form/basic-form.vue

@@ -0,0 +1,120 @@
+<template>
+  <m-form
+    :model="form"
+    label-width="auto"
+    style="max-width: 600px"
+  >
+    <m-form-item label="Activity name">
+      <el-input v-model="form.name" />
+    </m-form-item>
+    <m-form-item label="Activity zone">
+      <el-select
+        v-model="form.region"
+        placeholder="please select your zone"
+      >
+        <el-option
+          label="Zone one"
+          value="shanghai"
+        />
+        <el-option
+          label="Zone two"
+          value="beijing"
+        />
+      </el-select>
+    </m-form-item>
+    <m-form-item label="Activity time">
+      <el-col :span="11">
+        <el-date-picker
+          v-model="form.date1"
+          type="date"
+          placeholder="Pick a date"
+          style="width: 100%"
+        />
+      </el-col>
+      <el-col
+        :span="2"
+        class="text-center"
+      >
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <el-time-picker
+          v-model="form.date2"
+          placeholder="Pick a time"
+          style="width: 100%"
+        />
+      </el-col>
+    </m-form-item>
+    <m-form-item label="Instant delivery">
+      <el-switch v-model="form.delivery" />
+    </m-form-item>
+    <m-form-item label="Activity type">
+      <m-checkbox-group v-model="form.type">
+        <m-checkbox
+          value="Online activities"
+          name="type"
+        >
+          Online activities
+        </m-checkbox>
+        <m-checkbox
+          value="Promotion activities"
+          name="type"
+        >
+          Promotion activities
+        </m-checkbox>
+        <m-checkbox
+          value="Offline activities"
+          name="type"
+        >
+          Offline activities
+        </m-checkbox>
+        <m-checkbox
+          value="Simple brand exposure"
+          name="type"
+        >
+          Simple brand exposure
+        </m-checkbox>
+      </m-checkbox-group>
+    </m-form-item>
+    <m-form-item label="Resources">
+      <m-radio-group v-model="form.resource">
+        <m-radio value="Sponsor">Sponsor</m-radio>
+        <m-radio value="Venue">Venue</m-radio>
+      </m-radio-group>
+    </m-form-item>
+    <m-form-item label="Activity form">
+      <el-input
+        v-model="form.desc"
+        type="textarea"
+      />
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="onSubmit"
+        >Create</m-button
+      >
+      <m-button>Cancel</m-button>
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+// do not use same name with ref
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+});
+
+const onSubmit = () => {
+  console.log('submit!', form);
+};
+</script>