funda-ui 4.7.624 → 4.7.701

package/publish/lib/css/Toast/index.css

@@ -1,149 +0,0 @@
-/* ======================================================
-   <!-- Toast -->
-/* ====================================================== */
-.toasts__wrapper {
-  --bs-toast-zindex: 1090;
-  --bs-border-radius: 0.375rem;
-  --toasts-offset-top: 35px;
-  --toasts-offset-bottom: 15px;
-  --toasts-offset-bothsides: 15px;
-  --toasts-container-gap: 0.5rem;
-  --toasts-container-width: 350px;
-  --toasts-progress-height: 3px;
-  --toasts-progress-bg: rgba(228, 228, 228, 0.6);
-  width: var(--toasts-container-width);
-  position: fixed;
-  left: 50%;
-  bottom: 0;
-  z-index: var(--bs-toast-zindex);
-  pointer-events: none;
-  transition: 0.1s ease-in-out;
-  /* cascading divs */
-  /* progress */
-}
-.toasts__wrapper--bottom-left {
-  left: var(--toasts-offset-bothsides);
-}
-.toasts__wrapper--bottom-right {
-  left: auto;
-  right: var(--toasts-offset-bothsides);
-}
-.toasts__wrapper--bottom-center {
-  left: 50%;
-  transform: translateX(-50%);
-}
-.toasts__wrapper--top-left {
-  left: var(--toasts-offset-bothsides);
-  bottom: auto;
-  top: var(--toasts-offset-top);
-}
-.toasts__wrapper--top-right {
-  left: auto;
-  right: var(--toasts-offset-bothsides);
-  top: var(--toasts-offset-top);
-}
-.toasts__wrapper--top-center {
-  left: 50%;
-  transform: translateX(-50%);
-  top: var(--toasts-offset-top);
-}
-.toasts__wrapper--vertical-center {
-  left: 50%;
-  transform: translate(-50%, -50%);
-  top: 50%;
-  margin-top: 5%;
-}
-.toasts__wrapper .toasts {
-  position: relative;
-  width: 100%;
-  bottom: var(--toasts-offset-bottom);
-  display: flex;
-  flex-flow: column-reverse nowrap;
-}
-.toasts__wrapper .toasts::before {
-  content: "";
-  top: -80px;
-  bottom: 0;
-  left: -8px;
-  right: -8px;
-  position: absolute;
-  background-color: transparent;
-  pointer-events: none;
-}
-.toasts__wrapper .toast-container {
-  margin-bottom: var(--toasts-container-gap);
-  /* Use clip-path instead of opacity to achieve a fade effect, avoiding the problem of transparency overlay */
-  clip-path: inset(0 0 0 0);
-  transform: translateY(0);
-  /* Rendering of 3D transformations */
-  backface-visibility: hidden;
-  transform-style: preserve-3d;
-  /* init animation */
-  /* enter animation */
-  /* exit animation */
-}
-.toasts__wrapper .toast-container.animate-ready {
-  pointer-events: none;
-  clip-path: inset(0 0 100% 0);
-  transform: translateY(10px);
-}
-.toasts__wrapper .toast-container.animate-in {
-  clip-path: inset(0 0 0 0);
-  transform: translateY(0);
-}
-.toasts__wrapper .toast-container.hide-start {
-  clip-path: inset(0 0 100% 0);
-  transform: translateY(-10px);
-}
-.toasts__wrapper.toasts__wrapper--cascading .toast-container {
-  margin-bottom: 0;
-}
-.toasts__wrapper.toasts__wrapper--cascading .toasts:hover .toast-container {
-  transform: perspective(100px) translateZ(0) !important;
-}
-.toasts__wrapper .toast-progress {
-  position: absolute;
-  width: 100%;
-  bottom: 0px;
-  left: 0px;
-  height: var(--toasts-progress-height);
-  background: transparent;
-  border-radius: 0 0 var(--bs-border-radius) var(--bs-border-radius);
-  overflow: hidden;
-}
-.toasts__wrapper .toast-progress .progress-bar {
-  background: var(--toasts-progress-bg);
-  width: 100%;
-  height: 100%;
-  transition: all 0.1s;
-}
-
-/* Bootstrap toast here */
-.toast-container {
-  width: 100%;
-  height: auto;
-  position: relative;
-  transition: all 0.25s;
-  pointer-events: auto;
-}
-.toast-container [data-close] {
-  background: none;
-}
-.toast-container [data-close]:focus {
-  box-shadow: none;
-}
-.toast-container [data-close] svg {
-  vertical-align: top;
-}
-.toast-container [data-close] svg path {
-  transition: 0.3s ease-in-out;
-}
-.toast-container [data-close]:hover svg path {
-  fill: #f00;
-}
-.toast-container.hide-start {
-  opacity: 0;
-}
-.toast-container.hide-end {
-  display: none;
-}

