@sparklingopinions/sparkling-ui 0.4.2 → 0.6.0

package/README.md

@@ -67,7 +67,7 @@ The package is published to npm as `@sparklingopinions/sparkling-ui`. Apps insta
    import { Button } from 'sparkling-ui'
    ```
 
-5. `Icon` draws the library's set of 114 icons by name: `<Icon name="users" color="ink-muted" />`. Older names (`people`, `companies`, `dot-vertical`...) resolve as aliases, and `iconNames` lists the set. To add icons or replace some of the set, register a resolver once, before mounting; names it returns a component for win. With SVG files imported as components (e.g. `vite-svg-loader`):
+5. `Icon` draws the library's set of 118 icons by name: `<Icon name="users" color="ink-muted" />`. Older names (`people`, `companies`, `dot-vertical`...) resolve as aliases, and `iconNames` lists the set. To add icons or replace some of the set, register a resolver once, before mounting; names it returns a component for win. With SVG files imported as components (e.g. `vite-svg-loader`):
 
    ```ts
    import { type Component, defineAsyncComponent } from 'vue'

package/dist/aliases.d.ts

@@ -182,6 +182,11 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         'group-leading'?: (props: {
             group: DataListGroup<T>;
         }) => unknown;
+        'group-header'?: (props: {
+            group: DataListGroup<T>;
+            count: number;
+            collapsed: boolean;
+        }) => unknown;
         leading?: (props: {
             item: T;
         }) => unknown;
@@ -200,6 +205,7 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         rowKey?: (keyof T & string) | undefined;
         selectable?: boolean | undefined;
         loading?: boolean | undefined;
+        variant?: "joined" | "cards" | undefined;
         headingLevel?: 2 | 3 | 4 | 5 | 6 | undefined;
         onRowClick?: ((item: T) => void) | undefined;
         onNew?: ((group: DataListGroup<T>) => void) | undefined;
