funda-ui 1.0.272

package/lib/esm/TagInput/index.tsx

@@ -0,0 +1,314 @@
+import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+
+type TagInputProps = {
+    wrapperClassName?: string;
+    value?: string;
+    maxTags?: number;
+    label?: React.ReactNode | string;
+    name?: string;
+    maxLength?: any;
+    disabled?: any;
+    required?: any;
+    readOnly?: any;
+    placeholder?: string;
+    /** -- */
+    id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onChange?: (e: any, param: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+
+};
+
+
+const TagInput = forwardRef((props: TagInputProps, ref: any) => {
+    const {
+        wrapperClassName,
+        maxTags,
+        disabled,
+        required,
+        placeholder,
+        readOnly,
+        value,
+        label,
+        name,
+        id,
+        maxLength,
+        style,
+        tabIndex,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const inputRef = useRef<any>(null);
+    const valRef = useRef<any>(null);
+    const max = maxTags ? maxTags : 10;
+    const [lastId, setLastId] = useState<number>(-1);
+    const [userInput, setUserInput] = useState<string>('');
+    const [items, setItems] = useState<any[]>([]);
+    const [alreadyInItems, setAlreadyInItems] = useState<boolean>(false);
+    const [onComposition, setOnComposition] = useState(false);
+
+
+    function initDefaultValue(defaultValue: any) {
+
+        // change the value to trigger component rendering
+        if ( typeof defaultValue === 'undefined' || defaultValue === '' ) {
+            setItems([]);
+        } else {
+            setItems(defaultValue.trim().replace(/^\,|\,$/g, '').split(',').map((item: any, index: number) => {
+                return {
+                    content: item,
+                    id: index
+                }
+            }));
+        }
+    }
+
+
+    function handleRemove(e: any) {
+        e.preventDefault();
+
+        const idToRemove = Number(e.currentTarget.dataset.item);
+        const newArray = items!.filter((item: any) => item.id !== idToRemove);
+        setItems(newArray);
+
+        //
+        onChange?.(inputRef.current, newArray);
+    }
+
+    function handleKeypress(event: any) {
+        
+        // Avoid adding results before when the user enters text is not complete
+        if ( onComposition ) return;
+        
+
+        if (event.code == "Enter" || event.code == "Space") {
+            event.preventDefault();
+
+            if (alreadyInItems) return false;
+
+            //
+            const newArray = items;
+            const currentcontent = userInput!.trim();
+            if (!currentcontent) {
+                return;
+            }
+
+            //Limit the total number of tags added
+            if (max - 1 < newArray!.length) {
+                return;
+            }
+
+            newArray!.push({
+                content: currentcontent,
+                id: lastId + 1
+            });
+
+            setLastId((prevState) => ++prevState);
+            setItems(newArray);
+            setUserInput('');
+
+            //
+            onChange?.(inputRef.current, items);
+            
+
+        }
+    }
+
+    function handleComposition(event: any) {
+        if (event.type === 'compositionstart') {
+            setOnComposition(true);
+        }
+        if (event.type === 'compositionend') {
+            setOnComposition(false);
+        }
+    }
+
+
+    function handleChange(event: any) {
+
+        const val = event.target.value;
+        
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        let _alreadyInItems = alreadyInItems;
+
+        if (items && items.length > 0) {
+            const alreadyIn = items.some(function (obj) {
+                return obj.content.toLowerCase() == val.toLowerCase();
+            });
+            if (alreadyIn) {
+                _alreadyInItems = true;
+            } else {
+                _alreadyInItems = false;
+            }
+
+        }
+
+        setAlreadyInItems(_alreadyInItems);
+        setUserInput(val);
+
+    }
+
+
+
+    function handleFocus(event: any) {
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event);
+    }
+
+
+    function handleBlur(event: any) {
+        const el = event.target;
+        const val = event.target.value;
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onBlur?.(event);
+    }
+
+
+    useEffect(() => {
+
+
+        // update default value
+        //--------------
+        initDefaultValue(value);
+
+
+        // If you use the dynamic form assignment (such as document.getElementById(xxx).value), 
+        // you need to judge the value of the input obtained by using the macrotask "setInterval()"
+        let timer: any = null;
+        let initTimes: number = 0;
+        let hasValue: boolean = false;
+        timer = setInterval( () => {
+            if ( initTimes > 5 || hasValue ) {
+                clearInterval(timer);
+            } else {
+                if (valRef.current !== null && valRef.current.value !== '' && (typeof value === 'undefined' || value === '')) {
+                    initDefaultValue(valRef.current.value);
+                    hasValue = true;
+                }
+                initTimes++;
+
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(timer);
+        }
+
+
+    }, [value]);
+
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? `tag-input__wrapper ${wrapperClassName}` : `tag-input__wrapper mb-3 position-relative`} ref={rootRef}>
+
+                {label ? <><label htmlFor={`label-${idRes}`} className="form-label">{label}</label></> : null}
+
+
+                <div className="tag-input__control-wrapper">
+                    <div>
+                        <ul className="tag-input__list">
+                            {items ? items.map((item: any, index: number) => (
+                                <li key={index}>
+                                    {item.content}
+                                    
+                                    <a href="#" tabIndex={-1} onClick={handleRemove} data-item={item.id}><svg width="10px" height="10px" viewBox="0 0 1024 1024"><path fill="#000"  d="M195.2 195.2a64 64 0 0 1 90.496 0L512 421.504 738.304 195.2a64 64 0 0 1 90.496 90.496L602.496 512 828.8 738.304a64 64 0 0 1-90.496 90.496L512 602.496 285.696 828.8a64 64 0 0 1-90.496-90.496L421.504 512 195.2 285.696a64 64 0 0 1 0-90.496z"/></svg></a>
+                                </li>
+                            )) : null}
+                        </ul>
+
+
+                        <div className={`tag-input__control ${disabled ? 'disabled' : ''}`} style={{display: max - 1 < items!.length ? 'none' : 'inherit'}}>
+                            <input
+                                ref={inputRef}
+                                tabIndex={tabIndex || 0}
+                                type="text"
+                                id={`label-${idRes}`}
+
+                                // Don't use "name", it's just a container to display the label
+                                data-name={name?.match(/(\[.*?\])/gi) ? `${name.split('[')[0]}-label[]` : `${name}-label`}
+                                data-tag-input
+                                autoComplete="off"
+                                placeholder={placeholder || ''}
+                                value={userInput}
+                                maxLength={maxLength || null}
+                                disabled={disabled || null}
+                                readOnly={readOnly || null}
+                                onChange={handleChange}
+                                onCompositionStart={handleComposition}
+                                onCompositionUpdate={handleComposition}
+                                onCompositionEnd={handleComposition}
+                                onKeyDown={handleKeypress}
+                                onFocus={handleFocus}
+                                onBlur={handleBlur}
+                                style={style}
+                                {...attributes}
+                            />
+
+                        </div>
+
+                        {required ? <><span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span></> : ''}
+                    </div>
+
+                    <input
+                        tabIndex={-1}
+                        ref={(node) => {
+                            valRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                        type="hidden"
+                        id={idRes}
+                        name={name}
+                        value={items.map((item: any) => item.content).join(',')}
+                        required={required || null}
+                    />
+
+
+                </div>
+
+
+            </div>
+
+
+        </>
+    )
+});
+
+export default TagInput;

package/lib/esm/Textarea/index.tsx

@@ -0,0 +1,178 @@
+import React, { useId, useState, useEffect, useRef, forwardRef } from 'react';
+
+
+declare module 'react' {
+    interface ReactI18NextChildren<T> {
+        children?: any;
+    }
+}
+interface TextareaProps extends React.ComponentPropsWithoutRef<"textarea"> {
+    wrapperClassName?: string;
+    controlClassName?: string;
+	value?: string;
+	label?: React.ReactNode | string;
+	name?: string;
+	maxLength?: any;
+	cols?: number;
+	rows?: number;
+	disabled?: any;
+	required?: any;
+    readOnly?: any;
+	placeholder?: string;
+	/** -- */
+	id?: string;
+    style?: React.CSSProperties;
+    tabIndex?: number;
+    [key: `data-${string}`]: string | undefined;
+    onChange?: (e: any) => void;
+    onBlur?: (e: any) => void;
+    onFocus?: (e: any) => void;
+};
+
+
+const Textarea = forwardRef((props: TextareaProps, ref: any) => {
+    const {
+        wrapperClassName,
+        controlClassName,
+        cols,
+        rows,
+        disabled,
+        required,
+        placeholder,
+        readOnly,
+        value,
+        label,
+        name,
+        id,
+        maxLength,
+        style,
+        tabIndex,
+        onChange,
+        onBlur,
+        onFocus,
+        ...attributes
+    } = props;
+
+
+    const uniqueID = useId();
+    const idRes = id || uniqueID;
+    const rootRef = useRef<any>(null);
+    const valRef = useRef<any>(null);
+    const [changedVal, setChangedVal] = useState<string>(value || '');
+
+    function handleFocus(event: any) {
+        const el = event.target;
+        rootRef.current.classList.add('focus');
+
+        //
+        onFocus?.(event);     
+    }
+
+    function handleChange(event: any) {
+        const val = event.target.value;
+
+        setChangedVal(val);
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onChange?.(event);
+    }
+
+    function handleBlur(event: any) {
+        const el = event.target;
+        const val = event.target.value;
+
+
+        //----
+        //remove focus style
+        if (val === '') {
+            rootRef.current.classList.remove('focus');
+        }
+
+        //
+        onBlur?.(event);
+    }
+
+    useEffect(() => {
+
+        // update default value
+        //--------------
+        setChangedVal(value || '');
+
+        // If you use the dynamic form assignment (such as document.getElementById(xxx).value), 
+        // you need to judge the value of the input obtained by using the macrotask "setInterval()"
+        let timer: any = null;
+        let initTimes: number = 0;
+        let hasValue: boolean = false;
+        timer = setInterval( () => {
+            if ( initTimes > 5 || hasValue ) {
+                clearInterval(timer);
+            } else {
+                if ( valRef.current !== null && valRef.current.value !== '' && ( typeof value === 'undefined' || value === '' ) ) {
+                    setChangedVal(valRef.current.value);
+                    hasValue = true;
+                }
+                initTimes++;
+
+            }
+        }, 500);
+
+        return () => {
+            clearInterval(timer);
+        }
+
+    }, [value]);    
+    
+
+    return (
+        <>
+
+            <div className={wrapperClassName || wrapperClassName === '' ? wrapperClassName : "mb-3 position-relative"} ref={rootRef}>
+                {label ? <><label htmlFor={idRes} className="form-label">{label}</label></> : null}
+
+                <div className="input-group">
+                    
+                    <textarea  
+                        ref={(node) => {
+                            valRef.current = node;
+                            if (typeof ref === 'function') {
+                                ref(node);
+                            } else if (ref) {
+                                ref.current = node;
+                            }
+                        }}
+                      tabIndex={tabIndex || 0}
+					  className={controlClassName || controlClassName === '' ? controlClassName : "form-control"}
+			          id={idRes}
+					  name={name}
+					  placeholder={placeholder || ''}
+					  value={changedVal}
+					  maxLength={maxLength || null}
+			          onFocus={handleFocus}
+					  onBlur={handleBlur}
+			          onChange={handleChange}
+			          disabled={disabled || null}
+					  required={required || null}
+                      readOnly={readOnly || null}
+					  cols={cols || 20}
+					  rows={rows || 2}
+                      style={style}
+                      {...attributes}
+					/>
+                </div>
+                {required ? <><span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span></> : ''}
+
+            </div>
+
+
+        </>
+    )
+
+});
+
+export default Textarea;

package/lib/esm/Toast/Item.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+
+interface ItemProps extends React.ComponentPropsWithoutRef<any> {
+    index: number;
+    title?: string | React.ReactNode | boolean;
+    note?: string | React.ReactNode | boolean;
+    message?: string | React.ReactNode;
+    depth: number;
+    schemeBody?: string;
+    schemeHeader?: string;
+    closeBtnColor?: string;
+    closeDisabled?: boolean;
+    lock?: boolean;
+    /** Handling events for close it */
+    closeEv?: (index: number) => void | undefined;
+};
+
+const Item = (props: ItemProps) => {
+
+    const {
+        index,
+        title,
+        note,
+        message,
+        depth,
+        lock,
+        schemeBody,
+        schemeHeader,
+        closeBtnColor,
+        closeDisabled,
+        closeEv
+    } = props;
+
+    return (
+        <>
+
+            <div
+                className={`toast-container`}
+                data-index={index}
+                style={{
+                    transform: `perspective(100px) translateZ(-${2 * index}px) translateY(${35 * index}px)`,
+                    zIndex: depth
+                }}>
+
+                {/* Bootstrap toast */}
+                <div className={`toast fade show ${schemeBody ? schemeBody : ''}`} role="alert">
+                    {(title === '' || title === false) && (note === '' || note === false) ? null : <>
+                        <div className={`toast-header ${schemeHeader ? schemeHeader : ''}`}>
+                            <strong className="me-auto">{title === '' || title === false ? '' : <>{title}</>}</strong>
+                            <small className="text-muted">{note === '' || note === false ? '' : <>{note}</>}</small>
+                            {!lock ? <>{!closeDisabled ? <button data-close="1" data-index={index} tabIndex={-1} type="button" className="btn-close"><svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? closeBtnColor : '#000000'}`} d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg></button> : null}</> : null}
+
+                        </div>
+                    </>}
+
+                    <div className="toast-body">
+                        {message}
+
+                        {(title === '' || title === false) && (note === '' || note === false) ? <>
+                            {!closeDisabled ? <button data-close="1" data-index={index} tabIndex={-1} type="button" className="btn-close position-absolute top-0 end-0 me-2 mt-2"><svg width="12px" height="12px" viewBox="0 0 16 16"><path fill={`${closeBtnColor ? closeBtnColor : '#000000'}`} d="M9.41 8l3.29-3.29c.19-.18.3-.43.3-.71a1.003 1.003 0 00-1.71-.71L8 6.59l-3.29-3.3a1.003 1.003 0 00-1.42 1.42L6.59 8 3.3 11.29c-.19.18-.3.43-.3.71a1.003 1.003 0 001.71.71L8 9.41l3.29 3.29c.18.19.43.3.71.3a1.003 1.003 0 00.71-1.71L9.41 8z" fillRule="evenodd"></path></svg></button> : null}
+                        </> : null}
+
+
+
+                    </div>
+                </div>
+
+            </div>
+
+        </>
+    )
+}
+
+
+export default Item;

package/lib/esm/Toast/index.scss

@@ -0,0 +1,120 @@
+
+/* ======================================================
+   <!-- Toast -->
+/* ====================================================== */
+
+.toasts__wrapper {
+    --bs-toast-zindex: 1090;
+    width: 350px;
+    position: fixed;
+    left: 50%;
+    bottom: 0;
+    z-index: var(--bs-toast-zindex);
+    pointer-events: none;
+    transition: .1s ease-in-out;
+
+    &--bottom-left {
+        left: 15px;
+    }
+
+    &--bottom-right {
+        left: auto;
+        right: 15px;
+    }
+
+    &--bottom-center {
+        left: 50%;
+        transform: translateX(-50%);
+    }
+
+    &--top-left {
+        left: 15px;
+        bottom: auto;
+        top: 35px;
+    }
+
+    &--top-right {
+        left: auto;
+        right: 15px;
+        top: 35px;
+    }
+
+    &--top-center {
+        left: 50%;
+        transform: translateX(-50%);
+        top: 35px;
+    }
+
+    &--vertical-center {
+        left: 50%;
+        transform: translate(-50%, -50%);
+        top: 50%;
+        margin-top: 5%;
+    }  
+
+    .toasts {
+        position: relative;
+        width: 100%;
+        bottom: 15px;
+        display: flex;
+        flex-flow: column-reverse nowrap;
+
+
+        &::before {
+            content: '';
+            top: -80px;
+            bottom: 0;
+            left: -8px;
+            right: -8px;
+            position: absolute;
+            background-color: transparent;
+            pointer-events: none;
+        }
+
+        &:hover {
+            .toast-container {
+                transform: perspective(100px) translateZ(0) !important;
+            }
+        }
+    }
+
+}
+  
+/* Bootstrap toast here */
+.toast-container {
+    width: 100%;
+    height: auto;
+    position: relative;
+    transition: all .25s;
+    pointer-events: auto;
+
+    [data-close] {
+        background: none;
+    }
+
+    [data-close]:focus {
+        box-shadow: none;
+    }
+
+    [data-close] svg {
+        vertical-align: top;
+
+        path {
+            transition: .3s ease-in-out;
+        }
+    }
+
+    [data-close]:hover svg path {
+        fill: #f00;
+    }
+
+    &.hide-start {
+        opacity: 0;
+    }
+    
+    &.hide-end {
+        display: none;
+    }
+
+}
+