@flightlesslabs/dodo-ui 0.19.1 → 0.20.0

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

@@ -1,202 +0,0 @@
-<script lang="ts" module>
-  import type { ComponentRoundness } from '$lib/types/roundness.js';
-  import type { ComponentSize } from '$lib/types/size.js';
-  import type { Snippet } from 'svelte';
-
-  export interface InputEnclosureProps {
-    /** InputEnclosure contents goes here */
-    children?: Snippet;
-    /** InputEnclosure ref */
-    ref?: HTMLDivElement;
-    /** How large should the button be? */
-    size?: ComponentSize;
-    /** How round should the border radius be? */
-    roundness?: ComponentRoundness;
-    /** Add a border around the button. Default True */
-    outline?: boolean;
-    /** disabled state */
-    disabled?: boolean;
-    /** is there any associated Error ? */
-    error?: boolean;
-    /** is focused */
-    focused?: boolean;
-    /** Icon before button content */
-    before?: Snippet;
-    /** Icon after button content */
-    after?: Snippet;
-    /** Custom css class*/
-    class?: string;
-  }
-</script>
-
-<script lang="ts">
-  let {
-    size = 'normal',
-    roundness = 1,
-    outline = true,
-    class: className = '',
-    disabled = false,
-    before,
-    after,
-    error = false,
-    focused = false,
-    children,
-    ref = $bindable<HTMLDivElement>(),
-  }: InputEnclosureProps = $props();
-</script>
-
-<div
-  class:outline
-  class:disabled
-  class:error
-  class:focused
-  class={['dodo-ui-InputEnclosure', `size--${size}`, `roundness--${roundness}`, className].join(
-    ' ',
-  )}
-  bind:this={ref}
->
-  {#if before}
-    <span class="content--before">
-      {@render before()}
-    </span>
-  {/if}
-
-  {#if children}
-    {@render children()}
-  {/if}
-
-  {#if after}
-    <span class="content--after">
-      {@render after()}
-    </span>
-  {/if}
-</div>
-
-<style lang="scss">
-  :global(:root) {
-    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-500);
-    --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-500);
-    --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-500);
-
-    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-400);
-    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-200);
-  }
-
-  :global(.dodo-theme--dark) {
-    --dodo-ui-InputEnclosure-border-color: var(--dodo-color-neutral-600);
-    --dodo-ui-InputEnclosure-focus-border-color: var(--dodo-color-primary-600);
-    --dodo-ui-InputEnclosure-error-border-color: var(--dodo-color-danger-600);
-
-    --dodo-ui-InputEnclosure-disabled-bg: var(--dodo-color-neutral-100);
-    --dodo-ui-InputEnclosure-disabled-color: var(--dodo-color-neutral-500);
-  }
-
-  .dodo-ui-InputEnclosure {
-    display: flex;
-    overflow: hidden;
-    color: var(--dodo-color-neutral-800);
-    transition: all 150ms;
-    border: 0;
-
-    &.outline {
-      border-style: solid;
-      border-width: var(--dodo-ui-element-border-width);
-      border-color: var(--dodo-ui-InputEnclosure-border-color);
-    }
-
-    &.focused {
-      border-color: var(--dodo-ui-InputEnclosure-focus-border-color);
-    }
-
-    &.error {
-      border-color: var(--dodo-ui-InputEnclosure-error-border-color);
-    }
-
-    &.disabled {
-      cursor: initial;
-      background-color: var(--dodo-ui-InputEnclosure-disabled-bg);
-      color: var(--dodo-ui-InputEnclosure-disabled-color);
-      border-color: var(--dodo-ui-InputEnclosure-disabled-bg);
-    }
-
-    .content {
-      &--after,
-      &--before {
-        &:empty {
-          display: none;
-        }
-      }
-
-      &--after,
-      &--before {
-        display: inline-flex;
-        height: 100%;
-        align-items: center;
-      }
-    }
-
-    &.size {
-      &--normal {
-        height: var(--dodo-ui-element-height-normal);
-
-        .content {
-          &--before {
-            margin-left: 12px;
-            margin-right: -4px;
-          }
-
-          &--after {
-            margin-right: 12px;
-            margin-left: -4px;
-          }
-        }
-      }
-
-      &--small {
-        height: var(--dodo-ui-element-height-small);
-
-        .content {
-          &--before {
-            margin-left: 8px;
-            margin-right: -2px;
-          }
-
-          &--after {
-            margin-right: 8px;
-            margin-left: -2px;
-          }
-        }
-      }
-
-      &--large {
-        height: var(--dodo-ui-element-height-large);
-
-        .content {
-          &--before {
-            margin-left: 14px;
-            margin-right: -4px;
-          }
-
-          &--after {
-            margin-right: 14px;
-            margin-left: -4px;
-          }
-        }
-      }
-    }
-
-    &.roundness {
-      &--1 {
-        border-radius: var(--dodo-ui-element-roundness-1);
-      }
-
-      &--2 {
-        border-radius: var(--dodo-ui-element-roundness-2);
-      }
-
-      &--3 {
-        border-radius: var(--dodo-ui-element-roundness-3);
-      }
-    }
-  }
-</style>

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

