urpanels-ui-pack 0.0.4 → 0.0.10

package/dist/InputCheckboxModal/InputCheckboxModal.svelte

@@ -0,0 +1,235 @@
+<script lang="ts">
+import { tick } from 'svelte';
+import Modal from '../Modal/Modal.svelte';
+import InputText from '../inputs/InputText/InputText.svelte';
+import type { Snippet } from 'svelte';
+
+interface Props<T = any> {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    items?: T[];
+    selectedItems?: T[];
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyMessage?: string;
+    onConfirm?: (selectedItems: T[]) => void;
+    onClose?: () => void;
+    color?: 'blue' | 'emerald' | 'red' | 'amber' | 'gray';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    renderItem?: Snippet<[T]>;
+    searchFunction?: (item: T, searchTerm: string) => boolean;
+    getItemId?: (item: T) => string | number;
+    confirmText?: string;
+    keepOpenOnConfirm?: boolean;
+}
+
+let {
+    open = $bindable(false),
+    title = 'Öğe Seç',
+    description = 'Listeden bir veya daha fazla öğe seçin',
+    items = [],
+    selectedItems = $bindable([]),
+    searchPlaceholder = 'Ara...',
+    searchLabel = 'Ara',
+    emptyMessage = 'Öğe bulunamadı',
+    onConfirm = () => {},
+    onClose = () => {},
+    color = 'blue',
+    size = '2xl',
+    renderItem,
+    searchFunction,
+    getItemId,
+    confirmText = 'Seçilenleri Onayla',
+    keepOpenOnConfirm = false
+}: Props = $props();
+
+let searchTerm = $state('');
+let tempSelected: any[] = $state([]);
+let isConfirming = $state(false);
+
+// Test: keepOpenOnConfirm aktifken kapanmayı engelle
+$effect(() => {
+    if (keepOpenOnConfirm && !open) {
+        open = true;
+    }
+});
+
+// Default ID getter
+const defaultGetItemId = (item: any): string | number => {
+    return item?.id ?? item?._id ?? JSON.stringify(item);
+};
+
+const itemIdGetter = getItemId || defaultGetItemId;
+
+// Initialize temp selected when modal opens
+$effect(() => {
+    if (open) {
+        tempSelected = [...(selectedItems || [])];
+    }
+});
+
+const defaultSearchFunction = (item: any, term: string): boolean => {
+    if (!term?.trim()) return true;
+    const searchLower = term.toLowerCase().trim();
+    const searchableFields = Object.values(item).filter(
+        (v) => typeof v === 'string'
+    );
+    return searchableFields.some((field) =>
+        (field as string).toLowerCase().includes(searchLower)
+    );
+};
+
+const filteredItems = $derived(() => {
+    if (!searchTerm?.trim()) return items;
+    const filterFn = searchFunction || defaultSearchFunction;
+    return items.filter((item) => filterFn(item, searchTerm));
+});
+
+const isSelected = (item: any): boolean => {
+    const itemId = itemIdGetter(item);
+    return tempSelected.some(sel => itemIdGetter(sel) === itemId);
+};
+
+const toggleSelection = (item: any) => {
+    const itemId = itemIdGetter(item);
+    const index = tempSelected.findIndex(sel => itemIdGetter(sel) === itemId);
+    
+    if (index > -1) {
+        // Remove from selection
+        tempSelected = tempSelected.filter((_, i) => i !== index);
+    } else {
+        // Add to selection
+        tempSelected = [...tempSelected, item];
+    }
+};
+
+const handleConfirm = async () => {
+    if (isConfirming) return;
+    isConfirming = true;
+    try {
+        await tick();
+        selectedItems = [...tempSelected];
+        await onConfirm(tempSelected);
+        searchTerm = '';
+        if (!keepOpenOnConfirm) {
+            open = false;
+        }
+    } finally {
+        isConfirming = false;
+    }
+};
+
+const handleClose = () => {
+    searchTerm = '';
+    tempSelected = [...(selectedItems || [])]; // Reset to original
+    onClose();
+    open = false;
+};
+</script>
+
+<Modal
+    {open}
+    {title}
+    {description}
+    onClose={handleClose}
+    {size}
+    {color}
+    cancelText="İptal"
+    confirmText={confirmText}
+    onCancel={handleClose}
+    onConfirm={handleConfirm}
+    confirmLoading={isConfirming}
+    confirmDisabled={isConfirming}
+>
+    {#snippet children()}
+        <div class="space-y-4">
+            <!-- Search Input -->
+            <div>
+                <InputText
+                    label={searchLabel}
+                    bind:value={searchTerm}
+                    placeholder={searchPlaceholder}
+                />
+            </div>
+
+            <!-- Selected Count -->
+            {#if tempSelected.length > 0}
+                <div class="space-y-3">
+                    <div class="text-sm text-{color}-600 font-medium">
+                        {tempSelected.length} öğe seçildi
+                    </div>
+                    
+                    <!-- Selected Items Display -->
+                    <div class="flex flex-wrap gap-2 p-3 bg-{color}-50 rounded-lg border border-{color}-200">
+                        {#each tempSelected as selectedItem}
+                            <span class="inline-flex items-center gap-1.5 px-3 py-1.5 bg-{color}-100 text-{color}-700 rounded-full text-sm font-medium">
+                                {#if renderItem}
+                                    <span class="truncate max-w-32">
+                                        {#if typeof selectedItem === 'object' && selectedItem !== null}
+                                            {selectedItem.username || selectedItem.ad || selectedItem.name || selectedItem.title || 'Öğe'}
+                                        {:else}
+                                            {selectedItem}
+                                        {/if}
+                                    </span>
+                                {:else}
+                                    <span class="truncate max-w-32">
+                                        {#if typeof selectedItem === 'object' && selectedItem !== null}
+                                            {selectedItem.username || selectedItem.ad || selectedItem.name || selectedItem.title || 'Öğe'}
+                                        {:else}
+                                            {selectedItem}
+                                        {/if}
+                                    </span>
+                                {/if}
+                                <button
+                                    type="button"
+                                    onclick={() => toggleSelection(selectedItem)}
+                                    class="ml-1 w-4 h-4 rounded-full bg-{color}-200 hover:bg-{color}-300 flex items-center justify-center transition-colors"
+                                    aria-label="Kaldır"
+                                >
+                                    <svg class="w-3 h-3 text-{color}-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"/>
+                                    </svg>
+                                </button>
+                            </span>
+                        {/each}
+                    </div>
+                </div>
+            {/if}
+
+            <!-- Items List -->
+            <div class="max-h-96 overflow-y-auto space-y-2">
+                {#if filteredItems().length === 0}
+                    <div class="text-center py-8 text-gray-500">
+                        <svg class="w-16 h-16 mx-auto mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <p>{emptyMessage}</p>
+                    </div>
+                {:else}
+                    {#each filteredItems() as item}
+                        <label
+                            class="flex items-start gap-3 p-4 rounded-xl border border-gray-200 hover:border-{color}-500 hover:bg-{color}-50 transition-all cursor-pointer {isSelected(item) ? 'bg-' + color + '-50 border-' + color + '-500' : ''}"
+                        >
+                            <input
+                                type="checkbox"
+                                checked={isSelected(item)}
+                                onchange={() => toggleSelection(item)}
+                                class="mt-1 w-4 h-4 text-{color}-600 border-gray-300 rounded focus:ring-{color}-500"
+                            />
+                            <div class="flex-1 min-w-0">
+                                {#if renderItem}
+                                    {@render renderItem(item)}
+                                {:else}
+                                    <div class="text-gray-900 font-medium">
+                                        {JSON.stringify(item)}
+                                    </div>
+                                {/if}
+                            </div>
+                        </label>
+                    {/each}
+                {/if}
+            </div>
+        </div>
+    {/snippet}
+</Modal>

package/dist/InputCheckboxModal/InputCheckboxModal.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Snippet } from 'svelte';
+interface Props<T = any> {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    items?: T[];
+    selectedItems?: T[];
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyMessage?: string;
+    onConfirm?: (selectedItems: T[]) => void;
+    onClose?: () => void;
+    color?: 'blue' | 'emerald' | 'red' | 'amber' | 'gray';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    renderItem?: Snippet<[T]>;
+    searchFunction?: (item: T, searchTerm: string) => boolean;
+    getItemId?: (item: T) => string | number;
+    confirmText?: string;
+    keepOpenOnConfirm?: boolean;
+}
+declare const InputCheckboxModal: import("svelte").Component<Props<any>, {}, "open" | "selectedItems">;
+type InputCheckboxModal = ReturnType<typeof InputCheckboxModal>;
+export default InputCheckboxModal;

package/dist/InputCheckboxModal/index.d.ts

@@ -0,0 +1 @@
+export { default as InputCheckboxModal } from './InputCheckboxModal.svelte';

package/dist/InputCheckboxModal/index.js

@@ -0,0 +1 @@
+export { default as InputCheckboxModal } from './InputCheckboxModal.svelte';

package/dist/InputSelectModal/InputSelectModal.svelte

@@ -0,0 +1,118 @@
+<script lang="ts">
+import Modal from '../Modal/Modal.svelte';
+import InputText from '../inputs/InputText/InputText.svelte';
+import type { Snippet } from 'svelte';
+
+interface Props<T = any> {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    items?: T[];
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyMessage?: string;
+    onSelect?: (item: T) => void;
+    onClose?: () => void;
+    color?: 'blue' | 'emerald' | 'red' | 'amber' | 'gray';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    renderItem?: Snippet<[T]>;
+    searchFunction?: (item: T, searchTerm: string) => boolean;
+}
+
+let {
+    open = $bindable(false),
+    title = 'Öğe Seç',
+    description = 'Listeden bir öğe seçin',
+    items = [],
+    searchPlaceholder = 'Ara...',
+    searchLabel = 'Ara',
+    emptyMessage = 'Öğe bulunamadı',
+    onSelect = () => {},
+    onClose = () => {},
+    color = 'emerald',
+    size = '2xl',
+    renderItem,
+    searchFunction
+}: Props = $props();
+
+let searchTerm = $state('');
+
+const defaultSearchFunction = (item: any, term: string): boolean => {
+    if (!term?.trim()) return true;
+    const searchLower = term.toLowerCase().trim();
+    const searchableFields = Object.values(item).filter(
+        (v) => typeof v === 'string'
+    );
+    return searchableFields.some((field) =>
+        (field as string).toLowerCase().includes(searchLower)
+    );
+};
+
+const filteredItems = $derived(() => {
+    if (!searchTerm?.trim()) return items;
+    const filterFn = searchFunction || defaultSearchFunction;
+    return items.filter((item) => filterFn(item, searchTerm));
+});
+
+const handleSelect = (item: any) => {
+    onSelect(item);
+    searchTerm = '';
+};
+
+const handleClose = () => {
+    searchTerm = '';
+    onClose();
+};
+</script>
+
+<Modal
+    {open}
+    {title}
+    {description}
+    onClose={handleClose}
+    {size}
+    {color}
+    cancelText="Kapat"
+    onCancel={handleClose}
+>
+    {#snippet children()}
+        <div class="space-y-4" data-component-name="InputSelectModal">
+            <!-- Search Input -->
+            <div>
+                <InputText
+                    label={searchLabel}
+                    bind:value={searchTerm}
+                    placeholder={searchPlaceholder}
+                />
+            </div>
+
+            <!-- Items List -->
+            <div class="max-h-96 overflow-y-auto space-y-2">
+                {#if filteredItems().length === 0}
+                    <div class="text-center py-8 text-gray-500">
+                        <svg class="w-16 h-16 mx-auto mb-3 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.172 16.172a4 4 0 015.656 0M9 10h.01M15 10h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"/>
+                        </svg>
+                        <p>{emptyMessage}</p>
+                    </div>
+                {:else}
+                    {#each filteredItems() as item}
+                        <button
+                            type="button"
+                            onclick={() => handleSelect(item)}
+                            class="w-full text-left p-4 rounded-xl border border-gray-200 hover:border-{color}-500 hover:bg-{color}-50 transition-all group"
+                        >
+                            {#if renderItem}
+                                {@render renderItem(item)}
+                            {:else}
+                                <div class="text-gray-900 font-medium">
+                                    {JSON.stringify(item)}
+                                </div>
+                            {/if}
+                        </button>
+                    {/each}
+                {/if}
+            </div>
+        </div>
+    {/snippet}
+</Modal>

package/dist/InputSelectModal/InputSelectModal.svelte.d.ts

@@ -0,0 +1,19 @@
+import type { Snippet } from 'svelte';
+interface Props<T = any> {
+    open?: boolean;
+    title?: string;
+    description?: string;
+    items?: T[];
+    searchPlaceholder?: string;
+    searchLabel?: string;
+    emptyMessage?: string;
+    onSelect?: (item: T) => void;
+    onClose?: () => void;
+    color?: 'blue' | 'emerald' | 'red' | 'amber' | 'gray';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl';
+    renderItem?: Snippet<[T]>;
+    searchFunction?: (item: T, searchTerm: string) => boolean;
+}
+declare const InputSelectModal: import("svelte").Component<Props<any>, {}, "open">;
+type InputSelectModal = ReturnType<typeof InputSelectModal>;
+export default InputSelectModal;

package/dist/InputSelectModal/index.d.ts

@@ -0,0 +1 @@
+export { default as InputSelectModal } from './InputSelectModal.svelte';

package/dist/InputSelectModal/index.js

@@ -0,0 +1 @@
+export { default as InputSelectModal } from './InputSelectModal.svelte';

package/dist/LoadingSpinner/LoadingSpinner.svelte

@@ -1,3 +1,3 @@
-<div class="flex items-center justify-center py-12">
+<div class="flex items-center justify-center py-12" data-component-name="LoadingSpinner">
   <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
 </div>

package/dist/Modal/Modal.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { tick } from 'svelte';
   import type { Snippet } from 'svelte';
 
   interface Props {
@@ -12,6 +13,13 @@
     onClose?: () => void;
     children?: Snippet;
     actions?: Snippet;
+    // Otomatik buton props
+    cancelText?: string;
+    confirmText?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
   }
 
   let {
@@ -24,9 +32,31 @@
     showClose = true,
     onClose,
     children,
-    actions
+    actions,
+    cancelText,
+    confirmText,
+    onCancel,
+    onConfirm,
+    confirmDisabled = false,
+    confirmLoading = false
   }: Props = $props();
 
+  let internalLoading = false;
+
+  const isBusy = () => confirmLoading || internalLoading;
+
+  const handleConfirm = async () => {
+    if (confirmDisabled || isBusy()) return;
+    internalLoading = true;
+    try {
+      await tick();
+      await new Promise((resolve) => setTimeout(resolve, 250));
+      await onConfirm?.();
+    } finally {
+      internalLoading = false;
+    }
+  };
+
   // Modal açıkken body scroll'u kapat
   $effect(() => {
     if (open) {
@@ -62,6 +92,18 @@
     purple: 'from-purple-600 to-indigo-600',
     gray: 'from-gray-600 to-slate-600'
   };
+
+  // Buton renkleri (confirm button için)
+  const buttonColors: Record<string, string> = {
+    blue: 'bg-blue-600 hover:bg-blue-700',
+    green: 'bg-green-600 hover:bg-green-700',
+    emerald: 'bg-emerald-600 hover:bg-emerald-700',
+    teal: 'bg-teal-600 hover:bg-teal-700',
+    amber: 'bg-amber-500 hover:bg-amber-600',
+    red: 'bg-red-600 hover:bg-red-700',
+    purple: 'bg-purple-600 hover:bg-purple-700',
+    gray: 'bg-gray-600 hover:bg-gray-700'
+  };
 </script>
 
 {#if open}
@@ -71,6 +113,7 @@
     class="fixed inset-0 z-50 flex items-center justify-center bg-black/50 backdrop-blur-sm"
     role="dialog"
     aria-modal="true"
+    data-component-name="Modal"
     onclick={(e) => e.target === e.currentTarget && onClose?.()}
   >
     <div
@@ -113,9 +156,38 @@
 
       <!-- Footer Actions -->
       {#if actions}
-        <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 shrink-0">
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 shrink-0 flex items-center justify-end gap-3">
           {@render actions()}
         </div>
+      {:else if cancelText || confirmText}
+        <div class="px-6 py-4 bg-gray-50 border-t border-gray-100 shrink-0 flex items-center justify-end gap-3">
+          {#if cancelText}
+            <button
+              type="button"
+              onclick={onCancel || onClose}
+              disabled={isBusy()}
+              class="rounded-lg border border-gray-300 bg-white px-4 py-2 text-gray-700 hover:bg-gray-100 hover:border-gray-400 disabled:opacity-50 disabled:cursor-not-allowed transition-all duration-200"
+            >
+              {cancelText}
+            </button>
+          {/if}
+          {#if confirmText}
+            <button
+              type="button"
+              onclick={handleConfirm}
+              disabled={confirmDisabled || isBusy()}
+              class="rounded-lg {buttonColors[color]} px-4 py-2 text-white disabled:opacity-50 disabled:cursor-not-allowed flex items-center gap-2 transition-all duration-200 shadow-sm hover:shadow-md active:scale-95"
+            >
+              {#if isBusy()}
+                <svg class="h-4 w-4 animate-spin" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
+                  <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
+                  <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v4a4 4 0 00-4 4H4z"></path>
+                </svg>
+              {/if}
+              {confirmText}
+            </button>
+          {/if}
+        </div>
       {/if}
     </div>
   </div>

package/dist/Modal/Modal.svelte.d.ts

@@ -4,11 +4,18 @@ interface Props {
     title: string;
     description?: string;
     icon?: string;
-    color?: 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'gray';
-    size?: 'sm' | 'md' | 'lg';
+    color?: 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'gray' | 'emerald' | 'teal';
+    size?: 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
     showClose?: boolean;
     onClose?: () => void;
+    children?: Snippet;
     actions?: Snippet;
+    cancelText?: string;
+    confirmText?: string;
+    onCancel?: () => void;
+    onConfirm?: () => void;
+    confirmDisabled?: boolean;
+    confirmLoading?: boolean;
 }
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {

package/dist/PageLayout/ActionButton.svelte

@@ -1,11 +1,15 @@
 <script lang="ts">
+  import type { Snippet } from 'svelte';
+  
   interface Props {
     label: string;
     onclick: () => void;
     color?: 'green' | 'blue' | 'red' | 'gray';
+    showDefaultIcon?: boolean;
+    icon?: Snippet;
   }
 
-  let { label, onclick, color = 'green' }: Props = $props();
+  let { label, onclick, color = 'green', showDefaultIcon = true, icon }: Props = $props();
 
   const colorClasses = {
     green: 'bg-green-500 hover:bg-green-600',
@@ -19,8 +23,12 @@
   class="p-2 md:px-4 md:py-2 {colorClasses[color]} text-white rounded-lg transition-colors flex items-center justify-center gap-2"
   {onclick}
 >
-  <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
-  </svg>
+  {#if icon}
+    {@render icon()}
+  {:else if showDefaultIcon}
+    <svg class="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 4v16m8-8H4" />
+    </svg>
+  {/if}
   <span class="hidden md:inline text-sm font-semibold">{label}</span>
 </button>

package/dist/PageLayout/PageContent.svelte

@@ -10,7 +10,7 @@
   let { children, isLoading = false }: Props = $props();
 </script>
 
-<div class="px-4 sm:px-6 pb-6">
+<div class="px-4 sm:px-6 pb-6" data-component-name="PageContent">
   {#if isLoading}
     <LoadingSpinner />
   {:else}