@phelan/design 0.0.1

package/docs/examples/table/custom-column.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <m-table-column
+        label="Date"
+        width="180"
+      >
+        <template #default="scope">
+          <div style="display: flex; align-items: center">
+            <el-icon><timer /></el-icon>
+            <span style="margin-left: 10px">{{ scope.row.date }}</span>
+          </div>
+        </template>
+      </m-table-column>
+      <m-table-column
+        label="Name"
+        width="180"
+      >
+        <template #default="scope">
+          <el-popover
+            effect="light"
+            trigger="hover"
+            placement="top"
+            width="auto"
+          >
+            <template #default>
+              <div>name: {{ scope.row.name }}</div>
+              <div>address: {{ scope.row.address }}</div>
+            </template>
+            <template #reference>
+              <el-tag>{{ scope.row.name }}</el-tag>
+            </template>
+          </el-popover>
+        </template>
+      </m-table-column>
+      <m-table-column label="Operations">
+        <template #default="scope">
+          <m-button
+            size="small"
+            @click="handleEdit(scope.$index, scope.row)"
+          >
+            Edit
+          </m-button>
+          <m-button
+            size="small"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+          >
+            Delete
+          </m-button>
+        </template>
+      </m-table-column>
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { Timer } from '@element-plus/icons-vue';
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+}
+
+const handleEdit = (index: number, row: User) => {
+  console.log(index, row);
+};
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row);
+};
+
+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/custom-header.vue

@@ -0,0 +1,87 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="filterTableData"
+      style="width: 100%"
+    >
+      <m-table-column
+        label="Date"
+        prop="date"
+      />
+      <m-table-column
+        label="Name"
+        prop="name"
+      />
+      <m-table-column align="right">
+        <template #header>
+          <el-input
+            v-model="search"
+            size="small"
+            placeholder="Type to search"
+          />
+        </template>
+        <template #default="scope">
+          <m-button
+            size="small"
+            @click="handleEdit(scope.$index, scope.row)"
+          >
+            Edit
+          </m-button>
+          <m-button
+            size="small"
+            type="danger"
+            @click="handleDelete(scope.$index, scope.row)"
+          >
+            Delete
+          </m-button>
+        </template>
+      </m-table-column>
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref } from 'vue';
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+}
+
+const search = ref('');
+const filterTableData = computed(() =>
+  tableData.filter(
+    (data) => !search.value || data.name.toLowerCase().includes(search.value.toLowerCase()),
+  ),
+);
+const handleEdit = (index: number, row: User) => {
+  console.log(index, row);
+};
+const handleDelete = (index: number, row: User) => {
+  console.log(index, row);
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-02',
+    name: 'John',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Morgan',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Jessy',
+    address: 'No. 189, Grove St, Los Angeles',
+  },
+];
+</script>

package/docs/examples/table/custom-index.vue

@@ -0,0 +1,71 @@
+<template>
+  <div class="vp-raw">
+    <m-table
+      :data="tableData"
+      style="width: 100%"
+    >
+      <m-table-column
+        type="index"
+        :index="indexMethod"
+      />
+      <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 indexMethod = (index: number) => {
+  return index * 2;
+};
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Home',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Office',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Home',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'Los Angeles',
+    address: 'No. 189, Grove St, Los Angeles',
+    zip: 'CA 90036',
+    tag: 'Office',
+  },
+];
+</script>

package/docs/examples/table/expandable-row.vue

