Gathering detailed insights and metrics for @francyfox/fn-forms
Gathering detailed insights and metrics for @francyfox/fn-forms
Gathering detailed insights and metrics for @francyfox/fn-forms
Gathering detailed insights and metrics for @francyfox/fn-forms
Form schema component for Naive UI framework. Generate form from json like formkit schema component
npm install @francyfox/fn-forms
Typescript
Module System
Node Version
NPM Version
TypeScript (77.44%)
Vue (14.13%)
CSS (6.38%)
HTML (2.05%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
MIT License
23 Commits
2 Watchers
1 Branches
1 Contributors
Updated on May 24, 2023
Latest Version
0.1.4
Package Id
@francyfox/fn-forms@0.1.4
Unpacked Size
17.20 kB
Size
5.29 kB
File Count
11
NPM Version
9.6.4
Node Version
19.9.0
Published on
May 31, 2023
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
3
P.S. alternative @form-create/naive-ui
ts files
Install command
1pnpm i @francfox/fn-forms
Import component
1 2<script setup type="ts"> 3import { FnSchema, NaiveUISchema } from "@francyfox/fn-forms/src/lib" 4 5const formData = ref() 6const json = { 7 $type: 'n-form', 8 children: [] 9} as NaiveUISchema 10</script> 11 12<template> 13 <fn-schema v-model:data="formData" :schema="TestSchema"/> 14</template>
$type: 'form'
)$type
equal component name (like $prop
equal component props$children
equal component slot. U can use string for default slot, array for children (h - render functions)
json elements or object with slot functions { default: () => 'button text'}
If you want set data in props (value, checked) use string $data
. Simply $data.user.name
converted to ->
formData.user.name
, formData gets from v-model:data
$data
equal v-model:data (only in value, checked props)1[ 2 { 3 $type: 'n-form', 4 $children: [ 5 { 6 $type: 'n-space', 7 $children: [ 8 { 9 $type: 'n-form-item', 10 $props: { 11 label: 'Name', 12 path: 'user.name', 13 }, 14 $children: [ 15 { 16 $type: 'n-input', 17 $props: { 18 placeholder: 'Input Name', 19 value: '$data.user.name', 20 }, 21 }, 22 ], 23 }, 24 { 25 $type: 'n-form-item', 26 $props: { 27 label: 'Email', 28 path: 'user.email', 29 }, 30 $children: [ 31 { 32 $type: 'n-input', 33 $props: { 34 type: 'email', 35 placeholder: 'Input Email', 36 value: '$data.user.email', 37 }, 38 }, 39 ], 40 }, 41 ], 42 }, 43 { 44 $type: 'n-form-item', 45 $props: { 46 label: 'Age', 47 path: 'user.age', 48 }, 49 $children: [ 50 { 51 $type: 'n-input-number', 52 $props: { 53 placeholder: 'Input age', 54 clearable: true, 55 value: '$data.user.age', 56 }, 57 }, 58 ], 59 }, 60 { 61 $type: 'n-form-item', 62 $props: { 63 label: 'Age', 64 path: 'user.agree', 65 }, 66 $children: [ 67 { 68 $type: 'n-checkbox', 69 $children: 'I agree', 70 $props: { 71 placeholder: 'Agree?', 72 value: '$data.user.agree', 73 }, 74 }, 75 ], 76 }, 77 { 78 $type: 'n-form-item', 79 $props: { 80 label: 'Gender', 81 path: 'user.gender', 82 }, 83 $children: [ 84 { 85 $type: 'n-select', 86 $children: 'I agree', 87 $props: { 88 multiple: true, 89 value: '$data.user.gender', 90 options: [ 91 { 92 label: 'Nowhere Man', 93 value: 'song4', 94 }, 95 { 96 label: 'Think For Yourself', 97 value: 'song5', 98 }, 99 ], 100 }, 101 }, 102 ], 103 }, 104 { 105 $type: 'n-radio-group', 106 $props: { 107 value: '$data.user.live', 108 name: 'state' 109 }, 110 $children: [ 111 { 112 $type: 'n-radio', 113 $children: 'Live!', 114 $props: { 115 value: 'live', 116 }, 117 }, 118 { 119 $type: 'n-radio', 120 $children: 'Dead!', 121 $props: { 122 label: 'Dead!', 123 value: 'dead', 124 }, 125 }, 126 ], 127 }, 128 { 129 $type: 'n-form-item', 130 $children: [ 131 { 132 $type: 'n-switch', 133 $children: { 134 checked: () => 'TEst', 135 unchecked: () => 'NonTest' 136 }, 137 $props: { 138 value: '$data.user.test', 139 railStyle: () => 'background: red' 140 } 141 } 142 ] 143 }, 144 { 145 $type: 'n-form-item', 146 $children: [ 147 { 148 $type: 'n-button', 149 $children: 'Send Form', 150 }, 151 ], 152 }, 153 154 ], 155 }, 156]
1const formData = ref({ 2 user: { 3 name: 'francyfox', 4 email: 'test@mail.ru', 5 age: 16, 6 agree: true, 7 gender: ['song4'], 8 live: 'live', 9 test: false 10 }, 11});
1 Form = 'n-form', 2 Input = 'n-input', 3 InputNumber = 'n-input-number', 4 FormItem = 'n-form-item', 5 Button = 'n-button', 6 Space = 'n-space', 7 Select = 'n-select', 8 Checkbox = 'n-checkbox', 9 Radio = 'n-radio', 10 RadioGroup = 'n-radio-group', 11 Switch = 'n-switch', 12 DynamicTags = 'n-dynamic-tags', 13 Upload = 'n-upload', 14 UploadDnd = 'fn-upload-dnd'
No vulnerabilities found.
No security vulnerabilities found.