urpanels-ui-pack 0.0.3 → 0.0.10

package/dist/PageLayout/PageHeader.svelte

@@ -1,29 +1,89 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
+  import SearchBar from './SearchBar.svelte';
+  import ViewToggle from './ViewToggle.svelte';
 
   interface Props {
     title: string;
+    showBackButton?: boolean;
+    onBackClick?: () => void;
+    backLabel?: string;
     actions?: Snippet;
-    search?: Snippet;
+    // Search props
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    onSearchInput?: (e: Event) => void;
+    // View toggle props
+    showViewToggle?: boolean;
+    viewToggleMode?: 'card-table' | 'daily-weekly';
+    isSecondOption?: boolean;
+    onViewToggle?: (isSecondOption: boolean) => void;
   }
 
-  let { title, actions, search }: Props = $props();
+  let { 
+    title, 
+    showBackButton = false,
+    onBackClick,
+    backLabel = 'Geri',
+    actions,
+    // Search
+    showSearch = false,
+    searchPlaceholder = "Ara...",
+    searchValue = $bindable(""),
+    onSearchInput,
+    // View toggle
+    showViewToggle = false,
+    viewToggleMode = 'card-table',
+    isSecondOption = $bindable(false),
+    onViewToggle
+  }: Props = $props();
 </script>
 
