@wlydfe/pro-ui 0.2.20 → 0.2.21

package/packages/locale/lang/zh-tw.ts

@@ -0,0 +1,68 @@
+export default {
+  name: 'zh-tw',
+  plus: {
+    dialog: {
+      confirmText: '確定',
+      cancelText: '取消',
+      title: '彈窗'
+    },
+    datepicker: {
+      startPlaceholder: '請選擇開始時間',
+      endPlaceholder: '請選擇結束時間'
+    },
+    dialogForm: {
+      title: '彈窗表單'
+    },
+    drawerForm: {
+      title: '抽屜表單',
+      confirmText: '確定',
+      cancelText: '取消'
+    },
+    form: {
+      submitText: '提交',
+      resetText: '重置',
+      errorTip: '請完整填寫表單然後再次提交！'
+    },
+    field: {
+      pleaseEnter: '請輸入',
+      pleaseSelect: '請選擇'
+    },
+    popover: {
+      confirmText: '確定',
+      cancelText: '取消'
+    },
+    search: {
+      searchText: '搜尋',
+      resetText: '重置',
+      expand: '展開',
+      retract: '收起'
+    },
+    table: {
+      title: '表格',
+      density: '密度',
+      refresh: '刷新',
+      columnSettings: '列設定',
+      selectAll: '全選',
+      default: '預設',
+      loose: '寬鬆',
+      compact: '緊湊',
+      action: '操作',
+      more: '更多',
+      confirmToPerformThisOperation: '確定執行本次操作?',
+      prompt: '提示',
+      sort: '排序',
+      resetText: '重置'
+    },
+    stepsForm: {
+      nextText: '下一步',
+      preText: '上一步',
+      submitText: '提交'
+    },
+    inputTag: {
+      placeholder: '請輸入關鍵字後按回車/空白鍵'
+    },
+    header: {
+      logout: '登出'
+    }
+  }
+}

package/packages/locale/package.json

@@ -0,0 +1,12 @@
+{
+  "name": "@wlydfe/pro-ui-locale",
+  "private": true,
+  "version": "0.0.1",
+  "description": "plus-pro-components locale",
+  "license": "MIT",
+  "main": "index.ts",
+  "module": "index.ts",
+  "unpkg": "index.js",
+  "jsdelivr": "index.js",
+  "types": "index.d.ts"
+}

package/packages/play/README.md

@@ -0,0 +1,26 @@
+# @wlydfe/pro-ui-play
+
+## 项目结构
+
+**`src/__nav.vue`和`src/router/__routes.ts` 文件为自动生成文件，无需修改。**
+
+```sh
+├── README.md
+├── gFiles.ts              #自动生成文件脚本
+├── src
+|  ├── App.vue
+|  ├── assets
+|  ├── main.ts
+|  ├── router
+|  |  ├── index.ts
+|  |  └── __routes.ts      #路由文件 自动生成文件无需修改
+|  ├── style.css
+|  ├── views               #组件预览文件  文件自动生成 内容需要自己填充
+|  |  ├── dialog.vue
+|  |  └── pagination.vue
+|  └── __nav.vue           #导航文件 自动生成文件无需修改
+├── tsconfig.app.json
+├── tsconfig.json
+├── tsconfig.node.json
+└── vite.config.ts         #vite 配置文件
+```

package/packages/play/gFiles.ts

