funda-ui 4.7.615 → 4.7.624

package/{Date → publish/Date}/index.js

@@ -5446,6 +5446,10 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     e.preventDefault();
     e.stopPropagation(); // Avoid triggering other inputs
 
+    // If disabled or readOnly, the operations are not performed
+    if (disabled || readOnly) {
+      return;
+    }
     e.target.select();
     resetDefauleValueExist();
 
@@ -5704,12 +5708,16 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
       tabIndex: -1,
       href: "#",
       className: (0,cls.combinedCls)('date2d__control-tools__close', {
-        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist
+        'd-none': HIDE_CLEAR_BTN_ENABLED || !dateDefaultValueExist || disabled || readOnly
       }),
       onClick: function onClick(e) {
         e.preventDefault();
         e.stopPropagation(); // Avoid triggering pop-ups
 
+        // If disabled or readOnly, the operations are not performed
+        if (disabled || readOnly) {
+          return;
+        }
         clearAll();
         onClear === null || onClear === void 0 ? void 0 : onClear(getFullTimeData(''));
       }
@@ -5728,6 +5736,10 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         e.preventDefault();
         e.stopPropagation(); // Avoid triggering pop-ups
 
+        // If disabled or readOnly, the operations are not performed
+        if (disabled || readOnly) {
+          return;
+        }
         handleShow();
       }
     }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("svg", {
@@ -5798,7 +5810,7 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     onFocus: handleFocus,
     onBlur: handleBlur,
     onKeyDown: handleKeyPressed,
-    onClick: enableEntireAreaPopup ? handleShow : function () {}
+    onClick: enableEntireAreaPopup && !disabled && !readOnly ? handleShow : function () {}
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement("div", {
     className: "date2d__control"
   }, /*#__PURE__*/external_root_React_commonjs2_react_commonjs_react_amd_react_default().createElement((cjs_default()), _extends({
@@ -5810,6 +5822,8 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
         externalRef.current = node;
       }
     },
+    disabled: disabled,
+    readOnly: readOnly,
     tabIndex: -1,
     type: "text",
     inputMode: "none",
@@ -6135,6 +6149,10 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
     langMonthsFull: _langMonthsFull,
     langToday: _langToday,
     onChangeDate: function onChangeDate(e, currentData) {
+      // If disabled or readOnly, the operations are not performed
+      if (disabled || readOnly) {
+        return;
+      }
       resetDefauleValueExist();
 
       //
@@ -6153,6 +6171,10 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
       resetPopupBlurStatus();
     },
     onChangeToday: function onChangeToday(currentData) {
+      // If disabled or readOnly, the operations are not performed
+      if (disabled || readOnly) {
+        return;
+      }
       resetDefauleValueExist();
 
       //
@@ -6221,6 +6243,11 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
       tabIndex: -1,
       onClick: function onClick(e) {
         e.preventDefault();
+
+        // If disabled or readOnly, the operations are not performed
+        if (disabled || readOnly) {
+          return;
+        }
         resetDefauleValueExist();
 
         //
@@ -6258,6 +6285,11 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
       tabIndex: -1,
       onClick: function onClick(e) {
         e.preventDefault();
+
+        // If disabled or readOnly, the operations are not performed
+        if (disabled || readOnly) {
+          return;
+        }
         resetDefauleValueExist();
 
         //
@@ -6295,6 +6327,11 @@ var src_Date = /*#__PURE__*/(0,external_root_React_commonjs2_react_commonjs_reac
       tabIndex: -1,
       onClick: function onClick(e) {
         e.preventDefault();
+
+        // If disabled or readOnly, the operations are not performed
+        if (disabled || readOnly) {
+          return;
+        }
         resetDefauleValueExist();
 
         //

package/{DynamicFields → publish/DynamicFields}/index.js

@@ -568,6 +568,9 @@ var DynamicFields = function DynamicFields(props) {
   // exposes the following methods
   (0,react__WEBPACK_IMPORTED_MODULE_0__.useImperativeHandle)(contentRef, function () {
     return {
+      addNew: function addNew() {
+        handleClickAdd(null);
+      },
       showAddBtn: function showAddBtn() {
         addBtnRef.current.style.setProperty('display', 'inline', 'important');
       },
@@ -578,7 +581,9 @@ var DynamicFields = function DynamicFields(props) {
         return rootRef.current.querySelectorAll(PER_ROW_DOM_STRING).length;
       }
     };
-  }, [contentRef]);
+  }, [contentRef, handleClickAdd] // required "handleClickAdd"
+  );
+
   function updateLastItemCls(el, type) {
     if (typeof el === 'undefined') return;
     if (type === 'add') {
@@ -624,8 +629,11 @@ var DynamicFields = function DynamicFields(props) {
       addBtnRef.current.style.setProperty('display', 'none', 'important');
     }
   }
-  function handleClickAdd(event) {
-    if (event !== null && typeof event !== 'undefined') event.preventDefault();
+  function handleClickAdd() {
+    var event = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : null;
+    if (event !== null) {
+      if (typeof event !== 'undefined') event.preventDefault();
+    }
 
     //button status
     checkMaxStatus();

package/publish/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2018 UIUX Lab
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAM AGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/publish/README.md

@@ -0,0 +1,328 @@
+# Funda UI
+
+React components using pure Bootstrap 5+ which has undergone complex business testing and is easy to integrate with any API. You can load Bootstrap css libraries separately in your project.
+
+All components have undergone complex business verification and provide multiple examples.
+
+
+---
+
+- [Documentation](https://uiux.cc/funda-ui-doc)
+
+---
+
+
+
+## Key Features
+
+1. Simplify the assignment method of diversified data.
+2. Components are compatible with `gRPC`, `REST APIs`, `GraphQL` self-packaging, uniformly use [Classes](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes) and their methods to introduce interfaces
+3. Enhanced user interaction, flexible use in asynchronous and synchronous states
+4. Introduce appropriate component `.css` files as needed, only for some components with special needs. Most of them can directly use Bootstrap's official style sheet. Styles are performant and easy to override.
+5. Do not embed css-in-js, directly use external CSS styles to completely change the component style.
+
+
+
+## Components List
+
+Here is a table of the components and their status.
+
+
+| WEB ELEMENTS | FORMS | INTERACTION | NAVIGATION | LAYOUTS |
+| --- | --- | --- | --- | --- |
+| [Accordion ✅](packages/Accordion/README.md) | [Input ✅](packages/Input/README.md) | [Infinite Scroll ❏](packages/InfiniteScroll/README.md) |[Multilevel Dropdown Menu ✅](packages/MultilevelDropdownMenu/README.md)  | [MasonryLayout ✅](packages/MasonryLayout/README.md) |
+| [Accordion Slider ❏](packages/AccordionSlider/README.md) | [Number Input ✅](packages/NumberInput/README.md) | [Image Perspective Hover ❏](packages/ImagePerspectiveHover/README.md) | [Dropdown Menu ✅](packages/DropdownMenu/README.md)  | [RootPortal ✅](packages/RootPortal/README.md)  |
+| [Back To Top ✅](packages/BackToTop/README.md) | [Date ✅🔥](packages/Date/README.md) | [Mousewheel Interaction ❏](packages/MousewheelInteraction/README.md) | | [Splitter Panel  ✅](packages/SplitterPanel/README.md) |
+| [Button ❏](packages/Button/README.md) | [Tag Input ✅](packages/TagInput/README.md) | [Parallax ❏](packages/Parallax/README.md) |  |   |
+| [Card ❏](packages/Card/README.md) | [Textarea  ✅](packages/Textarea/README.md) | [Scroll Reveal ✅](packages/ScrollReveal/README.md) |  |   |
+| [Content Placeholder ❏](packages/ContentPlaceholder/README.md) | [NativeSelect ✅](packages/NativeSelect/README.md) |  [DragDrop List ✅🔥](packages/DragDropList/README.md)  |  |  |
+| [Counter ❏](packages/Counter/README.md) | [Cascading Select ✅](packages/CascadingSelect/README.md) | [Mode Switch ✅](packages/ModeSwitch/README.md) |  |  |
+| [Hybrid Content Slider ❏](packages/HybridContentSlider/README.md) | [Cascading Select End-to-end ✅🔥](packages/CascadingSelectE2E/README.md) | [Custom Scrollbar ✅](packages/Scrollbar/README.md) |  |  |
+| [Image Shapes ❏](packages/ImageShapes/README.md) | [Radio ✅](packages/Radio/README.md) | [Horizontal Scroll Content ✅](packages/HorizontalScrollContent/README.md) |  |  |
+| [Lightbox ❏](packages/Lightbox/README.md) | [Checkbox ✅](packages/Checkbox/README.md) | [Refresher ✅](packages/Refresher/README.md) |  |  |
+| [List Bulleted ❏](packages/ListBulleted/README.md) | [Select ✅🔥](packages/Select/README.md) |  |  |  |
+| [Modal Dialog ✅🔥](packages/ModalDialog/README.md) | [Live Search ✅](packages/LiveSearch/README.md) |  |  |  |
+| [Pagination ✅](packages/Pagination/README.md) |  [File ✅](packages/File/README.md) |  |  |  |
+| [Table ✅🔥](packages/Table/README.md) | [SearchBar ✅](packages/SearchBar/README.md) |  |  |  |
+| [Periodical Scroll ❏](packages/PeriodicalScroll/README.md) | [Switch ✅](packages/Switch/README.md) |  |  |  |
+| [Progress Bar ❏](packages/ProgressBar/README.md) | [Dynamic Fields ✅🔥](packages/DynamicFields/README.md) |  |  |  |
+| [Rating ❏](packages/Rating/README.md) | [MultipleCheckboxes ✅](packages/MultipleCheckboxes/README.md) |  |  |  |
+| [Seamless Scrolling Element ❏](packages/SeamlessScrollingElement/README.md) | [MultipleSelect ✅🔥](packages/MultipleSelect/README.md)  |  |  |  |
+| [Show More Less ✅](packages/ShowMoreLess/README.md) | [Range Slider ✅](packages/RangeSlider/README.md) | |  |  |
+| [Slideshow ❏](packages/Slideshow/README.md) | [Color Picker ✅](packages/ColorPicker/README.md) |  |  |  |
+| [Tabs ✅](packages/Tabs/README.md) |  |  |  |  |
+| [Timeline ❏](packages/Timeline/README.md) | |  |  |  |
+| [Toast ✅](packages/Toast/README.md) |  |  |  |  |
+| [Tooltip ✅](packages/Tooltip/README.md) |  |  |  |  |
+| [Digital Clock ✅](packages/DigitalClock/README.md) |  |  |  |  |
+| [Tree ✅🔥](packages/Tree/README.md) |  |  |  |  |
+| [Event Calendar ✅🔥](packages/EventCalendar/README.md) |  |  |  |  |
+| [Event Calendar Timeline ✅🔥](packages/EventCalendarTimeline/README.md) |  |  |  |  |
+| [Chatbox ✅🔥🤖](packages/Chatbox/README.md) |  |  |  |  |
+| [Stepper ✅](packages/Stepper/README.md) |  |  |  |  |
+
+
+## Usage
+
+**Step 1**. You need to install it:
+
+```sh
+$ npm i funda-ui
+```
+
+**Step 2**. Using Bootstrap CSS together (recommended)
+
+```html
+<link href="./bootstrap.min.css" rel="stylesheet"/>
+```
+
+
+**Step 3**. import required components as required 
+
+> If the component does not have a CSS file, it can not be imported, or use own CSS.
+
+```js
+import Input from 'funda-ui/Input';
+import Textarea from 'funda-ui/Textarea';
+import CascadingSelect from 'funda-ui/CascadingSelect';
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+or 
+
+```js
+import { 
+    Input,
+    Textarea,
+    CascadingSelect
+} from 'funda-ui';
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+or
+
+```js
+const Input = require('funda-ui').Input;
+const Textarea = require('funda-ui').Textarea;
+const CascadingSelect = require('funda-ui').CascadingSelect;
+
+// component styles
+import 'funda-ui/CascadingSelect/index.css';
+```
+
+
+
+## Collecting Data
+
+### Basic
+
+Use `useState()` to store data.
+
+```js
+import React, { useState } from 'react';
+import Input from 'funda-ui/Input';
+import Select, { OptionConfig, MultiSelectValue } from 'funda-ui/Select';
+
+// component styles
+import 'funda-ui/Select/index.css';
+
+
+interface Config {
+    name: string;
+    role: boolean;
+}
+
+
+export default () => {
+    // Consolidated config state
+    const [config, setConfig] = useState<Config>({
+        name: '',
+        role: '',
+    });
+
+    const updateConfig = (newConfig: Partial<Config>) => {
+        setConfig(prev => ({ ...prev, ...newConfig }));
+    };
+    
+
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+        alert(`Name: ${config.name}, Role: ${config.role}`);
+    };
+
+    return (
+        <form onSubmit={handleSubmit}>
+            <div>
+
+                <Input
+                    name="name"
+                    label="Name"
+                    onChange={(e: React.MouseEvent, onComposition: any, el: any, value: string) => {
+                        updateConfig({ name: value });
+                    }}
+                />
+            </div>
+
+            <div>
+        
+                <Select
+                    label="Role"
+                    placeholder="Select"
+                    name="role"
+                    options={[
+                        {"label": "Admin","value": "admin","queryString": ""},
+                        {"label": "User","value": "user","queryString": ""}
+                    ]}
+                    onChange={(e: React.MouseEvent<HTMLElement> | React.KeyboardEvent<HTMLElement>, e2: HTMLElement, val: OptionConfig | MultiSelectValue): void => {
+                        updateConfig({ role: (val as OptionConfig).value });
+                    }}
+                />
+
+            </div>
+
+            <button className="btn btn-outline-primary btn-sm mb-2" type="submit">Submit</button>
+        </form>
+    );
+
+}
+```
+
+
+
+
+### Advanced
+
+Using vanilla JS to collect the value of name is faster and easier.
+
+
+```js
+import React, { useRef } from "react";
+import Input from 'funda-ui/Input';
+import Select, { OptionConfig, MultiSelectValue } from 'funda-ui/Select';
+
+// component styles
+import 'funda-ui/Select/index.css';
+
+// utils
+import { serializeArray } from 'funda-ui/Utils/formdata';
+import { isEmpty } from "funda-ui/Utils/validate";
+
+interface FormField {
+    name: string;
+    value: string;
+}
+
+interface FormData {
+    [key: string]: string;
+}
+
+type CallbackFunction = (formData: FormData) => void;
+type ErrorCallbackFunction = () => void;
+
+function customValidate(
+    form: HTMLFormElement | HTMLDivElement | null,
+    callback?: CallbackFunction,
+    errCallback?: ErrorCallbackFunction
+): void {
+    if (form === null) return;
+
+    const formData: FormData = {};
+    const fieldsData: FormField[] = serializeArray(form);
+    let fieldsCheck: boolean = true;
+    let customFieldsCheck: boolean = true;
+
+    // Step 1: everything is ok  
+    //-------------
+    // required fields
+    const emptyFieldsCheck = fieldsData.every((item: FormField) => {
+        if (item.name !== null && item.name !== '') {
+            formData[item.name] = item.value;
+
+            const _field = form.querySelector<HTMLElement>(`[name="${item.name}"]`);
+            if (!_field) return true;
+
+            const fieldRequired = _field.getAttribute('required');
+            if (fieldRequired !== null && fieldRequired !== 'false') {
+                if (item.value === '' || isEmpty(item.value)) {
+                    const _label = _field.dataset.requiredTitle;
+                    alert(`${_label} cannot be empty!`);
+                    return false;
+                }
+            }
+        }
+
+        errCallback?.();
+
+        return true;
+    });
+
+    //  merged result
+    fieldsCheck = [emptyFieldsCheck, customFieldsCheck].every((item: boolean) => {
+        return item;
+    });
+
+    // Step 2: everything is ok  
+    //-------------
+    if (fieldsCheck) {
+        callback?.(formData);
+    }
+}
+
+
+
+export default () => {
+    const formRef = useRef<HTMLDivElement>(null);
+
+    const handleSubmit = (e: React.MouseEvent<HTMLButtonElement>) => {
+        e.preventDefault();
+   
+        customValidate(
+            formRef.current, 
+            (formData: any[]) => {
+                alert(JSON.stringify(formData));
+            },
+            () => { }
+        );
+
+    };
+
+    return (
+        <div ref={formRef}>
+            <div>
+
+                <Input
+                    name="name"
+                    label="Name"
+                />
+            </div>
+
+            <div>
+        
+                <Select
+                    label="Role"
+                    placeholder="Select"
+                    name="role"
+                    options={[
+                        {"label": "Admin","value": "admin","queryString": ""},
+                        {"label": "User","value": "user","queryString": ""}
+                    ]}
+                />
+
+            </div>
+
+            <button className="btn btn-outline-primary btn-sm mb-2" type="button" onClick={handleSubmit}>Submit</button>
+        </div>
+    );
+
+}
+```
+
+
+## Licensing
+
+Licensed under the [MIT](https://opensource.org/licenses/MIT).
+

package/publish/lib/cjs/Accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as Accordion } from './Accordion';
+export { default as AccordionItem } from './AccordionItem';