@widgetic/design-system 0.5.21 → 0.5.23

package/dist/components/modals/BaseModal.svelte.d.ts

@@ -25,7 +25,10 @@ declare const BaseModal: $$__sveltets_2_IsomorphicComponent<{
     enableSpaceKey?: boolean;
     isSelected?: boolean;
     showScroll?: boolean;
+    shown?: boolean;
+    animateSize?: boolean;
     closeLabel?: string;
+    bare?: boolean;
     children: any;
 }, {
     click: PointerEvent;

package/dist/components/modals/NewItemDialog.svelte

@@ -1,248 +1,205 @@
 <script lang="ts">
-  // Svelte imports
-  import { createEventDispatcher } from 'svelte';
-  const dispatch = createEventDispatcher();
-
-  // Design system imports
-  import { Button } from '../ui/button';
-  import { Input } from '../ui/input';
-  import { toast } from '../ui/sonner';
-  // Import BaseModal as a default import using relative path, similar to RenameDialog
-  import BaseModal from './BaseModal.svelte';
-  
-  // Words of the dialog and the helper that puts values into them
-  import type { NewItemDialogMessages } from './messages';
-  import { fillMessage } from '../../utils/fillMessage';
-
-  // What a name may be made of: letters, numbers and white space of any script (see utils/itemName)
-  import { findItemNameProblem, isValidItemName, keepAllowedNameCharacters } from '../../utils/itemName';
-
-  // Props
-  let className = '';
-  export { className as class };
-  export let style: string = '';
-  //
-  export let isOpen = false;
-  export let title = ''; // Make title optional
-  export let showTitle = true; // Whether to show a title at all
-  export let itemType = "item"; // "folder", "file", "project", etc.
-  export let placeholder = `${itemType} name...`;
-  export let target: string = 'new-item-dialog'; // target for Portal
-  export let currentPath: string[] = [];
-  export let currentPathNames: string[] = [];
-  export let confirmLabel = "Create";
-  export let cancelLabel = "Cancel";
-  // The words a screen reader says for the close button (see BaseModal)
-  export let closeLabel = "Close modal";
-  // The words of the validation errors; a key that is left out keeps its English text (see ./messages)
-  export let messages: Partial<NewItemDialogMessages> = {};
-  export let modalType: string = "newItem";
-  export let modalWidth = "410px";
-  export let modalHeight = "168px";
-  export let maxLength = 200;
-  export let modalData: Record<string, any> = {};
-
-  // Local state
-  let itemName = '';
-  let isValid = false;
-  let hasAttemptedSubmit = false; // Track if user has attempted to submit
-  let currentError = ''; // Real-time validation error
-
-  // Compute title based on itemType if not provided
-  $: displayTitle = title || `New ${itemType.charAt(0).toUpperCase() + itemType.slice(1)}`;
-
-  // The words of the validation errors: the page's own, or English built from the item type ("Folder name is required")
-  $: itemTypeCapitalized = itemType.charAt(0).toUpperCase() + itemType.slice(1);
-  $: text = {
-    invalidTitle: messages.invalidTitle ?? `Invalid ${itemType} name`,
-    required: messages.required ?? `${itemTypeCapitalized} name is required`,
-    invalidCharacters:
-      messages.invalidCharacters ?? `${itemTypeCapitalized} name can only contain letters, numbers, and spaces`,
-    tooLong: fillMessage(
-      messages.tooLong ?? `${itemTypeCapitalized} name cannot exceed {max} characters`,
-      { max: maxLength }
-    )
-  };
-
-  $: if (isOpen) {
-    itemName = '';
-    hasAttemptedSubmit = false;
-    currentError = '';
-  }
-
-  $: {
-    const trimmedName = itemName.trim();
-    isValid = trimmedName.length > 0 && itemName.length <= maxLength && isValidItemName(trimmedName);
-    
-    // Update real-time error message
-    if (itemName.length > 0) {
-      if (itemName.length > maxLength) {
-        currentError = text.tooLong;
-      } else {
-        const nameProblem = findItemNameProblem(trimmedName);
-        currentError = nameProblem ? text[nameProblem] : '';
-      }
-    } else {
-      currentError = '';
-    }
-  }
-
-  function handleSubmit() {
-    hasAttemptedSubmit = true;
-    
-    // Validate name format
-    const nameProblem = findItemNameProblem(itemName);
-    if (nameProblem) {
-      toast.error(text.invalidTitle, {
-        description: text[nameProblem]
-      });
-      return;
-    }
-    
-    if (itemName.length > maxLength) {
-      // Show error toast for name too long
-      toast.error(text.invalidTitle, {
-        description: text.tooLong
-      });
-      return;
-    }
-    
-    // console.log(`Creating ${itemType}:`, { itemName, path: currentPath });
-    dispatch('create', { itemName: itemName.trim(), path: currentPath });
-    handleClose();
-  }
-
-  // Only allow letters, numbers, and spaces (of any script): anything else typed or pasted is dropped
-  function keepAllowedCharacters(inputElement: HTMLInputElement) {
-    inputElement.value = keepAllowedNameCharacters(inputElement.value);
-    itemName = inputElement.value;
-  }
-
-  function handleClose() {
-    isOpen = false;
-    itemName = '';
-    isValid = false;
-    hasAttemptedSubmit = false;
-    currentError = '';
-    dispatch('cancel');
-  }
-
-  // Combine the custom modal data with our required path info
-  $: combinedModalData = { 
-    ...modalData,
-    currentPath, 
-    currentPathNames 
-  };
+	// Svelte imports
+	import { createEventDispatcher } from 'svelte';
+	const dispatch = createEventDispatcher();
+
+	// Design system imports
+	import { Button } from '../ui/button';
+	import { Input } from '../ui/input';
+	let inputElement: HTMLInputElement | null = null;
+	import { toast } from '../ui/sonner';
+	// Import BaseModal as a default import using relative path, similar to RenameDialog
+	import BaseModal from './BaseModal.svelte';
+
+	// Words of the dialog and the helper that puts values into them
+	import type { NewItemDialogMessages } from './messages';
+	import { fillMessage } from '../../utils/fillMessage';
+
+	// What a name may be made of: letters, numbers and white space of any script (see utils/itemName)
+	import {
+		findItemNameProblem,
+		isValidItemName,
+		keepAllowedNameCharacters
+	} from '../../utils/itemName';
+
+	// Props
+	let className = '';
+	export { className as class };
+	export let style: string = '';
+	//
+	export let isOpen = false;
+	export let title = ''; // Make title optional
+	export let showTitle = true; // Whether to show a title at all
+	export let itemType = 'item'; // "folder", "file", "project", etc.
+	export let placeholder = `${itemType} name…`;
+	export let target: string = 'new-item-dialog'; // target for Portal
+	export let currentPath: string[] = [];
+	export let currentPathNames: string[] = [];
+	export let confirmLabel = 'Create';
+	export let cancelLabel = 'Cancel';
+	// The words a screen reader says for the close button (see BaseModal)
+	export let closeLabel = 'Close modal';
+	// The words of the validation errors; a key that is left out keeps its English text (see ./messages)
+	export let messages: Partial<NewItemDialogMessages> = {};
+	export let modalType: string = 'newItem';
+	export let modalWidth = '400px';
+	export let modalHeight = 'auto';
+	export let maxLength = 200;
+	export let modalData: Record<string, any> = {};
+
+	// Local state
+	let itemName = '';
+	let isValid = false;
+	let hasAttemptedSubmit = false; // Track if user has attempted to submit
+	let currentError = ''; // Real-time validation error
+
+	// Compute title based on itemType if not provided
+	$: displayTitle = title || `New ${itemType.charAt(0).toUpperCase() + itemType.slice(1)}`;
+
+	// The words of the validation errors: the page's own, or English built from the item type ("Folder name is required")
+	$: itemTypeCapitalized = itemType.charAt(0).toUpperCase() + itemType.slice(1);
+	$: text = {
+		invalidTitle: messages.invalidTitle ?? `Invalid ${itemType} name`,
+		required: messages.required ?? `${itemTypeCapitalized} name is required`,
+		invalidCharacters:
+			messages.invalidCharacters ??
+			`${itemTypeCapitalized} name can only contain letters, numbers, and spaces`,
+		tooLong: fillMessage(
+			messages.tooLong ?? `${itemTypeCapitalized} name cannot exceed {max} characters`,
+			{ max: maxLength }
+		)
+	};
+
+	$: if (isOpen) {
+		itemName = '';
+		hasAttemptedSubmit = false;
+		currentError = '';
+	}
+
+	$: {
+		const trimmedName = itemName.trim();
+		isValid =
+			trimmedName.length > 0 && itemName.length <= maxLength && isValidItemName(trimmedName);
+
+		// Update real-time error message
+		if (itemName.length > 0) {
+			if (itemName.length > maxLength) {
+				currentError = text.tooLong;
+			} else {
+				const nameProblem = findItemNameProblem(trimmedName);
+				currentError = nameProblem ? text[nameProblem] : '';
+			}
+		} else {
+			currentError = '';
+		}
+	}
+
+	function handleSubmit() {
+		hasAttemptedSubmit = true;
+
+		// Validate name format
+		const nameProblem = findItemNameProblem(itemName);
+		if (nameProblem) {
+			toast.error(text.invalidTitle, {
+				description: text[nameProblem]
+			});
+			return;
+		}
+
+		if (itemName.length > maxLength) {
+			// Show error toast for name too long
+			toast.error(text.invalidTitle, {
+				description: text.tooLong
+			});
+			return;
+		}
+
+		// console.log(`Creating ${itemType}:`, { itemName, path: currentPath });
+		dispatch('create', { itemName: itemName.trim(), path: currentPath });
+		handleClose();
+	}
+
+	// Only allow letters, numbers, and spaces (of any script): anything else typed or pasted is dropped
+	function keepAllowedCharacters(inputElement: HTMLInputElement) {
+		inputElement.value = keepAllowedNameCharacters(inputElement.value);
+		itemName = inputElement.value;
+	}
+
+	function handleClose() {
+		isOpen = false;
+		itemName = '';
+		isValid = false;
+		hasAttemptedSubmit = false;
+		currentError = '';
+		dispatch('cancel');
+	}
+
+	// Combine the custom modal data with our required path info
+	$: combinedModalData = {
+		...modalData,
+		currentPath,
+		currentPathNames
+	};
 </script>
 
-<BaseModal 
-  bind:open={isOpen} 
-  on:close={handleClose}
-  width={modalWidth}
-  height={modalHeight}
-  {modalType}
-  modalData={combinedModalData}
-  title={showTitle ? displayTitle : undefined}
-  {closeLabel}
-  {target}
-  on:restore={(event: CustomEvent<any>) => {
-    if (event.detail) {
-      if (event.detail.currentPath) currentPath = event.detail.currentPath;
-      if (event.detail.currentPathNames) currentPathNames = event.detail.currentPathNames;
-    }
-  }}
+<BaseModal
+	bind:open={isOpen}
+	on:close={handleClose}
+	width={modalWidth}
+	height={modalHeight}
+	{modalType}
+	modalData={combinedModalData}
+	title={showTitle ? displayTitle : undefined}
+	{closeLabel}
+	{target}
+	on:restore={(event: CustomEvent<any>) => {
+		if (event.detail) {
+			if (event.detail.currentPath) currentPath = event.detail.currentPath;
+			if (event.detail.currentPathNames) currentPathNames = event.detail.currentPathNames;
+		}
+	}}
 >
-  <div class="{className ? `${className} ` : ''}new-item-dialog-container h-full flex flex-col min-h-[136px] justify-between" style={style}>
-    <div class="flex flex-col items-center pt-6">
-      <!-- Replace Input component with native input to match RenameDialog styling -->
-      <input 
-        type="text"
-        bind:value={itemName}
-        onkeydown={(e) => {
-          if (e.key === 'Escape') {
-            handleClose();
-          } else {
-            e.stopPropagation(); // Stop all keyboard events except Escape from bubbling up
-            if (e.key === 'Enter') {
-              e.preventDefault();
-              handleSubmit();
-            }
-          }
-        }}
-        oninput={(e) => {
-          const target = e.target as HTMLInputElement;
-          // An input method (Japanese, Chinese, Korean...) is still building a word: changing the field now would
-          // cancel the word. It is checked when the word is committed, in oncompositionend.
-          if ('isComposing' in e && e.isComposing) {
-            itemName = target.value;
-            return;
-          }
-          keepAllowedCharacters(target);
-        }}
-        oncompositionend={(e) => keepAllowedCharacters(e.target as HTMLInputElement)}
-        onfocus={(e) => {
-          const target = e.target as HTMLInputElement;
-          target.placeholder = "";
-        }}
-        onblur={(e) => {
-          const target = e.target as HTMLInputElement;
-          target.placeholder = placeholder;
-        }}
-        required
-        class="w-full h5 text-[24px] text-[hsl(var(--grey7))] text-center
-               bg-transparent border-none focus:outline-hidden focus:ring-0
-               placeholder:text-[24px] placeholder:text-[hsl(var(--grey3))]
-               {currentError ? 'input-error' : ''}"
-        placeholder={placeholder}
-        maxlength={maxLength}
-        data-min-length="1"
-      />
-      {#if currentError}
-        <div class="text-xs text-[hsl(var(--error))] mt-1 text-center">
-          {currentError}
-        </div>
-      {/if}
-    </div>
-
-    <div class="buttons-container flex justify-center gap-4">
-      <Button 
-        type="button" 
-        variant="secondary"
-        class="modal-btn-secondary !rounded-[100px] !h-[34px]" 
-        onclick={handleClose}
-      >
-        {cancelLabel}
-      </Button>
-      <Button 
-        type="submit" 
-        class="modal-btn-primary !rounded-[100px] !h-[34px]"
-        onclick={handleSubmit}
-        disabled={!isValid}
-      >
-        {confirmLabel}
-      </Button>
-    </div>
-  </div>
+	<div
+		class="{className ? `${className} ` : ''}new-item-dialog-container flex flex-col gap-4"
+		{style}
+	>
+		<div class="flex flex-col gap-1.5">
+			<Input
+				bind:ref={inputElement}
+				bind:value={itemName}
+				{placeholder}
+				maxlength={maxLength}
+				aria-invalid={Boolean(currentError)}
+				class={currentError ? 'border-destructive' : ''}
+				onkeydown={(e) => {
+					if (e.key === 'Escape') {
+						handleClose();
+					} else {
+						e.stopPropagation();
+						if (e.key === 'Enter') {
+							e.preventDefault();
+							handleSubmit();
+						}
+					}
+				}}
+				oninput={(e) => {
+					const target = e.currentTarget;
+					if ('isComposing' in e && e.isComposing) {
+						itemName = target.value;
+						return;
+					}
+					keepAllowedCharacters(target);
+				}}
+				oncompositionend={(e) => keepAllowedCharacters(e.currentTarget)}
+			/>
+			{#if currentError}
+				<p class="text-caption text-destructive">{currentError}</p>
+			{/if}
+		</div>
+
+		<div class="flex justify-end gap-2">
+			<Button type="button" variant="outline" onclick={handleClose}>{cancelLabel}</Button>
+			<Button type="submit" onclick={handleSubmit} disabled={!isValid}>{confirmLabel}</Button>
+		</div>
+	</div>
 </BaseModal>
-
-<style>
-  @keyframes pulse-subtle {
-    0%, 100% { opacity: 0; }
-    50% { opacity: 0.1; }
-  }
-
-  :global(.animate-pulse-subtle) {
-    animation: pulse-subtle 2s ease-in-out infinite;
-  }
-
-  :global(.input-error) {
-    animation: shake 0.4s ease-in-out;
-    border-bottom: 1px solid hsl(var(--error)) !important;
-  }
-
-  @keyframes shake {
-    0%, 100% { transform: translateX(0); }
-    25% { transform: translateX(-5px); }
-    75% { transform: translateX(5px); }
-  }
-</style>