@phelan/design 0.0.1

package/docs/examples/button/demo5.vue

@@ -0,0 +1,46 @@
+<template>
+  <m-button type="primary" loading>Loading</m-button>
+  <m-button type="primary" :loading-icon="Eleme" loading>Loading</m-button>
+  <m-button type="primary" loading>
+    <template #loading>
+      <div class="custom-loading">
+        <svg class="circular" viewBox="-10, -10, 50, 50">
+          <path
+            class="path"
+            d="
+            M 30 15
+            L 28 17
+            M 25.61 25.61
+            A 15 15, 0, 0, 1, 15 30
+            A 15 15, 0, 1, 1, 27.99 7.5
+            L 15 15
+          "
+            style="stroke-width: 4px; fill: rgba(0, 0, 0, 0)"
+          />
+        </svg>
+      </div>
+    </template>
+    Loading
+  </m-button>
+</template>
+
+<script lang="ts" setup>
+import { Eleme } from '@element-plus/icons-vue';
+</script>
+
+<style scoped>
+.m-button .custom-loading .circular {
+  margin-right: 6px;
+  width: 18px;
+  height: 18px;
+  animation: loading-rotate 2s linear infinite;
+}
+.m-button .custom-loading .circular .path {
+  animation: loading-dash 1.5s ease-in-out infinite;
+  stroke-dasharray: 90, 150;
+  stroke-dashoffset: 0;
+  stroke-width: 2;
+  stroke: var(--m-button-text-color);
+  stroke-linecap: round;
+}
+</style>

package/docs/examples/button/demo6.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="flex flex-wrap items-center mb-4">
+    <m-button size="large">Large</m-button>
+    <m-button>Default</m-button>
+    <!-- <m-button size="small">Small</m-button> -->
+    <m-button size="large" :icon="Search">Search</m-button>
+    <m-button :icon="Search">Search</m-button>
+    <!-- <m-button size="small" :icon="Search">Search</m-button> -->
+  </div>
+  <div class="flex flex-wrap items-center mb-4">
+    <m-button type="primary" size="large">Large</m-button>
+    <m-button type="primary">Default</m-button>
+    <!-- <m-button type="primary" size="small">Small</m-button> -->
+    <m-button type="primary" size="large" :icon="Search">Search</m-button>
+    <m-button type="primary" :icon="Search">Search</m-button>
+    <!-- <m-button type="primary" size="small" :icon="Search">Search</m-button> -->
+  </div>
+  <!-- <div class="flex flex-wrap items-center mb-4">
+    <m-button size="large" round>Large</m-button>
+    <m-button round>Default</m-button>
+    <m-button size="small" round>Small</m-button>
+    <m-button size="large" :icon="Search" round>Search</m-button>
+    <m-button :icon="Search" round>Search</m-button>
+    <m-button size="small" :icon="Search" round>Search</m-button>
+  </div> -->
+  <div class="flex flex-wrap items-center">
+    <m-button :icon="Search" size="large" circle />
+    <m-button :icon="Search" circle />
+    <!-- <m-button :icon="Search" size="small" circle /> -->
+  </div>
+</template>
+
+<script setup lang="ts">
+import { Search } from '@element-plus/icons-vue';
+</script>

package/docs/examples/calendar/calendar01.vue

@@ -0,0 +1,46 @@
+<template>
+  <m-calendar
+    class="calendar"
+    v-model="value"
+  ></m-calendar>
+</template>
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(new Date());
+</script>
+<style>
+.calendar table {
+  display: table;
+  box-sizing: border-box;
+  width: 100%;
+  height: 100%;
+}
+
+.calendar table thead th {
+  display: table-cell;
+  vertical-align: inherit;
+  font-weight: bold;
+  text-align: -internal-center;
+  unicode-bidi: isolate;
+  border: none;
+  background-color: transparent;
+  text-align: center;
+}
+
+.calendar table tbody tr {
+  background-color: transparent !important;
+  border: none !important;
+}
+
+.calendar table tbody td {
+  padding: 0;
+  text-align: center;
+  border: 1px solid #e6ebf4 !important;
+  height: var(--el-calendar-cell-width);
+}
+
+.calendar table tbody td.is-selected {
+  border: 2px solid #0d3a93 !important;
+}
+</style>

package/docs/examples/calendar/calendar02.vue

@@ -0,0 +1,16 @@
+<template>
+  <m-calendar class="calendar">
+    <template #date-cell="{ data }">
+      <div :class="data.isSelected ? 'is-selected' : ''">
+        {{ data.day.split('-').slice(1).join('-') }}
+        {{ data.isSelected ? '✔️' : '' }}
+      </div>
+    </template>
+  </m-calendar>
+</template>
+
+<style>
+.is-selected {
+  color: #1989fa;
+}
+</style>

package/docs/examples/calendar/calendar03.vue

@@ -0,0 +1,6 @@
+<template>
+  <m-calendar
+    class="calendar"
+    :range="[new Date(2019, 2, 4), new Date(2019, 2, 24)]"
+  />
+</template>

package/docs/examples/calendar/calendar04.vue

@@ -0,0 +1,54 @@
+<template>
+  <m-calendar
+    ref="calendar"
+    class="calendar"
+  >
+    <template #header="{ date }">
+      <span>Custom header content</span>
+      <span>{{ date }}</span>
+      <m-button-group>
+        <m-button
+          size="small"
+          @click="selectDate('prev-year')"
+        >
+          Previous Year
+        </m-button>
+        <m-button
+          size="small"
+          @click="selectDate('prev-month')"
+        >
+          Previous Month
+        </m-button>
+        <m-button
+          size="small"
+          @click="selectDate('today')"
+          >Today</m-button
+        >
+        <m-button
+          size="small"
+          @click="selectDate('next-month')"
+        >
+          Next Month
+        </m-button>
+        <m-button
+          size="small"
+          @click="selectDate('next-year')"
+        >
+          Next Year
+        </m-button>
+      </m-button-group>
+    </template>
+  </m-calendar>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { CalendarDateType, CalendarInstance } from 'element-plus';
+
+const calendar = ref<CalendarInstance>();
+const selectDate = (val: CalendarDateType) => {
+  if (!calendar.value) return;
+  calendar.value.selectDate(val);
+};
+</script>

package/docs/examples/calendar/calendar05.vue

@@ -0,0 +1,36 @@
+<template>
+  <m-calendar
+    style="height: 800px"
+    class="calendar"
+    :tasks="tasks"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { Task } from '@m-design/m-design/calendar/src/calendar';
+
+const tasks = ref<Task[]>([
+  {
+    id: 1,
+    name: '任务1',
+    startTime: '2025-12-10 09:00',
+    endTime: '2025-12-20 18:00',
+  },
+  {
+    id: 2,
+    name: '任务2',
+    startTime: '2025-12-12 09:30',
+    endTime: '2025-12-23 18:30',
+  },
+  {
+    id: 11,
+    name: '任务11',
+    startTime: '2025-12-02 11:00',
+    endTime: '2025-12-02 11:00',
+    brandColor: '#FF6200',
+    bgColor: '#FFF1E5',
+  },
+]);
+</script>
+<style></style>

package/docs/examples/calendar/calendar06.vue

@@ -0,0 +1,53 @@
+<template>
+  <m-calendar
+    style="height: 800px"
+    class="calendar"
+    :tasks="tasks"
+  >
+    <template #task-popover="{ day, task }">
+      <div class="task-item">
+        <div
+          class="task-item-day"
+          v-text="task.day"
+        ></div>
+        <div
+          class="task-item-name"
+          v-text="task.name"
+        ></div>
+        <div
+          class="task-item-time"
+          v-text="task.startTime + ' - ' + task.endTime"
+        ></div>
+      </div>
+    </template>
+  </m-calendar>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { Task } from '@m-design/m-design/calendar/src/calendar';
+
+const tasks = ref<Task[]>([
+  {
+    id: 1,
+    name: '任务1',
+    startTime: '2025-12-10 09:00',
+    endTime: '2025-12-20 18:00',
+  },
+  {
+    id: 2,
+    name: '任务2',
+    startTime: '2025-12-12 09:30',
+    endTime: '2025-12-23 18:30',
+  },
+  {
+    id: 11,
+    name: '任务11',
+    startTime: '2025-12-02 11:00',
+    endTime: '2025-12-02 11:00',
+    brandColor: '#FF6200',
+    bgColor: '#FFF1E5',
+  },
+]);
+</script>
+<style></style>

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

@@ -0,0 +1,7 @@
+<template>
+  <m-card>
+    <template #default>
+      <div>Card content</div>
+    </template>
+  </m-card>
+</template>

package/docs/examples/card/card-title.vue

@@ -0,0 +1,6 @@
+<template>
+  <h3>默认样式</h3>
+  <m-title>title</m-title>
+  <h3>副标题样式</h3>
+  <m-title :sub="true">title</m-title>
+</template>

