funda-ui 4.5.711 → 4.5.713

package/publish/lib/esm/RangeSlider/index.scss

@@ -1,186 +0,0 @@
-/* ======================================================
-    <!-- Range Slider -->
-/* ====================================================== */
-
-$thumb-size: 16px;
-$control-height: 0.75rem;
-
-@mixin track-styles {
-    appearance: none;
-    background: transparent;
-    border: transparent;
-}
-
-@mixin thumb-styles {
-    appearance: none;
-    pointer-events: all;
-    width: $thumb-size;
-    height: $thumb-size;
-    border-radius: 0px;
-    border: 0 none;
-    cursor: grab;
-
-    &:active {
-        cursor: grabbing;
-    }
-}
-
-.range-slider__wrapper {
-
-    --range-slider-grab: #0b5ed7;
-    --range-slider-active-grab-box-shadow: 0 0 0 0.25rem rgba(13,110,253,.25);
-    --range-slider-active-grab-border-color: #86b7fe;
-    --range-slider-rail: #e9ecef;
-    --range-slider-inner-rail: #0d6efd;
-    
-    position: relative; /* Required */
-
-    
-    > div:not(.range-slider__control-wrapper) {
-        width: 49% !important;
-        display: inline-block !important;
-        margin-left: 0 !important;
-        margin-right: 0 !important;
-        margin-block-start: 0 !important;
-        margin-block-end: 0 !important;
-        padding-left: 0 !important;
-        padding-right: 0 !important;
-        padding-block-start: 0 !important;
-        padding-block-end: 0 !important;
-        opacity: 0;
-        pointer-events: none;
-    }
-
-    .range-slider__control-wrapper {
-        width: calc(100% - $thumb-size);
-
-        .range-slider__input {
-            width: calc(100% + #{$thumb-size});
-            margin: 0 calc(#{$thumb-size} / -2);
-            position: absolute;
-            height: $thumb-size;
-            
-            [type=range] {
-                position: absolute;
-                width: 100%;
-                pointer-events: none;
-                appearance: none;
-                height: 100%;
-                opacity: 0;
-                z-index: 3;
-                padding: 0;
-
-
-                &:disabled {
-                    display: none;
-                }
-
-                &::-ms-track {
-                    @include track-styles;
-                }
-
-                &::-moz-range-track {
-                    @include track-styles;
-                }
-
-                &:focus::-webkit-slider-runnable-track {
-                    @include track-styles;
-                }
-
-                &::-ms-thumb {
-                    @include thumb-styles;
-                }
-
-                &::-moz-range-thumb {
-                    @include thumb-styles;
-                }
-
-                &::-webkit-slider-thumb {
-                    @include thumb-styles;
-                }
-            }
-        }
-
-
-        .range-slider__placeholder {
-            width: 100%;
-            position: absolute;
-            height: $thumb-size;
-
-            .range-slider__placeholder-grab {
-                width: $thumb-size;
-                height: $thumb-size;
-                border-radius: 50%;
-                position: absolute;
-                background: var(--range-slider-grab);
-                top: 50%;
-                margin-left: calc(#{$thumb-size} / -2);
-                transform: translate3d(0, -50%, 0);
-                z-index: 2;
-                transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
-
-                &.active {
-                    box-shadow: var(--range-slider-active-grab-box-shadow);
-                    border-color: var(--range-slider-active-grab-border-color);
-                }
-
-                &.inactive {
-                    display: none;
-                }
-            }
-
-            .range-slider__placeholder-rail {
-                position: absolute;
-                width: 100%;
-                top: 50%;
-                transform: translateY(-50%);
-                height: 6px;
-                border-radius: 3px;
-                background: var(--range-slider-rail);
-
-                .range-slider__placeholder-inner-rail {
-                    position: absolute;
-                    height: 100%;
-                    background: var(--range-slider-inner-rail);
-                    opacity: 0.5;
-                }
-
-
-            }
-
-        }
-
-        .range-slider__input,
-        .range-slider__placeholder {
-            top: $control-height;
-        }   
-
-
-        &.disabled .range-slider__placeholder {
-            filter: grayscale(1);
-        }
-
-
-
-    }
-
-    &.only-one {
-        .range-slider__control-wrapper {
- 
-            .range-slider__placeholder {
-             
-                .range-slider__placeholder-rail {
-                    background: var(--range-slider-rail);
-    
-                    .range-slider__placeholder-inner-rail {
-                        background: var(--range-slider-rail);
-                    }
-    
-                }
-    
-            }
-        }
-
-    }
-
-}

package/publish/lib/esm/RangeSlider/index.tsx

@@ -1,241 +0,0 @@
-import React, { useEffect, useState, useRef } from 'react';
-
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-
-import Input from 'funda-input';
-
-export type RangeSliderProps = {
-    wrapperClassName?: string;
-    controlClassName?: string;
-    controlExClassName?: string;
-    value?: any;
-    label?: React.ReactNode | string;
-    minName?: string;
-    maxName?: string;
-    onlyOne?: boolean;
-    step: number;
-    min: number;
-    max: number;
-    disabled?: any;
-    required?: any;
-    /** -- */
-    id?: string;
-    tabIndex?: number;
-    onChange?: (e: any, param: any) => void;
-};
-
-
-const RangeSlider = (props: RangeSliderProps) => {
-    const {
-        wrapperClassName,
-        controlClassName,
-        controlExClassName,
-        disabled,
-        required,
-        value,
-        label,
-        minName,
-        maxName,
-        onlyOne,
-        step,
-        min,
-        max,
-        id,
-        tabIndex,
-        onChange
-    } = props;
-
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const rootRef = useRef<any>(null);
-    const valMinRef = useRef<any>(null);
-    const valMaxRef = useRef<any>(null);
-
-    const [minValue, setMinValue] = useState<any>(value ? value.min : min);
-    const [maxValue, setMaxValue] = useState<any>(value ? value.max : max);
-    const [minActive, setMinActive] = useState<boolean>(false);
-    const [maxActive, setMaxActive] = useState<boolean>(false);
-
-    const minPos = ((minValue - min) / (max - min)) * 100;
-    const maxPos = ((maxValue - min) / (max - min)) * 100;
-
-
-    function initDefaultValue(defaultValue: any) {
-
-        // change the value to trigger component rendering
-        if ( typeof defaultValue === 'undefined' || defaultValue === '' ) {
-            setMinValue(min);
-            setMaxValue(max);
-        } else {
-            setMinValue(defaultValue.min);
-            setMaxValue(defaultValue.max);
-        }
-    }
-
-
-    function handleMinEnter(e: any) {
-        setMinActive(true);
-    }
-
-    function handleMinLeave(e: any) {
-        setMinActive(false);
-    }
-
-    function handleMaxEnter(e: any) {
-        setMaxActive(true);
-    }
-
-    function handleMaxLeave(e: any) {
-        setMaxActive(false);
-    }
-
-
-    function handleMinChange(e: any) {
-        e.preventDefault();
-        const newMinVal = Math.min(+e.target.value, (onlyOne ? maxValue : maxValue - step));
-        setMinValue(newMinVal);
-        onChange?.(e, { min: newMinVal, max: maxValue });
-    }
-
-    function handleMaxChange(e: any) {
-        e.preventDefault();
-        const newMaxVal = Math.max(+e.target.value, minValue + step);
-        setMaxValue(newMaxVal);
-        onChange?.(e, { min: minValue, max: newMaxVal });
-    }
-
-
-
-    useEffect(() => {
-
-
-        // update default value
-        //--------------
-        if (value && (typeof value.min === 'undefined' || typeof value.max === 'undefined')) {
-            initDefaultValue({
-                min,
-                max
-            });
-        } else {
-            initDefaultValue(value);
-        }
-
-    }, [value]);
-
-    return (
-        <>
-
-            {label ? <><div className="range-slider__label">{typeof label === 'string' ? <label htmlFor={`label-${idRes}`} className="form-label" dangerouslySetInnerHTML={{__html: `${label}`}}></label> : <label htmlFor={`label-${idRes}`} className="form-label">{label}</label>}</div></> : null}
-
-
-            <div className={combinedCls(
-                'range-slider__wrapper',
-                clsWrite(wrapperClassName, 'mb-3 position-relative'),
-                {
-                    'only-one': onlyOne
-                }
-            )} ref={rootRef}>
-
-                {/* The <Input /> component is a placeholder that ensures the same height and alignment as other form components */}
-                <Input
-                    ref={valMinRef}
-                    wrapperClassName={clsWrite(wrapperClassName, 'mb-3 position-relative')}
-                    controlClassName={combinedCls(
-                        clsWrite(controlClassName, 'form-control'),
-                        controlExClassName
-                    )} 
-                    required={required || null}
-                    type="text"
-                    id={idRes + '-min'}
-                    name={minName}
-                    value={typeof minValue !== 'undefined' ? minValue.toString() : min}  //  Convert to a string to ensure that 0 can also be filled
-                />
-
-                <Input
-                    ref={valMaxRef}
-                    wrapperClassName={clsWrite(wrapperClassName, 'mb-3 position-relative')}
-                    controlClassName={combinedCls(
-                        clsWrite(controlClassName, 'form-control'),
-                        controlExClassName
-                    )} 
-                    required={required || null}
-                    type="text"
-                    id={idRes + '-max'}
-                    name={maxName}
-                    value={typeof maxValue !== 'undefined' ? maxValue.toString() : max}  //  Convert to a string to ensure that 0 can also be filled
-                />                
-
-
-                <div className={combinedCls(
-                    'range-slider__control-wrapper',
-                    {
-                        'disabled': disabled
-                        
-                    }
-                )}>
-
-                    <div className="range-slider__input">
-                        <input
-                            type="range"
-                            value={minValue}
-                            min={min}
-                            max={max}
-                            step={step}
-                            tabIndex={tabIndex || 0}
-                            disabled={disabled || null}
-                            onMouseEnter={handleMinEnter}
-                            onMouseLeave={handleMinLeave}
-                            onChange={handleMinChange}
-                        />
-                        <input
-                            type="range"
-                            value={maxValue}
-                            min={min}
-                            max={max}
-                            step={step}
-                            tabIndex={tabIndex || 0}
-                            disabled={onlyOne ? true : (disabled || null)}
-                            onMouseEnter={handleMaxEnter}
-                            onMouseLeave={handleMaxLeave}
-                            onChange={handleMaxChange}
-                        />
-
-                    </div>
-
-                    <div className="range-slider__placeholder">
-                        <div className={combinedCls(
-                            'range-slider__placeholder-grab',
-                            {
-                                'active': minActive
-                            }
-                        )} style={{ left: `${minPos}%` }} />
-                        <div className="range-slider__placeholder-rail">
-                            <div
-                                className="range-slider__placeholder-inner-rail"
-                                style={{ left: `${minPos}%`, right: `${100 - maxPos}%` }}
-                            />
-                        </div>
-                        <div className={combinedCls(
-                            'range-slider__placeholder-grab',
-                            {
-                                'active': maxActive,
-                                'inactive': onlyOne
-                            }
-
-                        )} style={{ left: `${maxPos}%` }} />
-                    </div>
-
-                </div>
-
-            </div>
-
-        </>
-    )
-};
-
-
-export default RangeSlider;

package/publish/lib/esm/RootPortal/index.tsx

@@ -1,53 +0,0 @@
-import React, { useEffect, useRef } from 'react';
-import { createPortal } from 'react-dom';
-
-
-export type RootPortalProps = {
-    containerClassName?: string;
-    children?: React.ReactNode;
-    show?: boolean;
-};
-
-const RootPortal = (props: RootPortalProps) => {
-    const {
-        containerClassName,
-        show,
-        children
-    } = props;
-
-    const containerRef = useRef<HTMLElement>();
-
-    // Move HTML templates to tag end body </body>
-    // render() don't use "Fragment", in order to avoid error "Failed to execute 'insertBefore' on 'Node'"
-    // prevent "transform", "filter", "perspective" attribute destruction fixed viewport orientation
-    // ###
-    // ###
-    // Use `containerRef.current` to ensure the correctness of the nextjs framework. It may report an error document as undefined
-
-    useEffect(() => {
-
-        containerRef.current = document.createElement('div');
-        containerRef.current.className = `root-portal-container ${containerClassName || ''}`;
-        document.body.appendChild(containerRef.current);
-        
-
-        return () => {
-            if (containerRef.current) {
-                containerRef.current.remove();
-            }
-        };
-    }, []);
-
-    return (
-        <>
-            {containerRef.current && show && createPortal(
-                children,
-                containerRef.current as HTMLElement
-            )}
-        </>
-    );
-
-
-};
-
-export default RootPortal;

package/publish/lib/esm/ScrollReveal/index.tsx

@@ -1,148 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-
-import useComId from 'funda-utils/dist/cjs/useComId';
-
-
-export interface ViewOffsetConfig {
-    x?: string | undefined;
-    y?: string | undefined;
-}
-
-
-export type ScrollRevealProps = {
-    root?: any;
-    viewOffset?: ViewOffsetConfig;
-    defaultClassName?: string | string[];
-    showClassName?: string | string[];
-    infinite?: boolean;
-    delay?: number;
-    threshold?: number | number[];
-    onChange?: (e: any, data: any) => void;
-    onIntersect?: (e: any, status: boolean) => void;
-    /** -- */
-    id?: string;
-    children: React.ReactNode;
-};
-
-
-const ScrollReveal = (props: ScrollRevealProps) => {
-    const {
-        root,
-        viewOffset,
-        defaultClassName,
-        showClassName,
-        infinite,
-        delay,
-        threshold,
-        onChange,
-        onIntersect,
-        id,
-        children
-    } = props;
-
-
-    const uniqueID = useComId();
-    const idRes = id || uniqueID;
-    const _viewOffset = viewOffset ? viewOffset : {
-        y: '0px',
-        x: '0px'
-    };
-    const [isIntersecting, setIsIntersecting] = useState(false);
-    const rootRef = useRef(null);
-    const options = {
-        root: root ? root : (typeof document === 'undefined' ? null : document),  // Prevent document undefined from server-side rendering
-        rootMargin: `${_viewOffset.y} ${_viewOffset.x}`,
-        threshold: threshold ? threshold : [0.0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1.0]
-    };
-
-    function intersectionCallback(entries: any[]) {
-        // if has multiple intersect via `observer.observe(obj)`
-
-        const [entry] = entries;
-        /*
-        IntersectionObserverEntry {
-            time: 260.2000000476837, 
-            intersectionRatio: 0,
-            rootBounds: {x: 0, y: 0, width: 1680, height: 540, top: 0, …}, 
-            boundingClientRect: {x: 0, y: 590, width: 1680, height: 540, top: 590, …}, 
-            intersectionRect: {x: 0, y: 0, width: 0, height: 0, top: 0, …}, 
-            isIntersecting: false,
-            isVisible: false,
-            target: main
-        }
-
-        IntersectionObserverEntry {
-            time: 4681.599999964237, 
-            intersectionRatio: 0,
-            rootBounds: {x: 0, y: 0, width: 1680, height: 540, top: 0, …}, 
-            boundingClientRect: {x: 0, y: 530, width: 1680, height: 540, top: 530, …}, 
-            intersectionRect: {x: 0, y: 530, width: 1680, height: 10, top: 530, …}, 
-            isIntersecting: true,
-            isVisible: false,
-            target: main
-        }
-
-        ...
-        */
-        setIsIntersecting(entry.isIntersecting);
-
-        // interaction
-        const box = entry.target;
-        const visiblePct = (Math.floor(entry.intersectionRatio * 100)) + "%";
-
-        //
-        onChange?.(box, visiblePct);
-
-    }
-
-
-    useEffect(() => {
-        const observer = new IntersectionObserver(intersectionCallback, options);
-        if ( rootRef.current ) observer.observe(rootRef.current);
-
-        //default classes
-        if ( rootRef.current ) {
-            const _classesDefault = !Array.isArray(defaultClassName) ? [defaultClassName] : defaultClassName;
-            if (typeof defaultClassName !== 'undefined') _classesDefault.map((item: any) => (rootRef.current as any).classList.add(item));
-        }
-
-        return () => observer.disconnect();
-    }, [rootRef, options]);
-
-    useEffect(() => {
-        if ( rootRef.current ) {
-
-            onIntersect?.(rootRef.current, isIntersecting);
-            const _classes = !Array.isArray(showClassName) ? [showClassName] : showClassName;
-
-            if (isIntersecting) {
-                setTimeout(() => {
-                    if (typeof showClassName !== 'undefined') _classes.map((item: any) => (rootRef.current as any).classList.add(item));
-                }, delay ? Number(delay) : 0);
-            } else {
-                if ( infinite ) setTimeout(() => {
-                    if (typeof showClassName !== 'undefined') _classes.map((item: any) => (rootRef.current as any).classList.remove(item));
-                }, delay ? Number(delay) : 0);
-            }
-        }
-
-    }, [isIntersecting]);
-
-
-    return (
-        <>
-
-            <div
-                ref={rootRef}
-                id={idRes}
-            >
-                {children}
-
-            </div>
-
-        </>
-    )
-};
-
-
-export default ScrollReveal;