urpanels-ui-pack 0.0.3 → 0.0.10

package/dist/BasePageService/BasePageService.d.ts

@@ -0,0 +1,121 @@
+import { PageService, type PageOts } from "@urga-panel/ur-panels-core/dist/services/abstract/pageServices/PageServices";
+/**
+ * View mode types for list display
+ */
+export type ViewMode = 'card' | 'table';
+/**
+ * Local settings interface - extend this for custom settings
+ */
+export interface BaseLocalSettings {
+    viewMode?: ViewMode;
+    pageSize?: number;
+    [key: string]: any;
+}
+/**
+ * Base Page Service with common loading state management and local settings
+ * All page services should extend this instead of PageService directly
+ *
+ * IMPORTANT: Child classes MUST implement isLoading with $state()
+ * Example: public isLoading: boolean = $state(true);
+ *
+ * For viewMode reactivity, child class should implement:
+ * public viewMode: ViewMode = $state(this.getLocalSetting('viewMode') || 'card');
+ */
+export declare abstract class BasePageService extends PageService {
+    /**
+     * Loading state - MUST be implemented in child class with $state()
+     * Example: public isLoading: boolean = $state(true);
+     */
+    abstract isLoading: boolean;
+    /**
+     * Unique key for localStorage - override in child class
+     * Default uses class name, but should be overridden for uniqueness
+     */
+    protected get localStorageKey(): string;
+    /**
+     * Default settings - override in child class to set defaults
+     */
+    protected get defaultSettings(): BaseLocalSettings;
+    constructor(ots: PageOts);
+    /**
+     * Wraps an async function with loading state management
+     * Automatically sets isLoading to true before execution and false after
+     *
+     * @param fn - Async function to execute
+     * @returns Promise with the result of the function
+     *
+     * @example
+     * await service.withLoading(async () => {
+     *   await loadData();
+     * });
+     */
+    withLoading<T>(fn: () => Promise<T>): Promise<T>;
+    /**
+     * Sets loading state manually
+     * Use this when you need more granular control
+     *
+     * @param loading - Loading state
+     */
+    protected setLoading(loading: boolean): void;
+    /**
+     * Gets all local settings from localStorage
+     * @returns Current settings merged with defaults
+     */
+    getLocalSettings<T extends BaseLocalSettings = BaseLocalSettings>(): T;
+    /**
+     * Gets a specific setting value
+     * @param key - Setting key
+     * @returns Setting value or default
+     *
+     * @example
+     * const viewMode = this.getLocalSetting('viewMode'); // 'card' | 'table'
+     */
+    getLocalSetting<K extends keyof BaseLocalSettings>(key: K): BaseLocalSettings[K];
+    /**
+     * Saves a specific setting to localStorage
+     * @param key - Setting key
+     * @param value - Setting value
+     *
+     * @example
+     * this.saveLocalSetting('viewMode', 'table');
+     */
+    saveLocalSetting<K extends keyof BaseLocalSettings>(key: K, value: BaseLocalSettings[K]): void;
+    /**
+     * Saves multiple settings at once
+     * @param settings - Partial settings object
+     *
+     * @example
+     * this.saveLocalSettings({ viewMode: 'table', pageSize: 50 });
+     */
+    saveLocalSettings(settings: Partial<BaseLocalSettings>): void;
+    /**
+     * Clears all local settings for this page
+     */
+    clearLocalSettings(): void;
+    /**
+     * Gets the current view mode from local settings
+     * @returns 'card' or 'table'
+     */
+    getViewMode(): ViewMode;
+    /**
+     * Saves view mode preference
+     * NOTE: Child class should also update its $state viewMode property
+     * @param mode - 'card' or 'table'
+     */
+    saveViewMode(mode: ViewMode): void;
+    /**
+     * Toggles between card and table view
+     * @returns The new view mode
+     */
+    toggleViewMode(): ViewMode;
+    /**
+     * Gets the saved page size
+     * @returns Page size number
+     */
+    getPageSize(): number;
+    /**
+     * Saves page size preference
+     * @param size - Number of items per page
+     */
+    savePageSize(size: number): void;
+}

