@phelan/design 0.0.1

package/docs/examples/dialog/customization-content.vue

@@ -0,0 +1,129 @@
+<template>
+  <m-button
+    plain
+    @click="dialogTableVisible = true"
+  >
+    Click to open the Dialog
+  </m-button>
+  <m-dialog
+    v-model="dialogTableVisible"
+    title="Tips"
+    size="big"
+    width="1200"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <h1>test</h1>
+    <template #scroll>
+      <m-table :data="gridData">
+        <m-table-column
+          property="date"
+          label="Date"
+          width="150"
+        />
+        <m-table-column
+          property="name"
+          label="Name"
+          width="200"
+        />
+        <m-table-column
+          property="address"
+          label="Address"
+        />
+      </m-table>
+    </template>
+    <template #footer>
+      <div class="dialog-footer">
+        <m-button @click="dialogTableVisible = false">Cancel</m-button>
+        <m-button
+          type="primary"
+          @click="dialogTableVisible = false"
+        >
+          Confirm
+        </m-button>
+      </div>
+    </template>
+  </m-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const gridData = [
+  {
+    date: '2016-05-02',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-04',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-01',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+  {
+    date: '2016-05-03',
+    name: 'John Smith',
+    address: 'No.1518,  Jinshajiang Road, Putuo District',
+  },
+];
+const dialogTableVisible = ref(false);
+
+const handleSubmit = () => {
+  dialogTableVisible.value = false;
+};
+
+const handleCancel = () => {
+  dialogTableVisible.value = false;
+};
+</script>
+<style scoped>
+/* 兼容文档table样式 */
+:deep(.el-table__header-wrapper) table,
+:deep(.el-table__body-wrapper) table {
+  margin: 0;
+}
+</style>

package/docs/examples/dialog/customization-header.vue

@@ -0,0 +1,60 @@
+<template>
+  <m-button
+    plain
+    @click="visible = true"
+  >
+    Open Dialog with customized header
+  </m-button>
+
+  <m-dialog
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+    v-model="visible"
+    :show-close="false"
+    width="500"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <div class="my-header">
+        <h4
+          style="margin: 0"
+          :id="titleId"
+          :class="titleClass"
+          >This is a custom header!</h4
+        >
+        <m-button
+          type="danger"
+          @click="close"
+        >
+          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+          Close
+        </m-button>
+      </div>
+    </template>
+    This is dialog content.
+  </m-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { CircleCloseFilled } from '@element-plus/icons-vue';
+
+const visible = ref(false);
+
+const handleSubmit = () => {
+  visible.value = false;
+};
+
+const handleCancel = () => {
+  visible.value = false;
+};
+</script>
+
+<style scoped>
+.my-header {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  gap: 16px;
+}
+</style>

package/docs/examples/dialog/msg-dialog.vue

@@ -0,0 +1,63 @@
+<template>
+  <m-button
+    plain
+    @click="handleOpen()"
+  >
+    open
+  </m-button>
+  <m-button
+    plain
+    @click="handleOpen('info')"
+  >
+    open info
+  </m-button>
+  <m-button
+    plain
+    @click="handleOpen('warning')"
+  >
+    open warning
+  </m-button>
+  <m-button
+    plain
+    @click="handleOpen('error')"
+  >
+    open error
+  </m-button>
+  <m-button
+    plain
+    @click="handleOpen('success')"
+  >
+    open success
+  </m-button>
+</template>
+
+<script lang="ts" setup>
+import { MMessageDialog } from '@m-design/m-design';
+
+const handleOpen = (type?: 'info' | 'success' | 'warning' | 'error' | undefined) => {
+  // MMessageDialog('内容', '标题', {
+  //   type,
+  //   width: '420',
+  //   confirmButtonText: 'Submit',
+  //   cancelButtonText: 'Cancel',
+  // })
+  //   .then(() => {
+  //     console.log('success');
+  //   })
+  //   .catch(() => {
+  //     console.log('error');
+  //   });
+
+  MMessageDialog.confirm('内容', '标题', {
+    type,
+    confirmButtonText: 'Submit',
+    cancelButtonText: 'Cancel',
+  })
+    .then(() => {
+      console.log('success');
+    })
+    .catch(() => {
+      console.log('error');
+    });
+};
+</script>

package/docs/examples/dialog/nested-dialog.vue

@@ -0,0 +1,43 @@
+<template>
+  <m-button
+    plain
+    @click="outerVisible = true"
+  >
+    Open the outer Dialog
+  </m-button>
+
+  <m-dialog
+    v-model="outerVisible"
+    title="Outer Dialog"
+    width="800"
+  >
+    <span>This is the outer Dialog</span>
+    <m-dialog
+      v-model="innerVisible"
+      width="500"
+      title="Inner Dialog"
+      :show-default-footer="false"
+      append-to-body
+    >
+      <span>This is the inner Dialog</span>
+    </m-dialog>
+    <template #footer>
+      <div class="dialog-footer">
+        <m-button @click="outerVisible = false">Cancel</m-button>
+        <m-button
+          type="primary"
+          @click="innerVisible = true"
+        >
+          Open the inner Dialog
+        </m-button>
+      </div>
+    </template>
+  </m-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const outerVisible = ref(false);
+const innerVisible = ref(false);
+</script>

package/docs/examples/dialog/title-icon.vue

@@ -0,0 +1,32 @@
+<template>
+  <m-button
+    plain
+    @click="dialogVisible = true"
+  >
+    Click to open the Dialog
+  </m-button>
+
+  <m-dialog
+    v-model="dialogVisible"
+    title="Tips"
+    width="420"
+    type="info"
+    @submit="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <span>This is a message</span>
+  </m-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const dialogVisible = ref(false);
+
+const handleSubmit = () => {
+  console.log('handleSubmit');
+};
+
+const handleCancel = () => {
+  console.log('handleCancel');
+};
+</script>

package/docs/examples/drawer/custom-content.vue

@@ -0,0 +1,182 @@
+<template>
+  <m-button
+    text
+    @click="table = true"
+  >
+    Open Drawer with nested table
+  </m-button>
+  <m-button
+    text
+    @click="dialog = true"
+  >
+    Open Drawer with nested form
+  </m-button>
+  <m-drawer
+    v-model="table"
+    title="I have a nested table inside!"
+    direction="rtl"
+    size="50%"
+  >
+    <el-table :data="gridData">
+      <el-table-column
+        property="date"
+        label="Date"
+        width="150"
+      />
+      <el-table-column
+        property="name"
+        label="Name"
+        width="200"
+      />
+      <el-table-column
+        property="address"
+        label="Address"
+      />
+    </el-table>
+  </m-drawer>
+
+  <m-drawer
+    v-model="dialog"
+    title="I have a nested form inside!"
+    :before-close="handleClose"
+    direction="ltr"
+    class="demo-drawer"
+  >
+    <div class="demo-drawer__content">
+      <el-form :model="form">
+        <el-form-item
+          label="Name"
+          :label-width="formLabelWidth"
+        >
+          <el-input
+            v-model="form.name"
+            autocomplete="off"
+          />
+        </el-form-item>
+        <el-form-item
+          label="Area"
+          :label-width="formLabelWidth"
+        >
+          <el-select
+            v-model="form.region"
+            placeholder="Please select activity area"
+          >
+            <el-option
+              label="Area1"
+              value="shanghai"
+            />
+            <el-option
+              label="Area2"
+              value="beijing"
+            />
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <div class="demo-drawer__footer">
+        <m-button @click="cancelForm">Cancel</m-button>
+        <m-button
+          type="primary"
+          :loading="loading"
+          @click="onClick"
+        >
+          {{ loading ? 'Submitting ...' : 'Submit' }}
+        </m-button>
+      </div>
+    </div>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+import { ElMessageBox } from 'element-plus';
+
+const formLabelWidth = '80px';
+let timer;
+
+const table = ref(false);
+const dialog = ref(false);
+const loading = ref(false);
+
+const form = reactive({
+  name: '',
+  region: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  type: [],
+  resource: '',
+  desc: '',
+});
+
+const gridData = [
+  {
+    date: '2016-05-02',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+  {
+    date: '2016-05-03',
+    name: 'Peter Parker',
+    address: 'Queens, New York City',
+  },
+];
+
+const onClick = () => {
+  loading.value = true;
+  setTimeout(() => {
+    loading.value = false;
+    dialog.value = false;
+  }, 400);
+};
+
+const handleClose = (done: () => void) => {
+  if (loading.value) {
+    return;
+  }
+  ElMessageBox.confirm('Do you want to submit?')
+    .then(() => {
+      loading.value = true;
+      timer = setTimeout(() => {
+        done();
+        // 动画关闭需要一定的时间
+        setTimeout(() => {
+          loading.value = false;
+        }, 400);
+      }, 2000);
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+
+const cancelForm = () => {
+  loading.value = false;
+  dialog.value = false;
+  clearTimeout(timer);
+};
+</script>
+
+<style scoped>
+.demo-drawer__content {
+  flex: 1;
+  padding: 20px;
+}
+
+.demo-drawer__footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  padding-top: 20px;
+  border-top: 1px solid #e4e7ed;
+}
+</style>

package/docs/examples/drawer/custom-header.vue

@@ -0,0 +1,30 @@
+<template>
+  <m-button @click="visible = true"> Open Drawer with customized header </m-button>
+  <m-drawer
+    v-model="visible"
+    :show-close="false"
+  >
+    <template #header="{ close, titleId, titleClass }">
+      <h4
+        :id="titleId"
+        :class="titleClass"
+        >This is a custom header!</h4
+      >
+      <m-button
+        type="danger"
+        @click="close"
+      >
+        <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
+        Close
+      </m-button>
+    </template>
+    This is drawer content.
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { CircleCloseFilled } from '@element-plus/icons-vue';
+
+const visible = ref(false);
+</script>

package/docs/examples/drawer/index.vue

@@ -0,0 +1,101 @@
+<template>
+  <m-radio-group v-model="direction">
+    <m-radio value="ltr">left to right</m-radio>
+    <m-radio value="rtl">right to left</m-radio>
+    <m-radio value="ttb">top to bottom</m-radio>
+    <m-radio value="btt">bottom to top</m-radio>
+  </m-radio-group>
+
+  <m-button
+    type="primary"
+    style="margin-left: 16px"
+    @click="drawer = true"
+  >
+    open
+  </m-button>
+  <m-button
+    type="primary"
+    style="margin-left: 16px"
+    @click="drawer2 = true"
+  >
+    with footer
+  </m-button>
+
+  <m-drawer
+    v-model="drawer"
+    title="I am the title"
+    :direction="direction"
+    :before-close="handleClose"
+  >
+    <span>Hi, there!</span>
+  </m-drawer>
+  <m-drawer
+    v-model="drawer2"
+    :direction="direction"
+  >
+    <template #header>
+      <h4>set title by slot</h4>
+    </template>
+    <template #default>
+      <div>
+        <m-radio
+          v-model="radio1"
+          value="Option 1"
+          size="large"
+        >
+          Option 1
+        </m-radio>
+        <m-radio
+          v-model="radio1"
+          value="Option 2"
+          size="large"
+        >
+          Option 2
+        </m-radio>
+      </div>
+    </template>
+    <template #footer>
+      <div style="flex: auto">
+        <m-button @click="cancelClick">cancel</m-button>
+        <m-button
+          type="primary"
+          @click="confirmClick"
+          >confirm</m-button
+        >
+      </div>
+    </template>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import { ElMessageBox } from 'element-plus';
+
+import type { DrawerProps } from 'element-plus';
+
+const drawer = ref(false);
+const drawer2 = ref(false);
+const direction = ref<DrawerProps['direction']>('rtl');
+const radio1 = ref('Option 1');
+const handleClose = (done: () => void) => {
+  ElMessageBox.confirm('Are you sure you want to close this?')
+    .then(() => {
+      done();
+    })
+    .catch(() => {
+      // catch error
+    });
+};
+function cancelClick() {
+  drawer2.value = false;
+}
+function confirmClick() {
+  ElMessageBox.confirm(`Are you confirm to chose ${radio1.value} ?`)
+    .then(() => {
+      drawer2.value = false;
+    })
+    .catch(() => {
+      // catch error
+    });
+}
+</script>

package/docs/examples/drawer/modal.vue

@@ -0,0 +1,40 @@
+<template>
+  <m-button
+    plain
+    @click="drawerVisible = true"
+  >
+    Open the modal Drawer
+  </m-button>
+
+  <m-drawer
+    v-model="drawerVisible"
+    :modal="false"
+  >
+    <span>It's a modal Drawer</span>
+    <template #footer>
+      <div class="drawer-footer">
+        <m-button @click="drawerVisible = false">Cancel</m-button>
+        <m-button
+          type="primary"
+          @click="drawerVisible = false"
+        >
+          Confirm
+        </m-button>
+      </div>
+    </template>
+  </m-drawer>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const drawerVisible = ref(false);
+</script>
+
+<style scoped>
+.drawer-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>