mgv-backoffice 1.36.2 → 1.37.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "mgv-backoffice",
-  "version": "1.36.2",
+  "version": "1.37.0",
   "description": "Shared Vue 3 UI component library",
   "type": "module",
   "main": "./dist/ui-lib.umd.cjs",
@@ -37,18 +37,22 @@
   },
   "devDependencies": {
     "@heroicons/vue": "^2.2.0",
-    "@tailwindcss/vite": "^4.3.1",
-    "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/language-core": "^3.3.5",
-    "@vue/test-utils": "^2.4.11",
+    "@tailwindcss/vite": "^4.3.3",
+    "@typescript/typescript6": "^6.0.2",
+    "@vitejs/plugin-vue": "^6.0.9",
+    "@vue/language-core": "^3.3.11",
+    "@vue/test-utils": "^2.5.1",
     "jsdom": "^29.1.1",
-    "sass": "^1.101.0",
-    "tailwindcss": "^4.3.1",
-    "typescript": "^6.0.3",
-    "vite": "^8.1.0",
-    "vite-plugin-dts": "^5.0.3",
-    "vitest": "^4.1.9",
-    "vue": "^3.5.38",
-    "vue-router": "^5.1.0"
+    "sass": "^1.105.0",
+    "tailwindcss": "^4.3.3",
+    "typescript": "^7.0.2",
+    "vite": "^8.3.1",
+    "vite-plugin-dts": "^5.1.1",
+    "vitest": "^5.0.2",
+    "vue": "^3.5.43",
+    "vue-router": "^5.3.1"
+  },
+  "dependencies": {
+    "@vuepic/vue-datepicker": "^14.0.0"
   }
 }

package/src/components/BaseDateTimePicker.test.ts

@@ -0,0 +1,49 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { VueDatePicker } from '@vuepic/vue-datepicker'
+import BaseDateTimePicker from './BaseDateTimePicker.vue'
+
+function picker(props: Record<string, unknown> = {}, attrs: Record<string, unknown> = {}) {
+  return mount(BaseDateTimePicker, { props, attrs }).findComponent(VueDatePicker)
+}
+
+describe('BaseDateTimePicker', () => {
+  it('defaults to date + 24h time, teleported, with the dd/MM/yyyy HH:mm format', () => {
+    const dp = picker()
+    expect(dp.props('timePicker')).toBe(false)
+    expect(dp.props('timeConfig')).toMatchObject({ enableTimePicker: true, is24: true })
+    expect(dp.props('formats')).toEqual({ input: 'dd/MM/yyyy HH:mm' })
+    expect(dp.props('teleport')).toBe(true)
+  })
+
+  it("mode 'date' hides the time picker", () => {
+    const dp = picker({ mode: 'date' })
+    expect(dp.props('timeConfig')).toMatchObject({ enableTimePicker: false })
+    expect(dp.props('formats')).toEqual({ input: 'dd/MM/yyyy' })
+  })
+
+  it("mode 'time' switches to the time-only picker, 12h when is24=false", () => {
+    const dp = picker({ mode: 'time', is24: false })
+    expect(dp.props('timePicker')).toBe(true)
+    expect(dp.props('formats')).toEqual({ input: 'hh:mm a' })
+  })
+
+  it('custom format and timeConfig override the defaults', () => {
+    const dp = picker({ format: 'yyyy-MM-dd', timeConfig: { enableSeconds: true } })
+    expect(dp.props('formats')).toEqual({ input: 'yyyy-MM-dd' })
+    expect(dp.props('timeConfig')).toMatchObject({ enableTimePicker: true, enableSeconds: true })
+  })
+
+  it('passes unknown props through to VueDatePicker', () => {
+    const dp = picker({}, { range: true, placeholder: 'Pick a date' })
+    expect(dp.props('range')).toBe(true)
+    expect(dp.props('placeholder')).toBe('Pick a date')
+  })
+
+  it('re-emits update:modelValue (v-model contract)', async () => {
+    const wrapper = mount(BaseDateTimePicker)
+    const date = new Date(2026, 8, 27, 10, 30)
+    wrapper.findComponent(VueDatePicker).vm.$emit('update:model-value', date)
+    expect(wrapper.emitted('update:modelValue')).toEqual([[date]])
+  })
+})

