@flightlesslabs/dodo-ui 0.6.5 → 0.7.0

package/dist/stories/developer tools/components/Popper/Popper.stories.svelte

@@ -0,0 +1,119 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { Menu, MenuItem, Popper } from '../../../../index.js';
+import Button from '../../../components/Form/Button/Button.svelte';
+import { positionXArray, positionYArray } from '../../../../types/position.js';
+export const storyPopperArgTypes = {
+    popupPositionX: {
+        control: { type: 'select' },
+        options: positionXArray,
+    },
+    popupPositionY: {
+        control: { type: 'select' },
+        options: positionYArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Popper,
+    tags: ['autodocs'],
+    argTypes: storyPopperArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '200px',
+                inline: false,
+            },
+        },
+    },
+});
+let open = $state(false);
+</script>
+
+<Story name="Default" args={{ open, onClickOutside: () => (open = false) }} asChild>
+  <Popper {open} onClickOutside={() => (open = false)}>
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="MenuOpen" args={{ open: true }} asChild>
+  <Popper open>
+    Hello! how are you doing?
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story
+  name="CustomPaperProps"
+  args={{
+    open: true,
+    paperProps: {
+      color: 'primary',
+    },
+  }}
+  asChild
+>
+  <Popper
+    open
+    paperProps={{
+      color: 'primary',
+    }}
+  >
+    Hello! how are you doing?
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story name="FullWidth" asChild>
+  <Popper {open} fullWidth onClickOutside={() => (open = false)}>
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<Story
+  name="CustomPopup"
+  args={{
+    open,
+    onClickOutside: () => (open = false),
+  }}
+  asChild
+>
+  <Popper {open} onClickOutside={() => (open = false)}>
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+
+    {#snippet customPopup(popperLocation)}
+      {#if open}
+        <Menu>
+          <MenuItem>{popperLocation?.height}</MenuItem>
+          <MenuItem>{popperLocation?.width}</MenuItem>
+        </Menu>
+      {/if}
+    {/snippet}
+  </Popper>
+</Story>

package/dist/stories/developer tools/components/Popper/Popper.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { StoryBookArgTypes } from '../../../../storybook-types.js';
+import { Popper } from '../../../../index.js';
+export declare const storyPopperArgTypes: StoryBookArgTypes;
+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 Popper: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Popper = InstanceType<typeof Popper>;
+export default Popper;

package/dist/stories/developer tools/components/Popper/Popper.svelte

@@ -0,0 +1,77 @@
+<script lang="ts" module>import PopperPopup from './PopperPopup/PopperPopup.svelte';
+import { clickOutside } from '../../directives/clickOutside/clickOutside.js';
+</script>
+
+<script lang="ts">"use strict";
+let { children, popupChildren, id, class: className = '', ref = $bindable(), open = false, popupRef = $bindable(), paperProps, popupMaxHeight, popupWidth, popupClass, popupPositionX, popupPositionY, popupOffsetX, popupOffsetY, onClickOutside = () => { }, customPopup, popperHeightForVerticalPosition, lockPoistions, fullWidth = false, } = $props();
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+let customPopupTyped = customPopup;
+let popperContainerRef = $state();
+let popperLocation = $state();
+function capturePopperLocation() {
+    if (!popperContainerRef) {
+        return;
+    }
+    popperLocation = popperContainerRef.getBoundingClientRect();
+}
+$effect(() => {
+    if (!popperContainerRef) {
+        return;
+    }
+    capturePopperLocation();
+    window.addEventListener('resize', capturePopperLocation);
+    return () => {
+        window.removeEventListener('resize', capturePopperLocation);
+    };
+});
+</script>
+
+<div
+  class:fullWidth
+  class={['dodo-ui-Popper', className].join(' ')}
+  bind:this={ref}
+  {id}
+  use:clickOutside={onClickOutside}
+>
+  <div class="PopperContainer" bind:this={popperContainerRef}>
+    {#if children}
+      {@render children()}
+    {/if}
+  </div>
+
+  {#if customPopupTyped}
+    {@render customPopupTyped(popperLocation)}
+  {:else if open && popperLocation}
+    <PopperPopup
+      {popperLocation}
+      {paperProps}
+      {popupMaxHeight}
+      {popupWidth}
+      {popupPositionX}
+      {popupPositionY}
+      {popupOffsetX}
+      {popupOffsetY}
+      {popperHeightForVerticalPosition}
+      {lockPoistions}
+      class={popupClass}
+    >
+      {#if popupChildren}
+        {@render popupChildren()}
+      {/if}
+    </PopperPopup>
+  {/if}
+</div>
+
+<style>.dodo-ui-Popper {
+  position: relative;
+  display: inline-flex;
+  flex-wrap: wrap;
+}
+.dodo-ui-Popper.fullWidth {
+  display: flex;
+  width: 100%;
+}
+.dodo-ui-Popper.fullWidth .PopperContainer {
+  display: block;
+  width: 100%;
+}</style>

package/dist/stories/developer tools/components/Popper/Popper.svelte.d.ts

@@ -0,0 +1,50 @@
+import type { Snippet } from 'svelte';
+import type { PaperProps } from '../../../components/Layout/Paper/Paper.svelte';
+import type { PositionX, PositionY } from '../../../../types/position.js';
+export interface PopperProps {
+    /** Popper contents goes here */
+    children?: Snippet;
+    /** Popper ref */
+    ref?: HTMLDivElement;
+    /** Id */
+    id?: string;
+    /** Title (for tooltip) */
+    title?: string;
+    /** Custom css class*/
+    class?: string;
+    /** Open popper */
+    open?: boolean;
+    /** Full width Popper? */
+    fullWidth?: boolean;
+    /** PopperPopup ref */
+    popupRef?: HTMLDivElement;
+    /** PopperPopup contents goes here */
+    popupChildren?: Snippet;
+    /** PaperProps: Paper component props for PopperPopup */
+    paperProps?: Partial<PaperProps>;
+    /** PopperPopup Max height. Use css compatible value */
+    popupMaxHeight?: string;
+    /** PopperPopup Width. Use css compatible value */
+    popupWidth?: string;
+    /** popup Custom css class*/
+    popupClass?: string;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** vertical offset/gap between Popup and content  */
+    popupOffsetY?: number;
+    /** Horizontal offset/gap between Popup and content  */
+    popupOffsetX?: number;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
+    /** Click Outside event */
+    onClickOutside?: () => void;
+    /** Custom Popup */
+    customPopup?: (popperLocation?: DOMRect) => Snippet;
+}
+declare const Popper: import("svelte").Component<PopperProps, {}, "ref" | "popupRef">;
+type Popper = ReturnType<typeof Popper>;
+export default Popper;

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte

@@ -0,0 +1,60 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { Menu, MenuItem, PopperPopup } from '../../../../../index.js';
+import { positionXArray, positionYArray } from '../../../../../types/position.js';
+export const storyPopperPopupArgTypes = {
+    popupPositionX: {
+        control: { type: 'select' },
+        options: positionXArray,
+    },
+    popupPositionY: {
+        control: { type: 'select' },
+        options: positionYArray,
+    },
+};
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: PopperPopup,
+    tags: ['autodocs'],
+    argTypes: storyPopperPopupArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '200px',
+                inline: false,
+            },
+        },
+    },
+});
+</script>
+
+<Story name="Default" asChild>
+  <PopperPopup>
+    <Menu>
+      <MenuItem>One</MenuItem>
+      <MenuItem>Two</MenuItem>
+      <MenuItem>Three</MenuItem>
+    </Menu>
+  </PopperPopup>
+</Story>
+
+<Story
+  name="CustomPaperProps"
+  args={{
+    paperProps: {
+      color: 'primary',
+    },
+  }}
+  asChild
+>
+  <PopperPopup
+    paperProps={{
+      color: 'primary',
+    }}
+  >
+    <Menu>
+      <MenuItem>One</MenuItem>
+      <MenuItem>Two</MenuItem>
+      <MenuItem>Three</MenuItem>
+    </Menu>
+  </PopperPopup>
+</Story>

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.stories.svelte.d.ts

