@phelan/design 0.0.1

package/docs/examples/form/validation.vue

@@ -0,0 +1,265 @@
+<template>
+  <m-form
+    ref="ruleFormRef"
+    style="max-width: 600px"
+    :model="ruleForm"
+    :rules="rules"
+    label-width="auto"
+  >
+    <m-form-item
+      label="Activity name"
+      prop="name"
+    >
+      <el-input v-model="ruleForm.name" />
+    </m-form-item>
+    <m-form-item
+      label="Activity zone"
+      prop="region"
+    >
+      <el-select
+        v-model="ruleForm.region"
+        placeholder="Activity 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 count"
+      prop="count"
+    >
+      <el-select-v2
+        v-model="ruleForm.count"
+        placeholder="Activity count"
+        :options="options"
+      />
+    </m-form-item>
+    <m-form-item
+      label="Activity time"
+      required
+    >
+      <el-col :span="11">
+        <m-form-item prop="date1">
+          <el-date-picker
+            v-model="ruleForm.date1"
+            type="date"
+            aria-label="Pick a date"
+            placeholder="Pick a date"
+            style="width: 100%"
+          />
+        </m-form-item>
+      </el-col>
+      <el-col
+        class="text-center"
+        :span="2"
+      >
+        <span class="text-gray-500">-</span>
+      </el-col>
+      <el-col :span="11">
+        <m-form-item prop="date2">
+          <el-time-picker
+            v-model="ruleForm.date2"
+            aria-label="Pick a time"
+            placeholder="Pick a time"
+            style="width: 100%"
+          />
+        </m-form-item>
+      </el-col>
+    </m-form-item>
+    <m-form-item
+      label="Instant delivery"
+      prop="delivery"
+    >
+      <el-switch v-model="ruleForm.delivery" />
+    </m-form-item>
+    <m-form-item
+      label="Activity location"
+      prop="location"
+    >
+      <el-segmented
+        v-model="ruleForm.location"
+        :options="locationOptions"
+      />
+    </m-form-item>
+    <m-form-item
+      label="Activity type"
+      prop="type"
+    >
+      <m-checkbox-group v-model="ruleForm.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"
+      prop="resource"
+    >
+      <m-radio-group v-model="ruleForm.resource">
+        <m-radio value="Sponsorship">Sponsorship</m-radio>
+        <m-radio value="Venue">Venue</m-radio>
+      </m-radio-group>
+    </m-form-item>
+    <m-form-item
+      label="Activity form"
+      prop="desc"
+    >
+      <el-input
+        v-model="ruleForm.desc"
+        type="textarea"
+      />
+    </m-form-item>
+    <m-form-item>
+      <m-button
+        type="primary"
+        @click="submitForm(ruleFormRef)"
+      >
+        Create
+      </m-button>
+      <m-button @click="resetForm(ruleFormRef)">Reset</m-button>
+    </m-form-item>
+  </m-form>
+</template>
+
+<script lang="ts" setup>
+import { reactive, ref } from 'vue';
+
+import type { FormInstance, FormRules } from 'element-plus';
+
+interface RuleForm {
+  name: string;
+  region: string;
+  count: string;
+  date1: string;
+  date2: string;
+  delivery: boolean;
+  location: string;
+  type: string[];
+  resource: string;
+  desc: string;
+}
+
+const ruleFormRef = ref<FormInstance>();
+const ruleForm = reactive<RuleForm>({
+  name: 'Hello',
+  region: '',
+  count: '',
+  date1: '',
+  date2: '',
+  delivery: false,
+  location: '',
+  type: [],
+  resource: '',
+  desc: '',
+});
+
+const locationOptions = ['Home', 'Company', 'School'];
+
+const rules = reactive<FormRules<RuleForm>>({
+  name: [
+    { required: true, message: 'Please input Activity name', trigger: 'blur' },
+    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
+  ],
+  region: [
+    {
+      required: true,
+      message: 'Please select Activity zone',
+      trigger: 'change',
+    },
+  ],
+  count: [
+    {
+      required: true,
+      message: 'Please select Activity count',
+      trigger: 'change',
+    },
+  ],
+  date1: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a date',
+      trigger: 'change',
+    },
+  ],
+  date2: [
+    {
+      type: 'date',
+      required: true,
+      message: 'Please pick a time',
+      trigger: 'change',
+    },
+  ],
+  location: [
+    {
+      required: true,
+      message: 'Please select a location',
+      trigger: 'change',
+    },
+  ],
+  type: [
+    {
+      type: 'array',
+      required: true,
+      message: 'Please select at least one activity type',
+      trigger: 'change',
+    },
+  ],
+  resource: [
+    {
+      required: true,
+      message: 'Please select activity resource',
+      trigger: 'change',
+    },
+  ],
+  desc: [{ required: true, message: 'Please input activity form', trigger: 'blur' }],
+});
+
+const submitForm = async (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      console.log('submit!');
+    } else {
+      console.log('error submit!', fields);
+    }
+  });
+};
+
+const resetForm = (formEl: FormInstance | undefined) => {
+  if (!formEl) return;
+  formEl.resetFields();
+};
+
+const options = Array.from({ length: 10000 }).map((_, idx) => ({
+  value: `${idx + 1}`,
+  label: `${idx + 1}`,
+}));
+</script>

