nuance-ui 0.2.28 → 0.2.30

package/dist/runtime/components/chip/chip.vue

@@ -1,12 +1,11 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
+import { useConfig, useVarsResolver } from "@nui/composables";
 import {
-  createVariantColorResolver,
   getFontSize,
   getRadius,
   getSize
 } from "@nui/utils";
-import { useId } from "vue";
+import { computed, useId } from "vue";
 import Box from "../box.vue";
 import { useChipGroupState, useChipState } from "./lib";
 const {
@@ -17,7 +16,7 @@ const {
   variant = "filled",
   type: _type = "checkbox",
   value,
-  icon = "gravity-ui:check",
+  icon: _icon,
   hideIcon = true,
   disabled: _disabled
 } = defineProps({
@@ -36,10 +35,12 @@ const id = uid || useId();
 const modelValue = defineModel({ type: Boolean, ...{ default: false } });
 const ctx = useChipGroupState();
 const { checked, onUpdate } = useChipState(ctx, modelValue, value);
-const disabled = ctx?.disabled || _disabled;
-const type = ctx ? ctx.multiple ? "checkbox" : "radio" : _type;
+const disabled = computed(() => ctx?.disabled || _disabled);
+const type = computed(() => ctx ? ctx.multiple ? "checkbox" : "radio" : _type);
+const { icons, variantResolver } = useConfig();
+const icon = computed(() => _icon ?? icons.check);
 const style = useVarsResolver((theme) => {
-  const colors = createVariantColorResolver({ color, theme, variant });
+  const colors = variantResolver({ color, theme, variant });
   return {
     root: {
       "--chip-fz": getFontSize(size),

package/dist/runtime/components/combobox/combobox-option.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { computed } from "vue";
 import Box from "../box.vue";
 import css from "./combobox.module.css";
@@ -7,7 +8,7 @@ import { useComboboxState } from "./lib/context";
 const {
   data,
   iconPosition = "left",
-  checkIcon = "gravity-ui:check",
+  checkIcon,
   withCheckIcon = true,
   mod: _mod,
   checked,
@@ -23,6 +24,8 @@ const {
   iconPosition: { type: String, required: false }
 });
 defineSlots();
+const { icons } = useConfig();
+const resolvedCheckIcon = computed(() => checkIcon ?? icons.check);
 const { onOptionSubmit } = useComboboxState();
 const mod = computed(() => [
   {
@@ -49,13 +52,13 @@ const mod = computed(() => [
 			<Icon
 				v-if='checked && withCheckIcon && iconPosition === "left"'
 				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
+				:name='data?.icon ?? resolvedCheckIcon'
 			/>
 			<span>{{ data.label }}</span>
 			<Icon
 				v-if='checked && withCheckIcon && iconPosition === "right"'
 				:class='css.optionCheck'
-				:name='data?.icon ?? checkIcon'
+				:name='data?.icon ?? resolvedCheckIcon'
 			/>
 		</slot>
 	</Box>

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

@@ -1,6 +1,6 @@
 <script setup>
 import { format } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composables";
+import { useConfig, useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "./action-icon/action-icon.vue";
 import Calendar from "./calendar/calendar.vue";
@@ -79,6 +79,7 @@ const time = computed({
   }
 });
 const config = useDatesConfig(calendarProps?.config);
+const { icons } = useConfig();
 const visible = computed(() => {
   if (!model.value)
     return null;
@@ -95,7 +96,7 @@ const isClearable = computed(() => clearable && !props.disabled && !props.readon
 			<ButtonInput v-bind='props' :right-section-p-e>
 				<template #leftSection>
 					<slot name='leftSection'>
-						<Icon name='gravity-ui:calendar' />
+						<Icon :name='icons.calendar' />
 					</slot>
 				</template>
 
@@ -105,7 +106,7 @@ const isClearable = computed(() => clearable && !props.disabled && !props.readon
 				>
 					<slot name='rightSection'>
 						<ActionIcon
-							icon='gravity-ui:xmark'
+							:icon='icons.close'
 							variant='subtle'
 							color='gray'
 							size='sm'

package/dist/runtime/components/dialog/ui/dialog-close-button.vue

@@ -1,9 +1,11 @@
 <script setup>
+import { useConfig } from "@nui/composables";
+import { computed } from "vue";
 import ActionIcon from "../../action-icon/action-icon.vue";
 import { useDialogState } from "../lib";
 const {
   variant = "subtle",
-  icon = "gravity-ui:xmark",
+  icon,
   ...props
 } = defineProps({
   size: { type: null, required: false },
@@ -18,12 +20,14 @@ const {
   classes: { type: Object, required: false }
 });
 const close = useDialogState();
+const { icons } = useConfig();
+const resolvedIcon = computed(() => icon ?? icons.close);
 </script>
 
 <template>
 	<ClientOnly>
 		<ActionIcon
-			:icon
+			:icon='resolvedIcon'
 			:variant
 			tabindex='0'
 			v-bind='props'

package/dist/runtime/components/files/file-upload-button.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { useFileDialog } from "@vueuse/core";
 import { computed, toValue } from "vue";
 import Button from "../button/button.vue";
@@ -7,7 +8,7 @@ const {
   accept,
   reset: _reset,
   directory,
-  icon = "gravity-ui:plus",
+  icon: _icon,
   ...props
 } = defineProps({
   icon: { type: String, required: false },
@@ -36,6 +37,8 @@ const {
   document: { type: null, required: false }
 });
 const emit = defineEmits(["change", "cancel"]);
+const { icons } = useConfig();
+const icon = computed(() => _icon ?? icons.plus);
 const isMultiple = computed(() => {
   const val = toValue(multiple);
   return val === true || val === "" || val === "true";

package/dist/runtime/components/files/file-upload-icon.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { useFileDialog } from "@vueuse/core";
 import { computed, toValue } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
@@ -7,7 +8,7 @@ const {
   accept,
   reset: _reset,
   directory,
-  icon = "gravity-ui:arrow-shape-up-from-line",
+  icon: _icon,
   ...props
 } = defineProps({
   multiple: { type: null, required: false },
@@ -30,6 +31,8 @@ const {
   document: { type: null, required: false }
 });
 const emit = defineEmits(["change", "cancel"]);
+const { icons } = useConfig();
+const icon = computed(() => _icon ?? icons.upload);
 const isMultiple = computed(() => {
   const val = toValue(multiple);
   return val === true || val === "" || val === "true";
@@ -55,5 +58,5 @@ defineExpose({ files, reset });
 </script>
 
 <template>
-	<ActionIcon :icon v-bind='props' @click='open' />
+	<ActionIcon :icon='icon' v-bind='props' @click='open' />
 </template>

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

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

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

@@ -1,6 +1,6 @@
 <script setup>
 import { format } from "@formkit/tempo";
-import { useDatesConfig } from "@nui/composables";
+import { useConfig, useDatesConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
 import Badge from "../badge.vue";
@@ -67,6 +67,7 @@ const {
 defineEmits(["open", "close", "select", "prev", "level", "next"]);
 const model = defineModel({ type: null });
 const config = useDatesConfig(cfg);
+const { icons } = useConfig();
 const formatValue = (date) => format({ date, format: valueFormat, ...config });
 const visible = computed(() => {
   if (!model.value)
@@ -106,7 +107,7 @@ const visible = computed(() => {
 			>
 				<template #leftSection>
 					<slot name='leftSection'>
-						<Icon name='gravity-ui:calendar' />
+						<Icon :name='icons.calendar' />
 					</slot>
 				</template>
 				<template v-if='!!$slots.rightSection' #rightSection>
@@ -124,7 +125,7 @@ const visible = computed(() => {
 
 						<template #rightSection>
 							<ActionIcon
-								icon='gravity-ui:xmark'
+								:icon='icons.close'
 								variant='subtle'
 								color='gray'
 								size='xs'

package/dist/runtime/components/input/email-input.vue

@@ -1,6 +1,8 @@
 <script setup>
+import { useConfig } from "@nui/composables";
+import { computed } from "vue";
 import TextInput from "./text-input.vue";
-const { icon = "gravity-ui:at", ...rest } = defineProps({
+const { icon: _icon, ...rest } = defineProps({
   multiline: { type: Boolean, required: false },
   withAria: { type: Boolean, required: false },
   classes: { type: Object, required: false },
@@ -19,10 +21,12 @@ const { icon = "gravity-ui:at", ...rest } = defineProps({
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false }
 });
+const { icons } = useConfig();
+const icon = computed(() => _icon ?? icons.email);
 </script>
 
 <template>
-	<TextInput type='email' :icon v-bind='rest'>
+	<TextInput type='email' :icon='icon' v-bind='rest'>
 		<template v-if='!!$slots.leftSection' #leftSection>
 			<slot name='leftSection' />
 		</template>

package/dist/runtime/components/input/number-input.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { clamp } from "@vueuse/core";
 import { shallowRef } from "vue";
 import UnstyledButton from "../button/unstyled-button.vue";
@@ -31,6 +32,7 @@ const {
   rightSectionPE: { type: void 0, required: false }
 });
 const focused = shallowRef(false);
+const { icons } = useConfig();
 const value = defineModel({ type: Number, ...{ default: 0 } });
 function handleWheel(event) {
   if (!focused.value)
@@ -80,14 +82,14 @@ function handleBlur() {
 							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
 							@click='value = clamp(value + step, min, max)'
 						>
-							<Icon name='gravity-ui:chevron-up' />
+							<Icon :name='icons.chevronUp' />
 						</UnstyledButton>
 						<UnstyledButton
 							:class='$style.control'
 							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
 							@click='value = clamp(value - step, min, max)'
 						>
-							<Icon name='gravity-ui:chevron-down' />
+							<Icon :name='icons.chevronDown' />
 						</UnstyledButton>
 					</div>
 				</slot>

package/dist/runtime/components/input/password-input.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { ref } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
 import TextInput from "./text-input.vue";
@@ -22,6 +23,7 @@ const props = defineProps({
   disabled: { type: Boolean, required: false }
 });
 const password = ref(true);
+const { icons } = useConfig();
 </script>
 
 <template>
@@ -33,7 +35,7 @@ const password = ref(true);
 		<template #rightSection>
 			<slot name='rightSection'>
 				<ActionIcon variant='subtle' @click='password = !password'>
-					<Icon :name='password ? "gravity-ui:eye" : "gravity-ui:eye-slash"' />
+					<Icon :name='password ? icons.passwordShow : icons.passwordHide' />
 				</ActionIcon>
 			</slot>
 		</template>

package/dist/runtime/components/link/lib.d.ts

@@ -1,5 +1,5 @@
 import type { NuxtLinkProps } from '#app';
 export declare function pickLinkProps<T extends NuxtLinkProps>(props: T): {
-    link: Pick<T, "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "replace" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
-    rest: Omit<T, "target" | "to" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "replace" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    link: Pick<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
+    rest: Omit<T, "replace" | "to" | "target" | "external" | "rel" | "noRel" | "prefetch" | "noPrefetch" | "prefetchOn" | "trailingSlash" | "activeClass" | "ariaCurrentValue" | "exactActiveClass" | "prefetchedClass" | "viewTransition">;
 };

package/dist/runtime/components/modal/modal.module.css

@@ -1 +1 @@
-.root{--dialog-y-offset:5dvh;--dialog-x-offset:50%;transform:translateX(-50%)}.root[data-centered]{--dialog-x-offset:50%;--dialog-y-offset:50%;transform:translate(-50%,-50%)}.root[data-full-screen]{--dialog-y-offset:0;--dialog-x-offset:0;--dialog-radius:0;height:100%;width:100%}
+.root{--dialog-y-offset:5dvh;--dialog-x-offset:50%;transform:translateX(-50%)}.root[data-centered]{--dialog-x-offset:50%;--dialog-y-offset:50%;transform:translate(-50%,-50%)}.root[data-full-screen]{--dialog-y-offset:0;--dialog-x-offset:0;--dialog-radius:0;height:100%;transform:none;width:100%}

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

@@ -1,6 +1,6 @@
 <script setup>
-import { useVarsResolver } from "@nui/composables";
-import { createVariantColorResolver, getSize } from "@nui/utils";
+import { useConfig, useVarsResolver } from "@nui/composables";
+import { getSize } from "@nui/utils";
 import Box from "../box.vue";
 import UnstyledButton from "../button/unstyled-button.vue";
 import { pickLinkProps } from "../link";
@@ -45,12 +45,9 @@ const {
     icon
   }
 } = pickLinkProps(props);
+const { variantResolver } = useConfig();
 const style = useVarsResolver((theme) => {
-  const {
-    background,
-    hover,
-    text
-  } = createVariantColorResolver({ variant, color, theme });
+  const { background, hover, text } = variantResolver({ variant, color, theme });
   return {
     root: {
       "--nl-bg": variant ? background : void 0,

package/dist/runtime/components/select.vue

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { computed, nextTick, ref, watch } from "vue";
 import { useCombobox, useComboboxData } from "./combobox";
 import ComboboxOptionsDropdown from "./combobox/combobox-options-dropdown.vue";
@@ -49,6 +50,7 @@ const {
   disabled: { type: Boolean, required: false }
 });
 const emit = defineEmits(["clear", "select", "open", "close", "submit"]);
+const { icons } = useConfig();
 const opened = defineModel("open", { type: Boolean, ...{ default: false } });
 const value = defineModel({ type: [String, Array, null], ...{ default: null } });
 const search = defineModel("search", { type: String, ...{ default: "" } });
@@ -147,7 +149,7 @@ function onSubmit(val) {
 				</template>
 				<template #rightSection>
 					<slot name='rightSection'>
-						<Icon name='gravity-ui:chevrons-expand-vertical' />
+						<Icon :name='icons.selectExpand' />
 					</slot>
 				</template>
 			</component>

package/dist/runtime/components/table/ui/table-sort-icon.vue

@@ -1,14 +1,16 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import defu from "defu";
 import { computed } from "vue";
 const { column, icons } = defineProps({
   column: { type: Object, required: true },
   icons: { type: Object, required: false }
 });
+const cfg = useConfig();
 const resolvedIcons = computed(() => defu(icons, {
-  asc: "gravity-ui:bars-descending-align-left-arrow-up",
-  desc: "gravity-ui:bars-descending-align-left-arrow-down",
-  off: "gravity-ui:bars-descending-align-left"
+  asc: cfg.icons.sortAsc,
+  desc: cfg.icons.sortDesc,
+  off: cfg.icons.sortOff
 }));
 const name = computed(() => column.getIsSorted() ? column.getIsSorted() === "asc" ? resolvedIcons.value.asc : resolvedIcons.value.desc : resolvedIcons.value.off);
 </script>

package/dist/runtime/components/tabs/tabs-root.d.vue.ts

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    orientation: "vertical" | "horizontal";
     variant: TabsVariant;
+    orientation: "vertical" | "horizontal";
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/tabs/tabs-root.vue.d.ts

@@ -62,8 +62,8 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_PublicProps, {}, {
 }, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
     "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
 }>, {
-    orientation: "vertical" | "horizontal";
     variant: TabsVariant;
+    orientation: "vertical" | "horizontal";
     placement: "left" | "right";
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/runtime/components/theme-toggle.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { useTheme } from "@nui/composables";
+import { useConfig, useTheme } from "@nui/composables";
 import ActionIcon from "./action-icon/action-icon.vue";
 const props = defineProps({
   size: { type: null, required: false },
@@ -14,12 +14,13 @@ const props = defineProps({
   classes: { type: Object, required: false }
 });
 const theme = useTheme();
+const { icons } = useConfig();
 </script>
 
 <template>
 	<ActionIcon
 		v-bind='props'
-		:icon='theme.value === "light" ? "gravity-ui:moon" : "gravity-ui:sun"'
+		:icon='theme.value === "light" ? icons.moon : icons.sun'
 		@click='theme.preference = theme.value === "light" ? "dark" : "light"'
 	>
 		<slot />

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

@@ -1,4 +1,5 @@
 <script setup>
+import { useConfig } from "@nui/composables";
 import { computed } from "vue";
 import ActionIcon from "../action-icon/action-icon.vue";
 import InputBase from "../input/ui/input-base.vue";
@@ -57,6 +58,7 @@ const {
   disabled: { type: Boolean, required: false }
 });
 const model = defineModel({ type: String, ...{ default: "" } });
+const { icons } = useConfig();
 const {
   values: {
     hours,
@@ -156,7 +158,7 @@ const isClearable = computed(() => clearable && !readonly && !disabled && (hours
 
 			<template #leftSection>
 				<slot name='leftSection'>
-					<Icon name='gravity-ui:clock' />
+					<Icon :name='icons.clock' />
 				</slot>
 			</template>
 
@@ -166,7 +168,7 @@ const isClearable = computed(() => clearable && !readonly && !disabled && (hours
 			>
 				<slot name='rightSection'>
 					<ActionIcon
-						icon='gravity-ui:xmark'
+						:icon='icons.close'
 						variant='subtle'
 						color='gray'
 						size='sm'

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

@@ -0,0 +1,93 @@
+import type { AnyString, Classes, DynamicSlots, NuanceColor, NuanceRadius, NuanceSize, SlotProps } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface TimelineItem {
+    /** Unique item id */
+    id: string;
+    label: string;
+    active?: boolean;
+    description?: string;
+    /** Icon inside bullet */
+    icon?: string;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`,
+     * numbers are converted to rem
+     * @default 'xl'
+     */
+    radius?: NuanceRadius;
+    /**
+     * Key of `theme.colors` or any valid CSS color to control active item colors
+     * @default theme.primaryColor
+     */
+    color?: NuanceColor;
+    /** Controls line border style @default 'solid' */
+    lineVariant?: 'solid' | 'dashed' | 'dotted';
+    /** Value used for model-based active state */
+    value?: string | number;
+    slot?: string;
+    [key: string]: any;
+}
+export interface TimelineVars {
+    root: '--tl-line-width' | '--tl-size' | '--tl-color' | '--tl-radius';
+}
+export type TimelineSlots<T extends TimelineItem = TimelineItem> = {
+    bullet?: SlotProps<T>;
+    label?: SlotProps<T>;
+    content?: SlotProps<T>;
+} & DynamicSlots<T, 'bullet' | 'label' | 'content', {
+    item: T;
+}>;
+export interface TimelineEmits<T extends TimelineItem = TimelineItem> {
+    select: [item: T, event: Event];
+}
+export interface TimelineProps<T extends TimelineItem> extends BoxProps {
+    items: T[];
+    /**
+     * Key of `theme.colors` or any valid CSS color to control active item colors
+     * @default theme.primaryColor
+     */
+    color?: NuanceColor;
+    /**
+     * Key of `theme.radius` or any valid CSS value to set `border-radius`, numbers are converted to rem
+     * @default 'full'
+     */
+    radius?: NuanceRadius;
+    /** Size of the bullet @default 20 */
+    size?: NuanceSize | AnyString;
+    /** Position of content relative to the bullet @default 'left' */
+    align?: 'right' | 'left';
+    /** Control width of the line */
+    lineWidth?: number | string;
+    /** If set, the active items direction is reversed without reversing items order @default false */
+    reverse?: boolean;
+    /** @default 'vertical' */
+    orientation?: 'horizontal' | 'vertical';
+    /**
+     * Key of item used to match against model value.
+     * @default 'value'
+     */
+    valueKey?: keyof T & string;
+    classes?: Classes<'root' | 'item' | 'body' | 'content' | 'bullet' | 'label'>;
+}
+declare const __VLS_export: <T extends TimelineItem>(__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<(TimelineProps<T> & {
+        modelValue?: string | number | null;
+    }) & {
+        onSelect?: ((item: T, event: Event) => any) | undefined;
+        "onUpdate:modelValue"?: ((value: string | number | null | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: TimelineSlots<T>;
+    emit: ((evt: "select", item: T, event: Event) => void) & ((event: "update:modelValue", value: string | number | null | undefined) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};