-<div class="sticky top-0 z-20 bg-white px-4 sm:px-6 py-3 mb-4">
-  <div class="flex items-center justify-between">
-    <h1 class="text-2xl font-bold">{title}</h1>
-    
-    {#if actions}
-      <div class="flex items-center gap-4">
-        {@render actions()}
+<div class="sticky top-0 z-20 bg-white px-4 sm:px-6 py-3 mb-4" data-component-name="PageHeader">
+  <div class="flex flex-col gap-3">
+    <!-- Top row: Title + ViewToggle + Actions -->
+    <div class="flex items-center justify-between gap-2">
+      <div class="flex items-center gap-2 min-w-0">
+        {#if showBackButton && onBackClick}
+          <button
+            class="flex items-center gap-2 rounded-lg bg-gray-100 px-3 py-2 text-sm font-semibold text-gray-700 transition hover:bg-gray-200"
+            onclick={onBackClick}
+            aria-label={backLabel}
+          >
+            <svg class="h-4 w-4" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+              <path fill-rule="evenodd" d="M7.707 14.707a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414l4-4a1 1 0 011.414 1.414L5.414 9H17a1 1 0 110 2H5.414l2.293 2.293a1 1 0 010 1.414z" clip-rule="evenodd" />
+            </svg>
+            <span>{backLabel}</span>
+          </button>
+        {/if}
+        <h1 class="text-xl sm:text-2xl font-bold truncate">{title}</h1>
+      </div>
+      
+      <div class="flex items-center gap-2 sm:gap-3 flex-shrink-0">
+        {#if showViewToggle}
+          <ViewToggle 
+            mode={viewToggleMode} 
+            bind:isSecondOption={isSecondOption}
+            onToggle={onViewToggle}
+          />
+        {/if}
+        
+        {#if actions}
+          {@render actions()}
+        {/if}
+      </div>
+    </div>
+
+    <!-- Bottom row: Search Bar (full width, always below) -->
+    {#if showSearch}
+      <div class="w-full">
+        <SearchBar 
+          placeholder={searchPlaceholder}
+          bind:value={searchValue}
+          oninput={onSearchInput}
+        />
       </div>
     {/if}
   </div>
-
-  {#if search}
-    <div class="mt-3">
-      {@render search()}
-    </div>
-  {/if}
 </div>

package/dist/PageLayout/PageHeader.svelte.d.ts

@@ -2,7 +2,16 @@ import type { Snippet } from 'svelte';
 interface Props {
     title: string;
     actions?: Snippet;
-    search?: Snippet;
+    // Search props
+    showSearch?: boolean;
+    searchPlaceholder?: string;
+    searchValue?: string;
+    onSearchInput?: (e: Event) => void;
+    // View toggle props
+    showViewToggle?: boolean;
+    viewToggleMode?: 'card-table' | 'daily-weekly';
+    isSecondOption?: boolean;
+    onViewToggle?: (isSecondOption: boolean) => void;
 }
 declare const PageHeader: import("svelte").Component<Props, {}, "">;
 type PageHeader = ReturnType<typeof PageHeader>;

package/dist/PageLayout/SearchBar.svelte

@@ -8,7 +8,7 @@
   let { placeholder = "Ara...", value = $bindable(""), oninput }: Props = $props();
 </script>
 
-<label class="relative block">
+<label class="relative block" data-component-name="SearchBar">
   <span class="sr-only">Ara</span>
   <input
     type="search"

package/dist/PageLayout/ViewToggle.svelte

@@ -31,7 +31,7 @@
   }
 </script>
 
-<div class="inline-flex items-center bg-gray-100 rounded-xl p-1.5">
+<div class="inline-flex items-center bg-gray-100 rounded-xl p-1.5" data-component-name="ViewToggle">
   <button
     onclick={() => handleToggle(false)}
     class="flex items-center gap-2 px-4 md:px-3 py-2.5 md:py-1.5 rounded-lg text-base md:text-sm font-medium transition-all {!isSecondOption ? 'bg-white text-blue-600 shadow-sm' : 'text-gray-600 hover:text-gray-900'}"

package/dist/Pagination/Pagination.svelte

@@ -38,7 +38,7 @@
 </script>
 
 {#if totalPages > 1}
-  <div class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-t pt-4">
+  <div class="mt-6 flex flex-col sm:flex-row items-center justify-between gap-4 border-t pt-4" data-component-name="Pagination">
     {#if showInfo}
       <div class="text-sm text-gray-600">
         {t('table.showing')}: <span class="font-semibold">{startItem}</span> - 

package/dist/index.d.ts

@@ -3,3 +3,4 @@ export * from './InfoCard';
 export * from './Pagination';
 export * from './LoadingSpinner';
 export * from './Modal';
+export * from './inputs';

package/dist/index.js

@@ -6,5 +6,13 @@ export * from './LoadingSpinner';
 export * from './Modal';
 export * from './RichTextEditor';
 export * from './Button';
+export * from './InputSelectModal';
+export * from './InputCheckboxModal';
+// Sections
+export * from './sections';
+// Services
+export * from './BasePageService';
+// Inputs
+export * from './inputs';
 // Utils
 export * from './utils/translations.svelte';

package/dist/inputs/InputNumber/InputNumber.svelte

@@ -0,0 +1,140 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id?: string;
+		label?: string;
+		value?: number | string | null;
+		required?: boolean;
+		disabled?: boolean;
+		placeholder?: string;
+		error?: string;
+		helpText?: string;
+		prefix?: Snippet;
+		suffix?: Snippet;
+		min?: number;
+		max?: number;
+		step?: number;
+		inputmode?: 'numeric' | 'decimal';
+		isActive?: boolean;
+		validationError?: string;
+		isNewRecord?: boolean;
+		onInput?: (value: string) => void;
+		onChange?: (value: string) => void;
+		onBlur?: () => void;
+		onFocus?: () => void;
+	}
+
+	let {
+		id = '',
+		label = '',
+		value = $bindable(''),
+		required = false,
+		disabled = false,
+		placeholder = '',
+		error = '',
+		helpText = '',
+		prefix,
+		suffix,
+		min,
+		max,
+		step,
+		inputmode = 'numeric',
+		isActive = true,
+		validationError = '',
+		isNewRecord = false,
+		onInput,
+		onChange,
+		onBlur,
+		onFocus
+	}: Props = $props();
+
+	const hasError = $derived(
+		!!error ||
+			(isNewRecord &&
+				required &&
+				validationError &&
+				(value === undefined || value === null || value === ''))
+	);
+
+	const inputWrapperClass = $derived(
+		hasError
+			? 'border-red-300 focus-within:border-red-500'
+			: 'border-gray-300 focus-within:border-blue-500'
+	);
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		onInput?.(target.value);
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		onChange?.(target.value);
+	}
+</script>
+
+{#if isActive}
+	<div class="w-full">
+		{#if label}
+			<label class="mb-1.5 block text-sm font-medium text-gray-700" for={id}>
+				{label}
+				{#if required}
+					<span class="text-red-500 ml-0.5">*</span>
+				{/if}
+			</label>
+		{/if}
+
+		<div class="relative">
+			<div
+				class="flex items-center border rounded-lg bg-white transition-all duration-200 {inputWrapperClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
+			>
+				{#if prefix}
+					<div class="pl-3 flex items-center text-gray-500">
+						{@render prefix()}
+					</div>
+				{/if}
+
+				<input
+					{id}
+					type="number"
+					{placeholder}
+					{required}
+					{disabled}
+					{min}
+					{max}
+					{step}
+					{inputmode}
+					bind:value
+					oninput={handleInput}
+					onchange={handleChange}
+					onblur={onBlur}
+					onfocus={onFocus}
+					class="flex-1 w-full px-3 py-2 bg-transparent border-none outline-none rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none text-gray-900 placeholder-gray-400 disabled:cursor-not-allowed disabled:text-gray-500"
+				/>
+
+				{#if suffix}
+					<div class="pr-3 flex items-center text-gray-500">
+						{@render suffix()}
+					</div>
+				{/if}
+			</div>
+		</div>
+
+		{#if error}
+			<p class="mt-1.5 text-sm text-red-600 flex items-center gap-1">
+				<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+					<path
+						fill-rule="evenodd"
+						d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z"
+						clip-rule="evenodd"
+					/>
+				</svg>
+				{error}
+			</p>
+		{:else if helpText}
+			<p class="mt-1.5 text-sm text-gray-500">{helpText}</p>
+		{/if}
+	</div>
+{/if}

package/dist/inputs/InputNumber/InputNumber.svelte.d.ts

@@ -0,0 +1,27 @@
+import type { Snippet } from 'svelte';
+interface Props {
+    id?: string;
+    label?: string;
+    value?: number | string | null;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    error?: string;
+    helpText?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    min?: number;
+    max?: number;
+    step?: number;
+    inputmode?: 'numeric' | 'decimal';
+    isActive?: boolean;
+    validationError?: string;
+    isNewRecord?: boolean;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+declare const InputNumber: import("svelte").Component<Props, {}, "value">;
+type InputNumber = ReturnType<typeof InputNumber>;
+export default InputNumber;

package/dist/inputs/InputNumber/index.d.ts

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

package/dist/inputs/InputNumber/index.js

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

package/dist/inputs/InputSelect/InputSelect.svelte

@@ -0,0 +1,73 @@
+<script lang="ts">
+  type OptionItem = {
+    value: string;
+    label: string;
+  };
+
+  type Props = {
+    id?: string;
+    label?: string;
+    value?: string | null;
+    options: OptionItem[] | string[];
+    required?: boolean;
+    isActive?: boolean;
+    validationError?: string;
+    isNewRecord?: boolean;
+    srOnly?: boolean;
+  };
+
+  let {
+    id = '',
+    label = '',
+    value = $bindable(''),
+    options = [],
+    required = false,
+    isActive = true,
+    validationError = '',
+    isNewRecord = false,
+    srOnly = false
+  }: Props = $props();
+
+  const hasError = $derived(
+    isNewRecord && required && validationError && !value
+  );
+
+  const normalizedOptions = $derived(() => {
+    if (options.length === 0) return [];
+
+    if (typeof options[0] === 'string') {
+      return (options as string[]).map((opt) => ({
+        value: opt,
+        label: opt
+      }));
+    }
+
+    return options as OptionItem[];
+  });
+</script>
+
+{#if isActive}
+  <div>
+    <label
+      class="block text-sm font-medium mb-1 {srOnly ? 'sr-only' : ''}"
+      for={id}
+    >
+      {label}
+      {#if required && !srOnly}
+        <span class="text-red-500">*</span>
+      {/if}
+    </label>
+    <select
+      {id}
+      class="w-full rounded-lg border px-3 py-2.5 bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent transition {hasError ? 'border-red-500' : 'border-gray-300'}"
+      bind:value
+    >
+      {#each normalizedOptions() as option}
+        <option value={option.value}>{option.label}</option>
+      {/each}
+    </select>
+    {#if hasError}
+      <div class="mt-1 text-xs text-red-500">{validationError}</div>
+    {/if}
+  </div>
+{/if}

package/dist/inputs/InputSelect/InputSelect.svelte.d.ts

@@ -0,0 +1,18 @@
+type OptionItem = {
+    value: string;
+    label: string;
+};
+type Props = {
+    id?: string;
+    label?: string;
+    value?: string | null;
+    options: OptionItem[] | string[];
+    required?: boolean;
+    isActive?: boolean;
+    validationError?: string;
+    isNewRecord?: boolean;
+    srOnly?: boolean;
+};
+declare const InputSelect: import("svelte").Component<Props, {}, "value">;
+type InputSelect = ReturnType<typeof InputSelect>;
+export default InputSelect;

package/dist/inputs/InputSelect/index.d.ts

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

package/dist/inputs/InputSelect/index.js

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

package/dist/inputs/InputText/InputText.svelte

@@ -0,0 +1,126 @@
+<script lang="ts">
+	import type { Snippet } from 'svelte';
+
+	interface Props {
+		id?: string;
+		label?: string;
+		value?: string | null;
+		required?: boolean;
+		disabled?: boolean;
+		placeholder?: string;
+		error?: string;
+		helpText?: string;
+		prefix?: Snippet;
+		suffix?: Snippet;
+		type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'search';
+		maxlength?: number;
+		minlength?: number;
+		pattern?: string;
+		autocomplete?: string;
+		onInput?: (value: string) => void;
+		onChange?: (value: string) => void;
+		onBlur?: () => void;
+		onFocus?: () => void;
+	}
+
+	let {
+		id = '',
+		label = '',
+		value = $bindable(''),
+		required = false,
+		disabled = false,
+		placeholder = '',
+		error = '',
+		helpText = '',
+		prefix,
+		suffix,
+		type = 'text',
+		maxlength,
+		minlength,
+		pattern,
+		autocomplete,
+		onInput,
+		onChange,
+		onBlur,
+		onFocus
+	}: Props = $props();
+
+	// Input wrapper class based on state
+	const inputWrapperClass = $derived(
+		error
+			? 'border-red-300 focus-within:border-red-500'
+			: 'border-gray-300 focus-within:border-blue-500'
+	);
+
+	function handleInput(e: Event) {
+		const target = e.target as HTMLInputElement;
+		value = target.value;
+		onInput?.(target.value);
+	}
+
+	function handleChange(e: Event) {
+		const target = e.target as HTMLInputElement;
+		onChange?.(target.value);
+	}
+</script>
+
+<div class="w-full">
+	{#if label}
+		<label 
+			class="mb-1.5 block text-sm font-medium text-gray-700" 
+			for={id}
+		>
+			{label}
+			{#if required}
+				<span class="text-red-500 ml-0.5">*</span>
+			{/if}
+		</label>
+	{/if}
+	
+	<div class="relative">
+		<div 
+			class="flex items-center border rounded-lg bg-white transition-all duration-200 {inputWrapperClass} {disabled ? 'bg-gray-50 cursor-not-allowed' : ''}"
+		>
+			{#if prefix}
+				<div class="pl-3 flex items-center text-gray-500">
+					{@render prefix()}
+				</div>
+			{/if}
+			
+			<input
+				{id}
+				{type}
+				{placeholder}
+				{required}
+				{disabled}
+				{maxlength}
+				{minlength}
+				{pattern}
+				{autocomplete}
+				bind:value
+				oninput={handleInput}
+				onchange={handleChange}
+				onblur={onBlur}
+				onfocus={onFocus}
+				class="flex-1 w-full px-3 py-2 bg-transparent border-none outline-none rounded-lg focus:outline-none focus:ring-0 focus-visible:outline-none text-gray-900 placeholder-gray-400 disabled:cursor-not-allowed disabled:text-gray-500"
+			/>
+			
+			{#if suffix}
+				<div class="pr-3 flex items-center text-gray-500">
+					{@render suffix()}
+				</div>
+			{/if}
+		</div>
+	</div>
+
+	{#if error}
+		<p class="mt-1.5 text-sm text-red-600 flex items-center gap-1">
+			<svg class="w-4 h-4" fill="currentColor" viewBox="0 0 20 20">
+				<path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clip-rule="evenodd"/>
+			</svg>
+			{error}
+		</p>
+	{:else if helpText}
+		<p class="mt-1.5 text-sm text-gray-500">{helpText}</p>
+	{/if}
+</div>

package/dist/inputs/InputText/InputText.svelte.d.ts

@@ -0,0 +1,49 @@
+import type { Snippet } from 'svelte';
+
+interface Props {
+    id?: string;
+    label?: string;
+    value?: string | null;
+    required?: boolean;
+    disabled?: boolean;
+    placeholder?: string;
+    error?: string;
+    helpText?: string;
+    prefix?: Snippet;
+    suffix?: Snippet;
+    type?: 'text' | 'email' | 'password' | 'url' | 'tel' | 'search';
+    maxlength?: number;
+    minlength?: number;
+    pattern?: string;
+    autocomplete?: string;
+    onInput?: (value: string) => void;
+    onChange?: (value: string) => void;
+    onBlur?: () => void;
+    onFocus?: () => void;
+}
+
+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> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+
+type $$__sveltets_2_PropsWithChildren<Props, Slots> = Props & (Slots extends {
+    default: any;
+} ? Props extends Record<string, never> ? any : {
+    children?: any;
+} : {});
+
+declare const InputText: $$__sveltets_2_IsomorphicComponent<$$__sveltets_2_PropsWithChildren<Props, Record<string, any>>, {
+    [evt: string]: CustomEvent<any>;
+}, Record<string, any>, {}, string>;
+type InputText = InstanceType<typeof InputText>;
+export default InputText;

package/dist/inputs/InputText/index.d.ts

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

package/dist/inputs/InputText/index.js

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