package/docs/examples/icon/icon.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="icon-collection">
+    <div
+      v-for="(_, iconName) in Icons"
+      class="icon-item"
+      @click="handleCopy(iconName)"
+    >
+      <div>
+        <m-icon
+          size="30"
+          color="#606266"
+        >
+          <component :is="iconName"></component>
+        </m-icon>
+      </div>
+      <div>{{ iconName }}</div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import * as Icons from '@m-design/icons';
+import { ElMessage } from 'element-plus';
+
+const handleCopy = (iconName: string) => {
+  window.navigator.clipboard.writeText(`<m-icon icon="${iconName}" />`);
+  ElMessage.success('复制成功');
+};
+</script>
+
+<style lang="scss" scoped>
+.icon-collection {
+  display: flex;
+  border-top: 1px solid var(--el-border-color);
+  border-left: 1px solid var(--el-border-color);
+  flex-wrap: wrap;
+}
+.icon-item {
+  text-align: center;
+  color: var(--el-text-color-regular);
+  padding: 16px 0;
+  width: 25%;
+  height: 90px;
+  font-size: 13px;
+  border-right: 1px solid var(--el-border-color);
+  border-bottom: 1px solid var(--el-border-color);
+  transition: background-color var(--el-transition-duration);
+
+  &:hover {
+    background-color: var(--el-color-primary-light-9);
+  }
+}
+</style>

package/docs/examples/icon/index.vue

@@ -0,0 +1,7 @@
+<template>
+  <m-icon icon="Success" color="red" size="30"></m-icon>
+  <br />
+  <m-icon color="red" size="30">
+    <Error />
+  </m-icon>
+</template>

package/docs/examples/image/error.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="vp-raw">
+    <div
+      class="demo-image__error"
+      style="display: flex; gap: 8px"
+    >
+      <m-image />
+      <m-image>
+        <template #error>
+          <div class="image-viewer-slot image-slot">
+            <el-icon><Picture /></el-icon>
+          </div>
+        </template>
+      </m-image>
+      <m-image
+        :src="url"
+        :preview-src-list="srcList"
+        show-progress
+      >
+        <template #viewer-error="{ activeIndex, src }">
+          <div class="image-slot viewer-error">
+            <el-icon><Picture /></el-icon>
+            <span>
+              this is viewer-error slot. current index: {{ activeIndex }}. src:
+              {{ src }}
+            </span>
+          </div>
+        </template>
+      </m-image>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Picture } from '@element-plus/icons-vue';
+
+const srcList = [
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://errorSrc',
+];
+const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';
+</script>
+
+<style scoped>
+.demo-image__error .m-image {
+  max-width: 300px;
+  max-height: 200px;
+  width: 100%;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  font-size: 30px;
+  height: 200px;
+  background: #fff;
+}
+.image-slot .el-icon {
+  font-size: 30px;
+}
+.image-viewer-slot {
+  background: var(--el-fill-color-light);
+}
+.viewer-error {
+  color: #000;
+}
+</style>

package/docs/examples/image/index.vue

@@ -0,0 +1,47 @@
+<template>
+  <div class="vp-raw">
+    <div class="demo-image">
+      <div
+        v-for="fit in fits"
+        :key="fit"
+        class="block"
+      >
+        <span class="demonstration">{{ fit }}</span>
+        <m-image
+          style="width: 100px; height: 100px"
+          :src="url"
+          :fit="fit"
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { ImageProps } from 'element-plus';
+
+const fits = ['fill', 'contain', 'cover', 'none', 'scale-down'] as ImageProps['fit'][];
+const url = 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg';
+</script>
+
+<style scoped>
+.demo-image .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 20%;
+  min-width: 100px;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.demo-image .block:last-child {
+  border-right: none;
+}
+.demo-image .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+</style>

package/docs/examples/image/lazy.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="vp-raw">
+    <div class="demo-image__lazy">
+      <m-image
+        v-for="url in urls"
+        :key="url"
+        :src="url"
+        lazy
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const urls = [
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+];
+</script>
+
+<style scoped>
+.demo-image__lazy {
+  height: 400px;
+  overflow-y: auto;
+}
+.demo-image__lazy .m-image {
+  display: block;
+  min-height: 200px;
+  margin-bottom: 10px;
+}
+.demo-image__lazy .m-image:last-child {
+  margin-bottom: 0;
+}
+</style>

