@phelan/design 0.0.1

package/docs/examples/space/fill.vue

@@ -0,0 +1,57 @@
+<template>
+  <div class="vp-raw">
+    <div style="margin-bottom: 15px"> fill: <el-switch v-model="fill" /> </div>
+    <m-space
+      :fill="fill"
+      wrap
+    >
+      <el-card
+        v-for="i in 3"
+        :key="i"
+        class="box-card"
+      >
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+            <m-button
+              class="button"
+              text
+            >
+              Operation button
+            </m-button>
+          </div>
+        </template>
+        <div
+          v-for="o in 4"
+          :key="o"
+          class="text item"
+        >
+          {{ 'List item ' + o }}
+        </div>
+      </el-card>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const fill = ref(true);
+</script>
+
+<style scoped>
+.box-card {
+  width: 250px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+</style>

package/docs/examples/space/index.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="vp-raw">
+    <m-space wrap>
+      <el-card
+        v-for="i in 3"
+        :key="i"
+        class="box-card"
+        style="width: 250px"
+      >
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+            <m-button
+              class="button"
+              text
+            >
+              Operation button
+            </m-button>
+          </div>
+        </template>
+        <div
+          v-for="o in 4"
+          :key="o"
+          class="text item"
+        >
+          {{ 'List item ' + o }}
+        </div>
+      </el-card>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 基础用法示例
+</script>
+
+<style scoped>
+.box-card {
+  width: 250px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+</style>

package/docs/examples/space/size.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="vp-raw">
+    <m-space
+      direction="vertical"
+      alignment="start"
+      :size="30"
+    >
+      <el-radio-group v-model="size">
+        <el-radio value="large">Large</el-radio>
+        <el-radio value="default">Default</el-radio>
+        <el-radio value="small">Small</el-radio>
+      </el-radio-group>
+
+      <m-space
+        wrap
+        :size="size"
+      >
+        <el-card
+          v-for="i in 3"
+          :key="i"
+          class="box-card"
+          style="width: 250px"
+        >
+          <template #header>
+            <div class="card-header">
+              <span>Card name</span>
+              <m-button
+                class="button"
+                text
+              >
+                Operation button
+              </m-button>
+            </div>
+          </template>
+          <div
+            v-for="o in 4"
+            :key="o"
+            class="text item"
+          >
+            {{ 'List item ' + o }}
+          </div>
+        </el-card>
+      </m-space>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import type { ComponentSize } from 'element-plus';
+
+const size = ref<ComponentSize>('default');
+</script>
+
+<style scoped>
+.box-card {
+  width: 250px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+</style>

package/docs/examples/space/spacer.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="vp-raw">
+    <m-space
+      :size="size"
+      spacer="|"
+    >
+      <div
+        v-for="i in 2"
+        :key="i"
+      >
+        <m-button> button {{ i }} </m-button>
+      </div>
+    </m-space>
+    <el-divider />
+    <m-space
+      :size="size"
+      :spacer="spacer"
+    >
+      <div
+        v-for="i in 2"
+        :key="i"
+      >
+        <m-button> button {{ i }} </m-button>
+      </div>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h, ref } from 'vue';
+import { ElDivider } from 'element-plus';
+
+const size = ref(10);
+const spacer = h(ElDivider, { direction: 'vertical' });
+</script>

package/docs/examples/space/vertical.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="vp-raw">
+    <m-space direction="vertical">
+      <el-card
+        v-for="i in 2"
+        :key="i"
+        class="box-card"
+        style="width: 250px"
+      >
+        <template #header>
+          <div class="card-header">
+            <span>Card name</span>
+            <m-button
+              class="button"
+              text
+            >
+              Operation button
+            </m-button>
+          </div>
+        </template>
+        <div
+          v-for="o in 4"
+          :key="o"
+          class="text item"
+        >
+          {{ 'List item ' + o }}
+        </div>
+      </el-card>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 垂直布局示例
+</script>
+
+<style scoped>
+.box-card {
+  width: 250px;
+}
+.card-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.text {
+  font-size: 14px;
+}
+.item {
+  margin-bottom: 18px;
+}
+</style>

package/docs/examples/space/wrap.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw">
+    <m-space wrap>
+      <div
+        v-for="i in 20"
+        :key="i"
+      >
+        <m-button text> Text button </m-button>
+      </div>
+    </m-space>
+  </div>
+</template>
+
+<script lang="ts" setup>
+// 自动换行示例
+</script>

package/docs/examples/steps/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="vp-raw">
+    <m-steps
+      style="max-width: 1000px"
+      :active="active"
+    >
+      <m-step
+        title="Step 1"
+        description="This is a description."
+      />
+      <m-step title="Step 2" />
+      <m-step
+        title="Step 3"
+        description="This is a description."
+      />
+    </m-steps>
+
+    <m-steps
+      style="max-width: 1000px"
+      :active="active"
+      type="arrow"
+    >
+      <m-step
+        title="Step 1"
+        description="This is a description."
+      />
+      <m-step title="Step 2" />
+      <m-step
+        title="Step 3"
+        description="This is a description."
+      />
+    </m-steps>
+
+    <m-button
+      style="margin-top: 12px"
+      @click="next"
+      >Next step</m-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const active = ref(0);
+
+const next = () => {
+  if (active.value++ > 2) active.value = 0;
+};
+</script>

package/docs/examples/steps/navigation.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="vp-raw">
+    <m-steps
+      style="max-width: 1000px"
+      :active="active"
+      v-model:navigateActiveIndex="navigateIndex"
+      type="navigation"
+    >
+      <m-step
+        title="Step 1"
+        description="This is a description."
+      />
+      <m-step title="Step 2" />
+      <m-step
+        title="Step 3"
+        description="This is a description."
+      />
+    </m-steps>
+
+    <m-button
+      style="margin-top: 12px"
+      @click="next"
+      >Next step</m-button
+    >
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const active = ref(0);
+const navigateIndex = ref(0);
+
+const next = () => {
+  if (active.value++ > 2) active.value = 0;
+};
+</script>

package/docs/examples/switch/disabled.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw">
+    <m-switch
+      v-model="value1"
+      disabled
+    />
+    <m-switch
+      v-model="value2"
+      disabled
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref(false);
+const value2 = ref(true);
+</script>

package/docs/examples/switch/icon.vue

@@ -0,0 +1,21 @@
+<template>
+  <div class="vp-raw">
+    <m-switch
+      v-model="value1"
+      active-icon="Check"
+      inactive-icon="Close"
+    />
+    <m-switch
+      v-model="value2"
+      active-icon="Check"
+      inactive-icon="Close"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(false);
+</script>

package/docs/examples/switch/index.vue

@@ -0,0 +1,17 @@
+<template>
+  <div class="vp-raw">
+    <m-switch v-model="value1" />
+    <m-switch
+      v-model="value2"
+      active-text="Pay by month"
+      inactive-text="Pay by year"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(true);
+</script>

package/docs/examples/switch/loading.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="vp-raw">
+    <m-switch
+      v-model="value1"
+      loading
+    />
+    <m-switch
+      v-model="value2"
+      loading
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(false);
+</script>

package/docs/examples/switch/size.vue

@@ -0,0 +1,29 @@
+<template>
+  <div class="vp-raw">
+    <m-switch
+      v-model="value1"
+      size="large"
+      active-text="Open"
+      inactive-text="Close"
+    />
+    <m-switch
+      v-model="value2"
+      active-text="Open"
+      inactive-text="Close"
+    />
+    <m-switch
+      v-model="value3"
+      size="small"
+      active-text="Open"
+      inactive-text="Close"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(true);
+const value3 = ref(true);
+</script>

package/docs/examples/switch/text.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="vp-raw">
+    <m-switch
+      v-model="value1"
+      active-text="Open"
+      inactive-text="Close"
+    />
+    <br />
+    <m-switch
+      v-model="value2"
+      active-text="Pay by month"
+      inactive-text="Pay by year"
+    />
+    <br />
+    <m-switch
+      v-model="value3"
+      active-text="On"
+      inactive-text="Off"
+    />
+    <br />
+    <m-switch
+      v-model="value4"
+      inline-prompt
+      active-text="是"
+      inactive-text="否"
+    />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value1 = ref(true);
+const value2 = ref(true);
+const value3 = ref(true);
+const value4 = ref(true);
+</script>

package/docs/examples/switch/validate-value.vue

@@ -0,0 +1,16 @@
+<template>
+  <div class="vp-raw">
+    <m-switch
+      v-model="value"
+      :active-value="100"
+      :inactive-value="0"
+    />
+    <div style="margin-top: 10px"> value: {{ value }} </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const value = ref(100);
+</script>

package/docs/examples/table/basic.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      :outline="false"
+      style="width: 100%"
+      :span-method="spanMethod"
+    >
+      <m-table-column
+        prop="date"
+        label="Date"
+        width="180"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+        width="180"
+      />
+      <m-table-column
+        prop="address"
+        label="Address"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+];
+
+const spanMethod = ({ row, column, rowIndex, columnIndex }: any) => {
+  if (rowIndex % 2 === 0) {
+    if (columnIndex === 0) {
+      return [1, 2];
+    } else if (columnIndex === 1) {
+      return [0, 0];
+    }
+  }
+};
+</script>

package/docs/examples/table/check-strictly.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="vp-raw">
+    <el-radio-group v-model="treeProps.checkStrictly">
+      <el-radio-button
+        :value="true"
+        label="true"
+      />
+      <el-radio-button
+        :value="false"
+        label="false"
+      />
+    </el-radio-group>
+    <m-table
+      :data="tableData"
+      :tree-props="treeProps"
+      row-key="id"
+      default-expand-all
+    >
+      <m-table-column
+        type="selection"
+        width="55"
+        :selectable="selectable"
+      />
+      <m-table-column
+        prop="date"
+        label="Date"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+      />
+      <m-table-column
+        prop="address"
+        label="Address"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { reactive } from 'vue';
+
+interface User {
+  id: number;
+  date: string;
+  name: string;
+  address: string;
+  hasChildren?: boolean;
+  children?: User[];
+}
+
+const treeProps = reactive({
+  checkStrictly: false,
+});
+
+const selectable = (row: User) => ![1, 31].includes(row.id);
+
+const tableData: User[] = [
+  {
+    id: 1,
+    date: '2016-05-02',
+    name: 'wangxiaohu',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    id: 2,
+    date: '2016-05-04',
+    name: 'wangxiaohu',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    id: 3,
+    date: '2016-05-01',
+    name: 'wangxiaohu',
+    address: 'No. 189, Grove St, Los Angeles',
+    children: [
+      {
+        id: 31,
+        date: '2016-05-01',
+        name: 'wangxiaohu',
+        address: 'No. 189, Grove St, Los Angeles',
+      },
+      {
+        id: 32,
+        date: '2016-05-01',
+        name: 'wangxiaohu',
+        address: 'No. 189, Grove St, Los Angeles',
+      },
+    ],
+  },
+  {
+    id: 4,
+    date: '2016-05-03',
+    name: 'wangxiaohu',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+];
+</script>