fuma 0.1.19 → 0.1.22

package/README.md

@@ -10,10 +10,13 @@ echo "Enter mysql username : " && read mysql_username
 
 pn create svelte@latest $project_name
 cd $project_name
-px svelte-add@latest tailwindcss --tailwindcss-daisyui
+px svelte-add@latest tailwindcss --tailwindcss-daisyui --tailwindcss-typography
 pn install
 pn install fuma prisma lucia oslo @lucia-auth/adapter-prisma
 sed -i "s|\}'\],|\}', './node_modules/**/fuma/dist/**/*.svelte'\],|g" tailwind.config.cjs
+# TODO: tailwind.config {darkMode: 'class', }
+
+
 sed -i 's|"singleQuote": true,|"singleQuote": true,\n\t"semi": false,|g' .prettierrc
 
 # Prisma

package/dist/ui/card/Card.svelte

@@ -1,11 +1,13 @@
 <script>import { mdiArrowLeft } from "@mdi/js";
 import { Icon } from "../../index.js";
+import { contextContainer } from "../context.js";
 let klass = "";
 export { klass as class };
 export let bodyClass = "";
 export let headerClass = "";
 export let returnUrl = "";
 export let style = "";
+contextContainer.set("card");
 </script>
 
 <div class="card bordered border bg-base-100 shadow-lg {klass}" {style}>

package/dist/ui/context.d.ts

@@ -0,0 +1,6 @@
+type Container = 'drawer' | 'card';
+export declare const contextContainer: {
+    set(container: Container): Container;
+    get(): Container | null;
+};
+export {};

package/dist/ui/context.js

@@ -0,0 +1,12 @@
+import { getContext, setContext } from 'svelte';
+const KEYS = {
+    container: 'container'
+};
+export const contextContainer = {
+    set(container) {
+        return setContext(KEYS.container, container);
+    },
+    get() {
+        return getContext(KEYS.container);
+    }
+};

package/dist/ui/drawer/Drawer.svelte

@@ -5,21 +5,24 @@ import { goto } from "$app/navigation";
 import { urlParam } from "../../store/param.js";
 import { Icon } from "../index.js";
 import { subscibeDrawerLayers } from "./layers.js";
+import { contextContainer } from "../context.js";
 export let title = "";
 export let key;
 export let value = "1";
 let klass = "";
 export { klass as class };
 export let maxWidth = "32rem";
+export let classHeader = "";
+export let classBody = "";
 export function open() {
-  goto($urlParam.with({ key: value }), { replaceState: true });
+  goto($urlParam.with({ [key]: value }), { replaceState: true });
 }
 export function close() {
-  console.log("close");
   goto($urlParam.without(key), { replaceState: true });
 }
 const { offset, destroy, isActive } = subscibeDrawerLayers(key, value);
 onDestroy(destroy);
+contextContainer.set("drawer");
 </script>
 
 <svelte:head>
@@ -39,20 +42,20 @@ onDestroy(destroy);
 		on:keyup={close}
 		transition:fade={{ duration: 200 }}
 		class="
-			fixed inset-0 z-10 bg-black/25 backdrop-blur-[1.5px]
-			 dark:bg-white/25"
+			fixed inset-0 z-10 bg-black/15 backdrop-blur-[1.5px]
+			 dark:bg-white/15"
 	/>
 
 	<aside
 		transition:fly|local={{ x: 500, duration: 200 }}
 		style="max-width: min(100%, {maxWidth}); transform: translateX({-$offset * 4}rem);"
 		class="{klass}
-      fixed bottom-0 right-0 top-0 z-10 flex
+      fixed bottom-0 right-0 top-0 z-10 flex w-full
 			flex-col overflow-y-scroll bg-base-100 transition-transform
     "
 	>
 		<div
-			class="
+			class="{classHeader}
 				sticky top-0 z-10 flex items-center
 				justify-between gap-32 border-b bg-base-100 p-4 pl-8
 			"
@@ -63,7 +66,7 @@ onDestroy(destroy);
 			</button>
 		</div>
 
-		<div class="grow">
+		<div class="{classBody} grow pl-8 pr-4">
 			<slot />
 		</div>
 	</aside>

package/dist/ui/drawer/Drawer.svelte.d.ts