@@ -0,0 +1,83 @@
+import fs from 'node:fs/promises'
+import { fileURLToPath, URL } from 'node:url'
+import { format } from 'prettier'
+import glob from 'fast-glob'
+import { camelCase, upperFirst } from 'lodash'
+
+const resolve = (dir: string) => fileURLToPath(new URL(dir, import.meta.url))
+
+export const gFiles = async () => {
+  const formatConfigPath = resolve('../../.prettierrc.js')
+  // eslint-disable-next-line @typescript-eslint/no-var-requires
+  const formatConfig = require(formatConfigPath)
+
+  const components = await glob('**/src/index.vue', {
+    cwd: '../components',
+    absolute: true,
+    onlyFiles: true
+  })
+
+  const routes = []
+  const navData = []
+
+  for (let index = 0; index < components.length; index++) {
+    const item = components[index]
+    const reg = /\/components\/([a-zA-Z_-]+)\/src/g
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    const routeName = reg.exec(item)![1]
+    const viewFile = resolve(`./src/views/${routeName}.vue`)
+
+    // 生成视图views文件
+    try {
+      await fs.access(viewFile)
+    } catch (error) {
+      const template = `<template><Plus${upperFirst(camelCase(routeName))}/></template>`
+      const data = format(template, { ...formatConfig, parser: 'vue' })
+      await fs.writeFile(viewFile, data)
+    }
+
+    routes.push({
+      path: `/${routeName}`,
+      name: `${routeName}`,
+      component: `@/views/${routeName}.vue`
+    })
+    navData.push(`<router-link class="link" to="/${routeName}">${routeName}</router-link>`)
+  }
+
+  const result = `export default ${JSON.stringify(routes)}`
+  const data = format(result, { ...formatConfig, parser: 'babel-ts' })
+  const routesFile = resolve('./src/router/__routes.ts')
+  const navFile = resolve('./src/__nav.vue')
+  const navDataStr = format(`<template><div class="nav">${navData.join(' ')}</div></template>`, {
+    ...formatConfig,
+    parser: 'vue'
+  })
+
+  // __routes.ts 文件处理
+  try {
+    await fs.access(routesFile)
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    const originRoutes = await import('./src/router/__routes.ts')
+    if (originRoutes.default?.length !== routes.length) {
+      // 生成路由routes文件
+      await fs.writeFile(routesFile, data)
+    }
+  } catch {
+    await fs.writeFile(routesFile, data)
+  }
+
+  // __nav.vue 文件处理
+  try {
+    await fs.access(navFile)
+    const originNav = await fs.readFile('./src/__nav.vue', 'utf-8')
+    const reg = /<router-link/g
+    const originNavArray = [...originNav.matchAll(reg)]
+    if (originNavArray?.length !== routes.length) {
+      // 生成路由导航文件
+      await fs.writeFile(navFile, navDataStr)
+    }
+  } catch {
+    await fs.writeFile(navFile, navDataStr)
+  }
+}

package/packages/play/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" href="/logo.png" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>@wlydfe/pro-ui-view</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

package/packages/play/package.json

@@ -0,0 +1,31 @@
+{
+  "name": "@wlydfe/pro-ui-play",
+  "version": "0.0.0",
+  "private": true,
+  "scripts": {
+    "dev": "vite",
+    "build": "run-p type-check build-only",
+    "preview": "vite preview",
+    "build-only": "vite build",
+    "type-check": "vue-tsc --noEmit -p tsconfig.app.json --composite false"
+  },
+  "dependencies": {
+    "element-plus": "^2.6.3",
+    "vue": "^3.4.21",
+    "vue-router": "^4.2.0"
+  },
+  "devDependencies": {
+    "@tsconfig/node18": "^2.0.1",
+    "@types/node": "^18.16.8",
+    "@types/prettier": "^2.7.2",
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vitejs/plugin-vue-jsx": "^3.0.1",
+    "@vue/tsconfig": "^0.4.0",
+    "npm-run-all": "^4.1.5",
+    "typescript": "~5.0.4",
+    "unplugin-auto-import": "^0.17.5",
+    "unplugin-vue-components": "^0.26.0",
+    "vite": "4.3.5",
+    "vue-tsc": "^1.6.4"
+  }
+}

package/packages/play/src/App.vue

