@phelan/design 0.0.1

package/docs/examples/table/rowspan-and-colspan.vue

@@ -0,0 +1,147 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      :span-method="arraySpanMethod"
+      border
+      style="width: 100%"
+    >
+      <m-table-column
+        prop="id"
+        label="ID"
+        width="180"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+      />
+      <m-table-column
+        prop="amount1"
+        sortable
+        label="Amount 1"
+      />
+      <m-table-column
+        prop="amount2"
+        sortable
+        label="Amount 2"
+      />
+      <m-table-column
+        prop="amount3"
+        sortable
+        label="Amount 3"
+      />
+    </m-table>
+
+    <m-table
+      :data="tableData"
+      :span-method="objectSpanMethod"
+      border
+      style="width: 100%; margin-top: 20px"
+    >
+      <m-table-column
+        prop="id"
+        label="ID"
+        width="180"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+      />
+      <m-table-column
+        prop="amount1"
+        label="Amount 1"
+      />
+      <m-table-column
+        prop="amount2"
+        label="Amount 2"
+      />
+      <m-table-column
+        prop="amount3"
+        label="Amount 3"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnCtx } from 'element-plus';
+
+interface User {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+
+interface SpanMethodProps {
+  row: User;
+  column: TableColumnCtx<User>;
+  rowIndex: number;
+  columnIndex: number;
+}
+
+const arraySpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+  if (rowIndex % 2 === 0) {
+    if (columnIndex === 0) {
+      return [1, 2];
+    } else if (columnIndex === 1) {
+      return [0, 0];
+    }
+  }
+};
+
+const objectSpanMethod = ({ row, column, rowIndex, columnIndex }: SpanMethodProps) => {
+  if (columnIndex === 0) {
+    if (rowIndex % 2 === 0) {
+      return {
+        rowspan: 2,
+        colspan: 1,
+      };
+    } else {
+      return {
+        rowspan: 0,
+        colspan: 0,
+      };
+    }
+  }
+};
+
+const tableData: User[] = [
+  {
+    id: '12987122',
+    name: 'Tom',
+    amount1: '234',
+    amount2: '3.2',
+    amount3: 10,
+  },
+  {
+    id: '12987123',
+    name: 'Tom',
+    amount1: '165',
+    amount2: '4.43',
+    amount3: 12,
+  },
+  {
+    id: '12987124',
+    name: 'Tom',
+    amount1: '324',
+    amount2: '1.9',
+    amount3: 9,
+  },
+  {
+    id: '12987125',
+    name: 'Tom',
+    amount1: '621',
+    amount2: '2.2',
+    amount3: 17,
+  },
+  {
+    id: '12987126',
+    name: 'Tom',
+    amount1: '539',
+    amount2: '4.1',
+    amount3: 15,
+  },
+];
+</script>

package/docs/examples/table/show-overflow-tooltip.vue

@@ -0,0 +1,64 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <m-table-column
+        type="selection"
+        width="55"
+      />
+      <m-table-column
+        label="Date"
+        width="120"
+      >
+        <template #default="scope">{{ scope.row.date }}</template>
+      </m-table-column>
+      <m-table-column
+        property="name"
+        label="Name"
+        width="120"
+      />
+      <m-table-column
+        property="address"
+        label="use show-overflow-tooltip"
+        width="240"
+        show-overflow-tooltip
+      />
+      <m-table-column
+        property="address"
+        label="address"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+interface User {
+  date: string;
+  name: string;
+  address: string;
+}
+const tableData: User[] = [
+  {
+    date: '2016-05-04',
+    name: 'Aleyna Kutzner',
+    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
+  },
+  {
+    date: '2016-05-03',
+    name: 'Helen Jacobi',
+    address: '760 A Street, South Frankfield, Illinois',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Brandon Deckert',
+    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Margie Smith',
+    address: '23618 Windsor Drive, West Ricardoview, Idaho',
+  },
+];
+</script>

