@immich/ui 0.42.3 → 0.44.0

package/dist/common/context.svelte.d.ts

@@ -8,5 +8,6 @@ export declare const getFieldContext: () => {
     invalid: boolean;
     readOnly: boolean;
     required: boolean;
+    requiredIndicator: boolean;
     disabled: boolean;
 };

package/dist/common/context.svelte.js

@@ -4,6 +4,6 @@ const fieldKey = Symbol(withPrefix('field'));
 export const setFieldContext = (field) => setContext(fieldKey, field);
 export const hasFieldContext = () => hasContext(fieldKey);
 export const getFieldContext = () => {
-    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, disabled = false, description, } = getContext(fieldKey) || {};
-    return { label, description, color, invalid, readOnly, required, disabled };
+    const { label, color = 'secondary', invalid = false, readOnly = false, required = false, requiredIndicator = false, disabled = false, description, } = getContext(fieldKey) || {};
+    return { label, description, color, invalid, readOnly, required, requiredIndicator, disabled };
 };

package/dist/components/ContextMenu/ContextMenu.svelte

@@ -4,7 +4,7 @@
   import { zIndex } from '../../constants.js';
   import { styleVariants } from '../../styles.js';
   import { MenuItemType, type ContextMenuProps, type MenuItem } from '../../types.js';
-  import { cleanClass } from '../../utilities/internal.js';
+  import { cleanClass, isEnabled } from '../../utilities/internal.js';
   import { DropdownMenu } from 'bits-ui';
   import { fly } from 'svelte/transition';
   import { tv } from 'tailwind-variants';
@@ -83,6 +83,11 @@
     }
   };
 
+  const filteredItems = $derived(
+    items.filter((item) => item !== undefined).filter((item) => isDivider(item) || isEnabled(item)),
+  );
+  const filteredBottomItems = $derived(bottomItems?.filter((item) => item !== undefined).filter(isEnabled));
+
   const alignOffset = $derived(target.clientWidth / 2);
   const sideOffset = $derived(-target.clientHeight / 2);
   const { side, align } = $derived(getAlignment(position));
