@indielayer/ui 1.18.1 → 2.1.0

package/src/components/datepicker/Datepicker.vue

@@ -1,122 +1,420 @@
 <script lang="ts">
+const VDP_DESC = 'Passed through to @vuepic/vue-datepicker.'
+
 const vueDatepickerProps = {
-  multiCalendars: { type: [Boolean, Number, String, Object] as PropType<VueDatePickerProps['multiCalendars']>, default: undefined },
-  modelValue: { type: [String, Date, Array, Object, Number] as PropType<ModelValue>, default: null },
-  modelType: { type: String as PropType<VueDatePickerProps['modelType']>, default: null },
-  position: { type: String as PropType<VueDatePickerProps['position']>, default: 'center' },
-  dark: { type: Boolean as PropType<boolean>, default: false },
+  multiCalendars: {
+    type: [Boolean, Number, String, Object] as PropType<VueDatePickerProps['multiCalendars']>, default: undefined,
+    description: VDP_DESC,
+  },
+  modelValue: {
+    type: [String, Date, Array, Object, Number] as PropType<ModelValue>, default: null,
+    description: VDP_DESC,
+  },
+  modelType: {
+    type: String as PropType<VueDatePickerProps['modelType']>, default: null,
+    description: VDP_DESC,
+  },
+  position: {
+    type: String as PropType<VueDatePickerProps['position']>, default: 'center',
+    description: VDP_DESC,
+  },
+  dark: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
   format: {
     type: [String, Function] as PropType<VueDatePickerProps['format']>,
     default: () => null,
+    description: VDP_DESC,
+  },
+  autoPosition: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  altPosition: {
+    type: Function as PropType<VueDatePickerProps['altPosition']>, default: null,
+    description: VDP_DESC,
+  },
+  transitions: {
+    type: [Boolean, Object] as PropType<boolean | Partial<VueDatePickerProps['transitions']>>, default: true,
+    description: VDP_DESC,
+  },
+  formatLocale: {
+    type: Object as PropType<Locale>, default: null,
+    description: VDP_DESC,
+  },
+  utc: {
+    type: [Boolean, String] as PropType<boolean | 'preserve'>, default: false,
+    description: VDP_DESC,
+  },
+  ariaLabels: {
+    type: Object as PropType<Partial<VueDatePickerProps['ariaLabels']>>, default: () => ({}),
+    description: VDP_DESC,
+  },
+  offset: {
+    type: [Number, String] as PropType<number | string>, default: 10,
+    description: VDP_DESC,
+  },
+  hideNavigation: {
+    type: Array as PropType<VueDatePickerProps['hideNavigation']>, default: () => [],
+    description: VDP_DESC,
+  },
+  timezone: {
+    type: [String, Object] as PropType<VueDatePickerProps['timezone']>, default: null,
+    description: VDP_DESC,
+  },
+  vertical: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  disableMonthYearSelect: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  disableYearSelect: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  dayClass: {
+    type: Function as PropType<(date: Date) => string>, default: null,
+    description: VDP_DESC,
+  },
+  yearRange: {
+    type: Array as PropType<number[]>, default: () => [1900, 2100],
+    description: VDP_DESC,
+  },
+  enableTimePicker: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  autoApply: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  disabledDates: {
+    type: [Array, Function] as PropType<VueDatePickerProps['disabledDates']>, default: () => [],
+    description: VDP_DESC,
+  },
+  monthNameFormat: {
+    type: String as PropType<'long' | 'short'>, default: 'short',
+    description: VDP_DESC,
+  },
+  startDate: {
+    type: [Date, String] as PropType<string | Date>, default: null,
+    description: VDP_DESC,
+  },
+  startTime: {
+    type: [Object, Array] as PropType<VueDatePickerProps['startTime']>, default: null,
+    description: VDP_DESC,
+  },
+  hideOffsetDates: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  noToday: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  disabledWeekDays: {
+    type: Array as PropType<string[] | number[]>, default: () => [],
+    description: VDP_DESC,
+  },
+  allowedDates: {
+    type: Array as PropType<string[] | Date[]>, default: null,
+    description: VDP_DESC,
+  },
+  nowButtonLabel: {
+    type: String as PropType<string>, default: 'Now',
+    description: VDP_DESC,
+  },
+  markers: {
+    type: Array as PropType<VueDatePickerProps['markers']>, default: () => [],
+    description: VDP_DESC,
+  },
+  escClose: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  spaceConfirm: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  monthChangeOnArrows: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  presetDates: {
+    type: Array as PropType<VueDatePickerProps['presetDates']>, default: () => [],
+    description: VDP_DESC,
+  },
+  flow: {
+    type: Array as PropType<VueDatePickerProps['flow']>, default: () => [],
+    description: VDP_DESC,
+  },
+  partialFlow: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  preventMinMaxNavigation: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  reverseYears: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  weekPicker: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  filters: {
+    type: Object as PropType<Partial<VueDatePickerProps['filters']>>, default: () => ({}),
+    description: VDP_DESC,
+  },
+  arrowNavigation: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
   },
