@phelan/design 0.0.1 → 0.0.2

package/docs/examples/link/index04.vue

@@ -1,131 +0,0 @@
-<template>
-  <h5>图标默认用法</h5>
-  <div class="link-container vp-raw">
-    <m-link
-      href="https://element-plus.org"
-      target="_blank"
-      :icon="Link"
-      >跳转链接(default)</m-link
-    >
-    <m-link
-      type="primary"
-      :icon="Link"
-      >跳转链接(primary)</m-link
-    >
-    <m-link
-      type="success"
-      :icon="Upload"
-      >跳转链接(success)</m-link
-    >
-    <m-link
-      type="warning"
-      :icon="Plus"
-      >跳转链接(warning)</m-link
-    >
-    <m-link
-      type="danger"
-      :icon="Delete"
-      >跳转链接(danger)</m-link
-    >
-    <m-link
-      type="info"
-      :icon="Info"
-      >跳转链接(info)</m-link
-    >
-  </div>
-  <hr />
-  <h5>图标禁用状态</h5>
-  <div class="link-container vp-raw">
-    <m-link
-      href="https://element-plus.org"
-      target="_blank"
-      :icon="Link"
-      disabled
-      >跳转链接(default)</m-link
-    >
-    <m-link
-      type="primary"
-      :icon="Link"
-      disabled
-      >跳转链接(primary)</m-link
-    >
-    <m-link
-      type="success"
-      :icon="Upload"
-      disabled
-      >跳转链接(success)</m-link
-    >
-    <m-link
-      type="warning"
-      :icon="Plus"
-      disabled
-      >跳转链接(warning)</m-link
-    >
-    <m-link
-      type="danger"
-      :icon="Delete"
-      disabled
-      >跳转链接(danger)</m-link
-    >
-    <m-link
-      type="info"
-      :icon="Info"
-      disabled
-      >跳转链接(info)</m-link
-    >
-  </div>
-  <hr />
-  <h5>图标始终显示下划线</h5>
-  <div class="link-container vp-raw">
-    <m-link
-      href="https://element-plus.org"
-      target="_blank"
-      :icon="Link"
-      :underline="'always'"
-      >跳转链接(default)</m-link
-    >
-    <m-link
-      type="primary"
-      :icon="Link"
-      :underline="'always'"
-      >跳转链接(primary)</m-link
-    >
-    <m-link
-      type="success"
-      :icon="Upload"
-      :underline="'always'"
-      >跳转链接(success)</m-link
-    >
-    <m-link
-      type="warning"
-      :icon="Plus"
-      :underline="'always'"
-      >跳转链接(warning)</m-link
-    >
-    <m-link
-      type="danger"
-      :icon="Delete"
-      :underline="'always'"
-      >跳转链接(danger)</m-link
-    >
-    <m-link
-      type="info"
-      :icon="Info"
-      :underline="'always'"
-      >跳转链接(info)</m-link
-    >
-  </div>
-</template>
-<script setup lang="ts">
-import { Link } from '@element-plus/icons-vue';
-import { Upload, Plus, Delete, Info } from '@m-design/icons';
-</script>
-<style scoped>
-.link-container {
-  display: flex;
-  gap: 16px;
-}
-h5 {
-  margin-bottom: 12px;
-}
-</style>

package/docs/examples/mention/index.vue

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

package/docs/examples/message/closeable.vue

@@ -1,92 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <!-- <m-button
-      :plain="true"
-      @click="open6"
-    >
-      Primary
-    </m-button> -->
-    <m-button
-      :plain="true"
-      @click="open2"
-    >
-      Success
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open3"
-    >
-      Warning
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open1"
-    >
-      Info
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open4"
-    >
-      Error
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open5"
-    >
-      Won't close automatically
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MMessage } from '@m-design/m-design';
-
-const open1 = () => {
-  MMessage({
-    showClose: true,
-    message: 'This is a info message.',
-  });
-};
-const open2 = () => {
-  MMessage({
-    showClose: true,
-    message: 'Congrats, this is a success message.',
-    type: 'success',
-  });
-};
-const open3 = () => {
-  MMessage({
-    showClose: true,
-    message: 'Warning, this is a warning message.',
-    type: 'warning',
-  });
-};
-const open4 = () => {
-  MMessage({
-    showClose: true,
-    message: 'Oops, this is a error message.',
-    type: 'error',
-  });
-};
-const open5 = () => {
-  MMessage({
-    showClose: true,
-    message: 'Oops, this is a message that does not automatically close.',
-    duration: 0,
-  });
-};
-const open6 = () => {
-  MMessage({
-    showClose: true,
-    message: 'This is a primary message.',
-    type: 'primary',
-  });
-};
-</script>
-
-<style scoped>
-.m-button + .m-button {
-  margin-left: 8px;
-}
-</style>

