@hoenergy/hoenergy-template-pc 1.0.0

package/docs/tailwind.css

@@ -0,0 +1,4 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+

package/docs/tailwind.generated.css

@@ -0,0 +1 @@
+*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.19 | MIT License | https://tailwindcss.com*/*,:after,:before{box-sizing:border-box;border:0 solid #e5e7eb}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;-moz-tab-size:4;-o-tab-size:4;tab-size:4;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-webkit-tap-highlight-color:transparent}body{margin:0;line-height:inherit}hr{height:0;color:inherit;border-top-width:1px}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-variation-settings:normal;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{text-indent:0;border-color:inherit;border-collapse:collapse}button,input,optgroup,select,textarea{font-family:inherit;font-feature-settings:inherit;font-variation-settings:inherit;font-size:100%;font-weight:inherit;line-height:inherit;letter-spacing:inherit;color:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{opacity:1;color:#9ca3af}input::placeholder,textarea::placeholder{opacity:1;color:#9ca3af}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{max-width:100%;height:auto}[hidden]:where(:not([hidden=until-found])){display:none}.collapse{visibility:collapse}.fixed{position:fixed}.sticky{position:sticky}.mx-1{margin-right:.25rem}.ml-1,.mx-1{margin-left:.25rem}.ml-auto{margin-left:auto}.mt-1{margin-top:.25rem}.flex{display:flex}.\!table{display:table!important}.table{display:table}.hidden{display:none}.h-full{height:100%}.border-collapse{border-collapse:collapse}.cursor-pointer{cursor:pointer}.resize{resize:both}.flex-row{flex-direction:row}.items-center{align-items:center}.border{border-width:1px}.p-0{padding:0}.pb-\[16px\]{padding-bottom:16px}.text-gray-400{--tw-text-opacity:1;color:rgb(156 163 175/var(--tw-text-opacity,1))}.filter{filter:var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow)}.transition{transition-property:color,background-color,border-color,text-decoration-color,fill,stroke,opacity,box-shadow,transform,filter,backdrop-filter;transition-timing-function:cubic-bezier(.4,0,.2,1);transition-duration:.15s}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@hoenergy/hoenergy-template-pc",
+  "version": "1.0.0",
+  "description": "A cross-compatible Vue component library with metadata extraction",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "dist/index.js",
+  "module": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "unpkg": "dist/index.global.js",
+  "exports": {
+    ".": {
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build:tailwind": "tailwindcss -i ./docs/tailwind.css -o ./docs/tailwind.generated.css --minify",
+    "build": "npm run build:tailwind && vite build --mode library",
+    "dev": "npm run build:tailwind && http-server . -p 3000 -c-1",
+    "test": "vite",
+    "start": "npm run dev"
+  },
+  "peerDependencies": {
+    "naive-ui": ">=2.12.0",
+    "vue": "^3.0.0"
+  },
+  "dependencies": {
+    "i18n-auto-extractor": "^1.3.2",
+    "sass": "^1.97.3",
+    "vite-plugin-dts": "^4.5.4",
+    "vue-i18n": "^11.2.8",
+    "vuedraggable": "^2.24.3"
+  },
+  "devDependencies": {
+    "@vicons/antd": "^0.12.0",
+    "@vitejs/plugin-vue": "^4.6.2",
+    "autoprefixer": "^10.4.18",
+    "http-server": "^14.1.1",
+    "i18n-auto-extractor": "^1.3.2",
+    "naive-ui": "^2.34.4",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.3.5",
+    "tsup": "^6.1.0",
+    "typescript": "^5.0.0",
+    "vite": "^4.5.14",
+    "vue": "^3.3.0",
+    "vue-i18n": "^11.2.8"
+  }
+}

package/playground/App.vue

@@ -0,0 +1,60 @@
+<template>
+  <n-config-provider :locale="zhCN" :date-locale="dateZhCN">
+    <div class="p-8">
+      <p2>组件测试</p2>
+      <FormaxTable :columns="columns" :request="loadDataTable" :toolbar-show="true" :can-resize="false"
+        :row-key="(row: any) => row.name" />
+    </div>
+  </n-config-provider>
+</template>
+
+<script setup lang="ts">
+import { FormaxButton, FormaxTable } from '../src'
+import { NConfigProvider, zhCN, dateZhCN, viVN, dateViVN } from 'naive-ui'
+let columns = [
+  { title: '姓名', key: 'name' },
+  { title: '年龄', key: 'age' },
+  { title: '地址', key: 'address' },
+]
+async function loadDataTable() {
+
+  return {
+    total: 23,
+    list: [
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '李四', age: 20, address: '上海' },
+      { name: '王五', age: 22, address: '广州' },
+      { name: '赵六', age: 24, address: '深圳' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '李四', age: 20, address: '上海' },
+      { name: '王五', age: 22, address: '广州' },
+      { name: '赵六', age: 24, address: '深圳' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '李四', age: 20, address: '上海' },
+      { name: '王五', age: 22, address: '广州' },
+      { name: '赵六', age: 24, address: '深圳' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+      { name: '李四', age: 20, address: '上海' },
+      { name: '王五', age: 22, address: '广州' },
+      { name: '赵六', age: 24, address: '深圳' },
+      { name: '王二', age: 26, address: '成都' },
+      { name: '王二', age: 26, address: '成都' }
+    ]
+  }
+}
+</script>
+
+<style scoped>
+section {
+  @apply border p-4 rounded-lg;
+}
+</style>