package/src/components/BaseDateTimePicker.vue

@@ -0,0 +1,91 @@
+<template>
+  <!--
+    Thin wrapper around @vuepic/vue-datepicker so every consumer gets the same
+    picker, the same defaults and the lib's emerald/slate skin (see the
+    `.dp--theme-*` overrides in style.css) without installing or wiring
+    anything themselves.
+
+    Only the common knobs are typed props here. Every other VueDatePicker
+    prop (range, min-date, max-date, disabled-dates, locale, …), event and
+    slot falls through untouched, so nothing the underlying picker can do is
+    lost.
+
+    Dark mode follows useTheme() automatically.
+  -->
+  <VueDatePicker
+    :model-value="modelValue"
+    :dark="isDark"
+    :time-picker="mode === 'time'"
+    :time-config="resolvedTimeConfig"
+    :formats="resolvedFormats"
+    :auto-apply="autoApply"
+    :teleport="teleport"
+    @update:model-value="emit('update:modelValue', $event)"
+  >
+    <template v-for="(_, name) in $slots" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps ?? {}" />
+    </template>
+  </VueDatePicker>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { VueDatePicker, type ModelValue, type TimeConfig } from '@vuepic/vue-datepicker'
+import '@vuepic/vue-datepicker/dist/main.css'
+import { useTheme } from '../composables/useTheme'
+
+export type DateTimePickerMode = 'date' | 'datetime' | 'time'
+
+interface Props {
+  /** v-model value — Date, Date[] (range), time object, or string with `model-type`. */
+  modelValue?: ModelValue
+  /** 'date' = calendar only; 'datetime' = calendar + time (default); 'time' = time only. */
+  mode?: DateTimePickerMode
+  /**
+   * date-fns pattern for the input text. Defaults per mode:
+   * 'dd/MM/yyyy', 'dd/MM/yyyy HH:mm' (12h: 'hh:mm a'), 'HH:mm'.
+   */
+  format?: string
+  /** 24-hour clock. */
+  is24?: boolean
+  /** Select on click without the Cancel/Select action row. */
+  autoApply?: boolean
+  /**
+   * Where the menu renders. Defaults to `true` (body) so it isn't clipped by
+   * modals or overflow-hidden containers.
+   */
+  teleport?: boolean | string | HTMLElement
+  /** Extra time options, merged over the mode-derived defaults. */
+  timeConfig?: Partial<TimeConfig>
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  modelValue: null,
+  mode: 'datetime',
+  format: undefined,
+  is24: true,
+  autoApply: false,
+  teleport: true,
+  timeConfig: undefined,
+})
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: ModelValue): void
+}>()
+
+const { isDark } = useTheme()
+
+const resolvedTimeConfig = computed<Partial<TimeConfig>>(() => ({
+  enableTimePicker: props.mode !== 'date',
+  is24: props.is24,
+  ...props.timeConfig,
+}))
+
+const resolvedFormats = computed(() => {
+  if (props.format) return { input: props.format }
+  const time = props.is24 ? 'HH:mm' : 'hh:mm a'
+  if (props.mode === 'date') return { input: 'dd/MM/yyyy' }
+  if (props.mode === 'time') return { input: time }
+  return { input: `dd/MM/yyyy ${time}` }
+})
+</script>

package/src/components/BaseSidebar.vue