@@ -1,158 +0,0 @@
-<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;
-    /** override Full width for Popup? */
-    popupFullWidth?: 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,
-    popupFullWidth: popupFullWidthRaw,
-  }: PopperProps = $props();
-
-  const popupFullWidth = $derived(popupFullWidthRaw !== undefined ? popupFullWidthRaw : fullWidth);
-
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  let customPopupTyped = customPopup as any;
-
-  let popperLocation = $state<DOMRect>();
-
-  function capturePopperLocation() {
-    if (!ref) {
-      return;
-    }
-
-    popperLocation = ref.getBoundingClientRect();
-  }
-
-  $effect(() => {
-    if (!ref) {
-      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}
->
-  {#if children}
-    {@render children()}
-  {/if}
-
-  {#if customPopupTyped}
-    {@render customPopupTyped(popperLocation)}
-  {:else if open && popperLocation}
-    <PopperPopup
-      {popperLocation}
-      {paperProps}
-      {popupMaxHeight}
-      {popupWidth}
-      {popupPositionX}
-      {popupPositionY}
-      {popupOffsetX}
-      {popupOffsetY}
-      {popperHeightForVerticalPosition}
-      {lockPoistions}
-      fullWidth={popupFullWidth}
-      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%;
-      flex-direction: column;
-    }
-  }
-</style>

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

@@ -1,146 +0,0 @@
-<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;
-    /** Full width Popper? */
-    fullWidth?: boolean;
-  }
-</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,
-    fullWidth = false,
-  }: PopperPopupProps = $props();
-
-  let popupLocation = $state<DOMRect>();
-
-  const fullWidthInPixels = $derived(
-    fullWidth && popperLocation?.width ? `${popperLocation?.width}px` : '',
-  );
-  const popperWidth = $derived(width || fullWidthInPixels);
-  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);
-
-  function capturePopupLocation() {
-    if (!ref) {
-      return;
-    }
-
-    popupLocation = ref.getBoundingClientRect();
-  }
-
-  $effect(() => {
-    if (!ref) {
-      return;
-    }
-
-    capturePopupLocation();
-
-    window.addEventListener('resize', capturePopupLocation);
-
-    return () => {
-      window.removeEventListener('resize', capturePopupLocation);
-    };
-  });
-
-  $effect(() => {
-    const values = getPopupPosition({
-      positionX,
-      positionY,
-      offsetX: offsetX,
-      offsetY: offsetY,
-      popperHeight: popperHeightForVerticalPosition,
-      lockPoistions,
-      popperLocation,
-      popupLocation,
-      fullWidth,
-    });
-
-    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={`${popperWidth ? `width: ${popperWidth};` : ''}
-  ${left !== null ? `left: ${left}px;` : ''}
-  ${right !== null ? `right: ${right}px;` : ''}
-  ${top !== null ? `top: ${top}px;` : ''}
-  ${bottom !== null ? `bottom: ${bottom}px;` : ''}
-  `}
->
-  <Paper shadow={3} {...paperProps}>
-    <section style={`max-height: ${popupMaxHeight};`}>
-      {#if children}
-        {@render children()}
-      {/if}
-    </section>
-  </Paper>
-</div>
-
-<style lang="scss">
-  .dodo-ui-PopperPopup {
-    position: fixed;
-    z-index: var(--dodo-ui-z-index-4);
-
-    section {
-      overflow: auto;
-    }
-  }
-</style>

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

@@ -1,101 +0,0 @@
-import { browser } from '$app/environment';
-import type { PositionX, PositionY } from '$lib/types/position.js';
-
-export interface GetPopupPositionProps {
-  positionX: PositionX;
-  positionY: PositionY;
-  offsetX?: number;
-  offsetY?: number;
-  popperHeight: number;
-  lockPoistions: boolean;
-  popperLocation?: DOMRect;
-  popupLocation?: DOMRect;
-  fullWidth?: 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 POPPER_LEFT = props.popperLocation?.left || 0;
-  const POPPER_TOP = props.popperLocation?.top || 0;
-  const POPPER_BOTTOM = props.popperLocation?.bottom || 0;
-  const POPPER_HEIGHT = props.popperLocation?.height || 0;
-  const POPPER_WIDTH = props.popperLocation?.width || 0;
-
-  const offsetX = props.offsetX ? props.offsetX : 0;
-  const offsetY = props.offsetY ? props.offsetY : 0;
-
-  const POPUP_WIDTH = props.popupLocation?.width || 0;
-
-  const WIDTH_DIFF = POPPER_WIDTH - POPUP_WIDTH;
-
-  const innerHeight = window.innerHeight;
-  const gapBottom = innerHeight - POPPER_BOTTOM;
-
-  let positionY = props.positionY;
-
-  // Adjust position if there is not enough space to draw it.
-  if (!props.lockPoistions) {
-    if (positionY === 'top' && POPPER_TOP < POPPER_HEIGHT + offsetY) {
-      positionY = 'bottom';
-    } else if (positionY === 'bottom' && gapBottom < POPPER_HEIGHT + offsetY) {
-      positionY = 'top';
-    }
-  }
-
-  switch (positionY) {
-    case 'top':
-      top = null;
-      bottom = POPPER_TOP + POPPER_HEIGHT + offsetY;
-      break;
-    case 'bottom':
-      top = POPPER_TOP + POPPER_HEIGHT + offsetY;
-      bottom = null;
-      break;
-  }
-
-  if (props.fullWidth) {
-    // If Full Width
-    left = POPPER_LEFT;
-    right = null;
-  } else if (WIDTH_DIFF < 0) {
-    // If Popup is bigger than the Popper Container
-    left = POPPER_LEFT;
-    right = null;
-  } else {
-    switch (props.positionX) {
-      case 'left':
-        left = POPPER_LEFT + offsetX;
-        right = null;
-        break;
-      case 'center':
-        left = POPPER_LEFT + offsetX + WIDTH_DIFF / 2;
-        right = null;
-        break;
-      case 'right':
-        left = POPPER_LEFT + offsetX + WIDTH_DIFF;
-        right = null;
-        break;
-    }
-  }
-
-  return {
-    left,
-    right,
-    top,
-    bottom,
-  };
-}