@@ -0,0 +1,102 @@
+<template>
+  <!-- @vue-ignore -->
+  <el-config-provider :locale="locales" namespace="el">
+    <AppNav>
+      <el-dropdown>
+        <span class="el-dropdown-link">
+          {{ language }}
+          <el-icon class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="(item, key) in langs" :key="key" @click="handleLang(key)">
+              {{ item.langName }}
+            </el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
+
+      <el-switch
+        v-model="dark"
+        :active-action-icon="Moon"
+        :inactive-action-icon="Sunny"
+        style="--el-switch-on-color: #2c2c2c; --el-switch-off-color: #f2f2f2"
+        @change="handleChange"
+      />
+    </AppNav>
+  </el-config-provider>
+</template>
+
+<script setup lang="ts">
+/* eslint-disable @typescript-eslint/ban-ts-comment*/
+import { ref } from 'vue'
+import { Moon, Sunny, ArrowDown } from '@element-plus/icons-vue'
+import zhCn from 'element-plus/es/locale/lang/zh-cn'
+import en from 'element-plus/es/locale/lang/en'
+import ja from 'element-plus/es/locale/lang/ja'
+// @ts-ignore
+import type { Language } from '../../locale'
+import { zhCn as plusZhCn, en as plusEn, ja as plusJa } from '../../locale'
+import AppNav from './views/layout.vue'
+// import AppNav from './__nav.vue' <el-icon><Sunny /></el-icon>
+
+const langs = {
+  zhCn: {
+    langName: '中文',
+    ...zhCn,
+    ...plusZhCn
+  },
+  en: {
+    langName: 'English',
+    ...en,
+    ...plusEn
+  },
+  ja: {
+    langName: 'Japanese',
+    ...ja,
+    ...plusJa
+  }
+}
+
+const dark = ref(false)
+const language = ref('中文')
+const locales = ref<Language & { langName: string }>(langs.zhCn)
+
+const handleLang = (key: keyof typeof langs) => {
+  locales.value = langs[key]
+  language.value = locales.value.langName
+}
+
+const handleChange = (val: any) => {
+  if (val) {
+    document.documentElement.classList.add('dark')
+  } else {
+    document.documentElement.classList.remove('dark')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.nav-wrapper {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1;
+  display: flex;
+}
+
+.switch-language {
+  margin-right: 10px;
+}
+
+.el-dropdown-link {
+  cursor: pointer;
+  display: inline-block;
+  margin-right: 10px;
+  &:focus-visible {
+    outline: none;
+  }
+}
+</style>

package/packages/play/src/__nav.vue

@@ -0,0 +1,27 @@
+<template>
+  <div class="nav">
+    <router-link class="link" to="/breadcrumb">breadcrumb</router-link>
+    <router-link class="link" to="/check-card">check-card</router-link>
+    <router-link class="link" to="/check-card-group">check-card-group</router-link>
+    <router-link class="link" to="/date-picker">date-picker</router-link>
+    <router-link class="link" to="/descriptions">descriptions</router-link>
+    <router-link class="link" to="/dialog">dialog</router-link>
+    <router-link class="link" to="/dialog-form">dialog-form</router-link>
+    <router-link class="link" to="/display-item">display-item</router-link>
+    <router-link class="link" to="/drawer-form">drawer-form</router-link>
+    <router-link class="link" to="/form">form</router-link>
+    <router-link class="link" to="/form-item">form-item</router-link>
+    <router-link class="link" to="/header">header</router-link>
+    <router-link class="link" to="/input-tag">input-tag</router-link>
+    <router-link class="link" to="/layout">layout</router-link>
+    <router-link class="link" to="/page">page</router-link>
+    <router-link class="link" to="/popover">popover</router-link>
+    <router-link class="link" to="/pagination">pagination</router-link>
+    <router-link class="link" to="/radio">radio</router-link>
+    <router-link class="link" to="/render">render</router-link>
+    <router-link class="link" to="/sidebar">sidebar</router-link>
+    <router-link class="link" to="/search">search</router-link>
+    <router-link class="link" to="/steps-form">steps-form</router-link>
+    <router-link class="link" to="/table">table</router-link>
+  </div>
+</template>

package/packages/play/src/index.css

@@ -0,0 +1,10 @@
+.link {
+  display: inline-block;
+  margin-left: 10px;
+  margin-bottom: 10px;
+}
+
+* {
+  padding: 0;
+  margin: 0;
+}

package/packages/play/src/main.ts

@@ -0,0 +1,21 @@
+import type { Plugin } from 'vue'
+import { createApp } from 'vue'
+import ElementPlus from 'element-plus'
+import router from '@/router'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import PlusProComponents from '../../plus-pro-components/index'
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-ignore
+import '../../theme-chalk/src/index.scss'
+import App from './App.vue'
+import './index.css'
+import 'element-plus/dist/index.css'
+import 'element-plus/theme-chalk/dark/css-vars.css'
+
+const app = createApp(App)
+app
+  .use(router)
+  .use(ElementPlus)
+  .use(PlusProComponents as unknown as Plugin)
+  .mount('#app')

package/packages/play/src/router/__routes.ts

@@ -0,0 +1,29 @@
+export default [
+  { path: '/breadcrumb', name: 'breadcrumb', component: '@/views/breadcrumb.vue' },
+  { path: '/check-card', name: 'check-card', component: '@/views/check-card.vue' },
+  {
+    path: '/check-card-group',
+    name: 'check-card-group',
+    component: '@/views/check-card-group.vue'
+  },
+  { path: '/date-picker', name: 'date-picker', component: '@/views/date-picker.vue' },
+  { path: '/descriptions', name: 'descriptions', component: '@/views/descriptions.vue' },
+  { path: '/dialog', name: 'dialog', component: '@/views/dialog.vue' },
+  { path: '/dialog-form', name: 'dialog-form', component: '@/views/dialog-form.vue' },
+  { path: '/display-item', name: 'display-item', component: '@/views/display-item.vue' },
+  { path: '/drawer-form', name: 'drawer-form', component: '@/views/drawer-form.vue' },
+  { path: '/form', name: 'form', component: '@/views/form.vue' },
+  { path: '/form-item', name: 'form-item', component: '@/views/form-item.vue' },
+  { path: '/header', name: 'header', component: '@/views/header.vue' },
+  { path: '/input-tag', name: 'input-tag', component: '@/views/input-tag.vue' },
+  { path: '/layout', name: 'layout', component: '@/views/layout.vue' },
+  { path: '/page', name: 'page', component: '@/views/page.vue' },
+  { path: '/popover', name: 'popover', component: '@/views/popover.vue' },
+  { path: '/pagination', name: 'pagination', component: '@/views/pagination.vue' },
+  { path: '/radio', name: 'radio', component: '@/views/radio.vue' },
+  { path: '/render', name: 'render', component: '@/views/render.vue' },
+  { path: '/sidebar', name: 'sidebar', component: '@/views/sidebar.vue' },
+  { path: '/search', name: 'search', component: '@/views/search.vue' },
+  { path: '/steps-form', name: 'steps-form', component: '@/views/steps-form.vue' },
+  { path: '/table', name: 'table', component: '@/views/table.vue' }
+]

package/packages/play/src/router/index.ts

@@ -0,0 +1,55 @@
+import type { RouteRecordRaw } from 'vue-router'
+import { createRouter, createWebHistory } from 'vue-router'
+import { h } from 'vue'
+import { capitalize } from 'lodash-es'
+import { Document as DocumentIcon } from '@element-plus/icons-vue'
+import data from './__routes'
+
+const moduleFiles = import.meta.glob('../views/**/*.vue', {
+  eager: true
+})
+
+const getRoutes = (moduleFiles: Record<string, any>) => {
+  const getComponent = (path: string) => {
+    const key = Object.keys(moduleFiles).find(i => i.includes(`${path}.vue`)) as string
+    return moduleFiles[key]?.default
+  }
+
+  const routes = data.map(item => ({
+    path: item.path,
+    name: capitalize(item.name),
+    component: getComponent(item.path),
+    meta: {
+      icon: DocumentIcon
+    }
+  }))
+
+  return routes
+}
+
+export const routes = [
+  {
+    path: '/https://plus-pro-components.com',
+    name: 'index',
+    meta: {
+      title: '外链',
+      icon: h('img', {
+        src: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
+        style: {
+          width: '20px',
+          height: '16px',
+          padding: '0 2px',
+          boxSizing: 'border-box'
+        }
+      })
+    }
+  },
+  ...getRoutes(moduleFiles)
+]
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: routes as unknown as Readonly<RouteRecordRaw[]>
+})
+
+export default router