@@ -95,7 +100,7 @@
         {#if open}
           <div {...wrapperProps} class={zIndex.ContextMenu}>
             <div {...props} {...restProps} class={cleanClass(wrapperStyles({ size }), className)} transition:fly>
-              {#each items as item, i (isDivider(item) ? i : item.title)}
+              {#each filteredItems as item, i (isDivider(item) ? i : item.title)}
                 {#if isDivider(item)}
                   <DropdownMenu.Separator class="my-0.5 border-t" />
                 {:else}
@@ -113,10 +118,10 @@
                 {/if}
               {/each}
 
-              {#if bottomItems}
+              {#if filteredBottomItems}
                 <DropdownMenu.Separator class="my-0.5 border-t" />
                 <div class="flex gap-1 px-1">
-                  {#each bottomItems as item (item.title)}
+                  {#each filteredBottomItems as item (item.title)}
                     <DropdownMenu.Item
                       textValue={item.title}
                       closeOnSelect

package/dist/components/Label/Label.svelte

@@ -4,7 +4,7 @@
   import { cleanClass } from '../../utilities/internal.js';
   import { tv } from 'tailwind-variants';
 
-  const { label, size, color, class: className, children, ...restProps }: LabelProps = $props();
+  const { label, size, color, class: className, children, requiredIndicator, ...restProps }: LabelProps = $props();
 
   const styles = tv({
     base: '',
@@ -15,7 +15,13 @@
   });
 </script>
 
-<label class={cleanClass(styles({ size, color }), className)} {...restProps}>
-  {#if label}{label}{/if}
-  {@render children?.()}
-</label>
+<div class="inline-block">
+  <label class={cleanClass(styles({ size, color }), className)} {...restProps}>
+    {#if label}{label}{/if}
+    {@render children?.()}
+  </label>
+
+  {#if requiredIndicator}
+    <span aria-hidden="true" class="text-danger">*</span>
+  {/if}
+</div>

package/dist/internal/Button.svelte

@@ -36,7 +36,7 @@
   const disabled = $derived((restProps as HTMLButtonAttributes).disabled || loading);
 
   const buttonVariants = tv({
-    base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium whitespace-nowrap transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
+    base: 'ring-offset-background focus-visible:ring-ring flex items-center justify-center gap-1 rounded-md text-sm font-medium transition-colors focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-none',
     variants: {
       disabled: {
         true: 'disabled:pointer-events-none disabled:opacity-50 aria-disabled:opacity-50',

package/dist/services/command-palette-manager.svelte.d.ts

@@ -1,5 +1,5 @@
 import { type Shortcut } from '../actions/shortcut.js';
-import type { MaybeArray, TranslationProps } from '../types.js';
+import type { IfLike, MaybeArray, TranslationProps } from '../types.js';
 export type CommandItem = {
     icon: string;
     iconClass?: string;
@@ -12,7 +12,7 @@ export type CommandItem = {
         ignoreInputFields?: boolean;
         preventDefault?: boolean;
     };
-} & ({
+} & IfLike & ({
     href: string;
 } | {
     action: (command: CommandItem) => void;

package/dist/services/command-palette-manager.svelte.js

@@ -1,7 +1,7 @@
 import { goto } from '$app/navigation';
 import { matchesShortcut, shortcuts, shouldIgnoreEvent } from '../actions/shortcut.js';
 import CommandPaletteModal from '../internal/CommandPaletteModal.svelte';
-import { generateId } from '../utilities/internal.js';
+import { generateId, isEnabled } from '../utilities/internal.js';
 import { modalManager } from './modal-manager.svelte.js';
 export const asText = (...items) => {
     return items
@@ -26,9 +26,9 @@ class CommandPaletteManager {
     #isOpen = false;
     #globalLayer = $state({ items: [], recentItems: [] });
     #layers = $state([{ items: [], recentItems: [] }]);
-    items = $derived([...this.#globalLayer.items, ...this.#layers.at(-1).items]);
+    items = $derived([...this.#globalLayer.items, ...this.#layers.at(-1).items].filter(isEnabled));
     filteredItems = $derived(this.items.filter((item) => isMatch(item, this.#normalizedQuery)).slice(0, 100));
-    recentItems = $derived([...this.#globalLayer.recentItems, ...this.#layers.at(-1).recentItems]);
+    recentItems = $derived([...this.#globalLayer.recentItems, ...this.#layers.at(-1).recentItems].filter(isEnabled));
     results = $derived(this.query ? this.filteredItems : this.recentItems);
     get isEnabled() {
         return this.#isEnabled;

package/dist/types.d.ts

@@ -96,6 +96,7 @@ export type LabelProps = {
     class?: string;
     size?: Size;
     color?: TextColor;
+    requiredIndicator?: boolean;
     children?: Snippet;
 } & HTMLLabelAttributes;
 export type FieldContext = {
@@ -104,6 +105,7 @@ export type FieldContext = {
     invalid?: boolean;
     disabled?: boolean;
     required?: boolean;
+    requiredIndicator?: boolean;
     readOnly?: boolean;
 } & LabelProps;
 type BaseInputProps<T> = {
@@ -213,14 +215,14 @@ export type MenuItem = {
     icon: IconLike;
     color?: Color;
     onSelect?: MenuSelectHandler;
-};
+} & IfLike;
 export declare enum MenuItemType {
     Divider = "divider"
 }
-export type MenuItems = Array<MenuItem | MenuItemType>;
+export type MenuItems = Array<MenuItem | MenuItemType | undefined>;
 export type MenuProps = {
     items: MenuItems;
-    bottomItems?: MenuItem[];
+    bottomItems?: (MenuItem | undefined)[];
     size?: MenuSize;
 } & HTMLAttributes<HTMLDivElement>;
 export type ContextMenuPosition = 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right';
@@ -231,4 +233,7 @@ export type ContextMenuBaseProps = MenuProps & {
 export type ContextMenuProps = ContextMenuBaseProps & {
     onClose: () => void;
 };
+export type IfLike = {
+    $if?: () => boolean;
+};
 export {};

package/dist/utilities/internal.d.ts

@@ -1,4 +1,4 @@
-import type { Color, IconLike, TextColor } from '../types.js';
+import type { Color, IconLike, IfLike, TextColor } from '../types.js';
 export declare const cleanClass: (...classNames: unknown[]) => string;
 export declare const withPrefix: (key: string) => string;
 export declare const generateId: () => string;
@@ -9,3 +9,4 @@ export declare const resolveIcon: ({ icons, color, override, fallback, }: {
     override?: IconLike | false;
     icons: Partial<Record<Color | TextColor, string>>;
 }) => IconLike | undefined;
+export declare const isEnabled: ({ $if }: IfLike) => boolean;

package/dist/utilities/internal.js

@@ -24,3 +24,4 @@ export const resolveIcon = ({ icons, color, override, fallback, }) => {
     }
     return icons[color] ?? fallback;
 };
+export const isEnabled = ({ $if }) => $if?.() ?? true;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@immich/ui",
-  "version": "0.42.3",
+  "version": "0.44.0",
   "license": "GNU Affero General Public License version 3",
   "repository": {
     "type": "git",