@@ -6,6 +6,8 @@ declare const __propDef: {
         /** Value need to match in url query params*/ value?: string | undefined;
         class?: string | undefined;
         maxWidth?: string | undefined;
+        classHeader?: string | undefined;
+        classBody?: string | undefined;
         open?: (() => void) | undefined;
         close?: (() => void) | undefined;
     };

package/dist/ui/form/Form.svelte

@@ -1,16 +1,18 @@
-<script>import {
-  initData,
-  getFieldType
-} from "./form.js";
+<script>import { contextContainer } from "../context.js";
 import { createEventDispatcher, onMount } from "svelte";
 import { fade } from "svelte/transition";
 import { page } from "$app/stores";
+import {
+  initData,
+  getFieldType
+} from "./form.js";
 import { useForm } from "../../validation/form.js";
 import Input from "./FormInput.svelte";
 import FormSection from "./FormSection.svelte";
 let klass = "";
 export { klass as class };
 export let classSection = "";
+export let classAction = "";
 export let fields = [];
 export let sections = [{}];
 export let data = initData(fields);
@@ -38,6 +40,15 @@ function lookupValueFromParams() {
       data[key] = value;
   });
 }
+const actionPadding = getActionPadding();
+function getActionPadding() {
+  const container = contextContainer.get();
+  if (container === "card")
+    return "-mx-2 sm:-mx-8 px-2 sm:px-8";
+  if (container === "drawer")
+    return "-ml-8 -mr-4 pl-8 pr-4";
+  return "";
+}
 const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === void 0 ? !!bool : !!bool(_data);
 </script>
 
@@ -80,7 +91,12 @@ const getBoolean = (bool) => (_data) => typeof bool === "boolean" || bool === vo
 		{/if}
 	{/each}
 