package/docs/examples/table/single-select.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      ref="singleTableRef"
+      :data="tableData"
+      highlight-current-row
+      style="width: 100%"
+      @current-change="handleCurrentChange"
+    >
+      <m-table-column
+        type="index"
+        width="50"
+      />
+      <m-table-column
+        property="date"
+        label="Date"
+        width="120"
+      />
+      <m-table-column
+        property="name"
+        label="Name"
+        width="120"
+      />
+      <m-table-column
+        property="address"
+        label="Address"
+      />
+    </m-table>
+    <div style="margin-top: 20px">
+      <m-button @click="setCurrent(tableData[1])">Select second row</m-button>
+      <m-button @click="setCurrent()">Clear selection</m-button>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { TableInstance } from 'element-plus';
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+}
+
+const currentRow = ref();
+const singleTableRef = ref<TableInstance>();
+
+const setCurrent = (row?: User) => {
+  singleTableRef.value!.setCurrentRow(row);
+};
+const handleCurrentChange = (val: User | undefined) => {
+  currentRow.value = val;
+};
+const tableData: User[] = [
+  {
+    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',
+  },
+];
+</script>

package/docs/examples/table/sort.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      :default-sort="{ prop: 'date', order: 'descending' }"
+      style="width: 100%"
+    >
+      <m-table-column
+        prop="date"
+        label="Date"
+        sortable
+        width="180"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+        width="180"
+      />
+      <m-table-column
+        prop="address"
+        label="Address"
+        :formatter="formatter"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import type { TableColumnCtx } from 'element-plus';
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+}
+
+const formatter = (row: User, column: TableColumnCtx<User>) => {
+  return row.address;
+};
+
+const tableData: User[] = [
+  {
+    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',
+  },
+];
+</script>

package/docs/examples/table/striped.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      stripe
+      style="width: 100%"
+    >
+      <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',
+  },
+];
+</script>

package/docs/examples/table/summary.vue

@@ -0,0 +1,150 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      border
+      show-summary
+      style="width: 100%"
+    >
+      <m-table-column
+        prop="id"
+        label="ID"
+        width="180"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+      />
+      <m-table-column
+        prop="amount1"
+        sortable
+        label="Amount 1"
+      />
+      <m-table-column
+        prop="amount2"
+        sortable
+        label="Amount 2"
+      />
+      <m-table-column
+        prop="amount3"
+        sortable
+        label="Amount 3"
+      />
+    </m-table>
+
+    <m-table
+      :data="tableData"
+      border
+      height="200"
+      :summary-method="getSummaries"
+      show-summary
+      style="width: 100%; margin-top: 20px"
+    >
+      <m-table-column
+        prop="id"
+        label="ID"
+        width="180"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+      />
+      <m-table-column
+        prop="amount1"
+        label="Cost 1 ($)"
+      />
+      <m-table-column
+        prop="amount2"
+        label="Cost 2 ($)"
+      />
+      <m-table-column
+        prop="amount3"
+        label="Cost 3 ($)"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+
+import type { VNode } from 'vue';
+import type { TableColumnCtx } from 'element-plus';
+
+interface Product {
+  id: string;
+  name: string;
+  amount1: string;
+  amount2: string;
+  amount3: number;
+}
+
+interface SummaryMethodProps<T = Product> {
+  columns: TableColumnCtx<T>[];
+  data: T[];
+}
+
+const getSummaries = (param: SummaryMethodProps) => {
+  const { columns, data } = param;
+  const sums: (string | VNode)[] = [];
+  columns.forEach((column, index) => {
+    if (index === 0) {
+      sums[index] = h('div', { style: { textDecoration: 'underline' } }, ['Total Cost']);
+      return;
+    }
+    const values = data.map((item) => Number(item[column.property]));
+    if (!values.every((value) => Number.isNaN(value))) {
+      sums[index] = `$ ${values.reduce((prev, curr) => {
+        const value = Number(curr);
+        if (!Number.isNaN(value)) {
+          return prev + curr;
+        } else {
+          return prev;
+        }
+      }, 0)}`;
+    } else {
+      sums[index] = 'N/A';
+    }
+  });
+
+  return sums;
+};
+
+const tableData: Product[] = [
+  {
+    id: '12987122',
+    name: 'Tom',
+    amount1: '234',
+    amount2: '3.2',
+    amount3: 10,
+  },
+  {
+    id: '12987123',
+    name: 'Tom',
+    amount1: '165',
+    amount2: '4.43',
+    amount3: 12,
+  },
+  {
+    id: '12987124',
+    name: 'Tom',
+    amount1: '324',
+    amount2: '1.9',
+    amount3: 9,
+  },
+  {
+    id: '12987125',
+    name: 'Tom',
+    amount1: '621',
+    amount2: '2.2',
+    amount3: 17,
+  },
+  {
+    id: '12987126',
+    name: 'Tom',
+    amount1: '539',
+    amount2: '4.1',
+    amount3: 15,
+  },
+];
+</script>

