nuance-ui 0.1.8 → 0.1.9

package/dist/module.json

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

package/dist/runtime/components/action-icon/action-icon.d.vue.ts

@@ -7,6 +7,7 @@ export interface ActionIconProps {
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;
+    /** Styles API */
     classes?: {
         root?: string;
         icon?: string;

package/dist/runtime/components/action-icon/action-icon.vue.d.ts

@@ -7,6 +7,7 @@ export interface ActionIconProps {
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;
+    /** Styles API */
     classes?: {
         root?: string;
         icon?: string;

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

@@ -0,0 +1,48 @@
+import type { NuanceColor, NuanceRadius } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface AlertProps extends BoxProps {
+    variant?: 'filled' | 'light' | 'outline' | 'default';
+    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor`  */
+    color?: NuanceColor;
+    /** Alert title */
+    title?: string;
+    /** Icon displayed next to the title */
+    icon?: string;
+    /** Determines whether close button should be displayed @default `false` */
+    withCloseButton?: boolean;
+    /** Called when the close button is clicked */
+    onClose?: () => void;
+    /** Close button `aria-label` */
+    closeButtonLabel?: string;
+    /** Styles API */
+    classes?: {
+        root?: string;
+        icon?: string;
+        body?: string;
+        title?: string;
+        label?: string;
+        message?: string;
+        closeButton?: string;
+    };
+}
+declare var __VLS_15: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onClose?: (() => 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;
+    };
+};

package/dist/runtime/components/alert.vue

@@ -0,0 +1,178 @@
+<script setup>
+import ActionIcon from "@nui/components/action-icon/action-icon.vue";
+import { useStyleResolver } from "@nui/composals";
+import { createVariantColorResolver, getRadius } from "@nui/utils";
+import { computed, useId } from "vue";
+import Box from "./box.vue";
+const {
+  mod,
+  icon,
+  color,
+  title,
+  radius,
+  variant = "light",
+  withCloseButton,
+  classes
+} = defineProps({
+  variant: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  title: { type: String, required: false },
+  icon: { type: String, required: false },
+  withCloseButton: { type: Boolean, required: false },
+  onClose: { type: Function, required: false },
+  closeButtonLabel: { type: String, required: false },
+  classes: { type: Object, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+defineEmits(["close"]);
+const id = useId();
+const style = computed(() => useStyleResolver((theme) => {
+  const { background, border, text } = createVariantColorResolver({
+    variant,
+    color,
+    theme
+  });
+  return {
+    "--alert-radius": radius === void 0 ? void 0 : getRadius(radius),
+    "--alert-bg": color || variant ? background : void 0,
+    "--alert-color": text,
+    "--alert-bd": color || variant ? border : void 0
+  };
+}));
+</script>
+
+<template>
+	<Box
+		role='alert'
+		:style
+		:class='[$style.root, classes?.root]'
+		:mod='[{ variant }, mod]'
+		:aria-describedby='$slots.default ? `${id}-body` : void 0'
+		:aria-labelledby='$slots.label ? `${id}-title` : void 0'
+	>
+		<Icon
+			v-if='icon'
+			:name='icon'
+			:class='[$style.icon, classes?.icon]'
+		/>
+
+		<div :class='[$style.body, classes?.body]'>
+			<Box v-if='title || $slots.title' :class='[$style.title, classes?.title]'>
+				<span :id='`${id}-title`' :class='[$style.label, classes?.label]'>
+					<slot name='title'>
+						{{ title }}
+					</slot>
+				</span>
+			</Box>
+
+			<Box
+				v-if='$slots.default'
+				:id='`${id}-body`'
+				:class='[$style.message, classes?.message]'
+				:mod='{ variant }'
+			>
+				<slot />
+			</Box>
+		</div>
+
+		<ActionIcon
+			v-if='withCloseButton'
+			:class='[$style.closeButton, classes?.closeButton]'
+			variant='subtle'
+			icon='gravity-ui:xmark'
+			size='sm'
+			:color
+			@click='$emit("close")'
+		/>
+	</Box>
+</template>
+
+<style module lang="postcss">
+.root {
+	--alert-radius: var(--radius-default);
+	--alert-bg: var(--color-primary-light);
+	--alert-bd: 1px solid transparent;
+	--alert-color: var(--color-primary-light-color);
+
+	position: relative;
+
+	overflow: hidden;
+	display: flex;
+	gap: var(--spacing-md);
+
+	padding: var(--spacing-md) var(--spacing-md);
+	border: var(--alert-bd);
+	border-radius: var(--alert-radius);
+
+	color: var(--alert-color);
+
+	background-color: var(--alert-bg);
+}
+
+.body {
+	display: flex;
+	flex: 1;
+	flex-direction: column;
+	gap: var(--spacing-xs);
+}
+
+.title {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+
+	font-size: var(--font-size-sm);
+	font-weight: 700;
+}
+
+.label {
+	overflow: hidden;
+	display: block;
+
+	text-overflow: ellipsis;
+}
+
+.icon {
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+
+	width: 1.25rem;
+	height: 1.25rem;
+	margin-top: 1px;
+
+	line-height: 1;
+}
+
+.message {
+	overflow: hidden;
+
+	font-size: var(--font-size-sm);
+	text-overflow: ellipsis;
+
+	:where([data-mantine-color-scheme='light']) & {
+		color: var(--color-black);
+	}
+
+	:where([data-mantine-color-scheme='dark']) & {
+		color: var(--color-white);
+	}
+
+	&:where([data-variant='filled']) {
+		color: var(--alert-color);
+	}
+
+	&:where([data-variant='white']) {
+		color: var(--color-black);
+	}
+}
+
+.closeButton {
+	width: 20px;
+	height: 20px;
+
+	color: var(--alert-color);
+}
+</style>

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

@@ -0,0 +1,48 @@
+import type { NuanceColor, NuanceRadius } from '@nui/types';
+import type { BoxProps } from './box.vue.js';
+export interface AlertProps extends BoxProps {
+    variant?: 'filled' | 'light' | 'outline' | 'default';
+    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Key of `theme.colors` or any valid CSS color @default `theme.primaryColor`  */
+    color?: NuanceColor;
+    /** Alert title */
+    title?: string;
+    /** Icon displayed next to the title */
+    icon?: string;
+    /** Determines whether close button should be displayed @default `false` */
+    withCloseButton?: boolean;
+    /** Called when the close button is clicked */
+    onClose?: () => void;
+    /** Close button `aria-label` */
+    closeButtonLabel?: string;
+    /** Styles API */
+    classes?: {
+        root?: string;
+        icon?: string;
+        body?: string;
+        title?: string;
+        label?: string;
+        message?: string;
+        closeButton?: string;
+    };
+}
+declare var __VLS_15: {}, __VLS_21: {};
+type __VLS_Slots = {} & {
+    title?: (props: typeof __VLS_15) => any;
+} & {
+    default?: (props: typeof __VLS_21) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AlertProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    close: () => any;
+}, string, import("vue").PublicProps, Readonly<AlertProps> & Readonly<{
+    onClose?: (() => 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;
+    };
+};

package/dist/runtime/components/app-shell/app-shell-main.vue

@@ -15,6 +15,7 @@ const { mod } = defineProps({
 <style module lang="postcss">
 .root {
 	display: grid;
+	align-content: flex-start;
 
 	min-height: 100dvh;
 	padding-top: calc(var(--app-shell-header-offset, 0rem) + var(--app-shell-padding));

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

@@ -8,6 +8,7 @@ export interface ButtonProps extends BoxProps {
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;
+    /** Styles API */
     classes?: {
         root?: string;
         inner?: string;

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

@@ -8,6 +8,7 @@ export interface ButtonProps extends BoxProps {
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;
+    /** Styles API */
     classes?: {
         root?: string;
         inner?: string;

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

@@ -17,6 +17,7 @@ export * from './modal/index.js';
 export * from './nav-link/index.js';
 export * from './paper.vue.js';
 export * from './popover/index.js';
+export * from './progress/index.js';
 export * from './roving-focus/index.js';
 export * from './select/index.js';
 export * from './tabs/index.js';

package/dist/runtime/components/index.js

@@ -17,6 +17,7 @@ export * from "./modal/index.js";
 export * from "./nav-link/index.js";
 export * from "./paper.vue";
 export * from "./popover/index.js";
+export * from "./progress/index.js";
 export * from "./roving-focus/index.js";
 export * from "./select/index.js";
 export * from "./tabs/index.js";

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

@@ -1,6 +1,6 @@
 <script setup>
-import { clamp, useCounter } from "@vueuse/core";
-import { shallowRef, useId, watch } from "vue";
+import { clamp } from "@vueuse/core";
+import { shallowRef, useId } from "vue";
 import UnstyledButton from "../button/unstyled-button.vue";
 import BaseInput from "./ui/input-base.vue";
 import InputWrapper from "./ui/input-wrapper.vue";
@@ -31,25 +31,21 @@ const {
   rightSectionPE: { type: null, required: false }
 });
 const id = useId();
-const value = defineModel({ type: Number, ...{ default: 0 } });
-const { count, inc, dec, set } = useCounter(value, { min, max });
 const focused = shallowRef(false);
-watch(count, () => {
-  value.value = count.value;
-});
+const value = defineModel({ type: Number, ...{ default: 0 } });
 function handleWheel(event) {
   if (!focused.value)
     return;
   if (Math.abs(event.deltaY) <= Math.abs(event.deltaX))
     return;
   if (event.deltaY > 0)
-    dec(step);
+    value.value = clamp(value.value + step, min, max);
   else if (event.deltaY < 0)
-    inc(step);
+    value.value = clamp(value.value - step, min, max);
 }
 function handleBlur() {
   focused.value = false;
-  set(clamp(count.value, min, max));
+  value.value = clamp(value.value, min, max);
 }
 </script>
 
@@ -57,12 +53,12 @@ function handleBlur() {
 	<InputWrapper v-bind='rest' :id :class='$style.root' :right-section-p-e>
 		<BaseInput
 			:id
-			:value='count'
-			:readonly
-			:disabled
-			:step
+			v-model='value'
 			:min
 			:max
+			:step
+			:readonly
+			:disabled
 			type='number'
 			@focus='focused = true'
 			@blur='handleBlur()'
@@ -77,14 +73,14 @@ function handleBlur() {
 						<UnstyledButton
 							:class='$style.control'
 							:disabled='disabled || typeof value === "number" && !Number.isNaN(max) && value >= max'
-							@click='inc(step)'
+							@click='value = clamp(value + step, min, max)'
 						>
 							<Icon name='gravity-ui:chevron-up' />
 						</UnstyledButton>
 						<UnstyledButton
 							:class='$style.control'
 							:disabled='disabled || typeof value === "number" && !Number.isNaN(min) && value <= min'
-							@click='dec(step)'
+							@click='value = clamp(value - step, min, max)'
 						>
 							<Icon name='gravity-ui:chevron-down' />
 						</UnstyledButton>

package/dist/runtime/components/input/ui/input-base.d.vue.ts

@@ -4,7 +4,7 @@ import type { InputBaseProps } from '../types/index.js';
 export interface BaseInputProps extends InputBaseProps, Omit<WrapperContext, 'id'> {
     id: string;
     is?: 'input' | 'textarea' | Component;
-    modelValue?: string;
+    modelValue?: string | number;
 }
 declare var __VLS_6: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
@@ -15,9 +15,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<BaseInputProps, {
     ref: Readonly<import("vue").ShallowRef<any>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string | number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<BaseInputProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => 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/input/ui/input-base.vue

@@ -1,7 +1,7 @@
 <script setup>
-import Box from "@nui/components/box.vue";
 import { getFontSize, getRadius, getSize } from "@nui/utils";
 import { computed, useTemplateRef } from "vue";
+import Box from "../../box.vue";
 import { useInputWrapperState } from "../lib/input-wrapper.context";
 const {
   is = "input",
@@ -12,7 +12,7 @@ const {
 } = defineProps({
   id: { type: String, required: true },
   is: { type: null, required: false },
-  modelValue: { type: String, required: false },
+  modelValue: { type: [String, Number], required: false },
   readonly: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
   required: { type: Boolean, required: false },

package/dist/runtime/components/input/ui/input-base.vue.d.ts

@@ -4,7 +4,7 @@ import type { InputBaseProps } from '../types/index.js';
 export interface BaseInputProps extends InputBaseProps, Omit<WrapperContext, 'id'> {
     id: string;
     is?: 'input' | 'textarea' | Component;
-    modelValue?: string;
+    modelValue?: string | number;
 }
 declare var __VLS_6: {}, __VLS_17: {};
 type __VLS_Slots = {} & {
@@ -15,9 +15,9 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<BaseInputProps, {
     ref: Readonly<import("vue").ShallowRef<any>>;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: string | undefined) => any;
+    "update:modelValue": (value: string | number | undefined) => any;
 }, string, import("vue").PublicProps, Readonly<BaseInputProps> & Readonly<{
-    "onUpdate:modelValue"?: ((value: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | number | undefined) => 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/nav-link/nav-link.vue

@@ -121,6 +121,16 @@ const style = useStyleResolver((theme) => {
 		opacity: 0.4;
 	}
 
+	&:hover {
+		@mixin where-light {
+			background-color: var(--color-gray-0);
+		}
+
+		@mixin where-dark {
+			background-color: var(--color-dark-6);
+		}
+	}
+
 	&:where([data-active], [aria-current='page']) {
 		color: var(--nl-color);
 
@@ -135,16 +145,6 @@ const style = useStyleResolver((theme) => {
 			background-color: var(--nl-hover);
 		}
 	}
-
-	@mixin hover {
-		@mixin where-light {
-			background-color: var(--color-gray-0);
-		}
-
-		@mixin where-dark {
-			background-color: var(--color-dark-6);
-		}
-	}
 }
 
 .section {

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

@@ -0,0 +1,3 @@
+export type * from './progress-root.vue';
+export type * from './progress-section.vue';
+export type * from './progress.vue';

package/dist/runtime/components/progress/progress-label.d.vue.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@nui/components';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/progress/progress-label.vue

@@ -0,0 +1,14 @@
+<script setup>
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const props = defineProps({
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+</script>
+
+<template>
+	<Box v-bind='props' :class='css.label'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/progress/progress-label.vue.d.ts

@@ -0,0 +1,14 @@
+import type { BoxProps } from '@nui/components';
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<BoxProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BoxProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

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

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceRadius, NuanceSize } from '@nui/types';
+export interface ProgressRootProps extends BoxProps {
+    /** Controls track height @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    transitionDuration?: number;
+    /** Controls orientation @default `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProgressRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressRootProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};

package/dist/runtime/components/progress/progress-root.vue

@@ -0,0 +1,31 @@
+<script setup>
+import { getRadius, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import css from "./progress.module.css";
+const {
+  orientation,
+  mod,
+  size,
+  radius,
+  transitionDuration
+} = defineProps({
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  transitionDuration: { type: Number, required: false },
+  orientation: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = computed(() => ({
+  "--progress-size": getSize(size, "progress-size"),
+  "--progress-radius": radius === void 0 ? void 0 : getRadius(radius),
+  "--progress-transition-duration": typeof transitionDuration === "number" ? `${transitionDuration}ms` : void 0
+}));
+</script>
+
+<template>
+	<Box :style :class='css.root' :mod='[{ orientation }, mod]'>
+		<slot />
+	</Box>
+</template>

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

@@ -0,0 +1,25 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceRadius, NuanceSize } from '@nui/types';
+export interface ProgressRootProps extends BoxProps {
+    /** Controls track height @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set `border-radius` @default `theme.defaultRadius` */
+    radius?: NuanceRadius;
+    /** Controls sections width transition duration, value is specified in ms @default `100` */
+    transitionDuration?: number;
+    /** Controls orientation @default `'horizontal'` */
+    orientation?: 'horizontal' | 'vertical';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<ProgressRootProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<ProgressRootProps> & Readonly<{}>, {}, {}, {}, {}, 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;
+    };
+};