fuma 0.1.32 → 0.2.1

package/dist/ui/input/InputSelect.svelte.d.ts

@@ -1,7 +1,7 @@
 import { SvelteComponent } from "svelte";
-import { type InputProps } from '../index.js';
+import { type InputProps } from './index.js';
 import { type Options } from '../../utils/options.js';
-import type { TippyProps } from '../../index.js';
+import type { TippyProps } from '../../utils/tippy.js';
 declare const __propDef: {
     props: Omit<InputProps, "input" | "inputElement"> & {
         options: Options;

package/dist/ui/input/RelationAfter.svelte

@@ -1,7 +1,7 @@
 <script>import { fade } from "svelte/transition";
 import { createEventDispatcher } from "svelte";
 import { mdiLoading, mdiPlus } from "@mdi/js";
-import Icon from "../Icon.svelte";
+import Icon from "../icon/Icon.svelte";
 export let isLoading;
 export let createUrl = "";
 export let createTitle = "";
@@ -10,17 +10,15 @@ const dispatch = createEventDispatcher();
 </script>
 
 {#if isLoading}
-	<div class:right-10={createUrl} transition:fade|local>
+	<div in:fade|local>
 		<Icon
 			path={mdiLoading}
 			class="w-9"
 			classSVG="animate-spin fill-primary-ligther stroke-primary-ligther"
 		/>
 	</div>
-{/if}
-
-{#if createUrl}
-	<a href={createUrl} class="btn btn-square btn-sm">
+{:else if createUrl}
+	<a href={createUrl} class="btn btn-square btn-sm" in:fade|local={{ duration: 200 }}>
 		<Icon path={createIcon} on:click={() => dispatch('create')} title={createTitle} />
 	</a>
 {/if}

package/dist/ui/input/action.js

@@ -1,6 +1,6 @@
 import { get } from 'svelte/store';
 import debounce from 'debounce';
-import { urlParam } from '../../index.js';
+import { urlParam } from '../../store/param.js';
 import { goto } from '$app/navigation';
 export function bindValueWithParams(node, { bindEnable = false, debounceTime = 200, initValue = (initalValue) => (node.value = initalValue), listenerType = 'input' }) {
     const { name } = node;

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

@@ -2,7 +2,6 @@ export * from './types.js';
 export * from './action.js';
 export { default as FormControl } from './FormControl.svelte';
 export { default as InputText } from './InputText.svelte';
-export { default as InputTextRich } from './textRich/InputTextRich.svelte';
 export { default as InputPassword } from './InputPassword.svelte';
 export { default as InputTextarea } from './InputTextarea.svelte';
 export { default as InputRelations } from './InputRelations.svelte';

package/dist/ui/input/index.js

@@ -2,7 +2,6 @@ export * from './types.js';
 export * from './action.js';
 export { default as FormControl } from './FormControl.svelte';
 export { default as InputText } from './InputText.svelte';
-export { default as InputTextRich } from './textRich/InputTextRich.svelte';
 export { default as InputPassword } from './InputPassword.svelte';
 export { default as InputTextarea } from './InputTextarea.svelte';
 export { default as InputRelations } from './InputRelations.svelte';

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

@@ -2,7 +2,7 @@
 import { Editor } from "@tiptap/core";
 import debounce from "debounce";
 import { jsonParse } from "../../../utils/jsonParse.js";
-import { FormControl } from "../../index.js";
+import { FormControl } from "../index.js";
 import ToolsBar from "./ToolsBar.svelte";
 import { extensions } from "./extensions.js";
 export let value = "";

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

@@ -10,7 +10,7 @@ declare const __propDef: {
         prefix?: string | number | undefined;
         prefixFor?: string | number | undefined;
         enhanceDisabled?: boolean | undefined;
-        labelPosition?: ("top" | "left" | "right") | undefined;
+        labelPosition?: ("top" | "right" | "left") | undefined;
     } & {
         value?: string | undefined;
         classToolbar?: string | undefined;

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

@@ -1,4 +1,4 @@
-<script>import { Icon } from "../../index.js";
+<script>import { Icon } from "../../icon/index.js";
 import { tip } from "../../../action/tip.js";
 export let editor;
 export let key;

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

@@ -1,4 +1,4 @@
-<script>import { Icon } from "../../index.js";
+<script>import { Icon } from "../../icon/index.js";
 import { tip } from "../../../action/tip.js";
 export let icon;
 export let label;

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

@@ -1,5 +1,6 @@
 <script>import { mdiLinkVariant } from "@mdi/js";
-import { Dialog, InputText } from "../../index.js";
+import { Dialog } from "../../dialog/index.js";
+import { InputText } from "../index.js";
 import { z } from "../../../validation/zod.js";
 import ToolMark from "./ToolMark.svelte";
 export let editor;

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

@@ -1,5 +1,6 @@
 <script>import { mdiChevronDown } from "@mdi/js";
-import { Icon, DropDown } from "../../index.js";
+import { Icon } from "../../icon/index.js";
+import { DropDown } from "../../menu/index.js";
 export let editor;
 export let tools;
 export let hideLabel = false;

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

@@ -1,6 +1,6 @@
 <script>import { createEventDispatcher } from "svelte";
 import { mdiPlus, mdiMinus, mdiImageOutline, mdiYoutube, mdiAt } from "@mdi/js";
-import { Icon } from "../../index.js";
+import { Icon } from "../../icon/index.js";
 import ToolMenu from "./ToolMenu.svelte";
 import { suggestionItems } from "./suggestion.js";
 export let editor;

package/dist/ui/{Login.svelte → login/Login.svelte}

@@ -1,7 +1,7 @@
 <script>import { slide } from "svelte/transition";
-import { InputText, InputPassword } from "./index.js";
-import { useForm } from "../validation/form.js";
 import { page } from "$app/stores";
+import { InputText, InputPassword } from "../input/index.js";
+import { useForm } from "../../validation/form.js";
 export let onSuccess = void 0;
 const { enhance } = useForm({
   onSuccess,

package/dist/ui/login/index.d.ts

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

package/dist/ui/login/index.js

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

package/dist/ui/menu/ContextMenu.svelte

@@ -1,5 +1,6 @@
 <script>import { createEventDispatcher } from "svelte";
-import { Dialog, DropDown } from "../../index.js";
+import { Dialog } from "../dialog/index.js";
+import { DropDown } from "./index.js";
 import { isSmallScreen } from "../../store/index.js";
 export let tippyProps = {};
 let klass = "";

package/dist/ui/menu/DropDown.svelte

@@ -26,7 +26,6 @@ export let hideOnNav = true;
 export let tip = void 0;
 export let disable = false;
 export let content = void 0;
-export let isWidthOfActivator = false;
 let activator;
 beforeNavigate(() => hideOnNav && hide());
 onMount(() => {
@@ -94,7 +93,6 @@ export function setTippyProps(props) {
 
 		<div class="hidden">
 			<div
-				style={isWidthOfActivator ? `width: ${activator?.offsetWidth}px;` : ''}
 				class="{klass} max-h-80 overflow-auto rounded-lg border bg-base-100 p-1 shadow-lg"
 				bind:this={content}
 			>

package/dist/ui/menu/DropDown.svelte.d.ts

@@ -15,7 +15,6 @@ declare const __propDef: {
         tip?: TippyInstance | undefined;
         disable?: boolean | undefined;
         content?: HTMLDivElement | undefined;
-        isWidthOfActivator?: boolean | undefined;
         hide?: (() => void) | undefined;
         show?: (() => void) | undefined;
         setTippyProps?: ((props: Partial<TippyProps>) => void) | undefined;

package/dist/ui/menu/DropDownMenu.svelte

@@ -0,0 +1,42 @@
+<script>import { createEventDispatcher } from "svelte";
+import { mdiUnfoldMoreHorizontal } from "@mdi/js";
+import { Icon } from "../icon/index.js";
+import { DropDown } from "./index.js";
+import { SelectorList } from "../input/index.js";
+import { parseOptions } from "../../utils/options.js";
+export let options;
+$:
+  _options = parseOptions(options);
+let trigger;
+let dropDown;
+const dispatch = createEventDispatcher();
+function onSelect(index) {
+  const option = _options[index];
+  dispatch("select", option.value);
+  dropDown.hide();
+}
+</script>
+
+<DropDown bind:this={dropDown}>
+	<div class="contents" bind:this={trigger} slot="activator">
+		<slot>
+			<button type="button" class="flex h-12 items-center gap-2 rounded-lg border pl-4 pr-2">
+				<span>Menu</span>
+				<Icon class="ml-auto" path={mdiUnfoldMoreHorizontal} size={18} />
+			</button>
+		</slot>
+	</div>
+
+	<SelectorList
+		{trigger}
+		items={_options.map((opt) => ({ id: opt.value, ...opt }))}
+		let:item
+		on:select={({ detail }) => onSelect(detail)}
+		class="w-full"
+	>
+		{#if item.icon}
+			<Icon path={item.icon} size={18} class="opacity-70" />
+		{/if}
+		<span class="whitespace-nowrap pr-4">{item.label}</span>
+	</SelectorList>
+</DropDown>

package/dist/ui/menu/DropDownMenu.svelte.d.ts

@@ -0,0 +1,21 @@
+import { SvelteComponent } from "svelte";
+import { type Options } from '../../utils/options.js';
+declare const __propDef: {
+    props: {
+        options: Options;
+    };
+    events: {
+        select: CustomEvent<string>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export type DropDownMenuProps = typeof __propDef.props;
+export type DropDownMenuEvents = typeof __propDef.events;
+export type DropDownMenuSlots = typeof __propDef.slots;
+export default class DropDownMenu extends SvelteComponent<DropDownMenuProps, DropDownMenuEvents, DropDownMenuSlots> {
+}
+export {};

package/dist/ui/menu/index.d.ts

@@ -1,2 +1,3 @@
 export { default as DropDown } from './DropDown.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as DropDownMenu } from './DropDownMenu.svelte';

package/dist/ui/menu/index.js

@@ -1,2 +1,3 @@
 export { default as DropDown } from './DropDown.svelte';
 export { default as ContextMenu } from './ContextMenu.svelte';
+export { default as DropDownMenu } from './DropDownMenu.svelte';

package/dist/ui/{ToggleMode.svelte → mode/ToggleMode.svelte}

@@ -1,6 +1,6 @@
 <script>import { browser } from "$app/environment";
 import { ModeWatcher, toggleMode, mode } from "mode-watcher";
-import { Icon } from "../index.js";
+import { Icon } from "../icon/index.js";
 import { mdiWeatherNight, mdiWhiteBalanceSunny } from "@mdi/js";
 mode.subscribe((_mode) => {
   if (!browser)

package/dist/ui/mode/index.d.ts

@@ -0,0 +1,2 @@
+export { default as ToggleMode } from './ToggleMode.svelte';
+export { mode, setMode, resetMode, toggleMode, userPrefersMode, systemPrefersMode } from 'mode-watcher';

package/dist/ui/mode/index.js

@@ -0,0 +1,2 @@
+export { default as ToggleMode } from './ToggleMode.svelte';
+export { mode, setMode, resetMode, toggleMode, userPrefersMode, systemPrefersMode } from 'mode-watcher';

package/dist/ui/{Pagination.svelte → pagination/Pagination.svelte}

@@ -1,6 +1,6 @@
 <script>import { mdiChevronLeft, mdiChevronRight } from "@mdi/js";
-import { Icon } from "../index.js";
-import { urlParam } from "../store/index.js";
+import { Icon } from "../icon/index.js";
+import { urlParam } from "../../store/index.js";
 export let take = 20;
 $:
   skip = +($urlParam.get("skip") || 0);

package/dist/ui/pagination/index.d.ts

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

package/dist/ui/pagination/index.js

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

package/dist/ui/period/PeriodPickerButton.svelte

@@ -1,9 +1,12 @@
 <script>import { mdiCalendarMonthOutline, mdiClose } from "@mdi/js";
 import { goto } from "$app/navigation";
 import { page } from "$app/stores";
-import { Icon, DropDown, InputTime, PeriodPicker } from "../index.js";
-import { formatRange } from "../../utils/formatRange.js";
 import { urlParam } from "../../store/param.js";
+import { formatRange } from "../../utils/formatRange.js";
+import { Icon } from "../icon/index.js";
+import { DropDown } from "../menu/index.js";
+import { InputTime } from "../input/index.js";
+import { PeriodPicker } from "./index.js";
 let dropDown;
 const start = $page.url.searchParams.get("start")?.split("T") || [];
 const end = $page.url.searchParams.get("end")?.split("T") || [];

package/dist/ui/{PlaceholderImage.svelte → placeholder/PlaceholderImage.svelte}

@@ -1,5 +1,5 @@
 <script>import { mdiPlus } from "@mdi/js";
-import { Icon } from "../index.js";
+import { Icon } from "../icon/index.js";
 export let x;
 export let y;
 </script>

package/dist/ui/placeholder/index.d.ts

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

package/dist/ui/placeholder/index.js

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

package/dist/ui/{Slot.svelte → slot/Slot.svelte}

@@ -1,5 +1,5 @@
 <script>import {} from "svelte";
-import { component } from "../index.js";
+import { component } from "../../utils/component.js";
 import Span from "./Span.svelte";
 export let slot = void 0;
 export let args = void 0;

package/dist/ui/slot/index.d.ts

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

package/dist/ui/slot/index.js

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

package/dist/ui/table/Table.svelte

@@ -1,5 +1,5 @@
 <script>import { afterNavigate } from "$app/navigation";
-import { Placeholder } from "../index.js";
+import { Placeholder } from "../placeholder/index.js";
 import {
   TableHead,
   TableBody,

package/dist/ui/table/TableBody.svelte

@@ -1,5 +1,5 @@
 <script>import { createEventDispatcher } from "svelte";
-import { TableCell } from "../index.js";
+import { TableCell } from "./index.js";
 export let items;
 export let fields;
 export let action = void 0;

package/dist/ui/table/TableBody.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type TableField } from '../index.js';
+import { type TableField } from './index.js';
 import type { ComponentAndProps } from '../../utils/component.js';
 declare class __sveltets_Render<Item extends {
     id: string;

package/dist/ui/table/TableFieldsEdition.svelte

@@ -11,8 +11,9 @@ import { page } from "$app/stores";
 import { urlParam } from "../../store/param.js";
 import { listEditable } from "../../action/list/index.js";
 import { jsonParse } from "../../utils/jsonParse.js";
-import { Icon, DropDown } from "../index.js";
 import { context } from "./context.js";
+import { Icon } from "../icon/index.js";
+import { DropDown } from "../menu/index.js";
 export let fields;
 export let key;
 export let onCreateField = void 0;

package/dist/ui/table/TableFieldsEdition.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type TableField } from '../index.js';
+import type { TableField } from './index.js';
 declare class __sveltets_Render<Item extends {
     id: string;
 }> {

package/dist/ui/table/TableViewSelect.svelte

@@ -2,7 +2,10 @@
 import { mdiChevronDown, mdiContentSaveEditOutline, mdiPlus } from "@mdi/js";
 import { page } from "$app/stores";
 import { enhance } from "$app/forms";
-import { Dialog, DropDown, Icon, InputText } from "../index.js";
+import { Icon } from "../icon/index.js";
+import { Dialog } from "../dialog/index.js";
+import { DropDown } from "../menu/index.js";
+import { InputText } from "../input/index.js";
 import { useForm } from "../../validation/form.js";
 export let key;
 export let views;

package/dist/ui/table/cell/TableCellBoolean.svelte

@@ -1,5 +1,5 @@
 <script>import { mdiCheck, mdiClose } from "@mdi/js";
-import { Icon } from "../../index.js";
+import { Icon } from "../../icon/index.js";
 export let value;
 </script>
 

package/dist/ui/table/field.d.ts

@@ -49,7 +49,7 @@ export declare function syncFieldsWithParams(tablekey: string, fields: TableFiel
     $visible: boolean;
     key: string;
     label: string;
-    type: "string" | "number" | "boolean" | "date" | "textarea";
+    type: "string" | "number" | "boolean" | "textarea" | "date";
     options?: Options | undefined;
     hint?: string | undefined;
     locked?: boolean | undefined;

package/dist/ui/table/head/TableHeadDate.svelte

@@ -1,6 +1,7 @@
 <script>import { goto } from "$app/navigation";
 import { page } from "$app/stores";
-import { DropDown, InputTime } from "../../index.js";
+import { DropDown } from "../../menu/index.js";
+import { InputTime } from "../../input/index.js";
 import { formatRange } from "../../../utils/formatRange.js";
 import { PeriodPicker } from "../../period/index.js";
 import { urlParam } from "../../../store/param.js";

package/dist/ui/table/head/TableHeadDate.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type TableField } from '../../index.js';
+import type { TableField } from '../index.js';
 declare const __propDef: {
     props: {
         field: TableField;

package/dist/ui/table/head/TableHeadDefault.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import type { TableField } from '../../index.js';
+import type { TableField } from '../index.js';
 declare const __propDef: {
     props: {
         field: TableField;

package/dist/ui/table/head/TableHeadNumber.svelte

@@ -2,7 +2,8 @@
 import debounce from "debounce";
 import { goto } from "$app/navigation";
 import { page } from "$app/stores";
-import { DropDown, InputNumber } from "../../index.js";
+import { DropDown } from "../../menu/index.js";
+import { InputNumber } from "../../input/index.js";
 import { urlParam } from "../../../store/param.js";
 import { jsonParse } from "../../../utils/jsonParse.js";
 export let field;

package/dist/ui/table/head/TableHeadSelect.svelte

@@ -1,7 +1,8 @@
 <script>import { derived } from "svelte/store";
 import { page } from "$app/stores";
 import { jsonParse } from "../../../utils/jsonParse.js";
-import { DropDown, Icon } from "../../index.js";
+import { DropDown } from "../../menu/index.js";
+import { Icon } from "../../icon/index.js";
 import { parseOptions } from "../../../utils/options.js";
 import { urlParam } from "../../../store/param.js";
 export let field;

package/dist/ui/table/head/TableHeadSelect.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type TableField } from '../../index.js';
+import type { TableField } from '../index.js';
 import { type Options } from '../../../utils/options.js';
 declare const __propDef: {
     props: {

package/dist/ui/table/head/TableHeadString.svelte

@@ -1,6 +1,8 @@
 <script>import { mdiMagnify } from "@mdi/js";
 import { page } from "$app/stores";
-import { DropDown, Icon, InputSearch } from "../../index.js";
+import { DropDown } from "../../menu/index.js";
+import { Icon } from "../../icon/index.js";
+import { InputSearch } from "../../input/index.js";
 export let field;
 let tip;
 let searchValue = $page.url.searchParams.get(field.key) || "";

package/dist/ui/table/head/TableHeadString.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type TableField } from '../../index.js';
+import type { TableField } from '../index.js';
 declare const __propDef: {
     props: {
         field: TableField;

package/dist/ui/tabs/Tabs.svelte

@@ -1,5 +1,5 @@
 <script>import { page } from "$app/stores";
-import { Icon } from "../../index.js";
+import { Icon } from "../icon/index.js";
 export let tabs;
 let klass = "";
 export { klass as class };

package/dist/ui/tabs/TabsIcon.svelte

@@ -1,7 +1,8 @@
 <script>import { page } from "$app/stores";
 import { onMount } from "svelte";
 import { urlParam } from "../../store/index.js";
-import { Icon, parseOptions } from "../../index.js";
+import { Icon } from "../icon/index.js";
+import { parseOptions } from "../../utils/options.js";
 export let options;
 export let showLabel = false;
 export let key;

package/dist/ui/tabs/TabsIcon.svelte.d.ts

@@ -1,5 +1,5 @@
 import { SvelteComponent } from "svelte";
-import { type Options } from '../../index.js';
+import { type Options } from '../../utils/options.js';
 declare const __propDef: {
     props: {
         options: Options;

package/dist/utils/component.js

@@ -1,4 +1,3 @@
-import { InputSelect } from '../ui/index.js';
 export function component(component, props) {
     return { component, props };
 }

package/dist/validation/zod.d.ts

@@ -164,7 +164,7 @@ export declare const z: {
         map: "map";
         set: "set";
     };
-    getParsedType: (data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "nan" | "integer" | "float" | "date" | "null" | "array" | "unknown" | "promise" | "void" | "never" | "map" | "set";
+    getParsedType: (data: any) => "string" | "number" | "bigint" | "boolean" | "symbol" | "undefined" | "object" | "function" | "date" | "map" | "set" | "nan" | "integer" | "float" | "null" | "array" | "unknown" | "promise" | "void" | "never";
     ZodType: typeof zod.ZodType;
     ZodString: typeof zod.ZodString;
     ZodNumber: typeof zod.ZodNumber;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.1.32",
+  "version": "0.2.1",
   "description": "My fullstack material build with sveltekit, daisyui, zod and more",
   "author": {
     "name": "Jonas Voisard",
@@ -12,7 +12,27 @@
   "exports": {
     ".": {
       "types": "./dist/index.d.ts",
-      "svelte": "./dist/index.js"
+      "default": "./dist/index.js"
+    },
+    "./ui": {
+      "types": "./dist/ui/index.d.ts",
+      "default": "./dist/ui/index.js"
+    },
+    "./utils": {
+      "types": "./dist/utils/index.d.ts",
+      "default": "./dist/utils/index.js"
+    },
+    "./store": {
+      "types": "./dist/store/index.d.ts",
+      "default": "./dist/store/index.js"
+    },
+    "./validation": {
+      "types": "./dist/validation/index.d.ts",
+      "default": "./dist/validation/index.js"
+    },
+    "./action": {
+      "types": "./dist/action/index.d.ts",
+      "default": "./dist/action/index.js"
     },
     "./server": {
       "types": "./dist/server/index.d.ts",
@@ -56,7 +76,7 @@
     "tailwindcss": "^3.3.6",
     "tslib": "^2.4.1",
     "typescript": "^5.0.0",
-    "vite": "^5.0.11",
+    "vite": "^5.2.10",
     "vitest": "^1.2.0"
   },
   "dependencies": {