Skip to content

Commit 765d9e1

Browse files
sfxcodesfxcode
committed
refactor(primevue): update to primevue 4
1 parent 2987e55 commit 765d9e1

File tree

24 files changed

+157
-208
lines changed

24 files changed

+157
-208
lines changed

‎dev/components/app/AppTopbar.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ const items = ref([
4545
items: [
4646
{ label: 'Checkbox', icon: 'pi pi-fw pi-user-edit', route: '/inputs/checkBox' },
4747
{ label: 'TriStateCheckbox', icon: 'pi pi-fw pi-user-edit', route: '/inputs/triStateCheckbox' },
48-
{ label: 'InputSwitch', icon: 'pi pi-fw pi-user-edit', route: '/inputs/inputSwitch' },
48+
{ label: 'ToggleSwitch', icon: 'pi pi-fw pi-user-edit', route: '/inputs/toggleSwitch' },
4949
],
5050
},
5151
],
@@ -54,7 +54,7 @@ const items = ref([
5454
label: 'Select',
5555
items: [
5656
{ label: 'CascadeSelect', icon: 'pi pi-fw pi-user-edit', route: '/inputs/cascadeSelect' },
57-
{ label: 'Dropdown', icon: 'pi pi-fw pi-user-edit', route: '/inputs/dropdown' },
57+
{ label: 'Select', icon: 'pi pi-fw pi-user-edit', route: '/inputs/select' },
5858
{ label: 'Listbox', icon: 'pi pi-fw pi-user-edit', route: '/inputs/listbox' },
5959
{ label: 'MultiSelect', icon: 'pi pi-fw pi-user-edit', route: '/inputs/multiSelect' },
6060
{ label: 'RadioButton', icon: 'pi pi-fw pi-user-edit', route: '/inputs/radioButton' },

‎dev/components/demo/PrimeInput.vue‎

Lines changed: 40 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -54,36 +54,49 @@ async function submitHandler() {
5454
<pre>{{ formData }}</pre>
5555
</div>
5656
<div class="">
57-
<TabView>
57+
<Tabs>
58+
<TabList>
59+
<Tab value="0">
60+
Supported Attributes
61+
</Tab>
62+
<Tab value="1">
63+
Schema Editor
64+
</Tab>
65+
<Tab value="2">
66+
Data Editor
67+
</Tab>
68+
</TabList>
5869
<TabPanel header="Schema">
5970
<pre>{{ formSchema }}</pre>
6071
</TabPanel>
61-
<TabPanel v-if="primeAttributes || customAttributes" header="Supported Attributes">
62-
<h4>Base Attributes</h4>
63-
<div>
64-
<span>disabled, readonly, style, class, tabindex, ariaLabel, ariaLabelledby, pt, ptOptions, unstyled</span>
65-
</div>
66-
<h4>PrimeVue Attributes</h4>
67-
<div>
68-
<a :href="documentationLink" target="_blank" class="text-xl">Open Documentation</a>
69-
</div>
70-
<div class="mt-2">
71-
<span>{{ primeAttributes }}</span>
72-
</div>
73-
<h4 v-if="customAttributes">
74-
Custom Attributes
75-
</h4>
76-
<div>
77-
<span v-if="customAttributes">{{ customAttributes }}</span>
78-
</div>
79-
</TabPanel>
80-
<TabPanel header="Schema Editor">
81-
<JsonEditorVue v-model="formSchema" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
82-
</TabPanel>
83-
<TabPanel header="Data Editor">
84-
<JsonEditorVue v-model="formData" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
85-
</TabPanel>
86-
</TabView>
72+
<TabPanels>
73+
<TabPanel v-if="primeAttributes || customAttributes" value="0">
74+
<h4>Base Attributes</h4>
75+
<div>
76+
<span>disabled, readonly, style, class, tabindex, ariaLabel, ariaLabelledby, pt, ptOptions, unstyled</span>
77+
</div>
78+
<h4>PrimeVue Attributes</h4>
79+
<div>
80+
<a :href="documentationLink" target="_blank" class="text-xl">Open Documentation</a>
81+
</div>
82+
<div class="mt-2">
83+
<span>{{ primeAttributes }}</span>
84+
</div>
85+
<h4 v-if="customAttributes">
86+
Custom Attributes
87+
</h4>
88+
<div>
89+
<span v-if="customAttributes">{{ customAttributes }}</span>
90+
</div>
91+
</TabPanel>
92+
<TabPanel value="1">
93+
<JsonEditorVue v-model="formSchema" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
94+
</TabPanel>
95+
<TabPanel value="2">
96+
<JsonEditorVue v-model="formData" v-bind="{ mode: 'tree' }" class="jse-theme-dark" />
97+
</TabPanel>
98+
</TabPanels>
99+
</Tabs>
87100
</div>
88101
</div>
89102
</div>

‎dev/modules/primevue.ts‎

Lines changed: 16 additions & 89 deletions
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,45 @@
11
import AutoComplete from 'primevue/autocomplete'
2-
import Accordion from 'primevue/accordion'
3-
import Avatar from 'primevue/avatar'
4-
import AvatarGroup from 'primevue/avatargroup'
5-
import Badge from 'primevue/badge'
62
import Button from 'primevue/button'
7-
import Breadcrumb from 'primevue/breadcrumb'
83
import Card from 'primevue/card'
9-
import Carousel from 'primevue/carousel'
104
import CascadeSelect from 'primevue/cascadeselect'
11-
import Chart from 'primevue/chart'
125
import Checkbox from 'primevue/checkbox'
136
import Chip from 'primevue/chip'
147
import Chips from 'primevue/chips'
158
import ColorPicker from 'primevue/colorpicker'
16-
import Column from 'primevue/column'
17-
import ConfirmDialog from 'primevue/confirmdialog'
18-
import ConfirmPopup from 'primevue/confirmpopup'
19-
import ContextMenu from 'primevue/contextmenu'
20-
import DataTable from 'primevue/datatable'
21-
import DataView from 'primevue/dataview'
229
import DatePicker from 'primevue/datepicker'
23-
import Dialog from 'primevue/dialog'
24-
import Divider from 'primevue/divider'
2510
import Editor from 'primevue/editor'
2611
import Dropdown from 'primevue/dropdown'
2712
import Fieldset from 'primevue/fieldset'
28-
import FileUpload from 'primevue/fileupload'
2913
import IconField from 'primevue/iconfield'
3014
import InputIcon from 'primevue/inputicon'
31-
import InlineMessage from 'primevue/inlinemessage'
32-
import Inplace from 'primevue/inplace'
3315
import InputMask from 'primevue/inputmask'
3416
import InputNumber from 'primevue/inputnumber'
3517
import InputOtp from 'primevue/inputotp'
36-
import InputSwitch from 'primevue/inputswitch'
3718
import InputText from 'primevue/inputtext'
3819
import Knob from 'primevue/knob'
39-
import Galleria from 'primevue/galleria'
4020
import Listbox from 'primevue/listbox'
4121
import MegaMenu from 'primevue/megamenu'
42-
import Menu from 'primevue/menu'
43-
import Menubar from 'primevue/menubar'
4422
import Message from 'primevue/message'
4523
import MultiSelect from 'primevue/multiselect'
46-
import OrderList from 'primevue/orderlist'
47-
import OrganizationChart from 'primevue/organizationchart'
4824
import OverlayPanel from 'primevue/overlaypanel'
49-
import Paginator from 'primevue/paginator'
50-
import Panel from 'primevue/panel'
51-
import PanelMenu from 'primevue/panelmenu'
5225
import Password from 'primevue/password'
53-
import PickList from 'primevue/picklist'
54-
import ProgressBar from 'primevue/progressbar'
5526
import Rating from 'primevue/rating'
5627
import RadioButton from 'primevue/radiobutton'
28+
import Select from 'primevue/select'
5729
import SelectButton from 'primevue/selectbutton'
58-
import ScrollPanel from 'primevue/scrollpanel'
59-
import ScrollTop from 'primevue/scrolltop'
6030
import Slider from 'primevue/slider'
61-
import Sidebar from 'primevue/sidebar'
62-
import Skeleton from 'primevue/skeleton'
6331
import SplitButton from 'primevue/splitbutton'
64-
import Splitter from 'primevue/splitter'
65-
import SplitterPanel from 'primevue/splitterpanel'
66-
import Steps from 'primevue/steps'
67-
import TabMenu from 'primevue/tabmenu'
32+
import Tab from 'primevue/tab'
33+
import TabList from 'primevue/tablist'
34+
import Tabs from 'primevue/tabs'
35+
import TabPanels from 'primevue/tabpanels'
36+
import TabPanel from 'primevue/tabpanel'
6837
import Tag from 'primevue/tag'
69-
import TieredMenu from 'primevue/tieredmenu'
7038
import Textarea from 'primevue/textarea'
71-
import Timeline from 'primevue/timeline'
7239
import Toast from 'primevue/toast'
73-
import Toolbar from 'primevue/toolbar'
74-
import TabView from 'primevue/tabview'
75-
import TabPanel from 'primevue/tabpanel'
7640
import ToggleButton from 'primevue/togglebutton'
77-
import Tree from 'primevue/tree'
78-
import TreeTable from 'primevue/treetable'
79-
import TreeSelect from 'primevue/treeselect'
41+
import ToggleSwitch from 'primevue/toggleswitch'
42+
import Toolbar from 'primevue/toolbar'
8043

8144
import 'primeicons/primeicons.css'
8245
import Aura from '@primevue/themes/aura'
@@ -104,85 +67,49 @@ export const install: UserModule = ({ app }) => {
10467
app.directive('styleclass', StyleClass)
10568

10669
// components
107-
app.component('Accordion', Accordion)
10870
app.component('AutoComplete', AutoComplete)
109-
app.component('Avatar', Avatar)
110-
app.component('AvatarGroup', AvatarGroup)
111-
app.component('Badge', Badge)
112-
app.component('Breadcrumb', Breadcrumb)
11371
app.component('Button', Button)
11472
app.component('Card', Card)
115-
app.component('Carousel', Carousel)
11673
app.component('CascadeSelect', CascadeSelect)
117-
app.component('Chart', Chart)
11874
app.component('Checkbox', Checkbox)
11975
app.component('Chip', Chip)
12076
app.component('Chips', Chips)
12177
app.component('ColorPicker', ColorPicker)
122-
app.component('Column', Column)
123-
app.component('ConfirmDialog', ConfirmDialog)
124-
app.component('ConfirmPopup', ConfirmPopup)
125-
app.component('ContextMenu', ContextMenu)
126-
app.component('DataTable', DataTable)
12778
app.component('DataView', DataView)
12879
app.component('DatePicker', DatePicker)
129-
app.component('Dialog', Dialog)
130-
app.component('Divider', Divider)
13180
app.component('Dropdown', Dropdown)
13281
app.component('Editor', Editor)
13382
app.component('Fieldset', Fieldset)
134-
app.component('FileUpload', FileUpload)
13583
app.component('IconField', IconField)
13684
app.component('InputIcon', InputIcon)
137-
app.component('InlineMessage', InlineMessage)
138-
app.component('Inplace', Inplace)
13985
app.component('InputMask', InputMask)
14086
app.component('InputNumber', InputNumber)
14187
app.component('InputOtp', InputOtp)
142-
app.component('InputSwitch', InputSwitch)
14388
app.component('InputText', InputText)
144-
app.component('Galleria', Galleria)
14589
app.component('Knob', Knob)
14690
app.component('Listbox', Listbox)
14791
app.component('MegaMenu', MegaMenu)
148-
app.component('Menu', Menu)
149-
app.component('Menubar', Menubar)
15092
app.component('Message', Message)
15193
app.component('MultiSelect', MultiSelect)
152-
app.component('OrderList', OrderList)
153-
app.component('OrganizationChart', OrganizationChart)
15494
app.component('OverlayPanel', OverlayPanel)
155-
app.component('Paginator', Paginator)
156-
app.component('Panel', Panel)
157-
app.component('PanelMenu', PanelMenu)
15895
app.component('Password', Password)
159-
app.component('PickList', PickList)
160-
app.component('ProgressBar', ProgressBar)
16196
app.component('RadioButton', RadioButton)
16297
app.component('Rating', Rating)
98+
app.component('Select', Select)
16399
app.component('SelectButton', SelectButton)
164-
app.component('ScrollPanel', ScrollPanel)
165-
app.component('ScrollTop', ScrollTop)
166100
app.component('Slider', Slider)
167-
app.component('Sidebar', Sidebar)
168-
app.component('Skeleton', Skeleton)
169101
app.component('SplitButton', SplitButton)
170-
app.component('Splitter', Splitter)
171-
app.component('SplitterPanel', SplitterPanel)
172-
app.component('Steps', Steps)
173-
app.component('TabMenu', TabMenu)
174-
app.component('TabView', TabView)
175-
app.component('TabPanel', TabPanel)
176102
app.component('Tag', Tag)
103+
app.component('Tab', Tab)
104+
app.component('Tabs', Tabs)
105+
app.component('TabList', TabList)
106+
app.component('TabPanels', TabPanels)
107+
app.component('TabPanel', TabPanel)
177108
app.component('Textarea', Textarea)
178-
app.component('TieredMenu', TieredMenu)
179-
app.component('Timeline', Timeline)
180109
app.component('Toast', Toast)
181-
app.component('Toolbar', Toolbar)
182110
app.component('ToggleButton', ToggleButton)
183-
app.component('Tree', Tree)
184-
app.component('TreeTable', TreeTable)
185-
app.component('TreeSelect', TreeSelect)
111+
app.component('ToggleSwitch', ToggleSwitch)
112+
app.component('Toolbar', Toolbar)
186113

187114
app.use(PrimeVue, {
188115
theme: {

‎dev/pages/index.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ const schema = reactive(
5757
label: 'Are you a european citizen?',
5858
},
5959
{
60-
$formkit: 'primeDropdown',
60+
$formkit: 'primeSelect',
6161
if: '$get(eu).value', // 👀 Oooo, conditionals!
6262
name: 'cookie_notice',
6363
label: 'Cookie notice frequency',

‎dev/pages/inputs/AutoComplete.vue‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const primeAttributes = 'placeholder, separator, allowDuplicate, max, addOnBlur'
44
const list = ['Hello', 'Hero', 'House', 'World']
55
66
function search(query: string) {
7-
return list.filter(i => i.toLowerCase().includes(query.toLowerCase()))
7+
return [...list.filter(i => i.toLowerCase().includes(query.toLowerCase())), query]
88
}
99
1010
const schema
@@ -16,6 +16,15 @@ const schema
1616
complete: search,
1717
label: 'Basic AutoComplete - Use [h]ello',
1818
},
19+
{
20+
$formkit: 'primeAutoComplete',
21+
id: 'chips',
22+
name: 'chips',
23+
multiple: true,
24+
typeahead: false,
25+
complete: search,
26+
label: 'Chips Replacement',
27+
},
1928
]
2029
2130
const data = { }

‎dev/pages/inputs/Chips.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const schema
1717
$formkit: 'primeChips',
1818
name: 'styled',
1919
label: 'Styled',
20-
style: 'background:gray;',
20+
style: { background: 'gray' },
2121
class: 'customClass',
2222
},
2323
{
@@ -37,7 +37,7 @@ const data = { }
3737
<template>
3838
<div>
3939
<PrimeInput
40-
header="PrimeChips" :schema="schema" :data="data"
40+
header="PrimeChips (Deprecated in PrimeVue 4)" :schema="schema" :data="data"
4141
:prime-attributes="primeAttributes"
4242
/>
4343
</div>

‎dev/pages/inputs/ColorPicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const schema
1414
$formkit: 'primeColorPicker',
1515
name: 'styled',
1616
label: 'Styled + Disabled',
17-
style: 'background:gray;',
17+
style: { background: 'gray' },
1818
class: 'customClass',
1919
disabled: true,
2020
},

‎dev/pages/inputs/DatePicker.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const schema
1515
$formkit: 'primeDatePicker',
1616
name: 'styled',
1717
label: 'Styled',
18-
style: 'background:gray;',
18+
style: { background: 'gray' },
1919
class: 'customClass',
2020
showIcon: true,
2121
},

‎dev/pages/inputs/InputNumber.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const schema
1717
label: 'Input Number',
1818
value: 1234,
1919
class: 'customClass',
20-
style: 'background:gray;',
20+
style: { background: 'gray' },
2121
readonly: true,
2222
},
2323
]

‎dev/pages/inputs/Listbox.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ const schema
1414
{
1515
$formkit: 'primeListbox',
1616
name: 'cookie_notice',
17-
label: 'Cookie notice Dropdown',
17+
label: 'Cookie notice',
1818
value: 'hourly',
1919
optionLabel: 'label',
2020
optionValue: 'value',
@@ -26,7 +26,7 @@ const schema
2626
name: 'styled',
2727
label: 'Styled and Diabled',
2828
value: 'hourly',
29-
style: 'background:gray;',
29+
style: { background: 'gray' },
3030
class: 'customClass',
3131
optionLabel: 'label',
3232
optionValue: 'value',

0 commit comments

Comments
 (0)