@nexxtmove/ui 0.1.62 → 0.1.63

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.62",
+  "version": "0.1.63",
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",

package/src/components/Calendar/Calendar.vue

@@ -21,6 +21,7 @@ import CalendarHeader from './_CalendarHeader.vue'
 import CalendarDayView from './_CalendarDayView.vue'
 import CalendarMonthView from './_CalendarMonthView.vue'
 import CalendarYearView from './_CalendarYearView.vue'
+import CalendarTimePicker from './_CalendarTimePicker.vue'
 import type { NexxtCalendarProps } from './calendar.types'
 
 export type { NexxtCalendarProps }
@@ -44,6 +45,7 @@ const {
   maxDate,
   monthYearPicker = false,
   timezone = 'UTC',
+  datetime = false,
 } = defineProps<NexxtCalendarProps>()
 
 // ── State ─────────────────────────────────────────────────────────────────────
@@ -235,5 +237,7 @@ const currentDayTransition = computed(() =>
         />
       </Transition>
     </div>
+
+    <CalendarTimePicker v-if="datetime" v-model="model" />
   </div>
 </template>

package/src/components/Calendar/_CalendarTimePicker.vue

@@ -0,0 +1,98 @@
+<script lang="ts" setup>
+import { computed } from 'vue'
+import { setHours, setMinutes, getHours, getMinutes } from 'date-fns'
+import NexxtIcon from '../Icon/Icon.vue'
+
+const props = defineProps<{
+  modelValue: Date | null
+}>()
+
+const emit = defineEmits<{
+  (e: 'update:modelValue', value: Date | null): void
+}>()
+
+const hours = computed({
+  get: () => {
+    if (props.modelValue) return getHours(props.modelValue)
+    return getHours(new Date())
+  },
+  set: (val) => {
+    const base = props.modelValue || new Date()
+    emit('update:modelValue', setHours(base, Number(val)))
+  },
+})
+
+const minutes = computed({
+  get: () => {
+    if (props.modelValue) return getMinutes(props.modelValue)
+    return getMinutes(new Date())
+  },
+  set: (val) => {
+    const base = props.modelValue || new Date()
+    emit('update:modelValue', setMinutes(base, Number(val)))
+  },
+})
+
+const pad = (n: number) => n.toString().padStart(2, '0')
+
+const incrementHours = () => {
+  hours.value = (hours.value + 1) % 24
+}
+const decrementHours = () => {
+  hours.value = (hours.value + 23) % 24
+}
+const incrementMinutes = () => {
+  minutes.value = (minutes.value + 1) % 60
+}
+const decrementMinutes = () => {
+  minutes.value = (minutes.value + 59) % 60
+}
+</script>
+
+<template>
+  <div class="flex items-center justify-center gap-4 border-t border-gray-100 pt-4">
+    <!-- Hours -->
+    <div class="flex flex-col items-center">
+      <button
+        type="button"
+        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        @click="incrementHours"
+      >
+        <NexxtIcon name="chevron-up" />
+      </button>
+      <span class="font-medium text-lg text-gray-900 tabular-nums">
+        {{ pad(hours) }}
+      </span>
+      <button
+        type="button"
+        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        @click="decrementHours"
+      >
+        <NexxtIcon name="chevron-down" />
+      </button>
+    </div>
+
+    <span class="mb-1 font-medium text-xl text-gray-400">:</span>
+
+    <!-- Minutes -->
+    <div class="flex flex-col items-center">
+      <button
+        type="button"
+        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        @click="incrementMinutes"
+      >
+        <NexxtIcon name="chevron-up" />
+      </button>
+      <span class="font-medium text-lg text-gray-900 tabular-nums">
+        {{ pad(minutes) }}
+      </span>
+      <button
+        type="button"
+        class="flex h-8 w-8 items-center justify-center rounded-full text-gray-400 transition-colors hover:bg-gray-100 hover:text-cornflower-blue-500"
+        @click="decrementMinutes"
+      >
+        <NexxtIcon name="chevron-down" />
+      </button>
+    </div>
+  </div>
+</template>

package/src/components/Calendar/calendar.types.ts

@@ -8,4 +8,5 @@ export interface NexxtCalendarProps {
   maxDate?: Date
   monthYearPicker?: boolean
   timezone?: string
+  datetime?: boolean
 }

package/src/components/DatePicker/DatePicker.vue

@@ -55,7 +55,7 @@ const floatingPlacement = computed(() => anchorToPlacement[props.anchor])
 // ── Handlers ──────────────────────────────────────────────────────────────────
 
 const handleSelect = () => {
-  if (props.autoClose) panelRef.value?.close()
+  if (props.autoClose && !props.datetime) panelRef.value?.close()
 }
 
 const onPanelOpen = async () => {