@@ -304,7 +304,7 @@ function navigate(name: string) {
                 class="flex items-center justify-center gap-2 text-xs"
                 :class="isDark ? 'text-gray-500' : 'text-gray-500'"
               >
-                <span>{{ appName }}<template v-if="appName && version"> </template><template v-if="version">v{{ version }}</template></span>
+                <span>{{ appName }}<template v-if="appName && version">{{ ' ' }}</template><template v-if="version">v{{ version }}</template></span>
               </div>
             </slot>
           </div>

package/src/index.ts

@@ -53,6 +53,10 @@ export { default as BasePillPickerModal } from './components/BasePillPickerModal
 export { default as BaseBarDistribution } from './components/BaseBarDistribution.vue'
 export type { CredentialsView, CredentialsUpdate } from './components/BaseCredentialsForm.vue'
 
+// Components — third-party wrappers
+export { default as BaseDateTimePicker } from './components/BaseDateTimePicker.vue'
+export type { DateTimePickerMode } from './components/BaseDateTimePicker.vue'
+
 // Composables
 export { useTheme, initTheme } from './composables/useTheme'
 export type { UseThemeOptions } from './composables/useTheme'

package/src/style.css

@@ -30,3 +30,61 @@
 body {
   font-family: var(--font-sans);
 }
+
+/* BaseDateTimePicker skin: re-point @vuepic/vue-datepicker's CSS variables at
+   the lib palette (emerald accent, slate surfaces — same as BaseInput). The
+   picker is third-party markup, so its variables are the only styling hook;
+   Tailwind utilities can't reach inside it. `html` prefix out-specifies the
+   package's own `.dp--theme-*` blocks regardless of stylesheet order. */
+html .dp--theme-light,
+html .dp--theme-dark {
+  --dp-font-family: var(--font-sans);
+  --dp-font-size: 0.875rem;
+  --dp-border-radius: 0.25rem;
+  --dp-cell-border-radius: 0.25rem;
+  --dp-input-padding: 8px 30px 8px 12px;
+  --dp-primary-text-color: #fff;
+}
+html .dp--theme-light {
+  --dp-background-color: #f8fafc;   /* slate-50  */
+  --dp-text-color: #0f172a;         /* slate-900 */
+  --dp-hover-color: #f1f5f9;        /* slate-100 */
+  --dp-hover-text-color: #0f172a;
+  --dp-hover-icon-color: #64748b;   /* slate-500 */
+  --dp-icon-color: #94a3b8;         /* slate-400 */
+  --dp-primary-color: #059669;      /* emerald-600 */
+  --dp-primary-disabled-color: #6ee7b7; /* emerald-300 */
+  --dp-secondary-color: #94a3b8;
+  --dp-border-color: #cbd5e1;       /* slate-300 */
+  --dp-menu-border-color: #cbd5e1;
+  --dp-border-color-hover: #94a3b8;
+  --dp-border-color-focus: #10b981; /* emerald-500 */
+  --dp-highlight-color: rgb(16 185 129 / 0.12);
+  --dp-success-color: #10b981;
+  --dp-danger-color: #ef4444;       /* red-500 */
+  --dp-marker-color: #ef4444;
+}
+html .dp--theme-dark {
+  --dp-background-color: #0f172a;   /* slate-900 */
+  --dp-text-color: #f1f5f9;         /* slate-100 */
+  --dp-hover-color: #1e293b;        /* slate-800 */
+  --dp-hover-text-color: #f1f5f9;
+  --dp-hover-icon-color: #cbd5e1;   /* slate-300 */
+  --dp-icon-color: #64748b;         /* slate-500 */
+  --dp-primary-color: #059669;      /* emerald-600 */
+  --dp-primary-disabled-color: #065f46; /* emerald-800 */
+  --dp-secondary-color: #64748b;
+  --dp-border-color: #475569;       /* slate-600 */
+  --dp-menu-border-color: #334155;  /* slate-700 */
+  --dp-border-color-hover: #64748b;
+  --dp-border-color-focus: #10b981; /* emerald-500 */
+  --dp-highlight-color: rgb(16 185 129 / 0.2);
+  --dp-disabled-color: #1e293b;
+  --dp-disabled-color-text: #64748b;
+  --dp-scroll-bar-background: #0f172a;
+  --dp-scroll-bar-color: #334155;
+  --dp-success-color: #10b981;
+  --dp-danger-color: #ef4444;
+  --dp-marker-color: #ef4444;
+  --dp-tooltip-color: #1e293b;
+}