package/docs/examples/message/grouping.vue

@@ -1,22 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button
-      :plain="true"
-      @click="open"
-    >
-      Show message
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MMessage } from '@m-design/m-design';
-
-const open = () => {
-  MMessage({
-    message: 'This is a message.',
-    grouping: true,
-    type: 'success',
-  });
-};
-</script>

package/docs/examples/message/html.vue

@@ -1,21 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button
-      :plain="true"
-      @click="openHTML"
-    >
-      Use HTML string
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MMessage } from '@m-design/m-design';
-
-const openHTML = () => {
-  MMessage({
-    dangerouslyUseHTMLString: true,
-    message: '<strong>This is <i>HTML</i> string</strong>',
-  });
-};
-</script>

package/docs/examples/message/index.vue

@@ -1,34 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button
-      :plain="true"
-      @click="open"
-    >
-      Show message
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="openVn"
-    >
-      VNode
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { h } from 'vue';
-import { MMessage } from '@m-design/m-design';
-
-const open = () => {
-  MMessage('This is a message.');
-};
-
-const openVn = () => {
-  MMessage({
-    message: h('p', { style: 'line-height: 1; font-size: 14px' }, [
-      h('span', null, 'Message can be '),
-      h('i', { style: 'color: teal' }, 'VNode'),
-    ]),
-  });
-};
-</script>

package/docs/examples/message/placement.vue

@@ -1,96 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <m-button
-      :plain="true"
-      @click="openMsg()"
-    >
-      Top
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="openMsg('top-left')"
-    >
-      Top Left
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="openMsg('top-right')"
-    >
-      Top Right
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="openMsg('bottom')"
-    >
-      Bottom
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="openMsg('bottom-left')"
-    >
-      Bottom Left
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="openMsg('bottom-right')"
-    >
-      Bottom Right
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MMessage } from '@m-design/m-design';
-import type { MessagePlacement } from 'element-plus';
-
-let topCount = 0;
-let bottomCount = 0;
-let topLeftCount = 0;
-let topRightCount = 0;
-let bottomLeftCount = 0;
-let bottomRightCount = 0;
-
-const openMsg = (placement: MessagePlacement = 'top') => {
-  let count = 0;
-  let type: 'success' | 'warning' | 'info' | 'error' | 'primary' = 'success';
-
-  switch (placement) {
-    case 'top':
-      count = ++topCount;
-      type = 'success';
-      break;
-    case 'bottom':
-      count = ++bottomCount;
-      type = 'warning';
-      break;
-    case 'top-left':
-      count = ++topLeftCount;
-      type = 'info';
-      break;
-    case 'top-right':
-      count = ++topRightCount;
-      type = 'primary';
-      break;
-    case 'bottom-left':
-      count = ++bottomLeftCount;
-      type = 'warning';
-      break;
-    case 'bottom-right':
-      count = ++bottomRightCount;
-      type = 'error';
-      break;
-  }
-
-  MMessage({
-    message: `This is a message from the ${placement} ${count}`,
-    type,
-    placement,
-  });
-};
-</script>
-
-<style scoped>
-.m-button + .m-button {
-  margin-left: 8px;
-}
-</style>

package/docs/examples/message/plain.vue

@@ -1,80 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <!-- <m-button
-      :plain="true"
-      @click="open5"
-    >
-      Primary
-    </m-button> -->
-    <m-button
-      :plain="true"
-      @click="open1"
-    >
-      Success
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open2"
-    >
-      Warning
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open3"
-    >
-      Info
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open4"
-    >
-      Error
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MMessage } from '@m-design/m-design';
-
-const open1 = () => {
-  MMessage({
-    message: 'Congrats, this is a success message.',
-    type: 'success',
-    plain: true,
-  });
-};
-const open2 = () => {
-  MMessage({
-    message: 'Warning, this is a warning message.',
-    type: 'warning',
-    plain: true,
-  });
-};
-const open3 = () => {
-  MMessage({
-    message: 'This is a info message.',
-    type: 'info',
-    plain: true,
-  });
-};
-const open4 = () => {
-  MMessage({
-    message: 'Oops, this is a error message.',
-    type: 'error',
-    plain: true,
-  });
-};
-const open5 = () => {
-  MMessage({
-    message: 'This is a primary message.',
-    type: 'primary',
-    plain: true,
-  });
-};
-</script>
-
-<style scoped>
-.m-button + .m-button {
-  margin-left: 8px;
-}
-</style>

package/docs/examples/message/types.vue