package/playground/index.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Formax UI Playground</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="./main.ts"></script>
+  </body>
+</html>

package/playground/main.ts

@@ -0,0 +1,12 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import NaiveUI from 'naive-ui'
+import FormaxUI from '../src'
+import '../docs/tailwind.generated.css'
+import { $at } from 'i18n-auto-extractor'
+
+const app = createApp(App)
+app.use(NaiveUI)
+app.use(FormaxUI)
+app.config.globalProperties.$at = $at
+app.mount('#app')

package/src/components/data/table/FormaxTable/index.ts

@@ -0,0 +1,143 @@
+import BasicTable from './src/Table.vue'
+import type { FormaxComponent, ComponentMeta } from '../../../../types'
+
+export { BasicTable }
+export * from './src/types/table'
+export * from './src/types/tableAction'
+
+export const FormaxTableComponent = BasicTable as any as FormaxComponent
+
+const meta: ComponentMeta = {
+  name: 'FormaxTable',
+  label: '高级数据表格',
+  description:
+    '基于 Naive UI 封装的高级数据表格组件，支持请求分页、工具栏、列设置等能力。',
+  props: {
+    title: {
+      type: 'string',
+      default: '',
+      description: '表格标题',
+    },
+    titleTooltip: {
+      type: 'string',
+      default: '',
+      description: '标题右侧提示文案',
+    },
+    dataSource: {
+      type: 'array | function',
+      default: [],
+      description: '表格数据源，或请求数据的函数（结合 request 使用）',
+    },
+    columns: {
+      type: 'array',
+      default: [],
+      description: '列配置，兼容 Naive UI NDataTable 的列定义',
+    },
+    pagination: {
+      type: 'object | boolean',
+      default: {},
+      description: '分页配置，false 时不显示分页',
+    },
+    toolbarShow: {
+      type: 'boolean',
+      default: false,
+      description: '是否显示右侧工具栏（斑马纹 / 刷新 / 密度 / 列设置）',
+    },
+    hasForm: {
+      type: 'boolean',
+      default: true,
+      description: '是否有顶部查询表单，用于计算表格高度',
+    },
+    canResize: {
+      type: 'boolean',
+      default: true,
+      description: '是否自动计算表格高度',
+    },
+    canExpand: {
+      type: 'boolean',
+      default: true,
+      description: '是否允许展开行（树形表格时）',
+    },
+    request: {
+      type: 'function',
+      default: undefined,
+      description: '远程请求函数，返回 Promise，配合分页参数使用',
+    },
+  },
+  events: [
+    {
+      name: 'fetch-success',
+      description: '请求成功时触发',
+      payload: '{ items, resultTotal }',
+    },
+    { name: 'fetch-error', description: '请求失败时触发', payload: 'Error' },
+    {
+      name: 'update:checked-row-keys',
+      description: '勾选行变化时触发',
+      payload: 'rowKeys: string[]',
+    },
+    {
+      name: 'edit-end',
+      description: '单元格编辑结束时触发',
+      payload: 'row, column',
+    },
+    { name: 'edit-row-end', description: '整行编辑结束时触发', payload: 'row' },
+  ],
+  slots: [
+    {
+      name: 'tableTitle',
+      description: '表格左上头部插槽，一般用来放置操作按钮',
+    },
+    {
+      name: 'toolbar',
+      description: '表格右上工具栏插槽，一般用来放置刷新、密度、列设置等按钮',
+    },
+    { name: 'default', description: '默认插槽，一般用来放置表格内容' },
+  ],
+  usage: `<template>
+  <FormaxTable
+    title="用户列表"
+    title-tooltip="支持请求分页、工具栏、列设置等能力"
+    :columns="columns"
+    :data-source="tableData"
+    :toolbar-show="true"
+    :has-form="true"
+    :can-resize="true"
+    :can-expand="true"
+    :request="fetchTableData"
+  />
+</template>
+
+<script setup lang="ts">
+import type { BasicColumn } from 'formax-ui'
+
+const columns: BasicColumn[] = [
+  { title: '姓名', key: 'name' },
+  { title: '年龄', key: 'age' },
+  { title: '地址', key: 'address' },
+]
+
+const tableData = [
+  { name: '张三2323233333333333333333333333333333333333333', age: 18, address: '北京' },
+  { name: '李四', age: 20, address: '上海' },
+]
+
+async function fetchTableData(params: Record<string, any>) {
+  // 这里可以对接实际接口
+  // 返回结构示例：
+  return {
+    total: 100,
+    list: [],
+  }
+}
+</script>`,
+  package: 'data',
+  category: 'table',
+  key: 'FormaxTable',
+  conKey: 'DCFormaxTable',
+  image: 'DCFormaxTable.png',
+}
+
+;(FormaxTableComponent as any).__doc_meta__ = meta
+
+export default FormaxTableComponent

package/src/components/data/table/FormaxTable/src/BasicTable.ts

@@ -0,0 +1,12 @@
+import { defineComponent, h } from 'vue'
+import { basicProps } from './props'
+// @ts-ignore
+import Table from './Table.vue'
+
+export default defineComponent({
+  name: 'FormaxBasicTable',
+  props: basicProps,
+  setup(props, { slots }) {
+    return () => h(Table, props, slots)
+  },
+})