-  autoPosition: { type: Boolean as PropType<boolean>, default: true },
-  altPosition: { type: Function as PropType<VueDatePickerProps['altPosition']>, default: null },
-  transitions: { type: [Boolean, Object] as PropType<boolean | Partial<VueDatePickerProps['transitions']>>, default: true },
-  formatLocale: { type: Object as PropType<Locale>, default: null },
-  utc: { type: [Boolean, String] as PropType<boolean | 'preserve'>, default: false },
-  ariaLabels: { type: Object as PropType<Partial<VueDatePickerProps['ariaLabels']>>, default: () => ({}) },
-  offset: { type: [Number, String] as PropType<number | string>, default: 10 },
-  hideNavigation: { type: Array as PropType<VueDatePickerProps['hideNavigation']>, default: () => [] },
-  timezone: { type: [String, Object] as PropType<VueDatePickerProps['timezone']>, default: null },
-  vertical: { type: Boolean as PropType<boolean>, default: false },
-  disableMonthYearSelect: { type: Boolean as PropType<boolean>, default: false },
-  disableYearSelect: { type: Boolean as PropType<boolean>, default: false },
-  dayClass: { type: Function as PropType<(date: Date) => string>, default: null },
-  yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
-  enableTimePicker: { type: Boolean as PropType<boolean>, default: true },
-  autoApply: { type: Boolean as PropType<boolean>, default: false },
-  disabledDates: { type: [Array, Function] as PropType<VueDatePickerProps['disabledDates']>, default: () => [] },
-  monthNameFormat: { type: String as PropType<'long' | 'short'>, default: 'short' },
-  startDate: { type: [Date, String] as PropType<string | Date>, default: null },
-  startTime: { type: [Object, Array] as PropType<VueDatePickerProps['startTime']>, default: null },
-  hideOffsetDates: { type: Boolean as PropType<boolean>, default: false },
-  noToday: { type: Boolean as PropType<boolean>, default: false },
-  disabledWeekDays: { type: Array as PropType<string[] | number[]>, default: () => [] },
-  allowedDates: { type: Array as PropType<string[] | Date[]>, default: null },
-  nowButtonLabel: { type: String as PropType<string>, default: 'Now' },
-  markers: { type: Array as PropType<VueDatePickerProps['markers']>, default: () => [] },
-  escClose: { type: Boolean as PropType<boolean>, default: true },
-  spaceConfirm: { type: Boolean as PropType<boolean>, default: true },
-  monthChangeOnArrows: { type: Boolean as PropType<boolean>, default: true },
-  presetDates: { type: Array as PropType<VueDatePickerProps['presetDates']>, default: () => [] },
-  flow: { type: Array as PropType<VueDatePickerProps['flow']>, default: () => [] },
-  partialFlow: { type: Boolean as PropType<boolean>, default: false },
-  preventMinMaxNavigation: { type: Boolean as PropType<boolean>, default: false },
-  reverseYears: { type: Boolean as PropType<boolean>, default: false },
-  weekPicker: { type: Boolean as PropType<boolean>, default: false },
-  filters: { type: Object as PropType<Partial<VueDatePickerProps['filters']>>, default: () => ({}) },
-  arrowNavigation: { type: Boolean as PropType<boolean>, default: false },
   highlight: {
     type: [Function, Object] as PropType<VueDatePickerProps['highlight']>,
     default: null,
+    description: VDP_DESC,
+  },
+  teleport: {
+    type: [String, Boolean, Object] as PropType<string | boolean | HTMLElement>, default: null,
+    description: VDP_DESC,
+  },
+  teleportCenter: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  locale: {
+    type: String as PropType<string>, default: 'en-Us',
+    description: VDP_DESC,
+  },
+  weekNumName: {
+    type: String as PropType<string>, default: 'W',
+    description: VDP_DESC,
+  },
+  weekStart: {
+    type: [Number, String] as PropType<VueDatePickerProps['weekStart']>, default: 1,
+    description: VDP_DESC,
   },
