@flightlesslabs/dodo-ui 0.7.2 → 0.9.0

package/dist/stories/components/Form/PasswordInput/Events/Events.stories.svelte

@@ -31,7 +31,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: PasswordInputToggleEvent` -->
 <Story
   name="Toggle"
   args={{
@@ -43,7 +42,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputFocusEvent` -->
 <Story
   name="Focus"
   args={{
@@ -55,7 +53,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputFocusEvent` -->
 <Story
   name="Blur"
   args={{
@@ -67,7 +64,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputClipboardEvent` -->
 <Story
   name="Copy"
   args={{
@@ -79,7 +75,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputClipboardEvent` -->
 <Story
   name="Cut"
   args={{
@@ -91,7 +86,6 @@ const { Story } = defineMeta({
   }}
 />
 
-<!-- `e: TextInputClipboardEvent` -->
 <Story
   name="Paste"
   args={{
@@ -102,3 +96,30 @@ const { Story } = defineMeta({
     },
   }}
 />
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: TextInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: TextInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: TextInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte

@@ -5,21 +5,19 @@
 import UtilityButton from '../../../developer tools/components/UtilityButton/UtilityButton.svelte';
 import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
 import { DynamicInput } from '../../../../index.js';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
+let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, oninput, onchange, onblur, onfocus, onpaste, oncopy, oncut, onkeydown, onkeypress, onkeyup, before, after, customPasswordToggleIcon, error = false, passwordToggle = true, passwordToggleState = $bindable(), value = $bindable(), placeholder, ontoggle, ref = $bindable(), readonly = false, } = $props();
 let focused = $state(false);
 let toggle = $state(passwordToggleState);
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 let customPasswordToggleIconTyped = customPasswordToggleIcon;
 function onfocusMod(e) {
     const eTyped = e;
-    focused = true;
     if (onfocus) {
         onfocus(eTyped);
     }
 }
 function onblurMod(e) {
     const eTyped = e;
-    focused = false;
     if (onblur) {
         onblur(eTyped);
     }
@@ -51,6 +49,7 @@ function ontoggleMod(e) {
       {id}
       {disabled}
       bind:ref
+      bind:focused
       {oninput}
       {onchange}
       onfocus={onfocusMod}
@@ -58,6 +57,9 @@ function ontoggleMod(e) {
       {onpaste}
       {oncopy}
       {oncut}
+      onkeydown={onkeydown ? (e) => onkeydown(e as TextInputKeyboardEvent) : undefined}
+      onkeypress={onkeypress ? (e) => onkeypress(e as TextInputKeyboardEvent) : undefined}
+      onkeyup={onkeyup ? (e) => onkeyup(e as TextInputKeyboardEvent) : undefined}
       {placeholder}
       bind:value
       {readonly}

package/dist/stories/components/Form/PasswordInput/PasswordInput.svelte.d.ts

@@ -1,7 +1,7 @@
 import type { ComponentSize } from '../../../../types/size.js';
 import type { ComponentRoundness } from '../../../../types/roundness.js';
 import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler } from 'svelte/elements';
+import type { ChangeEventHandler, ClipboardEventHandler, FocusEventHandler, FormEventHandler, KeyboardEventHandler } from 'svelte/elements';
 export type PasswordInputToggleEvent = {
     event: Event;
     toggle: boolean;
@@ -57,6 +57,12 @@ export interface PasswordInputProps {
     oncut?: ClipboardEventHandler<HTMLInputElement>;
     /** ontoggle event handler */
     ontoggle?: (e: PasswordInputToggleEvent) => void;
+    /** onkeydown event handler */
+    onkeydown?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeypress event handler */
+    onkeypress?: KeyboardEventHandler<HTMLInputElement>;
+    /** onkeyup event handler */
+    onkeyup?: KeyboardEventHandler<HTMLInputElement>;
 }
 declare const PasswordInput: import("svelte").Component<PasswordInputProps, {}, "ref" | "value" | "passwordToggleState">;
 type PasswordInput = ReturnType<typeof PasswordInput>;

package/dist/stories/components/Form/Select/Customize/Customize.stories.svelte

@@ -3,6 +3,7 @@ import Select, {} from '../Select.svelte';
 import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
 import { Menu } from '../../../../../index.js';
 import MenuItem from '../../../Layout/Menu/MenuItem/MenuItem.svelte';
+import Icon from '@iconify/svelte';
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
 const { Story } = defineMeta({
     component: Select,
@@ -30,6 +31,19 @@ let value = $state(options[0]);
   </Select>
 </Story>
 
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#snippet customDropdownArrowIcon(open)}
+      {#if open}
+        <Icon icon="mingcute:up-fill" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:down-fill" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </Select>
+</Story>
+
 <!-- Format look and feel of Popper menu item.  -->
 <Story name="CustomMenuItem" asChild>
   <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
@@ -51,13 +65,14 @@ let value = $state(options[0]);
 <!-- Format look and feel of Popup.  -->
 <Story name="CustomPopup" asChild>
   <Select {options} {value}>
-    {#snippet customPopupContent(options, selectedOption)}
+    {#snippet customPopupContent(options, selectedOption, onselect)}
       <Menu size="small" separator>
         {#each options as option (option.value)}
           <MenuItem
             type="button"
             disabled={option.disabled}
             selected={selectedOption.value === option.value}
+            onclick={() => onselect(option)}
           >
             <b>{option.label}</b>
           </MenuItem>

package/dist/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.svelte

@@ -0,0 +1,59 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import Select, {} from '../Select.svelte';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+import Icon from '@iconify/svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '400px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story
+  name="PositionAfter"
+  args={{ options, value, onselect: (val: SelectOption) => (value = val) }}
+/>
+
+<Story
+  name="PositionBefore"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    dropdownArrowPosition: 'before',
+  }}
+/>
+
+<Story
+  name="HideArrow"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    dropdownArrowPosition: false,
+  }}
+/>
+
+<!-- Format look and feel Dropdown Arrow icon  -->
+<Story name="CustomDropdownArrowIcon" asChild>
+  <Select {options} {value} onselect={(val: SelectOption) => (value = val)}>
+    {#snippet customDropdownArrowIcon(open)}
+      {#if open}
+        <Icon icon="mingcute:up-fill" width="24" height="24" />
+      {:else}
+        <Icon icon="mingcute:down-fill" width="24" height="24" />
+      {/if}
+    {/snippet}
+  </Select>
+</Story>

package/dist/stories/components/Form/Select/DropDownArrow/DropDownArrow.stories.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 DropDownArrow: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type DropDownArrow = InstanceType<typeof DropDownArrow>;
+export default DropDownArrow;

package/dist/stories/components/Form/Select/Events/Events.stories.svelte

@@ -136,3 +136,30 @@ let value = $state(options[0]);
     },
   }}
 />
+
+<Story
+  name="KeyDown"
+  args={{
+    onkeydown: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeydown Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyPress"
+  args={{
+    onkeypress: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeypress Event', e.key);
+    },
+  }}
+/>
+
+<Story
+  name="KeyUp"
+  args={{
+    onkeyup: (e: DynamicInputKeyboardEvent) => {
+      console.log('onkeyup Event', e.key);
+    },
+  }}
+/>

package/dist/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -0,0 +1,54 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { selectOptions, storySelectArgTypes } from '../../Select.stories.svelte';
+import Select, {} from '../../Select.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '200px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<!-- Positions will auto adjust depending on the space on top and bottom -->
+<Story
+  name="PositionAutoAdjust"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+  }}
+/>
+
+<!-- Positions will not auto adjust if you use `lockPoistions` -->
+<Story
+  name="LockPoistions"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    lockPoistions: true,
+  }}
+/>
+
+<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
+<Story
+  name="HeightForVerticalPosition"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popperHeightForVerticalPosition: 3,
+  }}
+/>

package/dist/stories/components/Form/Select/Positions/AutoPosition/AutoPosition.stories.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 AutoPosition: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type AutoPosition = InstanceType<typeof AutoPosition>;
+export default AutoPosition;

package/dist/stories/components/Form/Select/Positions/Positions.stories.svelte

@@ -0,0 +1,83 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { selectOptions, storySelectArgTypes } from '../Select.stories.svelte';
+import Select, {} from '../Select.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Select,
+    tags: ['autodocs'],
+    argTypes: storySelectArgTypes,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            story: {
+                height: '600px',
+                inline: false,
+            },
+        },
+    },
+});
+const options = selectOptions;
+let value = $state(options[0]);
+</script>
+
+<Story
+  name="BottomLeft"
+  args={{ options, value, onselect: (val: SelectOption) => (value = val), popupMaxHeight: '200px' }}
+/>
+
+<Story
+  name="BottomCenter"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionX: 'center',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="BottomRight"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionX: 'right',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="TopLeft"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="TopCenter"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popupPositionX: 'center',
+    popupMaxHeight: '200px',
+  }}
+/>
+
+<Story
+  name="TopRight"
+  args={{
+    options,
+    value,
+    onselect: (val: SelectOption) => (value = val),
+    popupPositionY: 'top',
+    popupPositionX: 'right',
+    popupMaxHeight: '200px',
+  }}
+/>

package/dist/stories/components/Form/Select/Positions/Positions.stories.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 Positions: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Positions = InstanceType<typeof Positions>;
+export default Positions;