package/packages/play/src/style.scss

@@ -0,0 +1,6 @@
+@forward 'element-plus/theme-chalk/src/mixins/config.scss' with (
+  $namespace: 'el'
+);
+@forward '../../theme-chalk/src/mixins/config.scss' with (
+  $el-namespace: 'el'
+);

package/packages/play/src/views/breadcrumb.vue

@@ -0,0 +1 @@
+<template><PlusBreadcrumb /></template>

package/packages/play/src/views/check-card-group.vue

@@ -0,0 +1,50 @@
+<template>
+  单选
+  <PlusCheckCardGroup v-model="list" :options="options" />
+  {{ list }}
+  <br />
+  多选
+  <PlusCheckCardGroup v-model="list1" :options="options" multiple />
+  {{ list1 }}
+
+  disabled
+  <PlusCheckCardGroup v-model="list2" :options="options" multiple disabled />
+
+  slot
+  <PlusCheckCardGroup v-model="list3" :options="options">
+    <template #avatar-0> 000 </template>
+    <template #title-0="{ title }"> {{ title }} </template>
+    <template #description-0="{ description }"> {{ description }} </template>
+  </PlusCheckCardGroup>
+
+  slot
+  <PlusCheckCardGroup v-model="list4" :options="options">
+    <template #avatar> 000 </template>
+    <template #title="{ title }"> {{ title }} </template>
+    <template #description="{ description }"> {{ description }} </template>
+  </PlusCheckCardGroup>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const list = ref('0')
+const list1 = ref([])
+const list2 = ref([])
+const list3 = ref([])
+const list4 = 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/packages/play/src/views/check-card.vue

@@ -0,0 +1,24 @@
+<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>
+const checked = true
+const description = (data: any) => {
+  console.log(data, 'data')
+  return 'descriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescriptiondescription'
+}
+
+const extra = () => '...'
+
+const handleExtra = () => {
+  console.log('handleExtra')
+}
+</script>

package/packages/play/src/views/date-picker.vue

@@ -0,0 +1,3 @@
+<template>
+  <PlusDatePicker />
+</template>