@indielayer/ui 1.5.2 → 1.6.0

package/src/components/datepicker/Datepicker.vue

@@ -0,0 +1,414 @@
+<script lang="ts">
+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 },
+  format: {
+    type: [String, Function] as PropType<VueDatePickerProps['format']>,
+    default: () => null,
+  },
+  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 },
+  emitTimezone: { type: String as PropType<string>, 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 },
+  menuClassName: { type: String as PropType<string>, default: null },
+  dayClass: { type: Function as PropType<(date: Date) => string>, default: null },
+  yearRange: { type: Array as PropType<number[]>, default: () => [1900, 2100] },
+  calendarCellClassName: { type: String as PropType<string>, default: null },
+  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 },
+  autoRange: { type: [Number, String] as PropType<number | string>, default: null },
+  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 },
+  minRange: { type: [Number, String] as PropType<number | string>, default: null },
+  maxRange: { type: [Number, String] as PropType<number | string>, default: null },
+  multiDatesLimit: { type: [Number, String] as PropType<number | string>, default: null },
+  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 },
+  disableTimeRangeValidation: { type: Boolean as PropType<boolean>, default: false },
+  highlight: {
+    type: [Function, Object] as PropType<VueDatePickerProps['highlight']>,
+    default: null,
+  },
+  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,
+  },
+  calendarClassName: { type: String as PropType<string>, default: null },
+  monthChangeOnScroll: { type: [Boolean, String] as PropType<boolean | 'inverse'>, default: true },
+  dayNames: {
+    type: [Function, Array] as PropType<((lang: string, weekStart: number) => string[]) | string[]>,
+    default: null,
+  },
+  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: () => '',
+  },
+  multiDates: { type: Boolean as PropType<boolean>, default: false },
+  partialRange: { type: Boolean as PropType<boolean>, default: true },
+  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: true },
+  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' },
+  inputClassName: { type: String as PropType<string>, default: null },
+  fixedStart: { type: Boolean as PropType<boolean>, default: false },
+  fixedEnd: { type: Boolean as PropType<boolean>, default: false },
+  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 },
+}
+
+const datepickerProps = {
+  ...useCommon.props(),
+  ...useInteractive.props(),
+  ...useInputtable.props(),
+  ...vueDatepickerProps,
+}
+
+export type DatepickerProps = ExtractPublicPropTypes<typeof datepickerProps>
+
+type InternalClasses = 'wrapper'
+export interface DatepickerTheme extends ThemeComponent<DatepickerProps, InternalClasses> {}
+
+export default {
+  name: 'XDatepicker',
+}
+</script>
+
+<script setup lang="ts">
+import { ref, 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 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'
+
+const props = defineProps(datepickerProps)
+
+const emit = defineEmits(useInputtable.emits())
+
+const inputRef = ref<InstanceType<typeof XInput> | null>(null)
+
+function onSelect(value: Date | Date[]) {
+  emit('update:modelValue', value)
+
+  setTimeout(validate)
+}
+
+function blur() {
+  inputRef.value?.blur()
+}
+
+function focus() {
+  inputRef.value?.focus()
+}
+
+function validate() {
+  inputRef.value?.validate()
+}
+
+const htmlNode = document?.querySelector('html')
+const dark = ref(htmlNode?.classList.contains('dark') ?? false)
+
+useMutationObserver(htmlNode, (mutations) => {
+  if (mutations[0] && mutations[0].attributeName === 'class') {
+    dark.value = htmlNode?.classList.contains('dark') ?? false
+  }
+}, {
+  attributes: true,
+})
+
+defineExpose({ focus, blur, validate })
+
+const { styles, classes, className } = useTheme('Datepicker', {}, props)
+</script>
+
+<template>
+  <div
+    :style="styles"
+    :class="[
+      className,
+      classes.wrapper,
+    ]"
+  >
+    <vue-datepicker
+      :model-value="modelValue"
+      :multi-calendars="multiCalendars"
+      :model-type="modelType"
+      :position="position"
+      :dark="dark"
+      :format="format"
+      :auto-position="autoPosition"
+      :alt-position="altPosition"
+      :transitions="transitions"
+      :format-locale="formatLocale"
+      :utc="utc"
+      :aria-labels="ariaLabels"
+      :offset="offset"
+      :hide-navigation="hideNavigation"
+      :timezone="timezone"
+      :emit-timezone="emitTimezone"
+      :vertical="vertical"
+      :disable-month-year-select="disableMonthYearSelect"
+      :disable-year-select="disableYearSelect"
+      :menu-class-name="menuClassName"
+      :day-class="dayClass"
+      :year-range="yearRange"
+      :calendar-cell-class-name="calendarCellClassName"
+      :enable-time-picker="enableTimePicker"
+      :auto-apply="autoApply"
+      :disabled-dates="disabledDates"
+      :month-name-format="monthNameFormat"
+      :start-date="startDate"
+      :start-time="startTime"
+      :hide-offset-dates="hideOffsetDates"
+      :auto-range="autoRange"
+      :no-today="noToday"
+      :disabled-week-days="disabledWeekDays"
+      :allowed-dates="allowedDates"
+      :now-button-label="nowButtonLabel"
+      :markers="markers"
+      :esc-close="escClose"
+      :space-confirm="spaceConfirm"
+      :month-change-on-arrows="monthChangeOnArrows"
+      :preset-dates="presetDates"
+      :flow="flow"
+      :partial-flow="partialFlow"
+      :prevent-min-max-navigation="preventMinMaxNavigation"
+      :min-range="minRange"
+      :max-range="maxRange"
+      :multi-dates-limit="multiDatesLimit"
+      :reverse-years="reverseYears"
+      :week-picker="weekPicker"
+      :filters="filters"
+      :arrow-navigation="arrowNavigation"
+      :disable-time-range-validation="disableTimeRangeValidation"
+      :highlight="highlight"
+      :teleport="teleport"
+      :teleport-center="teleportCenter"
+      :locale="locale"
+      :week-num-name="weekNumName"
+      :week-start="weekStart"
+      :week-numbers="weekNumbers"
+      :calendar-class-name="calendarClassName"
+      :month-change-on-scroll="monthChangeOnScroll"
+      :day-names="dayNames"
+      :month-picker="monthPicker"
+      :custom-props="customProps"
+      :year-picker="yearPicker"
+      :model-auto="modelAuto"
+      :select-text="selectText"
+      :cancel-text="cancelText"
+      :preview-format="previewFormat"
+      :multi-dates="multiDates"
+      :partial-range="partialRange"
+      :ignore-time-validation="ignoreTimeValidation"
+      :min-date="minDate"
+      :max-date="maxDate"
+      :placeholder="placeholder"
+      :hide-input-icon="hideInputIcon"
+      :clearable="clearable"
+      :state="state"
+      :required="required"
+      :autocomplete="autocomplete"
+      :input-class-name="inputClassName"
+      :fixed-start="fixedStart"
+      :fixed-end="fixedEnd"
+      :time-picker="timePicker"
+      :enable-seconds="enableSeconds"
+      :no-hours-overlay="noHoursOverlay"
+      :no-minutes-overlay="noMinutesOverlay"
+      :no-seconds-overlay="noSecondsOverlay"
+      :hours-grid-increment="hoursGridIncrement"
+      :minutes-grid-increment="minutesGridIncrement"
+      :seconds-grid-increment="secondsGridIncrement"
+      :hours-increment="hoursIncrement"
+      :minutes-increment="minutesIncrement"
+      :seconds-increment="secondsIncrement"
+      :range="range"
+      :uid="uid"
+      :inline="inline"
+      :text-input="textInput"
+      :no-disabled-range="noDisabledRange"
+      :six-weeks="sixWeeks"
+      :action-row="actionRow"
+      :focus-start-date="focusStartDate"
+      :disabled-times="disabledTimes"
+      :show-last-in-range="showLastInRange"
+      :time-picker-inline="timePickerInline"
+      :calendar="calendar"
+      :config="config"
+      :quarter-picker="quarterPicker"
+      :year-first="yearFirst"
+      @update:model-value="onSelect"
+    >
+      <template #dp-input="{ value, onEnter, onTab }">
+        <x-input
+          ref="inputRef"
+          readonly
+          :model-value="value"
+          :label="label"
+          :size="size"
+          :disabled="disabled"
+          :helper="helper"
+          icon-right="calendar"
+          :loading="loading"
+          :name="name"
+          :rules="rules"
+          :tooltip="tooltip"
+          :placeholder="placeholder"
+          :required="required"
+          :hide-footer="hideFooter"
+          @keydown.prevent.enter="onEnter"
+          @keydown.tab="onTab"
+        >
+          <template v-for="(_, name) in $slots" #[name]="slotProps = {}">
+            <slot v-bind="slotProps" :name="name"></slot>
+          </template>
+        </x-input>
+      </template>
+    </vue-datepicker>
+  </div>
+</template>
+
+<style lang="postcss">
+/* stylelint-disable selector-class-pattern */
+.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);
+
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+
+.dp__theme_dark {
+  --dp-background-color: var(--x-datepicker-dark-bg, #212121);
+  --dp-text-color: var(--x-datepicker-dark-text, #fff);
+  --dp-hover-color: var(--x-datepicker-dark-range, #484848);
+  --dp-hover-text-color: #fff;
+  --dp-hover-icon-color: var(--x-datepicker-dark-icon, #959595);
+  --dp-primary-color: var(--x-datepicker-dark-primary, #1976d2);
+  --dp-primary-disabled-color: #61a8ea;
+  --dp-primary-text-color: #fff;
+  --dp-secondary-color: var(--x-datepicker-dark-disabled, #a9a9a9);
+  --dp-border-color: var(--x-datepicker-dark-border, #2d2d2d);
+  --dp-menu-border-color: var(--x-datepicker-dark-border, #2d2d2d);
+  --dp-border-color-hover: #aaaeb7;
+  --dp-disabled-color: #737373;
+  --dp-disabled-color-text: var(--x-datepicker-dark-disabled, #d0d0d0);
+  --dp-scroll-bar-background: #212121;
+  --dp-scroll-bar-color: var(--x-datepicker-dark-range, #484848);
+  --dp-success-color: #00701a;
+  --dp-success-color-disabled: #428f59;
+  --dp-icon-color: var(--x-datepicker-dark-icon, #959595);
+  --dp-danger-color: #e53935;
+  --dp-marker-color: #e53935;
+  --dp-tooltip-color: #3e3e3e;
+  --dp-highlight-color: rgb(0 92 178 / 20%);
+  --dp-range-between-dates-background-color: var(--x-datepicker-dark-range, #484848);
+  --dp-range-between-dates-text-color: var(--x-datepicker-dark-text, #fff);
+  --dp-range-between-border-color: var(--x-datepicker-dark-text, #fff);
+}
+
+.dp__theme_light {
+  --dp-background-color: var(--x-datepicker-bg, #fff);
+  --dp-text-color: var(--x-datepicker-text, #212121);
+  --dp-hover-color: var(--x-datepicker-range, #f3f3f3);
+  --dp-hover-text-color: #212121;
+  --dp-hover-icon-color: var(--x-datepicker-icon, #959595);
+  --dp-primary-color: var(--x-datepicker-primary, #1976d2);
+  --dp-primary-disabled-color: #6bacea;
+  --dp-primary-text-color: #f8f5f5;
+  --dp-secondary-color: var(--x-datepicker-disabled, #c0c4cc);
+  --dp-border-color: var(--x-datepicker-border, #ddd);
+  --dp-menu-border-color: var(--x-datepicker-border, #ddd);
+  --dp-border-color-hover: #aaaeb7;
+  --dp-disabled-color: #f6f6f6;
+  --dp-scroll-bar-background: var(--x-datepicker-range, #f3f3f3);
+  --dp-scroll-bar-color: var(--x-datepicker-icon, #959595);
+  --dp-success-color: #76d275;
+  --dp-success-color-disabled: #a3d9b1;
+  --dp-icon-color: var(--x-datepicker-icon, #959595);
+  --dp-danger-color: #ff6f60;
+  --dp-marker-color: #ff6f60;
+  --dp-tooltip-color: #fafafa;
+  --dp-disabled-color-text: var(--x-datepicker-disabled, #8e8e8e);
+  --dp-highlight-color: rgb(25 118 210 / 10%);
+  --dp-range-between-dates-background-color: var(--x-datepicker-range, #f3f3f3);
+  --dp-range-between-dates-text-color: var(--x-datepicker-text, #212121);
+  --dp-range-between-border-color: var(--x-datepicker-range, #f3f3f3);
+}
+</style>

package/src/components/datepicker/__tests__/Datepicker.spec.ts

@@ -0,0 +1,11 @@
+import { describe, it, expect } from 'vitest'
+import { mount } from '@vue/test-utils'
+import Datepicker from '../Datepicker.vue'
+
+describe('Datepicker', () => {
+  it('renders properly', () => {
+    const wrapper = mount(Datepicker)
+
+    expect(wrapper.vm).toBeTruthy()
+  })
+})

package/src/components/datepicker/index.ts

@@ -0,0 +1,2 @@
+export { default as XDatepicker } from './Datepicker.vue'
+export type { DatepickerProps, DatepickerTheme } from './Datepicker.vue'

package/src/components/datepicker/theme/Datepicker.base.theme.ts

@@ -0,0 +1,72 @@
+import type { DatepickerTheme } from '../Datepicker.vue'
+
+const theme: DatepickerTheme = {
+  classes: {
+    wrapper: '',
+  },
+
+  styles({ props, colors, css, data }) {
+    const primary = colors.getPalette('primary')
+    const secondary = colors.getPalette('secondary')
+    const vars: Array<Record<string, string> | string> = [`
+    /*General*/
+    --dp-font-family: Inter, -apple-system, BlinkMacSystemFont, ui-sans-serif, system-ui, sans-serif;
+    "Helvetica Neue", sans-serif;
+    --dp-border-radius: 8px; /*Configurable border-radius*/
+    --dp-cell-border-radius: 8px; /*Specific border radius for the calendar cell*/
+    --dp-common-transition: all 0.1s ease-in; /*Generic transition applied on buttons and calendar cells*/
+
+    /*Sizing*/
+    --dp-button-height: 35px; /*Size for buttons in overlays*/
+    --dp-month-year-row-height: 35px; /*Height of the month-year select row*/
+    --dp-month-year-row-button-size: 35px; /*Specific height for the next/previous buttons*/
+    --dp-button-icon-height: 20px; /*Icon sizing in buttons*/
+    --dp-cell-size: 35px; /*Width and height of calendar cell*/
+    --dp-cell-padding: 5px; /*Padding in the cell*/
+    --dp-common-padding: 10px; /*Common padding used*/
+    --dp-input-icon-padding: 35px; /*Padding on the left side of the input if icon is present*/
+    --dp-input-padding: 6px 30px 6px 12px; /*Padding in the input*/
+    --dp-menu-min-width: 260px; /*Adjust the min width of the menu*/
+    --dp-action-buttons-padding: 12px; /*Adjust padding for the action buttons in action row*/
+    --dp-row-margin:  5px 0; /*Adjust the spacing between rows in the calendar*/
+    --dp-calendar-header-cell-padding:  0.5rem; /*Adjust padding in calendar header cells*/
+    --dp-two-calendars-spacing:  10px; /*Space between multiple calendars*/
+    --dp-overlay-col-padding:  3px; /*Padding in the overlay column*/
+    --dp-time-inc-dec-button-size:  32px; /*Sizing for arrow buttons in the time picker*/
+    --dp-menu-padding: 6px 8px; /*Menu padding*/
+
+    /*Font sizes*/
+    --dp-font-size: 0.875rem; /*Default font-size*/
+    --dp-preview-font-size: 0.8rem; /*Font size of the date preview in the action row*/
+    --dp-time-font-size: 0.8rem; /*Font size in the time picker*/
+
+    /*Transitions*/
+    --dp-animation-duration: 0.1s; /*Transition duration*/
+    --dp-menu-appear-transition-timing: cubic-bezier(.4, 0, 1, 1); /*Timing on menu appear animation*/
+    --dp-transition-timing: ease-out; /*Timing on slide animations*/
+  `]
+
+    vars.push(css.variables({
+      bg: '#fff',
+      text: secondary[800],
+      disabled: secondary[800],
+      range: secondary[200],
+      icon: secondary[500],
+      primary: primary[500],
+      border: secondary[100],
+      dark: {
+        bg: secondary[800],
+        text: secondary[100],
+        disabled: secondary[700],
+        range: secondary[600],
+        icon: secondary[200],
+        primary: primary[500],
+        border: secondary[700],
+      },
+    }))
+
+    return vars
+  },
+}
+
+export default theme

package/src/components/datepicker/theme/Datepicker.carbon.theme.ts

@@ -0,0 +1,7 @@
+import type { DatepickerTheme } from '../Datepicker.vue'
+
+import BaseTheme from './Datepicker.base.theme'
+
+const theme: DatepickerTheme = BaseTheme
+
+export default theme

package/src/components/drawer/Drawer.vue

@@ -12,7 +12,7 @@ const drawerProps = {
   },
   width: {
     type: [String, Number],
-    default: 320,
+    default: 220,
   },
   height: {
     type: [String, Number],

package/src/components/drawer/theme/Drawer.base.theme.ts

@@ -2,7 +2,7 @@ import type { DrawerTheme } from '../Drawer.vue'
 
 const theme: DrawerTheme = {
   classes: {
-    wrapper: 'flex flex-col max-h-full bg-white dark:bg-secondary-800',
+    wrapper: 'flex flex-col max-h-full bg-white dark:bg-secondary-800 transition-all',
 
     backdrop: 'duration-150 ease-in-out',
   },

package/src/components/formGroup/FormGroup.vue

@@ -90,6 +90,10 @@ const listeners = {
   },
 }
 
+function manualValidate() {
+  if (props.validateOnInput && !isFirstValidation.value) validate(props.modelValue)
+}
+
 const { styles, classes, className } = useTheme('FormGroup', {}, props, { errorInternal })
 
 defineExpose({ focus, blur, reset, validate, setError })
@@ -108,6 +112,7 @@ defineExpose({ focus, blur, reset, validate, setError })
     ]"
     :tooltip="tooltip"
     v-on="listeners"
+    @keyup.space="manualValidate"
   >
     <div :class="classes.wrapper">
       <slot></slot>

package/src/components/index.ts

@@ -8,6 +8,7 @@ export * from './card'
 export * from './carousel'
 export * from './checkbox'
 export * from './container'
+export * from './datepicker'
 export * from './divider'
 export * from './drawer'
 export * from './form'
@@ -25,6 +26,7 @@ export * from './notifications'
 export * from './pagination'
 export * from './popover'
 export * from './progress'
+export * from './qrCode'
 export * from './radio'
 export * from './scroll'
 export * from './select'

package/src/components/menu/Menu.vue

@@ -18,6 +18,7 @@ const menuProps = {
     type: Boolean,
     default: true,
   },
+  minimal: Boolean,
 }
 
 export type MenuArrayItem = {
@@ -104,6 +105,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :filled="item.filled || filled"
               :size="item.size || size"
               :disabled="disabled || item.disabled"
+              :minimal="minimal"
               class="font-medium"
             />
           </template>
@@ -120,6 +122,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
               :disabled="disabled || item.disabled"
               :rounded="rounded"
               :filled="filled"
+              :minimal="minimal"
               @expand="expand(false)"
               @item-click="$emit('item-click')"
             />
@@ -133,6 +136,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :filled="item.filled || filled"
             :size="item.size || size"
             :disabled="disabled || item.disabled"
+            :minimal="minimal"
             class="font-medium"
             inactive
             @click="$emit('item-click')"
@@ -147,6 +151,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
             :collapse-icon="item.collapseIcon || collapseIcon"
             :expanded="item.expanded || expanded"
             :disabled="disabled || item.disabled"
+            :minimal="minimal"
             :rounded="rounded"
             :filled="filled"
             @expand="$emit('expand')"
@@ -163,6 +168,7 @@ const { styles, classes, className } = useTheme('Menu', {}, props)
           :filled="item.filled || filled"
           :size="item.size || size"
           :disabled="disabled || item.disabled"
+          :minimal="minimal"
           :class="{ 'my-2': item.divider }"
           @click="$emit('item-click')"
           @active="$emit('expand')"

package/src/components/menu/MenuItem.vue

@@ -31,6 +31,7 @@ const menuItemProps = {
   },
   selected: Boolean,
   disabled: Boolean,
+  minimal: Boolean,
 }
 
 export type MenuItemProps = ExtractPublicPropTypes<typeof menuItemProps>
@@ -150,7 +151,7 @@ const { styles, classes, className } = useTheme('MenuItem', {}, computedProps, {
     </span>
     <x-icon v-else-if="computedProps.icon" :size="computedProps.size" :icon="computedProps.icon" class="mr-2"/>
 
-    <span class="flex-1 truncate">
+    <span v-if="!minimal" class="flex-1 truncate">
       <slot>{{ computedProps.label }}</slot>
     </span>
 

package/src/components/menu/theme/MenuItem.base.theme.ts

@@ -3,7 +3,7 @@ import type { MenuItemTheme } from '../MenuItem.vue'
 const theme: MenuItemTheme = {
   classes: {
     wrapper: ({ props, data }) => {
-      const classes = ['relative !flex items-center whitespace-nowrap px-3']
+      const classes = ['relative !flex items-center whitespace-nowrap px-3 min-h-[2rem]']
 
       if (!props.disabled) classes.push('cursor-pointer')
       if (data.isActive) classes.push('font-medium')