Skip to content

Commit 3133dc0

Browse files
sfxcodesfxcode
committed
refactor(Options): optionLabel and optionValue has no default values anymore
using default values was nice, but prevented some types of option usage. BREAKING CHANGE: OptionLabel or OptionValue has to be set manually
1 parent 166d404 commit 3133dc0

File tree

12 files changed

+189
-69
lines changed

12 files changed

+189
-69
lines changed

‎docs/.vitepress/config.mts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -89,6 +89,7 @@ function sidebarGuide() {
8989
items: [
9090
{ text: 'Usage', link: '/guide/usage' },
9191
{ text: 'PrimeVue Inputs', link: '/guide/inputs' },
92+
{ text: 'Options', link: '/guide/options' },
9293
{ text: 'Styling', link: '/guide/styling' },
9394
{ text: 'Sample Apps', link: '/guide/examples' },
9495
],

‎docs/guide/getting-started.md‎

Lines changed: 61 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -49,65 +49,67 @@ const options = [
4949
]
5050
5151
const schema = reactive(
52-
[
53-
{
54-
$el: 'h2',
55-
children: ['Register ', '$email'],
56-
},
57-
{
58-
$el: 'h3',
59-
children: 'Header Text H3',
60-
},
61-
{
62-
$formkit: 'primeInputText',
63-
name: 'email',
64-
label: 'Email',
65-
help: 'This will be used for your account.',
66-
validation: 'required|email',
67-
},
68-
{
69-
$formkit: 'primeTextarea',
70-
name: 'myText',
71-
label: 'Text',
72-
validation: '',
73-
rows: '3',
74-
},
75-
{
76-
$formkit: 'primeEditor',
77-
name: 'myEditor',
78-
label: 'Editor',
79-
style: 'height: 160px;',
80-
},
81-
{
82-
$formkit: 'primeInputText',
83-
name: 'password',
84-
label: 'Password',
85-
help: 'Enter your new password.',
86-
validation: 'required|length:5,16',
87-
},
88-
{
89-
$formkit: 'primeInputText',
90-
name: 'password_confirm',
91-
label: 'Confirm password',
92-
help: 'Enter your new password again.',
93-
validation: 'required|confirm',
94-
validationLabel: 'password confirmation',
95-
},
96-
{
97-
$formkit: 'primeCheckbox',
98-
name: 'eu_citizen',
99-
id: 'eu',
100-
label: 'Are you a european citizen?',
101-
},
102-
{
103-
$formkit: 'primeDropdown',
104-
if: '$get(eu).value', // 👀 Oooo, conditionals!
105-
name: 'cookie_notice',
106-
label: 'Cookie notice frequency',
107-
options,
108-
help: 'How often should we display a cookie notice?',
109-
},
110-
],
52+
[
53+
{
54+
$el: 'h2',
55+
children: ['Register ', '$email'],
56+
},
57+
{
58+
$el: 'h3',
59+
children: 'Header Text H3',
60+
},
61+
{
62+
$formkit: 'primeInputText',
63+
name: 'email',
64+
label: 'Email',
65+
help: 'This will be used for your account.',
66+
validation: 'required|email',
67+
},
68+
{
69+
$formkit: 'primeTextarea',
70+
name: 'myText',
71+
label: 'Text',
72+
validation: '',
73+
rows: '3',
74+
},
75+
{
76+
$formkit: 'primeEditor',
77+
name: 'myEditor',
78+
label: 'Editor',
79+
style: 'height: 160px;',
80+
},
81+
{
82+
$formkit: 'primeInputText',
83+
name: 'password',
84+
label: 'Password',
85+
help: 'Enter your new password.',
86+
validation: 'required|length:5,16',
87+
},
88+
{
89+
$formkit: 'primeInputText',
90+
name: 'password_confirm',
91+
label: 'Confirm password',
92+
help: 'Enter your new password again.',
93+
validation: 'required|confirm',
94+
validationLabel: 'password confirmation',
95+
},
96+
{
97+
$formkit: 'primeCheckbox',
98+
name: 'eu_citizen',
99+
id: 'eu',
100+
label: 'Are you a european citizen?',
101+
},
102+
{
103+
$formkit: 'primeDropdown',
104+
if: '$get(eu).value', // 👀 Oooo, conditionals!
105+
name: 'cookie_notice',
106+
label: 'Cookie notice frequency',
107+
optionLabel: 'label',
108+
optionValue: 'value',
109+
options,
110+
help: 'How often should we display a cookie notice?',
111+
},
112+
],
111113
)
112114
113115
const data = ref({ email: '[email protected]' })

‎docs/guide/options.md‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
# Options
2+
3+
In some inputs options are needed. There are several ways to deal with the options.
4+
5+
::: warning Important Note
6+
Until Version 1.5.x only Object Array / Select Object by key and value by key was possible. This is fixed from 1.6.x.
7+
:::
8+
9+
## Option based Inputs
10+
11+
- Dropdown
12+
- Listbox
13+
- MultiSelect
14+
- RadioButton
15+
- SelectButton
16+
17+
## Ways of Usage
18+
19+
### Simple Array
20+
21+
```vue
22+
23+
const stringArray = ['refresh', 'hourly', 'daily']
24+
25+
const schema
26+
= [
27+
{
28+
$formkit: 'primeDropdown',
29+
name: 'selectString',
30+
label: 'Simple String Array Dropdown',
31+
options: stringArray,
32+
},
33+
]
34+
35+
```
36+
37+
### Object Array / Select Object by key
38+
39+
Here you have to select a property name for **optionLabel** as key.
40+
41+
```vue
42+
43+
const cities = [
44+
{ name: 'New York', code: 'NY' },
45+
{ name: 'Rome', code: 'RM' },
46+
{ name: 'London', code: 'LDN' },
47+
{ name: 'Istanbul', code: 'IST' },
48+
{ name: 'Paris', code: 'PRS' },
49+
]
50+
51+
const schema = [
52+
{
53+
$formkit: 'primeDropdown',
54+
name: 'selectObjectByLabel',
55+
label: 'Select Object Dropdown',
56+
optionLabel: 'name',
57+
options: cities,
58+
},
59+
]
60+
61+
```
62+
63+
### Object Array / Select Object by key and value by key
64+
65+
Here you have to select a property name for **optionLabel** as key and a property name for **optionValue** as key.
66+
67+
68+
```vue
69+
70+
const options = [
71+
{ label: 'Every page load', value: 'refresh' },
72+
{ label: 'Every hour', value: 'hourly' },
73+
{ label: 'Every day', value: 'daily' },
74+
]
75+
76+
const schema = [
77+
{
78+
$formkit: 'primeDropdown',
79+
name: 'selectValue',
80+
label: 'Cookie notice Dropdown',
81+
value: 'hourly',
82+
optionLabel: 'label',
83+
optionValue: 'value',
84+
options,
85+
help: 'Cookie notice frequency ?',
86+
},
87+
]
88+
89+
```

‎docs/guide/styling.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,10 @@ Features:
1414

1515
You can use it or take it as base for your own styling.
1616

17+
## PrimeVue Tailwind / Unstyled mode
18+
19+
Make sure to add a class selector for **p-invalid**.
20+
1721
## Extended Styling
1822

1923
- All inputs are wrapped in a div with a **p-formkit** class

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@sfxcode/formkit-primevue",
3-
"version": "1.5.10",
3+
"version": "1.6.0",
44
"type": "module",
55
"license": "MIT",
66
"repository": "https://github.com/sfxcode/formkit-primevue",

‎src/formkit/PrimeDropdown.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -53,8 +53,8 @@ const styleClass = computed(() => (context?.state.validationVisible && !context?
5353
:append-to="attrs.appendTo"
5454
:reset-filter-on-hide="attrs.resetFilterOnHide"
5555
:virtual-scroller-options="attrs.virtualScrollerOptions"
56-
:autoOptionFocus="attrs.autoOptionFocus"
57-
:selectOnFocus="attrs.selectOnFocus"
56+
:auto-option-focus="attrs.autoOptionFocus"
57+
:select-on-focus="attrs.selectOnFocus"
5858
:filter-message="attrs.filterMessage"
5959
:selection-message="attrs.selectionMessage"
6060
:empty-selection-message="attrs.emptySelectionMessage"

‎src/pages/demo/Dropdown.vue‎

Lines changed: 25 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,49 @@
11
<script setup lang='ts'>
22
import PrimeInput from '@/components/demo/PrimeInput.vue'
33
4-
const primeAttributes = 'placeholder, options, showClear, filter, optionLabel (default: label), optionValue (default: value)'
4+
const primeAttributes = 'placeholder, options, showClear, filter, optionLabel, optionValue'
55
66
const options = [
77
{ label: 'Every page load', value: 'refresh' },
88
{ label: 'Every hour', value: 'hourly' },
99
{ label: 'Every day', value: 'daily' },
1010
]
1111
12+
const cities = [
13+
{ name: 'New York', code: 'NY' },
14+
{ name: 'Rome', code: 'RM' },
15+
{ name: 'London', code: 'LDN' },
16+
{ name: 'Istanbul', code: 'IST' },
17+
{ name: 'Paris', code: 'PRS' },
18+
]
19+
20+
const stringArray = ['refresh', 'hourly', 'daily']
21+
1222
const schema
1323
= [
1424
{
1525
$formkit: 'primeDropdown',
16-
name: 'cookie_notice',
26+
name: 'selectValue',
1727
label: 'Cookie notice Dropdown',
1828
value: 'hourly',
1929
optionLabel: 'label',
2030
optionValue: 'value',
2131
options,
2232
help: 'Cookie notice frequency ?',
2333
},
34+
{
35+
$formkit: 'primeDropdown',
36+
name: 'selectObjectByLabel',
37+
label: 'Select Object Dropdown',
38+
optionLabel: 'name',
39+
options: cities,
40+
},
41+
{
42+
$formkit: 'primeDropdown',
43+
name: 'selectString',
44+
label: 'Simple String Array Dropdown',
45+
options: stringArray,
46+
},
2447
{
2548
$formkit: 'primeDropdown',
2649
name: 'styled',

‎src/pages/demo/Listbox.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang='ts'>
22
import PrimeInput from '@/components/demo/PrimeInput.vue'
33
4-
const primeAttributes = 'placeholder, options, filter, optionLabel (default: label), optionValue (default: value), multiple'
4+
const primeAttributes = 'placeholder, options, filter, optionLabel, optionValue, multiple'
55
66
const options = [
77
{ label: 'Every page load', value: 'refresh' },

‎src/pages/demo/MultiSelect.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<script setup lang='ts'>
22
import PrimeInput from '@/components/demo/PrimeInput.vue'
33
4-
const primeAttributes = 'placeholder, options, filter, optionLabel (default: label), optionValue (default: value)'
4+
const primeAttributes = 'placeholder, options, filter, optionLabel, optionValue'
55
66
const options = [
77
{ label: 'Every page load', value: 'refresh' },

‎src/pages/demo/RadioButton.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script setup lang='ts'>
2-
const primeAttributes = 'options, optionLabel (default: label), optionValue (default: value)'
2+
const primeAttributes = 'options, optionLabel, optionValue'
33
const customAttributes = 'options_class, option_class'
44
55
const schema

0 commit comments

Comments
 (0)