@rkosafo/cai.components 0.0.34 → 0.0.35

package/dist/forms/FormClEditor/ClEdito.svelte

@@ -0,0 +1,68 @@
+<script lang="ts">
+	import { IconifyIcon, key, Label } from '../../index.js';
+	import type { FormClEditorProps } from '../../types/index.js';
+	import Editor from 'cl-editor/src/Editor.svelte';
+	import { nanoid } from 'nanoid';
+	import { getContext, onMount } from 'svelte';
+
+	let {
+		name = '',
+		label = '',
+		required,
+		readonly,
+		contextKey = null,
+		type = 'text',
+		pattern = null,
+		placeholder,
+		value,
+		height,
+		...otherProps
+	}: FormClEditorProps = $props();
+	const { touched, errors, data, setData }: any = getContext(contextKey || key);
+	const hasError = $derived($touched[name] && $errors[name]?.length);
+	const error = $derived($errors[name]?.join(', '));
+	const isSuccess = $derived(!readonly && !hasError && $touched[name]);
+	let editorValue = $derived($data[name] || value || '');
+	let id = nanoid();
+
+	function onChange({ detail: e }: CustomEvent) {
+		setData({ ...$data, [name]: e });
+	}
+
+	function onBlur({ detail: e }: CustomEvent) {
+		console.log({ e });
+		// setData({ ...$data, [name]: e });
+	}
+	// $effect(() => {
+	// 	if (value !== undefined && value !== $data[name]) {
+	// 		setData({ ...$data, [name]: value });
+	// 	}
+	// });
+</script>
+
+<div class="relative space-y-1">
+	<Label
+		>{label}
+		{#if required}
+			<span class="pl-1 text-red-500">*</span>
+		{/if}
+	</Label>
+
+	<Editor contentId={id} on:change={onChange} bind:html={editorValue} {height} />
+
+	{#if hasError}
+		<Label
+			class="v-error-container absolute top-9 right-2 flex items-center gap-1 text-sm {hasError &&
+				'text-red-600'}"
+		>
+			<span class="v-error-message hidden backdrop-blur-sm">
+				{error}
+			</span>
+			<IconifyIcon
+				icon="solar:danger-circle-bold-duotone"
+				class="v-error-svg ml-auto cursor-pointer text-red-500 select-none hover:text-red-600"
+				style="font-size: 18px;"
+			/>
+		</Label>
+	{/if}
+</div>

package/dist/forms/FormClEditor/ClEdito.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { FormClEditorProps } from '../../types/index.js';
+declare const ClEdito: import("svelte").Component<FormClEditorProps, {}, "">;
+type ClEdito = ReturnType<typeof ClEdito>;
+export default ClEdito;

package/dist/forms/FormClEditor/index.d.ts

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

package/dist/forms/FormClEditor/index.js

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

package/dist/index.d.ts

@@ -40,6 +40,7 @@ export * from './forms/FormSelect/index.js';
 export * from './forms/FormTextarea/index.js';
 export * from './forms/FormCheckbox/index.js';
 export * from './forms/FormRadio/index.js';
+export * from './forms/FormClEditor/index.js';
 export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';

package/dist/index.js

@@ -41,6 +41,7 @@ export * from './forms/FormSelect/index.js';
 export * from './forms/FormTextarea/index.js';
 export * from './forms/FormCheckbox/index.js';
 export * from './forms/FormRadio/index.js';
+export * from './forms/FormClEditor/index.js';
 export * from './builders/filters/index.js';
 export * from './types/index.js';
 export * from './utils/index.js';

package/dist/types/index.d.ts

@@ -543,6 +543,9 @@ export interface FormTextareaProps extends Omit<TextareaProps, 'name'>, IFormPro
 }
 export interface FormRadioProps<T> extends Omit<RadioProps<T>, 'name'>, IFormProps {
 }
+export interface FormClEditorProps extends Omit<InputProps, 'name'>, IFormProps {
+    height?: string;
+}
 export interface FormCheckboxProps extends Omit<CheckboxProps, 'name'>, IFormProps {
     onChange?: (val: any) => void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rkosafo/cai.components",
-  "version": "0.0.34",
+  "version": "0.0.35",
   "files": [
     "dist",
     "!dist/**/*.test.*",
@@ -54,6 +54,7 @@
     "@tiptap/extension-text-style": "^3.0.7",
     "@tiptap/pm": "^3.0.7",
     "@tiptap/starter-kit": "^3.0.7",
+    "cl-editor": "^2.3.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.1.0",
     "felte": "^1.3.0",