@flightlesslabs/dodo-ui 0.6.6 → 0.7.0

package/src/lib/stories/developer tools/components/Popper/Popper.svelte

@@ -0,0 +1,159 @@
+<script lang="ts" module>
+  import type { Snippet } from 'svelte';
+  import PopperPopup from './PopperPopup/PopperPopup.svelte';
+  import type { PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+  import { clickOutside } from '$lib/stories/developer tools/directives/clickOutside/clickOutside.js';
+  import type { PositionX, PositionY } from '$lib/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;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    popupChildren,
+    id,
+    class: className = '',
+    ref = $bindable<HTMLDivElement>(),
+    open = false,
+    popupRef = $bindable<HTMLDivElement>(),
+    paperProps,
+    popupMaxHeight,
+    popupWidth,
+    popupClass,
+    popupPositionX,
+    popupPositionY,
+    popupOffsetX,
+    popupOffsetY,
+    onClickOutside = () => {},
+    customPopup,
+    popperHeightForVerticalPosition,
+    lockPoistions,
+    fullWidth = false,
+  }: PopperProps = $props();
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  let customPopupTyped = customPopup as any;
+
+  let popperContainerRef = $state<HTMLDivElement>();
+  let popperLocation = $state<DOMRect>();
+
+  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 lang="scss">
+  .dodo-ui-Popper {
+    position: relative;
+    display: inline-flex;
+    flex-wrap: wrap;
+
+    &.fullWidth {
+      display: flex;
+      width: 100%;
+
+      .PopperContainer {
+        display: block;
+        width: 100%;
+      }
+    }
+  }
+</style>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/PopperPopup.svelte

@@ -0,0 +1,120 @@
+<script lang="ts" module>
+  import { Paper } from '$lib/index.js';
+  import type { PaperProps } from '$lib/stories/components/Layout/Paper/Paper.svelte';
+  import type { PositionX, PositionY } from '$lib/types/position.js';
+  import type { Snippet } from 'svelte';
+  import { getPopupPosition } from './utils/getPopupPosition.js';
+
+  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;
+  }
+</script>
+
+<script lang="ts">
+  let {
+    children,
+    paperProps = {},
+    class: className = '',
+    popupWidth: width,
+    popupMaxHeight: maxHeight,
+    popupPositionX: positionX = 'left',
+    popupPositionY: positionY = 'bottom',
+    popperLocation,
+    ref = $bindable<HTMLDivElement>(),
+    popupOffsetX: offsetX = 0,
+    popupOffsetY: offsetY = 12,
+    popperHeightForVerticalPosition = 100,
+    lockPoistions = false,
+  }: PopperPopupProps = $props();
+
+  const popperWidth = $derived(width || '100%');
+  const popupMaxHeight = $derived(maxHeight || '400px');
+
+  let left = $state<number | null>(null);
+  let right = $state<number | null>(null);
+  let top = $state<number | null>(null);
+  let bottom = $state<number | null>(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 lang="scss">
+  .dodo-ui-PopperPopup {
+    position: absolute;
+    z-index: var(--dodo-ui-z-index-4);
+
+    section {
+      overflow: auto;
+    }
+  }
+</style>

package/src/lib/stories/developer tools/components/Popper/PopperPopup/utils/getPopupPosition.ts

@@ -0,0 +1,87 @@
+import { browser } from '$app/environment';
+import type { PositionX, PositionY } from '$lib/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 function getPopupPosition(props: GetPopupPositionProps) {
+  let left: null | number = null;
+  let right: null | number = null;
+  let top: null | number = null;
+  let bottom: null | number = 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/src/lib/stories/developer tools/components/UtilityButton/UtilityButton.svelte

@@ -1,9 +1,9 @@
-<script lang="ts">
+<script lang="ts" module>
   import type { ComponentSize } from '$lib/types/size.js';
   import type { Snippet } from 'svelte';
   import type { MouseEventHandler } from 'svelte/elements';
 
-  interface UtilityButtonProps {
+  export interface UtilityButtonProps {
     /** Button contents goes here*/
     children?: Snippet;
     /** Button ref */
@@ -23,7 +23,9 @@
     /** The onclick event handler */
     onclick?: MouseEventHandler<HTMLButtonElement>;
   }
+</script>
 
+<script lang="ts">
   let {
     children,
     size = 'normal',

package/src/lib/stories/developer tools/directives/clickOutside/clickOutside.ts

@@ -0,0 +1,17 @@
+export function clickOutside(node: Element, callback: () => void) {
+  const handleClick = (event: MouseEvent) => {
+    const target = event.target as Node;
+
+    if (node && !node.contains(target) && !event.defaultPrevented) {
+      callback();
+    }
+  };
+
+  document.addEventListener('click', handleClick, true);
+
+  return {
+    destroy() {
+      document.removeEventListener('click', handleClick, true);
+    },
+  };
+}

package/src/lib/styles/_z-index.css

@@ -0,0 +1,9 @@
+:root {
+  /* zIndex */
+  --dodo-ui-z-index-0: 0;
+  --dodo-ui-z-index-1: 1;
+  --dodo-ui-z-index-2: 100;
+  --dodo-ui-z-index-3: 1000;
+  --dodo-ui-z-index-4: 5000;
+  --dodo-ui-z-index-5: 5001;
+}

package/src/lib/styles/global.css

@@ -2,6 +2,7 @@
 @import '_colors-base.css';
 @import '_colors.css';
 @import '_space.css';
+@import '_z-index.css';
 @import '_breakpoint.css';
 @import '_shadow.css';
 @import '_components.css';

package/src/lib/types/position.ts

@@ -0,0 +1,5 @@
+export type PositionY = 'top' | 'middle' | 'bottom';
+export type PositionX = 'left' | 'center' | 'right';
+
+export const positionYArray: PositionY[] = ['top', 'bottom'];
+export const positionXArray: PositionX[] = ['left', 'center', 'right'];

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

@@ -1,47 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import {} from '../SimpleSelect.svelte';
-import SimpleSelect from '../SimpleSelect.svelte';
-import { storySimpleSelectArgTypes, storySimpleSelectOptions, } from '../SimpleSelect.stories.svelte';
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-});
-</script>
-
-<Story
-  name="Change"
-  args={{
-    onchange: (e: Event) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onChange Event', target.value);
-    },
-  }}
-/>
-
-<!-- `e: SimpleSelectFocusEvent` -->
-<Story
-  name="Focus"
-  args={{
-    onfocus: (e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onfocus Event', target);
-    },
-  }}
-/>
-
-<!-- `e: SimpleSelectFocusEvent` -->
-<Story
-  name="Blur"
-  args={{
-    onblur: (e: SimpleSelectFocusEvent) => {
-      const target = e.target as HTMLSelectElement;
-
-      console.log('onblur Event', target);
-    },
-  }}
-/>

