dynamicformdjx 0.3.0 → 0.3.2
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.
- package/README.md +156 -8
- package/dist/hooks/useDyForm.d.ts +1 -0
- package/dist/index.cjs +1 -1
- package/dist/index.css +1 -1
- package/dist/index.mjs +149 -145
- package/dist/naiveUi/index.cjs +1 -1
- package/dist/naiveUi/index.mjs +86 -86
- package/package.json +1 -1
- /package/dist/{naiveUi/hooks → components/old}/rOld.d.ts +0 -0
package/README.md
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
# dynamicformdjx
|
|
2
2
|
|
|
3
|
-
基于 **Vue 3**
|
|
3
|
+
基于 **Vue 3** 的动态表单。
|
|
4
4
|
|
|
5
5
|
[文档](https://xczcdjx.github.io/dynamicFormDoc/)
|
|
6
6
|
|
|
@@ -24,7 +24,8 @@
|
|
|
24
24
|
`DynamicForm` 一个灵活且动态的表单组件，使用数组，简化模版操作，提供多种hook快速操作表单等。
|
|
25
25
|
|
|
26
26
|
- 简化template代码，快速处理表单
|
|
27
|
-
- 提供render2
|
|
27
|
+
- 提供render2函数渲染表单项，使用函数渲染值或自定义h函数
|
|
28
|
+
- 提供多种hooks函数，快速处理数据值
|
|
28
29
|
|
|
29
30
|
`DynamicInput` 组件是一个灵活且动态的表单输入组件，允许用户添加、修改和删除键值对。它提供了多种自定义选项，如按钮文本、表单布局和输入过滤
|
|
30
31
|
|
|
@@ -78,14 +79,18 @@ pnpm add dynamicformdjx
|
|
|
78
79
|
required: true,
|
|
79
80
|
placeholder: '请输入密码',
|
|
80
81
|
render2: f => renderInput(f.value, {showPasswordOn: 'click'}, f),
|
|
81
|
-
}
|
|
82
|
+
}
|
|
82
83
|
])
|
|
83
84
|
const useForm = useDyForm<FormRow>(formItems)
|
|
84
85
|
const getData = () => {
|
|
85
86
|
// const res=useForm.getValues() // 或
|
|
86
|
-
const res = naiDynamicFormRef.value?.getResult()
|
|
87
|
+
const res = naiDynamicFormRef.value?.getResult?.()
|
|
87
88
|
console.log(res)
|
|
88
89
|
}
|
|
90
|
+
const resetData = () => {
|
|
91
|
+
// useForm.onReset() // 或
|
|
92
|
+
naiDynamicFormRef.value?.reset()
|
|
93
|
+
}
|
|
89
94
|
const setData = () => {
|
|
90
95
|
// 隐藏username
|
|
91
96
|
// useForm.setHidden(true, ['username'])
|
|
@@ -99,7 +104,7 @@ pnpm add dynamicformdjx
|
|
|
99
104
|
}
|
|
100
105
|
const validatorData = () => {
|
|
101
106
|
// 校验
|
|
102
|
-
naiDynamicFormRef.value
|
|
107
|
+
naiDynamicFormRef.value?.validator().then(data => {
|
|
103
108
|
console.log(data)
|
|
104
109
|
}).catch(err => {
|
|
105
110
|
console.log(err)
|
|
@@ -109,10 +114,153 @@ pnpm add dynamicformdjx
|
|
|
109
114
|
|
|
110
115
|
<template>
|
|
111
116
|
<NaiDynamicForm :items="formItems" ref="naiDynamicFormRef"/>
|
|
112
|
-
<
|
|
113
|
-
|
|
114
|
-
|
|
117
|
+
<div class="control">
|
|
118
|
+
<n-button @click="getData" type="success" size="small">get Data</n-button>
|
|
119
|
+
<n-button @click="setData" type="warning" size="small">set Data</n-button>
|
|
120
|
+
<n-button @click="validatorData" type="default" size="small">validate Data</n-button>
|
|
121
|
+
<n-button @click="resetData" type="error" size="small">reset Data</n-button>
|
|
122
|
+
</div>
|
|
123
|
+
</template>
|
|
124
|
+
|
|
125
|
+
<style scoped>
|
|
126
|
+
.control {
|
|
127
|
+
display: flex;
|
|
128
|
+
gap: 5px;
|
|
129
|
+
}
|
|
130
|
+
</style>
|
|
131
|
+
```
|
|
132
|
+
#### 2.自定义表单
|
|
133
|
+
> (所有render2函数使用自定义)
|
|
134
|
+
##### InputTest.vue
|
|
135
|
+
```vue
|
|
136
|
+
<script setup lang="ts">
|
|
137
|
+
import {NInput} from "naive-ui";
|
|
138
|
+
import {useAttrs} from "vue";
|
|
139
|
+
const fv=defineModel()
|
|
140
|
+
const attrs=useAttrs()
|
|
141
|
+
</script>
|
|
142
|
+
|
|
143
|
+
<template>
|
|
144
|
+
<n-input v-model="fv" v-bind="attrs"/>
|
|
145
|
+
</template>
|
|
146
|
+
|
|
147
|
+
<style scoped>
|
|
148
|
+
|
|
149
|
+
</style>
|
|
150
|
+
```
|
|
151
|
+
##### Render.vue
|
|
152
|
+
```vue
|
|
153
|
+
<script setup lang="ts">
|
|
154
|
+
import {h, ref} from "vue";
|
|
155
|
+
import {NButton, NInput} from "naive-ui";
|
|
156
|
+
import {useDyForm, useReactiveForm} from "dynamicformdjx";
|
|
157
|
+
import {type naiDynamicFormRef, NaiDynamicForm, NaiDynamicInput, type naiDynamicInputRef} from "dynamicformdjx/naiveUi";
|
|
158
|
+
import type {FormItemRule, FormRules} from "naive-ui/es/form/src/interface";
|
|
159
|
+
import InputTest from "./InputTest.vue";
|
|
160
|
+
|
|
161
|
+
type FormRow = {
|
|
162
|
+
name: string
|
|
163
|
+
desc: string
|
|
164
|
+
json: object
|
|
165
|
+
}
|
|
166
|
+
const naiDynamicFormRef = ref<naiDynamicFormRef | null>(null)
|
|
167
|
+
const naiDynamicInputRef = ref<naiDynamicInputRef | null>(null)
|
|
168
|
+
const formItems = useReactiveForm<FormRow, FormRules | FormItemRule>([
|
|
169
|
+
{
|
|
170
|
+
key: "name",
|
|
171
|
+
label: "姓名",
|
|
172
|
+
value: ref<string | null>(null),
|
|
173
|
+
clearable: true,
|
|
174
|
+
placeholder: '请输入姓名',
|
|
175
|
+
required: true,
|
|
176
|
+
// @ts-ignore
|
|
177
|
+
render2: f => h(NInput, {
|
|
178
|
+
...f,
|
|
179
|
+
value: f.value.value, "onUpdate:value"(v) {
|
|
180
|
+
f.value.value = v
|
|
181
|
+
}
|
|
182
|
+
}),
|
|
183
|
+
},
|
|
184
|
+
{
|
|
185
|
+
key: "desc",
|
|
186
|
+
label: "描述",
|
|
187
|
+
value: ref<string | null>(null),
|
|
188
|
+
clearable: true,
|
|
189
|
+
placeholder: '请输入姓名',
|
|
190
|
+
required: true,
|
|
191
|
+
type: 'textarea',
|
|
192
|
+
render2: f => h(InputTest, {
|
|
193
|
+
...f,
|
|
194
|
+
value: f.value.value, "onUpdate:value"(v) {
|
|
195
|
+
f.value.value = v
|
|
196
|
+
}
|
|
197
|
+
}),
|
|
198
|
+
},
|
|
199
|
+
{
|
|
200
|
+
key: "json",
|
|
201
|
+
label: "Json",
|
|
202
|
+
value: ref<object>({}),
|
|
203
|
+
rule: {
|
|
204
|
+
required: true,
|
|
205
|
+
validator(_: FormItemRule, value: object) {
|
|
206
|
+
return Object.keys(value).length > 0
|
|
207
|
+
},
|
|
208
|
+
trigger: ['blur', 'change'],
|
|
209
|
+
message: 'json 不能为空'
|
|
210
|
+
},
|
|
211
|
+
render2: f => h(NaiDynamicInput, {
|
|
212
|
+
modelValue: f.value.value, "onUpdate:modelValue"(v) {
|
|
213
|
+
f.value.value = v
|
|
214
|
+
},
|
|
215
|
+
isController: true,
|
|
216
|
+
ref: naiDynamicInputRef
|
|
217
|
+
}),
|
|
218
|
+
},
|
|
219
|
+
])
|
|
220
|
+
const useForm = useDyForm<FormRow>(formItems)
|
|
221
|
+
const getData = () => {
|
|
222
|
+
console.log(useForm.getValues())
|
|
223
|
+
}
|
|
224
|
+
const resetData = () => {
|
|
225
|
+
useForm.onReset()
|
|
226
|
+
naiDynamicInputRef.value?.onSet?.({})
|
|
227
|
+
}
|
|
228
|
+
const setData = () => {
|
|
229
|
+
useForm.setValues({
|
|
230
|
+
name: 'naive-ui',
|
|
231
|
+
desc:`A Vue 3 Component Library Fairly Complete, Theme Customizable, Uses TypeScript, Fast Kinda Interesting`
|
|
232
|
+
})
|
|
233
|
+
naiDynamicInputRef.value?.onSet?.({
|
|
234
|
+
question: 'how are you?',
|
|
235
|
+
answer: "I'm fine,Thank you"
|
|
236
|
+
})
|
|
237
|
+
}
|
|
238
|
+
const validatorData = () => {
|
|
239
|
+
// 校验
|
|
240
|
+
naiDynamicFormRef.value?.validator().then(data => {
|
|
241
|
+
console.log(data)
|
|
242
|
+
}).catch(err => {
|
|
243
|
+
console.log(err)
|
|
244
|
+
})
|
|
245
|
+
}
|
|
246
|
+
</script>
|
|
247
|
+
|
|
248
|
+
<template>
|
|
249
|
+
<NaiDynamicForm :items="formItems" ref="naiDynamicFormRef"/>
|
|
250
|
+
<div class="control">
|
|
251
|
+
<n-button @click="getData" type="success" size="small">get Data</n-button>
|
|
252
|
+
<n-button @click="setData" type="warning" size="small">set Data</n-button>
|
|
253
|
+
<n-button @click="validatorData" type="default" size="small">validate Data</n-button>
|
|
254
|
+
<n-button @click="resetData" type="error" size="small">reset Data</n-button>
|
|
255
|
+
</div>
|
|
115
256
|
</template>
|
|
257
|
+
|
|
258
|
+
<style scoped>
|
|
259
|
+
.control {
|
|
260
|
+
display: flex;
|
|
261
|
+
gap: 5px;
|
|
262
|
+
}
|
|
263
|
+
</style>
|
|
116
264
|
```
|
|
117
265
|
|
|
118
266
|
### 动态录入
|
|
@@ -9,5 +9,6 @@ export declare function useDyForm<Row extends Record<string, any>>(items: DyForm
|
|
|
9
9
|
setValues: (patch: Partial<{ [K in KeyOf<Row>]: Row[K]; }>) => void;
|
|
10
10
|
getValue: <K extends KeyOf<Row>>(key: K) => DyFormItem<Row> | undefined;
|
|
11
11
|
getValues: <K extends KeyOf<Row>>(keys?: readonly K[]) => Partial<Pick<Row, K>> & Record<string, any>;
|
|
12
|
+
onReset: (value?: any) => void;
|
|
12
13
|
};
|
|
13
14
|
export {};
|
package/dist/index.cjs
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("./index-BWQjnQQF.cjs"),I=e.defineComponent({name:"DynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:a=>`${Date.now()}_${a??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":a=>!0,onReset:()=>!0,onMerge:(a,
|
|
1
|
+
"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("vue"),v=require("./index-BWQjnQQF.cjs"),I=e.defineComponent({name:"DynamicInput",props:{size:{type:String},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:a=>`${Date.now()}_${a??0}`},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},modelValue:{type:Object,required:!0}},emits:{"update:modelValue":a=>!0,onReset:()=>!0,onMerge:(a,u)=>!0},setup(a,{emit:u,expose:f}){const m={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...a.btnConfigs},i={hideReset:!1,maxHeight:"300px",autoScroll:!0,allowFilter:!0,...a.configs},d={arraySplitSymbol:",",...a.dyListConfigs},y=a.size,s=e.ref(v.tranArr(a.modelValue,a.randomFun,d.arraySplitSymbol)),b=e.ref(null);return e.watch(s,t=>{if(!a.isController)return;const o=v.resetObj(t,d.arraySplitSymbol);u("update:modelValue",o),u("onMerge",o,e.toRaw(s.value))},{deep:!0}),f({onSet:t=>{s.value=v.tranArr(t??a.modelValue,a.randomFun,d.arraySplitSymbol)},getResult:(t="res")=>t==="ori"?e.toRaw(s.value):v.resetObj(s.value,d.arraySplitSymbol)}),()=>e.createVNode("div",{class:a.dyCls??`dynamicForm ${y}`},[e.createVNode("div",{class:"dyFormList",ref:b,style:{maxHeight:i.maxHeight}},[s.value.map((t,o,l)=>e.createVNode("div",{class:"dItem",key:t.rId},[e.createVNode("div",{class:"input"},[e.createVNode("input",{size:y,value:t.key,class:"key nativeInput",onInput:r=>{t.key=r.target.value}},null),e.createTextVNode(":"),e.createVNode("div",{class:"vInput"},[e.createVNode("div",{class:"slot"},[e.createVNode("button",{class:[t.isArray?"success":"default","small","bt"],onClick:()=>{t.isArray=!t.isArray}},[e.createTextVNode("Array")]),e.createTextVNode(" "),e.createVNode("button",{class:[t.isNumber?"success":"default","small","bt"],onClick:()=>{t.isNumber=!t.isNumber}},[e.createTextVNode("Number")])]),e.createVNode("input",{size:y,value:t.value,class:"value nativeV",onInput:r=>{const c=r.target.value;i.allowFilter&&t.isNumber?t.value=v.formatNumberInput(c,t.isArray,d.arraySplitSymbol):t.value=c}},null)])]),e.createVNode("div",{class:"btn"},[e.createVNode("button",{class:[y,"success","bt"],disabled:o!==l.length-1,onClick:()=>{s.value.push({rId:a.randomFun(),key:"",value:""}),i.autoScroll&&e.nextTick(()=>{const r=b.value;r?.scrollTo({top:r.scrollHeight,behavior:"smooth"})})}},[e.createTextVNode("+")]),e.createVNode("button",{class:["danger",y,"bt"],onClick:()=>{s.value=s.value.filter(r=>r.rId!==t.rId)}},[e.createTextVNode("-")])])]))]),e.createVNode("div",{class:"control"},[!s.value.length&&e.createVNode("button",{class:["success",y,"bt"],onClick:()=>{s.value.push({rId:a.randomFun(),key:"",value:""})}},[m.newTxt]),!a.isController&&e.createVNode(e.Fragment,null,[!i.hideReset&&e.createVNode("button",{class:["default",y,"bt"],onClick:()=>{s.value=v.tranArr(a.modelValue,a.randomFun,d.arraySplitSymbol),u("onReset")}},[m.resetTxt]),e.createVNode("button",{class:["info",y,"bt"],onClick:()=>{s.value.sort((o,l)=>+o.rId-+l.rId);const t=v.resetObj(s.value,d.arraySplitSymbol);u("update:modelValue",t),u("onMerge",t,e.toRaw(s.value)),s.value=v.tranArr(t,a.randomFun,d.arraySplitSymbol)}},[m.mergeTxt])])])])}}),S=e.defineComponent({name:"DynamicCascadeInput",props:{modelValue:{type:Object,required:!0},isController:{type:Boolean},dyCls:{type:String},randomFun:{type:Function,default:a=>`${Date.now()}_${a??0}`},depth:{type:Number,default:3},btnConfigs:{type:Object},configs:{type:Object},dyListConfigs:{type:Object},newChildTxt:{type:Function,default:a=>`添加 '${a.key}' 子项`}},emits:{"update:modelValue":a=>!0,onReset:()=>!0,onMerge:(a,u)=>!0},setup(a,{emit:u,expose:f}){const m={resetTxt:"重置",newTxt:"添加项",mergeTxt:"合并",...a.btnConfigs},i={hideReset:!1,maxHeight:"600px",allowFilter:!0,showBorder:!0,showPad:!0,retractLen:0,borderColors:[],...a.configs},d={arraySplitSymbol:",",...a.dyListConfigs},y=l=>["string","number"].includes(l),s=l=>Object.keys(l).map((r,c)=>{let n=l[r];const V=Array.isArray(n),x=V?n.every(k=>typeof k=="number"):typeof n=="number",N=n===null;return y(typeof n)&&(n=l[r]),N&&(n=""),{rId:a.randomFun(c),key:r,value:Object.prototype.toString.call(n)==="[object Object]"?s(l[r]):V?n.join(d.arraySplitSymbol):n,isArray:V||void 0,isNumber:x||void 0}}),b=l=>l.reduce((r,c)=>{const n=c.value;return c.key.trim().length&&(r[c.key]=Array.isArray(n)?b(n):v.parseValue(c.value,c.isArray,c.isNumber,d.arraySplitSymbol)),r},{}),t=e.ref(s(a.modelValue)),o=(l,r=1,c)=>e.createVNode("div",{class:[`depth-${r}`,i.showBorder?"":"no-border",i.showPad?"":"no-pad"],style:{"--depth":r,["--c"+[r]]:v.saferRepairColor(i.borderColors,r)}},[l.map((n,V,x)=>{const N=Array.isArray(n.value),k=y(typeof n.value);return e.createVNode("div",{class:"dItem",key:n.rId,style:{marginLeft:r>1?`${r*i.retractLen}px`:"0"}},[e.createVNode("div",{class:"input"},[!N&&e.createVNode(e.Fragment,null,[e.createVNode("input",{value:n.key,class:"key nativeInput",onInput:C=>n.key=C.target.value},null),e.createTextVNode(":")]),e.createVNode("div",{class:"vInput"},[e.createVNode("div",{class:"slot"},[Array.isArray(n.value)?void 0:e.createVNode(e.Fragment,null,[e.createVNode("button",{class:[n.isArray?"success":"default","small","bt"],onClick:()=>{n.isArray=!n.isArray}},[e.createTextVNode("Array")]),e.createTextVNode(" "),e.createVNode("button",{class:[n.isNumber?"success":"default","small","bt"],onClick:()=>{n.isNumber=!n.isNumber}},[e.createTextVNode("Number")])])]),e.createVNode("input",{class:`value nativeV ${N?"isKey":""}`,value:k?n.value:n.key,onInput:C=>{const g=C.target.value;if(N){n.key=g;return}i.allowFilter&&n.isNumber?n.value=v.formatNumberInput(g,n.isArray,d.arraySplitSymbol):n.value=g}},null),e.createVNode("div",{class:"surSlot"},[r<a.depth?!N&&e.createVNode("button",{class:["success","bt"],onClick:()=>{k&&(n.value=[],n.isArray=void 0),n.value.push({rId:a.randomFun(),key:"",value:""})}},[a.newChildTxt(n)]):null])])]),e.createVNode("div",{class:"btn"},[e.createVNode("button",{class:["success","bt"],disabled:V!==x.length-1,onClick:()=>{l.push({rId:a.randomFun(),key:"",value:""})}},[e.createTextVNode("+")]),e.createVNode("button",{class:["danger","bt"],onClick:()=>{if(l.splice(V,1),l.length<1){if(c===void 0)return b([]);const C=t.value.findIndex(g=>g.rId===c?.rId);r<1?t.value.splice(C,1,{...c,value:""}):c.value=""}}},[e.createTextVNode("-")])]),Array.isArray(n.value)&&o(n.value,r+1,n)])})]);return e.watch(t,l=>{if(!a.isController)return;const r=b(l);u("update:modelValue",r),u("onMerge",r,e.toRaw(t.value))},{deep:!0}),f({onSet:l=>{t.value=s(l??a.modelValue)},getResult:(l="res")=>l==="ori"?e.toRaw(t.value):b(t.value)}),()=>e.createVNode("div",{class:a.dyCls??"dynamicCascadeForm"},[e.createVNode("div",{class:"dyFormList",style:{maxHeight:i.maxHeight}},[o(t.value)]),e.createVNode("div",{class:"control"},[!t.value.length&&e.createVNode("button",{class:["success","bt"],onClick:()=>{t.value.push({rId:a.randomFun(),key:"",value:""})}},[m.newTxt]),!a.isController&&e.createVNode(e.Fragment,null,[!i.hideReset&&e.createVNode("button",{class:["default","bt"],onClick:()=>{t.value=s(a.modelValue),u("onReset")}},[m.resetTxt]),e.createVNode("button",{class:["info","bt"],onClick:()=>{const l=b(t.value);u("update:modelValue",l),u("onMerge",l,e.toRaw(t.value)),t.value=s(l)}},[m.mergeTxt])])])])}});function h(a,u=!0){return u?a.map(f=>e.shallowReactive(f)):a}function p(a){const u=()=>e.unref(a),f=(t,o)=>{u().forEach(l=>{const r=l.key;(!o||o.includes(r))&&(l.disabled=t)})},m=(t,o)=>{u().forEach(l=>{const r=l.key;(!o||o.includes(r))&&(l.hidden=t)})},i=(t,o)=>{const l=u().find(r=>r.key===t);l&&(e.isRef(l.value)?l.value.value=o:l.value=o)};return{setDisabled:f,setHidden:m,setValue:i,setValues:t=>{Object.entries(t).forEach(([o,l])=>{i(o,l)})},getValue:t=>u().find(o=>o.key===t),getValues:t=>{const o=t&&t.length?new Set(t):null;return u().reduce((l,r)=>{const c=r.key;if(!o||o.has(c)){const n=e.isRef(r.value)?r.value.value:r.value;l[c]=n}return l},{})},onReset:(t=null)=>{u().forEach(o=>{e.isRef(o.value)?o.value.value=t:o.value=t})}}}const F={install(a){a.component("DynamicInput",I),a.component("DynamicCascadeInput",S)}};exports.DynamicCascadeInput=S;exports.DynamicInput=I;exports.DynamicInputPlugin=F;exports.useDyForm=p;exports.useReactiveForm=h;
|
package/dist/index.css
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
.dynamicForm{overflow:hidden}.dynamicForm.small .dyFormList{gap:6px}.dynamicForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicForm.large .dyFormList{gap:15px}.dynamicForm.large .dyFormList .dItem{column-gap:20px}.dynamicForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:
|
|
1
|
+
.dynamicForm{overflow:hidden}.dynamicForm.small .dyFormList{gap:6px}.dynamicForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicForm.large .dyFormList{gap:15px}.dynamicForm.large .dyFormList .dItem{column-gap:20px}.dynamicForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:0 5px 10px}.dynamicForm .dyFormList.noList{padding:0}.dynamicForm .dyFormList .dItem{width:100%;display:grid;grid-template-columns:1fr 100px;column-gap:0}.dynamicForm .dyFormList .dItem .input{display:flex;justify-content:flex-start;align-items:center;column-gap:15px}.dynamicForm .dyFormList .dItem .input .key{text-align:center;width:150px}.dynamicForm .dyFormList .dItem .input .key.nativeInput{border:1px solid #d2d6dd;padding:.5em .4em;border-radius:3px}.dynamicForm .dyFormList .dItem .input .key.nativeInput:focus{outline:none;box-shadow:0 0 5px #007bff4d}.dynamicForm .dyFormList .dItem .input .vInput{width:100%;border:1px solid #d2d6dd;padding:.2em .4em;border-radius:3px;display:flex;column-gap:5px}.dynamicForm .dyFormList .dItem .input .vInput>.value{border:none;width:100%}.dynamicForm .dyFormList .dItem .input .vInput>.value.nativeV{letter-spacing:3px}.dynamicForm .dyFormList .dItem .input .vInput>.value.nativeV:focus{outline:none}.dynamicForm .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicForm .dyFormList .dItem .input .vInput .slot>button{font-weight:400;border-radius:3px;font-size:.8em}.dynamicForm .dyFormList .dItem .btn{display:flex;justify-content:flex-end;align-items:center;column-gap:8px}.dynamicForm .dyFormList .dItem .btn .n-button{font-size:25px;padding:10px 12px}.dynamicForm .dyFormList .dItem .btn .el-button+.el-button{margin-left:0}.dynamicForm .dyFormList .dItem .btn .bt{padding:.5em 1em}.dynamicForm .key .el-input__inner,.dynamicForm .isKey .el-input__inner{text-align:center}.dynamicForm .control{display:flex;justify-content:center;align-items:center;margin-top:5px;column-gap:10px}.dynamicForm .control.noList{margin-top:0}.dynamicForm .bt{color:#fff;border-radius:5px;border:1px solid transparent;padding:.3em .8em;font-size:.9em;font-weight:600;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:.25s;opacity:.9}.dynamicForm .bt:hover{opacity:1}.dynamicForm .bt:disabled{opacity:.35;cursor:not-allowed}.dynamicForm .default{background:#fff;color:#000;border:1px solid #d2d6dd}.dynamicForm .info{background:#8a8e94}.dynamicForm .success{background:#63ba39}.dynamicForm .danger{background:#ea696a}.dynamicCascadeForm{overflow:hidden}.dynamicCascadeForm.small .dyFormList{gap:6px}.dynamicCascadeForm.small .dyFormList .typeBtn{padding:.2em .6em;height:18px}.dynamicCascadeForm.small .dyFormList>.dItem .input .key{font-size:.7em}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput{padding:.15em .4em}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm.small .dyFormList>.dItem .input .vInput .slot>button{padding:.1em .4em;font-size:.8em}.dynamicCascadeForm.small .dyFormList>.dItem .btn .bt{padding:.3em .8em}.dynamicCascadeForm.large .dyFormList{gap:15px}.dynamicCascadeForm.large .dyFormList .dItem{column-gap:20px}.dynamicCascadeForm.large .dyFormList .dItem .input .key{font-size:1.2em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput{padding:.5em .4em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput input{font-size:1.2em}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm.large .dyFormList .dItem .input .vInput .slot>button{padding:.15em .4em;font-size:1em}.dynamicCascadeForm.large .dyFormList .dItem .btn .bt{padding:.8em 1.2em}.dynamicCascadeForm .dyFormList{overflow:auto;display:grid;gap:10px;padding:0 5px 10px}.dynamicCascadeForm .dyFormList.noList{padding:0}.dynamicCascadeForm .dyFormList .dItem{width:100%;display:grid;grid-template-columns:1fr 100px;column-gap:0}.dynamicCascadeForm .dyFormList .dItem .input{display:flex;justify-content:flex-start;align-items:center;column-gap:15px}.dynamicCascadeForm .dyFormList .dItem .input .key{text-align:center;width:150px}.dynamicCascadeForm .dyFormList .dItem .input .key.nativeInput{border:1px solid #d2d6dd;padding:.5em .4em;border-radius:3px}.dynamicCascadeForm .dyFormList .dItem .input .key.nativeInput:focus{outline:none;box-shadow:0 0 5px #007bff4d}.dynamicCascadeForm .dyFormList .dItem .input .vInput{width:100%;border:1px solid #d2d6dd;padding:.2em .4em;border-radius:3px;display:flex;column-gap:5px}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value{border:none;width:100%}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value.nativeV{letter-spacing:3px}.dynamicCascadeForm .dyFormList .dItem .input .vInput>.value.nativeV:focus{outline:none}.dynamicCascadeForm .dyFormList .dItem .input .vInput .slot{white-space:nowrap}.dynamicCascadeForm .dyFormList .dItem .input .vInput .slot>button{font-weight:400;border-radius:3px;font-size:.8em}.dynamicCascadeForm .dyFormList .dItem .btn{display:flex;justify-content:flex-end;align-items:center;column-gap:8px}.dynamicCascadeForm .dyFormList .dItem .btn .n-button{font-size:25px;padding:10px 12px}.dynamicCascadeForm .dyFormList .dItem .btn .el-button+.el-button{margin-left:0}.dynamicCascadeForm .dyFormList .dItem .btn .bt{padding:.5em 1em}.dynamicCascadeForm .key .el-input__inner,.dynamicCascadeForm .isKey .el-input__inner{text-align:center}.dynamicCascadeForm .control{display:flex;justify-content:center;align-items:center;margin-top:5px;column-gap:10px}.dynamicCascadeForm .control.noList{margin-top:0}.dynamicCascadeForm .bt{color:#fff;border-radius:5px;border:1px solid transparent;padding:.3em .8em;font-size:.9em;font-weight:600;font-family:inherit;background-color:#1a1a1a;cursor:pointer;transition:.25s;opacity:.9}.dynamicCascadeForm .bt:hover{opacity:1}.dynamicCascadeForm .bt:disabled{opacity:.35;cursor:not-allowed}.dynamicCascadeForm .default{background:#fff;color:#000;border:1px solid #d2d6dd}.dynamicCascadeForm .info{background:#8a8e94}.dynamicCascadeForm .success{background:#63ba39}.dynamicCascadeForm .danger{background:#ea696a}.dynamicCascadeForm .dyFormList .dItem{width:inherit}.dynamicCascadeForm .dyFormList .dItem .vInput .surSlot{white-space:nowrap}.dynamicCascadeForm .dyFormList .dItem .vInput .surSlot>button{padding:.1em .4em;font-size:.8em}.dynamicCascadeForm .dyFormList .dItem .input .value.isKey{text-align:center}.dynamicCascadeForm .dyFormList .dItem .input .value.isKey input{font-weight:700}.dynamicCascadeForm .dyFormList>.depth-1{display:grid;border:1px solid var(--c1);border-style:dashed;border-radius:5px}.dynamicCascadeForm .dyFormList>.depth-1>.dItem{padding:5px}.dynamicCascadeForm .dyFormList>.depth-1 .dItem+.dItem{margin-top:5px}.dynamicCascadeForm .dyFormList>.depth-1.no-pad>.dItem{padding:0}.dynamicCascadeForm .dyFormList .depth-1 .depth-2{border:1px solid var(--c2);border-style:dashed;padding:8px;border-radius:5px;margin-top:10px;row-gap:-3px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .dItem .btn .n-button{transform:scale(.84)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3{border:1px solid var(--c3);border-style:dashed;padding:7px;border-radius:5px;margin-top:9px;row-gap:-5px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .dItem .btn .n-button{transform:scale(.76)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4{border:1px solid var(--c4);border-style:dashed;padding:6px;border-radius:5px;margin-top:8px;row-gap:-7px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .dItem .btn .n-button{transform:scale(.68)}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .depth-5{border:1px solid var(--c5);border-style:dashed;padding:5px;border-radius:5px;margin-top:7px;row-gap:-9px}.dynamicCascadeForm .dyFormList .depth-1 .depth-2 .depth-3 .depth-4 .depth-5 .dItem .btn .n-button{transform:scale(.6)}.dynamicCascadeForm .dyFormList .no-border{border:none!important}.dynamicCascadeForm .dyFormList .no-pad{padding:0!important}.naiDynamicForm .cls-required{margin-left:5px;color:red}@media(max-width:756px){.dynamicForm .dyFormList .dItem .input .key{width:50px}.dynamicForm .dyFormList .dItem .input .value{width:calc(100% - 60px)}}
|