feat: pro-table 添加搜索

packages/pro-table/.gitignore

@@ -0,0 +1,28 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+.DS_Store
+dist
+dist-ssr
+coverage
+*.local
+
+/cypress/videos/
+/cypress/screenshots/
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/pro-table/README.md

@@ -0,0 +1,127 @@
+<h1 align="center">
+Ant Design Pro Table
+</h1>
+
+<div align="center">
+
+[![NPM version](https://img.shields.io/npm/v/@ant-design-vue/pro-table/latest?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![Vue Support](https://img.shields.io/badge/support-Vue3-green?style=flat)](./package.json) [![Vue Grammar Level](https://img.shields.io/badge/full-Composition%20API-blue?style=flat)](https://v3.vuejs.org/guide/composition-api-introduction.html) [![NPM downloads](http://img.shields.io/npm/dm/@ant-design-vue/pro-table.svg?style=flat)](https://npmjs.org/package/@ant-design-vue/pro-table) [![License](https://img.shields.io/github/license/vueComponent/pro-layout)](./LICENSE)
+
+</div>
+
+## Basic Usage
+
+Recommend look [Examples](./examples/) or [Use Template](https://github.com/sendya/preview-pro)
+
+## Branch
+
+-   next : Vue3 + ant-design-vue@3.x (latest)
+-   v3.1 : Vue3 + ant-design-vue@2.2.x (release LTS)
+-   v2 : Vue2 + ant-design-vue@1.7.x
+
+## Install
+
+```bash
+# yarn
+yarn add @ant-design-vue/pro-table
+# npm
+npm i @ant-design-vue/pro-table -S
+```
+
+### Simple Usage
+
+First, you should add the `@ant-design-vue/pro-table` that you need into the library.
+
+```js
+// main.[js|ts]
+import '@ant-design-vue/pro-table/dist/style.css'; // pro-layout css or style.less
+
+import { createApp } from 'vue';
+import App from './App.vue';
+import Antd from 'ant-design-vue';
+import ProTable from '@ant-design-vue/pro-table';
+
+const app = createApp(App);
+
+app.use(Antd).use(ProLayout).use(PageContainer).mount('#app');
+```
+
+After that, you can use pro-layout in your Vue components as simply as this:
+
+```vue
+<template>
+    <pro-table
+        :request="request"
+        :columns="columns"
+        :bordered="true"
+        :pagination="pagination"
+    ></pro-table>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from 'vue';
+
+import type { ColumnsType } from '@ant-design-vue/pro-table';
+const pagination = reactive({
+    pageSize: 10
+});
+const columns = reactive<ColumnsType>([
+    {
+        dataIndex: 'name',
+        title: '姓名',
+        key: 'name',
+        search: true
+    },
+    {
+        dataIndex: 'age',
+        title: '年龄',
+        key: 'age',
+        search: true
+    },
+    {
+        dataIndex: 'action',
+        title: '操作',
+        key: 'action'
+    }
+]);
+const request = async (params: any = {}) => {
+    let data: any[] = [];
+
+    console.log('params', params);
+    for (let i = 0; i < params.pageSize; i++) {
+        data.push({
+            name: '第' + params.current + '页的' + +(i + 1) + (params?.name || ''),
+            age: 18
+        });
+    }
+    return {
+        data,
+        success: true,
+        total: 100
+    };
+};
+</script>
+```
+
+## API
+
+### ProTable
+
+| Property   | Description                                    | Type                                                  | Default Valuere |
+| ---------- | ---------------------------------------------- | ----------------------------------------------------- | --------------- |
+| request    | 获取`dataSource` 的方法                        | (params?: {pageSize,current}) => {data,success,total} | -               |
+| dataSource | Table 的数据，protable 推荐使用 request 来加载 | T[]                                                   | -               |
+|            | Vue-router`routes` prop                        | Object                                                | `[{}]`          |
+
+### Columns 列定义
+
+与 ant-design-vue 中 table 相比 ，多出以下属性
+
+| Property | Description  | Type    | Default Valuere |
+| -------- | ------------ | ------- | --------------- |
+| search   | 是否支持搜索 | boolean | -               |
+
+## Build project
+
+```bash
+pnpm build # Build library and .d.ts
+```

packages/pro-table/env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/pro-table/examples/App.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { RouterView } from 'vue-router';
+import { ConfigProvider } from 'ant-design-vue';
+
+const getPopupContainer = (triggerNode?: HTMLElement): HTMLElement => {
+  // if (dialogContext) {
+  //   return dialogContext.getDialogWrap()
+  // }
+  if (triggerNode) {
+    return (triggerNode?.parentNode as HTMLElement) || document.body;
+  }
+  return document.body;
+};
+</script>
+
+<template>
+  <ConfigProvider :get-popup-container="getPopupContainer">
+    <RouterView />
+  </ConfigProvider>
+</template>
+
+<style>
+#app {
+  height: 100%;
+}
+</style>

packages/pro-table/examples/icons.ts

@@ -0,0 +1,18 @@
+import * as Icons from '@ant-design/icons-vue/es';
+import type { App } from 'vue';
+import type { IconType } from '@ant-design/icons-vue/es/components/Icon';
+
+type AllIcon = {
+  [key: string]: IconType;
+};
+
+export const filterIcons = ['default', 'createFromIconfontCN', 'getTwoToneColor', 'setTwoToneColor'];
+
+export default (app: App) => {
+  const allIcon: AllIcon = Icons as any;
+  Object.keys(Icons)
+    .filter((k) => !filterIcons.includes(k))
+    .forEach((k) => {
+      app.component(allIcon[k].displayName, allIcon[k]);
+    });
+};

packages/pro-table/examples/layouts/BasicLayout.vue

@@ -0,0 +1,47 @@
+<template>
+  <pro-table :request="request" :columns="columns" :bordered="true" :pagination="pagination"></pro-table>
+</template>
+
+<script setup lang="ts">
+import { reactive, ref } from "vue";
+
+import type { ColumnsType } from "@ant-design-vue/pro-table";
+const pagination = reactive({
+  pageSize: 10,
+});
+const columns = reactive<ColumnsType>([
+  {
+    dataIndex: "name",
+    title: "姓名",
+    key: "name",
+    search: true
+  },
+  {
+    dataIndex: "age",
+    title: "年龄",
+    key: "age",
+    search: true
+
+  },
+  {
+    dataIndex: "action",
+    title: "操作",
+    key: "action",
+
+
+  },
+]);
+const request = async (params: any = {}) => {
+  let data: any[] = [];
+
+  console.log("params", params);
+  for (let i = 0; i < params.pageSize; i++) {
+    data.push({ name: "第" + params.current + "页的" + + (i + 1) + (params?.name || ''), age: 18 });
+  }
+  return {
+    data,
+    success: true,
+    total: 100,
+  };
+};
+</script>

packages/pro-table/examples/main.ts

@@ -0,0 +1,16 @@
+import '@ant-design-vue/pro-table/style.less';
+
+import { createApp } from 'vue';
+import Protable from '@ant-design-vue/pro-table';
+import App from './App.vue';
+import router from './router';
+import icons from './icons';
+
+// functional
+import 'ant-design-vue/dist/antd.less';
+
+const app = createApp(App);
+
+app.use(router);
+
+app.use(Protable).use(icons).mount('#app');

packages/pro-table/examples/router/index.ts

@@ -0,0 +1,19 @@
+import { createRouter, createWebHistory } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
+import BasicLayout from '../layouts/BasicLayout.vue';
+
+const routes: RouteRecordRaw[] = [
+    {
+        path: '/',
+        name: 'index',
+        meta: { title: 'Home' },
+        component: BasicLayout
+    }
+];
+
+const router = createRouter({
+    history: createWebHistory(import.meta.env.BASE_URL),
+    routes
+});
+
+export default router;

packages/pro-table/examples/views/DynamicPage.vue

@@ -0,0 +1,36 @@
+<template>
+  <page-container :title="`${$route.meta.title} ${$route.params.id}`" sub-title="is a sub-title.">
+    <template #content>
+      <div>
+        container.content
+        <h1>{{ text }}</h1>
+      </div>
+    </template>
+    <span>page-content</span>
+    <a-button @click="handleClick">Button</a-button>
+    <p v-for="item in new Array(20)" :key="item">text block...</p>
+  </page-container>
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import { Button, message } from 'ant-design-vue';
+
+export default defineComponent({
+  components: {
+    [Button.name]: Button,
+  },
+  setup() {
+    const text = ref<string>('1');
+    const handleClick = () => {
+      message.info('clicked');
+      text.value = `${Math.random()}`;
+    };
+    return {
+      handleClick,
+
+      text,
+    };
+  },
+});
+</script>

packages/pro-table/examples/views/Hello.vue

@@ -0,0 +1,24 @@
+<template>
+  <a-result
+    status="404"
+    :style="{
+      height: '100%',
+      background: '#fff',
+    }"
+    title="Hello World"
+    sub-title="Sorry, you are not authorized to access this page."
+  >
+    <template #extra>
+      <a-button type="primary" @click="handleClick">Back Home</a-button>
+    </template>
+  </a-result>
+</template>
+
+<script lang="ts" setup>
+import { Result as AResult, Button as AButton, message } from 'ant-design-vue';
+
+const handleClick = () => {
+  console.log('info');
+  message.info('BackHome button clicked!');
+};
+</script>

packages/pro-table/examples/views/MyPage.vue

@@ -0,0 +1,25 @@
+<template>
+  <PageContainer fixed-header :title="(route.meta.title as string)">
+    <template #tags>
+      <Tag>tag1</Tag>
+      <Tag color="pink">tag2</Tag>
+    </template>
+    <Result status="404" :style="{
+      height: '100%',
+    background: '#fff',
+    }" title="Hello World" sub-title="Sorry, you are not authorized to access this page.">
+      <template #extra>
+        <Button type="primary">Back Home</Button>
+      </template>
+    </Result>
+  </PageContainer>
+</template>
+
+<script setup lang="ts">
+import { Button, Tag, Result } from 'ant-design-vue';
+import { PageContainer } from '@ant-design-vue/pro-table';
+
+import { useRoute } from 'vue-router';
+
+const route = useRoute();
+</script>