Skip to content

Commit 2987e55

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

File tree

9 files changed

+336
-134
lines changed

9 files changed

+336
-134
lines changed

‎dev/components/app/AppTopbar.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ const items = ref([
3434
{ label: 'InputNumber', icon: 'pi pi-fw pi-user-edit', route: '/inputs/inputNumber' },
3535
{ label: 'InputOtp', icon: 'pi pi-fw pi-user-edit', route: '/inputs/inputOtp' },
3636
{ label: 'InputMask', icon: 'pi pi-fw pi-user-edit', route: '/inputs/inputMask' },
37-
{ label: 'Calendar', icon: 'pi pi-fw pi-user-edit', route: '/inputs/calendar' },
37+
{ label: 'DatePicker', icon: 'pi pi-fw pi-user-edit', route: '/inputs/datePicker' },
3838
{ label: 'Chips', icon: 'pi pi-fw pi-user-edit', route: '/inputs/chips' },
3939
{ label: 'Editor', icon: 'pi pi-fw pi-user-edit', route: '/inputs/editor' },
4040
{ label: 'Password', icon: 'pi pi-fw pi-user-edit', route: '/inputs/password' },

‎dev/index.html‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<!DOCTYPE html>
2-
<html lang="en" style="font-size: 14px;">
2+
<html lang="en" style="font-size: 14px;" class="p-dark">
33
<head>
44
<meta charset="UTF-8" />
55
<link rel="icon" href="./assets/favicon.ico" />

‎dev/modules/primevue.ts‎

Lines changed: 12 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
import AutoComplete from 'primevue/autocomplete'
22
import Accordion from 'primevue/accordion'
3-
import AccordionTab from 'primevue/accordiontab'
43
import Avatar from 'primevue/avatar'
54
import AvatarGroup from 'primevue/avatargroup'
65
import Badge from 'primevue/badge'
76
import Button from 'primevue/button'
87
import Breadcrumb from 'primevue/breadcrumb'
9-
import Calendar from 'primevue/calendar'
108
import Card from 'primevue/card'
119
import Carousel from 'primevue/carousel'
1210
import CascadeSelect from 'primevue/cascadeselect'
@@ -21,7 +19,7 @@ import ConfirmPopup from 'primevue/confirmpopup'
2119
import ContextMenu from 'primevue/contextmenu'
2220
import DataTable from 'primevue/datatable'
2321
import DataView from 'primevue/dataview'
24-
import DataViewLayoutOptions from 'primevue/dataviewlayoutoptions'
22+
import DatePicker from 'primevue/datepicker'
2523
import Dialog from 'primevue/dialog'
2624
import Divider from 'primevue/divider'
2725
import Editor from 'primevue/editor'
@@ -79,10 +77,9 @@ import ToggleButton from 'primevue/togglebutton'
7977
import Tree from 'primevue/tree'
8078
import TreeTable from 'primevue/treetable'
8179
import TreeSelect from 'primevue/treeselect'
82-
import TriStateCheckbox from 'primevue/tristatecheckbox'
8380

84-
import 'primevue/resources/primevue.min.css'
8581
import 'primeicons/primeicons.css'
82+
import Aura from '@primevue/themes/aura'
8683

8784
import PrimeVue from 'primevue/config'
8885

@@ -108,14 +105,12 @@ export const install: UserModule = ({ app }) => {
108105

109106
// components
110107
app.component('Accordion', Accordion)
111-
app.component('AccordionTab', AccordionTab)
112108
app.component('AutoComplete', AutoComplete)
113109
app.component('Avatar', Avatar)
114110
app.component('AvatarGroup', AvatarGroup)
115111
app.component('Badge', Badge)
116112
app.component('Breadcrumb', Breadcrumb)
117113
app.component('Button', Button)
118-
app.component('Calendar', Calendar)
119114
app.component('Card', Card)
120115
app.component('Carousel', Carousel)
121116
app.component('CascadeSelect', CascadeSelect)
@@ -130,7 +125,7 @@ export const install: UserModule = ({ app }) => {
130125
app.component('ContextMenu', ContextMenu)
131126
app.component('DataTable', DataTable)
132127
app.component('DataView', DataView)
133-
app.component('DataViewLayoutOptions', DataViewLayoutOptions)
128+
app.component('DatePicker', DatePicker)
134129
app.component('Dialog', Dialog)
135130
app.component('Divider', Divider)
136131
app.component('Dropdown', Dropdown)
@@ -188,9 +183,16 @@ export const install: UserModule = ({ app }) => {
188183
app.component('Tree', Tree)
189184
app.component('TreeTable', TreeTable)
190185
app.component('TreeSelect', TreeSelect)
191-
app.component('TriStateCheckbox', TriStateCheckbox)
192186

193-
app.use(PrimeVue, { ripple: false })
187+
app.use(PrimeVue, {
188+
theme: {
189+
preset: Aura,
190+
options: {
191+
darkModeSelector: '.p-dark',
192+
},
193+
},
194+
ripple: false,
195+
})
194196

195197
// services
196198
app.use(ConfirmationService)

‎dev/pages/inputs/Calendar.vue‎ renamed to ‎dev/pages/inputs/DatePicker.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,23 +4,23 @@ const primeAttributes = 'dateFormat, showIcon, icon, .... (see documentation)'
44
const schema
55
= [
66
{
7-
$formkit: 'primeCalendar',
7+
$formkit: 'primeDatePicker',
88
id: 'basic',
99
name: 'basic',
1010
label: 'Basic',
1111
placeholder: 'MM/DD/YYYY',
1212
validation: 'required',
1313
},
1414
{
15-
$formkit: 'primeCalendar',
15+
$formkit: 'primeDatePicker',
1616
name: 'styled',
1717
label: 'Styled',
1818
style: 'background:gray;',
1919
class: 'customClass',
2020
showIcon: true,
2121
},
2222
{
23-
$formkit: 'primeCalendar',
23+
$formkit: 'primeDatePicker',
2424
name: 'icon',
2525
label: 'Custom Icon',
2626
dateFormat: 'yy-mm',
@@ -35,7 +35,7 @@ const data = { }
3535
<template>
3636
<div>
3737
<PrimeInput
38-
header="PrimeCalendar" :schema="schema" :data="data"
38+
header="PrimeDatePicker" :schema="schema" :data="data"
3939
:prime-attributes="primeAttributes"
4040
/>
4141
</div>

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -85,11 +85,12 @@
8585
"@formkit/i18n": "^1.6.5",
8686
"@formkit/vue": "^1.6.5",
8787
"primeicons": "^7.0.0",
88-
"primevue": "^3.52.0"
88+
"primevue": "^4.0.0-rc.2"
8989
},
9090
"devDependencies": {
9191
"@antfu/eslint-config": "2.21.1",
9292
"@formkit/core": "^1.6.5",
93+
"@primevue/themes": "4.0.0-rc.2",
9394
"@types/node": "^20.14.7",
9495
"@unocss/preset-icons": "0.61.0",
9596
"@unocss/preset-uno": "0.61.0",

0 commit comments

Comments
 (0)