@r2digisolutions/components 0.1.7 → 0.2.0

package/dist/components/molecules/BulkEditPanel/BulkEditPanel.svelte

@@ -0,0 +1,117 @@
+<script lang="ts">
+	import Button from '../../atoms/Button/Button.svelte';
+	import Input from '../../atoms/Input/Input.svelte';
+	import Select from '../Select/Select.svelte';
+	import Toggle from '../../atoms/Toggle/Toggle.svelte';
+
+	export type BulkEditFieldType = 'text' | 'number' | 'select' | 'boolean';
+
+	export interface BulkEditField {
+		id: string;
+		label: string;
+		type: BulkEditFieldType;
+		options?: { value: string; label: string }[];
+	}
+
+	interface BulkEditPanelProps {
+		fields?: BulkEditField[];
+		selectedCount?: number;
+		values?: Record<string, unknown>;
+		enabled?: Record<string, boolean>;
+		applyLabel?: string;
+		class?: string;
+		onchange?: (values: Record<string, unknown>) => void;
+		onapply?: (values: Record<string, unknown>) => void;
+	}
+
+	let {
+		fields = [],
+		selectedCount = 0,
+		values = $bindable<Record<string, unknown>>({}),
+		enabled = $bindable<Record<string, boolean>>({}),
+		applyLabel = 'Apply to selection',
+		class: className = '',
+		onchange,
+		onapply
+	}: BulkEditPanelProps = $props();
+
+	function setEnabled(id: string, on: boolean) {
+		enabled = { ...enabled, [id]: on };
+	}
+
+	function setValue(id: string, v: unknown) {
+		values = { ...values, [id]: v };
+		onchange?.(activeValues());
+	}
+
+	function activeValues(): Record<string, unknown> {
+		const out: Record<string, unknown> = {};
+		for (const f of fields) {
+			if (enabled[f.id]) out[f.id] = values[f.id];
+		}
+		return out;
+	}
+
+	function apply() {
+		onapply?.(activeValues());
+	}
+</script>
+
+<div
+	class={['flex flex-col gap-3 rounded-xl border border-border bg-surface-elevated p-4', className]}
+	data-bulk-edit-panel
+>
+	<div class="flex items-center justify-between gap-2">
+		<div>
+			<p class="text-sm font-semibold text-primary">Bulk edit</p>
+			<p class="text-xs text-muted">
+				{selectedCount} selected · enable fields to overwrite
+			</p>
+		</div>
+		<Button size="sm" disabled={!selectedCount || !Object.values(enabled).some(Boolean)} onclick={apply}>
+			{applyLabel}
+		</Button>
+	</div>
+
+	<ul class="flex flex-col gap-2">
+		{#each fields as field (field.id)}
+			<li class="flex flex-wrap items-center gap-3 rounded-lg border border-border px-3 py-2">
+				<label class="flex min-w-[8rem] items-center gap-2 text-sm text-primary">
+					<input
+						type="checkbox"
+						checked={!!enabled[field.id]}
+						onchange={(e) => setEnabled(field.id, (e.currentTarget as HTMLInputElement).checked)}
+					/>
+					{field.label}
+				</label>
+				<div class="min-w-[12rem] flex-1" class:opacity-40={!enabled[field.id]}>
+					{#if field.type === 'boolean'}
+						<Toggle
+							checked={!!values[field.id]}
+							disabled={!enabled[field.id]}
+							onchange={(v) => setValue(field.id, v)}
+						/>
+					{:else if field.type === 'select'}
+						<Select
+							value={String(values[field.id] ?? '')}
+							options={field.options ?? []}
+							disabled={!enabled[field.id]}
+							onchange={(v) => setValue(field.id, v)}
+							size="sm"
+						/>
+					{:else}
+						<Input
+							type={field.type === 'number' ? 'number' : 'text'}
+							value={String(values[field.id] ?? '')}
+							disabled={!enabled[field.id]}
+							oninput={(e) => {
+								const raw = (e.currentTarget as HTMLInputElement).value;
+								setValue(field.id, field.type === 'number' ? Number(raw) : raw);
+							}}
+						/>
+					{/if}
+				</div>
+			</li>
+		{/each}
+	</ul>
+</div>

package/dist/components/molecules/BulkEditPanel/BulkEditPanel.svelte.d.ts

@@ -0,0 +1,23 @@
+export type BulkEditFieldType = 'text' | 'number' | 'select' | 'boolean';
+export interface BulkEditField {
+    id: string;
+    label: string;
+    type: BulkEditFieldType;
+    options?: {
+        value: string;
+        label: string;
+    }[];
+}
+interface BulkEditPanelProps {
+    fields?: BulkEditField[];
+    selectedCount?: number;
+    values?: Record<string, unknown>;
+    enabled?: Record<string, boolean>;
+    applyLabel?: string;
+    class?: string;
+    onchange?: (values: Record<string, unknown>) => void;
+    onapply?: (values: Record<string, unknown>) => void;
+}
+declare const BulkEditPanel: import("svelte").Component<BulkEditPanelProps, {}, "values" | "enabled">;
+type BulkEditPanel = ReturnType<typeof BulkEditPanel>;
+export default BulkEditPanel;

package/dist/components/molecules/BulkEditPanel/BulkEditPanelStory.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+	import BulkEditPanel from './BulkEditPanel.svelte';
+</script>
+
+<div class="mx-auto max-w-lg p-4">
+	<BulkEditPanel
+		selectedCount={12}
+		fields={[
+			{ id: 'status', label: 'Status', type: 'select', options: [
+				{ value: 'active', label: 'Active' },
+				{ value: 'draft', label: 'Draft' }
+			]},
+			{ id: 'priority', label: 'Priority', type: 'number' },
+			{ id: 'featured', label: 'Featured', type: 'boolean' }
+		]}
+		onapply={(v) => console.log(v)}
+	/>
+</div>

package/dist/components/molecules/BulkEditPanel/BulkEditPanelStory.svelte.d.ts

@@ -0,0 +1,18 @@
+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: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const BulkEditPanelStory: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type BulkEditPanelStory = InstanceType<typeof BulkEditPanelStory>;
+export default BulkEditPanelStory;

package/dist/components/molecules/CanvasElementsPanel/CanvasElementsPanel.stories.js

@@ -0,0 +1,8 @@
+import CanvasElementsPanelStory from './CanvasElementsPanelStory.svelte';
+const meta = {
+    title: 'Molecules/CanvasElementsPanel',
+    component: CanvasElementsPanelStory,
+    tags: ['autodocs']
+};
+export default meta;
+export const Default = {};