package/dist/stories/components/Form/SimpleSelect/Roundness/Roundness.stories.svelte

@@ -1,24 +0,0 @@
-<script module>
-  import { defineMeta } from '@storybook/addon-svelte-csf';
-  import SimpleSelect from '../SimpleSelect.svelte';
-  import {
-    storySimpleSelectArgTypes,
-    storySimpleSelectOptions,
-  } from '../SimpleSelect.stories.svelte';
-
-  // More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-  const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-  });
-</script>
-
-<Story name="Roundness 1" />
-
-<Story name="Roundness 2" args={{ roundness: 2 }} />
-
-<Story name="Roundness 3" args={{ roundness: 3 }} />
-
-<Story name="Roundness 0" args={{ roundness: 0 }} />

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

@@ -1,57 +0,0 @@
-<script module lang="ts">import { defineMeta } from '@storybook/addon-svelte-csf';
-import {} from './SimpleSelect.svelte';
-import SimpleSelect from './SimpleSelect.svelte';
-import { componentRoundnessArray } from '../../../../types/roundness.js';
-import { componentSizeArray } from '../../../../types/size.js';
-export const storySimpleSelectArgTypes = {
-    roundness: {
-        control: { type: 'select' },
-        options: componentRoundnessArray,
-    },
-    size: {
-        control: { type: 'select' },
-        options: componentSizeArray,
-    },
-};
-export const storySimpleSelectOptions = [
-    {
-        value: 'volvo',
-        label: 'Volvo',
-    },
-    {
-        value: 'saab',
-        label: 'Saab',
-    },
-    {
-        value: 'mercedes',
-        label: 'Mercedes',
-    },
-    {
-        value: 'audi',
-        label: 'Audi',
-    },
-    {
-        value: 'opel',
-        label: 'Opel',
-        disabled: true,
-    },
-];
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
-const { Story } = defineMeta({
-    component: SimpleSelect,
-    tags: ['autodocs'],
-    argTypes: storySimpleSelectArgTypes,
-    args: { options: storySimpleSelectOptions },
-});
-</script>
-
-<!-- SimpleSelect with default style -->
-<Story name="Default" />
-
-<Story name="Placeholder" args={{ value: '', placeholder: 'Type something...' }} />
-
-<Story name="No Outline" args={{ outline: false }} />
-
-<Story name="Error" args={{ error: true }} />
-
-<Story name="Disabled" args={{ disabled: true }} />

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

