urpanels-ui-pack 0.0.4 → 0.0.11

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/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 {};