urpanels-ui-pack 0.0.10 → 0.0.11

package/dist/DataTableLite/DataTableLite.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+  export type TableColumn = {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+  };
+
+  interface Props {
+    columns: TableColumn[];
+    rows: Record<string, any>[];
+    rowKey?: string;
+    emptyText?: string;
+  }
+
+  let { columns = [], rows = [], rowKey = 'id', emptyText = '-' }: Props = $props();
+
+  const alignClass = (align?: string) => {
+    if (align === 'center') return 'text-center';
+    if (align === 'right') return 'text-right';
+    return 'text-left';
+  };
+</script>
+
+<div class="overflow-x-auto" data-component-name="DataTableLite">
+  <table class="min-w-full border-collapse">
+    <thead>
+      <tr>
+        {#each columns as col}
+          <th class="px-3 py-2.5 text-xs font-semibold text-gray-700 bg-gray-50 border-b border-gray-200 {alignClass(col.align)}" style:width={col.width || undefined}>
+            {col.label}
+          </th>
+        {/each}
+      </tr>
+    </thead>
+    <tbody>
+      {#if rows.length === 0}
+        <tr>
+          <td colspan={columns.length} class="px-3 py-6 text-center text-sm text-gray-400">
+            {emptyText}
+          </td>
+        </tr>
+      {:else}
+        {#each rows as row (row[rowKey] || Math.random())}
+          <tr class="hover:bg-gray-50">
+            {#each columns as col}
+              <td class="px-3 py-2.5 text-sm text-gray-800 border-b border-gray-100 {alignClass(col.align)}">
+                {row[col.key] ?? '-'}
+              </td>
+            {/each}
+          </tr>
+        {/each}
+      {/if}
+    </tbody>
+  </table>
+</div>

package/dist/DataTableLite/DataTableLite.svelte.d.ts

@@ -0,0 +1,15 @@
+export type TableColumn = {
+    key: string;
+    label: string;
+    align?: 'left' | 'center' | 'right';
+    width?: string;
+};
+interface Props {
+    columns: TableColumn[];
+    rows: Record<string, any>[];
+    rowKey?: string;
+    emptyText?: string;
+}
+declare const DataTableLite: import("svelte").Component<Props, {}, "">;
+type DataTableLite = ReturnType<typeof DataTableLite>;
+export default DataTableLite;

package/dist/DataTableLite/index.d.ts

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

package/dist/DataTableLite/index.js

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

package/dist/FilterBar/FilterBar.svelte

@@ -0,0 +1,124 @@
+<script lang="ts">
+  import type { FilterGroup, ActiveFilters } from './types';
+  import { t } from '../utils/translations.svelte';
+
+  interface Props {
+    /** Array of filter group definitions */
+    groups: FilterGroup[];
+    /** Current active filter values (bindable) */
+    activeFilters?: ActiveFilters;
+    /** Called when any filter changes */
+    onFilterChange?: (filters: ActiveFilters) => void;
+    /** Compact mode - smaller chips */
+    compact?: boolean;
+  }
+
+  let { 
+    groups, 
+    activeFilters = $bindable({}), 
+    onFilterChange, 
+    compact = false 
+  }: Props = $props();
+
+  function isActive(groupKey: string, optionValue: string): boolean {
+    const current = activeFilters[groupKey];
+    if (current === null || current === undefined) return false;
+    if (Array.isArray(current)) return current.includes(optionValue);
+    return current === optionValue;
+  }
+
+  function isAllActive(groupKey: string): boolean {
+    const current = activeFilters[groupKey];
+    return current === null || current === undefined;
+  }
+
+  function handleSelect(group: FilterGroup, optionValue: string) {
+    if (group.type === 'single') {
+      // Single select: toggle between this option and "all"
+      if (activeFilters[group.key] === optionValue) {
+        activeFilters[group.key] = null;
+      } else {
+        activeFilters[group.key] = optionValue;
+      }
+    } else {
+      // Multi select: toggle option in array
+      const current = activeFilters[group.key];
+      let arr: string[] = Array.isArray(current) ? [...current] : [];
+      
+      if (arr.includes(optionValue)) {
+        arr = arr.filter(v => v !== optionValue);
+      } else {
+        arr.push(optionValue);
+      }
+      
+      activeFilters[group.key] = arr.length > 0 ? arr : null;
+    }
+    
+    onFilterChange?.(activeFilters);
+  }
+
+  function handleSelectAll(groupKey: string) {
+    activeFilters[groupKey] = null;
+    onFilterChange?.(activeFilters);
+  }
+</script>
+
+<div class="flex flex-wrap gap-3" data-component-name="FilterBar">
+  {#each groups as group}
+    <div class="flex items-center gap-1.5">
+      {#if group.label}
+        <span class="text-xs font-medium text-gray-500 mr-1 hidden sm:inline">{group.label}:</span>
+      {/if}
+      
+      <div class="flex flex-wrap items-center bg-gray-100 rounded-xl p-1 {compact ? 'gap-0.5' : 'gap-1'}">
+        <!-- "All" option -->
+        {#if group.allLabel !== null}
+          <button
+            onclick={() => handleSelectAll(group.key)}
+            class="
+              {compact ? 'px-2.5 py-1.5 text-xs' : 'px-3 py-1.5 text-sm'}
+              rounded-lg font-medium transition-all cursor-pointer
+              {isAllActive(group.key) 
+                ? 'bg-white text-blue-600 shadow-sm' 
+                : 'text-gray-600 hover:text-gray-900'}
+            "
+          >
+            {group.allLabel || t('common.all') || 'Tümü'}
+          </button>
+        {/if}
+
+        <!-- Filter options -->
+        {#each group.options as option}
+          <button
+            onclick={() => handleSelect(group, option.value)}
+            class="
+              flex items-start gap-1.5 text-left
+              {compact ? 'px-2.5 py-1.5 text-xs' : 'px-3 py-1.5 text-sm'}
+              max-w-[10rem] sm:max-w-[14rem]
+              rounded-lg font-medium transition-all cursor-pointer
+              {isActive(group.key, option.value) 
+                ? 'bg-white text-blue-600 shadow-sm' 
+                : 'text-gray-600 hover:text-gray-900'}
+            "
+          >
+            {#if option.icon}
+              <span class="text-sm">{option.icon}</span>
+            {/if}
+            <span class="whitespace-normal break-words leading-tight">{option.label}</span>
+            {#if option.count !== undefined}
+              <span class="
+                {compact ? 'text-[10px] px-1' : 'text-xs px-1.5'} 
+                py-0.5 rounded-full
+                {isActive(group.key, option.value) 
+                  ? 'bg-blue-100 text-blue-700' 
+                  : 'bg-gray-200 text-gray-600'}
+              ">
+                {option.count}
+              </span>
+            {/if}
+          </button>
+        {/each}
+      </div>
+    </div>
+  {/each}
+</div>

package/dist/FilterBar/FilterBar.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { FilterGroup, ActiveFilters } from './types';
+interface Props {
+    /** Array of filter group definitions */
+    groups: FilterGroup[];
+    /** Current active filter values (bindable) */
+    activeFilters?: ActiveFilters;
+    /** Called when any filter changes */
+    onFilterChange?: (filters: ActiveFilters) => void;
+    /** Compact mode - smaller chips */
+    compact?: boolean;
+}
+declare const FilterBar: import("svelte").Component<Props, {}, "activeFilters">;
+type FilterBar = ReturnType<typeof FilterBar>;
+export default FilterBar;

package/dist/FilterBar/index.d.ts

@@ -0,0 +1,2 @@
+export { default as FilterBar } from './FilterBar.svelte';
+export type { FilterGroup, FilterOption, ActiveFilters } from './types';

package/dist/FilterBar/index.js

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

package/dist/FilterBar/types.d.ts

@@ -0,0 +1,35 @@
+/**
+ * A single filter option within a filter group
+ */
+export interface FilterOption {
+    /** Unique value for this option */
+    value: string;
+    /** Display label */
+    label: string;
+    /** Optional icon (emoji or SVG path) */
+    icon?: string;
+    /** Optional count badge */
+    count?: number;
+}
+/**
+ * A group of related filter options
+ * Each group represents a filter dimension (e.g., type, category, status)
+ */
+export interface FilterGroup {
+    /** Unique key for this filter group (used in activeFilters map) */
+    key: string;
+    /** Display label for the group */
+    label?: string;
+    /** Available options */
+    options: FilterOption[];
+    /** Selection mode: single = radio-like, multi = checkbox-like */
+    type: 'single' | 'multi';
+    /** Custom label for the "all" option. Set to null to hide "all" option (only for multi) */
+    allLabel?: string | null;
+}
+/**
+ * Map of active filter values
+ * key = FilterGroup.key
+ * value = null (all), string (single selection), string[] (multi selection)
+ */
+export type ActiveFilters = Record<string, string | string[] | null>;

package/dist/FilterBar/types.js

@@ -0,0 +1 @@
+export {};

package/dist/ImageEditorModal/ImageEditorModal.svelte

@@ -0,0 +1,330 @@
+<script lang="ts">
+  import { untrack } from 'svelte';
+  import Modal from '../Modal/Modal.svelte';
+  import { t } from '../utils/translations.svelte';
+
+  type ModalColor = 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'gray' | 'emerald' | 'teal';
+  type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+
+  export interface ImageEditorSavePayload {
+    dataUrl: string;
+    imageData: any;
+    designState: any;
+  }
+
+  interface Props {
+    show?: boolean;
+    onClose?: () => void;
+    onReady?: () => void;
+    onSave?: (payload: ImageEditorSavePayload) => Promise<void> | void;
+    initialImageUrl?: string;
+    color?: ModalColor;
+    size?: ModalSize;
+    zIndex?: number;
+    title?: string;
+    description?: string;
+    filerobotOptions?: Record<string, any>;
+  }
+
+  let {
+    show = $bindable(false),
+    onClose,
+    onReady,
+    onSave,
+    initialImageUrl = '',
+    color = 'blue',
+    size = '3xl',
+    zIndex = 70,
+    title = t('imageEditor.title', 'Image Editor'),
+    description = t('imageEditor.description', 'Crop and adjust your image before saving'),
+    filerobotOptions = {}
+  }: Props = $props();
+
+  let editorHost: HTMLDivElement | null = $state(null);
+  let editorInstance: any = $state(null);
+  let isInitializing = $state(false);
+  let isSaving = $state(false);
+  let editorError = $state('');
+
+  const FILEROBOT_CDN_URL = 'https://scaleflex.cloudimg.io/v7/plugins/filerobot-image-editor/latest/filerobot-image-editor.min.js';
+  const FILEROBOT_LOAD_TIMEOUT_MS = 12000;
+
+  function getFilerobotGlobal(): any {
+    return typeof window !== 'undefined' ? (window as any).FilerobotImageEditor : undefined;
+  }
+
+  async function waitForFilerobotGlobal(timeoutMs: number): Promise<any> {
+    const start = Date.now();
+
+    return new Promise<any>((resolve, reject) => {
+      const tick = () => {
+        const globalRef = getFilerobotGlobal();
+        if (globalRef) {
+          resolve(globalRef);
+          return;
+        }
+
+        if (Date.now() - start >= timeoutMs) {
+          reject(new Error('Image editor script load timed out. Please check internet/CSP and retry.'));
+          return;
+        }
+
+        setTimeout(tick, 120);
+      };
+
+      tick();
+    });
+  }
+
+  async function injectFilerobotScript(): Promise<any> {
+    await new Promise<void>((resolve, reject) => {
+      const script = document.createElement('script');
+      const timeout = window.setTimeout(() => {
+        script.remove();
+        reject(new Error('Image editor script load timed out.'));
+      }, FILEROBOT_LOAD_TIMEOUT_MS);
+
+      script.src = FILEROBOT_CDN_URL;
+      script.async = true;
+      script.defer = true;
+      script.dataset.filerobot = '1';
+      script.onload = () => {
+        window.clearTimeout(timeout);
+        resolve();
+      };
+      script.onerror = () => {
+        window.clearTimeout(timeout);
+        script.remove();
+        reject(new Error('Image editor script failed to load.'));
+      };
+      document.head.appendChild(script);
+    });
+
+    return waitForFilerobotGlobal(FILEROBOT_LOAD_TIMEOUT_MS);
+  }
+
+  async function ensureFilerobotLoaded(): Promise<any> {
+    const existing = getFilerobotGlobal();
+    if (existing) return existing;
+
+    if (typeof document === 'undefined') {
+      throw new Error('Filerobot can only be initialized in browser');
+    }
+
+    const currentScript = document.querySelector(`script[data-filerobot="1"]`) as HTMLScriptElement | null;
+    if (currentScript) {
+      try {
+        return await waitForFilerobotGlobal(FILEROBOT_LOAD_TIMEOUT_MS);
+      } catch {
+        // Recover from stale/broken script tag by re-injecting.
+        currentScript.remove();
+      }
+    }
+
+    return injectFilerobotScript();
+  }
+
+  function cleanupEditor(): void {
+    if (!editorInstance) return;
+    try {
+      editorInstance.terminate?.();
+    } catch (error) {
+      console.warn('[ImageEditorModal] terminate failed', error);
+    } finally {
+      editorInstance = null;
+    }
+  }
+
+  function closeModal(): void {
+    cleanupEditor();
+    editorError = '';
+    show = false;
+    onClose?.();
+  }
+
+  async function handleSave(): Promise<void> {
+    const inst = editorInstance;
+    if (!inst || isSaving || isInitializing || !onSave) return;
+
+    isSaving = true;
+    editorError = '';
+
+    try {
+      // Detect format from original image URL
+      const urlExt = initialImageUrl.split('.').pop()?.toLowerCase()?.split('?')[0] || 'png';
+      const extension = ['jpg', 'jpeg', 'png', 'webp', 'gif', 'bmp'].includes(urlExt) ? urlExt : 'png';
+      const mimeType = extension === 'jpg' || extension === 'jpeg' ? 'image/jpeg' : `image/${extension}`;
+      const quality = (extension === 'jpg' || extension === 'jpeg' || extension === 'webp') ? 0.92 : undefined;
+
+      let dataUrl = '';
+      let imageData: any = null;
+      let designState: any = {};
+
+      // Use VanillaJS bridge getCurrentImgData — applies all operations (crop, rotate, etc.)
+      if (typeof inst.getCurrentImgData === 'function') {
+        const result = inst.getCurrentImgData(
+          { extension, quality: quality ?? 0.92 },
+          4,    // pixelRatio
+          false // keepLoadingSpinnerShown
+        );
+        imageData = result?.imageData || result;
+        designState = result?.designState || {};
+        dataUrl = extractDataUrl(imageData, mimeType, quality);
+      }
+
+      // Fallback: grab the processed canvas from editor DOM
+      if (!dataUrl && editorHost) {
+        const canvases = editorHost.querySelectorAll('canvas');
+        // Take the last canvas which is typically the output
+        const canvas = canvases[canvases.length - 1] as HTMLCanvasElement | null;
+        if (canvas) {
+          dataUrl = canvas.toDataURL(mimeType, quality);
+        }
+      }
+
+      if (!dataUrl) {
+        editorError = t('imageEditor.saveError', 'Edited image data is empty');
+        return;
+      }
+
+      await onSave({ dataUrl, imageData, designState });
+      closeModal();
+    } catch (error) {
+      editorError = error instanceof Error ? error.message : t('common.error', 'An error occurred');
+    } finally {
+      isSaving = false;
+    }
+  }
+
+  function extractDataUrl(imageData: any, mimeType?: string, quality?: number): string {
+    if (typeof imageData?.imageBase64 === 'string' && imageData.imageBase64.startsWith('data:image/')) {
+      return imageData.imageBase64;
+    }
+
+    if (typeof imageData?.base64 === 'string' && imageData.base64.startsWith('data:image/')) {
+      return imageData.base64;
+    }
+
+    if (imageData?.imageCanvas?.toDataURL) {
+      return imageData.imageCanvas.toDataURL(mimeType || 'image/png', quality);
+    }
+
+    if (imageData?.canvas?.toDataURL) {
+      return imageData.canvas.toDataURL(mimeType || 'image/png', quality);
+    }
+
+    return '';
+  }
+
+  $effect(() => {
+    if (!show) {
+      untrack(() => cleanupEditor());
+      editorError = '';
+      isInitializing = false;
+      return;
+    }
+
+    if (!editorHost || !initialImageUrl) {
+      return;
+    }
+
+    let cancelled = false;
+
+    const initializeEditor = async () => {
+      untrack(() => cleanupEditor());
+      isInitializing = true;
+      editorError = '';
+
+      try {
+        const moduleRef = await ensureFilerobotLoaded();
+        if (cancelled) return;
+
+        const EditorCtor: any = moduleRef;
+        const tabs = (moduleRef as any).TABS || {};
+        const tools = (moduleRef as any).TOOLS || {};
+
+        const config = {
+          source: initialImageUrl,
+          useBackendTranslations: false,
+          closeAfterSave: false,
+          disableSaveIfNoChanges: false,
+          tabsIds: [tabs.ADJUST, tabs.RESIZE],
+          defaultTabId: tabs.ADJUST,
+          defaultToolId: tools.CROP,
+          savingPixelRatio: 4,
+          removeSaveButton: true,
+          // Prevent Filerobot's own save dialog if triggered internally
+          onBeforeSave: () => false,
+          onClose: () => {
+            closeModal();
+          },
+          ...filerobotOptions
+        };
+
+        editorInstance = new EditorCtor(editorHost, config);
+        editorInstance.render?.();
+        onReady?.();
+      } catch (error) {
+        editorError = error instanceof Error ? error.message : t('common.error', 'An error occurred');
+      } finally {
+        isInitializing = false;
+      }
+    };
+
+    initializeEditor();
+
+    return () => {
+      cancelled = true;
+      untrack(() => cleanupEditor());
+      isInitializing = false;
+    };
+  });
+</script>
+
+<Modal
+  open={show}
+  {title}
+  {description}
+  icon="🖼️"
+  {color}
+  {size}
+  {zIndex}
+  onClose={closeModal}
+  cancelText={t('common.cancel', 'Cancel')}
+  confirmText={isInitializing || isSaving ? t('common.loading', 'Loading...') : t('common.save', 'Save')}
+  confirmDisabled={isInitializing || isSaving || !editorInstance}
+  confirmLoading={isSaving}
+  onConfirm={handleSave}
+>
+  {#snippet children()}
+    <div class="space-y-3" data-component-name="ImageEditorModal">
+      {#if editorError}
+        <div class="rounded-lg border border-red-200 bg-red-50 px-3 py-2 text-sm text-red-700">
+          {editorError}
+        </div>
+      {/if}
+
+      {#if isInitializing}
+        <div class="flex items-center gap-2 rounded-lg border border-blue-200 bg-blue-50 px-3 py-2 text-sm text-blue-700">
+          <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>
+          {t('common.loading', 'Loading...')}
+        </div>
+      {/if}
+
+      <div class="h-[65vh] min-h-[480px] w-full overflow-hidden rounded-xl border border-gray-200 bg-gray-100">
+        <div bind:this={editorHost} class="h-full w-full"></div>
+      </div>
+
+    </div>
+  {/snippet}
+</Modal>
+
+<style>
+  /* Hide Filerobot's internal save button — we use our own modal footer button */
+  :global(.FIE_topbar-save-button) {
+    display: none !important;
+  }
+</style>

package/dist/ImageEditorModal/ImageEditorModal.svelte.d.ts

@@ -0,0 +1,23 @@
+type ModalColor = 'blue' | 'green' | 'amber' | 'red' | 'purple' | 'gray' | 'emerald' | 'teal';
+type ModalSize = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | 'full';
+export interface ImageEditorSavePayload {
+    dataUrl: string;
+    imageData: any;
+    designState: any;
+}
+interface Props {
+    show?: boolean;
+    onClose?: () => void;
+    onReady?: () => void;
+    onSave?: (payload: ImageEditorSavePayload) => Promise<void> | void;
+    initialImageUrl?: string;
+    color?: ModalColor;
+    size?: ModalSize;
+    zIndex?: number;
+    title?: string;
+    description?: string;
+    filerobotOptions?: Record<string, any>;
+}
+declare const ImageEditorModal: import("svelte").Component<Props, {}, "show">;
+type ImageEditorModal = ReturnType<typeof ImageEditorModal>;
+export default ImageEditorModal;

package/dist/ImageEditorModal/index.d.ts

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

package/dist/ImageEditorModal/index.js

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