nuance-ui 0.1.9 → 0.1.10

package/dist/module.json

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

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

@@ -1,9 +1,9 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconSectionProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;

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

@@ -1,9 +1,9 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconSectionProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;

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

@@ -1,9 +1,9 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconProps {
     size?: NuanceSize | `compact-${NuanceSize}` | string;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;

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

@@ -1,9 +1,9 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { BoxProps } from '../box.vue.js';
 export interface ActionIconProps {
     size?: NuanceSize | `compact-${NuanceSize}` | string;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;

package/dist/runtime/components/alert.vue

@@ -1,8 +1,8 @@
 <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 ActionIcon from "./action-icon/action-icon.vue";
 import Box from "./box.vue";
 const {
   mod,

package/dist/runtime/components/avatar/_lib/context.d.ts

@@ -0,0 +1,6 @@
+export declare const useProvideAvatarGroup: () => {
+    withinGroup: boolean;
+};
+export declare const useAvatarGroupState: () => {
+    withinGroup: boolean;
+} | undefined;

package/dist/runtime/components/avatar/_lib/context.js

@@ -0,0 +1,4 @@
+import { createInjectionState } from "@vueuse/core";
+const [useProvide, useState] = createInjectionState(() => ({ withinGroup: true }));
+export const useProvideAvatarGroup = useProvide;
+export const useAvatarGroupState = useState;

package/dist/runtime/components/avatar/_lib/get-initials-color.d.ts

@@ -0,0 +1,2 @@
+import type { NuanceColor } from '@nui/types';
+export declare function getInitialsColor(name: string, colors?: NuanceColor[]): NuanceColor | undefined;

package/dist/runtime/components/avatar/_lib/get-initials-color.js

@@ -0,0 +1,27 @@
+function hashCode(input) {
+  let hash = 0;
+  for (let i = 0; i < input.length; i += 1) {
+    const char = input.charCodeAt(i);
+    hash = (hash << 5) - hash + char;
+    hash |= 0;
+  }
+  return hash;
+}
+const defaultColors = [
+  "blue",
+  "cyan",
+  "grape",
+  "green",
+  "indigo",
+  "lime",
+  "orange",
+  "pink",
+  "red",
+  "teal",
+  "violet"
+];
+export function getInitialsColor(name, colors = defaultColors) {
+  const hash = hashCode(name);
+  const index = Math.abs(hash) % colors.length;
+  return colors[index];
+}

package/dist/runtime/components/avatar/_lib/get-initials.d.ts

@@ -0,0 +1 @@
+export declare function getInitials(name: string, limit?: number): string;

package/dist/runtime/components/avatar/_lib/get-initials.js

@@ -0,0 +1,6 @@
+export function getInitials(name, limit = 2) {
+  const split = name.split(" ");
+  if (split.length === 1)
+    return name.slice(0, limit).toUpperCase();
+  return split.map((word) => word[0]).slice(0, limit).join("").toUpperCase();
+}

package/dist/runtime/components/avatar/avatar-group.d.vue.ts

@@ -0,0 +1,19 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceSpacing } from '@nui/types';
+export interface AvatarGroupProps extends BoxProps {
+    /** Negative space between Avatar components @default `'sm'` */
+    spacing?: NuanceSpacing | string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & 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/avatar/avatar-group.vue

@@ -0,0 +1,22 @@
+<script setup>
+import { getSpacing } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import { useProvideAvatarGroup } from "./_lib/context";
+import css from "./avatar.module.css";
+const { mod, is, spacing } = defineProps({
+  spacing: { type: [String, Number], required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const style = computed(() => ({
+  "--ag-spacing": getSpacing(spacing)
+}));
+useProvideAvatarGroup();
+</script>
+
+<template>
+	<Box :is :style :mod :class='css.group'>
+		<slot />
+	</Box>
+</template>

package/dist/runtime/components/avatar/avatar-group.vue.d.ts

@@ -0,0 +1,19 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceSpacing } from '@nui/types';
+export interface AvatarGroupProps extends BoxProps {
+    /** Negative space between Avatar components @default `'sm'` */
+    spacing?: NuanceSpacing | string;
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarGroupProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarGroupProps> & 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/avatar/avatar.d.vue.ts

@@ -0,0 +1,36 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+export interface AvatarProps extends BoxProps {
+    /** Width and height of the avatar, numbers are converted to rem @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
+    radius?: NuanceRadius;
+    /** Key of `theme.colors` or any valid CSS color @default `'gray'` */
+    color?: NuanceColor | 'initials';
+    /** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
+    gradient?: NuanceGradient;
+    /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
+    src?: string | null;
+    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    alt?: string;
+    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    name?: string;
+    /** A list of colors that is used for autogenerated initials. By default, all default colors can be used except gray and dark. */
+    allowedInitialsColors?: NuanceColor[];
+    /** Placeholder icon */
+    placeholder?: string;
+    variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & 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/avatar/avatar.module.css

@@ -0,0 +1 @@
+.group{--ag-spacing:var(--spacing-sm);--ag-offset:calc(var(--ag-spacing)*-1);display:flex;padding-inline-start:var(--ag-spacing)}.root{--avatar-size-xs:rem(16px);--avatar-size-sm:rem(26px);--avatar-size-md:rem(38px);--avatar-size-lg:rem(56px);--avatar-size-xl:rem(84px);--avatar-size:var(--avatar-size-md);--avatar-radius:1000px;--avatar-bg:var(--color-gray-light);--avatar-bd:1px solid transparent;--avatar-color:var(--color-gray-light-color);--avatar-placeholder-fz:calc(var(--avatar-size)/2.5);-webkit-tap-highlight-color:transparent;border-radius:var(--avatar-radius);display:block;height:var(--avatar-size);min-width:var(--avatar-size);overflow:hidden;padding:0;position:relative;text-decoration:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:var(--avatar-size)}.root:where([data-within-group]){background:var(--color-body);border:2px solid var(--color-body);margin-inline-start:var(--ag-offset)}.image{display:block;-o-object-fit:cover;object-fit:cover}.image,.placeholder{height:100%;width:100%}.placeholder{align-items:center;background:var(--avatar-bg);border:var(--avatar-bd);border-radius:var(--avatar-radius);color:var(--avatar-color);display:flex;font-size:var(--avatar-placeholder-fz);font-weight:700;justify-content:center;-webkit-user-select:none;-moz-user-select:none;user-select:none}.placeholder>[data-avatar-placeholder-icon]{height:70%;width:70%}

package/dist/runtime/components/avatar/avatar.vue

@@ -0,0 +1,71 @@
+<script setup>
+import { getInitialsColor } from "@nui/components/avatar/_lib/get-initials-color";
+import { useStyleResolver } from "@nui/composals";
+import { createVariantColorResolver, getRadius, getSize } from "@nui/utils";
+import { computed } from "vue";
+import Box from "../box.vue";
+import { useAvatarGroupState } from "./_lib/context";
+import { getInitials } from "./_lib/get-initials";
+import css from "./avatar.module.css";
+const {
+  alt,
+  src,
+  mod,
+  name,
+  color,
+  allowedInitialsColors,
+  gradient,
+  variant,
+  size,
+  radius,
+  placeholder = "gravity-ui:person"
+} = defineProps({
+  size: { type: String, required: false },
+  radius: { type: [String, Number], required: false },
+  color: { type: null, required: false },
+  gradient: { type: Object, required: false },
+  src: { type: [String, null], required: false },
+  alt: { type: String, required: false },
+  name: { type: String, required: false },
+  allowedInitialsColors: { type: Array, required: false },
+  placeholder: { type: String, required: false },
+  variant: { type: String, required: false },
+  is: { type: null, required: false },
+  mod: { type: [Object, Array, null], required: false }
+});
+const initials = computed(() => name && getInitials(name));
+const ctx = useAvatarGroupState();
+const style = computed(() => useStyleResolver((theme) => {
+  const _color = color === "initials" && typeof name === "string" ? getInitialsColor(name, allowedInitialsColors) : color;
+  const { background, text, border } = createVariantColorResolver({
+    color: _color || "gray",
+    theme,
+    gradient,
+    variant: variant || "light"
+  });
+  return {
+    "--avatar-size": getSize(size, "avatar-size"),
+    "--avatar-radius": radius === void 0 ? void 0 : getRadius(radius),
+    "--avatar-bg": _color || variant ? background : void 0,
+    "--avatar-color": _color || variant ? text : void 0,
+    "--avatar-bd": _color || variant ? border : void 0
+  };
+}));
+</script>
+
+<template>
+	<Box :style :class='css.root' :mod='[{ "within-group": ctx?.withinGroup }, mod]'>
+		<span v-if='!src' :class='css.placeholder' :title='alt'>
+			<slot>
+				<Icon v-if='!src && !name' :name='placeholder' />
+				{{ initials }}
+			</slot>
+		</span>
+		<NuxtImg
+			v-else
+			:src
+			:alt
+			:class='css.image'
+		/>
+	</Box>
+</template>

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

@@ -0,0 +1,36 @@
+import type { BoxProps } from '@nui/components';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
+export interface AvatarProps extends BoxProps {
+    /** Width and height of the avatar, numbers are converted to rem @default `'md'` */
+    size?: NuanceSize | string;
+    /** Key of `theme.radius` or any valid CSS value to set border-radius @default `'1000px'` */
+    radius?: NuanceRadius;
+    /** Key of `theme.colors` or any valid CSS color @default `'gray'` */
+    color?: NuanceColor | 'initials';
+    /** Gradient configuration for `variant="gradient"` @default `theme.defaultGradient` */
+    gradient?: NuanceGradient;
+    /** Image url, if the image cannot be loaded or `src={null}`, then placeholder is displayed instead */
+    src?: string | null;
+    /** Image `alt` attribute, also used as `title` attribute for placeholder */
+    alt?: string;
+    /** Name of the user. When `src` is not set, used to display initials and to generate color when `color="initials"` is set. */
+    name?: string;
+    /** A list of colors that is used for autogenerated initials. By default, all default colors can be used except gray and dark. */
+    allowedInitialsColors?: NuanceColor[];
+    /** Placeholder icon */
+    placeholder?: string;
+    variant?: 'filled' | 'light' | 'gradient' | 'outline' | 'default';
+}
+declare var __VLS_6: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_6) => any;
+};
+declare const __VLS_base: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & 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/avatar/index.d.ts

@@ -0,0 +1 @@
+export type * from './avatar.vue';

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

@@ -1,10 +1,10 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;

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

@@ -1,10 +1,10 @@
-import type { NuanceColor, NuanceRadius, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceRadius, NuanceSize } from '@nui/types';
 import type { HTMLAttributes } from 'vue';
 import type { BoxProps } from '../box.vue.js';
 export interface ButtonProps extends BoxProps {
     size?: NuanceSize | `compact-${NuanceSize}`;
     variant?: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     loading?: boolean;
     color?: NuanceColor;
     radius?: NuanceRadius;

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

@@ -1,5 +1,6 @@
 export * from './action-icon/index.js';
 export * from './app-shell/index.js';
+export * from './avatar/index.js';
 export * from './background-image.vue.js';
 export * from './box.vue.js';
 export * from './button/index.js';

package/dist/runtime/components/index.js

@@ -1,5 +1,6 @@
 export * from "./action-icon/index.js";
 export * from "./app-shell/index.js";
+export * from "./avatar/index.js";
 export * from "./background-image.vue";
 export * from "./box.vue";
 export * from "./button/index.js";

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

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from './box.vue.js';
 type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
@@ -15,7 +15,7 @@ export interface TextProps extends BoxProps {
     /** Determines whether font properties should be inherited from the parent, `false` by default */
     inherit?: boolean;
     /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     variant?: 'text' | 'gradient';
     fz?: NuanceSize | `h${TitleOrder}` | string;
     lh?: NuanceSize | string;

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

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceSize, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceSize } from '@nui/types';
 import type { CSSProperties } from 'vue';
 import type { BoxProps } from './box.vue.js';
 type TitleOrder = 1 | 2 | 3 | 4 | 5 | 6;
@@ -15,7 +15,7 @@ export interface TextProps extends BoxProps {
     /** Determines whether font properties should be inherited from the parent, `false` by default */
     inherit?: boolean;
     /** Gradient configuration, ignored when `variant` is not `gradient`, `theme.defaultGradient` by default */
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     variant?: 'text' | 'gradient';
     fz?: NuanceSize | `h${TitleOrder}` | string;
     lh?: NuanceSize | string;

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

@@ -1,2 +1,2 @@
-import type { UiKitGradient } from '@nui/types';
-export declare const DEFAULT_GRADIENT: UiKitGradient;
+import type { NuanceGradient } from '@nui/types';
+export declare const DEFAULT_GRADIENT: NuanceGradient;

package/dist/runtime/types/theme.d.ts

@@ -16,7 +16,7 @@ type ShadedColor = `dark.${NuanceColorShade}` | `slate.${NuanceColorShade}` | `g
 export type NuanceDefaultThemeColor = 'dark' | 'slate' | 'gray' | 'red' | 'pink' | 'grape' | 'violet' | 'indigo' | 'blue' | 'cyan' | 'green' | 'lime' | 'yellow' | 'orange' | 'teal' | 'black' | 'white';
 export type NuanceColor = NuanceDefaultThemeColor | ShadedColor;
 export type NuanceTheme = 'light' | 'dark';
-export interface UiKitGradient {
+export interface NuanceGradient {
     bg?: NuanceColor | string;
     from: NuanceColor | string;
     to: NuanceColor | string;

package/dist/runtime/utils/color-functions/get-gradient.d.ts

@@ -1,3 +1,3 @@
-import type { NuanceTheme, UiKitGradient } from '@nui/types';
-export declare function getGradient(gradient: UiKitGradient | undefined, theme: NuanceTheme): string;
-export declare function getGradientOutline(gradient: UiKitGradient | undefined, theme: NuanceTheme): string;
+import type { NuanceGradient, NuanceTheme } from '@nui/types';
+export declare function getGradient(gradient: NuanceGradient | undefined, theme: NuanceTheme): string;
+export declare function getGradientOutline(gradient: NuanceGradient | undefined, theme: NuanceTheme): string;

package/dist/runtime/utils/vars-resolver/create-variant-color-resolver.d.ts

@@ -1,4 +1,4 @@
-import type { NuanceColor, NuanceTheme, UiKitGradient } from '@nui/types';
+import type { NuanceColor, NuanceGradient, NuanceTheme } from '@nui/types';
 interface VariantColorResolverResult {
     background: string;
     hover: string;
@@ -8,7 +8,7 @@ interface VariantColorResolverResult {
 export declare function createVariantColorResolver({ color, variant, gradient, theme, }: {
     color: NuanceColor | string | undefined;
     variant: 'filled' | 'light' | 'outline' | 'subtle' | 'default' | 'gradient' | 'gradient-outline';
-    gradient?: UiKitGradient;
+    gradient?: NuanceGradient;
     theme: NuanceTheme;
 }): VariantColorResolverResult;
 export {};

package/package.json

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