@wlydfe/pro-ui 0.2.20 → 0.2.21

package/docs/deploy.sh

@@ -0,0 +1,20 @@
+#!/usr/bin/env sh
+
+# abort on errors
+set -e
+
+# build
+npm run build
+
+# navigate into the build output directory
+cd .vitepress/dist
+
+git init
+git add -A
+git commit -m 'deploy'
+
+git push -f https://github.com/plus-pro-components/plus-pro-components.github.io.git master:gh-pages
+
+rsync -av --exclude=".*" ./ root@47.109.84.50:/root/plus-pro-components
+
+cd -

package/docs/donate.md

@@ -0,0 +1,54 @@
+## 简介
+
+[PlusProComponents](/) 是采用 [MIT](https://github.com/plus-pro-components/plus-pro-components?tab=MIT-1-ov-file) 许可的开源项目，个人和企业使用都是完全免费。 项目需要长期的设计、研发和迭代，同时需要服务器和域名等资源的长期支持，为了保证项目的持续良好发展，你可以通过下面方式捐赠，捐赠后即可享受[捐赠者权益](/donate.html#捐赠者权益)。也可[star](https://github.com/plus-pro-components/plus-pro-components)表示鼓励。
+
+## 捐赠
+
+如果你觉得这个项目帮助到了你，你可以帮作者买一杯果汁表示鼓励 🍹
+
+| 微信                                                                                                                                          | 支付宝                                                                                                                                         |
+| --------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------- |
+| <img style="border:1px solid #ccc" src="https://plus-pro-components-1252186245.cos.ap-chengdu.myqcloud.com/wx.jpg" height="188"  width="188"> | <img style="border:1px solid #ccc"  src="https://plus-pro-components-1252186245.cos.ap-chengdu.myqcloud.com/ali.jpg" height="188" width="188"> |
+
+## 微信打赏
+
+或者你可以用微信，打赏作者一杯可乐
+
+<img src="https://plus-pro-components-1252186245.cos.ap-chengdu.myqcloud.com/wx-z.jpg" height="288" width="288">
+
+## 其他捐赠渠道
+
+[open-collective](https://opencollective.com/plus-pro-components)
+
+## 捐赠者权益
+
+- 你的名称会出现在下面的捐赠名单中 （定期更新）
+- 你的 issue/PR 将会被优先处理
+- 你的 非[PlusProComponents](/)相关问题 将会被处理
+- 可添加作者微信
+
+  微信号: <a  class="wechat-link" href="javascript:void(0)" rel="nofollow" style="text-decoration: none;" > </a> ，添加微信需备注来意 🌹， 通过后即可享受一对一问题解决服务。
+
+## 捐赠者名单
+
+非常感谢您们的赞助！
+
+| 赞助人   | 金额     | 赞助人备注           | 作者的回复             |
+| -------- | -------- | -------------------- | ---------------------- |
+| \*伞     | ￥ 50    | 棒\*\*\*\*           | 感谢支持 ❤️            |
+| \*儿     | ￥ 20    | \*\*\*\*很方便       | 感谢支持 ❤️            |
+| \*蒙     | ￥ 18.8  | 感谢\*\*\*\*无私开源 | 感谢支持 ❤️            |
+| \*z6     | ￥ 100   | 感谢 \*\*\*\*指导    | 感谢支持 ❤️            |
+| \*锋     | ￥ 20    | \*\*\*\*感谢开源     | 感谢支持 ❤️            |
+| \*锋     | ￥ 20    | 多谢 \*\*\*\*指教    | 共同探讨， 感谢支持 ❤️ |
+| \*娜     | ￥ 2     | \*\*\*\*             | 感谢支持 ❤️            |
+| \*下     | ￥ 8.8   | 谢谢\*\*开源         | 感谢支持 ❤️            |
+| \*泽     | ￥ 66.66 | \*\*\*\*             | 感谢支持 ❤️            |
+| \*\*连连 | ￥ 9.9   | 喝杯\*\*             | 感谢支持 ❤️            |
+| \*\*连连 | ￥ 9.9   | 大\*\*               | 感谢支持 ❤️            |
+| \*\*连连 | ￥ 9.9   | \*\*\*\*             | 感谢支持 ❤️            |
+| \*       | ￥ 18.8  |                      | 感谢支持 ❤️            |
+| \*浩     | ￥ 30    | 给\*\*递茶           | 感谢支持 ❤️            |
+| C\*o     | ￥ 101   | 成为你的榜一\*\*     | 感谢老铁支持 ❤️        |
+| F\*s     | ￥ 30    |                      | 感谢支持 ❤️            |
+| \*天     | ￥ 1     | 分布表单问题\*\*     | 感谢支持 ❤️            |

package/docs/ecosystem/eslint-config.md

@@ -0,0 +1,25 @@
+# @wlydfe/pro-ui-eslint-config
+
+[![@wlydfe/pro-ui-eslint-config version badge](https://img.shields.io/npm/v/@wlydfe/pro-ui-eslint-config.svg?style=flat-square)](https://www.npmjs.org/package/@wlydfe/pro-ui-eslint-config)
+
+## 简介
+
+`@wlydfe/pro-ui-eslint-config` 是 `plus-pro-components` 内置的 eslint 配置集合，集成了常用的 `vue`、`ts`、`import`插件，为快速配置 eslint 提供保障。
+
+## 使用
+
+- 安装
+
+  ```sh
+  pnpm i @wlydfe/pro-ui-eslint-config
+  ```
+
+- 配置
+
+  ```js {4}
+  // .eslintrc.js
+  module.exports = {
+    root: true,
+    extends: ['@wlydfe/pro-ui-eslint-config']
+  }
+  ```

package/docs/ecosystem/hooks.md

@@ -0,0 +1,44 @@
+# plus-pro-components 内置 hooks
+
+## useTable
+
+初始化表格基本数据，配合 [PlusTable](/components/table.html) 组件使用
+
+```ts
+import type { Ref } from 'vue'
+import type { ActionBarButtonsRow } from 'plus-pro-components/es/components/table'
+import type { PageInfo } from 'plus-pro-components/es/types'
+/**
+ * 初始化表格基本数据
+ *
+ */
+export declare function useTable<T extends Record<string, any>[] = any>(
+  _pageInfo: PageInfo | Ref<PageInfo>
+): {
+  tableData: Ref<import('vue').UnwrapRef<T>>
+  pageInfo: Ref<{
+    page: number
+    pageSize: number
+  }>
+  total: Ref<number>
+  loadingStatus: Ref<boolean>
+  buttons: import('vue').ShallowRef<ActionBarButtonsRow[]>
+}
+```
+
+使用示例
+
+```ts
+import { useTable } from 'plus-pro-components'
+
+interface TableRow {
+  index: number
+  id: number
+  name: string
+  status: string
+  tag: string
+  progress: number
+}
+
+const { tableData, pageInfo, total, buttons, loadingStatus } = useTable<TableRow[]>()
+```

package/docs/ecosystem/resolver.md

@@ -0,0 +1,43 @@
+# @wlydfe/pro-ui-resolver
+
+[![@wlydfe/pro-ui-resolver version badge](https://img.shields.io/npm/v/@wlydfe/pro-ui-resolver.svg?style=flat-square)](https://www.npmjs.org/package/@wlydfe/pro-ui-resolver)
+
+## 简介
+
+`@wlydfe/pro-ui-resolver` 是[plus-pro-components](https://plus-pro-components.com/)为 [unplugin-vue-components](https://github.com/unplugin/unplugin-vue-components) 提供的官方解析器，可以按需自动导入`plus-pro-components`的组件及其样式文件。
+
+## 使用
+
+- 安装
+
+  ```sh
+  pnpm i @wlydfe/pro-ui-resolver
+  ```
+
+- 配置
+
+  ```ts {5,11}
+  // vite.config.ts
+  import { defineConfig } from 'vite'
+  import Components from 'unplugin-vue-components/vite'
+
+  import { PlusProComponentsResolver } from '@wlydfe/pro-ui-resolver'
+
+  export default defineConfig({
+    // ...
+    plugins: [
+      Components({
+        resolvers: [PlusProComponentsResolver({ importStyle: 'css' })]
+      })
+    ]
+  })
+  ```
+
+## 配置参数说明
+
+| 参数名称             | 说明                     | 类型                                                  | 默认值  | 是否必须 |
+| -------------------- | ------------------------ | ----------------------------------------------------- | ------- | -------- |
+| `ssr`                | 是否是 ssr               | `boolean`                                             | `false` | 否       |
+| `importStyle`        | 导入的样式文件类型       | `string` <docs-tip content="'scss'/'css'"></docs-tip> | `css`   | 否       |
+| `exclude`            | 不需要加载的组件名称正则 | `RegExp`                                              |         | 否       |
+| `noStylesComponents` | 不需要加载样式的组件名称 | `array` <docs-tip content='string[]'></docs-tip>      |         | 否       |

package/docs/examples/breadcrumb/basic.vue

@@ -0,0 +1,28 @@
+<template>
+  <PlusBreadcrumb :routes="routes" />
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import type { PlusRouteRecordRaw } from 'plus-pro-components'
+
+const routes: PlusRouteRecordRaw[] = [
+  {
+    path: '/breadcrumb/1',
+    name: 'Breadcrumb1',
+    meta: {
+      title: '面包屑1'
+    },
+    children: []
+  },
+  {
+    path: '/breadcrumb/2',
+    name: 'Breadcrumb2',
+    meta: {
+      title: '面包屑2'
+    },
+    children: []
+  }
+]
+</script>

package/docs/examples/breadcrumb/hidden.vue

@@ -0,0 +1,29 @@
+<template>
+  <PlusBreadcrumb :routes="routes" />
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import type { PlusRouteRecordRaw } from 'plus-pro-components'
+
+const routes: PlusRouteRecordRaw[] = [
+  {
+    path: '/breadcrumb/1',
+    name: 'Breadcrumb1',
+    meta: {
+      title: '面包屑1'
+    },
+    children: []
+  },
+  {
+    path: '/breadcrumb/2',
+    name: 'Breadcrumb2',
+    meta: {
+      title: '面包屑2',
+      hideInBreadcrumb: true
+    },
+    children: []
+  }
+]
+</script>

package/docs/examples/breadcrumb/render.vue

@@ -0,0 +1,41 @@
+<template>
+  <PlusBreadcrumb :routes="routes" :title-render="renderTitle" />
+</template>
+
+<script lang="ts" setup>
+import { h } from 'vue'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import type { PlusRouteRecordRaw } from 'plus-pro-components'
+
+const routes = [
+  {
+    path: '/breadcrumb/1',
+    name: 'Breadcrumb1',
+    meta: {
+      title: '面包屑1'
+    },
+    children: []
+  },
+  {
+    path: '/breadcrumb/2',
+    name: 'Breadcrumb2',
+    meta: {
+      title: '面包屑2'
+    },
+    children: []
+  }
+]
+
+const renderTitle = (route: PlusRouteRecordRaw) => {
+  return h(
+    'p',
+    {
+      style: {
+        color: 'red'
+      }
+    },
+    () => route.name
+  )
+}
+</script>

package/docs/examples/breadcrumb/slots.vue

@@ -0,0 +1,32 @@
+<template>
+  <PlusBreadcrumb :routes="routes">
+    <template #breadcrumb-item-title="route">
+      <h3 style="color: green; margin: 0">{{ route.name }}</h3>
+    </template>
+  </PlusBreadcrumb>
+</template>
+
+<script lang="ts" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import type { PlusRouteRecordRaw } from 'plus-pro-components'
+
+const routes: PlusRouteRecordRaw[] = [
+  {
+    path: '/breadcrumb/1',
+    name: 'Breadcrumb1',
+    meta: {
+      title: '面包屑1'
+    },
+    children: []
+  },
+  {
+    path: '/breadcrumb/2',
+    name: 'Breadcrumb2',
+    meta: {
+      title: '面包屑2'
+    },
+    children: []
+  }
+]
+</script>

package/docs/examples/breadcrumb/tsx.vue

@@ -0,0 +1,32 @@
+<template>
+  <PlusBreadcrumb :routes="routes" :title-render="renderTitle" />
+</template>
+
+<script lang="tsx" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import type { PlusRouteRecordRaw } from 'plus-pro-components'
+
+const routes: PlusRouteRecordRaw[] = [
+  {
+    path: '/breadcrumb/1',
+    name: 'Breadcrumb1',
+    meta: {
+      title: '面包屑1'
+    },
+    children: []
+  },
+  {
+    path: '/breadcrumb/2',
+    name: 'Breadcrumb2',
+    meta: {
+      title: '面包屑2'
+    },
+    children: []
+  }
+]
+
+const renderTitle = (route: PlusRouteRecordRaw) => {
+  return <div style={{ color: '#000' }}>{route.name} </div>
+}
+</script>

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

@@ -0,0 +1,14 @@
+<template>
+  <PlusCheckCard
+    v-model="checked"
+    title="名称"
+    description="description"
+    avatar="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>

package/docs/examples/check-card/custom.vue

@@ -0,0 +1,32 @@
+<template>
+  <PlusCheckCard
+    v-model="checked"
+    :title="getTitle"
+    :description="getDescription"
+    :avatar="getAvatar"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref, h } from 'vue'
+import { ElButton, ElImage } from 'element-plus'
+
+const checked = ref(true)
+
+const getAvatar = () => {
+  return h(ElImage, {
+    style: {
+      width: '50px'
+    },
+    src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  })
+}
+
+const getTitle = () => {
+  return h(ElButton, () => 'title')
+}
+
+const getDescription = () => {
+  return 'description'
+}
+</script>

package/docs/examples/check-card/disabled.vue

@@ -0,0 +1,15 @@
+<template>
+  <PlusCheckCard
+    v-model="checked"
+    title="名称"
+    disabled
+    description="description"
+    avatar="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>

package/docs/examples/check-card/extra.vue

@@ -0,0 +1,25 @@
+<template>
+  <PlusCheckCard
+    v-model="checked"
+    title="名称"
+    description="description"
+    :extra="extra"
+    avatar="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+    @extra="handleExtra"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref, h } from 'vue'
+import { ElButton, ElMessage } from 'element-plus'
+
+const checked = ref(true)
+
+const extra = () => {
+  return h(ElButton, () => '操作栏')
+}
+
+const handleExtra = () => {
+  ElMessage.success('handleExtra')
+}
+</script>

package/docs/examples/check-card/size.vue

@@ -0,0 +1,36 @@
+<template>
+  <PlusCheckCard
+    v-model="checked"
+    title="名称"
+    description="description"
+    avatar="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+    class="mgb-10"
+  />
+  <PlusCheckCard
+    v-model="checked"
+    size="large"
+    title="名称"
+    description="description"
+    avatar="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+    class="mgb-10"
+  />
+  <PlusCheckCard
+    v-model="checked"
+    size="small"
+    title="名称"
+    description="description"
+    avatar="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+  />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>
+
+<style lang="scss" scoped>
+.mgb-10 {
+  margin-bottom: 10px;
+}
+</style>

package/docs/examples/check-card/slot.vue

@@ -0,0 +1,13 @@
+<template>
+  <PlusCheckCard v-model="checked">
+    <template #avatar> avatar </template>
+    <template #title> title </template>
+    <template #description> description </template>
+  </PlusCheckCard>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const checked = ref(true)
+</script>

package/docs/examples/check-card/tsx.vue

@@ -0,0 +1,34 @@
+<template>
+  <PlusCheckCard
+    v-model="checked"
+    :title="getTitle"
+    :description="getDescription"
+    :avatar="getAvatar"
+  />
+</template>
+
+<script lang="tsx" setup>
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { ref } from 'vue'
+import { ElButton, ElImage } from 'element-plus'
+
+const checked = ref(true)
+
+const getAvatar = () => {
+  return (
+    <ElImage
+      style={{ width: '50px' }}
+      src="https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"
+    />
+  )
+}
+
+const getTitle = () => {
+  return <ElButton>title</ElButton>
+}
+
+const getDescription = () => {
+  return 'description'
+}
+</script>

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

@@ -0,0 +1,24 @@
+<template>
+  <PlusCheckCardGroup v-model="list" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list = ref('0')
+
+const options = [
+  {
+    title: 'title0',
+    value: '0',
+    description: 'description0',
+    avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  },
+  {
+    title: 'title1',
+    value: '1',
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>

package/docs/examples/check-card-group/custom.vue

@@ -0,0 +1,29 @@
+<template>
+  <PlusCheckCardGroup v-model="list" :options="options" />
+</template>
+
+<script lang="ts" setup>
+import { ref, h } from 'vue'
+
+const list = ref('0')
+
+const options = [
+  {
+    title: () => h('div', { style: { color: 'red' } }, 'title0'),
+    value: '0',
+    description: () => h('div', { style: { color: 'green' } }, 'description'),
+    avatar: () =>
+      h(
+        'img',
+        { src: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg' },
+        'description'
+      )
+  },
+  {
+    title: 'title1',
+    value: '1',
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>

package/docs/examples/check-card-group/disabled.vue

@@ -0,0 +1,25 @@
+<template>
+  <PlusCheckCardGroup v-model="list2" :options="options" disabled />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list2 = ref('0')
+
+const options = [
+  {
+    title: 'title0',
+    value: '0',
+    description: 'description0',
+    avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  },
+  {
+    title: 'title1',
+    value: '1',
+    disabled: false,
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>

package/docs/examples/check-card-group/multiple.vue

@@ -0,0 +1,24 @@
+<template>
+  <PlusCheckCardGroup v-model="list1" :options="options" multiple />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list1 = ref([])
+
+const options = [
+  {
+    title: 'title0',
+    value: '0',
+    description: 'description0',
+    avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  },
+  {
+    title: 'title1',
+    value: '1',
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>

package/docs/examples/check-card-group/size.vue

@@ -0,0 +1,25 @@
+<template>
+  <PlusCheckCardGroup v-model="list2" :options="options" size="small" />
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list2 = ref('0')
+
+const options = [
+  {
+    title: 'title0',
+    value: '0',
+    description: 'description0',
+    avatar: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg'
+  },
+  {
+    title: 'title1',
+    value: '1',
+    size: 'default',
+    description: 'description1',
+    avatar: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg'
+  }
+]
+</script>