@nexxtmove/ui 0.1.62 → 0.1.64

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@nexxtmove/ui",
   "type": "module",
-  "version": "0.1.62",
+  "version": "0.1.64",
   "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 () => {

package/src/components/InputField/InputField.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { computed, getCurrentInstance } from 'vue'
 import Icon from '../Icon/Icon.vue'
 
 const generateId = () => 'input-field-' + Math.random().toString(36).slice(2, 10)
@@ -20,7 +21,22 @@ export interface NexxtInputFieldProps {
 
 defineProps<NexxtInputFieldProps>()
 
-const modelValue = defineModel<string>()
+const modelValue = defineModel<string | number>()
+
+const isNumber = computed(() => {
+  const instance = getCurrentInstance()
+  return instance?.attrs.type === 'number'
+})
+
+const increment = () => {
+  const current = Number(modelValue.value || 0)
+  modelValue.value = current + 1
+}
+
+const decrement = () => {
+  const current = Number(modelValue.value || 0)
+  modelValue.value = current - 1
+}
 </script>
 
 <template>
@@ -35,7 +51,7 @@ const modelValue = defineModel<string>()
     </label>
 
     <div
-      class="flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
+      class="group flex items-center gap-2 overflow-hidden rounded-lg ring transition-colors ease-out focus-within:ring-cornflower-blue-500"
       :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': rightIcon }]"
     >
       <span v-if="leftIcon" class="flex items-center">
@@ -47,11 +63,29 @@ const modelValue = defineModel<string>()
         v-model="modelValue"
         :placeholder="placeholder"
         v-bind="$attrs"
-        class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none"
+        class="bg-transparant h-10 w-full min-w-60 text-sm text-gray-900 placeholder-gray-400 focus:outline-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
         :class="{ 'pl-3': !leftIcon, 'pr-3': !rightIcon }"
       />
       <slot name="right">
-        <span v-if="rightIcon" class="flex items-center">
+        <div v-if="isNumber" class="flex flex-col pr-1.5">
+          <button
+            type="button"
+            class="flex h-5 w-8 cursor-pointer items-center justify-center pt-2 text-gray-400 transition-colors group-focus-within:text-gray-950 hover:text-cornflower-blue-600 focus:text-cornflower-blue-600 focus:outline-none"
+            aria-label="Verhogen"
+            @click="increment"
+          >
+            <Icon name="chevron-up" class="text-[10px]" aria-hidden="true" />
+          </button>
+          <button
+            type="button"
+            class="flex h-5 w-8 cursor-pointer items-center justify-center pb-2 text-gray-400 transition-colors group-focus-within:text-gray-950 hover:text-cornflower-blue-600 focus:text-cornflower-blue-600 focus:outline-none"
+            aria-label="Verlagen"
+            @click="decrement"
+          >
+            <Icon name="chevron-down" class="text-[10px]" aria-hidden="true" />
+          </button>
+        </div>
+        <span v-else-if="rightIcon" class="flex items-center">
           <Icon :name="rightIcon" />
         </span>
       </slot>

package/src/components/Select/Select.vue

@@ -61,7 +61,7 @@ const select = (opt: SelectOption, close: () => void) => {
           :aria-expanded="isOpen"
           aria-haspopup="listbox"
           tabindex="0"
-          class="flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
+          class="group flex w-full cursor-pointer items-center gap-2 rounded-lg ring transition-colors ease-out focus:ring-cornflower-blue-500 focus:outline-none"
           :class="[error ? 'ring-brick-400' : 'ring-gray-200', { 'pl-3': leftIcon, 'pr-3': true }]"
           @click="toggle"
           @keydown.enter.prevent="toggle"
@@ -78,7 +78,7 @@ const select = (opt: SelectOption, close: () => void) => {
           </span>
           <NexxtIcon
             name="chevron-down"
-            class="shrink-0 text-gray-400 transition-transform duration-200"
+            class="shrink-0 text-gray-400 transition-all duration-200 group-hover:text-cornflower-blue-600"
             :class="{ 'rotate-180': isOpen }"
           />
         </div>