package/dist/BasePageService/BasePageService.js

@@ -0,0 +1,191 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { PageService } from "@urga-panel/ur-panels-core/dist/services/abstract/pageServices/PageServices";
+/**
+ * Base Page Service with common loading state management and local settings
+ * All page services should extend this instead of PageService directly
+ *
+ * IMPORTANT: Child classes MUST implement isLoading with $state()
+ * Example: public isLoading: boolean = $state(true);
+ *
+ * For viewMode reactivity, child class should implement:
+ * public viewMode: ViewMode = $state(this.getLocalSetting('viewMode') || 'card');
+ */
+export class BasePageService extends PageService {
+    /**
+     * Unique key for localStorage - override in child class
+     * Default uses class name, but should be overridden for uniqueness
+     */
+    get localStorageKey() {
+        return `urpanels_page_${this.constructor.name}`;
+    }
+    /**
+     * Default settings - override in child class to set defaults
+     */
+    get defaultSettings() {
+        return {
+            viewMode: 'card',
+            pageSize: 20
+        };
+    }
+    constructor(ots) {
+        super(ots);
+    }
+    // ==================== Loading State Management ====================
+    /**
+     * Wraps an async function with loading state management
+     * Automatically sets isLoading to true before execution and false after
+     *
+     * @param fn - Async function to execute
+     * @returns Promise with the result of the function
+     *
+     * @example
+     * await service.withLoading(async () => {
+     *   await loadData();
+     * });
+     */
+    async withLoading(fn) {
+        this.isLoading = true;
+        try {
+            return await fn();
+        }
+        finally {
+            this.isLoading = false;
+        }
+    }
+    /**
+     * Sets loading state manually
+     * Use this when you need more granular control
+     *
+     * @param loading - Loading state
+     */
+    setLoading(loading) {
+        this.isLoading = loading;
+    }
+    // ==================== Local Settings Management ====================
+    /**
+     * Gets all local settings from localStorage
+     * @returns Current settings merged with defaults
+     */
+    getLocalSettings() {
+        if (typeof window === 'undefined') {
+            return this.defaultSettings;
+        }
+        try {
+            const stored = localStorage.getItem(this.localStorageKey);
+            if (stored) {
+                const parsed = JSON.parse(stored);
+                return { ...this.defaultSettings, ...parsed };
+            }
+        }
+        catch (e) {
+            console.warn('Failed to parse local settings:', e);
+        }
+        return this.defaultSettings;
+    }
+    /**
+     * Gets a specific setting value
+     * @param key - Setting key
+     * @returns Setting value or default
+     *
+     * @example
+     * const viewMode = this.getLocalSetting('viewMode'); // 'card' | 'table'
+     */
+    getLocalSetting(key) {
+        var _a;
+        const settings = this.getLocalSettings();
+        return (_a = settings[key]) !== null && _a !== void 0 ? _a : this.defaultSettings[key];
+    }
+    /**
+     * Saves a specific setting to localStorage
+     * @param key - Setting key
+     * @param value - Setting value
+     *
+     * @example
+     * this.saveLocalSetting('viewMode', 'table');
+     */
+    saveLocalSetting(key, value) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const current = this.getLocalSettings();
+            current[key] = value;
+            localStorage.setItem(this.localStorageKey, JSON.stringify(current));
+        }
+        catch (e) {
+            console.warn('Failed to save local setting:', e);
+        }
+    }
+    /**
+     * Saves multiple settings at once
+     * @param settings - Partial settings object
+     *
+     * @example
+     * this.saveLocalSettings({ viewMode: 'table', pageSize: 50 });
+     */
+    saveLocalSettings(settings) {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            const current = this.getLocalSettings();
+            const updated = { ...current, ...settings };
+            localStorage.setItem(this.localStorageKey, JSON.stringify(updated));
+        }
+        catch (e) {
+            console.warn('Failed to save local settings:', e);
+        }
+    }
+    /**
+     * Clears all local settings for this page
+     */
+    clearLocalSettings() {
+        if (typeof window === 'undefined')
+            return;
+        try {
+            localStorage.removeItem(this.localStorageKey);
+        }
+        catch (e) {
+            console.warn('Failed to clear local settings:', e);
+        }
+    }
+    // ==================== View Mode Helpers ====================
+    /**
+     * Gets the current view mode from local settings
+     * @returns 'card' or 'table'
+     */
+    getViewMode() {
+        return this.getLocalSetting('viewMode') || 'card';
+    }
+    /**
+     * Saves view mode preference
+     * NOTE: Child class should also update its $state viewMode property
+     * @param mode - 'card' or 'table'
+     */
+    saveViewMode(mode) {
+        this.saveLocalSetting('viewMode', mode);
+    }
+    /**
+     * Toggles between card and table view
+     * @returns The new view mode
+     */
+    toggleViewMode() {
+        const current = this.getViewMode();
+        const newMode = current === 'card' ? 'table' : 'card';
+        this.saveViewMode(newMode);
+        return newMode;
+    }
+    // ==================== Page Size Helpers ====================
+    /**
+     * Gets the saved page size
+     * @returns Page size number
+     */
+    getPageSize() {
+        return this.getLocalSetting('pageSize') || 20;
+    }
+    /**
+     * Saves page size preference
+     * @param size - Number of items per page
+     */
+    savePageSize(size) {
+        this.saveLocalSetting('pageSize', size);
+    }
+}