-	<div class="sticky bottom-0 col-span-full mt-2 flex gap-2 border-t px-4 py-4 backdrop-blur-sm">
+	<div
+		class="
+			{classAction} {actionPadding}
+			sticky bottom-0 col-span-full mt-2 flex gap-2 border-t py-4 backdrop-blur-sm
+		"
+	>
 		{#if actionDelete}
 			<button
 				class="btn-ghos btn text-error"

package/dist/ui/form/Form.svelte.d.ts

@@ -1,10 +1,11 @@
 import { SvelteComponent } from "svelte";
-import { type FormField, type FormSectionProps } from './form.js';
 import type { z } from 'zod';
+import { type FormField, type FormSectionProps } from './form.js';
 declare class __sveltets_Render<Shape extends z.ZodRawShape> {
     props(): {
         class?: string | undefined;
         classSection?: string | undefined;
+        classAction?: string | undefined;
         fields?: FormField<Shape>[][] | undefined;
         sections?: FormSectionProps<Shape>[] | undefined;
         data?: Partial<z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]> extends infer T ? { [k in keyof T]: z.objectUtil.addQuestionMarks<z.baseObjectOutputType<Shape>, { [k_1 in keyof z.baseObjectOutputType<Shape>]: undefined extends z.baseObjectOutputType<Shape>[k_1] ? never : k_1; }[keyof Shape]>[k]; } : never> | undefined;

package/dist/ui/form/formInput.d.ts

@@ -1,8 +1,9 @@
 import type { ComponentProps } from 'svelte';
-import { InputText, InputTextarea, InputBoolean, InputDate, InputDatetime, InputNumber, InputPassword, InputRadio, InputSelect, InputRelation, InputRelations } from '../input/index.js';
+import { InputText, InputTextarea, InputBoolean, InputDate, InputDatetime, InputNumber, InputPassword, InputRadio, InputSelect, InputRelation, InputRelations, InputTextRich } from '../input/index.js';
 export declare const formInputs: {
     readonly text: typeof InputText;
     readonly textarea: typeof InputTextarea;
+    readonly textrich: typeof InputTextRich;
     readonly boolean: typeof InputBoolean;
     readonly date: typeof InputDate;
     readonly datetime: typeof InputDatetime;
@@ -19,7 +20,7 @@ export type FormInputProps<T extends FormInputsType> = ComponentProps<InstanceTy
 export type FormInputsProps = {
     [T in FormInputsType]: FormInputProps<T>;
 };
-export declare const formInputsType: ("number" | "boolean" | "select" | "date" | "textarea" | "text" | "password" | "radio" | "datetime" | "relation" | "relations")[];
+export declare const formInputsType: ("number" | "boolean" | "select" | "date" | "textarea" | "text" | "password" | "radio" | "textrich" | "datetime" | "relation" | "relations")[];
 export declare function relationProps<Item extends {
     id: string;
 }>(props: ComponentProps<InstanceType<typeof InputRelation<Item>>>): {

package/dist/ui/form/formInput.js

@@ -1,7 +1,8 @@
-import { InputText, InputTextarea, InputBoolean, InputDate, InputDatetime, InputNumber, InputPassword, InputRadio, InputSelect, InputRelation, InputRelations } from '../input/index.js';
+import { InputText, InputTextarea, InputBoolean, InputDate, InputDatetime, InputNumber, InputPassword, InputRadio, InputSelect, InputRelation, InputRelations, InputTextRich } from '../input/index.js';
 export const formInputs = {
     text: InputText,
     textarea: InputTextarea,
+    textrich: InputTextRich,
     boolean: InputBoolean,
     date: InputDate,
     datetime: InputDatetime,

package/dist/ui/input/textRich/InputTextRich.svelte

@@ -2,10 +2,10 @@
 import { Editor } from "@tiptap/core";
 import debounce from "debounce";
 import { jsonParse } from "../../../utils/jsonParse.js";
+import { FormControl } from "../../index.js";
 import ToolsBar from "./ToolsBar.svelte";
 import { extensions } from "./extensions.js";
 export let value = "";
-export let key = "";
 export let classToolbar = "";
 let element;
 let editor = null;
@@ -38,7 +38,6 @@ const updateValue = debounce(() => {
   if (!editor)
     return;
   const newValue = JSON.stringify(editor.getJSON());
-  console.log(newValue);
   if (newValue === value)
     return;
   value = newValue;
@@ -46,13 +45,14 @@ const updateValue = debounce(() => {
 }, 120);
 </script>
 
-<div class="bordered relative rounded-lg border">
-	{#if editor}
-		<ToolsBar {editor} class={classToolbar} />
+<FormControl {...$$restProps} let:key>
+	<div class="bordered relative rounded-lg border">
+		{#if editor}
+			<ToolsBar {editor} class={classToolbar} />
+		{/if}
+		<div bind:this={element} class="min-h-[20rem] p-4 pb-10" />
+	</div>
+	{#if key}
+		<input type="hidden" name={key} {value} />
 	{/if}
-	<div bind:this={element} class="min-h-[20rem] p-4 pb-10" />
-</div>
-
-{#if key}
-	<input type="hidden" name={key} {value} />
-{/if}
+</FormControl>

package/dist/ui/input/textRich/InputTextRich.svelte.d.ts

@@ -1,8 +1,17 @@
 import { SvelteComponent } from "svelte";
 declare const __propDef: {
     props: {
-        value?: string | undefined;
+        class?: string | undefined;
+        classLabel?: string | undefined;
         key?: string | undefined;
+        label?: string | undefined;
+        error?: string | undefined;
+        hint?: string | undefined;
+        prefix?: string | number | undefined;
+        prefixFor?: string | number | undefined;
+        enhanceDisabled?: boolean | undefined;
+    } & {
+        value?: string | undefined;
         classToolbar?: string | undefined;
     };
     events: {

package/dist/ui/input/textRich/index.d.ts

@@ -0,0 +1,2 @@
+export * from './tiptapParser.js';
+export { default as InputTextRich } from './InputTextRich.svelte';

package/dist/ui/input/textRich/index.js

@@ -0,0 +1,2 @@
+export * from './tiptapParser.js';
+export { default as InputTextRich } from './InputTextRich.svelte';

package/dist/ui/input/textRich/tiptapParser.d.ts

@@ -0,0 +1,4 @@
+export declare const tiptapParser: {
+    toHTML(jsonAsString: string): string;
+    toJSON(html: string): string;
+};

package/dist/ui/input/textRich/tiptapParser.js

@@ -0,0 +1,29 @@
+import { generateHTML, generateJSON } from '@tiptap/html';
+import { extensions } from './extensions.js';
+import { jsonParse } from '../../../utils/jsonParse.js';
+export const tiptapParser = {
+    toHTML(jsonAsString) {
+        try {
+            if (!jsonAsString.startsWith('{'))
+                return jsonAsString;
+            const json = jsonParse(jsonAsString, []);
+            if (!json)
+                return '';
+            return generateHTML(json, extensions);
+        }
+        catch (err) {
+            console.error(err);
+            return '';
+        }
+    },
+    toJSON(html) {
+        try {
+            const json = generateJSON(html, extensions);
+            return JSON.stringify(json);
+        }
+        catch (err) {
+            console.error(err);
+            return '';
+        }
+    }
+};

package/dist/ui/tabs/Tabs.svelte

@@ -15,6 +15,7 @@ export { klass as class };
 		{@const active = tab.isActive ?? $page.url.pathname.startsWith(tab.href)}
 		<a
 			href={tab.href}
+			data-sveltekit-noscroll
 			class="
         menu-item grow flex-col justify-center gap-0 rounded-lg py-2
         text-sm lg:flex-row lg:gap-3 lg:text-base

package/dist/utils/index.d.ts

@@ -5,3 +5,4 @@ export * from './formatRange.js';
 export * from './options.js';
 export * from './avatar.js';
 export * from './tippy.js';
+export * from './nestedPaths.js';

package/dist/utils/index.js

@@ -5,3 +5,4 @@ export * from './formatRange.js';
 export * from './options.js';
 export * from './avatar.js';
 export * from './tippy.js';
+export * from './nestedPaths.js';

package/dist/utils/nestedPaths.d.ts

@@ -0,0 +1,24 @@
+export type GenericObject = Record<PropertyKey, unknown>;
+type Join<L extends PropertyKey | undefined, R extends PropertyKey | undefined> = L extends string | number ? R extends string | number ? `${L}.${R}` : L : R extends string | number ? R : undefined;
+type Union<L extends unknown | undefined, R extends unknown | undefined> = L extends undefined ? R extends undefined ? undefined : R : R extends undefined ? L : L | R;
+/**
+ * NestedPaths
+ * Get all the possible paths of an object
+ * @example
+ * type Keys = NestedPaths<{ a: { b: { c: string } }>
+ * // 'a' | 'a.b' | 'a.b.c'
+ */
+export type NestedPaths<T extends GenericObject, Prev extends PropertyKey | undefined = undefined, Path extends PropertyKey | undefined = undefined> = {
+    [K in keyof T]: Required<T>[K] extends GenericObject ? NestedPaths<Required<T>[K], Union<Prev, Path>, Join<Path, K>> : Union<Union<Prev, Path>, Join<Path, K>>;
+}[keyof T];
+/**
+ * TypeFromPath
+ * Get the type of the element specified by the path
+ * @example
+ * type TypeOfAB = TypeFromPath<{ a: { b: { c: string } }, 'a.b'>
+ * // { c: string }
+ */
+export type TypeFromPath<T extends GenericObject, Path extends string> = {
+    [K in Path]: K extends keyof T ? T[K] : K extends `${infer P}.${infer S}` ? T[P] extends GenericObject ? TypeFromPath<T[P], S> : never : never;
+}[Path];
+export {};

package/dist/utils/nestedPaths.js

@@ -0,0 +1,2 @@
+// thanks https://javascript.plainenglish.io/advanced-typescript-type-level-nested-object-paths-7f3d8901f29a
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.1.19",
+  "version": "0.1.22",
   "description": "My fullstack material build with sveltekit, daisyui, zod and more",
   "author": {
     "name": "Jonas Voisard",
@@ -33,6 +33,7 @@
     "@sveltejs/kit": "^2.5.6",
     "@sveltejs/package": "^2.0.0",
     "@sveltejs/vite-plugin-svelte": "^3.0.0",
+    "@tailwindcss/typography": "^0.5.13",
     "@types/debounce": "^1.2.4",
     "@types/eslint": "^8.56.0",
     "@types/node": "^20.12.7",
@@ -72,6 +73,7 @@
     "@tiptap/extension-text-align": "^2.3.0",
     "@tiptap/extension-text-style": "^2.3.0",
     "@tiptap/extension-youtube": "^2.3.0",
+    "@tiptap/html": "^2.3.0",
     "@tiptap/pm": "^2.3.0",
     "@tiptap/starter-kit": "^2.3.0",
     "@tiptap/suggestion": "^2.3.0",