nuance-ui 0.1.38 → 0.1.39

package/dist/runtime/components/textarea.vue

@@ -1,9 +1,9 @@
 <script setup>
-import { useTextareaAutosize } from "@vueuse/core";
-import { useId, useTemplateRef } from "vue";
+import { unrefElement, useTextareaAutosize } from "@vueuse/core";
+import { useTemplateRef } from "vue";
 import InputBase from "./input/ui/input-base.vue";
 import InputWrapper from "./input/ui/input-wrapper.vue";
-const { id: uid, ...props } = defineProps({
+const props = defineProps({
   error: { type: String, required: false },
   description: { type: String, required: false },
   label: { type: String, required: false },
@@ -13,49 +13,61 @@ const { id: uid, ...props } = defineProps({
   size: { type: String, required: false },
   variant: { type: String, required: false },
   multiline: { type: Boolean, required: false },
-  resize: { type: null, required: false },
+  resize: { type: void 0, required: false },
   leftSectionPE: { type: null, required: false },
-  rightSectionPE: { type: null, required: false }
+  rightSectionPE: { type: null, required: false },
+  readonly: { type: Boolean, required: false },
+  disabled: { type: Boolean, required: false }
 });
-const modelValue = defineModel({ type: String });
-const inputRef = useTemplateRef("inputRef");
+const model = defineModel({ type: String });
+const ref = useTemplateRef("input");
 const { input } = useTextareaAutosize({
-  input: modelValue.value,
+  input: model.value,
   styleProp: "minHeight",
-  element: inputRef.value?.ref
+  element: unrefElement(ref.value)
+});
+defineExpose({
+  $el: unrefElement(ref.value)
 });
-const id = uid ?? useId();
 </script>
 
 <template>
-	<InputWrapper :id v-bind='props' :multiline :class='$attrs?.class'>
-		<template #label>
+	<InputWrapper v-bind='props' :multiline :class='$attrs?.class'>
+		<InputBase>
+			<template v-if='!!$slots.leftSection' #leftSection>
+				<slot name='leftSection' />
+			</template>
+
+			<template #default='{ id, css }'>
+				<textarea
+					v-bind='{ ...$attrs, class: void 0 }'
+					:id
+					ref='input'
+					v-model='model'
+					:class='[css, $style.textarea]'
+					:required='props.required'
+					:disabled='props.required'
+					:readonly='props.readonly'
+				/>
+			</template>
+
+			<template v-if='!!$slots.rightSection' #rightSection>
+				<slot name='rightSection' />
+			</template>
+		</InputBase>
+
+		<template v-if='!!$slots.label' #label>
 			<slot name='label' />
 		</template>
-		<template #error>
+		<template v-if='!!$slots.error' #error>
 			<slot name='error' />
 		</template>
-		<template #description>
+		<template v-if='!!$slots.description' #description>
 			<slot name='description' />
 		</template>
-
-		<InputBase
-			is='textarea'
-			v-bind='{ ...$attrs, id, class: $style.input }'
-			ref='inputRef'
-			v-model='input'
-			:required='props?.required'
-		>
-			<template #leftSection>
-				<slot name='leftSection' />
-			</template>
-			<template #rightSection>
-				<slot name='rightSection' />
-			</template>
-		</InputBase>
 	</InputWrapper>
 </template>
 
 <style module>
-.input{scrollbar-width:none;-ms-overflow-style:none}.input::-webkit-scrollbar{display:none}
+.textarea{height:auto;scrollbar-width:none;-ms-overflow-style:none}.textarea::-webkit-scrollbar{display:none}
 </style>

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

@@ -1,24 +1,26 @@
-import type { InputWrapperProps } from './input/index.js';
-export interface TextareaProps extends InputWrapperProps {
+import type { InputBaseProps, InputWrapperProps } from './input/index.js';
+export interface TextareaProps extends InputWrapperProps, InputBaseProps {
 }
 type __VLS_Props = TextareaProps;
 type __VLS_ModelProps = {
     modelValue?: string;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
-declare var __VLS_7: {}, __VLS_10: {}, __VLS_13: {}, __VLS_22: {}, __VLS_25: {};
+declare var __VLS_15: {}, __VLS_19: {}, __VLS_22: {}, __VLS_25: {}, __VLS_28: {};
 type __VLS_Slots = {} & {
-    label?: (props: typeof __VLS_7) => any;
+    leftSection?: (props: typeof __VLS_15) => any;
 } & {
-    error?: (props: typeof __VLS_10) => any;
+    rightSection?: (props: typeof __VLS_19) => any;
 } & {
-    description?: (props: typeof __VLS_13) => any;
+    label?: (props: typeof __VLS_22) => any;
 } & {
-    leftSection?: (props: typeof __VLS_22) => any;
+    error?: (props: typeof __VLS_25) => any;
 } & {
-    rightSection?: (props: typeof __VLS_25) => any;
+    description?: (props: typeof __VLS_28) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {
+    $el: HTMLTextAreaElement | null | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     "update:modelValue": (value: string | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;

package/dist/runtime/components/time-picker/index.d.ts

@@ -0,0 +1,6 @@
+export * from './lib/clamp-time.js';
+export * from './lib/get-time-string.js';
+export * from './lib/pad-time.js';
+export * from './lib/split-time-string.js';
+export * from './model.js';
+export type * from './time-picker.vue';

package/dist/runtime/components/time-picker/index.js

@@ -0,0 +1,5 @@
+export * from "./lib/clamp-time.js";
+export * from "./lib/get-time-string.js";
+export * from "./lib/pad-time.js";
+export * from "./lib/split-time-string.js";
+export * from "./model.js";

package/dist/runtime/components/time-picker/lib/clamp-time.d.ts

@@ -0,0 +1,13 @@
+export declare function timeToSeconds(timeStr: string): number;
+export declare function secondsToTime(seconds: number): {
+    timeString: string;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};
+export declare function clampTime(time: string, min: string | undefined, max: string | undefined): {
+    timeString: string;
+    hours: number;
+    minutes: number;
+    seconds: number;
+};

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

@@ -0,0 +1,23 @@
+import { padTime } from "./pad-time.js";
+export function timeToSeconds(timeStr) {
+  const [hours = 0, minutes = 0, seconds = 0] = timeStr.split(":").map(Number);
+  return hours * 3600 + minutes * 60 + seconds;
+}
+export function secondsToTime(seconds) {
+  const hours = Math.floor(seconds / 3600);
+  const minutes = Math.floor(seconds % 3600 / 60);
+  const secs = seconds % 60;
+  return {
+    timeString: `${padTime(hours)}:${padTime(minutes)}:${padTime(secs)}`,
+    hours,
+    minutes,
+    seconds: secs
+  };
+}
+export function clampTime(time, min, max) {
+  const timeInSeconds = timeToSeconds(time);
+  const minInSeconds = min ? timeToSeconds(min) : -Infinity;
+  const maxInSeconds = max ? timeToSeconds(max) : Infinity;
+  const clampedSeconds = Math.max(minInSeconds, Math.min(timeInSeconds, maxInSeconds));
+  return secondsToTime(clampedSeconds);
+}

package/dist/runtime/components/time-picker/lib/get-parsed-time.d.ts

@@ -0,0 +1,16 @@
+import type { TimePickerAmPmLabels, TimePickerFormat } from '../model.js';
+export declare function getParsedTime({ time, format, amPmLabels }: {
+    time: string;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+}): {
+    hours: number;
+    minutes: number | null;
+    seconds: number | null;
+    amPm: string;
+} | {
+    amPm: null;
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+};

package/dist/runtime/components/time-picker/lib/get-parsed-time.js

@@ -0,0 +1,26 @@
+import { splitTimeString } from "./split-time-string.js";
+function convertTimeTo12HourFormat({
+  hours,
+  minutes,
+  seconds,
+  amPmLabels
+}) {
+  if (hours === null)
+    return { hours: null, minutes: null, seconds: null, amPm: null };
+  const amPm = hours >= 12 ? amPmLabels.pm : amPmLabels.am;
+  const hour12 = hours % 12 === 0 ? 12 : hours % 12;
+  return {
+    hours: hour12,
+    minutes: typeof minutes === "number" ? minutes : null,
+    seconds: typeof seconds === "number" ? seconds : null,
+    amPm
+  };
+}
+export function getParsedTime({ time, format, amPmLabels }) {
+  if (time === "")
+    return { hours: null, minutes: null, seconds: null, amPm: null };
+  const parsed = splitTimeString(time);
+  if (format === "12h")
+    return convertTimeTo12HourFormat({ ...parsed, amPmLabels });
+  return { ...parsed, amPm: null };
+}

package/dist/runtime/components/time-picker/lib/get-time-string.d.ts

@@ -0,0 +1,13 @@
+import type { TimePickerAmPmLabels, TimePickerFormat } from '../model.js';
+export declare function getTimeString({ hours, minutes, seconds, format, withSeconds, amPm, amPmLabels, }: {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+    format: TimePickerFormat;
+    withSeconds: boolean;
+    amPm: string | null;
+    amPmLabels: TimePickerAmPmLabels;
+}): {
+    valid: boolean;
+    value: string;
+};

package/dist/runtime/components/time-picker/lib/get-time-string.js

@@ -0,0 +1,41 @@
+import { padTime } from "./pad-time.js";
+function convertTo24HourFormat({
+  hours,
+  minutes,
+  seconds,
+  amPm,
+  amPmLabels,
+  withSeconds
+}) {
+  let _hours = hours;
+  if (amPm === amPmLabels.pm && hours !== 12) {
+    _hours += 12;
+  } else if (amPm === amPmLabels.am && hours === 12) {
+    _hours = 0;
+  }
+  return `${padTime(_hours)}:${padTime(minutes)}${withSeconds ? `:${padTime(seconds || 0)}` : ""}`;
+}
+export function getTimeString({
+  hours,
+  minutes,
+  seconds,
+  format,
+  withSeconds,
+  amPm,
+  amPmLabels
+}) {
+  if (hours === null || minutes === null)
+    return { valid: false, value: "" };
+  if (withSeconds && seconds === null)
+    return { valid: false, value: "" };
+  if (format === "24h") {
+    const value = `${padTime(hours)}:${padTime(minutes)}${withSeconds ? `:${padTime(seconds)}` : ""}`;
+    return { valid: true, value };
+  }
+  if (amPm === null)
+    return { valid: false, value: "" };
+  return {
+    valid: true,
+    value: convertTo24HourFormat({ hours, minutes, seconds, amPm, amPmLabels, withSeconds })
+  };
+}

package/dist/runtime/components/time-picker/lib/pad-time.d.ts

@@ -0,0 +1 @@
+export declare function padTime(value: number): string;

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

@@ -0,0 +1,3 @@
+export function padTime(value) {
+  return value < 10 ? `0${value}` : `${value}`;
+}

package/dist/runtime/components/time-picker/lib/split-time-string.d.ts

@@ -0,0 +1,5 @@
+export declare function splitTimeString(timeString: string): {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+};

package/dist/runtime/components/time-picker/lib/split-time-string.js

@@ -0,0 +1,4 @@
+export function splitTimeString(timeString) {
+  const [hours = null, minutes = null, seconds = null] = timeString.split(":").map(Number);
+  return { hours, minutes, seconds };
+}

package/dist/runtime/components/time-picker/lib/use-time-picker.d.ts

@@ -0,0 +1,29 @@
+import type { ModelRef } from 'vue';
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from '../model.js';
+type TimeField = 'hours' | 'minutes' | 'seconds' | 'amPm';
+export declare function useTimePicker({ model, format, amPmLabels, withSeconds, min, max, pasteSplit, }: {
+    model: ModelRef<string | undefined>;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+    withSeconds?: boolean;
+    min?: string;
+    max?: string;
+    pasteSplit?: TimePickerPasteSplit;
+}): {
+    values: {
+        hours: import("vue").WritableComputedRef<number | null, number | null>;
+        minutes: import("vue").WritableComputedRef<number | null, number | null>;
+        seconds: import("vue").WritableComputedRef<number | null, number | null>;
+        amPm: import("vue").WritableComputedRef<string | null, string | null>;
+    };
+    refs: {
+        hoursRef: import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>;
+        minutesRef: import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>;
+        secondsRef: import("vue").ShallowRef<HTMLInputElement | null, HTMLInputElement | null>;
+        amPmRef: import("vue").ShallowRef<HTMLSelectElement | null, HTMLSelectElement | null>;
+    };
+    focus: (field: TimeField) => void | undefined;
+    clear: () => void;
+    onPaste: (event: ClipboardEvent) => void;
+};
+export {};

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

@@ -0,0 +1,103 @@
+import { unrefElement } from "@vueuse/core";
+import { computed, ref, shallowRef, watch } from "vue";
+import { clampTime } from "./clamp-time.js";
+import { getParsedTime } from "./get-parsed-time.js";
+import { getTimeString } from "./get-time-string.js";
+export function useTimePicker({
+  model,
+  format,
+  amPmLabels,
+  withSeconds = false,
+  min = "00:00:00",
+  max = "23:59:59",
+  pasteSplit
+}) {
+  const intermediate = ref({
+    hours: null,
+    minutes: null,
+    seconds: null,
+    amPm: null
+  });
+  const parsed = computed(() => getParsedTime({ time: model.value ?? "", format, amPmLabels }));
+  watch(parsed, (v) => intermediate.value = v, { immediate: true });
+  const updateModel = (field, value) => {
+    intermediate.value = { ...intermediate.value, [field]: value };
+    const timeString = getTimeString({
+      ...intermediate.value,
+      format,
+      withSeconds,
+      amPmLabels
+    });
+    model.value = timeString.valid ? timeString.value : "";
+  };
+  const hours = computed({
+    get: () => parsed.value.hours,
+    set: (value) => {
+      let adjustedValue = value;
+      if (format === "12h" && typeof value === "number" && value > 12)
+        adjustedValue = (value - 1) % 12 + 1;
+      updateModel("hours", adjustedValue);
+    }
+  });
+  const minutes = computed({
+    get: () => parsed.value.minutes,
+    set: (value) => updateModel("minutes", value)
+  });
+  const seconds = computed({
+    get: () => parsed.value.seconds,
+    set: (value) => updateModel("seconds", value)
+  });
+  const amPm = computed({
+    get: () => parsed.value.amPm,
+    set: (value) => updateModel("amPm", value)
+  });
+  const hoursRef = shallowRef(null);
+  const minutesRef = shallowRef(null);
+  const secondsRef = shallowRef(null);
+  const amPmRef = shallowRef(null);
+  const refs = {
+    hours: hoursRef,
+    minutes: minutesRef,
+    seconds: secondsRef,
+    amPm: amPmRef
+  };
+  const focus = (field) => unrefElement(refs[field].value)?.focus();
+  const clear = () => {
+    model.value = "";
+    focus("hours");
+  };
+  const onPaste = (event) => {
+    event.preventDefault();
+    const pastedValue = event.clipboardData?.getData("text") ?? "";
+    const parsed2 = (pasteSplit ?? getParsedTime)({
+      time: pastedValue,
+      format,
+      amPmLabels
+    });
+    const timeString = getTimeString({
+      ...parsed2,
+      format,
+      withSeconds,
+      amPmLabels
+    });
+    if (timeString.valid)
+      model.value = clampTime(timeString.value, min, max).timeString;
+  };
+  return {
+    values: {
+      hours,
+      minutes,
+      seconds,
+      amPm
+    },
+    refs: {
+      hoursRef,
+      minutesRef,
+      secondsRef,
+      amPmRef
+    },
+    focus,
+    clear,
+    onPaste
+  };
+}

package/dist/runtime/components/time-picker/model.d.ts

@@ -0,0 +1,17 @@
+export type TimePickerFormat = '12h' | '24h';
+export interface TimePickerAmPmLabels {
+    am: string;
+    pm: string;
+}
+export interface TimePickerPasteSplitInput {
+    time: string;
+    format: TimePickerFormat;
+    amPmLabels: TimePickerAmPmLabels;
+}
+export interface TimePickerPasteSplitReturnType {
+    hours: number | null;
+    minutes: number | null;
+    seconds: number | null;
+    amPm: string | null;
+}
+export type TimePickerPasteSplit = (input: TimePickerPasteSplitInput) => TimePickerPasteSplitReturnType;

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

@@ -0,0 +1,88 @@
+import type { Classes } from '@nui/types';
+import type { InputBaseProps } from '../input/index.js';
+import type { InputWrapperProps } from '../input/ui/input-wrapper.vue.js';
+import type { TimePickerAmPmLabels, TimePickerFormat, TimePickerPasteSplit } from './model.js';
+/**
+ * - presets
+ * - dropdown select
+ * - am/pm select
+ * - blur
+ * - paste
+ */
+interface FieldStep {
+    /** Number by which hours are incremented/decremented @default `1` */
+    hours?: number;
+    /** Number by which minutes are incremented/decremented @default `1` */
+    minutes?: number;
+    /** Number by which seconds are incremented/decremented @default `1` */
+    seconds?: number;
+}
+interface FieldPlaceholder {
+    /** Hours input placeholder, @default `--` */
+    hours?: string;
+    /** Minutes input placeholder, @default `--` */
+    minutes?: string;
+    /** Seconds input placeholder, @default `--` */
+    seconds?: string;
+}
+export interface TimePickerProps extends InputWrapperProps, InputBaseProps {
+    /** Determines whether the clear button should be displayed @default `false` */
+    clearable?: boolean;
+    /** `name` prop passed down to the hidden input */
+    name?: string;
+    /** Min possible time value in `hh:mm:ss` format @default `00:00:00` */
+    min?: string;
+    /** Max possible time value in `hh:mm:ss` format @default `23:59:59` */
+    max?: string;
+    /** Time format, @default `24h` */
+    format?: TimePickerFormat;
+    /** Number by which fields are incremented/decremented @default `1` */
+    step?: number | FieldStep;
+    /** Fields placeholder @default `--` */
+    placeholder?: string | FieldPlaceholder;
+    /** Determines whether the seconds input should be displayed @default `false` */
+    withSeconds?: boolean;
+    /** `aria-label` of hours input */
+    hoursInputLabel?: string;
+    /** `aria-label` of minutes input */
+    minutesInputLabel?: string;
+    /** `aria-label` of seconds input */
+    secondsInputLabel?: string;
+    /** `aria-label` of am/pm input @todo @deprecated */
+    amPmInputLabel?: string;
+    /** Labels used for am/pm values @default `{ am: 'AM', pm: 'PM' }` @todo @deprecated */
+    amPmLabels?: TimePickerAmPmLabels;
+    /** A function to transform pasted values, by default time in 24h format can be parsed on paste for example `23:34:22` */
+    pasteSplit?: TimePickerPasteSplit;
+    classes?: Classes<'root' | 'input' | 'section' | 'field'>;
+}
+type __VLS_Props = TimePickerProps;
+type __VLS_ModelProps = {
+    modelValue?: string;
+};
+type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
+declare var __VLS_46: {}, __VLS_54: {}, __VLS_64: {}, __VLS_67: {}, __VLS_70: {};
+type __VLS_Slots = {} & {
+    leftSection?: (props: typeof __VLS_46) => any;
+} & {
+    rightSection?: (props: typeof __VLS_54) => any;
+} & {
+    label?: (props: typeof __VLS_64) => any;
+} & {
+    error?: (props: typeof __VLS_67) => any;
+} & {
+    description?: (props: typeof __VLS_70) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: string) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    "onUpdate:modelValue"?: ((value: string) => 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;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};