-  teleport: { type: [String, Boolean, Object] as PropType<string | boolean | HTMLElement>, default: null },
-  teleportCenter: { type: Boolean as PropType<boolean>, default: false },
-  locale: { type: String as PropType<string>, default: 'en-Us' },
-  weekNumName: { type: String as PropType<string>, default: 'W' },
-  weekStart: { type: [Number, String] as PropType<VueDatePickerProps['weekStart']>, default: 1 },
   weekNumbers: {
     type: [String, Function, Object] as PropType<VueDatePickerProps['weekNumbers']>,
     default: null,
+    description: VDP_DESC,
+  },
+  monthChangeOnScroll: {
+    type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true,
+    description: VDP_DESC,
   },
-  monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
   dayNames: {
     type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>,
     default: null,
+    description: VDP_DESC,
+  },
+  monthPicker: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  customProps: {
+    type: Object as PropType<Record<string, unknown>>, default: null,
+    description: VDP_DESC,
+  },
+  yearPicker: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  modelAuto: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  selectText: {
+    type: String as PropType<string>, default: 'Select',
+    description: VDP_DESC,
+  },
+  cancelText: {
+    type: String as PropType<string>, default: 'Cancel',
+    description: VDP_DESC,
   },
-  monthPicker: { type: Boolean as PropType<boolean>, default: false },
-  customProps: { type: Object as PropType<Record<string, unknown>>, default: null },
-  yearPicker: { type: Boolean as PropType<boolean>, default: false },
-  modelAuto: { type: Boolean as PropType<boolean>, default: false },
-  selectText: { type: String as PropType<string>, default: 'Select' },
-  cancelText: { type: String as PropType<string>, default: 'Cancel' },
   previewFormat: {
     type: [String, Function] as PropType<VueDatePickerProps['previewFormat']>,
     default: () => '',
+    description: VDP_DESC,
+  },
+  multiDates: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  ignoreTimeValidation: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  minDate: {
+    type: [Date, String] as PropType<Date | string>, default: null,
+    description: VDP_DESC,
+  },
+  maxDate: {
+    type: [Date, String] as PropType<Date | string>, default: null,
+    description: VDP_DESC,
+  },
+  minTime: {
+    type: Object as PropType<Partial<TimeModel>>, default: null,
+    description: VDP_DESC,
+  },
+  maxTime: {
+    type: Object as PropType<Partial<TimeModel>>, default: null,
+    description: VDP_DESC,
+  },
+  placeholder: {
+    type: String as PropType<string>, default: '',
+    description: VDP_DESC,
+  },
+  hideInputIcon: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  clearable: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  alwaysClearable: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  state: {
+    type: Boolean as PropType<VueDatePickerProps['state']>, default: null,
+    description: VDP_DESC,
+  },
+  required: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  autocomplete: {
+    type: String as PropType<string>, default: 'off',
+    description: VDP_DESC,
+  },
+  timePicker: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  enableSeconds: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  is24: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  noHoursOverlay: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  noMinutesOverlay: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  noSecondsOverlay: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  hoursGridIncrement: {
+    type: [String, Number] as PropType<string | number>, default: 1,
+    description: VDP_DESC,
+  },
+  minutesGridIncrement: {
+    type: [String, Number] as PropType<string | number>, default: 5,
+    description: VDP_DESC,
+  },
+  secondsGridIncrement: {
+    type: [String, Number] as PropType<string | number>, default: 5,
+    description: VDP_DESC,
+  },
+  hoursIncrement: {
+    type: [Number, String] as PropType<number | string>, default: 1,
+    description: VDP_DESC,
+  },
+  minutesIncrement: {
+    type: [Number, String] as PropType<number | string>, default: 1,
+    description: VDP_DESC,
+  },
+  secondsIncrement: {
+    type: [Number, String] as PropType<number | string>, default: 1,
+    description: VDP_DESC,
+  },
+  range: {
+    type: [Boolean, Object] as PropType<VueDatePickerProps['range']>, default: false,
+    description: VDP_DESC,
+  },
+  uid: {
+    type: String as PropType<string>, default: null,
+    description: VDP_DESC,
+  },
+  inline: {
+    type: [Boolean, Object] as PropType<VueDatePickerProps['inline']>, default: false,
+    description: VDP_DESC,
+  },
+  textInput: {
+    type: [Boolean, Object] as PropType<VueDatePickerProps['textInput']>, default: false,
+    description: VDP_DESC,
+  },
+  noDisabledRange: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  sixWeeks: {
+    type: [Boolean, String] as PropType<VueDatePickerProps['sixWeeks']>, default: false,
+    description: VDP_DESC,
+  },
+  actionRow: {
+    type: Object as PropType<Partial<any>>, default: () => ({}),
+    description: VDP_DESC,
+  },
+  focusStartDate: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  disabledTimes: {
+    type: [Function, Array] as PropType<VueDatePickerProps['disabledTimes']>, default: undefined,
+    description: VDP_DESC,
+  },
+  showLastInRange: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  timePickerInline: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  calendar: {
+    type: Function as PropType<VueDatePickerProps['calendar']>, default: null,
+    description: VDP_DESC,
+  },
+  config: {
+    type: Object as PropType<Partial<VueDatePickerProps['config']>>, default: undefined,
+    description: VDP_DESC,
+  },
+  quarterPicker: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  yearFirst: {
+    type: Boolean as PropType<boolean>, default: false,
+    description: VDP_DESC,
+  },
+  onInternalModelChange: {
+    type: [Function, Object] as PropType<(...args: any[]) => void>, default: null,
+    description: VDP_DESC,
+  },
+  enableMinutes: {
+    type: Boolean as PropType<boolean>, default: true,
+    description: VDP_DESC,
+  },
+  ui: {
+    type: Object as PropType<Partial<VueDatePickerProps['ui']>>, default: () => ({}),
+    description: VDP_DESC,
   },
