@oscarpalmer/oui 0.39.0 → 0.41.0

package/dist/js/dialog.d.mts

@@ -1,47 +0,0 @@
-import { h as OuiMovable } from "./draggable-B5-70SZm.mjs";
-import "./movable/movable.standalone.mjs";
-import { n as OuiResizable } from "./resizable.embedded-dvhdfQgt.mjs";
-import "./resizable/resizable.standalone.mjs";
-import { RemovableEventListener } from "@oscarpalmer/toretto/models";
-//#region src/js/dialog.d.ts
-declare class OuiDialog {
-  #private;
-  /**
-   * Is the dialog open?
-   */
-  get open(): boolean;
-  /**
-   * Open or close the dialog
-   */
-  set open(value: boolean);
-  constructor(state: OuiDialogState);
-  /**
-   * Closes the dialog by request
-   */
-  hide(request: true, value?: string): void;
-  /**
-   * Closes the dialog
-   */
-  hide(value?: string): void;
-  /**
-   * Opens the dialog
-   */
-  show(modal?: boolean): void;
-}
-type OuiDialogState = {
-  dialog: OuiDialog;
-  element: HTMLDialogElement;
-  listeners: RemovableEventListener[];
-  modal: boolean;
-  movable?: OuiMovable;
-  resizable?: OuiResizable;
-};
-/**
- * Get the _OuiDialog_ for an element
- *
- * @param element Element to get _OuiDialog_ for
- * @returns _OuiDialog_ instance
- */
-declare function getDialog(element: HTMLDialogElement): OuiDialog | undefined;
-//#endregion
-export { type OuiDialog, getDialog };

package/dist/js/dialog.mjs

