svelte-ag 0.0.2-dev.72

package/src/lib/components/utilities/floating-layer/use-floating-layer.svelte.ts

@@ -0,0 +1,406 @@
+import {
+  type Middleware,
+  type Placement,
+  arrow,
+  autoUpdate,
+  flip,
+  hide,
+  limitShift,
+  offset,
+  shift,
+  size
+} from '@floating-ui/dom';
+import { box, cssToStyleObj, styleToString, useRefById } from 'svelte-toolbelt';
+import { Context, ElementSize, watch } from 'runed';
+import type { Arrayable, WithRefProps } from '$bits/internal/types.js';
+import { isNotNull } from '$bits/internal/is.js';
+import { useId } from 'bits-ui';
+import type { Box, ReadableBoxedValues } from 'svelte-toolbelt';
+import { useFloating } from '$bits/internal/floating-svelte/use-floating.svelte.js';
+import type { Measurable, UseFloatingReturn } from '$bits/internal/floating-svelte/types.js';
+import type { Direction, StyleProperties } from 'bits-ui';
+
+export const SIDE_OPTIONS = ['top', 'right', 'bottom', 'left'] as const;
+export const ALIGN_OPTIONS = ['start', 'center', 'end'] as const;
+
+const OPPOSITE_SIDE: Record<Side, Side> = {
+  top: 'bottom',
+  right: 'left',
+  bottom: 'top',
+  left: 'right'
+};
+
+export type Side = (typeof SIDE_OPTIONS)[number];
+export type Align = (typeof ALIGN_OPTIONS)[number];
+
+export type Boundary = Element | null;
+
+class FloatingRootState {
+  anchorNode = box<Measurable | HTMLElement | null>(null);
+  customAnchorNode = box<Measurable | HTMLElement | null | string>(null);
+  triggerNode = box<Measurable | HTMLElement | null>(null);
+
+  constructor() {
+    $effect(() => {
+      if (this.customAnchorNode.current) {
+        if (typeof this.customAnchorNode.current === 'string') {
+          this.anchorNode.current = document.querySelector(this.customAnchorNode.current);
+        } else {
+          this.anchorNode.current = this.customAnchorNode.current;
+        }
+      } else {
+        this.anchorNode.current = this.triggerNode.current;
+      }
+    });
+  }
+}
+
+export type FloatingContentStateProps = ReadableBoxedValues<{
+  id: string;
+  wrapperId: string;
+  side: Side;
+  sideOffset: number;
+  align: Align;
+  alignOffset: number;
+  arrowPadding: number;
+  avoidCollisions: boolean;
+  collisionBoundary: Arrayable<Boundary>;
+  collisionPadding: number | Partial<Record<Side, number>>;
+  sticky: 'partial' | 'always';
+  hideWhenDetached: boolean;
+  updatePositionStrategy: 'optimized' | 'always';
+  strategy: 'fixed' | 'absolute';
+  onPlaced: () => void;
+  dir: Direction;
+  style: StyleProperties | null | undefined | string;
+  enabled: boolean;
+  customAnchor: string | HTMLElement | null | Measurable;
+}>;
+
+class FloatingContentState {
+  // nodes
+  contentRef = box<HTMLElement | null>(null);
+  wrapperRef = box<HTMLElement | null>(null);
+  arrowRef = box<HTMLElement | null>(null);
+
+  // ids
+  arrowId: Box<string> = box(useId());
+
+  #transformedStyle = $derived.by(() => {
+    if (typeof this.opts.style === 'string') return cssToStyleObj(this.opts.style);
+    if (!this.opts.style) return {};
+  });
+
+  #updatePositionStrategy = undefined as unknown as FloatingContentStateProps['updatePositionStrategy'];
+  #arrowSize = new ElementSize(() => this.arrowRef.current ?? undefined);
+  #arrowWidth = $derived(this.#arrowSize?.width ?? 0);
+  #arrowHeight = $derived(this.#arrowSize?.height ?? 0);
+  #desiredPlacement = $derived.by(
+    () =>
+      (this.opts.side?.current +
+        (this.opts.align.current !== 'center' ? `-${this.opts.align.current}` : '')) as Placement
+  );
+  #boundary = $derived.by(() =>
+    Array.isArray(this.opts.collisionBoundary.current)
+      ? this.opts.collisionBoundary.current
+      : [this.opts.collisionBoundary.current]
+  );
+  hasExplicitBoundaries = $derived(this.#boundary.length > 0);
+  detectOverflowOptions = $derived.by(() => ({
+    padding: this.opts.collisionPadding.current,
+    boundary: this.#boundary.filter(isNotNull),
+    altBoundary: this.hasExplicitBoundaries
+  }));
+  #availableWidth = $state<number | undefined>(undefined);
+  #availableHeight = $state<number | undefined>(undefined);
+  #anchorWidth = $state<number | undefined>(undefined);
+  #anchorHeight = $state<number | undefined>(undefined);
+  middleware: Middleware[] = $derived.by(
+    () =>
+      [
+        offset({
+          mainAxis: this.opts.sideOffset.current + this.#arrowHeight,
+          alignmentAxis: this.opts.alignOffset.current
+        }),
+        this.opts.avoidCollisions.current &&
+          shift({
+            mainAxis: true,
+            crossAxis: false,
+            limiter: this.opts.sticky.current === 'partial' ? limitShift() : undefined,
+            ...this.detectOverflowOptions
+          }),
+        this.opts.avoidCollisions.current && flip({ ...this.detectOverflowOptions }),
+        size({
+          ...this.detectOverflowOptions,
+          apply: ({ rects, availableWidth, availableHeight }) => {
+            const { width: anchorWidth, height: anchorHeight } = rects.reference;
+            this.#availableWidth = availableWidth;
+            this.#availableHeight = availableHeight;
+            this.#anchorWidth = anchorWidth;
+            this.#anchorHeight = anchorHeight;
+          }
+        }),
+        this.arrowRef.current &&
+          arrow({
+            element: this.arrowRef.current,
+            padding: this.opts.arrowPadding.current
+          }),
+        transformOrigin({ arrowWidth: this.#arrowWidth, arrowHeight: this.#arrowHeight }),
+        this.opts.hideWhenDetached.current && hide({ strategy: 'referenceHidden', ...this.detectOverflowOptions })
+      ].filter(Boolean) as Middleware[]
+  );
+  floating: UseFloatingReturn;
+  placedSide = $derived.by(() => getSideFromPlacement(this.floating.placement));
+  placedAlign = $derived.by(() => getAlignFromPlacement(this.floating.placement));
+  arrowX = $derived.by(() => this.floating.middlewareData.arrow?.x ?? 0);
+  arrowY = $derived.by(() => this.floating.middlewareData.arrow?.y ?? 0);
+  cannotCenterArrow = $derived.by(() => this.floating.middlewareData.arrow?.centerOffset !== 0);
+  contentZIndex = $state<string>();
+  arrowBaseSide = $derived(OPPOSITE_SIDE[this.placedSide]);
+  wrapperProps = $derived.by(
+    () =>
+      ({
+        id: this.opts.wrapperId.current,
+        'data-bits-floating-content-wrapper': '',
+        style: {
+          ...this.floating.floatingStyles,
+          // keep off page when measuring
+          transform: this.floating.isPositioned ? this.floating.floatingStyles.transform : 'translate(0, -200%)',
+          minWidth: 'max-content',
+          zIndex: this.contentZIndex,
+          '--bits-floating-transform-origin': `${this.floating.middlewareData.transformOrigin?.x} ${this.floating.middlewareData.transformOrigin?.y}`,
+          '--bits-floating-available-width': `${this.#availableWidth}px`,
+          '--bits-floating-available-height': `${this.#availableHeight}px`,
+          '--bits-floating-anchor-width': `${this.#anchorWidth}px`,
+          '--bits-floating-anchor-height': `${this.#anchorHeight}px`,
+          // hide the content if using the hide middleware and should be hidden
+          ...(this.floating.middlewareData.hide?.referenceHidden && {
+            visibility: 'hidden',
+            'pointer-events': 'none'
+          }),
+          ...this.#transformedStyle
+        },
+        // Floating UI calculates logical alignment based the `dir` attribute
+        dir: this.opts.dir.current
+      }) as const
+  );
+  props = $derived.by(
+    () =>
+      ({
+        'data-side': this.placedSide,
+        'data-align': this.placedAlign,
+        style: styleToString({
+          ...this.#transformedStyle
+          // if the FloatingContent hasn't been placed yet (not all measurements done)
+          // we prevent animations so that users's animation don't kick in too early referring wrong sides
+          // animation: !this.floating.isPositioned ? "none" : undefined,
+        })
+      }) as const
+  );
+
+  arrowStyle = $derived({
+    position: 'absolute',
+    left: this.arrowX ? `${this.arrowX}px` : undefined,
+    top: this.arrowY ? `${this.arrowY}px` : undefined,
+    [this.arrowBaseSide]: 0,
+    'transform-origin': {
+      top: '',
+      right: '0 0',
+      bottom: 'center 0',
+      left: '100% 0'
+    }[this.placedSide],
+    transform: {
+      top: 'translateY(100%)',
+      right: 'translateY(50%) rotate(90deg) translateX(-50%)',
+      bottom: 'rotate(180deg)',
+      left: 'translateY(50%) rotate(-90deg) translateX(50%)'
+    }[this.placedSide],
+    visibility: this.cannotCenterArrow ? 'hidden' : undefined
+  });
+
+  constructor(
+    readonly opts: FloatingContentStateProps,
+    readonly root: FloatingRootState
+  ) {
+    if (opts.customAnchor) {
+      this.root.customAnchorNode.current = opts.customAnchor.current;
+    }
+
+    watch(
+      () => opts.customAnchor.current,
+      (customAnchor) => {
+        this.root.customAnchorNode.current = customAnchor;
+      }
+    );
+
+    useRefById({
+      id: this.opts.wrapperId,
+      ref: this.wrapperRef,
+      deps: () => this.opts.enabled.current
+    });
+
+    useRefById({
+      id: this.opts.id,
+      ref: this.contentRef,
+      deps: () => this.opts.enabled.current
+    });
+
+    this.floating = useFloating({
+      strategy: () => this.opts.strategy.current,
+      placement: () => this.#desiredPlacement,
+      middleware: () => this.middleware,
+      reference: this.root.anchorNode,
+      whileElementsMounted: (...args) => {
+        const cleanup = autoUpdate(...args, {
+          animationFrame: this.#updatePositionStrategy?.current === 'always'
+        });
+        return cleanup;
+      },
+      open: () => this.opts.enabled.current
+    });
+
+    $effect(() => {
+      if (!this.floating.isPositioned) return;
+      this.opts.onPlaced?.current();
+    });
+
+    watch(
+      () => this.contentRef.current,
+      (contentNode) => {
+        if (!contentNode) return;
+        this.contentZIndex = window.getComputedStyle(contentNode).zIndex;
+      }
+    );
+
+    $effect(() => {
+      this.floating.floating.current = this.wrapperRef.current;
+    });
+  }
+}
+
+type FloatingArrowStateProps = WithRefProps;
+
+class FloatingArrowState {
+  constructor(
+    readonly opts: FloatingArrowStateProps,
+    readonly content: FloatingContentState
+  ) {
+    useRefById({
+      ...opts,
+      onRefChange: (node) => {
+        this.content.arrowRef.current = node;
+      },
+      deps: () => this.content.opts.enabled.current
+    });
+  }
+
+  props = $derived.by(
+    () =>
+      ({
+        id: this.opts.id.current,
+        style: this.content.arrowStyle,
+        'data-side': this.content.placedSide
+      }) as const
+  );
+}
+
+type FloatingAnchorStateProps = ReadableBoxedValues<{
+  id: string;
+  virtualEl?: Measurable | null;
+}>;
+
+class FloatingAnchorState {
+  ref = box<HTMLElement | null>(null);
+
+  constructor(
+    readonly opts: FloatingAnchorStateProps,
+    readonly root: FloatingRootState
+  ) {
+    if (opts.virtualEl && opts.virtualEl.current) {
+      root.triggerNode = box.from(opts.virtualEl.current);
+    } else {
+      useRefById({
+        id: opts.id,
+        ref: this.ref,
+        onRefChange: (node) => {
+          root.triggerNode.current = node;
+        }
+      });
+    }
+  }
+}
+
+const FloatingRootContext = new Context<FloatingRootState>('Floating.Root');
+const FloatingContentContext = new Context<FloatingContentState>('Floating.Content');
+
+export function useFloatingRootState() {
+  return FloatingRootContext.set(new FloatingRootState());
+}
+
+export function useFloatingContentState(props: FloatingContentStateProps): FloatingContentState {
+  return FloatingContentContext.set(new FloatingContentState(props, FloatingRootContext.get()));
+}
+
+export function useFloatingArrowState(props: FloatingArrowStateProps): FloatingArrowState {
+  return new FloatingArrowState(props, FloatingContentContext.get());
+}
+
+export function useFloatingAnchorState(props: FloatingAnchorStateProps): FloatingAnchorState {
+  return new FloatingAnchorState(props, FloatingRootContext.get());
+}
+
+//
+// HELPERS
+//
+
+function transformOrigin(options: { arrowWidth: number; arrowHeight: number }): Middleware {
+  return {
+    name: 'transformOrigin',
+    options,
+    fn(data) {
+      const { placement, rects, middlewareData } = data;
+
+      const cannotCenterArrow = middlewareData.arrow?.centerOffset !== 0;
+      const isArrowHidden = cannotCenterArrow;
+      const arrowWidth = isArrowHidden ? 0 : options.arrowWidth;
+      const arrowHeight = isArrowHidden ? 0 : options.arrowHeight;
+
+      const [placedSide, placedAlign] = getSideAndAlignFromPlacement(placement);
+      const noArrowAlign = { start: '0%', center: '50%', end: '100%' }[placedAlign];
+
+      const arrowXCenter = (middlewareData.arrow?.x ?? 0) + arrowWidth / 2;
+      const arrowYCenter = (middlewareData.arrow?.y ?? 0) + arrowHeight / 2;
+
+      let x = '';
+      let y = '';
+
+      if (placedSide === 'bottom') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${-arrowHeight}px`;
+      } else if (placedSide === 'top') {
+        x = isArrowHidden ? noArrowAlign : `${arrowXCenter}px`;
+        y = `${rects.floating.height + arrowHeight}px`;
+      } else if (placedSide === 'right') {
+        x = `${-arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      } else if (placedSide === 'left') {
+        x = `${rects.floating.width + arrowHeight}px`;
+        y = isArrowHidden ? noArrowAlign : `${arrowYCenter}px`;
+      }
+      return { data: { x, y } };
+    }
+  };
+}
+
+function getSideAndAlignFromPlacement(placement: Placement) {
+  const [side, align = 'center'] = placement.split('-');
+  return [side as Side, align as Align] as const;
+}
+
+export function getSideFromPlacement(placement: Placement) {
+  return getSideAndAlignFromPlacement(placement)[0];
+}
+
+export function getAlignFromPlacement(placement: Placement) {
+  return getSideAndAlignFromPlacement(placement)[1];
+}

package/src/lib/index.ts

@@ -0,0 +1 @@
+export * from "./utils/index.js";

package/src/lib/utils/asyncDerived.svelte.ts

@@ -0,0 +1,38 @@
+import { type Readable, derived } from "svelte/store";
+
+/**
+ * Creates a derived store whose value is transformed asynchronously.
+ *
+ * @template T The type of the source store(s)
+ * @template R The type of the result
+ * @param stores The source store(s)
+ * @param callback An async function that transforms the source values
+ * @param initial_value Initial value to use until the first async resolution
+ * @returns A readable store with the transformed value
+ */
+export function asyncDerived<T, R>(
+  stores: Readable<T> | Array<Readable<unknown>>,
+  callback: (values: T) => Promise<R>,
+  initial_value: R
+): Readable<R> {
+  let guard: object | undefined;
+
+  return derived(
+    stores,
+    ($stores, set) => {
+      // Create a unique object for this execution
+      const inner = (guard = {});
+
+      // Set the initial value immediately
+      set(initial_value);
+
+      // Run the async callback and update the value if this execution is still valid
+      Promise.resolve(callback($stores)).then((value) => {
+        if (guard === inner) {
+          set(value);
+        }
+      });
+    },
+    initial_value
+  );
+}

package/src/lib/utils/bits.ts

@@ -0,0 +1,93 @@
+import type { WritableBoxedValues, ReadableBoxedValues } from 'svelte-toolbelt';
+
+export type WithRefProps<T = {}> = T &
+  ReadableBoxedValues<{
+    id: string;
+  }> &
+  WritableBoxedValues<{
+    ref: HTMLElement | null;
+  }>;
+
+export function getDataOpenClosed(condition) {
+  return condition ? 'open' : 'closed';
+}
+export function getDataChecked(condition) {
+  return condition ? 'checked' : 'unchecked';
+}
+export function getAriaDisabled(condition) {
+  return condition ? 'true' : 'false';
+}
+export function getAriaReadonly(condition) {
+  return condition ? 'true' : 'false';
+}
+export function getAriaExpanded(condition) {
+  return condition ? 'true' : 'false';
+}
+export function getDataDisabled(condition) {
+  return condition ? '' : undefined;
+}
+export function getAriaRequired(condition) {
+  return condition ? 'true' : 'false';
+}
+export function getAriaSelected(condition) {
+  return condition ? 'true' : 'false';
+}
+export function getAriaChecked(checked, indeterminate) {
+  if (indeterminate) {
+    return 'mixed';
+  }
+  return checked ? 'true' : 'false';
+}
+export function getAriaOrientation(orientation) {
+  return orientation;
+}
+export function getAriaHidden(condition) {
+  return condition ? 'true' : undefined;
+}
+export function getAriaInvalid(condition) {
+  return condition ? 'true' : undefined;
+}
+export function getDataOrientation(orientation) {
+  return orientation;
+}
+export function getDataInvalid(condition) {
+  return condition ? '' : undefined;
+}
+export function getDataRequired(condition) {
+  return condition ? '' : undefined;
+}
+export function getDataReadonly(condition) {
+  return condition ? '' : undefined;
+}
+export function getDataSelected(condition) {
+  return condition ? '' : undefined;
+}
+export function getDataUnavailable(condition) {
+  return condition ? '' : undefined;
+}
+export function getHidden(condition) {
+  return condition ? true : undefined;
+}
+export function getDisabled(condition) {
+  return condition ? true : undefined;
+}
+export function getAriaPressed(condition) {
+  return condition ? 'true' : 'false';
+}
+export function getRequired(condition) {
+  return condition ? true : undefined;
+}
+
+import type { HTMLFormAttributes } from 'svelte/elements';
+import type { HTMLAttributes } from 'svelte/elements';
+
+type BitsPrimitive<T> = Omit<T, 'style' | 'id' | 'children'> & {
+  id?: string;
+};
+export type BitsPrimitiveFormAttributes = BitsPrimitive<HTMLFormAttributes>;
+
+export type HTMLDivAttributes = HTMLAttributes<HTMLDivElement>;
+
+export interface Test {
+  test: string;
+}

package/src/lib/utils/index.ts

@@ -0,0 +1,3 @@
+export * from "./utils.js";
+export * from "./bits.js";
+export * from "./asyncDerived.svelte.js";

package/src/lib/utils/utils.ts

@@ -0,0 +1,97 @@
+import { type ClassValue, clsx } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}
+
+import { cubicOut } from 'svelte/easing';
+import type { TransitionConfig } from 'svelte/transition';
+
+type FlyAndScaleParams = {
+  y?: number;
+  x?: number;
+  start?: number;
+  duration?: number;
+  delay?: number;
+};
+
+export const flyAndScale = (
+  node: Element,
+  params: FlyAndScaleParams = { y: -8, x: 0, start: 0.95, duration: 200, delay: 0 }
+): TransitionConfig => {
+  const style = getComputedStyle(node);
+  const transform = style.transform === 'none' ? '' : style.transform;
+
+  const scaleConversion = (valueA: number, scaleA: [number, number], scaleB: [number, number]) => {
+    const [minA, maxA] = scaleA;
+    const [minB, maxB] = scaleB;
+
+    const percentage = (valueA - minA) / (maxA - minA);
+    const valueB = percentage * (maxB - minB) + minB;
+
+    return valueB;
+  };
+
+  const styleToString = (style: Record<string, number | string | undefined>): string => {
+    return Object.keys(style).reduce((str, key) => {
+      if (style[key] === undefined) return str;
+      return str + key + ':' + style[key] + ';';
+    }, '');
+  };
+
+  return {
+    duration: params.duration ?? 200,
+    delay: params.delay ?? 0,
+    css: (t) => {
+      const y = scaleConversion(t, [0, 1], [params.y ?? 5, 0]);
+      const x = scaleConversion(t, [0, 1], [params.x ?? 0, 0]);
+      const scale = scaleConversion(t, [0, 1], [params.start ?? 0.95, 1]);
+      const opacity = t;
+
+      const style: any = {
+        transform: transform + 'translate3d(' + x + 'px, ' + y + 'px, 0) scale(' + scale + ')',
+        opacity
+      };
+
+      if (params.delay && params.delay > 0) {
+        const visibility = t === 0 ? 'hidden' : 'visible'; // Hide when fully collapsed
+        const position = t === 0 ? 'absolute' : 'relative'; // Remove from the flow at the start
+        style.visibility = visibility;
+        style.position = position;
+      }
+
+      return styleToString(style);
+    },
+    easing: cubicOut
+  };
+};
+
+export function flexSlide(node: Element, { duration = 300, easing = cubicOut } = {}) {
+  const style = getComputedStyle(node);
+  const opacity = +style.opacity;
+  const height = parseFloat(style.height);
+  const paddingTop = parseFloat(style.paddingTop);
+  const paddingBottom = parseFloat(style.paddingBottom);
+  const marginTop = parseFloat(style.marginTop);
+  const marginBottom = parseFloat(style.marginBottom);
+  const borderTopWidth = parseFloat(style.borderTopWidth);
+  const borderBottomWidth = parseFloat(style.borderBottomWidth);
+
+  return {
+    duration,
+    easing,
+    css: (t: number) =>
+      `overflow: hidden;
+			opacity: ${Math.min(t * 20, 1) * opacity};
+			flex-grow: ${t};
+			height: ${t * height}px;
+			padding-top: ${t * paddingTop}px;
+			padding-bottom: ${t * paddingBottom}px;
+			margin-top: ${t * marginTop}px;
+			margin-bottom: ${t * marginBottom}px;
+			border-top-width: ${t * borderTopWidth}px;
+			border-bottom-width: ${t * borderBottomWidth}px;
+			`
+  };
+}