fuma 0.1.32 → 0.1.34

package/dist/ui/input/InputCombo.svelte

@@ -32,7 +32,7 @@ async function select(index = focusIndex) {
 }
 </script>
 
-<DropDown {tippyProps} isWidthOfActivator>
+<DropDown {tippyProps}>
 	<div class="contents" slot="activator">
 		<FormControl {...props} let:key>
 			<div class="flex grow gap-2" class:hidden={selectedOption}>

package/dist/ui/input/InputRelation.svelte

@@ -61,7 +61,7 @@ async function handleBlur() {
 }
 </script>
 
-<DropDown {tippyProps} disable={flatMode} isWidthOfActivator>
+<DropDown {tippyProps} disable={flatMode}>
 	<div class="contents" slot="activator">
 		<FormControl {key} {label} {error} class={klass} let:key>
 			<div class="flex grow gap-2" class:hidden={item}>

package/dist/ui/input/InputRelations.svelte

@@ -74,7 +74,7 @@ async function handleBlur() {
 }
 </script>
 
-<DropDown bind:this={dropdown} disable={flatMode} isWidthOfActivator>
+<DropDown bind:this={dropdown} disable={flatMode}>
 	<div slot="activator">
 		<FormControl {key} {label} {error} class={klass}>
 			<div class="flex flex-col gap-2">

package/dist/ui/input/InputSelect.svelte

@@ -25,8 +25,8 @@ function onSelect(index) {
 }
 </script>
 
-<DropDown bind:this={dropDown} isWidthOfActivator>
-	<div class="contents" slot="activator">
+<DropDown bind:this={dropDown}>
+	<svelte:fragment slot="activator">
 		<FormControl {...props} let:key>
 			<button
 				bind:this={button}
@@ -46,7 +46,7 @@ function onSelect(index) {
 			</button>
 			<input type="hidden" name={key} {value} />
 		</FormControl>
-	</div>
+	</svelte:fragment>
 
 	<SelectorList
 		trigger={button}

package/dist/ui/input/RelationAfter.svelte

@@ -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/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,40 @@
+<script>import { createEventDispatcher } from "svelte";
+import { SelectorList, DropDown, Icon } from "../index.js";
+import { parseOptions } from "../../utils/options.js";
+import { mdiUnfoldMoreHorizontal } from "@mdi/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fuma",
-  "version": "0.1.32",
+  "version": "0.1.34",
   "description": "My fullstack material build with sveltekit, daisyui, zod and more",
   "author": {
     "name": "Jonas Voisard",