nuance-ui 0.1.39 → 0.1.41

package/dist/module.json

@@ -4,7 +4,7 @@
   "compatibility": {
     "nuxt": "^4.0.0"
   },
-  "version": "0.1.39",
+  "version": "0.1.41",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/calendar/calendar.d.vue.ts

@@ -24,7 +24,7 @@ declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: No
         level?: CalendarLevel;
         value?: DateSelection<T>;
     }) & {
-        onSelect?: ((args_0: DateSelection<T>) => any) | undefined;
+        onSelect?: ((date: DateSelection<T>) => any) | undefined;
         onNext?: (() => any) | undefined;
         onPrev?: (() => any) | undefined;
         onLevel?: (() => any) | undefined;
@@ -53,7 +53,7 @@ declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: No
     } & {
         day?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((event: "update:date", value: DateInput) => void) & ((event: "update:level", value: CalendarLevel) => void) & ((event: "update:value", value: DateSelection<T> | undefined) => void));
+    emit: (((evt: "select", date: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((event: "update:date", value: DateInput) => void) & ((event: "update:level", value: CalendarLevel) => void) & ((event: "update:value", value: DateSelection<T> | undefined) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/calendar/calendar.vue

@@ -23,7 +23,7 @@ const props = defineProps({
   readonly: { type: Boolean, required: false, default: false },
   config: { type: Object, required: false }
 });
-defineEmits(["prev", "level", "next", "select"]);
+defineEmits(["select", "prev", "level", "next"]);
 const date = defineModel("date", { type: [Date, String], ...{ default: /* @__PURE__ */ new Date() } });
 const level = defineModel("level", { type: String, ...{ default: ({ minLevel }) => minLevel } });
 const select = defineModel("value", { type: null });

package/dist/runtime/components/calendar/calendar.vue.d.ts

@@ -24,7 +24,7 @@ declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: No
         level?: CalendarLevel;
         value?: DateSelection<T>;
     }) & {
-        onSelect?: ((args_0: DateSelection<T>) => any) | undefined;
+        onSelect?: ((date: DateSelection<T>) => any) | undefined;
         onNext?: (() => any) | undefined;
         onPrev?: (() => any) | undefined;
         onLevel?: (() => any) | undefined;
@@ -53,7 +53,7 @@ declare const __VLS_export: <T extends SelectionMode = "single">(__VLS_props: No
     } & {
         day?: (props: {}) => any;
     };
-    emit: (((evt: "select", args_0: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((event: "update:date", value: DateInput) => void) & ((event: "update:level", value: CalendarLevel) => void) & ((event: "update:value", value: DateSelection<T> | undefined) => void));
+    emit: (((evt: "select", date: DateSelection<T>) => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void)) & (((event: "update:date", value: DateInput) => void) & ((event: "update:level", value: CalendarLevel) => void) & ((event: "update:value", value: DateSelection<T> | undefined) => void));
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/calendar/model.d.ts

@@ -1,4 +1,5 @@
 import type { FormatOptions } from '@formkit/tempo';
+import type { CalendarHeaderEmits } from './ui/core/index.js';
 /**
  *  `@formkit/tempo` config
  */
@@ -8,3 +9,6 @@ export type SelectionMode = 'single' | 'range' | 'week' | 'multiple';
 /** ISO string value */
 export type Selection = string | null;
 export type DateSelection<T extends SelectionMode = 'single'> = T extends 'single' ? Selection : T extends 'range' ? [Selection, Selection] : T extends 'week' ? [Selection, Selection] : T extends 'multiple' ? Selection[] : never;
+export interface CalendarEmits<T extends SelectionMode = 'single'> extends CalendarHeaderEmits {
+    select: [date: DateSelection<T>];
+}

package/dist/runtime/components/date-time-picker.d.vue.ts

@@ -20,22 +20,34 @@ type __VLS_ModelProps = {
     modelValue?: string | Date;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_29: {}, __VLS_40: {}, __VLS_43: {}, __VLS_46: {};
+declare var __VLS_24: {}, __VLS_32: {}, __VLS_43: {}, __VLS_46: {}, __VLS_49: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_21) => any;
+    leftSection?: (props: typeof __VLS_24) => any;
 } & {
-    rightSection?: (props: typeof __VLS_29) => any;
+    rightSection?: (props: typeof __VLS_32) => any;
 } & {
-    label?: (props: typeof __VLS_40) => any;
+    label?: (props: typeof __VLS_43) => any;
 } & {
-    error?: (props: typeof __VLS_43) => any;
+    error?: (props: typeof __VLS_46) => any;
 } & {
-    description?: (props: typeof __VLS_46) => any;
+    description?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (date: import("./calendar/index.js").Selection) => any;
+    close: () => any;
+    next: () => any;
     "update:modelValue": (value: string | Date | undefined) => any;
+    prev: () => any;
+    level: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | Date | undefined) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onLevel?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/date-time-picker.vue

@@ -41,6 +41,7 @@ const {
   disabled: { type: Boolean, required: false },
   withSeconds: { type: Boolean, required: false }
 });
+defineEmits(["open", "close", "select", "prev", "level", "next"]);
 const model = defineModel({ type: [String, Date] });
 const date = computed({
   get: () => model.value ? format(model.value, "YYYY-MM-DD") : "",
@@ -88,7 +89,7 @@ const isClearable = computed(() => clearable && !props.disabled && !props.readon
 </script>
 
 <template>
-	<Popover>
+	<Popover @open='$emit("open")' @close='$emit("close")'>
 		<PopoverTarget>
 			<ButtonInput v-bind='props' :right-section-p-e>
 				<template #leftSection>
@@ -131,6 +132,10 @@ const isClearable = computed(() => clearable && !props.disabled && !props.readon
 			<Calendar
 				v-model:value='date'
 				v-bind='calendarProps'
+				@next='$emit("next")'
+				@prev='$emit("prev")'
+				@level='$emit("level")'
+				@select='(d) => $emit("select", d)'
 			/>
 			<TimePicker
 				v-model='time'

package/dist/runtime/components/date-time-picker.vue.d.ts

@@ -20,22 +20,34 @@ type __VLS_ModelProps = {
     modelValue?: string | Date;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_21: {}, __VLS_29: {}, __VLS_40: {}, __VLS_43: {}, __VLS_46: {};
+declare var __VLS_24: {}, __VLS_32: {}, __VLS_43: {}, __VLS_46: {}, __VLS_49: {};
 type __VLS_Slots = {} & {
-    leftSection?: (props: typeof __VLS_21) => any;
+    leftSection?: (props: typeof __VLS_24) => any;
 } & {
-    rightSection?: (props: typeof __VLS_29) => any;
+    rightSection?: (props: typeof __VLS_32) => any;
 } & {
-    label?: (props: typeof __VLS_40) => any;
+    label?: (props: typeof __VLS_43) => any;
 } & {
-    error?: (props: typeof __VLS_43) => any;
+    error?: (props: typeof __VLS_46) => any;
 } & {
-    description?: (props: typeof __VLS_46) => any;
+    description?: (props: typeof __VLS_49) => any;
 };
 declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    select: (date: import("./calendar/index.js").Selection) => any;
+    close: () => any;
+    next: () => any;
     "update:modelValue": (value: string | Date | undefined) => any;
+    prev: () => any;
+    level: () => any;
+    open: () => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSelect?: ((date: import("./calendar/index.js").Selection) => any) | undefined;
+    onClose?: (() => any) | undefined;
+    onNext?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string | Date | undefined) => any) | undefined;
+    onPrev?: (() => any) | undefined;
+    onLevel?: (() => any) | undefined;
+    onOpen?: (() => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/runtime/components/index.d.ts

@@ -30,6 +30,7 @@ export * from './table/index.js';
 export * from './tabs/index.js';
 export * from './text.vue.js';
 export * from './textarea.vue.js';
+export * from './time-picker/index.js';
 export * from './title.vue.js';
 export * from './transition/index.js';
 export * from './tree/index.js';

package/dist/runtime/components/index.js

@@ -28,6 +28,7 @@ export * from "./table/index.js";
 export * from "./tabs/index.js";
 export * from "./text.vue";
 export * from "./textarea.vue";
+export * from "./time-picker/index.js";
 export * from "./title.vue";
 export * from "./transition/index.js";
 export * from "./tree/index.js";

package/dist/runtime/components/input/date-picker.d.vue.ts

@@ -1,9 +1,10 @@
 import type { Format } from '@formkit/tempo';
-import type { Selection, SelectionMode } from '../calendar/index.js';
+import type { DateSelection, SelectionMode } from '../calendar/index.js';
 import type { CalendarProps } from '../calendar/calendar.vue.js';
 import type { ButtonInputProps } from './ui/button-input.vue.js';
 /**
  * - presets
+ * - value type DateSelection
  */
 export interface DatePickerProps<Mode extends SelectionMode> extends CalendarProps<Mode>, ButtonInputProps {
     /** Tempo format for value */
@@ -12,9 +13,15 @@ export interface DatePickerProps<Mode extends SelectionMode> extends CalendarPro
 declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(DatePickerProps<Mode> & {
         /** ISO string(s) */
-        modelValue?: Selection | Selection[];
+        modelValue?: DateSelection<Mode>;
     }) & {
-        "onUpdate:modelValue"?: ((value: Selection | Selection[] | undefined) => any) | undefined;
+        onSelect?: ((date: DateSelection<Mode>) => any) | undefined;
+        onClose?: (() => any) | undefined;
+        onNext?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: DateSelection<Mode> | undefined) => any) | undefined;
+        onPrev?: (() => any) | undefined;
+        onLevel?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -31,7 +38,7 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
     } & {
         description?: (props: {}) => any;
     };
-    emit: (event: "update:modelValue", value: Selection | Selection[] | undefined) => void;
+    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void) & ((evt: "open") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/input/date-picker.vue

@@ -64,7 +64,8 @@ const {
   rightSectionPE: { type: null, required: false },
   classes: { type: Object, required: false }
 });
-const model = defineModel({ type: [String, null, Array] });
+defineEmits(["open", "close", "select", "prev", "level", "next"]);
+const model = defineModel({ type: null });
 const config = useDatesConfig(cfg);
 const formatValue = (date) => format({ date, format: valueFormat, ...config });
 const visible = computed(() => {
@@ -92,7 +93,7 @@ const visible = computed(() => {
 </script>
 
 <template>
-	<Popover>
+	<Popover @open='$emit("open")' @close='$emit("close")'>
 		<PopoverTarget>
 			<ButtonInput v-bind='props' :multiline='mode === "multiple"'>
 				<template #leftSection>
@@ -120,7 +121,7 @@ const visible = computed(() => {
 								color='gray'
 								size='xs'
 								@click.stop.prevent='() => {
-  model = model.filter((_, _ix) => _ix !== ix);
+  model = model?.filter((_, _ix) => _ix !== ix);
 }'
 							/>
 						</template>
@@ -160,6 +161,9 @@ const visible = computed(() => {
 				:weekday-format
 				:with-week-numbers
 				:config
+				@prev='$emit("prev")'
+				@next='$emit("next")'
+				@select='(d) => $emit("select", d)'
 			/>
 		</PopoverDropdown>
 	</Popover>

package/dist/runtime/components/input/date-picker.vue.d.ts

@@ -1,9 +1,10 @@
 import type { Format } from '@formkit/tempo';
-import type { Selection, SelectionMode } from '../calendar/index.js';
+import type { DateSelection, SelectionMode } from '../calendar/index.js';
 import type { CalendarProps } from '../calendar/calendar.vue.js';
 import type { ButtonInputProps } from './ui/button-input.vue.js';
 /**
  * - presets
+ * - value type DateSelection
  */
 export interface DatePickerProps<Mode extends SelectionMode> extends CalendarProps<Mode>, ButtonInputProps {
     /** Tempo format for value */
@@ -12,9 +13,15 @@ export interface DatePickerProps<Mode extends SelectionMode> extends CalendarPro
 declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
     props: import("vue").PublicProps & __VLS_PrettifyLocal<(DatePickerProps<Mode> & {
         /** ISO string(s) */
-        modelValue?: Selection | Selection[];
+        modelValue?: DateSelection<Mode>;
     }) & {
-        "onUpdate:modelValue"?: ((value: Selection | Selection[] | undefined) => any) | undefined;
+        onSelect?: ((date: DateSelection<Mode>) => any) | undefined;
+        onClose?: (() => any) | undefined;
+        onNext?: (() => any) | undefined;
+        "onUpdate:modelValue"?: ((value: DateSelection<Mode> | undefined) => any) | undefined;
+        onPrev?: (() => any) | undefined;
+        onLevel?: (() => any) | undefined;
+        onOpen?: (() => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
     } ? P : {});
@@ -31,7 +38,7 @@ declare const __VLS_export: <Mode extends SelectionMode>(__VLS_props: NonNullabl
     } & {
         description?: (props: {}) => any;
     };
-    emit: (event: "update:modelValue", value: Selection | Selection[] | undefined) => void;
+    emit: (((evt: "select", date: DateSelection<Mode>) => void) & ((evt: "close") => void) & ((evt: "next") => void) & ((evt: "prev") => void) & ((evt: "level") => void) & ((evt: "open") => void)) & ((event: "update:modelValue", value: DateSelection<Mode> | undefined) => void);
 }>) => import("vue").VNode & {
     __ctx?: Awaited<typeof __VLS_setup>;
 };

package/dist/runtime/components/nav-link/nav-link.d.vue.ts

@@ -1,4 +1,4 @@
-import type { NuanceColor } from '@nui/types';
+import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
@@ -8,6 +8,8 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
     active?: boolean;
     /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
     color?: NuanceColor;
+    /** Spacing between left/right section and content */
+    spacing?: NuanceSpacing;
     /** If set, label and description do not wrap to the next line @default `false` */
     noWrap?: boolean;
     /** If set, disabled styles will be added to the root element @default `false` */

package/dist/runtime/components/nav-link/nav-link.vue

@@ -1,6 +1,6 @@
 <script setup>
 import { useStyleResolver } from "@nui/composals";
-import { createVariantColorResolver } from "@nui/utils";
+import { createVariantColorResolver, getSize } from "@nui/utils";
 import { computed } from "vue";
 import Box from "../box.vue";
 import UnstyledButton from "../button/unstyled-button.vue";
@@ -9,6 +9,7 @@ const props = defineProps({
   description: { type: String, required: false },
   active: { type: Boolean, required: false },
   color: { type: null, required: false },
+  spacing: { type: [String, Number], required: false },
   noWrap: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   variant: { type: String, required: false },
@@ -38,7 +39,8 @@ const {
     variant = "filled",
     color,
     noWrap,
-    description
+    description,
+    spacing
   }
 } = pickLinkProps(props);
 const style = computed(() => useStyleResolver((theme) => {
@@ -46,7 +48,8 @@ const style = computed(() => useStyleResolver((theme) => {
   return {
     "--nl-bg": variant ? background : void 0,
     "--nl-hover": variant ? hover : void 0,
-    "--nl-color": variant ? text : void 0
+    "--nl-color": variant ? text : void 0,
+    "--nl-spacing": getSize(spacing, "nl-spacing")
   };
 }));
 </script>
@@ -88,13 +91,21 @@ const style = computed(() => useStyleResolver((theme) => {
 
 <style module lang="postcss">
 .root {
+	--nl-spacing-xs: .25rem;
+	--nl-spacing-sm: .5rem;
+	--nl-spacing-md: .75rem;
+	--nl-spacing-lg: 1rem;
+	--nl-spacing-xl: 1.25rem;
+
 	--nl-bg: var(--color-primary-light);
 	--nl-hover: var(--color-primary-light-hover);
 	--nl-color: var(--color-primary-light-color);
+	--nl-spacing: var(--nl-spacing-xs);
 
 	user-select: none;
 
 	display: flex;
+	gap: var(--nl-spacing);
 	align-items: center;
 
 	width: 100%;
@@ -140,18 +151,10 @@ const style = computed(() => useStyleResolver((theme) => {
 
 	transition: transform 150ms ease;
 
-	& > svg {
+	&>svg {
 		display: block;
 	}
 
-	&:where([data-position='left']) {
-		margin-inline-end: var(--spacing-sm);
-	}
-
-	&:where([data-position='right']) {
-		margin-inline-start: var(--spacing-sm);
-	}
-
 	&:where([data-rotate]) {
 		transform: rotate(90deg);
 	}
@@ -174,7 +177,6 @@ const style = computed(() => useStyleResolver((theme) => {
 
 .description {
 	overflow: hidden;
-	display: block;
 
 	font-size: var(--font-size-xs);
 	color: var(--description-color, var(--color-dimmed));

package/dist/runtime/components/nav-link/nav-link.vue.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceColor } from '@nui/types';
+import type { NuanceColor, NuanceSpacing } from '@nui/types';
 import type { NuxtLinkProps } from 'nuxt/app';
 import type { BoxProps } from '../box.vue.js';
 export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'custom'> {
@@ -8,6 +8,8 @@ export interface NavLinkProps extends BoxProps, Omit<NuxtLinkProps, 'href' | 'cu
     active?: boolean;
     /** Key of `theme.colors` of any valid CSS color to control active styles @default `theme.primaryColor` */
     color?: NuanceColor;
+    /** Spacing between left/right section and content */
+    spacing?: NuanceSpacing;
     /** If set, label and description do not wrap to the next line @default `false` */
     noWrap?: boolean;
     /** If set, disabled styles will be added to the root element @default `false` */

package/dist/runtime/components/time-picker/lib/use-time-picker.js

@@ -1,3 +1,4 @@
+import { iso8601, format as lFormat } from "@formkit/tempo";
 import { unrefElement } from "@vueuse/core";
 import { computed, ref, shallowRef, watch } from "vue";
 import { clampTime } from "./clamp-time.js";
@@ -18,7 +19,10 @@ export function useTimePicker({
     seconds: null,
     amPm: null
   });
-  const parsed = computed(() => getParsedTime({ time: model.value ?? "", format, amPmLabels }));
+  const parsed = computed(() => {
+    const time = iso8601(model.value) ? lFormat(model.value, "HH:mm:ss") : model.value ?? "";
+    return getParsedTime({ time, format, amPmLabels });
+  });
   watch(parsed, (v) => intermediate.value = v, { immediate: true });
   const updateModel = (field, value) => {
     intermediate.value = { ...intermediate.value, [field]: value };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "nuance-ui",
-	"version": "0.1.39",
+	"version": "0.1.41",
 	"description": "A UI Library for Modern Web Apps, powered by Vue.",
 	"repository": {
 		"type": "git",