@@ -0,0 +1,285 @@
+<template>
+  <div class="vp-raw">
+    switch parent border: <el-switch v-model="parentBorder" /> switch child border:
+    <el-switch v-model="childBorder" /> preserve expanded:
+    <el-switch v-model="preserveExpanded" />
+    <m-table
+      :data="tableData"
+      :border="parentBorder"
+      :preserve-expanded-content="preserveExpanded"
+      style="width: 100%"
+    >
+      <m-table-column type="expand">
+        <template #default="props">
+          <div m="4">
+            <p m="t-0 b-2">State: {{ props.row.state }}</p>
+            <p m="t-0 b-2">City: {{ props.row.city }}</p>
+            <p m="t-0 b-2">Address: {{ props.row.address }}</p>
+            <p m="t-0 b-2">Zip: {{ props.row.zip }}</p>
+            <h3>Family</h3>
+            <m-table
+              :data="props.row.family"
+              :border="childBorder"
+            >
+              <m-table-column
+                label="Name"
+                prop="name"
+              />
+              <m-table-column
+                label="State"
+                prop="state"
+              />
+              <m-table-column
+                label="City"
+                prop="city"
+              />
+              <m-table-column
+                label="Address"
+                prop="address"
+              />
+              <m-table-column
+                label="Zip"
+                prop="zip"
+              />
+            </m-table>
+          </div>
+        </template>
+      </m-table-column>
+      <m-table-column
+        label="Date"
+        prop="date"
+      />
+      <m-table-column
+        label="Name"
+        prop="name"
+      />
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const parentBorder = ref(false);
+const childBorder = ref(false);
+const preserveExpanded = ref(false);
+const tableData = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+  {
+    date: '2016-05-08',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+  {
+    date: '2016-05-06',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+  {
+    date: '2016-05-07',
+    name: 'Tom',
+    state: 'California',
+    city: 'San Francisco',
+    address: '3650 21st St, San Francisco',
+    zip: 'CA 94114',
+    family: [
+      {
+        name: 'Jerry',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Spike',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+      {
+        name: 'Tyke',
+        state: 'California',
+        city: 'San Francisco',
+        address: '3650 21st St, San Francisco',
+        zip: 'CA 94114',
+      },
+    ],
+  },
+];
+</script>

package/docs/examples/table/filter.vue

@@ -0,0 +1,116 @@
+<template>
+  <div class="vp-raw">
+    <m-button @click="resetDateFilter">reset date filter</m-button>
+    <m-button @click="clearFilter">reset all filters</m-button>
+    <m-table
+      ref="tableRef"
+      row-key="date"
+      :data="tableData"
+      style="width: 100%"
+    >
+      <m-table-column
+        prop="date"
+        label="Date"
+        sortable
+        width="180"
+        column-key="date"
+        :filters="[
+          { text: '2016-05-01', value: '2016-05-01' },
+          { text: '2016-05-02', value: '2016-05-02' },
+          { text: '2016-05-03', value: '2016-05-03' },
+          { text: '2016-05-04', value: '2016-05-04' },
+        ]"
+        :filter-method="filterHandler"
+      />
+      <m-table-column
+        prop="name"
+        label="Name"
+        width="180"
+      />
+      <m-table-column
+        prop="address"
+        label="Address"
+        :formatter="formatter"
+      />
+
+      <m-table-column
+        prop="tag"
+        label="Tag"
+        width="100"
+        :filters="[
+          { text: 'Home', value: 'Home' },
+          { text: 'Office', value: 'Office' },
+        ]"
+        :filter-method="filterTag"
+        filter-placement="bottom-end"
+      >
+        <template #default="scope">
+          <el-tag
+            :type="scope.row.tag === 'Home' ? 'primary' : 'success'"
+            disable-transitions
+            >{{ scope.row.tag }}</el-tag
+          >
+        </template>
+      </m-table-column>
+    </m-table>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+import type { TableColumnCtx, TableInstance } from 'element-plus';
+
+interface User {
+  date: string;
+  name: string;
+  address: string;
+  tag: string;
+}
+
+const tableRef = ref<TableInstance>();
+
+const resetDateFilter = () => {
+  tableRef.value!.clearFilter(['date']);
+};
+const clearFilter = () => {
+  tableRef.value!.clearFilter();
+};
+const formatter = (row: User, column: TableColumnCtx<User>) => {
+  return row.address;
+};
+const filterTag = (value: string, row: User) => {
+  return row.tag === value;
+};
+const filterHandler = (value: string, row: User, column: TableColumnCtx<User>) => {
+  const { property } = column;
+  return row[property] === value;
+};
+
+const tableData: User[] = [
+  {
+    date: '2016-05-03',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home',
+  },
+  {
+    date: '2016-05-02',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office',
+  },
+  {
+    date: '2016-05-04',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Home',
+  },
+  {
+    date: '2016-05-01',
+    name: 'Tom',
+    address: 'No. 189, Grove St, Los Angeles',
+    tag: 'Office',
+  },
+];
+</script>