formax_sgj-ui 1.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/dist/index.d.ts +35 -0
  2. package/dist/index.global.js +36231 -0
  3. package/dist/index.js +140 -0
  4. package/dist/index.mjs +116 -0
  5. package/docs/index.html +252 -0
  6. package/package.json +29 -0
  7. package/src/components/FormaxButton.ts +75 -0
  8. package/src/index.ts +31 -0
  9. package/src/types.ts +27 -0
  10. package/tsconfig.json +13 -0
package/dist/index.js ADDED
@@ -0,0 +1,140 @@
1
+ "use strict";
2
+ var __defProp = Object.defineProperty;
3
+ var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
+ var __getOwnPropNames = Object.getOwnPropertyNames;
5
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
6
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
7
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
8
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
9
+ var __spreadValues = (a, b) => {
10
+ for (var prop in b || (b = {}))
11
+ if (__hasOwnProp.call(b, prop))
12
+ __defNormalProp(a, prop, b[prop]);
13
+ if (__getOwnPropSymbols)
14
+ for (var prop of __getOwnPropSymbols(b)) {
15
+ if (__propIsEnum.call(b, prop))
16
+ __defNormalProp(a, prop, b[prop]);
17
+ }
18
+ return a;
19
+ };
20
+ var __export = (target, all) => {
21
+ for (var name in all)
22
+ __defProp(target, name, { get: all[name], enumerable: true });
23
+ };
24
+ var __copyProps = (to, from, except, desc) => {
25
+ if (from && typeof from === "object" || typeof from === "function") {
26
+ for (let key of __getOwnPropNames(from))
27
+ if (!__hasOwnProp.call(to, key) && key !== except)
28
+ __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
29
+ }
30
+ return to;
31
+ };
32
+ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
33
+
34
+ // src/index.ts
35
+ var src_exports = {};
36
+ __export(src_exports, {
37
+ FormaxButton: () => FormaxButton,
38
+ componentList: () => componentList,
39
+ default: () => src_default,
40
+ install: () => install
41
+ });
42
+ module.exports = __toCommonJS(src_exports);
43
+ var import_vue_demi2 = require("vue-demi");
44
+
45
+ // src/components/FormaxButton.ts
46
+ var import_vue_demi = require("vue-demi");
47
+ var FormaxButton = (0, import_vue_demi.defineComponent)({
48
+ name: "FormaxButton",
49
+ props: {
50
+ label: {
51
+ type: String,
52
+ default: "Button"
53
+ },
54
+ type: {
55
+ type: String,
56
+ default: "default"
57
+ // primary, danger, default
58
+ }
59
+ },
60
+ setup(props, { emit, slots }) {
61
+ return () => {
62
+ const style = {
63
+ padding: "8px 16px",
64
+ borderRadius: "4px",
65
+ border: "1px solid #ccc",
66
+ cursor: "pointer",
67
+ backgroundColor: props.type === "primary" ? "#007bff" : props.type === "danger" ? "#dc3545" : "#fff",
68
+ color: props.type === "primary" || props.type === "danger" ? "#fff" : "#333",
69
+ fontSize: "14px"
70
+ };
71
+ const label = slots.default ? slots.default() : props.label;
72
+ if (import_vue_demi.isVue2) {
73
+ return (0, import_vue_demi.h)("button", {
74
+ style,
75
+ on: {
76
+ click: (event) => emit("click", event)
77
+ }
78
+ }, label);
79
+ } else {
80
+ return (0, import_vue_demi.h)("button", {
81
+ style,
82
+ onClick: (event) => emit("click", event)
83
+ }, label);
84
+ }
85
+ };
86
+ }
87
+ });
88
+ var meta = {
89
+ name: "FormaxButton",
90
+ label: "\u901A\u7528\u6309\u94AE",
91
+ description: "\u4E00\u4E2A\u517C\u5BB9Vue 2/3\u7684\u57FA\u7840\u6309\u94AE\u7EC4\u4EF6",
92
+ props: {
93
+ label: {
94
+ type: "string",
95
+ default: "Button",
96
+ description: "\u6309\u94AE\u6587\u672C"
97
+ },
98
+ type: {
99
+ type: "string",
100
+ default: "default",
101
+ description: "\u6309\u94AE\u7C7B\u578B",
102
+ options: ["default", "primary", "danger"]
103
+ }
104
+ },
105
+ events: [
106
+ {
107
+ name: "click",
108
+ description: "\u70B9\u51FB\u6309\u94AE\u65F6\u89E6\u53D1",
109
+ payload: "Event"
110
+ }
111
+ ],
112
+ slots: ["default"],
113
+ usage: `<FormaxButton type="primary" label="Click Me" @click="handleClick" />`
114
+ };
115
+ FormaxButton.__doc_meta__ = meta;
116
+
117
+ // src/index.ts
118
+ var components = {
119
+ FormaxButton
120
+ };
121
+ function install(app) {
122
+ Object.keys(components).forEach((key) => {
123
+ if (import_vue_demi2.isVue2) {
124
+ app.component(key, components[key]);
125
+ } else {
126
+ app.component(key, components[key]);
127
+ }
128
+ });
129
+ }
130
+ var componentList = Object.values(components).map((comp) => comp.__doc_meta__).filter((meta2) => !!meta2);
131
+ var src_default = __spreadValues({
132
+ install,
133
+ componentList
134
+ }, components);
135
+ // Annotate the CommonJS export names for ESM import in node:
136
+ 0 && (module.exports = {
137
+ FormaxButton,
138
+ componentList,
139
+ install
140
+ });
package/dist/index.mjs ADDED
@@ -0,0 +1,116 @@
1
+ var __defProp = Object.defineProperty;
2
+ var __getOwnPropSymbols = Object.getOwnPropertySymbols;
3
+ var __hasOwnProp = Object.prototype.hasOwnProperty;
4
+ var __propIsEnum = Object.prototype.propertyIsEnumerable;
5
+ var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
6
+ var __spreadValues = (a, b) => {
7
+ for (var prop in b || (b = {}))
8
+ if (__hasOwnProp.call(b, prop))
9
+ __defNormalProp(a, prop, b[prop]);
10
+ if (__getOwnPropSymbols)
11
+ for (var prop of __getOwnPropSymbols(b)) {
12
+ if (__propIsEnum.call(b, prop))
13
+ __defNormalProp(a, prop, b[prop]);
14
+ }
15
+ return a;
16
+ };
17
+
18
+ // src/index.ts
19
+ import { isVue2 as isVue22 } from "vue-demi";
20
+
21
+ // src/components/FormaxButton.ts
22
+ import { defineComponent, h, isVue2 } from "vue-demi";
23
+ var FormaxButton = defineComponent({
24
+ name: "FormaxButton",
25
+ props: {
26
+ label: {
27
+ type: String,
28
+ default: "Button"
29
+ },
30
+ type: {
31
+ type: String,
32
+ default: "default"
33
+ // primary, danger, default
34
+ }
35
+ },
36
+ setup(props, { emit, slots }) {
37
+ return () => {
38
+ const style = {
39
+ padding: "8px 16px",
40
+ borderRadius: "4px",
41
+ border: "1px solid #ccc",
42
+ cursor: "pointer",
43
+ backgroundColor: props.type === "primary" ? "#007bff" : props.type === "danger" ? "#dc3545" : "#fff",
44
+ color: props.type === "primary" || props.type === "danger" ? "#fff" : "#333",
45
+ fontSize: "14px"
46
+ };
47
+ const label = slots.default ? slots.default() : props.label;
48
+ if (isVue2) {
49
+ return h("button", {
50
+ style,
51
+ on: {
52
+ click: (event) => emit("click", event)
53
+ }
54
+ }, label);
55
+ } else {
56
+ return h("button", {
57
+ style,
58
+ onClick: (event) => emit("click", event)
59
+ }, label);
60
+ }
61
+ };
62
+ }
63
+ });
64
+ var meta = {
65
+ name: "FormaxButton",
66
+ label: "\u901A\u7528\u6309\u94AE",
67
+ description: "\u4E00\u4E2A\u517C\u5BB9Vue 2/3\u7684\u57FA\u7840\u6309\u94AE\u7EC4\u4EF6",
68
+ props: {
69
+ label: {
70
+ type: "string",
71
+ default: "Button",
72
+ description: "\u6309\u94AE\u6587\u672C"
73
+ },
74
+ type: {
75
+ type: "string",
76
+ default: "default",
77
+ description: "\u6309\u94AE\u7C7B\u578B",
78
+ options: ["default", "primary", "danger"]
79
+ }
80
+ },
81
+ events: [
82
+ {
83
+ name: "click",
84
+ description: "\u70B9\u51FB\u6309\u94AE\u65F6\u89E6\u53D1",
85
+ payload: "Event"
86
+ }
87
+ ],
88
+ slots: ["default"],
89
+ usage: `<FormaxButton type="primary" label="Click Me" @click="handleClick" />`
90
+ };
91
+ FormaxButton.__doc_meta__ = meta;
92
+
93
+ // src/index.ts
94
+ var components = {
95
+ FormaxButton
96
+ };
97
+ function install(app) {
98
+ Object.keys(components).forEach((key) => {
99
+ if (isVue22) {
100
+ app.component(key, components[key]);
101
+ } else {
102
+ app.component(key, components[key]);
103
+ }
104
+ });
105
+ }
106
+ var componentList = Object.values(components).map((comp) => comp.__doc_meta__).filter((meta2) => !!meta2);
107
+ var src_default = __spreadValues({
108
+ install,
109
+ componentList
110
+ }, components);
111
+ export {
112
+ FormaxButton,
113
+ componentList,
114
+ src_default as default,
115
+ install
116
+ };
package/docs/index.html ADDED
@@ -0,0 +1,252 @@
1
+ <!DOCTYPE html>
2
+ <html lang="zh-CN">
3
+
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
7
+ <title>Formax UI 组件文档</title>
8
+ <script type="importmap">
9
+ {
10
+ "imports": {
11
+ "vue": "https://unpkg.com/vue@3.4.15/dist/vue.esm-browser.prod.js",
12
+ "vue-demi": "https://unpkg.com/vue-demi@0.14.6/lib/index.mjs",
13
+ "formax-ui": "/dist/index.mjs"
14
+ }
15
+ }
16
+ </script>
17
+ <style>
18
+ body {
19
+ margin: 0;
20
+ font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
21
+ height: 100vh;
22
+ }
23
+
24
+ #app {
25
+ display: flex;
26
+ width: 100%;
27
+ height: 100%;
28
+ }
29
+
30
+ .sidebar {
31
+ flex: 0 0 250px;
32
+ width: 250px;
33
+ background: #f5f7fa;
34
+ border-right: 1px solid #e4e7ed;
35
+ padding: 20px;
36
+ overflow-y: auto;
37
+ position: sticky;
38
+ top: 0;
39
+ height: 100%;
40
+ }
41
+
42
+ .sidebar h2 {
43
+ font-size: 18px;
44
+ margin-bottom: 10px;
45
+ color: #303133;
46
+ }
47
+
48
+ .nav-item {
49
+ padding: 10px;
50
+ cursor: pointer;
51
+ color: #606266;
52
+ border-radius: 4px;
53
+ transition: background .3s;
54
+ }
55
+
56
+ .nav-item:hover {
57
+ background: #e6e8eb;
58
+ }
59
+
60
+ .nav-item.active {
61
+ background: #409eff;
62
+ color: #fff;
63
+ }
64
+
65
+ .main {
66
+ flex: 1;
67
+ padding: 40px;
68
+ overflow-y: auto;
69
+ }
70
+
71
+ .component-title {
72
+ font-size: 28px;
73
+ font-weight: 600;
74
+ margin-bottom: 10px;
75
+ }
76
+
77
+ .component-desc {
78
+ color: #909399;
79
+ margin-bottom: 30px;
80
+ font-size: 16px;
81
+ }
82
+
83
+ .section-title {
84
+ font-size: 20px;
85
+ font-weight: 500;
86
+ margin: 30px 0 15px;
87
+ padding-bottom: 10px;
88
+ border-bottom: 1px solid #eee;
89
+ }
90
+
91
+ .demo-block {
92
+ border: 1px solid #ebeef5;
93
+ border-radius: 4px;
94
+ padding: 24px;
95
+ margin-bottom: 20px;
96
+ }
97
+
98
+ .prop-table,
99
+ .event-table {
100
+ width: 100%;
101
+ border-collapse: collapse;
102
+ margin-top: 10px;
103
+ }
104
+
105
+ .prop-table th,
106
+ .prop-table td,
107
+ .event-table th,
108
+ .event-table td {
109
+ border: 1px solid #ebeef5;
110
+ padding: 12px;
111
+ text-align: left;
112
+ }
113
+
114
+ .prop-table th,
115
+ .event-table th {
116
+ background: #fafafa;
117
+ color: #909399;
118
+ font-weight: 600;
119
+ }
120
+
121
+ code {
122
+ background: #f4f4f5;
123
+ padding: 2px 4px;
124
+ border-radius: 4px;
125
+ color: #c0341d;
126
+ font-family: monospace;
127
+ }
128
+
129
+ pre {
130
+ background: #282c34;
131
+ color: #abb2bf;
132
+ padding: 15px;
133
+ border-radius: 4px;
134
+ overflow-x: auto;
135
+ }
136
+ </style>
137
+ </head>
138
+
139
+ <body>
140
+ <div id="app">
141
+ <div class="sidebar">
142
+ <h2>Formax UI</h2>
143
+ <div v-for="item in componentList" :key="item.name" class="nav-item"
144
+ :class="{ active: current.name === item.name }" @click="current = item">
145
+ {{ item.name }} <span style="font-size: 12px; opacity: 0.8">{{ item.label }}</span>
146
+ </div>
147
+ </div>
148
+ <div class="main" v-if="current">
149
+ <div class="component-title">{{ current.name }} <span style="font-size: 20px; color: #999">({{ current.label
150
+ }})</span></div>
151
+ <div class="component-desc">{{ current.description }}</div>
152
+
153
+ <!-- 预览区域 -->
154
+ <div class="section-title">组件预览</div>
155
+ <div class="demo-block">
156
+ <component :is="current.name" v-bind="getPreviewProps(current)"></component>
157
+ </div>
158
+
159
+ <!-- 属性表格 -->
160
+ <div class="section-title">Props (属性)</div>
161
+ <table class="prop-table">
162
+ <thead>
163
+ <tr>
164
+ <th>参数名称</th>
165
+ <th>说明</th>
166
+ <th>类型</th>
167
+ <th>可选值</th>
168
+ <th>默认值</th>
169
+ </tr>
170
+ </thead>
171
+ <tbody>
172
+ <tr v-for="(prop, key) in current.props" :key="key">
173
+ <td>{{ key }}</td>
174
+ <td>{{ prop.description }}</td>
175
+ <td><code>{{ prop.type }}</code></td>
176
+ <td>{{ prop.options ? prop.options.join(', ') : '-' }}</td>
177
+ <td>{{ prop.default }}</td>
178
+ </tr>
179
+ </tbody>
180
+ </table>
181
+
182
+ <!-- 事件表格 -->
183
+ <div class="section-title">Events (事件)</div>
184
+ <table class="event-table" v-if="current.events && current.events.length">
185
+ <thead>
186
+ <tr>
187
+ <th>事件名称</th>
188
+ <th>说明</th>
189
+ <th>回调参数</th>
190
+ </tr>
191
+ </thead>
192
+ <tbody>
193
+ <tr v-for="event in current.events" :key="event.name">
194
+ <td>{{ event.name }}</td>
195
+ <td>{{ event.description }}</td>
196
+ <td><code>{{ event.payload }}</code></td>
197
+ </tr>
198
+ </tbody>
199
+ </table>
200
+ <div v-else style="color: #909399; margin-top: 10px;">无事件</div>
201
+
202
+ <!-- 使用示例 -->
203
+ <div class="section-title">代码示例</div>
204
+ <pre>{{ current.usage }}</pre>
205
+
206
+ </div>
207
+ </div>
208
+
209
+ <script type="module">
210
+ import { createApp, ref } from "vue";
211
+ import FormaxUI, { componentList as list } from "formax-ui";
212
+
213
+ const FM = FormaxUI;
214
+
215
+ const App = {
216
+ setup() {
217
+ let componentList = list && list.length
218
+ ? list
219
+ : Object.keys(FM)
220
+ .map(k => {
221
+ const v = FM[k];
222
+ return v && v.__doc_meta__ ? v.__doc_meta__ : null;
223
+ })
224
+ .filter(Boolean);
225
+
226
+ const current = ref(componentList[0] || null);
227
+
228
+ const getPreviewProps = (meta) => {
229
+ const props = {};
230
+ if (meta.props) {
231
+ Object.keys(meta.props).forEach(key => {
232
+ props[key] = meta.props[key].default;
233
+ });
234
+ }
235
+ if (meta.name === 'FormaxButton') {
236
+ props.type = 'primary';
237
+ props.label = 'Hello World';
238
+ }
239
+ return props;
240
+ };
241
+
242
+ return { componentList, current, getPreviewProps };
243
+ }
244
+ };
245
+
246
+ const app = createApp(App);
247
+ app.use(FM);
248
+ app.mount("#app");
249
+ </script>
250
+ </body>
251
+
252
+ </html>
package/package.json ADDED
@@ -0,0 +1,29 @@
1
+ {
2
+ "name": "formax_sgj-ui",
3
+ "version": "1.0.0",
4
+ "description": "A cross-compatible Vue component library with metadata extraction",
5
+ "main": "dist/index.js",
6
+ "module": "dist/index.mjs",
7
+ "types": "dist/index.d.ts",
8
+ "unpkg": "dist/index.global.js",
9
+ "scripts": {
10
+ "build": "tsup src/index.ts --format cjs,esm,iife --global-name FormaxUI --dts --clean --env.NODE_ENV production"
11
+ },
12
+ "peerDependencies": {
13
+ "@vue/composition-api": "^1.0.0-rc.1",
14
+ "vue": "^2.0.0 || >=3.0.0"
15
+ },
16
+ "peerDependenciesMeta": {
17
+ "@vue/composition-api": {
18
+ "optional": true
19
+ }
20
+ },
21
+ "dependencies": {
22
+ "vue-demi": "^0.14.6"
23
+ },
24
+ "devDependencies": {
25
+ "tsup": "^6.1.0",
26
+ "typescript": "^5.0.0",
27
+ "vue": "^3.3.0"
28
+ }
29
+ }
package/src/components/FormaxButton.ts ADDED
@@ -0,0 +1,75 @@
1
+ import { defineComponent, h, isVue2 } from 'vue-demi';
2
+ import { FormaxComponent, ComponentMeta } from '../types';
3
+
4
+ export const FormaxButton = defineComponent({
5
+ name: 'FormaxButton',
6
+ props: {
7
+ label: {
8
+ type: String,
9
+ default: 'Button'
10
+ },
11
+ type: {
12
+ type: String,
13
+ default: 'default', // primary, danger, default
14
+ }
15
+ },
16
+ setup(props, { emit, slots }) {
17
+ return () => {
18
+ const style = {
19
+ padding: '8px 16px',
20
+ borderRadius: '4px',
21
+ border: '1px solid #ccc',
22
+ cursor: 'pointer',
23
+ backgroundColor: props.type === 'primary' ? '#007bff' : props.type === 'danger' ? '#dc3545' : '#fff',
24
+ color: props.type === 'primary' || props.type === 'danger' ? '#fff' : '#333',
25
+ fontSize: '14px'
26
+ };
27
+
28
+ const label = slots.default ? slots.default() : props.label;
29
+
30
+ if (isVue2) {
31
+ return h('button', {
32
+ style,
33
+ on: {
34
+ click: (event: Event) => emit('click', event)
35
+ }
36
+ }, label);
37
+ } else {
38
+ return h('button', {
39
+ style,
40
+ onClick: (event: Event) => emit('click', event)
41
+ }, label);
42
+ }
43
+ };
44
+ }
45
+ }) as FormaxComponent;
46
+
47
+ const meta: ComponentMeta = {
48
+ name: 'FormaxButton',
49
+ label: '通用按钮',
50
+ description: '一个兼容Vue 2/3的基础按钮组件',
51
+ props: {
52
+ label: {
53
+ type: 'string',
54
+ default: 'Button',
55
+ description: '按钮文本'
56
+ },
57
+ type: {
58
+ type: 'string',
59
+ default: 'default',
60
+ description: '按钮类型',
61
+ options: ['default', 'primary', 'danger']
62
+ }
63
+ },
64
+ events: [
65
+ {
66
+ name: 'click',
67
+ description: '点击按钮时触发',
68
+ payload: 'Event'
69
+ }
70
+ ],
71
+ slots: ['default'],
72
+ usage: `<FormaxButton type="primary" label="Click Me" @click="handleClick" />`
73
+ };
74
+
75
+ FormaxButton.__doc_meta__ = meta;
package/src/index.ts ADDED
@@ -0,0 +1,31 @@
1
+ import { isVue2 } from 'vue-demi';
2
+ import { FormaxButton } from './components/FormaxButton';
3
+ import { ComponentMeta, FormaxComponent } from './types';
4
+
5
+ const components: Record<string, FormaxComponent> = {
6
+ FormaxButton
7
+ };
8
+
9
+ export function install(app: any) {
10
+ Object.keys(components).forEach(key => {
11
+ if (isVue2) {
12
+ app.component(key, components[key]);
13
+ } else {
14
+ app.component(key, components[key]);
15
+ }
16
+ });
17
+ }
18
+
19
+ // Extract metadata for low-code platform
20
+ export const componentList: ComponentMeta[] = Object.values(components)
21
+ .map(comp => comp.__doc_meta__)
22
+ .filter((meta): meta is ComponentMeta => !!meta);
23
+
24
+ export { FormaxButton };
25
+ export * from './types';
26
+
27
+ export default {
28
+ install,
29
+ componentList,
30
+ ...components
31
+ };
package/src/types.ts ADDED
@@ -0,0 +1,27 @@
1
+ export interface PropMeta {
2
+ type: string;
3
+ default?: any;
4
+ description: string;
5
+ options?: string[]; // For enum types
6
+ }
7
+
8
+ export interface EventMeta {
9
+ name: string;
10
+ description: string;
11
+ payload?: string;
12
+ }
13
+
14
+ export interface ComponentMeta {
15
+ name: string;
16
+ label: string; // Display name
17
+ description: string;
18
+ props: Record<string, PropMeta>;
19
+ events: EventMeta[];
20
+ slots?: string[];
21
+ usage: string; // Example code
22
+ }
23
+
24
+ // Type for the component with attached metadata
25
+ export type FormaxComponent = any & {
26
+ __doc_meta__?: ComponentMeta;
27
+ };
package/tsconfig.json ADDED
@@ -0,0 +1,13 @@
1
+ {
2
+ "compilerOptions": {
3
+ "target": "es2016",
4
+ "module": "esnext",
5
+ "moduleResolution": "node",
6
+ "declaration": true,
7
+ "strict": true,
8
+ "esModuleInterop": true,
9
+ "skipLibCheck": true,
10
+ "jsx": "preserve"
11
+ },
12
+ "include": ["src/**/*"]
13
+ }