nuance-ui 0.1.33 → 0.1.35

package/dist/module.json

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

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

@@ -1,8 +1,8 @@
-import type { NuanceColor, NuanceSpacing } from '@nui/types';
+import type { NuanceSpacing } from '@nui/types';
 import type { MaybeRef } from 'vue';
 import type { BoxProps } from './box.vue.js';
+import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
-import type { TextProps } from './text.vue.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
     active?: boolean;
     label: string;
@@ -17,20 +17,25 @@ export interface BreadcrumbsProps extends BoxProps {
     separator?: string;
     /** Controls spacing between separator and breadcrumb @default `'xs'` */
     spacing?: NuanceSpacing;
-    color?: NuanceColor;
-    size?: TextProps['fz'];
+    variant?: ButtonProps['variant'];
+    color?: ButtonProps['color'];
+    size?: ButtonProps['size'];
 }
-declare var __VLS_11: string, __VLS_12: {
+declare var __VLS_7: string, __VLS_8: {
     item: BreadcrumbsItem;
     ix: number;
     active: boolean;
-}, __VLS_27: {};
+}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 } & {
-    separator?: (props: typeof __VLS_27) => any;
+    separator?: (props: typeof __VLS_23) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (item: BreadcrumbsItem) => any;
+}, string, import("vue").PublicProps, Readonly<BreadcrumbsProps> & Readonly<{
+    onClick?: ((item: BreadcrumbsItem) => 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;

package/dist/runtime/components/breadcrumbs.vue

@@ -1,56 +1,62 @@
 <script setup>
+import { useTheme } from "@nui/composals";
 import { getSpacing } from "@nui/utils";
 import { computed, unref } from "vue";
 import Box from "./box.vue";
-import { pickLinkProps } from "./link";
-import Link from "./link/link.vue";
-import Text from "./text.vue";
+import Button from "./button/button.vue";
 const {
   is = "ol",
   mod,
   spacing,
   separator = "gravity-ui:chevron-right",
   color = "primary",
-  size,
+  variant = "subtle",
+  size = "compact-sm",
   items
 } = defineProps({
   items: { type: null, required: false },
   separator: { type: String, required: false },
   spacing: { type: [String, Number], required: false },
+  variant: { type: String, required: false },
   color: { type: null, required: false },
   size: { type: null, required: false },
   is: { type: null, required: false },
   mod: { type: [Object, Array, null], required: false }
 });
+defineEmits(["click"]);
 const style = computed(() => ({
   "--bc-spacing": getSpacing(spacing)
 }));
+const theme = useTheme();
+const inactive = computed(() => theme.value === "dark" ? "gray" : "dark");
 const breadcrumbs = computed(() => unref(items) ?? []);
 </script>
 
 <template>
 	<Box :is :mod :style	:class='$style.root' aria-label='breadcrumb'>
 		<template v-for='(item, ix) in breadcrumbs' :key='item.to'>
-			<Text is='li' :c='color' :fz='size' :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
+			<li :class='$style.breadcrumb' role='presentation' aria-hidden='true'>
 				<slot
 					:name='item.slot ?? "item"'
 					:item='item'
 					:ix='ix'
 					:active='item.active ?? ix === breadcrumbs.length - 1'
 				>
-					<Link
-						v-bind='pickLinkProps(item).link'
-						inherit
+					<Button
+						:size
+						:variant
 						:class='$style.item'
 						:mod='{ active: item.active ?? ix === breadcrumbs.length - 1 }'
+						:color='item.active ?? ix === breadcrumbs.length - 1 ? color : inactive'
+						@click.stop.prevent='$emit("click", item)'
 					>
-						<Icon v-if='item?.icon' :name='item.icon' :class='$style.icon' />
-						<Text is='span' inherit truncate>
-							{{ item.label }}
-						</Text>
-					</Link>
+						<template v-if='item?.icon' #leftSection>
+							<Icon :name='item.icon' :class='$style.icon' />
+						</template>
+						{{ item.label }}
+					</Button>
 				</slot>
-			</Text>
+			</li>
 			<li v-if='ix < breadcrumbs.length - 1' role='presentation' aria-hidden='true' :class='$style.separator'>
 				<slot name='separator'>
 					<Icon :name='separator' />
@@ -86,10 +92,6 @@ const breadcrumbs = computed(() => unref(items) ?? []);
 	text-transform: capitalize;
 
 	font-weight: 600;
-
-	&:where([data-active]) {
-		color: var(--text-color);
-	}
 }
 
 .icon {

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

@@ -1,8 +1,8 @@
-import type { NuanceColor, NuanceSpacing } from '@nui/types';
+import type { NuanceSpacing } from '@nui/types';
 import type { MaybeRef } from 'vue';
 import type { BoxProps } from './box.vue.js';
+import type { ButtonProps } from './button/button.vue.js';
 import type { LinkProps } from './link/index.js';
-import type { TextProps } from './text.vue.js';
 export interface BreadcrumbsItem extends Omit<LinkProps, 'mod'> {
     active?: boolean;
     label: string;
@@ -17,20 +17,25 @@ export interface BreadcrumbsProps extends BoxProps {
     separator?: string;
     /** Controls spacing between separator and breadcrumb @default `'xs'` */
     spacing?: NuanceSpacing;
-    color?: NuanceColor;
-    size?: TextProps['fz'];
+    variant?: ButtonProps['variant'];
+    color?: ButtonProps['color'];
+    size?: ButtonProps['size'];
 }
-declare var __VLS_11: string, __VLS_12: {
+declare var __VLS_7: string, __VLS_8: {
     item: BreadcrumbsItem;
     ix: number;
     active: boolean;
-}, __VLS_27: {};
+}, __VLS_23: {};
 type __VLS_Slots = {} & {
-    [K in NonNullable<typeof __VLS_11>]?: (props: typeof __VLS_12) => any;
+    [K in NonNullable<typeof __VLS_7>]?: (props: typeof __VLS_8) => any;
 } & {
-    separator?: (props: typeof __VLS_27) => any;
+    separator?: (props: typeof __VLS_23) => any;
 };
-declare const __VLS_base: import("vue").DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<BreadcrumbsProps> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const __VLS_base: import("vue").DefineComponent<BreadcrumbsProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    click: (item: BreadcrumbsItem) => any;
+}, string, import("vue").PublicProps, Readonly<BreadcrumbsProps> & Readonly<{
+    onClick?: ((item: BreadcrumbsItem) => 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;

package/dist/runtime/components/file-upload.d.vue.ts

@@ -0,0 +1,44 @@
+import type { UseFileDialogOptions } from '@vueuse/core';
+import type { MaybeRef } from 'vue';
+import type { ActionIconProps } from './action-icon/action-icon.vue.js';
+export interface FileUploadProps<M extends boolean> extends ActionIconProps, UseFileDialogOptions {
+    /**
+     * @default false
+     */
+    multiple?: MaybeRef<M>;
+    /**
+     * @default '*'
+     */
+    accept?: MaybeRef<string>;
+    /**
+     * Reset when open file dialog.
+     * @default false
+     */
+    reset?: MaybeRef<boolean>;
+    /**
+     * Select directories instead of files.
+     * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+     * @default false
+     */
+    directory?: MaybeRef<boolean>;
+}
+declare const __VLS_export: <Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<FileUploadProps<Multiple> & {
+        onCancel?: (() => any) | undefined;
+        onChange?: ((files: (Multiple extends true ? File[] : File) | null) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        files: import("vue").Ref<FileList | null, FileList | null>;
+        reset: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "cancel") => void) & ((evt: "change", files: (Multiple extends true ? File[] : File) | null) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -0,0 +1,59 @@
+<script setup>
+import { useFileDialog } from "@vueuse/core";
+import { computed, toValue } from "vue";
+import ActionIcon from "./action-icon/action-icon.vue";
+const {
+  multiple,
+  accept,
+  reset: _reset,
+  directory,
+  icon = "gravity-ui:arrow-shape-up-from-line",
+  ...props
+} = defineProps({
+  multiple: { type: null, required: false },
+  accept: { type: null, required: false },
+  reset: { type: null, required: false },
+  directory: { type: null, required: false },
+  size: { type: null, required: false },
+  variant: { type: String, required: false },
+  gradient: { type: Object, required: false },
+  loading: { type: Boolean, required: false },
+  color: { type: null, required: false },
+  radius: { type: [String, Number], required: false },
+  classes: { type: Object, required: false },
+  mod: { type: [Object, Array, null], required: false },
+  icon: { type: String, required: false },
+  disabled: { type: Boolean, required: false },
+  capture: { type: null, required: false },
+  initialFiles: { type: null, required: false },
+  input: { type: null, required: false },
+  document: { type: null, required: false }
+});
+const emit = defineEmits(["change", "cancel"]);
+const isMultiple = computed(() => {
+  const val = toValue(multiple);
+  return val === true || val === "" || val === "true";
+});
+const { files, open, onChange, onCancel, reset } = useFileDialog({
+  multiple: isMultiple,
+  accept,
+  reset: _reset,
+  directory
+});
+onChange((fileList) => {
+  if (!fileList)
+    return emit("change", null);
+  const filesArray = Array.from(fileList);
+  if (isMultiple.value) {
+    emit("change", filesArray);
+  } else {
+    emit("change", filesArray[0] || null);
+  }
+});
+onCancel(() => emit("cancel"));
+defineExpose({ files, reset });
+</script>
+
+<template>
+	<ActionIcon :icon v-bind='props' @click='open' />
+</template>

package/dist/runtime/components/file-upload.vue.d.ts

@@ -0,0 +1,44 @@
+import type { UseFileDialogOptions } from '@vueuse/core';
+import type { MaybeRef } from 'vue';
+import type { ActionIconProps } from './action-icon/action-icon.vue.js';
+export interface FileUploadProps<M extends boolean> extends ActionIconProps, UseFileDialogOptions {
+    /**
+     * @default false
+     */
+    multiple?: MaybeRef<M>;
+    /**
+     * @default '*'
+     */
+    accept?: MaybeRef<string>;
+    /**
+     * Reset when open file dialog.
+     * @default false
+     */
+    reset?: MaybeRef<boolean>;
+    /**
+     * Select directories instead of files.
+     * @see [HTMLInputElement webkitdirectory](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/webkitdirectory)
+     * @default false
+     */
+    directory?: MaybeRef<boolean>;
+}
+declare const __VLS_export: <Multiple extends boolean = false>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: __VLS_PrettifyLocal<FileUploadProps<Multiple> & {
+        onCancel?: (() => any) | undefined;
+        onChange?: ((files: (Multiple extends true ? File[] : File) | null) => any) | undefined;
+    }> & import("vue").PublicProps;
+    expose: (exposed: import("vue").ShallowUnwrapRef<{
+        files: import("vue").Ref<FileList | null, FileList | null>;
+        reset: () => void;
+    }>) => void;
+    attrs: any;
+    slots: {};
+    emit: ((evt: "cancel") => void) & ((evt: "change", files: (Multiple extends true ? File[] : File) | null) => void);
+}>) => import("vue").VNode & {
+    __ctx?: Awaited<typeof __VLS_setup>;
+};
+declare const _default: typeof __VLS_export;
+export default _default;
+type __VLS_PrettifyLocal<T> = {
+    [K in keyof T as K]: T[K];
+} & {};

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

@@ -12,6 +12,7 @@ export * from './combobox/index.js';
 export * from './container.vue.js';
 export * from './dialog/index.js';
 export * from './drawer/index.js';
+export * from './file-upload.vue.js';
 export * from './input/index.js';
 export * from './link/index.js';
 export * from './loader/index.js';

package/dist/runtime/components/index.js

@@ -11,6 +11,7 @@ export * from "./combobox/index.js";
 export * from "./container.vue";
 export * from "./dialog/index.js";
 export * from "./drawer/index.js";
+export * from "./file-upload.vue";
 export * from "./input/index.js";
 export * from "./link/index.js";
 export * from "./loader/index.js";

package/dist/runtime/components/roving-focus/_lib/context.d.ts

@@ -20,7 +20,7 @@ export declare const useProvideRovingFocus: (args_0: State) => {
     attr: string;
     list: Readonly<ShallowRef<HTMLElement | null>>;
     loop: boolean | undefined;
-    orientation: "horizontal" | "vertical" | "both" | undefined;
+    orientation: "both" | "horizontal" | "vertical" | undefined;
     init: () => number;
     focus: {
         (dir: "first" | "last"): void;
@@ -38,7 +38,7 @@ export declare const useRovingFocus: () => {
     attr: string;
     list: Readonly<ShallowRef<HTMLElement | null>>;
     loop: boolean | undefined;
-    orientation: "horizontal" | "vertical" | "both" | undefined;
+    orientation: "both" | "horizontal" | "vertical" | undefined;
     init: () => number;
     focus: {
         (dir: "first" | "last"): void;

package/package.json

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