@domyjs/collapse 1.0.0

package/dist/index.d.ts

@@ -0,0 +1,750 @@
+type AppState = {
+    isSetuped: boolean;
+    isMounted: boolean;
+    isUnmounted: boolean;
+};
+type State = {
+    data: Record<string, unknown>;
+    componentInfos?: ComponentInfos;
+    refs: Record<string, Element>;
+};
+declare namespace ReactiveUtils {
+    /* eslint @typescript-eslint/no-this-alias: "off" */
+    type Listener = OnGetListener | OnSetListener;
+    type OnGetListener = {
+        type: "onGet";
+        fn: (props: {
+            reactiveVariable: ReactiveVariable;
+            path: string;
+        }) => void;
+    };
+    type OnSetListener = {
+        type: "onSet";
+        fn: (props: {
+            reactiveVariable: ReactiveVariable;
+            path: string;
+            prevValue: any;
+            newValue: any;
+        }) => void | Promise<void>;
+    };
+    const isProxySymbol: unique symbol;
+    const isSignalSymbol: unique symbol;
+    const skipReactivitySymbol: unique symbol;
+    /**
+     * Allow to create a DeepProxy to listen to any change into an object
+     * @author yoannchb-pro
+     */
+    class ReactiveVariable {
+        private target;
+        name: string;
+        private proxy;
+        private onSetListeners;
+        private onGetListeners;
+        static IS_GLOBAL_LOCK: boolean;
+        constructor(target: any);
+        getProxy(): any;
+        /**
+         * Check if the current target is already a proxy
+         * @param target
+         * @returns
+         */
+        static isReactive(target: any): boolean;
+        /**
+         * Check if the current target is a signal instead of a reactive
+         * @param target
+         * @returns
+         */
+        static isSignal(target: any): boolean;
+        /**
+         * Check we should skip the reactivity on the current element
+         * @param target
+         * @returns
+         */
+        static shouldBeSkip(target: any): boolean;
+        clearListeners(): void;
+        attachListener(l: Listener): () => void;
+        removeListener(l: Listener): void;
+        private canAttachProxy;
+        private isCollection;
+        private createCollectionHandler;
+        private createHandler;
+        private createProxy;
+        private callOnGetListeners;
+        private callOnSetListeners;
+    }
+    /**
+     * Attach a listener to all reactive variables
+     * @param listener
+     *
+     * @author yoannchb-pro
+     */
+    function globalWatch(listener: Listener, tracking?: boolean): () => void;
+    /**
+     * Will return true if a obj is a signal/reactive
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function isReactive(obj: any): boolean;
+    /**
+     * Will return true if the obj is a signal
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function isSignal(obj: any): boolean;
+    type MatchingResult = {
+        isMatching: boolean;
+        params: Record<string, string>;
+    };
+    /**
+     * Check if a path match a certain rule
+     * Example:
+     * path: todos.0.isComplete
+     * reg: todos.*.isComplete or todos, todos.* or todos.*.*
+     * Will give true
+     * reg: todos.1.isComplete, todos.*.name, todos.*.*.id
+     * Will give false
+     * @param reg
+     * @param path
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function matchPath(reg: string, path: string): MatchingResult;
+    /**
+     * Transform an object into a reactive object to listen to any change
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function reactive<T>(obj: T): T;
+    /**
+     * Register a name for a reactive variable
+     * It allow us to have a correct path name
+     * Example of use case:
+     * cont count = signal(0);
+     * watch(({ path }) => console.log(path), [count]);
+     * count.value += 1;
+     *
+     * The path is going to be "value" instead of "count.value" because we don't know the variable name
+     * So to fixe that we just need to put registerName("count", count) after the variable declaration
+     * @param name
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function registerName(name: string, obj: any): void;
+    /**
+     * Transform a primitive into a reactive object to listen to any change
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function signal<T>(obj: T): {
+        value: T;
+    };
+    /**
+     * Attach a listener to some reactives variables
+     * @param listener
+     * @param effect
+     *
+     * @author yoannchb-pro
+     */
+    function watch(listener: Listener, effect: () => any): () => void;
+    /**
+     * Allow us to lock every watcher if we need to do a set/get action on the object without calling the watcher
+     *
+     * @author yoannchb-pro
+     */
+    function lockWatchers(): void;
+    /**
+     * Unlock every watchers
+     *
+     * @author yoannchb-pro
+     */
+    function unlockWatchers(): void;
+    /**
+     * Will delete the reactivity of a data
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function unReactive<T = any>(obj: T): T;
+    /**
+     * Skip the reactivity on an element we don't wanna listen to in a reactivity variable
+     * Example:
+     * const myElement = reactive({ el: skipReactive({ ... }), name: 'div' })
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function skipReactive<T = any>(obj: T): T;
+    type Effect = () => any;
+    type UnEffect = () => void;
+    type WatchEffectOptions = {
+        noSelfUpdate?: boolean; // Avoid the effect to launch the function again
+        onDepChange?: (uneffect: UnEffect) => void;
+    };
+    /**
+     * Act like a watcher but get his dependencies it self by running one time the instance
+     * Example:
+     * const todo = reactive({ title: "Yoann", isCompleted: false });
+     * const uneffect = watchEffect(() => console.log(todo.title)); // Will display: "Yoann" when initialising
+     * todo.isCompleted = true; // Don't call the effect
+     * todo.title = "Pierre"; // Will call the effect and display "Pierre"
+     * @param effectFn
+     *
+     * @author yoannchb-pro
+     */
+    function watchEffect(effect: Effect, opts?: WatchEffectOptions): UnEffect;
+    type Dep = {
+        type: "reactive_variable_creation";
+        reactiveVariable: ReactiveVariable;
+        clean: () => void;
+    } | {
+        type: "watcher" | "effect" | "global_watcher";
+        clean: () => void;
+    };
+    let trackCallback: ((dep: Dep) => void) | null;
+    /**
+     * Allow us to track inside a function:
+     * - reactive variable (signal + reactive)
+     * - watcher
+     * - effects
+     * - global watchers
+     * @param fn
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function trackDeps(fn: () => any): Dep[];
+    const isComputedSymbol: unique symbol;
+    /**
+     * Will return a boolean determining if an object is a computed value or not
+     * @param obj
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function isComputed(obj: any): boolean;
+    /**
+     * Create a computed variable based on a signal
+     * Example:
+     * const count = signal(1);
+     * const doubleCount = computed(() => count.value * 2);
+     * console.log(doubleCount); // 2
+     * @param getter
+     * @param setter
+     * @returns
+     *
+     * @author yoannchb-pro
+     */
+    function computed<T extends () => unknown, R extends ReturnType<T>>(getter: () => R, setter?: (newValue: R) => void): {
+        [isComputedSymbol]: boolean;
+        value: R;
+    };
+}
+type Config = {
+    avoidDeprecatedWith?: boolean;
+    CSP?: boolean;
+};
+type Props = {
+    domyHelperId?: number;
+    el?: Element | Text;
+    state: State;
+    scopedNodeData: Record<string, any>[];
+    config: Config;
+    pluginHelper: PluginHelper;
+};
+/**
+ * Return a context with all what domy need to render
+ * Like variables, methods, helpers ...
+ * @param el
+ * @param state
+ * @param scopedNodeData
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getContext(props: Props): {
+    [x: `$${string}`]: any;
+};
+type QueueElement = () => any;
+/**
+ * Scheduler function to add a job to the queue
+ * @param job
+ *
+ * @author yoannchb-pro
+ */
+declare function queueJob(job: QueueElement, id: number): void;
+/**
+ * Return an unique queue id
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getUniqueQueueId(): number;
+/**
+ * Call a function with error handling
+ * @param fn
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function callWithErrorHandling<T extends (...args: any[]) => any>(fn: T, onError?: (err: any) => void): {
+    hasError: true;
+    err: any;
+} | {
+    hasError: false;
+    result: ReturnType<T>;
+};
+/**
+ * Fixe an attribute name to avoid setAttribute throwing error
+ * @param attrName
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function fixeAttrName(attrName: string): string;
+/**
+ * Retrieve some utils informations from a domy attribute
+ * @param attr
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getDomyAttributeInformations(attr: Attr): {
+    prefix: string;
+    directive: string;
+    modifiers: string[];
+    attrName: string;
+};
+/**
+ * Execute a function after the animation/transition on an element is finish
+ * @param el
+ * @param action
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function executeActionAfterAnimation(el: Element, action: () => void): () => void;
+/**
+ * Get function (like get in lodash)
+ * @param object
+ * @param path
+ * @param defaultValue
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function get<T = any>(object: Array<any> | Record<string, any>, path: string, defaultValue?: any): T | undefined;
+/**
+ * Set function (like set in lodash)
+ * @param object
+ * @param path
+ * @param value
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function set<T>(object: T, path: string, value: any): T;
+type Props$0 = {
+    shouldBeDisplay: () => boolean;
+    domy: DomyDirectiveHelper;
+};
+/**
+ * Handle the visibility of an element with the transition
+ * @param props
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getElementVisibilityHandler(props: Props$0): {
+    effect: () => void;
+    cleanup: () => void;
+};
+/**
+ * Return the list of previous conditions elements before an element
+ * Useful for d-else and d-else-if directives
+ * @param element
+ * @param previousAuthorizedAttrs
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getPreviousConditionsElements(element: HTMLElement, previousAuthorizedAttrs: string[]): Element[];
+/**
+ * Return the get and set method for a reactive variable
+ * It allow us to keep the proxy and to handle signals
+ * @param obj
+ * @param key
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getReactiveHandler(obj: Record<string, any>, key: string): PropertyDescriptor;
+/**
+ * Handle class attribute if it's a string or an object like
+ * { show: true }
+ * or
+ * ["show"]
+ * @param executedValue
+ * @param defaultClass
+ *
+ * @author yoannchb-pro
+ */
+declare function handleClass(executedValue: any, defaultClass?: string): {
+    class: string;
+    cleanedClass: (newDefaultClass: string) => string;
+};
+/**
+ * Handle style attribute if it's an object
+ * { backgroundColor: '#fff', color: 'red' .... }
+ * @param executedValue
+ * @param defaultStyle
+ *
+ * @author yoannchb-pro
+ */
+declare function handleStyle(executedValue: any, defaultStyle?: string): {
+    style: string;
+    cleanedStyle: (newDefaultStyle: string) => string;
+};
+/**
+ * Check if the current attribute is a binding attribute
+ * @param attr
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function isBindAttr(attr: string): boolean;
+/**
+ * Check if the current attribute is an event attribute
+ * @param attr
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function isEventAttr(attr: string): boolean;
+declare function isDNameAttr(attr: string): boolean;
+/**
+ * Check if the current attribute is a domy attribute
+ * It could be a prefix like d-on:click
+ * Or it could be a simple attribute like d-for
+ * @param attr
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function isDomyAttr(PLUGINS: Plugins, attr: string): boolean;
+/**
+ * Check if the current attribute is a normal attribute
+ * @param attr
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function isNormalAttr(PLUGINS: Plugins, attr: string): boolean;
+/**
+ * Convert a kebab string into a camelCase string
+ * Example: show-error -> showError
+ * @param str
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function kebabToCamelCase(str: string): string;
+/**
+ * Warn log function for domy
+ * @param msg
+ *
+ * @author yoannchb-pro
+ */
+declare function warn(msg: string): void;
+/**
+ * Error log function for domy
+ * @param err
+ *
+ * @author yoannchb-pro
+ */
+declare function error(...errs: (Error | string)[]): void;
+/**
+ * Allow us to merge conditions for d-else and d-else-if
+ * @param conditions
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function mergeToNegativeCondition(conditions: string[]): string;
+/**
+ * Convert a string to kebab case
+ * Example:
+ * console.log(toKebabCase('HelloWorld'));        // hello-world
+ * console.log(toKebabCase('myVariableName'));    // my-variable-name
+ * console.log(toKebabCase('Hello World Today')); // hello-world-today
+ * @param str
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function toKebabCase(str: string): string;
+// A list of utils we can access in helpers
+declare const helpersUtils: {
+    handleClass: typeof handleClass;
+    handleStyle: typeof handleStyle;
+    callWithErrorHandling: typeof callWithErrorHandling;
+    toKebabCase: typeof toKebabCase;
+    kebabToCamelCase: typeof kebabToCamelCase;
+    getElementVisibilityHandler: typeof getElementVisibilityHandler;
+    get: typeof get;
+    set: typeof set;
+    getPreviousConditionsElements: typeof getPreviousConditionsElements;
+    executeActionAfterAnimation: typeof executeActionAfterAnimation;
+    getReactiveHandler: typeof getReactiveHandler;
+    mergeToNegativeCondition: typeof mergeToNegativeCondition;
+    fixeAttrName: typeof fixeAttrName;
+    getDomyAttributeInformations: typeof getDomyAttributeInformations;
+    isDomyAttr: typeof isDomyAttr;
+    isNormalAttr: typeof isNormalAttr;
+    isEventAttr: typeof isEventAttr;
+    isBindAttr: typeof isBindAttr;
+    isDNameAttr: typeof isDNameAttr;
+    warn: typeof warn;
+    error: typeof error;
+};
+type Helpers = Record<`$${string}`, any>;
+type Props$1 = {
+    domyHelperId?: number;
+    el?: Element | Text;
+    state: State;
+    config: Config;
+    scopedNodeData: Record<string, any>[];
+    pluginHelper: PluginHelper;
+};
+/**
+ * Return the initialised helpers with everything it need
+ * @param el
+ * @param state
+ * @param scopedNodeData
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function getHelpers(props: Props$1): Helpers;
+type Options = {
+    dontQueueOnFirstExecution?: boolean;
+    effectId?: number;
+};
+/**
+ * Allow to queue an effect
+ * @param effect
+ * @param opts
+ *
+ * @author yoannchb-pro
+ */
+declare function queuedWatchEffect(effect: () => any, opts?: Options): () => void;
+// A list of utils we can access in directives/prefix
+declare const directivesUtils: {
+    getHelpers: typeof getHelpers;
+    queuedWatchEffect: typeof queuedWatchEffect;
+    handleClass: typeof handleClass;
+    handleStyle: typeof handleStyle;
+    callWithErrorHandling: typeof callWithErrorHandling;
+    toKebabCase: typeof toKebabCase;
+    kebabToCamelCase: typeof kebabToCamelCase;
+    getElementVisibilityHandler: typeof getElementVisibilityHandler;
+    get: typeof get;
+    set: typeof set;
+    getPreviousConditionsElements: typeof getPreviousConditionsElements;
+    executeActionAfterAnimation: typeof executeActionAfterAnimation;
+    getReactiveHandler: typeof getReactiveHandler;
+    mergeToNegativeCondition: typeof mergeToNegativeCondition;
+    fixeAttrName: typeof fixeAttrName;
+    getDomyAttributeInformations: typeof getDomyAttributeInformations;
+    isDomyAttr: typeof isDomyAttr;
+    isNormalAttr: typeof isNormalAttr;
+    isEventAttr: typeof isEventAttr;
+    isBindAttr: typeof isBindAttr;
+    isDNameAttr: typeof isDNameAttr;
+    warn: typeof warn;
+    error: typeof error;
+};
+type Observer = {
+    type: keyof AppState;
+    callback: () => void;
+};
+/**
+ * Register the current lifecycle state of the current app
+ *
+ * @author yoannchb-pro
+ */
+declare class AppStateObserver {
+    private observers;
+    private appState;
+    get isMounted(): boolean;
+    get isSetuped(): boolean;
+    get isUnmounted(): boolean;
+    set isMounted(newValue: boolean);
+    set isSetuped(newValue: boolean);
+    set isUnmounted(newValue: boolean);
+    private callObservers;
+    addObserver(observer: Observer): () => void;
+    removeObserver(observer: Observer): void;
+}
+type Transition = {
+    enterTransition: string;
+    enterTransitionTo: string;
+    outTransition: string;
+    outTransitionTo: string;
+    init: boolean;
+};
+type TransitionType = "enterTransition" | "outTransition";
+/**
+ * Utilitary class to handle properly an element
+ */
+declare class Block {
+    private element;
+    name: string | null;
+    key: string | null;
+    private pluginsData;
+    transition: Transition | null;
+    private cleanupTransition;
+    private cleanups;
+    private onElChangeCbList;
+    parentBlock: Block | null;
+    constructor(element: Element | Block);
+    getDataForPluginId(pluginId: string): any;
+    setDataForPluginId(pluginId: string, data: any): void;
+    cleanTransition(): void;
+    private callCbForElementChange;
+    createNewElementBlock(): Block;
+    attachListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+    onElementChange(cb: (newEl: Element) => void): void;
+    setEl(newEl: Element | Block): void;
+    getEl(): Element;
+    applyTransition(transitionType: TransitionType, action?: () => void): void;
+    replaceWith(newEl: Element | Block): void;
+    remove(): void;
+    isTemplate(): boolean;
+    isTextNode(): boolean;
+    addCleanup(cleanup: () => void): void;
+    unmount(): void;
+}
+type Props$2 = {
+    element: Element | Block;
+    scopedNodeData: Record<string, any>[];
+    byPassAttributes?: string[];
+    skipChildRendering?: boolean;
+    renderWithoutListeningToChange?: boolean;
+};
+/**
+ * Deep render an element (with the childs and textContent)
+ * It will keep the config for all the specified target only
+ * @param config
+ *
+ * @author yoannchb-pro
+ */
+declare function createDeepRenderFn(appId: number, appState: AppStateObserver, state: State, config: Config, components: Components, pluginHelper: PluginHelper): (props: Props$2) => Block;
+type DomyDirectiveFn = (domy: DomyDirectiveHelper) => DomyDirectiveReturn;
+type DomySpecialFn = (domy: DomySpecialHelper) => any;
+type DomyDirectiveReturn = {
+    skipChildsRendering?: boolean;
+    skipOtherAttributesRendering?: boolean;
+    skipComponentRendering?: boolean;
+} | void;
+type DomySpecialHelper = {
+    domyHelperId?: number;
+    el?: Element | Text;
+    state: State;
+    scopedNodeData: Record<string, any>[];
+    config: Config;
+    utils: typeof helpersUtils;
+} & typeof ReactiveUtils;
+type DomyDirectiveHelper = {
+    domyHelperId: number;
+    pluginHelper: PluginHelper;
+    appState: AppStateObserver;
+    block: Block;
+    config: Config;
+    state: State;
+    scopedNodeData: Record<string, any>[];
+    prefix: string;
+    directive: string;
+    modifiers: string[];
+    attrName: string;
+    attr: {
+        name: string;
+        value: string;
+    };
+    utils: typeof directivesUtils;
+    onElementMounted(cb: () => void): void;
+    onAppMounted(cb: () => void): void;
+    getUniqueQueueId: typeof getUniqueQueueId;
+    queueJob: typeof queueJob;
+    effect(cb: () => void): (() => void) | void;
+    cleanup(cb: () => void): void;
+    evaluate(code: string, scope?: Record<string, any>): any;
+    deepRender: ReturnType<typeof createDeepRenderFn>;
+    addScopeToNode(obj: Record<string, any>): void;
+    removeScopeToNode(obj: Record<string, any>): void;
+    getContext: typeof getContext;
+} & typeof ReactiveUtils;
+type DomyPluginDefinition = {
+    prefix(name: string, fn: DomyDirectiveFn): void;
+    directive(name: string, fn: DomyDirectiveFn): void;
+    helper(name: string, fn: DomySpecialFn): void;
+};
+type DomyPlugin = (domy: DomyPluginDefinition) => void;
+type PluginHelper = ReturnType<typeof createPluginRegistrer>;
+type Plugins = {
+    prefixes: Record<string, DomyDirectiveFn>;
+    directives: Record<string, DomyDirectiveFn>;
+    helpers: Record<string, DomySpecialFn>;
+};
+/**
+ * Allow to register plugin for the current instance
+ * @returns
+ *
+ * @author yoannchb-pro
+ */
+declare function createPluginRegistrer(): {
+    PLUGINS: Plugins;
+    plugin: (pluginMaker: DomyPlugin) => void;
+};
+type ComponentInfos = {
+    componentData: {
+        $props: {
+            [key: string]: any;
+        };
+        $attrs: {
+            [key: string]: string;
+        };
+    };
+    childrens: Element[];
+    names: {
+        [name: string]: Element | undefined;
+    };
+    parentPluginHelper: PluginHelper;
+};
+type Component = (props: {
+    name: string;
+    componentElement: HTMLElement;
+    domy: DomyDirectiveHelper;
+}) => void | (() => Element);
+type Components = {
+    [name: string]: Component;
+};
+type CollapseSettings = {
+    defaultHeight?: number;
+    transition?: string;
+};
+declare const collapsePluginDefinition: (settings?: CollapseSettings) => DomyPlugin;
+
+export { collapsePluginDefinition as default };