@@ -220,6 +226,11 @@ export declare const List: <T extends Record<string, any>>(__VLS_props: NonNulla
         'group-leading'?: (props: {
             group: DataListGroup<T>;
         }) => unknown;
+        'group-header'?: (props: {
+            group: DataListGroup<T>;
+            count: number;
+            collapsed: boolean;
+        }) => unknown;
         leading?: (props: {
             item: T;
         }) => unknown;
@@ -262,6 +273,8 @@ export declare const Modal: {
         confirmIcon: string;
         band: string | boolean;
         hint: string;
+        presentation: "dialog" | "auto" | "sheet";
+        sheetBelow: number;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -286,6 +299,8 @@ export declare const Modal: {
         confirmIcon: string;
         band: string | boolean;
         hint: string;
+        presentation: "dialog" | "auto" | "sheet";
+        sheetBelow: number;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -311,8 +326,18 @@ export declare const Modal: {
     confirmIcon: string;
     band: string | boolean;
     hint: string;
+    presentation: "dialog" | "auto" | "sheet";
+    sheetBelow: number;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
+        title?: (props: {}) => any;
+    } & {
+        default?: (props: {}) => any;
+    } & {
+        footer?: (props: {}) => any;
+    } & {
+        'footer-start'?: (props: {}) => any;
+    } & {
         hero?: (props: {}) => any;
     } & {
         title?: (props: {}) => any;
@@ -345,13 +370,13 @@ export declare const OptionsMenu: {
         confirmLabel: string;
         cancelLabel: string;
         id: string;
+        confirmTitle: string;
+        confirmMessage: string;
+        deleteLabel: string;
         items: DropdownMenuEntry[];
         buttonIcon: string;
         buttonLabel: string;
         tooltip: string | null;
-        confirmTitle: string;
-        confirmMessage: string;
-        deleteLabel: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -370,13 +395,13 @@ export declare const OptionsMenu: {
         confirmLabel: string;
         cancelLabel: string;
         id: string;
+        confirmTitle: string;
+        confirmMessage: string;
+        deleteLabel: string;
         items: DropdownMenuEntry[];
         buttonIcon: string;
         buttonLabel: string;
         tooltip: string | null;
-        confirmTitle: string;
-        confirmMessage: string;
-        deleteLabel: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -398,13 +423,13 @@ export declare const OptionsMenu: {
     confirmLabel: string;
     cancelLabel: string;
     id: string;
+    confirmTitle: string;
+    confirmMessage: string;
+    deleteLabel: string;
     items: DropdownMenuEntry[];
     buttonIcon: string;
     buttonLabel: string;
     tooltip: string | null;
-    confirmTitle: string;
-    confirmMessage: string;
-    deleteLabel: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         trigger?: (props: {
@@ -425,17 +450,67 @@ export declare const FormErrors: import("vue").DefineComponent<ErrorSummaryProps
 /** @deprecated Renamed to ErrorSummaryProps. */
 export type FormErrorsProps = ErrorSummaryProps;
 /** @deprecated Renamed to FilterMenu. */
-export declare const FilterFieldPicker: import("vue").DefineComponent<FilterMenuProps & {
-    open?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    pick: (name: string) => any;
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<FilterMenuProps & {
+export declare const FilterFieldPicker: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<FilterMenuProps & {
+        open?: boolean;
+    }> & Readonly<{
+        onPick?: ((name: string) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        pick: (name: string) => any;
+        "update:open": (value: boolean) => any;
+    }, import("vue").PublicProps, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        label: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        inUse: string[];
+        searchPlaceholder: string;
+        inUseLabel: string;
+        addLabel: string;
+        fieldsLabel: string;
+        noMatchLabel: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<FilterMenuProps & {
+        open?: boolean;
+    }> & Readonly<{
+        onPick?: ((name: string) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        label: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        inUse: string[];
+        searchPlaceholder: string;
+        inUseLabel: string;
+        addLabel: string;
+        fieldsLabel: string;
+        noMatchLabel: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<FilterMenuProps & {
     open?: boolean;
 }> & Readonly<{
     onPick?: ((name: string) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    pick: (name: string) => any;
+    "update:open": (value: boolean) => any;
+}, string, {
+    variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     label: string;
     closeLabel: string;
@@ -447,23 +522,79 @@ export declare const FilterFieldPicker: import("vue").DefineComponent<FilterMenu
     addLabel: string;
     fieldsLabel: string;
     noMatchLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        trigger?: (props: {
+            open: boolean;
+            toggle: () => void;
+            count: number;
+            props: import("./index.ts").FilterTriggerProps;
+        }) => unknown;
+    };
+});
 /** @deprecated Renamed to FilterMenuProps. */
 export type FilterFieldPickerProps = FilterMenuProps;
 /** @deprecated Renamed to SortMenu. */
-export declare const SortControl: import("vue").DefineComponent<SortMenuProps & {
-    modelValue?: import("./index.ts").ViewSort | null;
-    open?: boolean;
-}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (value: import("./index.ts").ViewSort | null) => any;
-    "update:open": (value: boolean) => any;
-}, string, import("vue").PublicProps, Readonly<SortMenuProps & {
+export declare const SortControl: {
+    new (...args: any[]): import("vue").CreateComponentPublicInstanceWithMixins<Readonly<SortMenuProps & {
+        modelValue?: import("./index.ts").ViewSort | null;
+        open?: boolean;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: import("./index.ts").ViewSort | null) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+        "update:modelValue": (value: import("./index.ts").ViewSort | null) => any;
+        "update:open": (value: boolean) => any;
+    }, import("vue").PublicProps, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        title: string;
+        clearLabel: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        directionLabels: Partial<Record<import("./index.ts").FilterFieldType, [string, string]>>;
+        directionLabel: string;
+        doneLabel: string;
+    }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
+        P: {};
+        B: {};
+        D: {};
+        C: {};
+        M: {};
+        Defaults: {};
+    }, Readonly<SortMenuProps & {
+        modelValue?: import("./index.ts").ViewSort | null;
+        open?: boolean;
+    }> & Readonly<{
+        "onUpdate:modelValue"?: ((value: import("./index.ts").ViewSort | null) => any) | undefined;
+        "onUpdate:open"?: ((value: boolean) => any) | undefined;
+    }>, {}, {}, {}, {}, {
+        variant: "secondary" | "tinted" | "ghost";
+        as: "button" | "chip";
+        title: string;
+        clearLabel: string;
+        closeLabel: string;
+        buttonLabel: string;
+        status: string;
+        directionLabels: Partial<Record<import("./index.ts").FilterFieldType, [string, string]>>;
+        directionLabel: string;
+        doneLabel: string;
+    }>;
+    __isFragment?: never;
+    __isTeleport?: never;
+    __isSuspense?: never;
+} & import("vue").ComponentOptionsBase<Readonly<SortMenuProps & {
     modelValue?: import("./index.ts").ViewSort | null;
     open?: boolean;
 }> & Readonly<{
     "onUpdate:modelValue"?: ((value: import("./index.ts").ViewSort | null) => any) | undefined;
     "onUpdate:open"?: ((value: boolean) => any) | undefined;
-}>, {
+}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: import("./index.ts").ViewSort | null) => any;
+    "update:open": (value: boolean) => any;
+}, string, {
+    variant: "secondary" | "tinted" | "ghost";
     as: "button" | "chip";
     title: string;
     clearLabel: string;
@@ -473,7 +604,17 @@ export declare const SortControl: import("vue").DefineComponent<SortMenuProps &
     directionLabels: Partial<Record<import("./index.ts").FilterFieldType, [string, string]>>;
     directionLabel: string;
     doneLabel: string;
-}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+}, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
+    $slots: {
+        trigger?: (props: {
+            open: boolean;
+            toggle: () => void;
+            active: boolean;
+            label: string;
+            props: import("./index.ts").FilterTriggerProps;
+        }) => unknown;
+    };
+});
 /** @deprecated Renamed to SortMenuProps. */
 export type SortControlProps = SortMenuProps;
 /** @deprecated Renamed to FormField. */
@@ -484,10 +625,13 @@ export declare const Field: {
         id: string;
         hint: string;
         maxLength: number;
+        softLimit: number;
         layout: "stacked" | "inline";
         optionalLabel: string;
         requiredLabel: string;
         counterLabel: string;
+        softCounterLabel: string;
+        overSoftLabel: string;
     }, false, {}, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, {}, any, import("vue").ComponentProvideOptions, {
         P: {};
         B: {};
@@ -501,10 +645,13 @@ export declare const Field: {
         id: string;
         hint: string;
         maxLength: number;
+        softLimit: number;
         layout: "stacked" | "inline";
         optionalLabel: string;
         requiredLabel: string;
         counterLabel: string;
+        softCounterLabel: string;
+        overSoftLabel: string;
     }>;
     __isFragment?: never;
     __isTeleport?: never;
@@ -515,10 +662,13 @@ export declare const Field: {
     id: string;
     hint: string;
     maxLength: number;
+    softLimit: number;
     layout: "stacked" | "inline";
     optionalLabel: string;
     requiredLabel: string;
     counterLabel: string;
+    softCounterLabel: string;
+    overSoftLabel: string;
 }, {}, string, {}, import("vue").GlobalComponents, import("vue").GlobalDirectives, string, import("vue").ComponentProvideOptions> & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps & (new () => {
     $slots: {
         default?: (props: {

package/dist/components/Avatar/Avatar.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.js","names":["_sfc_main","Avatar_vue_vue_type_script_setup_true_lang_default","Avatar_default"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizes[size], shapeClass, colorClass]\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Avatar.js","names":["_sfc_main","Avatar_vue_vue_type_script_setup_true_lang_default","Avatar_default"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  /** xs 16, sm 24, md 32, lg 40, xl 64; or a number of px, 20 for list rows and activity feeds. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\n// A number of px: the initial steps down with the coin.\nconst sizeClass = computed(() => {\n  if (typeof props.size !== 'number') return sizes[props.size]\n  if (props.size <= 20) return 'text-10'\n  if (props.size <= 28) return 'text-11'\n  return props.size <= 36 ? 'text-xs' : 'text-sm'\n})\nconst sizeStyle = computed(() =>\n  typeof props.size === 'number' ? { width: `${props.size}px`, height: `${props.size}px` } : undefined\n)\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizeClass, shapeClass, colorClass]\"\n    :style=\"sizeStyle\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Avatar/Avatar.vue.d.ts

@@ -2,7 +2,8 @@ import { type Hue } from '../../utils/hues';
 export interface AvatarProps {
     name?: string | null;
     image?: string | null;
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+    /** xs 16, sm 24, md 32, lg 40, xl 64; or a number of px, 20 for list rows and activity feeds. */
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number;
     shape?: 'circle' | 'square';
     /** An attention dot, e.g. unread. */
     badge?: boolean;
@@ -10,7 +11,7 @@ export interface AvatarProps {
     hue?: Hue;
 }
 declare const __VLS_export: import("vue").DefineComponent<AvatarProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<AvatarProps> & Readonly<{}>, {
-    size: "xs" | "sm" | "md" | "lg" | "xl";
+    size: number | "xs" | "sm" | "md" | "lg" | "xl";
     image: string | null;
     name: string | null;
     shape: "circle" | "square";

package/dist/components/Avatar/Avatar.vue_vue_type_script_setup_true_lang.js

@@ -1,10 +1,10 @@
 import { hueFor as e } from "../../utils/hues.js";
-import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, openBlock as c, toDisplayString as l } from "vue";
+import { Fragment as t, computed as n, createCommentVNode as r, createElementBlock as i, createTextVNode as a, defineComponent as o, normalizeClass as s, normalizeStyle as c, openBlock as l, toDisplayString as u } from "vue";
 //#region src/components/Avatar/Avatar.vue?vue&type=script&setup=true&lang.ts
-var u = ["src"], d = {
+var d = ["src"], f = {
 	key: 2,
 	class: "absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface"
-}, f = /*@__PURE__*/ o({
+}, p = /*@__PURE__*/ o({
 	__name: "Avatar",
 	props: {
 		name: { default: void 0 },
@@ -15,13 +15,13 @@ var u = ["src"], d = {
 		hue: { default: void 0 }
 	},
 	setup(o) {
-		let f = o, p = n(() => (f.name || "?").trim().charAt(0).toUpperCase() || "?"), m = {
+		let p = o, m = n(() => (p.name || "?").trim().charAt(0).toUpperCase() || "?"), h = {
 			xs: "h-4 w-4 text-10",
 			sm: "h-6 w-6 text-11",
 			md: "h-8 w-8 text-xs",
 			lg: "h-10 w-10 text-sm",
 			xl: "h-16 w-16 text-2xl"
-		}, h = {
+		}, g = {
 			blue: "border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink",
 			green: "border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink",
 			orange: "border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink",
@@ -31,20 +31,26 @@ var u = ["src"], d = {
 			red: "border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink",
 			amber: "border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink",
 			gray: "border-sui-line bg-sui-sunken text-sui-ink-body"
-		}, g = n(() => f.shape === "square" ? "rounded-lg" : "rounded-full"), _ = n(() => f.image ? "border-sui-line-subtle" : h[f.hue ?? e(f.name)]);
-		return (e, n) => (c(), i("div", { class: s(["relative inline-flex shrink-0 items-center justify-center border font-semibold", [
-			m[o.size],
-			g.value,
-			_.value
-		]]) }, [o.image ? (c(), i("img", {
+		}, _ = n(() => typeof p.size == "number" ? p.size <= 20 ? "text-10" : p.size <= 28 ? "text-11" : p.size <= 36 ? "text-xs" : "text-sm" : h[p.size]), v = n(() => typeof p.size == "number" ? {
+			width: `${p.size}px`,
+			height: `${p.size}px`
+		} : void 0), y = n(() => p.shape === "square" ? "rounded-lg" : "rounded-full"), b = n(() => p.image ? "border-sui-line-subtle" : g[p.hue ?? e(p.name)]);
+		return (e, n) => (l(), i("div", {
+			class: s(["relative inline-flex shrink-0 items-center justify-center border font-semibold", [
+				_.value,
+				y.value,
+				b.value
+			]]),
+			style: c(v.value)
+		}, [o.image ? (l(), i("img", {
 			key: 0,
 			alt: "",
-			class: s(["h-full w-full object-cover", g.value]),
+			class: s(["h-full w-full object-cover", y.value]),
 			src: o.image
-		}, null, 10, u)) : (c(), i(t, { key: 1 }, [a(l(p.value), 1)], 64)), o.badge ? (c(), i("span", d)) : r("", !0)], 2));
+		}, null, 10, d)) : (l(), i(t, { key: 1 }, [a(u(m.value), 1)], 64)), o.badge ? (l(), i("span", f)) : r("", !0)], 6));
 	}
 });
 //#endregion
-export { f as default };
+export { p as default };
 
 //# sourceMappingURL=Avatar.vue_vue_type_script_setup_true_lang.js.map

package/dist/components/Avatar/Avatar.vue_vue_type_script_setup_true_lang.js.map

@@ -1 +1 @@
-{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_Fragment","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","Avatar_vue_vue_type_script_setup_true_lang_default","props","__props","initial","computed","sizes","hues","shapeClass","colorClass","hueFor","openBlock","createElementBlock","normalizeClass","Fragment","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl'\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizes[size], shapeClass, colorClass]\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAgBA,IAAMU,IAAQC,GASRC,IAAUC,SAAgBH,EAAM,QAAQ,IAAA,CAAK,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAElFI,IAAQ;GACZ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAGMC,IAA4B;GAChC,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;EACR,GAEMC,IAAaH,QAAgBH,EAAM,UAAU,WAAW,eAAe,cAAe,GAGtFO,IAAaJ,QAAgBH,EAAM,QAAQ,2BAA2BK,EAAKL,EAAM,OAAOQ,EAAOR,EAAM,IAAI,EAAG;E,kBAIhHV,EAAA,GAAAC,EAUM,OAAA,EATJ,OAAKC,EAAA,CAAC,kFAAgF;GAC7EY,EAAMH,EAAA;GAAOK,EAAA;GAAYC,EAAA;EAAU,CAAA,CAAA,E,IAEjCN,EAAA,SAAXX,EAAA,GAAAC,EAA+F,OAAA;;GAA7E,KAAI;GAAG,OAAKC,EAAA,CAAC,8BAAqCc,EAAA,KAAU,CAAA;GAAG,KAAKL,EAAA;E,oBACtFX,EAAA,GAAAC,EAAyCE,GAAA,EAAA,KAAA,EAAA,GAAA,CAArBC,EAAAC,EAAAO,EAAA,KAAO,GAAA,CAAA,C,SAEnBD,EAAA,SADRX,EAAA,GAAAC,EAGE,QAHFO,CAGE,K"}
+{"version":3,"file":"Avatar.vue_vue_type_script_setup_true_lang.js","names":["_openBlock","_createElementBlock","_normalizeClass","_normalizeStyle","_Fragment","_createTextVNode","_toDisplayString","_createCommentVNode","_hoisted_1","_hoisted_2","Avatar_vue_vue_type_script_setup_true_lang_default","props","__props","initial","computed","sizes","hues","sizeClass","sizeStyle","shapeClass","colorClass","hueFor","openBlock","createElementBlock","normalizeClass","normalizeStyle","Fragment","createTextVNode","toDisplayString","createCommentVNode"],"sources":["../../../src/components/Avatar/Avatar.vue"],"sourcesContent":["<script setup lang=\"ts\">\nimport { computed } from 'vue'\n\nimport { type Hue, hueFor } from '../../utils/hues'\n\nexport interface AvatarProps {\n  name?: string | null\n  image?: string | null\n  /** xs 16, sm 24, md 32, lg 40, xl 64; or a number of px, 20 for list rows and activity feeds. */\n  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | number\n  shape?: 'circle' | 'square'\n  /** An attention dot, e.g. unread. */\n  badge?: boolean\n  /** Pins the colour when it means something; otherwise it comes from the name, stable per person. */\n  hue?: Hue\n}\n\nconst props = withDefaults(defineProps<AvatarProps>(), {\n  name: undefined,\n  image: undefined,\n  size: 'sm',\n  shape: 'circle',\n  hue: undefined\n})\n\n// One uppercased initial reads cleaner than two letters.\nconst initial = computed(() => (props.name || '?').trim().charAt(0).toUpperCase() || '?')\n\nconst sizes = {\n  xs: 'h-4 w-4 text-10',\n  sm: 'h-6 w-6 text-11',\n  md: 'h-8 w-8 text-xs',\n  lg: 'h-10 w-10 text-sm',\n  xl: 'h-16 w-16 text-2xl'\n}\n\n// A soft coin of one hue: tinted fill, saturated text, a hairline of the hue.\nconst hues: Record<Hue, string> = {\n  blue: 'border-sui-hue-blue-line bg-sui-hue-blue-soft text-sui-hue-blue-ink',\n  green: 'border-sui-hue-green-line bg-sui-hue-green-soft text-sui-hue-green-ink',\n  orange: 'border-sui-hue-orange-line bg-sui-hue-orange-soft text-sui-hue-orange-ink',\n  pink: 'border-sui-hue-pink-line bg-sui-hue-pink-soft text-sui-hue-pink-ink',\n  purple: 'border-sui-hue-purple-line bg-sui-hue-purple-soft text-sui-hue-purple-ink',\n  slate: 'border-sui-hue-slate-line bg-sui-hue-slate-soft text-sui-hue-slate-ink',\n  red: 'border-sui-hue-red-line bg-sui-hue-red-soft text-sui-hue-red-ink',\n  amber: 'border-sui-hue-amber-line bg-sui-hue-amber-soft text-sui-hue-amber-ink',\n  gray: 'border-sui-line bg-sui-sunken text-sui-ink-body'\n}\n\n// A number of px: the initial steps down with the coin.\nconst sizeClass = computed(() => {\n  if (typeof props.size !== 'number') return sizes[props.size]\n  if (props.size <= 20) return 'text-10'\n  if (props.size <= 28) return 'text-11'\n  return props.size <= 36 ? 'text-xs' : 'text-sm'\n})\nconst sizeStyle = computed(() =>\n  typeof props.size === 'number' ? { width: `${props.size}px`, height: `${props.size}px` } : undefined\n)\n\nconst shapeClass = computed(() => (props.shape === 'square' ? 'rounded-lg' : 'rounded-full'))\n\n// A photo gets a neutral hairline, so it reads as a crisp coin too.\nconst colorClass = computed(() => (props.image ? 'border-sui-line-subtle' : hues[props.hue ?? hueFor(props.name)]))\n</script>\n\n<template>\n  <div\n    class=\"relative inline-flex shrink-0 items-center justify-center border font-semibold\"\n    :class=\"[sizeClass, shapeClass, colorClass]\"\n    :style=\"sizeStyle\"\n  >\n    <img v-if=\"image\" alt=\"\" class=\"h-full w-full object-cover\" :class=\"shapeClass\" :src=\"image\" />\n    <template v-else>{{ initial }}</template>\n    <span\n      v-if=\"badge\"\n      class=\"absolute -top-0.5 -right-0.5 h-2 w-2 rounded-full bg-sui-accent-solid ring-2 ring-sui-surface\"\n    />\n  </div>\n</template>\n"],"mappings":";;;;;;;;;;;;;;;;;EAiBA,IAAMW,IAAQC,GASRC,IAAUC,SAAgBH,EAAM,QAAQ,IAAA,CAAK,KAAK,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,YAAY,KAAK,GAAG,GAElFI,IAAQ;GACZ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;GACJ,IAAI;EACN,GAGMC,IAA4B;GAChC,MAAM;GACN,OAAO;GACP,QAAQ;GACR,MAAM;GACN,QAAQ;GACR,OAAO;GACP,KAAK;GACL,OAAO;GACP,MAAM;EACR,GAGMC,IAAYH,QACZ,OAAOH,EAAM,QAAS,WACtBA,EAAM,QAAQ,KAAW,YACzBA,EAAM,QAAQ,KAAW,YACtBA,EAAM,QAAQ,KAAK,YAAY,YAHKI,EAAMJ,EAAM,KAIxD,GACKO,IAAYJ,QAChB,OAAOH,EAAM,QAAS,WAAW;GAAE,OAAO,GAAGA,EAAM,KAAK;GAAK,QAAQ,GAAGA,EAAM,KAAK;EAAI,IAAI,KAAA,CAC7F,GAEMQ,IAAaL,QAAgBH,EAAM,UAAU,WAAW,eAAe,cAAe,GAGtFS,IAAaN,QAAgBH,EAAM,QAAQ,2BAA2BK,EAAKL,EAAM,OAAOU,EAAOV,EAAM,IAAI,EAAG;E,kBAIhHX,EAAA,GAAAC,EAWM,OAAA;GAVJ,OAAKC,EAAA,CAAC,kFAAgF;IAC7Ee,EAAA;IAAWE,EAAA;IAAYC,EAAA;GAAU,CAAA,CAAA;GACzC,OAAKjB,EAAEe,EAAA,KAAS;E,IAENN,EAAA,SAAXZ,EAAA,GAAAC,EAA+F,OAAA;;GAA7E,KAAI;GAAG,OAAKC,EAAA,CAAC,8BAAqCiB,EAAA,KAAU,CAAA;GAAG,KAAKP,EAAA;E,oBACtFZ,EAAA,GAAAC,EAAyCG,GAAA,EAAA,KAAA,EAAA,GAAA,CAArBC,EAAAC,EAAAO,EAAA,KAAO,GAAA,CAAA,C,SAEnBD,EAAA,SADRZ,EAAA,GAAAC,EAGE,QAHFQ,CAGE,K"}

package/dist/components/Board/Board.js.map

@@ -1 +1 @@
-{"version":3,"file":"Board.js","names":["_sfc_main","Board_vue_vue_type_script_setup_true_lang_default","Board_default"],"sources":["../../../src/components/Board/Board.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { ref, useId } from 'vue'\n\nimport Icon from '../Icon/Icon.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { BoardColumn } from './types'\n\nexport interface BoardProps<T> {\n  columns: BoardColumn<T>[]\n  /** The item field that identifies it. */\n  rowKey?: keyof T & string\n  /** Cards also reorder within a column, for records that carry a position. */\n  sortable?: boolean\n  /** Columns run to the bottom of the parent and scroll inside it; give the parent a height. False sizes them to their cards. */\n  fill?: boolean\n  loading?: boolean\n  /** The columns' heading level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Adds a dashed \"New\" button at the foot of each column, shown on hover (`@new`). */\n  onNew?: (column: BoardColumn<T>) => void\n  newLabel?: string\n  emptyLabel?: string\n}\n\nconst props = withDefaults(defineProps<BoardProps<T>>(), {\n  rowKey: 'id' as never,\n  fill: true,\n  headingLevel: 3,\n  onNew: undefined,\n  newLabel: 'New',\n  emptyLabel: 'No cards'\n})\n\nconst emit = defineEmits<{\n  'card-click': [item: T]\n  /** A card dropped into a column, at its new index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, column: string, index: number]\n}>()\n\ndefineSlots<{\n  /** A card's content; `item.name` as a title by default. */\n  card?: (props: { item: T; column: BoardColumn<T> }) => unknown\n  /** Replaces a column's count, e.g. its summed deal value. */\n  count?: (props: { column: BoardColumn<T> }) => unknown\n}>()\n\nconst id = useId()\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\n\nconst dragged = ref<{ id: unknown; column: string; index: number } | null>(null)\nconst target = ref<{ column: string; index: number } | null>(null)\n\nfunction onDragStart(event: DragEvent, item: T, column: string, index: number) {\n  if (event.dataTransfer) {\n    event.dataTransfer.effectAllowed = 'move'\n    event.dataTransfer.setData('text/plain', String(idOf(item)))\n  }\n  dragged.value = { id: idOf(item), column, index }\n}\n\nfunction onDragEnd() {\n  dragged.value = null\n  target.value = null\n}\n\nfunction overColumn(event: DragEvent, column: BoardColumn<T>) {\n  if (!dragged.value) return\n  event.preventDefault()\n  if (target.value?.column !== column.id) target.value = { column: column.id, index: column.items.length }\n}\n\n// The card's top half drops before it, the bottom half after.\nfunction overCard(event: DragEvent, column: string, index: number) {\n  if (!dragged.value) return\n  event.preventDefault()\n  event.stopPropagation()\n  const rect = (event.currentTarget as HTMLElement).getBoundingClientRect()\n  const at = event.clientY < rect.top + rect.height / 2 ? index : index + 1\n  if (target.value?.column !== column || target.value.index !== at) target.value = { column, index: at }\n}\n\nfunction onLeave(event: DragEvent) {\n  if (!(event.currentTarget as HTMLElement).contains(event.relatedTarget as Node | null)) target.value = null\n}\n\nfunction onDrop(event: DragEvent, column: BoardColumn<T>) {\n  event.preventDefault()\n  const from = dragged.value\n  if (from) {\n    let index = target.value?.column === column.id ? target.value.index : column.items.length\n    if (from.column === column.id) {\n      // Within a column the dragged card leaves its old slot first.\n      if (index > from.index) index--\n      if (props.sortable && index !== from.index) emit('move', from.id, column.id, index)\n    } else {\n      emit('move', from.id, column.id, index)\n    }\n  }\n  onDragEnd()\n}\n\nfunction onCardKeydown(event: KeyboardEvent, item: T) {\n  if (event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  emit('card-click', item)\n}\n\nconst isTarget = (column: string, index: number, item: T) =>\n  target.value?.column === column && target.value.index === index && dragged.value?.id !== idOf(item)\n</script>\n\n<!-- A board: cards in columns by a field (a stage, a status), dragged between columns. -->\n<template>\n  <div\n    class=\"flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']\"\n    :class=\"fill && 'h-full min-h-0 flex-1'\"\n  >\n    <section\n      v-for=\"column in columns\"\n      :key=\"column.id\"\n      :aria-labelledby=\"`${id}-${column.id}`\"\n      class=\"flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col\"\n    >\n      <header class=\"flex items-center justify-between px-1 pb-2.5\">\n        <component\n          :is=\"`h${headingLevel}`\"\n          :id=\"`${id}-${column.id}`\"\n          class=\"m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink\"\n        >\n          <Icon v-if=\"column.icon\" :color=\"column.iconColor ?? 'ink-subtle'\" :name=\"column.icon\" />\n          {{ column.name }}\n        </component>\n        <span\n          class=\"ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-sunken px-2 text-xs text-sui-ink-muted tabular-nums\"\n        >\n          <slot :column=\"column\" name=\"count\">{{ column.items.length }}</slot>\n        </span>\n      </header>\n      <div\n        class=\"group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl bg-sui-sunken p-2.5 transition-shadow duration-150\"\n        :class=\"target?.column === column.id && 'ring-2 ring-sui-accent-line ring-inset'\"\n        @dragleave=\"onLeave\"\n        @dragover=\"overColumn($event, column)\"\n        @drop=\"onDrop($event, column)\"\n      >\n        <template v-if=\"loading\">\n          <div\n            v-for=\"i in 3\"\n            :key=\"i\"\n            aria-hidden=\"true\"\n            class=\"rounded-xl border border-sui-line-subtle bg-sui-surface p-4\"\n          >\n            <Skeleton class=\"mb-3\" />\n            <Skeleton height=\"0.75rem\" width=\"70%\" />\n          </div>\n        </template>\n        <p\n          v-else-if=\"column.items.length === 0 && !dragged\"\n          class=\"m-0 px-1 py-3 text-center text-13 text-sui-ink-muted\"\n        >\n          {{ emptyLabel }}\n        </p>\n        <ul v-else class=\"m-0 flex list-none flex-col gap-2.5 p-0\">\n          <li v-for=\"(item, index) in column.items\" :key=\"idOf(item) as PropertyKey\">\n            <div\n              class=\"relative cursor-pointer rounded-xl border border-sui-line-subtle bg-sui-surface p-4 outline-hidden transition-[border-color,opacity] duration-150 hover:border-sui-line focus-visible:sui-ring\"\n              :class=\"[\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(column.id, index, item) && 'shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]'\n              ]\"\n              draggable=\"true\"\n              role=\"button\"\n              tabindex=\"0\"\n              @click=\"emit('card-click', item)\"\n              @dragend=\"onDragEnd\"\n              @dragover=\"overCard($event, column.id, index)\"\n              @dragstart=\"onDragStart($event, item, column.id, index)\"\n              @keydown=\"onCardKeydown($event, item)\"\n            >\n              <slot :column=\"column\" :item=\"item\" name=\"card\">\n                <p class=\"m-0 text-sm font-semibold text-sui-ink\">{{ item.name }}</p>\n              </slot>\n            </div>\n          </li>\n        </ul>\n        <button\n          v-if=\"onNew && !loading\"\n          class=\"flex h-9 w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring\"\n          type=\"button\"\n          @click=\"onNew(column)\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-3.5 fill-none stroke-current\"\n            stroke-linecap=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 14 14\"\n          >\n            <path d=\"M7 2.5v9M2.5 7h9\" />\n          </svg>\n          {{ newLabel }}\n        </button>\n      </div>\n    </section>\n  </div>\n</template>\n"],"mappings":""}
+{"version":3,"file":"Board.js","names":["_sfc_main","Board_vue_vue_type_script_setup_true_lang_default","Board_default"],"sources":["../../../src/components/Board/Board.vue"],"sourcesContent":["<script setup lang=\"ts\" generic=\"T extends Record<string, any>\">\nimport { onBeforeUnmount, ref, useId } from 'vue'\n\nimport Icon from '../Icon/Icon.vue'\nimport Skeleton from '../Skeleton/Skeleton.vue'\nimport type { BoardColumn } from './types'\n\nexport interface BoardProps<T> {\n  columns: BoardColumn<T>[]\n  /** The item field that identifies it. */\n  rowKey?: keyof T & string\n  /** Cards also reorder within a column, for records that carry a position. */\n  sortable?: boolean\n  /** Columns run to the bottom of the parent and scroll inside it; give the parent a height. False sizes them to their cards. */\n  fill?: boolean\n  loading?: boolean\n  /** The columns' heading level, to fit the page's outline. */\n  headingLevel?: 2 | 3 | 4 | 5 | 6\n  /** Draws each card's border, padding and surface. False when the `card` slot draws its own. */\n  cardFrame?: boolean\n  /** Makes a card a button that opens on click, Enter and Space (`@card-click`). Without it, the card slot carries its\n   *  own link or buttons. */\n  onCardClick?: (item: T) => void\n  /** Adds a dashed \"New\" button at the foot of each column, shown on hover (`@new`). */\n  onNew?: (column: BoardColumn<T>) => void\n  newLabel?: string\n  emptyLabel?: string\n}\n\nconst props = withDefaults(defineProps<BoardProps<T>>(), {\n  rowKey: 'id' as never,\n  fill: true,\n  headingLevel: 3,\n  cardFrame: true,\n  onCardClick: undefined,\n  onNew: undefined,\n  newLabel: 'New',\n  emptyLabel: 'No cards'\n})\n\nconst emit = defineEmits<{\n  /** A card dropped into a column, at its new index there. Show it moved at once; put it back if saving fails. */\n  move: [id: unknown, column: string, index: number]\n}>()\n\ndefineSlots<{\n  /** A card's content; `item.name` as a title by default. */\n  card?: (props: { item: T; column: BoardColumn<T> }) => unknown\n  /** Replaces a column's count, e.g. its summed deal value. */\n  count?: (props: { column: BoardColumn<T> }) => unknown\n}>()\n\nconst id = useId()\nconst idOf = (item: T): unknown => item[props.rowKey ?? 'id']\nconst root = ref<HTMLElement>()\n\nconst dragged = ref<{ id: unknown; column: string; index: number } | null>(null)\nconst target = ref<{ column: string; index: number } | null>(null)\n\n// Dragging runs on pointer events, so it works with a mouse, a pen and a finger. A mouse drags once it moves a few\n// pixels, so a click still clicks; a finger after a short press, so a swipe still scrolls.\nconst MOUSE_SLOP = 4\nconst TOUCH_SLOP = 8\nconst TOUCH_DELAY = 250\nconst EDGE = 48\n\nlet pending: {\n  item: T\n  column: string\n  index: number\n  x: number\n  y: number\n  card: HTMLElement\n  touch: boolean\n} | null = null\nlet pressTimer: number | undefined\nlet ghost: HTMLElement | null = null\nlet grab = { x: 0, y: 0 }\nlet justDragged = false\n\nfunction onPointerDown(event: PointerEvent, item: T, column: string, index: number) {\n  if (event.button !== 0 || (event.target as HTMLElement).closest('input, textarea, select, [contenteditable]')) return\n  const touch = event.pointerType === 'touch'\n  pending = { item, column, index, x: event.clientX, y: event.clientY, card: event.currentTarget as HTMLElement, touch }\n  if (touch) pressTimer = window.setTimeout(() => pending && start(), TOUCH_DELAY)\n  window.addEventListener('pointermove', onPointerMove)\n  window.addEventListener('pointerup', onPointerUp)\n  window.addEventListener('pointercancel', stop)\n  window.addEventListener('touchmove', holdScroll, { passive: false })\n  window.addEventListener('keydown', onEscape)\n}\n\nfunction start() {\n  if (!pending) return\n  const rect = pending.card.getBoundingClientRect()\n  grab = { x: pending.x - rect.left, y: pending.y - rect.top }\n  ghost = pending.card.cloneNode(true) as HTMLElement\n  ghost.removeAttribute('id')\n  ghost.setAttribute('aria-hidden', 'true')\n  ghost.classList.add('pointer-events-none', 'fixed', 'top-0', 'left-0', 'z-[1300]', 'shadow-lg', 'opacity-95')\n  ghost.style.width = `${rect.width}px`\n  document.body.appendChild(ghost)\n  follow(pending.x, pending.y)\n  dragged.value = { id: idOf(pending.item), column: pending.column, index: pending.index }\n}\n\nfunction onPointerMove(event: PointerEvent) {\n  if (!pending) return\n  if (!dragged.value) {\n    const moved = Math.hypot(event.clientX - pending.x, event.clientY - pending.y)\n    // A finger that moves before the press is long enough is scrolling.\n    if (pending.touch) return moved > TOUCH_SLOP ? stop() : undefined\n    if (moved < MOUSE_SLOP) return\n    start()\n  }\n  event.preventDefault()\n  follow(event.clientX, event.clientY)\n  aim(event.clientX, event.clientY)\n  scrollNear(event.clientX, event.clientY)\n}\n\nfunction follow(x: number, y: number) {\n  if (ghost) ghost.style.transform = `translate(${x - grab.x}px, ${y - grab.y}px) rotate(1.5deg)`\n}\n\n// What's under the pointer: a card's top half drops before it, the bottom half after; an empty spot, at the end.\nfunction aim(x: number, y: number) {\n  const under = document.elementFromPoint(x, y)\n  const body = under?.closest<HTMLElement>('[data-board-column]')\n  if (!body || !root.value?.contains(body)) {\n    target.value = null\n    return\n  }\n  const column = body.dataset.boardColumn!\n  const card = under!.closest<HTMLElement>('[data-board-index]')\n  let index = props.columns.find((c) => c.id === column)?.items.length ?? 0\n  if (card && body.contains(card)) {\n    const rect = card.getBoundingClientRect()\n    index = Number(card.dataset.boardIndex) + (y < rect.top + rect.height / 2 ? 0 : 1)\n  }\n  if (target.value?.column !== column || target.value.index !== index) target.value = { column, index }\n}\n\n// Near a column's top or bottom, or the board's sides, it scrolls that way.\nfunction scrollNear(x: number, y: number) {\n  const body = document.elementFromPoint(x, y)?.closest<HTMLElement>('[data-board-column]')\n  if (body) {\n    const rect = body.getBoundingClientRect()\n    if (y < rect.top + EDGE) body.scrollTop -= 12\n    else if (y > rect.bottom - EDGE) body.scrollTop += 12\n  }\n  const board = root.value?.getBoundingClientRect()\n  if (board && root.value) {\n    if (x < board.left + EDGE) root.value.scrollLeft -= 12\n    else if (x > board.right - EDGE) root.value.scrollLeft += 12\n  }\n}\n\nfunction onPointerUp() {\n  const from = dragged.value\n  const to = target.value\n  if (from && to) {\n    let index = to.index\n    if (from.column === to.column) {\n      // Within a column the dragged card leaves its old slot first.\n      if (index > from.index) index--\n      if (props.sortable && index !== from.index) emit('move', from.id, to.column, index)\n    } else {\n      emit('move', from.id, to.column, index)\n    }\n  }\n  stop()\n}\n\nfunction holdScroll(event: TouchEvent) {\n  if (dragged.value) event.preventDefault()\n}\n\nfunction onEscape(event: KeyboardEvent) {\n  if (event.key === 'Escape' && dragged.value) {\n    event.preventDefault()\n    stop()\n  }\n}\n\nfunction stop() {\n  window.clearTimeout(pressTimer)\n  window.removeEventListener('pointermove', onPointerMove)\n  window.removeEventListener('pointerup', onPointerUp)\n  window.removeEventListener('pointercancel', stop)\n  window.removeEventListener('touchmove', holdScroll)\n  window.removeEventListener('keydown', onEscape)\n  ghost?.remove()\n  ghost = null\n  // The click that ends a drag isn't a click on the card.\n  if (dragged.value) {\n    justDragged = true\n    window.setTimeout(() => (justDragged = false))\n  }\n  pending = null\n  dragged.value = null\n  target.value = null\n}\n\nonBeforeUnmount(stop)\n\nfunction clickCard(event: MouseEvent, item: T) {\n  if (justDragged) {\n    event.preventDefault()\n    event.stopPropagation()\n    return\n  }\n  props.onCardClick?.(item)\n}\n\nfunction onCardKeydown(event: KeyboardEvent, item: T) {\n  if (!props.onCardClick || event.target !== event.currentTarget || (event.key !== 'Enter' && event.key !== ' ')) return\n  event.preventDefault()\n  props.onCardClick(item)\n}\n\nconst isTarget = (column: string, index: number, item: T) =>\n  target.value?.column === column && target.value.index === index && dragged.value?.id !== idOf(item)\n\nconst frame =\n  'border border-sui-line-subtle bg-sui-surface p-4 transition-[border-color,opacity] duration-150 hover:border-sui-line'\n</script>\n\n<!-- A board: cards in columns by a field (a stage, a status), dragged between columns. -->\n<template>\n  <div\n    ref=\"root\"\n    class=\"flex items-stretch gap-5 overflow-x-auto pb-2 after:w-1 after:shrink-0 after:content-['']\"\n    :class=\"fill && 'h-full min-h-0 flex-1'\"\n  >\n    <section\n      v-for=\"column in columns\"\n      :key=\"column.id\"\n      :aria-labelledby=\"`${id}-${column.id}`\"\n      class=\"flex min-h-0 w-full max-w-xs min-w-[16rem] shrink-0 flex-col\"\n    >\n      <header class=\"flex items-center justify-between px-1 pb-2.5\">\n        <component\n          :is=\"`h${headingLevel}`\"\n          :id=\"`${id}-${column.id}`\"\n          class=\"m-0 flex items-center gap-2 text-sm font-semibold text-sui-ink\"\n        >\n          <Icon v-if=\"column.icon\" :color=\"column.iconColor ?? 'ink-subtle'\" :name=\"column.icon\" />\n          {{ column.name }}\n        </component>\n        <span\n          class=\"ml-2 inline-flex h-5 items-center justify-center rounded-full bg-sui-sunken px-2 text-xs text-sui-ink-muted tabular-nums\"\n        >\n          <slot :column=\"column\" name=\"count\">{{ column.items.length }}</slot>\n        </span>\n      </header>\n      <div\n        class=\"group/body flex min-h-[120px] flex-1 flex-col gap-2.5 overflow-y-auto rounded-xl bg-sui-sunken p-2.5 transition-shadow duration-150\"\n        :class=\"target?.column === column.id && 'ring-2 ring-sui-accent-line ring-inset'\"\n        :data-board-column=\"column.id\"\n      >\n        <template v-if=\"loading\">\n          <div\n            v-for=\"i in 3\"\n            :key=\"i\"\n            aria-hidden=\"true\"\n            class=\"rounded-xl border border-sui-line-subtle bg-sui-surface p-4\"\n          >\n            <Skeleton class=\"mb-3\" />\n            <Skeleton height=\"0.75rem\" width=\"70%\" />\n          </div>\n        </template>\n        <p\n          v-else-if=\"column.items.length === 0 && !dragged\"\n          class=\"m-0 px-1 py-3 text-center text-13 text-sui-ink-muted\"\n        >\n          {{ emptyLabel }}\n        </p>\n        <ul v-else class=\"m-0 flex list-none flex-col gap-2.5 p-0\">\n          <li v-for=\"(item, index) in column.items\" :key=\"idOf(item) as PropertyKey\">\n            <div\n              class=\"relative rounded-xl outline-hidden transition-opacity duration-150 select-none\"\n              :class=\"[\n                cardFrame && frame,\n                onCardClick && 'cursor-pointer focus-visible:sui-ring',\n                dragged?.id === idOf(item) && 'opacity-40',\n                isTarget(column.id, index, item) && 'shadow-[0_-6px_0_-4px_rgb(var(--sui-accent-solid))]'\n              ]\"\n              :data-board-index=\"index\"\n              :role=\"onCardClick ? 'button' : undefined\"\n              :tabindex=\"onCardClick ? 0 : undefined\"\n              @click.capture=\"clickCard($event, item)\"\n              @contextmenu=\"dragged && $event.preventDefault()\"\n              @dragstart.prevent\n              @keydown=\"onCardKeydown($event, item)\"\n              @pointerdown=\"onPointerDown($event, item, column.id, index)\"\n            >\n              <slot :column=\"column\" :item=\"item\" name=\"card\">\n                <p class=\"m-0 text-sm font-semibold text-sui-ink\">{{ item.name }}</p>\n              </slot>\n            </div>\n          </li>\n        </ul>\n        <button\n          v-if=\"onNew && !loading\"\n          class=\"flex h-9 w-full shrink-0 items-center justify-center gap-1.5 rounded-lg border border-dashed border-sui-line-strong text-xs font-medium text-sui-ink-muted opacity-0 outline-hidden transition-all duration-150 group-hover/body:opacity-100 hover:border-sui-ink-muted hover:bg-sui-surface/60 hover:text-sui-ink-body focus-visible:opacity-100 focus-visible:sui-ring\"\n          type=\"button\"\n          @click=\"onNew(column)\"\n        >\n          <svg\n            aria-hidden=\"true\"\n            class=\"size-3.5 fill-none stroke-current\"\n            stroke-linecap=\"round\"\n            stroke-width=\"1.5\"\n            viewBox=\"0 0 14 14\"\n          >\n            <path d=\"M7 2.5v9M2.5 7h9\" />\n          </svg>\n          {{ newLabel }}\n        </button>\n      </div>\n    </section>\n  </div>\n</template>\n"],"mappings":""}

package/dist/components/Board/Board.vue.d.ts

@@ -10,6 +10,11 @@ export interface BoardProps<T> {
     loading?: boolean;
     /** The columns' heading level, to fit the page's outline. */
     headingLevel?: 2 | 3 | 4 | 5 | 6;
+    /** Draws each card's border, padding and surface. False when the `card` slot draws its own. */
+    cardFrame?: boolean;
+    /** Makes a card a button that opens on click, Enter and Space (`@card-click`). Without it, the card slot carries its
+     *  own link or buttons. */
+    onCardClick?: (item: T) => void;
     /** Adds a dashed "New" button at the foot of each column, shown on hover (`@new`). */
     onNew?: (column: BoardColumn<T>) => void;
     newLabel?: string;
@@ -17,7 +22,6 @@ export interface BoardProps<T> {
 }
 declare const __VLS_export: <T extends Record<string, any>>(__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<BoardProps<T> & {
-        "onCard-click"?: ((item: T) => any) | undefined;
         onMove?: ((id: unknown, column: string, index: number) => any) | undefined;
     }> & (typeof globalThis extends {
         __VLS_PROPS_FALLBACK: infer P;
@@ -35,7 +39,7 @@ declare const __VLS_export: <T extends Record<string, any>>(__VLS_props: NonNull
             column: BoardColumn<T>;
         }) => unknown;
     };
-    emit: ((evt: "card-click", item: T) => void) & ((evt: "move", id: unknown, column: string, index: number) => void);
+    emit: (evt: "move", id: unknown, column: string, index: number) => void;
 }>) => import("vue").VNode & {
     __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };