[25-26] Fix VLDatePicker year/month dropdown disappearing + Fix VLCru…

…d editItem function definition (#27)

* Force display inline (rather than none) when selecting a year/month

* Add highlight color to year and month selection

* Fix editItem function definition

* Bump version + update primevue dependency

* Update shoelace version

* Bump minor version

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skillbill/vuelace-3",
-  "version": "1.0.10",
+  "version": "1.1.0",
   "private": false,
   "author": "skillbill",
   "license": "MIT",
@@ -89,9 +89,9 @@
   },
   "peerDependencies": {
     "@mdi/svg": "^7.4.47",
-    "@shoelace-style/shoelace": "^2.13.0",
+    "@shoelace-style/shoelace": "^2.15.1",
     "pinia": "^2.1.7",
-    "primevue": "^3.51.0",
+    "primevue": "^3.52.0",
     "vue": "^3.4.25"
   }
 }

src/components/VLCrud/VLCrud.vue

@@ -253,8 +253,8 @@ const editAction = {
   }
 } as VLCrudActionType
 
-const onEdit = async (id: any, data: any) => {
-  await props.editItem?.(id, data)
+const onEdit = async (data: any) => {
+  await props.editItem?.(data)
   await onConfirm()
 }
 

src/components/VLCrud/types.ts

@@ -67,7 +67,7 @@ export interface VLCrudProps {
     | undefined
   >
   addItem?: (item: any) => any
-  editItem?: (id: any, item: any) => any
+  editItem?: (item: any) => any
   translationFn?: (key: string, props?: { [key: string]: any }) => string
   onFetchError?: () => void
   onError?: (error: VLFileInputErrorEvent) => void

src/components/VLDatePicker/VLDatePicker.vue

@@ -42,7 +42,7 @@
       :maxDate="maxDate"
       :showTime="withTime"
       :date-select="atDateSelect"
-      panelClass="min-w-min"
+      panelClass="min-w-min !inline"
     />
   </sl-dropdown>
 </template>
@@ -145,7 +145,9 @@ defineExpose({
 </script>
 
 <style scoped>
-:deep(.p-datepicker table td > span.p-highlight) {
+:deep(.p-datepicker table td > span.p-highlight),
+:deep(.p-datepicker > .p-yearpicker .p-yearpicker-year.p-highlight),
+:deep(.p-datepicker > .p-monthpicker .p-monthpicker-month.p-highlight) {
   color: var(--sl-color-primary-500);
   background: var(--sl-color-primary-100);
 }