-  multiDates: { type: Boolean as PropType<boolean>, default: false },
-  ignoreTimeValidation: { type: Boolean as PropType<boolean>, default: false },
-  minDate: { type: [Date, String] as PropType<Date | string>, default: null },
-  maxDate: { type: [Date, String] as PropType<Date | string>, default: null },
-  minTime: { type: Object as PropType<Partial<TimeModel>>, default: null },
-  maxTime: { type: Object as PropType<Partial<TimeModel>>, default: null },
-  placeholder: { type: String as PropType<string>, default: '' },
-  hideInputIcon: { type: Boolean as PropType<boolean>, default: false },
-  clearable: { type: Boolean as PropType<boolean>, default: false },
-  alwaysClearable: { type: Boolean as PropType<boolean>, default: false },
-  state: { type: Boolean as PropType<VueDatePickerProps['state']>, default: null },
-  required: { type: Boolean as PropType<boolean>, default: false },
-  autocomplete: { type: String as PropType<string>, default: 'off' },
-  timePicker: { type: Boolean as PropType<boolean>, default: false },
-  enableSeconds: { type: Boolean as PropType<boolean>, default: false },
-  is24: { type: Boolean as PropType<boolean>, default: true },
-  noHoursOverlay: { type: Boolean as PropType<boolean>, default: false },
-  noMinutesOverlay: { type: Boolean as PropType<boolean>, default: false },
-  noSecondsOverlay: { type: Boolean as PropType<boolean>, default: false },
-  hoursGridIncrement: { type: [String, Number] as PropType<string | number>, default: 1 },
-  minutesGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
-  secondsGridIncrement: { type: [String, Number] as PropType<string | number>, default: 5 },
-  hoursIncrement: { type: [Number, String] as PropType<number | string>, default: 1 },
-  minutesIncrement: { type: [Number, String] as PropType<number | string>, default: 1 },
-  secondsIncrement: { type: [Number, String] as PropType<number | string>, default: 1 },
-  range: { type: [Boolean, Object] as PropType<VueDatePickerProps['range']>, default: false },
-  uid: { type: String as PropType<string>, default: null },
-  inline: { type: [Boolean, Object] as PropType<VueDatePickerProps['inline']>, default: false },
-  textInput: { type: [Boolean, Object] as PropType<VueDatePickerProps['textInput']>, default: false },
-  noDisabledRange: { type: Boolean as PropType<boolean>, default: false },
-  sixWeeks: { type: [Boolean, String] as PropType<VueDatePickerProps['sixWeeks']>, default: false },
-  actionRow: { type: Object as PropType<Partial<any>>, default: () => ({}) },
-  focusStartDate: { type: Boolean as PropType<boolean>, default: false },
-  disabledTimes: { type: [Function, Array] as PropType<VueDatePickerProps['disabledTimes']>, default: undefined },
-  showLastInRange: { type: Boolean as PropType<boolean>, default: true },
-  timePickerInline: { type: Boolean as PropType<boolean>, default: false },
-  calendar: { type: Function as PropType<VueDatePickerProps['calendar']>, default: null },
-  config: { type: Object as PropType<Partial<VueDatePickerProps['config']>>, default: undefined },
-  quarterPicker: { type: Boolean as PropType<boolean>, default: false },
-  yearFirst: { type: Boolean as PropType<boolean>, default: false },
-  onInternalModelChange: { type: [Function, Object] as PropType<(...args: any[]) => void>, default: null },
-  enableMinutes: { type: Boolean as PropType<boolean>, default: true },
-  ui: { type: Object as PropType<Partial<VueDatePickerProps['ui']>>, default: () => ({}) },
 }
 
 const datepickerProps = {
@@ -129,29 +427,94 @@ const datepickerProps = {
 export type DatepickerProps = ExtractPublicPropTypes<typeof datepickerProps>
 
 type InternalClasses = 'wrapper'
-export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses> {}
+type InternalExtraData = { isInsideInputGroup: boolean; }
+export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses, InternalExtraData> {}
 
 export default {
   name: 'XDatepicker',
+  docs: {
+    slots: {
+      'dp-input': 'Custom input trigger; receives value, onEnter, and onTab from vue-datepicker.',
+    },
+    emits: {
+      ...useInputtable.emitDocs(),
+    },
+    methods: {
+      focus: 'Focus the datepicker input.',
+      blur: 'Remove focus from the datepicker input.',
+      validate: 'Run validation on the underlying input.',
+    },
+  },
 }
 </script>
 
 <script setup lang="ts">
-import { ref, type ExtractPublicPropTypes, type PropType } from 'vue'
+import { ref, inject, computed, type ExtractPublicPropTypes, type PropType } from 'vue'
 import { useMutationObserver } from '@vueuse/core'
 import { useCommon } from '../../composables/useCommon'
 import { useInputtable } from '../../composables/useInputtable'
 import { useInteractive } from '../../composables/useInteractive'
-import { useTheme, type ThemeComponent } from '../../composables/useTheme'
+import { useTheme, type StyleValue, type ThemeComponent } from '../../composables/useTheme'
+import type { Size } from '../../composables/useCommon'
+import { injectInputGroupKey } from '../../composables/keys'
 import XInput from '../input/Input.vue'
 import type { Locale } from 'date-fns'
 import VueDatepicker, { type ModelValue, type TimeModel, type VueDatePickerProps } from '@vuepic/vue-datepicker'
 import '@vuepic/vue-datepicker/dist/main.css'
 
+let datepickerThemeSeq = 0
+
+/** Flatten theme StyleValue into CSS declarations for a teleported menu stylesheet. */
+function styleValueToCssText(value: StyleValue | StyleValue[]): string {
+  const decls: string[] = []
+
+  const visit = (v: unknown) => {
+    if (v === null || v === undefined || v === false) return
+    if (typeof v === 'string') {
+      const trimmed = v.trim()
+
+      if (trimmed) decls.push(trimmed.endsWith(';') ? trimmed.slice(0, -1) : trimmed)
+
+      return
+    }
+    if (Array.isArray(v)) {
+      v.forEach(visit)
+
+      return
+    }
+    if (typeof v === 'object') {
+      for (const [key, val] of Object.entries(v as Record<string, unknown>)) {
+        if (val === null || val === undefined || val === false) continue
+        decls.push(`${key}: ${val}`)
+      }
+    }
+  }
+
+  visit(value)
+
+  return decls.join(';\n')
+}
+
 const props = defineProps(datepickerProps)
 
+const inputGroup = inject(injectInputGroupKey, {
+  registerChild: () => {},
+  unregisterChild: () => {},
+  registerInput: () => {},
+  unregisterInput: () => {},
+  getPosition: () => 'only',
+  childOrder: computed(() => []),
+  isInsideInputGroup: false,
+  groupProps: {},
+})
+
 const emit = defineEmits(useInputtable.emits())
 
+const isInsideInputGroup = computed(() => inputGroup.isInsideInputGroup)
+const computedSize = computed((): Size => inputGroup.groupProps?.size ?? props.size)
+const isDisabled = computed(() => props.disabled || props.loading || !!inputGroup.groupProps?.disabled)
+const computedLabel = computed(() => (inputGroup.isInsideInputGroup ? undefined : props.label))
+
 const inputRef = ref<InstanceType<typeof XInput> | null>(null)
 
 function onSelect(value: Date | Date[]) {
@@ -172,7 +535,7 @@ function validate() {
   inputRef.value?.validate()
 }
 
-const htmlNode = document?.querySelector('html')
+const htmlNode = typeof document !== 'undefined' ? document.querySelector('html') : null
 const dark = ref(htmlNode?.classList.contains('dark') ?? false)
 
 useMutationObserver(htmlNode, (mutations) => {
@@ -183,21 +546,45 @@ useMutationObserver(htmlNode, (mutations) => {
   attributes: true,
 })
 
+const { hideFooterInternal } = useInputtable(props, { focus, emit })
+
 defineExpose({ focus, blur, validate })
 
-const { styles, classes, className } = useTheme('Datepicker', {}, props)
+const { styles, classes, className } = useTheme('Datepicker', {}, props, { isInsideInputGroup })
+
+// Teleported menus leave the wrapper, so theme CSS vars must travel with the menu.
+const menuThemeClass = `x-datepicker-menu-${++datepickerThemeSeq}`
+
+const mergedUi = computed(() => {
+  const userUi = props.ui ?? {}
+  const userMenu = userUi.menu
+  const menu = [
+    ...(Array.isArray(userMenu) ? userMenu : userMenu ? [userMenu] : []),
+    menuThemeClass,
+  ]
+
+  return { ...userUi, menu }
+})
+
+const menuThemeCss = computed(() => {
+  const declarations = styleValueToCssText(styles.value)
+
+  return declarations ? `.${menuThemeClass}{\n${declarations}\n}` : ''
+})
 </script>
 
 <template>
   <div
-    :style="[styles, { '--dp-clear-btn-top': !!label ? '2.75rem' : '1.2rem' }]"
+    :style="[styles, { '--dp-clear-btn-top': computedLabel ? '2.75rem' : '1.2rem' }]"
     :class="[
       className,
       classes.wrapper,
+      isInsideInputGroup ? 'flex-1 min-w-0' : '',
     ]"
   >
+    <component :is="'style'">{{ menuThemeCss }}</component>
     <vue-datepicker
-      :ui="ui"
+      :ui="mergedUi"
       :model-value="modelValue"
       :multi-calendars="multiCalendars"
       :model-type="modelType"
@@ -301,10 +688,11 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
           ref="inputRef"
           :readonly="textInput === false || readonly"
           :model-value="value"
-          :label="label"
-          :size="size"
-          :disabled="disabled"
+          :label="computedLabel"
+          :size="computedSize"
+          :disabled="isDisabled"
           :helper="helper"
+          :is-inside-input-group="isInsideInputGroup"
           icon-right="calendar"
           :loading="loading"
           data-1p-ignore
@@ -313,7 +701,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
           :tooltip="tooltip"
           :placeholder="placeholder"
           :required="required"
-          :hide-footer="hideFooter"
+          :hide-footer="hideFooterInternal"
           @keydown.prevent.enter="onEnter"
           @keydown.tab="onTab"
         />
@@ -326,8 +714,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
   </div>
 </template>
 
-<style lang="postcss">
-/* stylelint-disable selector-class-pattern */
+<style>
 .dp__menu {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 10%), 0 4px 6px -4px rgb(0 0 0 / 10%);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -414,7 +801,7 @@ const { styles, classes, className } = useTheme('Datepicker', {}, props)
 }
 
 .dp__action_row {
-  border-top: 1px solid #eee;
+  border-top: 1px solid var(--dp-border-color, #eee);
   margin-top: 10px;
 }
 </style>