package/dist/index.js

@@ -0,0 +1,2 @@
+!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?module.exports=t():"function"==typeof define&&define.amd?define(t):(e="undefined"!=typeof globalThis?globalThis:e||self).collapse=t()}(this,function(){"use strict";class e{constructor(e={}){this.defaultSettings=e}collapseSettingsPlugin(e){if(!e.block.getEl().getAttribute("d-collapse"))throw new Error('(Collapse) The "d-collapse" directive as to be placed after "d-collapse-settings" directive (and not before).');e.block.setDataForPluginId("collapse-settings",e.evaluate(e.attr.value))}collapsePlugin(e){var t;const l=e.block.getEl(),i=null!==(t=e.block.getDataForPluginId("collapse-settings"))&&void 0!==t?t:{},n=()=>l.style.height="auto";e.onElementMounted(()=>{let t=!1;l.style.overflowY="hidden",e.effect(()=>{var o,s;l.removeEventListener("transitionend",n);const a=e.evaluate(e.attr.value);l.style.transition="",l.style.height="auto";const d=l.getBoundingClientRect().height,r=null!==(s=null!==(o=i.defaultHeight)&&void 0!==o?o:this.defaultSettings.defaultHeight)&&void 0!==s?s:0;l.style.height=a?`${r}px`:`${d}px`,requestAnimationFrame(()=>{var e,o;t&&(l.style.transition=null!==(o=null!==(e=i.transition)&&void 0!==e?e:this.defaultSettings.transition)&&void 0!==o?o:"height 250ms ease-out"),a?(l.style.height=`${d}px`,l.addEventListener("transitionend",n)):l.style.height=`${r}px`,t=!0})})})}}return t=>{const l=new e(t);return e=>{e.directive("collapse",l.collapsePlugin.bind(l)),e.directive("collapse-settings",l.collapseSettingsPlugin.bind(l))}}});
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../src/index.ts"],"sourcesContent":["import type { DomyDirectiveHelper, DomyDirectiveReturn, DomyPlugin } from '@domyjs/domy';\r\n\r\ntype CollapseSettings = {\r\n  defaultHeight?: number;\r\n  transition?: string;\r\n};\r\n\r\nclass CollapsePlugin {\r\n  constructor(private defaultSettings: CollapseSettings = {}) {}\r\n\r\n  /**\r\n   * Register collapse settings on the block\r\n   * @param domy\r\n   *\r\n   * @author yoannchb-pro\r\n   */\r\n  collapseSettingsPlugin(domy: DomyDirectiveHelper): DomyDirectiveReturn {\r\n    if (!domy.block.getEl().getAttribute('d-collapse'))\r\n      throw new Error(\r\n        `(Collapse) The \"d-collapse\" directive as to be placed after \"d-collapse-settings\" directive (and not before).`\r\n      );\r\n\r\n    domy.block.setDataForPluginId('collapse-settings', domy.evaluate(domy.attr.value));\r\n  }\r\n\r\n  /**\r\n   * Collapse directive\r\n   * It will hide the element by setting the height to 0px\r\n   * When it have to be show the height will go back to normal height with a transition\r\n   * @param domy\r\n   * @returns\r\n   *\r\n   * @author yoannchb-pro\r\n   */\r\n  collapsePlugin(domy: DomyDirectiveHelper): DomyDirectiveReturn {\r\n    const el = domy.block.getEl() as HTMLElement;\r\n    const settings: CollapseSettings = domy.block.getDataForPluginId('collapse-settings') ?? {};\r\n    const heightAutoEvent = () => (el.style.height = 'auto');\r\n\r\n    // We wait the element to be mounted first to get his initial height\r\n    domy.onElementMounted(() => {\r\n      let isInitialised = false;\r\n      el.style.overflowY = 'hidden';\r\n\r\n      domy.effect(() => {\r\n        el.removeEventListener('transitionend', heightAutoEvent);\r\n\r\n        const shouldBeShow = domy.evaluate(domy.attr.value);\r\n\r\n        el.style.transition = '';\r\n        el.style.height = 'auto';\r\n        const height = el.getBoundingClientRect().height;\r\n        const defaultHeight = settings.defaultHeight ?? this.defaultSettings.defaultHeight ?? 0;\r\n        el.style.height = shouldBeShow ? `${defaultHeight}px` : `${height}px`;\r\n\r\n        requestAnimationFrame(() => {\r\n          if (isInitialised)\r\n            el.style.transition =\r\n              settings.transition ?? this.defaultSettings.transition ?? 'height 250ms ease-out';\r\n\r\n          if (shouldBeShow) {\r\n            el.style.height = `${height}px`;\r\n            el.addEventListener('transitionend', heightAutoEvent);\r\n          } else {\r\n            el.style.height = `${defaultHeight}px`;\r\n          }\r\n\r\n          isInitialised = true;\r\n        });\r\n      });\r\n    });\r\n  }\r\n}\r\n\r\nconst collapsePluginDefinition = (settings?: CollapseSettings) => {\r\n  const collapseInstance = new CollapsePlugin(settings);\r\n  const pluginSetter: DomyPlugin = domyPluginSetter => {\r\n    domyPluginSetter.directive('collapse', collapseInstance.collapsePlugin.bind(collapseInstance));\r\n    domyPluginSetter.directive(\r\n      'collapse-settings',\r\n      collapseInstance.collapseSettingsPlugin.bind(collapseInstance)\r\n    );\r\n  };\r\n  return pluginSetter;\r\n};\r\n\r\nexport default collapsePluginDefinition;\r\n"],"names":["CollapsePlugin","constructor","defaultSettings","this","collapseSettingsPlugin","domy","block","getEl","getAttribute","Error","setDataForPluginId","evaluate","attr","value","collapsePlugin","el","settings","_a","getDataForPluginId","heightAutoEvent","style","height","onElementMounted","isInitialised","overflowY","effect","removeEventListener","shouldBeShow","transition","getBoundingClientRect","defaultHeight","_b","requestAnimationFrame","addEventListener","collapseInstance","domyPluginSetter","directive","bind"],"mappings":"wOAOA,MAAMA,EACJ,WAAAC,CAAoBC,EAAoC,IAApCC,KAAAD,gBAAAA,EAQpB,sBAAAE,CAAuBC,GACrB,IAAKA,EAAKC,MAAMC,QAAQC,aAAa,cACnC,MAAM,IAAIC,MACR,iHAGJJ,EAAKC,MAAMI,mBAAmB,oBAAqBL,EAAKM,SAASN,EAAKO,KAAKC,QAY7E,cAAAC,CAAeT,SACb,MAAMU,EAAKV,EAAKC,MAAMC,QAChBS,EAA+E,QAAlDC,EAAAZ,EAAKC,MAAMY,mBAAmB,4BAAoB,IAAAD,EAAAA,EAAI,CAAA,EACnFE,EAAkB,IAAOJ,EAAGK,MAAMC,OAAS,OAGjDhB,EAAKiB,iBAAiB,KACpB,IAAIC,GAAgB,EACpBR,EAAGK,MAAMI,UAAY,SAErBnB,EAAKoB,OAAO,aACVV,EAAGW,oBAAoB,gBAAiBP,GAExC,MAAMQ,EAAetB,EAAKM,SAASN,EAAKO,KAAKC,OAE7CE,EAAGK,MAAMQ,WAAa,GACtBb,EAAGK,MAAMC,OAAS,OAClB,MAAMA,EAASN,EAAGc,wBAAwBR,OACpCS,EAA4E,QAA5DC,EAAsB,QAAtBd,EAAAD,EAASc,qBAAa,IAAAb,EAAAA,EAAId,KAAKD,gBAAgB4B,qBAAa,IAAAC,EAAAA,EAAI,EACtFhB,EAAGK,MAAMC,OAASM,EAAe,GAAGG,MAAoB,GAAGT,MAE3DW,sBAAsB,aAChBT,IACFR,EAAGK,MAAMQ,WAC+C,QAAtDG,EAAmB,QAAnBd,EAAAD,EAASY,kBAAU,IAAAX,EAAAA,EAAId,KAAKD,gBAAgB0B,kBAAU,IAAAG,EAAAA,EAAI,yBAE1DJ,GACFZ,EAAGK,MAAMC,OAAS,GAAGA,MACrBN,EAAGkB,iBAAiB,gBAAiBd,IAErCJ,EAAGK,MAAMC,OAAS,GAAGS,MAGvBP,GAAgB,gBAOQP,IAChC,MAAMkB,EAAmB,IAAIlC,EAAegB,GAQ5C,OAPiCmB,IAC/BA,EAAiBC,UAAU,WAAYF,EAAiBpB,eAAeuB,KAAKH,IAC5EC,EAAiBC,UACf,oBACAF,EAAiB9B,uBAAuBiC,KAAKH"}

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@domyjs/collapse",
+  "unpkg": "./dist/index.js",
+  "version": "1.0.0",
+  "buildName": "collapse",
+  "description": "Domyjs collapse plugin",
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "./dist",
+    "package.json",
+    "README.md"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/yoannchb-pro/domy.git"
+  },
+  "keywords": [
+    "domyjs",
+    "typescript",
+    "javascript",
+    "framework"
+  ],
+  "author": "yoannchb",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/yoannchb-pro/domy/issues"
+  },
+  "homepage": "https://domyjs.github.io/domy/docs/plugins/collapse"
+}