@@ -1,69 +0,0 @@
-<script lang="ts" module>export {};
-</script>
-
-<script lang="ts">import InputEnclosure from '../../../developer tools/components/InputEnclosure/InputEnclosure.svelte';
-let { size = 'normal', roundness = 1, outline = true, name, id, class: className = '', disabled = false, onchange, onblur, onfocus, before, after, error = false, value, placeholder, ref = $bindable(), options, } = $props();
-let focused = $state(false);
-function onfocusMod(e) {
-    focused = true;
-    if (onfocus) {
-        onfocus(e);
-    }
-}
-function onblurMod(e) {
-    focused = false;
-    if (onblur) {
-        onblur(e);
-    }
-}
-</script>
-
-<div
-  class:outline
-  class:disabled
-  class:error
-  class:focused
-  class={['dodo-ui-SimpleSelect', `size--${size}`, `roundness--${roundness}`, className].join(' ')}
->
-  <InputEnclosure {outline} {disabled} {error} {focused} {size} {roundness} {before} {after}>
-    <select
-      {name}
-      {id}
-      {disabled}
-      {onchange}
-      onfocus={onfocusMod}
-      onblur={onblurMod}
-      {placeholder}
-      bind:this={ref}
-    >
-      {#each options as option (option.value)}
-        <option value={option.value} disabled={option.disabled} selected={value === option.value}>
-          {option.label}
-        </option>
-      {/each}
-    </select>
-  </InputEnclosure>
-</div>
-
-<style>.dodo-ui-SimpleSelect select {
-  flex: 1;
-  border: 0;
-  outline: 0;
-  height: 100%;
-  background-color: transparent;
-  font-family: inherit;
-  color: inherit;
-  letter-spacing: 0.3px;
-}
-.dodo-ui-SimpleSelect.size--normal select {
-  font-size: 1rem;
-  padding: 0 calc(var(--dodo-ui-space-small) * 2);
-}
-.dodo-ui-SimpleSelect.size--small select {
-  padding: 0 var(--dodo-ui-space);
-  font-size: 0.9rem;
-}
-.dodo-ui-SimpleSelect.size--large select {
-  font-size: 1.1rem;
-  padding: 0 calc(var(--dodo-ui-space) * 2);
-}</style>

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

@@ -1,51 +0,0 @@
-export type SimpleSelectFocusEvent = FocusEvent & {
-    currentTarget: EventTarget & HTMLSelectElement;
-};
-export type SimpleSelectOption = {
-    value: string;
-    label: string;
-    disabled?: boolean;
-};
-import type { ComponentRoundness } from '../../../../types/roundness.js';
-import type { ComponentSize } from '../../../../types/size.js';
-import type { Snippet } from 'svelte';
-import type { ChangeEventHandler, FocusEventHandler } from 'svelte/elements';
-interface SimpleSelectProps {
-    /** Select ref */
-    ref?: HTMLSelectElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** How round should the border radius be? */
-    options: SimpleSelectOption[];
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** Select value */
-    value?: string;
-    /** How round should the border radius be? */
-    placeholder?: string;
-    /** disabled state */
-    disabled?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** Name */
-    name?: string;
-    /** Id */
-    id?: string;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-    /** onchange event handler */
-    onchange?: ChangeEventHandler<HTMLSelectElement>;
-    /** onblur event handler */
-    onblur?: FocusEventHandler<HTMLSelectElement>;
-    /** onfocus event handler */
-    onfocus?: FocusEventHandler<HTMLSelectElement>;
-}
-declare const SimpleSelect: import("svelte").Component<SimpleSelectProps, {}, "ref">;
-type SimpleSelect = ReturnType<typeof SimpleSelect>;
-export default SimpleSelect;