funda-ui 4.3.355 → 4.3.721

package/lib/esm/DynamicFields/index.tsx

@@ -1,11 +1,10 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, useImperativeHandle } from 'react';
 
 
 import useComId from 'funda-utils/dist/cjs/useComId';
 import { clsWrite, combinedCls } from 'funda-utils/dist/cjs/cls';
 
 
-
 export type DynamicFieldsValueProps = {
     init: React.ReactNode[];
     tmpl: React.ReactNode;
@@ -13,6 +12,7 @@ export type DynamicFieldsValueProps = {
 
 
 export type DynamicFieldsProps = {
+    contentRef?: React.ForwardedRef<any>;
     wrapperClassName?: string;
     btnAddWrapperClassName?: string;
     btnRemoveWrapperClassName?: string;
@@ -48,6 +48,7 @@ export type DynamicFieldsProps = {
 
 const DynamicFields = (props: DynamicFieldsProps) => {
     const {
+        contentRef,
         wrapperClassName,
         btnAddWrapperClassName,
         btnRemoveWrapperClassName,
@@ -96,6 +97,23 @@ const DynamicFields = (props: DynamicFieldsProps) => {
     const addBtnIdRef = useRef<string>('');
     addBtnIdRef.current = `dynamic-fields-add-${idRes}`;
 
+    // exposes the following methods
+    useImperativeHandle(
+        contentRef,
+        () => ({
+            showAddBtn: () => {
+                addBtnRef.current.style.setProperty('display', 'inline', 'important');
+            },
+            hideAddBtn: () => {
+                addBtnRef.current.style.setProperty('display', 'none', 'important');
+            },
+            appendedItemsCounter: () => {
+                return rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length;
+            }
+        }),
+        [contentRef],
+    );
+
     function updateLastItemCls(el: HTMLDivElement, type: string) {
         if (typeof el === 'undefined') return;
 
@@ -142,7 +160,8 @@ const DynamicFields = (props: DynamicFieldsProps) => {
 
     function checkMaxStatus() {
         //button status
-        if (rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length + 1 >= parseFloat(maxFields)) {
+        const _appendedItems = rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length;
+        if (_appendedItems + 1 >= parseFloat(maxFields)) {
             addBtnRef.current.style.setProperty('display', 'none', 'important');
         }
     }
@@ -302,11 +321,17 @@ const DynamicFields = (props: DynamicFieldsProps) => {
         setVal(data ? data.init : []);
         setTmpl(data ? data.tmpl : null);
 
+        //
+        checkMaxStatus();
+
         //
         onLoad?.(addBtnIdRef.current, rootRef.current, PER_ROW_DOM_STRING);
     }, [data]);
 
 
+
+    
+
     return (
         <>
 

package/lib/esm/EventCalendar/index.scss

@@ -6,71 +6,73 @@
 // ---------------------------
 //
 @mixin disabled-item() {
-	// @include disabled-item(); 
+    // @include disabled-item(); 
     opacity: .4;
     pointer-events: none;
 }
 
-.e-cal__wrapper {
-    --e-cal-wrapper-min-width: 400px;
-    --e-cal-body-bg: #fff;
-    --e-cal-border-color: #ddd;
-    --e-cal-border-color-hover: #333;
-    --e-cal-header-fs: 1.125rem;
-    --e-cal-default-border-color: #eee;
-    --e-cal-day-border-color: #ddd;
-    --e-cal-day-hover-bg: #f6f6f6;
-    --e-cal-dayselected-bg: #0b5ed7;
-    --e-cal-dayselected-text-color: #fff;
-    --e-cal-year-month-btn-border-color: #ddd;
-    --e-cal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
-    --e-cal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
-    --e-cal-year-month-btn-selected-color: #fff;
-    --e-cal-month-wrapper-w: 18.75rem;
-    --e-cal-year-wrapper-w: 18.75rem;
-    --e-cal-header-arrow-bg: #000;
-    --e-cal-header-text-color: #000;
-    --e-cal-header-prevnext-btn-bg: transparent;
-    --e-cal-header-prevnext-btn-color: #000;
-    --e-cal-header-prevnext-btn-radius: 0.25rem;
-    --e-cal-delete-btn-color: #ee4949;
-    --e-cal-footer-today-btn-bg: rgba(0, 58, 166, 1);
-    --e-cal-footer-today-btn-color: #fff;
-    --e-cal-event-bg: rgb(255, 240, 227);
+.e-cal-normal__wrapper {
+    --e-cal-normal-wrapper-min-width: 400px;
+    --e-cal-normal-body-bg: #fff;
+    --e-cal-normal-border-color: #ddd;
+    --e-cal-normal-border-color-hover: #333;
+    --e-cal-normal-header-fs: 1.125rem;
+    --e-cal-normal-default-border-color: #eee;
+    --e-cal-normal-day-border-color: #ddd;
+    --e-cal-normal-day-hover-bg: #f6f6f6;
+    --e-cal-normal-dayselected-bg: #0b5ed7;
+    --e-cal-normal-dayselected-text-color: #fff;
+    --e-cal-normal-year-month-btn-border-color: #ddd;
+    --e-cal-normal-year-month-btn-hover-bg: rgba(0, 58, 166, .1);
+    --e-cal-normal-year-month-btn-selected-bg: rgba(0, 58, 166, 1);
+    --e-cal-normal-year-month-btn-selected-color: #fff;
+    --e-cal-normal-month-wrapper-w: 18.75rem;
+    --e-cal-normal-year-wrapper-w: 18.75rem;
+    --e-cal-normal-header-arrow-bg: #000;
+    --e-cal-normal-header-text-color: #000;
+    --e-cal-normal-header-prevnext-btn-bg: transparent;
+    --e-cal-normal-header-prevnext-btn-color: #000;
+    --e-cal-normal-header-prevnext-btn-radius: 0.25rem;
+    --e-cal-normal-table-add-btn-color: #0b5ed7;
+    --e-cal-normal-delete-btn-color: #ee4949;
+    --e-cal-normal-footer-today-btn-bg: rgba(0, 58, 166, 1);
+    --e-cal-normal-footer-today-btn-color: #fff;
+    --e-cal-normal-event-default-bg: rgb(255, 240, 227);
+    --e-cal-normal-table-event-font-size: 0.75rem;
 
 
     position: relative;
-    min-width: var(--e-cal-wrapper-min-width);
-    border: 1px solid var(--e-cal-border-color);
+    min-width: var(--e-cal-normal-wrapper-min-width);
+    border: 1px solid var(--e-cal-normal-border-color);
 
 
     /* --HEADER --*/
-    .e-cal__header {
-        font-size: var(--e-cal-header-fs);
+    .e-cal-normal__header {
+        font-size: var(--e-cal-normal-header-fs);
         font-weight: bold;
         padding: 10px 10px 5px 10px;
         display: flex;
         justify-content: space-between;
 
-        .e-cal__header__btns {
-            .e-cal__btn {
+        .e-cal-normal__header__btns {
+            .e-cal-normal__btn {
                 margin-right: 1rem;
-                color: var(--e-cal-header-text-color);
-    
+                color: var(--e-cal-normal-header-text-color);
+
                 svg {
                     margin-left: .3rem;
-                    
+
                     path {
-                        fill: var(--e-cal-header-arrow-bg);
-                    }  
+                        fill: var(--e-cal-normal-header-arrow-bg);
+                    }
                 }
-                
+
                 &.active {
                     svg {
                         transform: rotate(180deg);
                     }
                 }
-      
+
             }
         }
 
@@ -78,20 +80,20 @@
 
 
     /*-- BODY --*/
-    .e-cal__body {
-        background: var(--e-cal-body-bg);
+    .e-cal-normal__body {
+        background: var(--e-cal-normal-body-bg);
         width: 100%;
         display: flex;
         flex-wrap: wrap;
     }
 
     /*-- CELL --*/
-    .e-cal__row {
+    .e-cal-normal__row {
         display: flex;
         width: 100%;
 
-        .e-cal__cell {
-            flex: 1; 
+        .e-cal-normal__cell {
+            flex: 1;
             position: relative;
             height: auto;
             min-height: 4.75em;
@@ -101,7 +103,7 @@
             flex-direction: column;
             text-align: center;
             border-width: 0;
-            border-color: var(--e-cal-default-border-color);
+            border-color: var(--e-cal-normal-default-border-color);
             border-style: solid;
             border-top-width: 1px;
             border-right-width: 1px;
@@ -117,41 +119,110 @@
             &.last-row {
                 border-bottom-width: 1px;
             }
-           
-            &.e-cal__day--week {
+
+            &.e-cal-normal__day--week {
                 min-height: 2.75em;
                 align-items: end;
                 padding-inline-end: .75rem;
             }
 
-            .e-cal__day__event {
-                background-color: var(--e-cal-event-bg);
-                width: 100%;
-                padding: .1rem .5rem;
-                margin: 0.5rem;
-                border-radius: 0;
-                margin-top: 2.5rem;
+            &:not(.empty):hover {
+                background-color: var(--e-cal-normal-day-hover-bg);
+            }
+
+            .e-cal-normal__day__event {
+                margin-bottom: 1px;
+                font-size: var(--e-cal-normal-table-event-font-size);
+                background-color: var(--e-cal-normal-event-default-bg);
                 text-align: left;
-                font-size: 0.75rem;
+                
+                &:hover {
+                    cursor: pointer;
+                    opacity: .8;
+                }
             }
-        
-            .e-cal__day__eventdel {
+
+            .e-cal-normal__cell-item.first {
+                margin-top: 2.5rem;
+            }
+            
+
+            /* Delete button */
+            .e-cal-normal__day__eventdel {
                 position: absolute;
                 z-index: 1;
-                left: 0;
+                right: -5px;
                 top: 0;
                 display: none;
-                color: var(--e-cal-delete-btn-color);
-        
+                color: var(--e-cal-normal-delete-btn-color);
+
                 svg {
-                    fill: var(--e-cal-delete-btn-color);
-                    
+                    width: 10px;
+                    fill: var(--e-cal-normal-delete-btn-color);
+
                     path {
-                        fill: var(--e-cal-delete-btn-color);
+                        fill: var(--e-cal-normal-delete-btn-color);
+                    }
+                }
+
+                &:hover {
+                    svg {
+                        transform: scale(1.2);
                     }
                 }
             }
-            
+
+            &:not(.empty) .e-cal-normal__cell-item:hover {
+                .e-cal-normal__day__eventdel {
+                    display: block;
+                }
+
+            }
+
+
+            /* Add button */
+            .e-cal-normal__day__eventadd {
+                position: absolute;
+                z-index: 1;
+                left: 0;
+                bottom: -8.5px;
+                display: none;
+                width: 20px;
+                color: var(--e-cal-normal-table-add-btn-color);
+                text-align: left;
+                pointer-events: none;
+
+                > a {
+                    pointer-events: auto;
+                }
+
+                svg {
+                    width: 15px;
+                    fill: var(--e-cal-normal-table-add-btn-color);
+
+                    path {
+                        fill: var(--e-cal-normal-table-add-btn-color);
+                    }
+                }
+
+                &:hover {
+                    svg {
+                        transform: scale(1.2);
+                    }
+                }
+            }
+
+            &:hover {
+                .e-cal-normal__day__eventadd {
+                    display: block;
+                }
+
+            }
+
+
+
+
+            /* DAY NUMBER */
             > span {
                 position: absolute;
                 right: .25rem;
@@ -169,30 +240,27 @@
                 }
             }
 
+            
+            /* ITEMS */
+            > div {
+                position: relative;
+                width: 100%;
+            }
+
 
             &:not(.empty) {
                 cursor: pointer;
             }
 
-            &.today {
-                
-            }
+            &.today {}
 
             &.selected {
-                > span {
-                    color: var(--e-cal-dayselected-text-color);
-                    background-color: var(--e-cal-dayselected-bg);
+                >span {
+                    color: var(--e-cal-normal-dayselected-text-color);
+                    background-color: var(--e-cal-normal-dayselected-bg);
                 }
             }
 
-            &:not(.empty):hover {
-                background-color: var(--e-cal-day-hover-bg);
-
-                .e-cal__day__eventdel {
-                    display: block;
-                }
-            } 
-            
         }
 
 
@@ -200,9 +268,9 @@
 
 
     /*-- SELECTION --*/
-    .e-cal__month-wrapper {
+    .e-cal-normal__month-wrapper {
         position: absolute;
-        width: var(--e-cal-month-wrapper-w);
+        width: var(--e-cal-normal-month-wrapper-w);
         height: auto;
         z-index: 1;
         top: calc(1rem + 22px);
@@ -215,7 +283,7 @@
         }
 
 
-        .e-cal__month-container {
+        .e-cal-normal__month-container {
             display: grid;
             grid-template-columns: repeat(3, 1fr);
             grid-template-rows: repeat(4, 2.5em);
@@ -226,9 +294,9 @@
     }
 
 
-    .e-cal__year-wrapper {
+    .e-cal-normal__year-wrapper {
         position: absolute;
-        width: var(--e-cal-year-wrapper-w);
+        width: var(--e-cal-normal-year-wrapper-w);
         height: auto;
         z-index: 1;
         top: calc(1rem + 22px);
@@ -238,35 +306,35 @@
 
         &.active {
             display: block;
-        }     
-        
-        .e-cal__year-container {
+        }
+
+        .e-cal-normal__year-container {
             display: grid;
             grid-template-columns: repeat(4, 1fr);
             grid-template-rows: repeat(5, 2.5em);
             grid-gap: 5px;
-        }   
+        }
     }
 
 
-    .e-cal__year,
-    .e-cal__month {
+    .e-cal-normal__year,
+    .e-cal-normal__month {
         display: flex;
         align-items: center;
         justify-content: center;
         padding: 5px;
         font-size: 0.875em;
-        border: 1px solid var(--e-cal-year-month-btn-border-color);
+        border: 1px solid var(--e-cal-normal-year-month-btn-border-color);
         border-radius: 0.25rem;
         cursor: pointer;
 
         &:hover {
-            background-color: var(--e-cal-year-month-btn-hover-bg);
+            background-color: var(--e-cal-normal-year-month-btn-hover-bg);
         }
 
         &.selected {
-            background-color: var(--e-cal-year-month-btn-selected-bg);
-            color: var(--e-cal-year-month-btn-selected-color);
+            background-color: var(--e-cal-normal-year-month-btn-selected-bg);
+            color: var(--e-cal-normal-year-month-btn-selected-color);
         }
 
         &.disabled {
@@ -279,7 +347,7 @@
 
 
     /* --BUTTON --*/
-    .e-cal__btn {
+    .e-cal-normal__btn {
         border: none;
         outline: none;
         background: none;
@@ -294,7 +362,7 @@
 
         svg {
             path {
-                fill: var(--e-cal-header-arrow-bg);
+                fill: var(--e-cal-normal-header-arrow-bg);
             }
         }
 
@@ -304,27 +372,27 @@
 
         &--prev,
         &--next {
-            border-radius: var(--e-cal-header-prevnext-btn-radius);
-            color: var(--e-cal-header-prevnext-btn-color);
-            background-color: var(--e-cal-header-prevnext-btn-bg);
+            border-radius: var(--e-cal-normal-header-prevnext-btn-radius);
+            color: var(--e-cal-normal-header-prevnext-btn-color);
+            background-color: var(--e-cal-normal-header-prevnext-btn-bg);
 
             svg {
                 path {
-                    fill: var(--e-cal-header-prevnext-btn-color);
+                    fill: var(--e-cal-normal-header-prevnext-btn-color);
                 }
             }
 
         }
 
         &--today {
-            border: 1px solid var(--e-cal-border-color);
+            border: 1px solid var(--e-cal-normal-border-color);
             border-radius: 0.25rem;
             font-size: 0.875em;
             padding: .2rem 1rem;
-            color: var(--e-cal-footer-today-btn-color);
-            background-color: var(--e-cal-footer-today-btn-bg);
+            color: var(--e-cal-normal-footer-today-btn-color);
+            background-color: var(--e-cal-normal-footer-today-btn-bg);
         }
     }
 
 
-}
+}