@skalfa/skalfa-component 1.0.0 → 1.0.3

package/dist/src/input/Select.component.js

@@ -1,275 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.SelectComponent = SelectComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-;
-function SelectComponent({ name, label, placeholder, tip, leftIcon, rightIcon, value, invalid, disabled, validations, multiple, autoFocus, clearable, options = [], searchable, serverOptionControl, idbOptionControl, serverSearchable, includedOptions = [], exceptOptions = [], tempOptions, newOption, maxShowOption = 10, register, unregister, onChange, onFocus, onBlur, className = "", }) {
-    const [inputShowValue, setInputShowValue] = (0, react_1.useState)("");
-    const [keydown, setKeydown] = (0, react_1.useState)(false);
-    const [useTemp, setUseTemp] = (0, react_1.useState)(true);
-    const [dataOptions, setDataOptions] = (0, react_1.useState)([]);
-    const [filteredOptions, setFilteredOptions] = (0, react_1.useState)([]);
-    const [loadingOption, setLoadingOption] = (0, react_1.useState)(false);
-    const [activeOption, setActiveOption] = (0, react_1.useState)(0);
-    const [showOption, setShowOption] = (0, react_1.useState)(false);
-    const [keyword, setKeyword] = (0, react_1.useState)("");
-    const [keywordSearch] = (0, _utils_1.useLazySearch)(keyword);
-    // =========================>
-    // ## Initial
-    // =========================>
-    const inputHandler = (0, _utils_1.useInputHandler)(name, value, validations, register, unregister, false);
-    const randomId = (0, _utils_1.useInputRandomId)();
-    // =========================>
-    // ## Invalid handler
-    // =========================>
-    const [invalidMessage] = (0, _utils_1.useValidation)(inputHandler.value, validations, invalid, inputHandler.idle);
-    // =========================>
-    // ## change value handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        if (value) {
-            inputHandler.setValue(value);
-            Array.isArray(dataOptions) && setInputShowValue((newOption ? [newOption, ...dataOptions] : dataOptions)?.find((option) => option.value == value)?.label || "");
-            inputHandler.setIdle(false);
-        }
-        else {
-            inputHandler.setValue("");
-            setInputShowValue("");
-        }
-    }, [value, dataOptions]);
-    // =========================>
-    // ## options handler
-    // =========================>
-    (0, react_1.useEffect)(() => {
-        options?.length && setDataOptions([...options, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
-    }, [options]);
-    const filterOption = (e) => {
-        if (dataOptions?.length) {
-            let newFilteredOptions = [];
-            if (searchable && !serverSearchable) {
-                if (e.target.value) {
-                    newFilteredOptions = dataOptions.filter((Option) => Option.label?.toLowerCase().indexOf(e.target.value.toLowerCase()) > -1).slice(0, maxShowOption);
-                }
-                else {
-                    newFilteredOptions = dataOptions.slice(0, maxShowOption);
-                }
-            }
-            else {
-                newFilteredOptions = dataOptions;
-            }
-            setActiveOption(-1);
-            setFilteredOptions(newFilteredOptions);
-            setShowOption(true);
-        }
-    };
-    const onKeyDownOption = (e) => {
-        if (dataOptions?.length) {
-            if (e.keyCode === 13) {
-                const resultValue = filteredOptions?.at(activeOption);
-                setActiveOption(-1);
-                setFilteredOptions([]);
-                setShowOption(false);
-                if (!multiple) {
-                    setInputShowValue(resultValue?.label || inputShowValue);
-                    inputHandler.setValue(resultValue?.value || inputShowValue);
-                    serverSearchable && setKeyword(resultValue?.label || keyword);
-                }
-                else {
-                    if (resultValue?.value) {
-                        searchable ? setInputShowValue(resultValue.label) : searchable && setInputShowValue("");
-                        serverSearchable && setKeyword(resultValue.label);
-                        const values = Array.isArray(inputHandler.value) ? Array().concat(inputHandler.value)?.filter((val) => val != resultValue?.value) : [];
-                        if (values.find((val) => val == resultValue?.value)) {
-                            inputHandler.setValue(values);
-                        }
-                        else {
-                            inputHandler.setValue([...Array().concat(values), resultValue.value]);
-                        }
-                    }
-                }
-                e.preventDefault();
-            }
-            else if (e.keyCode === 38) {
-                if (activeOption === 0)
-                    return;
-                setActiveOption(activeOption - 1);
-            }
-            else if (e.keyCode === 40) {
-                if (activeOption + 1 >= (filteredOptions?.length || 0))
-                    return;
-                setActiveOption(activeOption + 1);
-            }
-        }
-    };
-    const fetchOptions = async () => {
-        setLoadingOption(true);
-        const serverControl = {
-            ...serverOptionControl,
-            params: serverSearchable ? { search: keywordSearch, ...(serverOptionControl?.params || {}) } : (serverOptionControl?.params || {}),
-            headers: { "X-Option": 1 }
-        };
-        const getCacheOptions = await _utils_1.cavity.get(serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`);
-        const cacheOptions = (getCacheOptions?.data || []);
-        if (cacheOptions?.length) {
-            setDataOptions([...cacheOptions, ...includedOptions].filter((op) => !exceptOptions?.includes(op.value)));
-            setLoadingOption(false);
-        }
-        else {
-            const mutateOptions = await (0, _utils_1.api)(serverControl || {});
-            setDataOptions([...(mutateOptions?.data?.data || []), ...(includedOptions || [])].filter((op) => !exceptOptions?.includes(op.value)));
-            setShowOption(true);
-            if (serverOptionControl?.cacheName != false) {
-                _utils_1.cavity.set({
-                    key: serverOptionControl?.cacheName || `option_${serverOptionControl?.path}`,
-                    data: mutateOptions?.data,
-                    expired: 5,
-                });
-            }
-            setLoadingOption(false);
-        }
-    };
-    const fetchIdbOptions = async () => {
-        setLoadingOption(true);
-        if (idbOptionControl?.store) {
-            const idb = _utils_1.registry.get("idb");
-            if (!idb) {
-                throw new Error("IndexedDB (IDB) extension is not installed.");
-            }
-            const getIdbOptions = await (await idb.query(idbOptionControl?.store)).get();
-            const rows = getIdbOptions.map((row) => {
-                const value = row[idbOptionControl.valueKey] || row["id"];
-                const label = row[idbOptionControl.labelKey] || row["id"];
-                return {
-                    label,
-                    value,
-                    ...row,
-                };
-            });
-            setDataOptions(rows);
-            setLoadingOption(false);
-        }
-    };
-    (0, react_1.useEffect)(() => {
-        if (!serverSearchable) {
-            if (serverOptionControl?.path || serverOptionControl?.url) {
-                fetchOptions();
-            }
-            else if (idbOptionControl?.store) {
-                fetchIdbOptions();
-            }
-            else {
-                !options && setDataOptions([]);
-            }
-        }
-    }, [serverOptionControl?.path, serverOptionControl?.url]);
-    (0, react_1.useEffect)(() => {
-        if (serverSearchable) {
-            if (serverOptionControl?.path || serverOptionControl?.url) {
-                fetchOptions();
-            }
-            else {
-                !options && setDataOptions([]);
-            }
-        }
-    }, [keywordSearch, serverOptionControl?.path, serverOptionControl?.url]);
-    return ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsxs)("div", { className: "input-container", children: [(0, jsx_runtime_1.jsxs)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-label", disabled && "input-label-disabled", inputHandler.focus && "input-label-focus", invalidMessage && "input-label-error", (0, _utils_1.pcn)(className, "label"), disabled && (0, _utils_1.pcn)(className, "label", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "label", "focus"), invalidMessage && (0, _utils_1.pcn)(className, "label", "error")), children: [label, validations && _utils_1.validation.hasRules(validations, "required") && (0, jsx_runtime_1.jsx)("span", { className: "text-danger ml-1", children: "*" })] }), tip && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-tip", disabled && "input-tip-disabled", (0, _utils_1.pcn)(className, "tip"), disabled && (0, _utils_1.pcn)(className, "tip", "disabled")), children: tip })), (0, jsx_runtime_1.jsxs)("div", { className: "relative", children: [(0, jsx_runtime_1.jsx)("input", { type: "hidden", value: !multiple ? String(inputHandler.value) : Array().concat(inputHandler.value).map((val) => String(val)), name: name }), (0, jsx_runtime_1.jsx)("input", { type: "text", readOnly: !searchable, id: randomId, placeholder: !inputHandler.value || (Array.isArray(inputHandler.value) && !inputHandler.value.length) ? placeholder : "", disabled: disabled, className: (0, _utils_1.cn)("input cursor-pointer", leftIcon && "input-with-left-icon", rightIcon && "input-with-right-icon", invalidMessage && "input-error", (0, _utils_1.pcn)(className, "input"), invalidMessage && (0, _utils_1.pcn)(className, "input", "error")), value: (useTemp && tempOptions ? tempOptions.at(0)?.label : serverSearchable ? keyword : inputShowValue), onChange: (e) => {
-                                setUseTemp(false);
-                                searchable && setInputShowValue(e.target.value);
-                                serverSearchable && setKeyword(e.target.value);
-                                inputHandler.setIdle(false);
-                                dataOptions?.length && filterOption(e);
-                            }, onFocus: (e) => {
-                                setUseTemp(false);
-                                inputHandler.setFocus(true);
-                                onFocus?.();
-                                dataOptions?.length && filterOption(e);
-                                searchable && e.target.select();
-                            }, onBlur: (e) => {
-                                setUseTemp(false);
-                                const value = e.target.value;
-                                const valueOption = dataOptions?.find((option) => option.label?.toLowerCase() == value?.toLowerCase());
-                                if (!keydown) {
-                                    if (!multiple) {
-                                        setTimeout(() => {
-                                            if (valueOption?.value) {
-                                                setInputShowValue(valueOption.label);
-                                                inputHandler.setValue(valueOption.value);
-                                                serverSearchable && setKeyword(valueOption.label);
-                                                onChange?.(valueOption.value, valueOption);
-                                            }
-                                            else {
-                                                setInputShowValue("");
-                                                serverSearchable && setKeyword("");
-                                                inputHandler.setValue("");
-                                                onChange?.("");
-                                            }
-                                        }, 140);
-                                    }
-                                    else {
-                                        setInputShowValue("");
-                                        serverSearchable && setKeyword("");
-                                        onChange?.("");
-                                    }
-                                }
-                                setTimeout(() => {
-                                    inputHandler.setFocus(false);
-                                }, 100);
-                                onBlur?.();
-                            }, onKeyDown: (e) => {
-                                dataOptions?.length && onKeyDownOption(e);
-                            }, autoComplete: "off", autoFocus: autoFocus }), (multiple && !searchable || (searchable && !inputHandler.focus)) && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("select-multiple-values", leftIcon ? "select-multiple-values-left-icon" : "select-multiple-values-no-icon"), style: { maxWidth: `calc(100% - ${leftIcon ? "5.2rem" : "3.2rem"})` }, children: (0, jsx_runtime_1.jsx)("div", { className: "input-values-container", children: multiple && typeof inputHandler.value != "string" && Array().concat(inputHandler.value)?.map((item, key) => {
-                                    return ((0, jsx_runtime_1.jsxs)("div", { className: "input-values-item", children: [(0, jsx_runtime_1.jsx)("span", { children: dataOptions?.find((option) => option.value == item)?.label }), (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes, className: "input-values-delete", onClick: () => {
-                                                    const values = Array().concat(inputHandler.value);
-                                                    const index = values.findIndex((val) => val == item);
-                                                    inputHandler.setValue(values.filter((_, val) => val != index));
-                                                    if (!values.filter((_, val) => val != index)?.length) {
-                                                        setInputShowValue("");
-                                                        serverSearchable && setKeyword("");
-                                                        onChange?.("");
-                                                    }
-                                                } })] }, key));
-                                }) }) })), leftIcon && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { className: (0, _utils_1.cn)("input-icon", "input-icon-left", disabled && "input-icon-disabled", inputHandler.focus && "input-icon-focus", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled"), inputHandler.focus && (0, _utils_1.pcn)(className, "icon", "focus")), icon: leftIcon })), !multiple && clearable && inputHandler.value && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("input-icon", "input-icon-clear", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), onClick: () => {
-                                setInputShowValue("");
-                                inputHandler.setValue("");
-                                onChange?.("");
-                            }, children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faTimes }) })), (0, jsx_runtime_1.jsx)("label", { htmlFor: randomId, className: (0, _utils_1.cn)("input-icon", "input-icon-right", "select-icon-dropdown", disabled && "input-icon-disabled", (0, _utils_1.pcn)(className, "icon"), disabled && (0, _utils_1.pcn)(className, "icon", "disabled")), children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faChevronDown }) })] }), !!dataOptions?.length && showOption && !loadingOption && !!filteredOptions?.length && ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("ul", { className: (0, _utils_1.cn)("input-suggest-container scroll-sm", inputHandler.focus && "input-suggest-container-active", (0, _utils_1.pcn)(className, "suggest")), children: (newOption ? [newOption, ...filteredOptions] : filteredOptions).map((option, key) => {
-                            const selected = !!((typeof inputHandler.value == "string" || typeof inputHandler.value == "number") && inputHandler.value == option.value) ||
-                                (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value));
-                            return ((0, jsx_runtime_1.jsxs)("li", { className: (0, _utils_1.cn)("input-suggest", (key == activeOption || selected) && "input-suggest-active", (0, _utils_1.pcn)(className, "suggest-item"), (key == activeOption || selected) && (0, _utils_1.pcn)(className, "suggest-item", "active")), onMouseDown: () => {
-                                    setKeydown(true);
-                                    setTimeout(() => inputHandler.setFocus(true), 110);
-                                }, onMouseUp: () => {
-                                    setKeydown(false);
-                                    setActiveOption(key);
-                                    setFilteredOptions([]);
-                                    setShowOption(false);
-                                    if (!multiple) {
-                                        setInputShowValue(option.label);
-                                        serverSearchable && setKeyword(option.label);
-                                        inputHandler.setValue(option.value);
-                                        onChange?.(option.value, option);
-                                    }
-                                    else {
-                                        const values = Array.isArray(inputHandler.value)
-                                            ? Array().concat(inputHandler.value).filter((val) => val != option.value)
-                                            : [];
-                                        setInputShowValue("");
-                                        serverSearchable && setKeyword("");
-                                        if (Array.isArray(inputHandler.value) && Array().concat(inputHandler.value).find((val) => val == option.value)) {
-                                            inputHandler.setValue(values);
-                                            onChange?.(values);
-                                        }
-                                        else {
-                                            inputHandler.setValue([...Array().concat(values), option.value]);
-                                            onChange?.([...Array().concat(values), option.value]);
-                                        }
-                                    }
-                                    setTimeout(() => inputHandler.setFocus(false), 120);
-                                }, children: [selected && ((0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: free_solid_svg_icons_1.faCheck, className: "select-suggest-check" })), option.label] }, key));
-                        }) }) })), invalidMessage && ((0, jsx_runtime_1.jsx)("small", { className: (0, _utils_1.cn)("input-error-message", (0, _utils_1.pcn)(className, "error")), children: invalidMessage }))] }) }));
-}

package/dist/src/modal/BottomSheet.component.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-export type BottomSheetProps = {
-    show: boolean;
-    children: ReactNode;
-    onClose: () => void;
-    size?: string | number;
-    maxSize?: string | number;
-    footer?: ReactNode;
-    /** Use custom class with: "backdrop::", "footer::". */
-    className?: string;
-};
-export declare const BottomSheetComponent: import("react").ComponentType<BottomSheetProps>;

package/dist/src/modal/BottomSheet.component.js

@@ -1,161 +0,0 @@
-"use client";
-"use strict";
-var __importDefault = (this && this.__importDefault) || function (mod) {
-    return (mod && mod.__esModule) ? mod : { "default": mod };
-};
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.BottomSheetComponent = void 0;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const dynamic_1 = __importDefault(require("next/dynamic"));
-const _utils_1 = require("@utils");
-function sizeToPx(value) {
-    if (typeof window === "undefined")
-        return 0;
-    if (value === undefined || value === null)
-        return 0;
-    if (typeof value === "number")
-        return value;
-    const v = value.trim();
-    if (v.endsWith("vh")) {
-        const n = parseFloat(v.replace("vh", ""));
-        return (n / 100) * window.innerHeight;
-    }
-    if (v.endsWith("px")) {
-        return parseFloat(v.replace("px", ""));
-    }
-    return parseFloat(v) || 0;
-}
-const BottomSheet = ({ show, children, onClose, size = 500, maxSize, footer, className = "", }) => {
-    const scrollRef = (0, react_1.useRef)(null);
-    const sheetRef = (0, react_1.useRef)(null);
-    const startY = (0, react_1.useRef)(0);
-    const lastY = (0, react_1.useRef)(0);
-    const dragging = (0, react_1.useRef)(false);
-    const [offset, setOffset] = (0, react_1.useState)(0);
-    const [isExpanded, setIsExpanded] = (0, react_1.useState)(false);
-    const [scrollLocked, setScrollLocked] = (0, react_1.useState)(false);
-    const [contentScrollable, setContentScrollable] = (0, react_1.useState)(false);
-    const realMaxSize = maxSize ?? size;
-    const clamp = (v) => {
-        const max = window.innerHeight;
-        return Math.max(-200, Math.min(v, max));
-    };
-    const animateTo = (target, onFinish) => {
-        lastY.current = target;
-        setOffset(clamp(target));
-        onFinish?.();
-    };
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            lastY.current = 0;
-            setOffset(0);
-            setIsExpanded(false);
-        }
-        else {
-            const t = setTimeout(() => {
-                lastY.current = 0;
-                setOffset(0);
-                setIsExpanded(false);
-            }, 250);
-            return () => clearTimeout(t);
-        }
-    }, [show]);
-    const onStart = (clientY) => {
-        const sc = scrollRef.current;
-        if (sc && sc.scrollTop < 0) {
-            setScrollLocked(true);
-            return;
-        }
-        setScrollLocked(false);
-        dragging.current = true;
-        startY.current = clientY;
-        lastY.current = offset;
-    };
-    const onMove = (clientY) => {
-        if (scrollLocked)
-            return;
-        if (!dragging.current)
-            return;
-        const diff = clientY - startY.current;
-        setOffset(clamp(lastY.current + diff));
-    };
-    const onEnd = () => {
-        if (scrollLocked) {
-            setScrollLocked(false);
-            return;
-        }
-        if (!dragging.current)
-            return;
-        dragging.current = false;
-        const current = offset;
-        const thresholdDown = 120;
-        const thresholdUp = -40;
-        if (!isExpanded && current < thresholdUp && maxSize !== undefined) {
-            setIsExpanded(true);
-            animateTo(0);
-            return;
-        }
-        if (isExpanded && current > thresholdDown) {
-            setIsExpanded(false);
-            animateTo(0);
-            return;
-        }
-        if (!isExpanded && current > thresholdDown) {
-            animateTo(window.innerHeight, () => {
-                onClose();
-                lastY.current = 0;
-                setOffset(0);
-            });
-            return;
-        }
-        animateTo(0);
-    };
-    const collapsedPx = sizeToPx(size);
-    const expandedPx = sizeToPx(realMaxSize);
-    const topPx = isExpanded ? window.innerHeight - expandedPx : window.innerHeight - collapsedPx;
-    const bindTouch = {
-        onTouchStart: (e) => onStart(e.touches[0].clientY),
-        onTouchMove: (e) => onMove(e.touches[0].clientY),
-        onTouchEnd: () => onEnd(),
-    };
-    const bindMouse = {
-        onMouseDown: (e) => onStart(e.clientY),
-        onMouseMove: (e) => dragging.current && onMove(e.clientY),
-        onMouseUp: () => onEnd(),
-        onMouseLeave: () => onEnd(),
-    };
-    (0, react_1.useEffect)(() => {
-        const sc = scrollRef.current;
-        if (!sc)
-            return;
-        const canScroll = sc.scrollHeight > sc.clientHeight;
-        setContentScrollable(canScroll);
-    }, [show, size, maxSize]);
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            history.pushState({ bottomsheet: true }, "");
-        }
-    }, [show]);
-    (0, react_1.useEffect)(() => {
-        const onPopState = (event) => {
-            if (show) {
-                event.preventDefault();
-                onClose();
-                history.pushState({}, "");
-            }
-        };
-        window.addEventListener("popstate", onPopState);
-        return () => window.removeEventListener("popstate", onPopState);
-    }, [show, onClose]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: onClose }), (0, jsx_runtime_1.jsx)("div", { ref: sheetRef, className: "bottom-sheet", style: {
-                    top: show ? `${topPx}px` : "150vh",
-                    transform: `translateY(${offset}px)`,
-                    touchAction: "none",
-                }, ...bindTouch, ...bindMouse, children: (0, jsx_runtime_1.jsxs)("div", { className: "bottom-sheet-container", children: [(0, jsx_runtime_1.jsx)("div", { className: "bottom-sheet-handle-wrapper", children: (0, jsx_runtime_1.jsx)("div", { className: "bottom-sheet-handle" }) }), (0, jsx_runtime_1.jsx)("div", { ref: scrollRef, className: "overflow-y-auto", style: {
-                                height: isExpanded ? realMaxSize : size,
-                                touchAction: contentScrollable ? "auto" : "none",
-                                overscrollBehaviorY: "contain",
-                            }, children: children })] }) }), show && footer && ((0, jsx_runtime_1.jsx)("div", { className: "bottom-sheet-footer", children: footer }))] }));
-};
-exports.BottomSheetComponent = (0, dynamic_1.default)(() => Promise.resolve(BottomSheet), { ssr: false });

package/dist/src/modal/FloatingPage.component.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-export interface FloatingPageProps {
-    show: boolean;
-    onClose: () => void;
-    title?: string | ReactNode;
-    children?: any;
-    tip?: string | ReactNode;
-    footer?: string | ReactNode;
-    /** Use custom class with: "backdrop::", "header::", "footer::". */
-    className?: string;
-}
-export declare function FloatingPageComponent({ show, onClose, title, children, tip, footer, className, }: FloatingPageProps): import("react").JSX.Element;

package/dist/src/modal/FloatingPage.component.js

@@ -1,27 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.FloatingPageComponent = FloatingPageComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _components_1 = require("@components");
-const _utils_1 = require("@utils");
-;
-function FloatingPageComponent({ show, onClose, title, children, tip, footer, className = "", }) {
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            document.getElementsByTagName("body")[0].style.overflow = "hidden";
-            _utils_1.shortcut.register("escape", () => {
-                onClose?.();
-            }, "Kembali");
-        }
-        else {
-            document.getElementsByTagName("body")[0].style.removeProperty("overflow");
-        }
-        return () => {
-            _utils_1.shortcut.unregister("escape");
-        };
-    }, [show]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("floating-page", !show && "top-[200vh] md:top-0 md:-right-[200vw]", (0, _utils_1.pcn)(className, "base")), children: [(0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] })), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] }), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer absolute bottom-0 w-full", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
-}

package/dist/src/modal/Modal.component.d.ts

@@ -1,12 +0,0 @@
-import { ReactNode } from "react";
-export interface ModalProps {
-    show: boolean;
-    onClose: () => void;
-    title?: string | ReactNode;
-    children?: any;
-    tip?: string | ReactNode;
-    footer?: string | ReactNode;
-    /** Use custom class with: "backdrop::", "header::", "footer::". */
-    className?: string;
-}
-export declare function ModalComponent({ show, onClose, title, children, tip, footer, className, }: ModalProps): import("react").JSX.Element;

package/dist/src/modal/Modal.component.js

@@ -1,27 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalComponent = ModalComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-;
-function ModalComponent({ show, onClose, title, children, tip, footer, className = "", }) {
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            document.getElementsByTagName("body")[0].style.overflow = "hidden";
-            _utils_1.shortcut.register("escape", () => {
-                onClose?.();
-            }, "Kembali");
-        }
-        else {
-            document.getElementsByTagName("body")[0].style.removeProperty("overflow");
-        }
-        return () => {
-            _utils_1.shortcut.unregister("escape");
-        };
-    }, [show]);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal-header", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsxs)("div", { children: [(0, jsx_runtime_1.jsx)("h6", { className: "modal-title", children: title }), tip && (0, jsx_runtime_1.jsx)("p", { className: "modal-tip", children: tip })] }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { icon: free_solid_svg_icons_1.faTimes, variant: "simple", paint: "danger", onClick: () => onClose() })] })), show && children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: show && footer }))] })] }));
-}

package/dist/src/modal/ModalConfirm.component.d.ts

@@ -1,26 +0,0 @@
-import { ReactNode } from "react";
-import { ApiType } from "@utils";
-import { ButtonProps } from "@components";
-type SubmitIDB = {
-    idb: {
-        store: string;
-        id: string | number;
-    };
-};
-export interface ModalConfirmProps {
-    show: boolean;
-    onClose: () => void;
-    title?: string | ReactNode;
-    children?: any;
-    icon?: any;
-    footer?: string | ReactNode;
-    submitControl?: ButtonProps & {
-        onSubmit?: ApiType | SubmitIDB | (() => void);
-        onSuccess?: () => void;
-        onError?: () => void;
-    };
-    /** Use custom class with: "backdrop::", "header::", "footer::". */
-    className?: string;
-}
-export declare function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className, }: ModalConfirmProps): import("react").JSX.Element;
-export {};

package/dist/src/modal/ModalConfirm.component.js

@@ -1,68 +0,0 @@
-"use client";
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.ModalConfirmComponent = ModalConfirmComponent;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const react_1 = require("react");
-const free_solid_svg_icons_1 = require("@fortawesome/free-solid-svg-icons");
-const react_fontawesome_1 = require("@fortawesome/react-fontawesome");
-const _utils_1 = require("@utils");
-const _components_1 = require("@components");
-;
-function ModalConfirmComponent({ show, title, children, icon, footer, submitControl, onClose, className = "", }) {
-    const { isSm } = (0, _utils_1.useResponsive)();
-    const [toast, setToast] = (0, react_1.useState)(false);
-    const [loading, setLoading] = (0, react_1.useState)(false);
-    (0, react_1.useEffect)(() => {
-        if (show) {
-            document.getElementsByTagName("body")[0].style.overflow = "hidden";
-            _utils_1.shortcut.register("escape", () => {
-                onClose?.();
-            }, "Kembali");
-        }
-        else {
-            document.getElementsByTagName("body")[0].style.removeProperty("overflow");
-        }
-        return () => {
-            _utils_1.shortcut.unregister("escape");
-        };
-    }, [show]);
-    const renderChildren = (0, react_1.useMemo)(() => {
-        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [title && ((0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("flex flex-col gap-2 items-center text-primary", (0, _utils_1.pcn)(className, "header")), children: [(0, jsx_runtime_1.jsx)("div", { className: "mt-6", children: (0, jsx_runtime_1.jsx)(react_fontawesome_1.FontAwesomeIcon, { icon: icon || free_solid_svg_icons_1.faQuestion, className: `text-xl` }) }), (0, jsx_runtime_1.jsx)("h6", { className: "font-semibold text-lg", children: title })] })), children, footer && ((0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-footer", (0, _utils_1.pcn)(className, "footer")), children: footer }))] }));
-    }, [title, footer, children]);
-    const renderAction = (size = 'md') => {
-        return ((0, jsx_runtime_1.jsxs)("div", { className: "flex justify-center pt-6", children: [(0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Batal", variant: "simple", onClick: () => onClose(), className: "text-foreground bg-background rounded-none", block: true, size: size }), (0, jsx_runtime_1.jsx)(_components_1.ButtonComponent, { label: "Konfirmasi", loading: loading, onClick: async () => {
-                        if (!submitControl?.onSubmit)
-                            return;
-                        setLoading(true);
-                        if (typeof submitControl?.onSubmit == "function") {
-                            submitControl?.onSubmit?.();
-                        }
-                        else {
-                            let response = null;
-                            if ("path" in submitControl?.onSubmit || "url" in submitControl?.onSubmit) {
-                                response = await (0, _utils_1.api)(submitControl?.onSubmit);
-                            }
-                            if ("idb" in submitControl?.onSubmit) {
-                                const idb = _utils_1.registry.get("idb");
-                                if (!idb) {
-                                    throw new Error("IndexedDB (IDB) extension is not installed.");
-                                }
-                                await idb.delete((submitControl?.onSubmit).idb.store, (submitControl?.onSubmit).idb.id);
-                                response = { status: 200 };
-                            }
-                            if (response?.status == 200 || response?.status == 201) {
-                                setToast("success");
-                                submitControl?.onSuccess?.();
-                                setLoading(false);
-                            }
-                            else {
-                                setToast("failed");
-                                submitControl?.onError?.();
-                                setLoading(false);
-                            }
-                        }
-                    }, className: "rounded-none", block: true, size: size, ...submitControl })] }));
-    };
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [!isSm ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { className: (0, _utils_1.cn)("modal-backdrop", !show && "opacity-0 scale-0 -translate-y-full", (0, _utils_1.pcn)(className, "backdrop")), onClick: () => onClose() }), (0, jsx_runtime_1.jsxs)("div", { className: (0, _utils_1.cn)("modal modal-confirm", !show && "-translate-y-full opacity-0 scale-y-0", (0, _utils_1.pcn)(className, "base")), children: [renderChildren, renderAction()] })] })) : ((0, jsx_runtime_1.jsx)(jsx_runtime_1.Fragment, { children: (0, jsx_runtime_1.jsx)(_components_1.BottomSheetComponent, { show: show, onClose: onClose, size: 220, footer: renderAction('lg'), children: renderChildren }) })), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: toast == "failed", onClose: () => setToast(false), title: "Gagal", className: "!border-danger header::text-danger", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Gagal ", title || "", "! cek data dan koneksi internet dan coba kembali!"] }) }), (0, jsx_runtime_1.jsx)(_components_1.ToastComponent, { show: toast == "success", onClose: () => setToast(false), title: "Berhasil", className: "!border-success header::text-success", children: (0, jsx_runtime_1.jsxs)("p", { className: "px-3 pb-2 text-sm", children: ["Berhasil ", title || "", "!"] }) })] }));
-}

package/dist/src/modal/Toast.component.d.ts

@@ -1,11 +0,0 @@
-import { ReactNode } from "react";
-export interface ToastProps {
-    show: boolean;
-    onClose: () => void;
-    title?: string | ReactNode;
-    children?: any;
-    footer?: string | ReactNode;
-    /** Use custom class with: "backdrop::", "header::", "footer::". */
-    className?: string;
-}
-export declare function ToastComponent({ show, onClose, title, children, footer, className, }: ToastProps): import("react").JSX.Element;