@@ -1,131 +0,0 @@
-import { getOnBeforeToggleListener } from "./floatable/floatable.embedded.mjs";
-import { attributable } from "./internal/attributable.mjs";
-import { ATTRIBUTE_MOVABLE_HANDLE, createMovable } from "./movable/movable.embedded.mjs";
-import "./movable/movable.standalone.mjs";
-import { RESIZABLE_ATTRIBUTE_HANDLE, createResizable } from "./resizable/resizable.embedded.mjs";
-import { getAria, setAria } from "@oscarpalmer/toretto/aria";
-import { on } from "@oscarpalmer/toretto/event";
-import { getAttribute, setAttribute } from "@oscarpalmer/toretto/attribute";
-import { setStyles } from "@oscarpalmer/toretto/style";
-//#region src/js/dialog.ts
-var OuiDialog = class {
-	#state;
-	/**
-	* Is the dialog open?
-	*/
-	get open() {
-		return this.#state.element.open;
-	}
-	/**
-	* Open or close the dialog
-	*/
-	set open(value) {
-		if (value === true) this.show();
-		else if (value === false) this.hide();
-	}
-	constructor(state) {
-		this.#state = state;
-	}
-	hide(first, second) {
-		if (!this.#state.element.open) return;
-		if (first === true) this.#state.element.requestClose(typeof second === "string" ? second : void 0);
-		else this.#state.element.close(typeof first === "string" ? first : void 0);
-	}
-	/**
-	* Opens the dialog
-	*/
-	show(modal) {
-		const { element } = this.#state;
-		if (element == null || element.open) return;
-		const isModal = modal !== false;
-		setAria(element, "modal", isModal);
-		if (isModal) element.showModal();
-		else element.show();
-	}
-};
-function addDialog(element) {
-	if (!(element instanceof HTMLDialogElement)) throw new TypeError(MESSAGE);
-	if (!states.has(element)) states.set(element, getState(element));
-}
-function destroyDialog(state) {
-	state.element.close();
-	setAria(state.element, "modal", state.modal);
-	state.element.removeAttribute(ATTRIBUTE_OPEN);
-	for (const listener of state.listeners) listener();
-	state.movable?.destroy();
-	state.resizable?.destroy();
-	state.dialog = void 0;
-	state.element = void 0;
-	state.listeners = void 0;
-	state.movable = void 0;
-	state.resizable = void 0;
-}
-/**
-* Get the _OuiDialog_ for an element
-*
-* @param element Element to get _OuiDialog_ for
-* @returns _OuiDialog_ instance
-*/
-function getDialog(element) {
-	return states.get(element)?.dialog;
-}
-function getMovable(element) {
-	const handles = element.querySelectorAll(SELECTOR_MOVER);
-	if (handles.length === 0) return;
-	for (const handle of handles) setAttribute(handle, ATTRIBUTE_MOVABLE_HANDLE, "");
-	return createMovable(element, { container: getAttribute(element, ATTRIBUTE_CONTAINER) });
-}
-function getResizable(element) {
-	const handle = element.querySelector(SELECTOR_RESIZER);
-	if (handle == null) return;
-	setAttribute(handle, RESIZABLE_ATTRIBUTE_HANDLE, "");
-	return createResizable(element);
-}
-function getState(element) {
-	const state = {
-		element,
-		dialog: void 0,
-		listeners: [getOnBeforeToggleListener(element), on(element, "toggle", (event) => {
-			const { source } = event;
-			if (element.open) {
-				const modal = source instanceof HTMLButtonElement && source.command === "show-modal" || element.matches(":modal");
-				setAria(element, "modal", modal);
-				setAttribute(element, ATTRIBUTE_OPEN, "");
-				element.focus();
-				setTimeout(() => {
-					state.resizable?.set();
-				}, 500);
-			} else {
-				setAttribute(element, ATTRIBUTE_OPEN);
-				setAria(element, "modal", state.modal);
-				setStyles(element, {
-					inset: "",
-					position: "",
-					transform: ""
-				});
-				state.resizable?.reset();
-			}
-		})],
-		modal: getAria(element, "modal") === true || element.matches(":modal")
-	};
-	state.dialog = new OuiDialog(state);
-	state.movable = getMovable(element);
-	state.resizable = getResizable(element);
-	return state;
-}
-function removeDialog(element) {
-	const state = states.get(element);
-	if (state == null) return;
-	destroyDialog(state);
-	states.delete(element);
-}
-const ATTRIBUTE = "oui-dialog";
-const ATTRIBUTE_CONTAINER = `${ATTRIBUTE}-container`;
-const ATTRIBUTE_OPEN = `${ATTRIBUTE}-open`;
-const MESSAGE = "The element must be an instance of HTMLDialogElement";
-const SELECTOR_MOVER = `[${ATTRIBUTE}-mover]`;
-const SELECTOR_RESIZER = `[${ATTRIBUTE}-resizer]`;
-const states = /* @__PURE__ */ new WeakMap();
-attributable(ATTRIBUTE, addDialog, removeDialog);
-//#endregion
-export { getDialog };

package/dist/js/draggable-B5-70SZm.d.mts

@@ -1,155 +0,0 @@
-import { StyleToggler } from "@oscarpalmer/toretto/style";
-import { PlainObject } from "@oscarpalmer/atoms/models";
-import { EventPosition } from "@oscarpalmer/toretto/models";
-//#region src/js/movable/movable.embedded.d.ts
-declare class OuiMovable extends OuiDraggable<OuiMovableState> {
-  #private;
-  constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
-  /**
-   * Destroys the _Movable_
-   */
-  override destroy(): void;
-}
-type OuiMovableState = {
-  hasHandles?: boolean;
-  moved: boolean;
-  offset?: Partial<EventPosition>;
-  style: OuiMovableStyle;
-};
-type OuiMovableStyle = {
-  inset: string | undefined;
-  position: string | undefined;
-};
-/**
- * Creates _(or retrieves)_ a _OuiMovable_ instance for an element
- *
- * @param element Element to make movable
- * @returns _OuiMovable_ instance
- */
-declare function createMovable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiMovable;
-declare const ATTRIBUTE_MOVABLE = "oui-movable";
-declare const ATTRIBUTE_MOVABLE_HANDLE: string;
-//#endregion
-//#region src/js/sortable/sortable.embedded.d.ts
-declare class OuiSortable extends OuiDraggable<OuiSortableState> {
-  constructor(element: HTMLElement, options?: CreateOuiDraggableOptions);
-}
-type OuiSortableState = {
-  connections: string | null | undefined;
-  origin?: HTMLElement;
-};
-/**
- * Creates _(or retrieves)_ a _OuiSortable_ instance for an element
- *
- * @param element Element to make sortable
- * @returns _OuiSortable_ instance
- */
-declare function createSortable(element: HTMLElement, options?: CreateOuiDraggableOptions): OuiSortable;
-//#endregion
-//#region src/js/internal/draggable.d.ts
-type CreateOuiDraggableOptions = {
-  /**
-   * Container to hold the draggable element and restrict its movement within. Can be `body`, `document`, `window`, a _CSS_ selector, or an element. _(If not provided, the draggable element will not have any constraints)_
-   */
-  container?: string | HTMLElement;
-  /**
-   * Direction in which the element can be dragged. _(If not provided, the element can be dragged in any direction)_
-   */
-  direction?: OuiDraggableDirection;
-};
-type OuiDraggableDirection = "horizontal" | "vertical" | "x" | "y";
-declare abstract class OuiDraggable<ExtraState extends PlainObject = PlainObject> {
-  #private;
-  get element(): HTMLElement;
-  constructor(name: keyof OuiDraggableStates, event: string, attribute: string, element: HTMLElement, options: OuiDraggableOptions<ExtraState>, extras: ExtraState);
-  destroy(): void;
-}
-type OuiDragBegin<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, element: HTMLElement, handle: HTMLElement, position: EventPosition) => void;
-type OuiDragCancel<State extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<State>) => void;
-type OuiDragEnd<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, reset: () => void) => void;
-type OuiDragMove<State extends PlainObject = PlainObject> = (event: MouseEvent | TouchEvent, globals: OuiDraggableGlobals, item: OuiDraggableItem<State>, position: OuiDragMovePosition) => PlainObject | undefined;
-type OuiDragMovePosition = {
-  calculated: EventPosition;
-  original: EventPosition;
-};
-type OuiDraggableBound<Property extends keyof OuiDraggableInstances = keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property] = OuiDraggableInstances[Property]> = {
-  constructor: new (element: HTMLElement, options?: CreateOuiDraggableOptions) => Instance;
-  property: Property;
-};
-type OuiDraggableGlobals = {
-  container?: DOMRect;
-  element?: OuiDraggableGlobalsElement;
-  instances: WeakMap<HTMLElement, OuiDraggableInstances>;
-  offset?: EventPosition;
-  original?: EventPosition;
-  states: WeakMap<HTMLElement, OuiDraggableStates>;
-};
-type OuiDraggableGlobalsElement = {
-  node: HTMLElement;
-  rectangle: DOMRect;
-};
-type OuiDraggableInstances = {
-  movable?: OuiMovable;
-  sortable?: OuiSortable;
-};
-type OuiDraggableItem<ExtraState extends PlainObject = PlainObject> = {
-  instance: OuiDraggable<ExtraState>;
-  state: OuiDraggableState & ExtraState;
-};
-type OuiDraggableOptions<ExtraState extends PlainObject = PlainObject> = {
-  container: OuiDraggableOptionsContainer<ExtraState>;
-  direction: OuiDraggableOptionsDirection<ExtraState>;
-  drag: OuiDraggableOptionsDrag<ExtraState>;
-  input?: CreateOuiDraggableOptions;
-  position: OuiDraggableOptionsPosition<ExtraState>;
-  getDragged(): HTMLElement;
-  getOrigin(): HTMLElement | undefined;
-};
-type OuiDraggableOptionsContainer<ExtraState extends PlainObject = PlainObject> = {
-  attribute: string;
-  map: Map<HTMLElement, Set<OuiDraggable>>;
-  onDestroy?: OuiDraggableOptionsContainerOnDestroy<ExtraState>;
-  onInitialize?: OuiDraggableOptionsContainerOnInitialize;
-};
-type OuiDraggableOptionsContainerOnDestroy<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>, container: HTMLElement, empty: boolean) => void;
-type OuiDraggableOptionsContainerOnInitialize<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
-type OuiDraggableOptionsDirection<ExtraState extends PlainObject = PlainObject> = {
-  attribute: string;
-  onAfter?: OuiDraggableOptionsDirectionOnAfter<ExtraState>;
-};
-type OuiDraggableOptionsDirectionOnAfter<ExtraState extends PlainObject = PlainObject> = (item: OuiDraggableItem<ExtraState>) => void;
-type OuiDraggableOptionsDrag<ExtraState extends PlainObject = PlainObject> = {
-  onBegin: OuiDragBegin<ExtraState>;
-  onCancel: OuiDragCancel<ExtraState>;
-  onEnd: OuiDragEnd<ExtraState>;
-  onMove: OuiDragMove<ExtraState>;
-};
-type OuiDraggableOptionsPosition<ExtraState extends PlainObject = PlainObject> = {
-  getOffset: OuiDraggableOptionsPositionGetOffset<ExtraState>;
-  getOriginal: OuiDraggableOptionsPositionGetOriginal<ExtraState>;
-};
-type OuiDraggableOptionsPositionGetOffset<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, element: HTMLElement, position: EventPosition) => EventPosition;
-type OuiDraggableOptionsPositionGetOriginal<ExtraState extends PlainObject = PlainObject> = (globals: OuiDraggableGlobals, item: OuiDraggableItem<ExtraState>, position: EventPosition) => EventPosition;
-type OuiDraggableState = {
-  attribute: string;
-  container?: HTMLElement;
-  element: HTMLElement;
-  hasHandles?: boolean;
-  horizontal: boolean;
-  name: keyof OuiDraggableStates;
-  options: OuiDraggableOptions;
-  styling: StyleToggler;
-  vertical: boolean;
-};
-type OuiDraggableStates = {
-  movable?: OuiDraggableState;
-  sortable?: OuiDraggableState;
-};
-declare function addDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: OuiDraggableBound<Property, Instance>, element: HTMLElement, options?: CreateOuiDraggableOptions): Instance;
-declare function getDraggableStates(element: HTMLElement): OuiDraggableStates | undefined;
-declare function removeDraggable<Property extends keyof OuiDraggableInstances, Instance extends OuiDraggableInstances[Property]>(this: {
-  constructor: new (element: HTMLElement) => Instance;
-  property: Property;
-}, element: HTMLElement): void;
-//#endregion
-export { OuiDraggableGlobals as a, addDraggable as c, OuiSortable as d, createSortable as f, createMovable as g, OuiMovable as h, OuiDraggableBound as i, getDraggableStates as l, ATTRIBUTE_MOVABLE_HANDLE as m, OuiDragMovePosition as n, OuiDraggableItem as o, ATTRIBUTE_MOVABLE as p, OuiDraggable as r, OuiDraggableState as s, CreateOuiDraggableOptions as t, removeDraggable as u };