package/docs/examples/card/collapsible-card.vue

@@ -0,0 +1,26 @@
+<template>
+  <h3>默认折叠</h3>
+  <m-card
+    title="Card title"
+    :collapsible="true"
+  >
+    <template #default>
+      <div>Card content</div>
+    </template>
+  </m-card>
+  <h3>自定义折叠</h3>
+  <m-card
+    title="Card title"
+    :collapsible="true"
+  >
+    <template #extra>
+      <m-icon
+        icon="Edit"
+        size="20"
+      />
+    </template>
+    <template #default>
+      <div>Card content</div>
+    </template>
+  </m-card>
+</template>

package/docs/examples/card/title-card.vue

@@ -0,0 +1,32 @@
+<template>
+  <h3>默认标题样式</h3>
+  <m-card title="Card title">
+    <template #default>
+      <div>Card content</div>
+    </template>
+  </m-card>
+  <h3>副标题样式</h3>
+  <m-card
+    title="Card title"
+    :sub="true"
+  >
+    <template #default>
+      <div>Card content</div>
+    </template>
+  </m-card>
+  <h3>自定义标题</h3>
+  <m-card>
+    <template #title>
+      <div style="display: flex; align-items: center">
+        <span>Custom title</span>
+        <m-icon
+          icon="Search"
+          size="20"
+        />
+      </div>
+    </template>
+    <template #default>
+      <div>Card content</div>
+    </template>
+  </m-card>
+</template>

package/docs/examples/carousel/index.vue

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

package/docs/examples/cascader/clearable.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="vp-raw">
+    <m-cascader
+      v-model="value"
+      :options="options"
+      placeholder="请选择"
+      style="width: 240px"
+      clearable
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(['zujian', 'form', 'cascader']);
+
+const options = [
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [
+          {
+            value: 'yizhi',
+            label: '一致',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器',
+          },
+        ],
+      },
+    ],
+  },
+];
+</script>

package/docs/examples/cascader/collapse-tags.vue

@@ -0,0 +1,84 @@
+<template>
+  <div class="vp-raw">
+    <m-cascader
+      v-model="value"
+      :options="options"
+      placeholder="请选择"
+      style="width: 300px"
+      :props="{ multiple: true }"
+      collapse-tags
+      collapse-tags-tooltip
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref([]);
+
+const options = [
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [
+          {
+            value: 'yizhi',
+            label: '一致',
+          },
+          {
+            value: 'fankui',
+            label: '反馈',
+          },
+          {
+            value: 'xiaolv',
+            label: '效率',
+          },
+          {
+            value: 'kekong',
+            label: '可控',
+          },
+        ],
+      },
+      {
+        value: 'daohang',
+        label: '导航',
+        children: [
+          {
+            value: 'cexiangdaohang',
+            label: '侧向导航',
+          },
+          {
+            value: 'dingbudaohang',
+            label: '顶部导航',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局',
+          },
+          {
+            value: 'color',
+            label: 'Color 色彩',
+          },
+        ],
+      },
+    ],
+  },
+];
+</script>

package/docs/examples/cascader/disabled-select.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="vp-raw">
+    <m-cascader
+      v-model="value"
+      :options="options"
+      placeholder="请选择"
+      style="width: 240px"
+      disabled
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref([]);
+
+const options = [
+  {
+    value: 'zhinan',
+    label: '指南',
+    children: [
+      {
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [
+          {
+            value: 'yizhi',
+            label: '一致',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'form',
+        label: 'Form',
+        children: [
+          {
+            value: 'cascader',
+            label: 'Cascader 级联选择器',
+          },
+        ],
+      },
+    ],
+  },
+];
+</script>

package/docs/examples/cascader/disabled.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="vp-raw">
+    <m-cascader
+      v-model="value"
+      :options="options"
+      placeholder="请选择"
+      style="width: 240px"
+      disabled
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref([]);
+
+const options = [
+  {
+    value: 'zhinan',
+    label: '指南',
+    disabled: true,
+    children: [
+      {
+        value: 'shejiyuanze',
+        label: '设计原则',
+        children: [
+          {
+            value: 'yizhi',
+            label: '一致',
+          },
+        ],
+      },
+    ],
+  },
+  {
+    value: 'zujian',
+    label: '组件',
+    children: [
+      {
+        value: 'basic',
+        label: 'Basic',
+        disabled: true,
+        children: [
+          {
+            value: 'layout',
+            label: 'Layout 布局',
+          },
+        ],
+      },
+    ],
+  },
+];
+</script>