package/publish/lib/css/Tree/index.css

@@ -1,237 +0,0 @@
-/* ======================================================
-    <!-- Tree -->
-/* ====================================================== */
-.tree-diagram-default {
-  --tree-padding-x: 1rem;
-  --tree-padding-y: 0.5rem;
-  --tree-font-line-height: 1.5;
-  --tree-dis-top: 1rem;
-  --tree-font-size: 0.875rem;
-  --tree-ident: var(--tree-font-size);
-  --tree-dis-start: -var(--tree-ident);
-  --tree-border-color: #ddd;
-  --tree-font-bg: #f6f6f6;
-  --tree-font-active-bg: #f0f8ff;
-  --tree-checkbox-indeterminate-color: #bbbbbb;
-  --tree-link-min-width: 150px;
-  position: relative;
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  padding: 0.5rem 0;
-  outline: none; /* When using "tabindex" please set */
-  word-wrap: break-word;
-  word-break: break-word;
-  /*------ line ------*/
-  /*------ has checkbox  ------*/
-  /*------ hide arrow  ------*/
-}
-.tree-diagram-default ul, .tree-diagram-default li {
-  list-style: none;
-}
-.tree-diagram-default .tree-diagram-default-nav {
-  display: flex;
-  flex-direction: column;
-  padding-left: 0;
-  margin-bottom: 0;
-  list-style: none;
-  /* Default height for sub items */
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link {
-  position: relative;
-  display: block;
-  cursor: pointer;
-  min-width: var(--tree-link-min-width);
-  padding: var(--tree-padding-y) var(--tree-padding-x);
-  font-size: var(--tree-font-size);
-  font-weight: 400;
-  color: inherit;
-  text-decoration: none;
-  transition: 0.1s ease-in-out;
-  padding-left: calc(var(--tree-padding-x) * 2);
-  z-index: 1;
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link.disabled {
-  opacity: 0.5;
-  pointer-events: none;
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link > span {
-  transition: 0.1s ease-in-out;
-  border-radius: 2px;
-  /* required */
-  display: inline-flex;
-  align-items: center;
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link > span var.loading-icon {
-  position: absolute;
-  margin-left: 0.2em;
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link:hover span {
-  background-color: var(--tree-font-bg);
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link.selected span {
-  background-color: var(--tree-font-active-bg);
-}
-.tree-diagram-default .tree-diagram-default-nav .nav-link.loading > span var.loading-icon {
-  display: inline-block;
-}
-.tree-diagram-default .tree-diagram-default-nav var.loading-icon {
-  display: none;
-}
-.tree-diagram-default .tree-diagram-default-nav var.loading-icon svg {
-  animation: tree-diagram-ring 1.2s linear infinite;
-}
-.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger {
-  display: none;
-  position: absolute;
-  left: calc(var(--tree-padding-x) + 1.5em);
-  top: calc(var(--tree-dis-top) - 8px);
-  z-index: 2;
-}
-.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div {
-  display: inline-block;
-  position: relative;
-}
-.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check {
-  min-height: auto;
-  margin-bottom: 0;
-}
-.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check [type=checkbox]:indeterminate,
-.tree-diagram-default .tree-diagram-default-nav .checkbox-trigger > div .form-check [type=checkbox].indeterminate {
-  background-color: var(--tree-checkbox-indeterminate-color);
-  border-color: var(--tree-checkbox-indeterminate-color);
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23fff' stroke-linecap='round' stroke-linejoin='round' stroke-width='3' d='M6 10h8'/%3e%3c/svg%3e");
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow {
-  cursor: pointer;
-  transition: 0.1s ease-in-out;
-  text-align: center;
-  position: absolute;
-  left: calc(var(--tree-padding-x) + 0.2em);
-  top: calc(var(--tree-dis-top) - 5px);
-  z-index: 2;
-  width: 10px;
-  height: 10px;
-  /* required */
-  display: inline-flex;
-  align-items: center;
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow > var > svg {
-  transition: 0.1s ease-in-out;
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow var.default-icon > span:last-child {
-  display: none;
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow.loading var.default-icon {
-  display: none;
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow.loading var.loading-icon {
-  display: inline-block;
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow:hover {
-  opacity: 0.5;
-}
-.tree-diagram-default .tree-diagram-default-nav .arrow:hover > var > svg {
-  transform: scale(1.4);
-}
-.tree-diagram-default .tree-diagram-default-nav li {
-  position: relative;
-  padding-left: 0.2em;
-}
-.tree-diagram-default .tree-diagram-default-nav li i {
-  font-style: normal;
-}
-.tree-diagram-default .tree-diagram-default-nav li.active > .arrow:not(.custom-icons) {
-  transform: rotate(90deg);
-}
-.tree-diagram-default .tree-diagram-default-nav li.active > .arrow.custom-icons var.default-icon > span:first-child {
-  display: none;
-}
-.tree-diagram-default .tree-diagram-default-nav li.active > .arrow.custom-icons var.default-icon > span:last-child {
-  display: block;
-}
-.tree-diagram-default .tree-diagram-default-nav > li ul {
-  transition: max-height 0.25s ease;
-  overflow: hidden;
-  position: relative;
-}
-.tree-diagram-default .tree-diagram-default-nav > li:not(.active) ul {
-  max-height: 0;
-}
-.tree-diagram-default .tree-diagram-default-nav > li ul ul {
-  margin-top: auto;
-}
-.tree-diagram-default.show-line .tree-diagram-default-nav li::before, .tree-diagram-default.show-line .tree-diagram-default-nav li::after {
-  content: "";
-  position: absolute;
-  top: calc(0px - var(--tree-dis-top));
-  left: var(--tree-dis-start);
-  border-left-width: 1px;
-  border-left-style: solid;
-  border-left-color: var(--tree-border-color);
-  border-bottom-width: 1px;
-  border-bottom-style: solid;
-  border-bottom-color: var(--tree-border-color);
-  width: var(--tree-ident);
-  pointer-events: none;
-}
-.tree-diagram-default.show-line .tree-diagram-default-nav li::before {
-  height: calc(var(--tree-font-size) * var(--tree-font-line-height) + var(--tree-padding-y) + var(--tree-padding-y));
-}
-.tree-diagram-default.show-line .tree-diagram-default-nav li::after {
-  height: 100%;
-  border-bottom-width: 0;
-}
-.tree-diagram-default.show-line .tree-diagram-default-nav li:last-child::after {
-  display: none;
-}
-.tree-diagram-default.show-line .tree-diagram-default-nav > li:first-child::before {
-  border-left-width: 0;
-}
-.tree-diagram-default.show-line .tree-diagram-default-nav > li:first-child::after {
-  top: calc(var(--tree-font-size) * var(--tree-font-line-height));
-}
-.tree-diagram-default.show-line.line--dotted .tree-diagram-default-nav li::before, .tree-diagram-default.show-line.line--dotted .tree-diagram-default-nav li::after {
-  border-left-style: dotted;
-  border-bottom-style: dotted;
-}
-.tree-diagram-default.show-line.line--dashed .tree-diagram-default-nav li::before, .tree-diagram-default.show-line.line--dashed .tree-diagram-default-nav li::after {
-  border-left-style: dashed;
-  border-bottom-style: dashed;
-}
-.tree-diagram-default.show-line.line--double .tree-diagram-default-nav li::before, .tree-diagram-default.show-line.line--double .tree-diagram-default-nav li::after {
-  border-left-style: double;
-  border-bottom-style: double;
-}
-.tree-diagram-default.show-line.line--solid .tree-diagram-default-nav li::before, .tree-diagram-default.show-line.line--solid .tree-diagram-default-nav li::after {
-  border-left-style: solid;
-  border-bottom-style: solid;
-}
-.tree-diagram-default.has-checkbox .checkbox-trigger {
-  display: inline-block;
-}
-.tree-diagram-default.has-checkbox .tree-diagram-default-nav .nav-link {
-  padding-left: calc(var(--tree-padding-x) + 2.7em);
-}
-.tree-diagram-default.hide-arrow .arrow {
-  display: none;
-}
-.tree-diagram-default.hide-arrow .tree-diagram-default-nav .nav-link {
-  padding-left: var(--tree-padding-x);
-}
-.tree-diagram-default.hide-arrow.has-checkbox .tree-diagram-default-nav .checkbox-trigger {
-  left: calc(var(--tree-padding-x) + 0.5em);
-}
-.tree-diagram-default.hide-arrow.has-checkbox .tree-diagram-default-nav .nav-link {
-  padding-left: calc(var(--tree-padding-x) + 1.5em);
-}
-
-@keyframes tree-diagram-ring {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}

package/publish/lib/esm/Accordion/Accordion.tsx

@@ -1,185 +0,0 @@
-import React, { useState, useRef, useEffect } from 'react';
-
-import Item from './AccordionItem';
-
-import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
-
-// Adapt the easing parameters of TweenMax
-export enum EasingList {
-    linear = 'linear',
-    ease = 'ease',
-    easeIn = 'ease-in',
-    easeOut = 'ease-out',
-    easeInOut = 'ease-in-out'
-}
-
-
-export type AccordionOptionChangeFnType = (element: HTMLDivElement, index: number) => void;
-
-
-
-export type AccordionProps = {
-    wrapperClassName?: string;
-	/** The index of the item to be displayed by default. Set to -1 to display none, or an array of indices to display multiple items */
-	defaultActiveIndex?: number | number[];
-    /** Whether to expand all items by default */
-    defaultActiveAll?: boolean;
-	/** The number of milliseconds(ms) each iteration of the animation takes to complete */
-	duration?: number;
-    /** Types of easing animation */
-    easing?: string;
-    /**  Mutually exclusive alternate expansion between the levels */
-    alternateCollapse?: boolean;
-    /** Only allow arrow to trigger the accordion */
-    arrowOnly?: boolean;
-    /** This function is called whenever the data is updated.
-     *  Exposes the JSON format data about the option as an argument.
-     */
-    onChange?: AccordionOptionChangeFnType | null;
-	/** -- */
-	children: React.ReactNode;
-};
-
-const Accordion = (props: AccordionProps) => {
-    const {
-        wrapperClassName,
-        defaultActiveIndex,
-        defaultActiveAll = false,
-        duration,
-        easing = 'ease',
-        alternateCollapse = true,
-        arrowOnly = false,
-        onChange,
-        children
-    } = props;
-
-    const animSpeed = duration || 200;
-    const easeType: string = typeof alternateCollapse === 'undefined' ? EasingList['linear'] : EasingList[easing as never];
-    const rootRef = useRef<any>(null);
-    const [heightObserver, setHeightObserver] = useState<number[]>([]);
-    const [expandedItems, setExpandedItems] = useState<Set<number>>(new Set());  // Keep track of all expanded items
-    const animationInProgress = useRef<boolean>(false);
-    const initExpanded = useRef<boolean>(false);
-        
-
-    
-    function handleClickItem(e: React.MouseEvent) {
-        if (animationInProgress.current) return;
-        if ((e.target as any).closest('.custom-accordion-header') === null) return;
-        
-        animationInProgress.current = true;
-
-        const reactDomEl: any = arrowOnly ? e.currentTarget.closest('.custom-accordion-item') : e.currentTarget;
-        const curIndex: number = parseInt(reactDomEl.dataset.index);
-        const reactDomWrapperEl: HTMLElement = rootRef.current;
-        const $li = reactDomWrapperEl.querySelectorAll('.custom-accordion-item');
-
-        if (reactDomEl.getAttribute('aria-expanded') === 'false' || reactDomEl.getAttribute('aria-expanded') === null) {
-            if (alternateCollapse) {
-    
-                // Update expanded items state
-                setExpandedItems(new Set([curIndex]));
-            } else {
-                // Add current item to expanded items
-                setExpandedItems(prev => new Set([...(prev as never), curIndex]));
-            }
-
-        } else {
- 
-            // Remove current item from expanded items
-            setExpandedItems(prev => {
-                const newSet = new Set(prev);
-                newSet.delete(curIndex);
-                return newSet;
-            });
-        }
-
-        // Reset animation flag after transition duration
-        setTimeout(() => {
-            animationInProgress.current = false;
-        }, animSpeed);
-
-        onChange?.(reactDomEl, curIndex);
-    }
-
-
-    //Initialize expanded items based on defaultActiveIndex or defaultActiveAll
-    useEffect(() => {
-
-        // Skip the default height initialization to prevent re-initialization. 
-        // This method is useful when you want to manually control when the accordion should 
-        // skip the automatic height initialization process, especially useful when `children` change frequently.
-        if (initExpanded.current === true) return;
-
-        if (defaultActiveAll && children && rootRef.current) {
-            const allIndices = Array.from({ length: (children as any[]).length }, (_, i) => i);
-            setExpandedItems(new Set(allIndices));
-            // Set heightObserver for all items to enable height monitoring
-            setHeightObserver(allIndices);
-            
-            //
-            initExpanded.current = true;
-        } else if (defaultActiveIndex !== undefined) {
-            const initialExpanded = new Set<number>();
-            const observerIndices: number[] = [];
-            
-            if (Array.isArray(defaultActiveIndex)) {
-                defaultActiveIndex.forEach(index => {
-                    initialExpanded.add(index);
-                    observerIndices.push(index);
-                });
-            } else if (typeof defaultActiveIndex === 'number') {
-                initialExpanded.add(defaultActiveIndex);
-                observerIndices.push(defaultActiveIndex);
-            }
-            
-            setExpandedItems(initialExpanded);
-            // Set heightObserver for default active items to enable height monitoring
-            if (observerIndices.length > 0) {
-                setHeightObserver(observerIndices);
-            }
-
-            //
-            initExpanded.current = true;
-
-        }
-        
-    }, [defaultActiveIndex, defaultActiveAll, children]);
-    
-    
-    return (
-        <>
-            <div className={combinedCls(
-                'custom-accordion-item',
-                clsWrite(wrapperClassName, 'accordion')
-            )} role="tablist" ref={rootRef}>
-                {(children != null) ? (children as any[]).map((item, i) => {
-                    const childProps = { ...item.props };
-                    let _defaultActive = false;
-                    
-                    if (Array.isArray(defaultActiveIndex)) {
-                        _defaultActive = defaultActiveIndex.includes(i);
-                    } else if (typeof defaultActiveIndex === 'number') {
-                        _defaultActive = defaultActiveIndex === i;
-                    }
-                    
-                    return <Item
-                        key={"item" + i}
-                        index={i}
-                        defaultActiveAll={defaultActiveAll}
-                        animSpeed={animSpeed}
-                        easing={easeType}
-                        arrowOnly={arrowOnly}
-                        heightObserver={heightObserver}
-                        activeItem={_defaultActive}
-                        onToggleEv={handleClickItem}
-                        isExpanded={expandedItems.has(i)}   // Both controlled and uncontrolled modes are implemented
-                        {...childProps}
-                    />;
-                }) : null}
-            </div>
-        </>
-    );
-};
-
-export default Accordion;