@@ -0,0 +1,21 @@
+import type { StoryBookArgTypes } from '../../../../../storybook-types.js';
+import { PopperPopup } from '../../../../../index.js';
+export declare const storyPopperPopupArgTypes: StoryBookArgTypes;
+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 PopperPopup: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type PopperPopup = InstanceType<typeof PopperPopup>;
+export default PopperPopup;

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte

@@ -0,0 +1,66 @@
+<script lang="ts" module>import { Paper } from '../../../../../index.js';
+import { getPopupPosition } from './utils/getPopupPosition.js';
+</script>
+
+<script lang="ts">"use strict";
+let { children, paperProps = {}, class: className = '', popupWidth: width, popupMaxHeight: maxHeight, popupPositionX: positionX = 'left', popupPositionY: positionY = 'bottom', popperLocation, ref = $bindable(), popupOffsetX: offsetX = 0, popupOffsetY: offsetY = 12, popperHeightForVerticalPosition = 100, lockPoistions = false, } = $props();
+const popperWidth = $derived(width || '100%');
+const popupMaxHeight = $derived(maxHeight || '400px');
+let left = $state(null);
+let right = $state(null);
+let top = $state(null);
+let bottom = $state(null);
+$effect(() => {
+    const values = getPopupPosition({
+        positionX,
+        positionY,
+        height: popperLocation?.height || 0,
+        width: popperLocation?.width || 0,
+        top: popperLocation?.top || 0,
+        bottom: popperLocation?.bottom || 0,
+        left: popperLocation?.left || 0,
+        right: popperLocation?.right || 0,
+        offsetX: offsetX,
+        offsetY: offsetY,
+        popperHeight: popperHeightForVerticalPosition,
+        lockPoistions,
+    });
+    left = values.left;
+    right = values.right;
+    top = values.top;
+    bottom = values.bottom;
+});
+</script>
+
+<div
+  class={[
+    'dodo-ui-PopperPopup',
+    `positionX--${positionX}`,
+    `positionY--${positionY}`,
+    className,
+  ].join(' ')}
+  bind:this={ref}
+  style={`width: ${popperWidth};
+  ${left !== null ? `left: ${left}px;` : ''}
+  ${right !== null ? `right: ${right}px;` : ''}
+  ${top !== null ? `top: ${top}px;` : ''}
+  ${bottom !== null ? `bottom: ${bottom}px;` : ''}
+  ${positionX === 'center' ? `margin: auto;` : ''}
+  `}
+>
+  <Paper shadow={3} {...paperProps}>
+    <section style={`max-height: ${popupMaxHeight};`}>
+      {#if children}
+        {@render children()}
+      {/if}
+    </section>
+  </Paper>
+</div>
+
+<style>.dodo-ui-PopperPopup {
+  position: absolute;
+  z-index: var(--dodo-ui-z-index-4);
+}
+.dodo-ui-PopperPopup section {
+  overflow: auto;
+}</style>

package/dist/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte.d.ts

@@ -0,0 +1,34 @@
+import type { PaperProps } from '../../../../components/Layout/Paper/Paper.svelte';
+import type { PositionX, PositionY } from '../../../../../types/position.js';
+import type { Snippet } from 'svelte';
+export interface PopperPopupProps {
+    /** Popup contents goes here*/
+    children?: Snippet;
+    /** Popup ref */
+    ref?: HTMLDivElement;
+    /** PaperProps: Paper component props */
+    paperProps?: Partial<PaperProps>;
+    /** Max height. Use css compatible value */
+    popupMaxHeight?: string;
+    /** popup Width. Use css compatible value */
+    popupWidth?: string;
+    /** Custom css class */
+    class?: string;
+    /** Position of Popper content */
+    popperLocation?: DOMRect;
+    /** Popup stick horizontally  */
+    popupPositionX?: PositionX;
+    /** Popup stick vertically  */
+    popupPositionY?: PositionY;
+    /** vertical offset/gap between Popup and content  */
+    popupOffsetY?: number;
+    /** Horizontal offset/gap between Popup and content  */
+    popupOffsetX?: number;
+    /** Lock positions, disable auto top, bottom position based  */
+    lockPoistions?: boolean;
+    /** Popper Height For Vertical Position, default 300 */
+    popperHeightForVerticalPosition?: number;
+}
+declare const PopperPopup: import("svelte").Component<PopperPopupProps, {}, "ref">;
+type PopperPopup = ReturnType<typeof PopperPopup>;
+export default PopperPopup;

package/dist/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.d.ts

@@ -0,0 +1,21 @@
+import type { PositionX, PositionY } from '../../../../../../types/position.js';
+export interface GetPopupPositionProps {
+    positionX: PositionX;
+    positionY: PositionY;
+    height: number;
+    width: number;
+    top: number;
+    bottom: number;
+    left: number;
+    right: number;
+    offsetX?: number;
+    offsetY?: number;
+    popperHeight: number;
+    lockPoistions: boolean;
+}
+export declare function getPopupPosition(props: GetPopupPositionProps): {
+    left: number | null;
+    right: number | null;
+    top: number | null;
+    bottom: number | null;
+};

package/dist/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.js

@@ -0,0 +1,62 @@
+import { browser } from '$app/environment';
+export function getPopupPosition(props) {
+    let left = null;
+    let right = null;
+    let top = null;
+    let bottom = null;
+    // exit if not browser
+    if (!browser) {
+        return {
+            left,
+            right,
+            top,
+            bottom,
+        };
+    }
+    const innerHeight = window.innerHeight;
+    const gapBottom = innerHeight - props.bottom;
+    const popperHeight = props.popperHeight;
+    const offsetX = props.offsetX ? props.offsetX : 0;
+    const offsetY = props.offsetY ? props.offsetY : 0;
+    const positionX = props.positionX;
+    let positionY = props.positionY;
+    if (!props.lockPoistions) {
+        if (positionY === 'top' && props.top < popperHeight + offsetY) {
+            positionY = 'bottom';
+        }
+        else if (positionY === 'bottom' && gapBottom < popperHeight + offsetY) {
+            positionY = 'top';
+        }
+    }
+    switch (positionX) {
+        case 'left':
+            left = offsetX;
+            right = null;
+            break;
+        case 'center':
+            left = 0;
+            right = 0;
+            break;
+        case 'right':
+            left = null;
+            right = offsetX;
+            break;
+    }
+    switch (positionY) {
+        case 'top':
+        case 'middle':
+            top = null;
+            bottom = props.height + offsetY;
+            break;
+        case 'bottom':
+            top = props.height + offsetY;
+            bottom = null;
+            break;
+    }
+    return {
+        left,
+        right,
+        top,
+        bottom,
+    };
+}

package/dist/stories/developer tools/components/Popper/Positions/AutoPosition/AutoPosition.stories.svelte

@@ -0,0 +1,89 @@
+<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
+import { Menu, MenuItem, Popper } from '../../../../../../index.js';
+import Button from '../../../../../components/Form/Button/Button.svelte';
+import { storyPopperArgTypes } from '../../Popper.stories.svelte';
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const { Story } = defineMeta({
+    component: Popper,
+    tags: ['autodocs'],
+    argTypes: storyPopperArgTypes,
+    parameters: {
+        docs: {
+            story: {
+                height: '200px',
+                inline: false,
+            },
+        },
+    },
+});
+let open = $state(false);
+</script>
+
+<!-- Positions will auto adjust depending on the space on top and bottom -->
+<Story
+  name="PositionAutoAdjust"
+  args={{ open, onClickOutside: () => (open = false), popupPositionY: 'top' }}
+  asChild
+>
+  <Popper {open} onClickOutside={() => (open = false)} popupPositionY="top">
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<!-- Positions will not auto adjust if you use `lockPoistions` -->
+<Story
+  name="LockPoistions"
+  args={{
+    open,
+    onClickOutside: () => (open = false),
+    popupPositionY: 'top',
+    lockPoistions: true,
+  }}
+  asChild
+>
+  <Popper {open} lockPoistions onClickOutside={() => (open = false)} popupPositionY="top">
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>
+
+<!-- you can also adjust `popperHeightForVerticalPosition` to achive the same -->
+<Story
+  name="HeightForVerticalPosition"
+  args={{
+    open,
+    onClickOutside: () => (open = false),
+    popupPositionY: 'top',
+    popperHeightForVerticalPosition: 3,
+  }}
+  asChild
+>
+  <Popper
+    {open}
+    onClickOutside={() => (open = false)}
+    popupPositionY="top"
+    popperHeightForVerticalPosition={3}
+  >
+    <Button onclick={() => (open = true)}>Click to see Popup</Button>
+    {#snippet popupChildren()}
+      <Menu>
+        <MenuItem>One</MenuItem>
+        <MenuItem>Two</MenuItem>
+        <MenuItem>Three</MenuItem>
+      </Menu>
+    {/snippet}
+  </Popper>
+</Story>

package/dist/stories/developer tools/components/Popper/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;