@@ -1,66 +0,0 @@
-<template>
-  <div class="vp-raw">
-    <!-- <m-button
-      :plain="true"
-      @click="open5"
-    >
-      Primary
-    </m-button> -->
-    <m-button
-      :plain="true"
-      @click="open2"
-    >
-      Success
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open3"
-    >
-      Warning
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open1"
-    >
-      Info
-    </m-button>
-    <m-button
-      :plain="true"
-      @click="open4"
-    >
-      Error
-    </m-button>
-  </div>
-</template>
-
-<script lang="ts" setup>
-import { MMessage } from '@m-design/m-design';
-
-const open1 = () => {
-  MMessage('This is a info message.');
-};
-const open2 = () => {
-  MMessage({
-    message: 'Congrats, this is a success message.',
-    type: 'success',
-  });
-};
-const open3 = () => {
-  MMessage({
-    message: 'Warning, this is a warning message.',
-    type: 'warning',
-  });
-};
-const open4 = () => {
-  MMessage.error('Oops, this is a error message.');
-};
-// const open5 = () => {
-// MMessage.primary('This is a primary message.');
-// };
-</script>
-
-<style scoped>
-.m-button + .m-button {
-  margin-left: 8px;
-}
-</style>

package/docs/examples/nav/index.vue

@@ -1,20 +0,0 @@
-<template>
-  <m-nav :moreLevel="moreLevel">
-    <m-button>新增</m-button>
-  </m-nav>
-  <!-- <m-nav></m-nav> -->
-</template>
-<script setup lang="ts">
-const moreLevel = [
-  {
-    title: '销售价格',
-  },
-  {
-    path: '/retailPriceApprove',
-    title: '销售价格审批',
-  },
-  {
-    title: '新增',
-  },
-];
-</script>

package/docs/examples/pagination/background-color.vue

@@ -1,17 +0,0 @@
-<template>
-  <m-pagination
-    v-model:current-page="queryParams.pageNum"
-    v-model:page-size="queryParams.pageSize"
-    :background="false"
-    layout="prev, pager, next"
-    :total="200"
-  ></m-pagination>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const queryParams = ref({
-  pageNum: 1,
-  pageSize: 20,
-});
-</script>

package/docs/examples/pagination/basic.vue

@@ -1,43 +0,0 @@
-<template>
-  <span>少量分页</span>
-  <m-pagination
-    class="bottom-padding"
-    :total="total2"
-  ></m-pagination>
-
-  <span>较多分页（超过7）</span>
-  <m-pagination
-    class="bottom-padding"
-    :total="200"
-  ></m-pagination>
-
-  <span>带->的分页</span>
-  <m-pagination
-    :total="total"
-    v-model:current-page="queryParams.pageNum"
-    v-model:page-size="queryParams.pageSize"
-    :layout="layout"
-    @change="getList"
-  ></m-pagination>
-</template>
-
-<script setup lang="ts">
-import { ref } from 'vue';
-const total = 100;
-const total2 = 50;
-
-const queryParams = ref({
-  pageNum: 1,
-  pageSize: 10,
-});
-const layout = 'sizes, prev, pager, next, jumper, ->, total';
-
-const getList = () => {
-  console.log(queryParams.value);
-};
-</script>
-<style lang="scss" scoped>
-.bottom-padding {
-  padding-bottom: 12px;
-}
-</style>

package/docs/examples/pagination/disabled.vue

@@ -1,17 +0,0 @@
-<template>
-  <m-pagination
-    v-model:current-page="queryParams.pageNum"
-    v-model:page-size="queryParams.pageSize"
-    disabled
-    layout="prev, pager, next"
-    :total="200"
-  ></m-pagination>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const queryParams = ref({
-  pageNum: 1,
-  pageSize: 20,
-});
-</script>

package/docs/examples/pagination/more.vue

@@ -1,43 +0,0 @@
-<template>
-  <m-pagination
-    v-model:current-page="queryParams.pageNum"
-    v-model:page-size="queryParams.pageSize"
-    :total="200"
-    @change="getList"
-    @prev-click="handlePrevClick"
-    @next-click="handleBextClick"
-    @size-change="handleSizeChange"
-    @current-change="handleCurrentChange"
-    :page-sizes="pageSizes"
-  ></m-pagination>
-</template>
-<script setup lang="ts">
-import { ref } from 'vue';
-
-const queryParams = ref({
-  pageNum: 1,
-  pageSize: 20,
-});
-
-const pageSizes = ref([10, 50, 100, 200]);
-
-const getList = () => {
-  console.log(queryParams.value);
-};
-
-const handlePrevClick = () => {
-  console.log('handlePrevClick');
-};
-
-const handleBextClick = () => {
-  console.log('handleBextClick');
-};
-
-const handleSizeChange = (val: number) => {
-  console.log('handleSizeChange', val);
-};
-
-const handleCurrentChange = (val: number) => {
-  console.log('handleCurrentChange', val);
-};
-</script>