package/docs/examples/image/placeholder.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="vp-raw">
+    <div class="demo-image__placeholder">
+      <div class="block">
+        <span class="demonstration">Default</span>
+        <m-image :src="src" />
+      </div>
+      <div class="block">
+        <span class="demonstration">Custom</span>
+        <m-image :src="src">
+          <template #placeholder>
+            <div class="image-slot"> Loading<span class="dot">...</span> </div>
+          </template>
+        </m-image>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const src = 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg';
+</script>
+
+<style scoped>
+.demo-image__placeholder .block {
+  padding: 30px 0;
+  text-align: center;
+  border-right: solid 1px var(--el-border-color);
+  display: inline-block;
+  width: 49%;
+  box-sizing: border-box;
+  vertical-align: top;
+}
+.demo-image__placeholder .demonstration {
+  display: block;
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+  margin-bottom: 20px;
+}
+.demo-image__placeholder .m-image {
+  padding: 0 5px;
+  max-width: 300px;
+  max-height: 200px;
+}
+
+.image-slot {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+  background: var(--el-fill-color-light);
+  color: var(--el-text-color-secondary);
+  font-size: 14px;
+}
+.dot {
+  animation: dot 2s infinite steps(3, start);
+  overflow: hidden;
+}
+
+@keyframes dot {
+  0% {
+    width: 0;
+  }
+  100% {
+    width: 1em;
+  }
+}
+</style>

package/docs/examples/image/preview.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="vp-raw">
+    <div class="demo-image__preview">
+      <m-image
+        style="width: 100px; height: 100px"
+        :src="url"
+        :zoom-rate="1.2"
+        :max-scale="7"
+        :min-scale="0.2"
+        :preview-src-list="srcList"
+        show-progress
+        :initial-index="4"
+        fit="cover"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const url = 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg';
+const srcList = [
+  'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg',
+  'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
+  'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg',
+  'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg',
+  'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg',
+  'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
+];
+</script>
+
+<style scoped>
+.demo-image__preview .m-image {
+  width: 100%;
+  height: 200px;
+}
+</style>

package/docs/examples/import-dialog/multiple.vue

@@ -0,0 +1,35 @@
+<template>
+  <m-button @click="openFile = true"> 导入 </m-button>
+  <m-import-dialog
+    v-model="openFile"
+    :multiple="true"
+    v-model:file-list="fileList"
+    importUrl="/api-gateway/article/createImportTask"
+    @confirm="submitFileForm"
+    @download="handleDownload"
+    @cancel="handleCancel"
+    :http-request="httpRequestFun"
+  ></m-import-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const openFile = ref(false);
+const fileList = ref<any>([]);
+const submitFileForm = (formData: any) => {
+  console.log('formData', formData);
+};
+
+const handleDownload = () => {
+  console.log('下载模版');
+};
+
+const handleCancel = () => {
+  console.log('取消');
+};
+
+// 自定义事件
+const httpRequestFun = (param: any) => {
+  console.log('options', param);
+};
+</script>

package/docs/examples/import-dialog/single.vue

@@ -0,0 +1,37 @@
+<template>
+  <m-button @click="openFile = true"> 导入 </m-button>
+  <m-import-dialog
+    v-model="openFile"
+    importTemplate="dict"
+    importUrl="/api-gateway/system/dict/data/type/excel_task_status"
+    @confirm="submitFileForm"
+    @download="handleDownload"
+    @cancel="handleCancel"
+    @success="handleSuccess"
+    @error="handleError"
+  ></m-import-dialog>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+const openFile = ref(false);
+const submitFileForm = (formData: any) => {
+  console.log('formData', formData);
+};
+
+const handleDownload = () => {
+  console.log('下载模版');
+};
+
+const handleCancel = () => {
+  console.log('取消');
+};
+
+const handleSuccess = (res: any) => {
+  console.log('成功', res);
+};
+
+const handleError = (err: any) => {
+  console.log('失败', err);
+};
+</script>

package/docs/examples/independent-nav/icon-slot.vue

@@ -0,0 +1,7 @@
+<template>
+  <MIndependentNav>
+    <template #logo>
+      <MIcon icon="file"></MIcon>
+    </template>
+  </MIndependentNav>
+</template>

package/docs/examples/independent-nav/index.vue

@@ -0,0 +1,12 @@
+<template>
+  <MIndependentNav>
+    <template #default>
+      <span>This is some main info for this example...</span>
+    </template>
+
+    <template #right>
+      <MButton>Right Button 1</MButton>
+      <MButton type="primary">Right Button 2</MButton>
+    </template>
+  </MIndependentNav>
+</template>