package/docs/examples/table/table-layout.vue

@@ -0,0 +1,56 @@
+<template>
+  <div class="vp-raw">
+    <el-radio-group v-model="tableLayout">
+      <el-radio-button value="fixed">fixed</el-radio-button>
+      <el-radio-button value="auto">auto</el-radio-button>
+    </el-radio-group>
+    <m-table
+      :data="tableData"
+      :table-layout="tableLayout"
+    >
+      <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 { ref } from 'vue';
+
+import type { TableInstance } from 'element-plus';
+
+const tableLayout = ref<TableInstance['tableLayout']>('fixed');
+
+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',
+  },
+];
+</script>

package/docs/examples/table/tooltip-formatter.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      show-overflow-tooltip
+      :tooltip-formatter="tableRowFormatter"
+      style="width: 100%"
+    >
+      <m-table-column
+        prop="address"
+        label="extends table formatter"
+        width="240"
+      />
+      <m-table-column
+        prop="tags"
+        label="formatter object"
+        width="240"
+        :tooltip-formatter="({ row }) => row.tags.join(', ')"
+      >
+        <template #default="{ row }">
+          <el-tag
+            v-for="tag in row.tags"
+            :key="tag"
+            class="tag-item"
+            type="primary"
+          >
+            {{ tag }}
+          </el-tag>
+        </template>
+      </m-table-column>
+      <m-table-column
+        prop="url"
+        label="with vnode"
+        width="240"
+        :tooltip-formatter="withVNode"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue';
+import { ElLink, type TableTooltipData } from 'element-plus';
+
+type TableData = {
+  address: string;
+  tags: string[];
+  url: string;
+};
+
+const tableData: TableData[] = [
+  {
+    address: 'Lohrbergstr. 86c, Süd Lilli, Saarland',
+    tags: ['Office', 'Home', 'Park', 'Garden'],
+    url: 'https://github.com/element-plus/element-plus/issues',
+  },
+  {
+    address: '760 A Street, South Frankfield, Illinois',
+    tags: ['error', 'warning', 'success', 'info'],
+    url: 'https://github.com/element-plus/element-plus/pulls',
+  },
+  {
+    address: 'Arnold-Ohletz-Str. 41a, Alt Malinascheid, Thüringen',
+    tags: ['one', 'two', 'three', 'four', 'five'],
+    url: 'https://github.com/element-plus/element-plus/discussions',
+  },
+  {
+    address: '23618 Windsor Drive, West Ricardoview, Idaho',
+    tags: ['blue', 'white', 'dark', 'gray', 'red', 'bright'],
+    url: 'https://github.com/element-plus/element-plus/actions',
+  },
+];
+
+const tableRowFormatter = (data: TableTooltipData<TableData>) => {
+  return `${data.cellValue}: table formatter`;
+};
+
+const withVNode = (data: TableTooltipData<TableData>) => {
+  return h(ElLink, { type: 'primary', href: data.cellValue }, () =>
+    h('span', null, data.cellValue),
+  );
+};
+</script>
+
+<style scoped>
+p {
+  margin: 10px;
+  padding: 0;
+}
+.tag-item + .tag-item {
+  margin-left: 5px;
+}
+</style>