package/dist/BasePageService/index.d.ts

@@ -0,0 +1,2 @@
+export { BasePageService } from './BasePageService.js';
+export type { ViewMode, BaseLocalSettings } from './BasePageService.js';

package/dist/BasePageService/index.js

@@ -0,0 +1 @@
+export { BasePageService } from './BasePageService.js';

package/dist/Button/Button.svelte

@@ -42,6 +42,7 @@
   disabled={isDisabled}
   onclick={onclick}
   class={className}
+  data-component-name="Button"
   {...rest}
 >
   {#if loading}

package/dist/InfoCard/InfoCard.svelte

@@ -16,6 +16,7 @@
     badges = [],
     relatedItems,
     note,
+    footerActions,
     onView,
     onEdit,
     onDelete
@@ -23,6 +24,7 @@
   
   const isCompact = $derived(variant === 'compact');
   const hasActions = $derived(onView || onEdit || onDelete);
+  const hasBadgeLabels = $derived(badges?.some((b) => b?.label));
   
   function truncateText(text: string, maxLength: number): string {
     if (!text) return '';
@@ -44,6 +46,8 @@
 
 <div 
   class="bg-white rounded-lg shadow {isCompact ? 'p-3' : 'p-4'} flex flex-col gap-2 {hover ? 'hover:shadow-md transition-shadow' : ''} {className} relative"
+  data-component-name="InfoCard"
+  data-card-id={id}
 >
   {#if linkedStatus?.isLinked}
     <div class="absolute -top-1 -right-1 bg-indigo-500 text-white rounded-full w-5 h-5 flex items-center justify-center shadow-sm ring-2 ring-white" title="Kullanıcı hesabına bağlı">
@@ -124,7 +128,7 @@
       {#each fields as field}
         {#if field.condition !== false}
           <div class="{field.span === 2 ? 'col-span-2' : ''} truncate">
-            <span class="font-semibold text-gray-700">{field.label}:</span>
+            <span class="font-semibold text-gray-700 whitespace-pre-line">{field.label}:</span>
             {#if field.icon}<span class="mx-1">{field.icon}</span>{/if}
             <span class="text-gray-900">{field.value || '-'}</span>
           </div>
@@ -134,38 +138,59 @@
   {/if}
   
   {#if badges && badges.length > 0}
-    {#each badges as badgeGroup}
-      {#if badgeGroup.items && badgeGroup.items.length > 0}
-        {#snippet badgeSection()}
-          {@const displayItems = badgeGroup.maxDisplay ? badgeGroup.items.slice(0, badgeGroup.maxDisplay) : badgeGroup.items}
-          {@const remaining = badgeGroup.maxDisplay && badgeGroup.items.length > badgeGroup.maxDisplay ? badgeGroup.items.length - badgeGroup.maxDisplay : 0}
-          
-          <div class="mt-1">
-            {#if badgeGroup.label}
-              <div class="{isCompact ? 'text-[10px]' : 'text-xs'} font-semibold text-gray-600 mb-1">
-                {#if badgeGroup.icon}<span class="mr-1">{badgeGroup.icon}</span>{/if}
-                {badgeGroup.label}
-              </div>
+    {#if !hasBadgeLabels}
+      <div class="mt-1 flex flex-wrap gap-1">
+        {#each badges as badgeGroup}
+          {#if badgeGroup.items && badgeGroup.items.length > 0}
+            {@const displayItems = badgeGroup.maxDisplay ? badgeGroup.items.slice(0, badgeGroup.maxDisplay) : badgeGroup.items}
+            {@const remaining = badgeGroup.maxDisplay && badgeGroup.items.length > badgeGroup.maxDisplay ? badgeGroup.items.length - badgeGroup.maxDisplay : 0}
+            {#each displayItems as item}
+              <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
+                {item}
+              </span>
+            {/each}
+            {#if remaining > 0}
+              <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
+                +{remaining}
+              </span>
             {/if}
-            <div class="flex flex-wrap gap-1">
-              {#each displayItems as item}
-                <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
-                  {item}
-                </span>
-              {/each}
-              
-              {#if remaining > 0}
-                <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
-                  +{remaining}
-                </span>
+          {/if}
+        {/each}
+      </div>
+    {:else}
+      {#each badges as badgeGroup}
+        {#if badgeGroup.items && badgeGroup.items.length > 0}
+          {#snippet badgeSection()}
+            {@const displayItems = badgeGroup.maxDisplay ? badgeGroup.items.slice(0, badgeGroup.maxDisplay) : badgeGroup.items}
+            {@const remaining = badgeGroup.maxDisplay && badgeGroup.items.length > badgeGroup.maxDisplay ? badgeGroup.items.length - badgeGroup.maxDisplay : 0}
+            
+            <div class="mt-1">
+              {#if badgeGroup.label}
+                <div class="{isCompact ? 'text-[10px]' : 'text-xs'} font-semibold text-gray-600 mb-1">
+                  {#if badgeGroup.icon}<span class="mr-1">{badgeGroup.icon}</span>{/if}
+                  {badgeGroup.label}
+                </div>
               {/if}
+              <div class="flex flex-wrap gap-1">
+                {#each displayItems as item}
+                  <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
+                    {item}
+                  </span>
+                {/each}
+                
+                {#if remaining > 0}
+                  <span class="{isCompact ? 'text-[10px] px-1.5 py-0.5' : 'text-xs px-2 py-1'} rounded border {getBadgeColorClasses(badgeGroup.color)}">
+                    +{remaining}
+                  </span>
+                {/if}
+              </div>
             </div>
-          </div>
-        {/snippet}
-        
-        {@render badgeSection()}
-      {/if}
-    {/each}
+          {/snippet}
+          
+          {@render badgeSection()}
+        {/if}
+      {/each}
+    {/if}
   {/if}
   
   {#if relatedItems && relatedItems.items && relatedItems.items.length > 0}
@@ -203,6 +228,12 @@
       {note.maxLength ? truncateText(note.text, note.maxLength) : note.text}
     </div>
   {/if}
+
+  {#if footerActions}
+    <div class="mt-2 flex flex-wrap gap-2">
+      {@render footerActions()}
+    </div>
+  {/if}
   
   {#if actionLayout === 'buttons' && hasActions}
     <div class="mt-3 flex justify-end gap-2 pt-2 border-t border-gray-100">