funda-ui 4.5.666 → 4.5.671

package/lib/esm/ColorPicker/index.tsx

@@ -137,59 +137,63 @@ const ColorPicker = forwardRef((props: ColorPickerProps, externalRef: any) => {
             )} ref={rootRef}>
                 {label ? <>{typeof label === 'string' ? <label htmlFor={idRes} className="form-label" dangerouslySetInnerHTML={{ __html: `${label}` }}></label> : <label htmlFor={idRes} className="form-label">{label}</label>}</> : null}
 
+                <div className="position-relative">
                 <div className="input-group">
-                    <input
-                        ref={(node) => {
-                            valRef.current = node;
-                            if (typeof externalRef === 'function') {
-                                externalRef(node);
-                            } else if (externalRef) {
-                                externalRef.current = node;
-                            }
-                        }}
-
-                        
-                        tabIndex={tabIndex || 0}
-                        type='color'
-                        className={combinedCls(
-                            clsWrite(controlClassName, 'form-control custom-colorpicker-control flex-grow-0'),
-                            controlExClassName
-                        )}
-                        value={changedVal}
-                        onFocus={handleFocus}
-                        onBlur={handleBlur}
-                        onChange={handleChange}
-                        disabled={disabled || null}
-                        readOnly={readOnly || null}
-                        style={style}
-                        {...attributes}
-                    />
-
-                    {/* Prevents the color from automatically becoming #000000 when it is empty */}
-                    <input
-                        tabIndex={-1}
-                        type="hidden"
-                        id={idRes}
-                        name={name}
-                        value={changedVal}  // do not use `defaultValue`
-                        onChange={() => void(0)}
-                        required={required || null}
-                        {...attributes}
-                    />
-
-                    {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={(e: React.MouseEvent) => {
-                        setChangedVal('');
-                        onChange?.(e);
-                        onClear?.(e);
-                    }}>{clearBtnLabel || 'clear'}
-                    </button></> : null}
-
+                        <input
+                            ref={(node) => {
+                                valRef.current = node;
+                                if (typeof externalRef === 'function') {
+                                    externalRef(node);
+                                } else if (externalRef) {
+                                    externalRef.current = node;
+                                }
+                            }}
+
+                            
+                            tabIndex={tabIndex || 0}
+                            type='color'
+                            className={combinedCls(
+                                clsWrite(controlClassName, 'form-control custom-colorpicker-control flex-grow-0'),
+                                controlExClassName
+                            )}
+                            value={changedVal}
+                            onFocus={handleFocus}
+                            onBlur={handleBlur}
+                            onChange={handleChange}
+                            disabled={disabled || null}
+                            readOnly={readOnly || null}
+                            style={style}
+                            {...attributes}
+                        />
+
+                        {/* Prevents the color from automatically becoming #000000 when it is empty */}
+                        <input
+                            tabIndex={-1}
+                            type="hidden"
+                            id={idRes}
+                            name={name}
+                            value={changedVal}  // do not use `defaultValue`
+                            onChange={() => void(0)}
+                            required={required || null}
+                            {...attributes}
+                        />
+
+                        {changedVal !== '' ? <><button tabIndex={-1} type="button" className={clearBtnClassName || 'btn btn-link btn-sm'} onClick={(e: React.MouseEvent) => {
+                            setChangedVal('');
+                            onChange?.(e);
+                            onClear?.(e);
+                        }}>{clearBtnLabel || 'clear'}
+                        </button></> : null}
+
+
+                    </div>
+                    {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
+
+                    {changedVal === '' ? <><div className="custom-colorpicker__transparent-placeholder"></div></> : null}
 
                 </div>
-                {required ? <>{requiredLabel || requiredLabel === '' ? requiredLabel : <span className="position-absolute end-0 top-0 my-2 mx-2"><span className="text-danger">*</span></span>}</> : ''}
-
-                {changedVal === '' ? <><div className="custom-colorpicker__transparent-placeholder"></div></> : null}
 
+                
             </div>
 
 

package/lib/esm/DragDropList/index.scss

@@ -0,0 +1,245 @@
+/* ======================================================
+    <!-- DragDrop List -->
+/* ====================================================== */
+.custom-draggable-list {
+
+    --custom-draggable-content-bg: transparent;
+    --custom-draggable-content-color: inherit;
+    --custom-draggable-border-color: #ddd;
+    --custom-draggable-wrapper-radius: 0.25rem;
+    --custom-draggable-control-radius: 0.25rem;
+    --custom-draggable-primary-color: #ffa940;
+    --custom-draggable-content-diff-bg: #fafafa;
+    --custom-draggable-content-diff-border-color: #d9d9d9;
+    --custom-draggable-control-fs: 0.75rem;
+    --custom-draggable-control-w: 100px;
+    --custom-draggable-btn-confirm-bg: #52c41a;
+    --custom-draggable-btn-cancel-bg: #ff4d4f;
+    --custom-draggable-btn-color: #fff;
+
+
+    list-style: none;
+    padding: 0;
+    margin: 0;
+    width: 100%;
+    position: relative;
+    border: 1px solid var(--custom-draggable-border-color);
+    border-radius: var(--custom-draggable-wrapper-radius);
+
+    li {
+        margin: 0;
+        padding: 0;
+    }
+
+    .custom-draggable-list__item {
+        padding: 0;
+        position: relative;
+        transition: transform 0.15s ease;
+        position: relative;
+
+        .custom-draggable-list__itemcontent {
+            padding: 10px 15px;
+            background: var(--custom-draggable-content-bg);
+            color: var(--custom-draggable-content-color);
+            border-bottom: 1px solid var(--custom-draggable-border-color);
+            display: flex;
+            align-items: center;
+            user-select: none;
+            transition: all 0.15s ease;
+
+            .custom-draggable-list__itemcontent-inner {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+                
+            }
+        }
+
+        &:last-child {
+            .custom-draggable-list__itemcontent {
+                border-bottom: none;
+            }
+        }
+
+        &.disabled {
+            pointer-events: none !important;
+            opacity: .4 !important;
+        }
+    }
+
+    &.alternate-collapse {
+        .custom-draggable-list__collapse-arrow {
+            cursor: pointer;
+            display: inline-block;
+            width: 20px;
+            text-align: center;
+            user-select: none;
+            margin-left: .2rem;
+            
+            svg {
+                transition: all 0.15s ease;
+            }
+
+            &:hover {
+                opacity: 0.7;
+            }
+        }
+
+        .custom-draggable-list__item {
+            &.has-children {
+                position: relative;
+            }
+
+            &.collapsed {
+                .custom-draggable-list__collapse-arrow svg {
+                    transform: rotate(-90deg);
+                }
+            }
+        }
+    }
+
+    .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent {
+        padding-left: 1.5em;
+    }
+
+
+    &.handle-pos-right .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent,
+    &.icon-hide .custom-draggable-list__item.draggable .custom-draggable-list__itemcontent {
+        padding-left: .5rem;
+    }
+
+
+    .custom-draggable-list__item {
+        &.block.draggable {
+            cursor: move;
+        }
+
+        &.dragging .custom-draggable-list__itemcontent {
+            background: #fff9e6;
+            border: 1px dashed #ffd591;
+            opacity: 0.8;
+        }
+
+        &.drag-over .custom-draggable-list__itemcontent {
+            background: #fff9e6;
+            border: 2px solid #ffd591;
+        }
+
+        &.drag-over-top::before {
+            content: '';
+            position: absolute;
+            top: -3px;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: var(--custom-draggable-primary-color);
+            border-radius: 1px;
+        }
+
+        &.drag-over-bottom::after {
+            content: '';
+            position: absolute;
+            bottom: -3px;
+            left: 0;
+            right: 0;
+            height: 2px;
+            background: var(--custom-draggable-primary-color);
+            border-radius: 1px;
+        }
+    }
+
+    /* Fix the problem that mobile terminals cannot be touched, DO NOT USE "<svg>" */
+    .custom-draggable-list__handle {
+        color: #999;
+        padding: 5px;
+        cursor: move;
+        transition: color 0.15s ease;
+        position: absolute;
+        width: 1em;
+        height: 1em;
+        top: 50%;
+        transform: translateY(-50%);
+        z-index: 1;
+        display: flex;
+        align-items: center;
+        font-size: 0.75rem;
+
+        &.left {
+            left: 0;
+        }
+
+        &.right {
+            right: 1em;
+        }
+    }
+
+    .custom-draggable-list__item,
+    .custom-draggable-list__itemcontent {
+        transition: all 0.15s ease;
+    }
+
+
+    .custom-draggable-list__item {
+        &.editing .custom-draggable-list__itemcontent,
+        &:hover .custom-draggable-list__itemcontent {
+            background: var(--custom-draggable-content-diff-bg);
+            border-color: var(--custom-draggable-content-diff-border-color);
+        }
+        
+
+        &.block:hover .custom-draggable-list__handle {
+            color: var(--custom-draggable-primary-color);
+        }
+
+    }    
+
+    &.handle .custom-draggable-list__handle:hover {
+        color: var(--custom-draggable-primary-color);
+    }
+
+    /* FORM */
+    .custom-draggable-list__edit-form {
+        display: flex;
+        flex: 1;
+        gap: 10px;
+        align-items: center;
+
+        input {
+            padding: 4px 8px;
+            border: 1px solid var(--custom-draggable-border-color);
+            border-radius: var(--custom-draggable-control-radius);
+            font-size: var(--custom-draggable-control-fs);
+            width: var(--custom-draggable-control-w);
+        }
+    }
+
+    .custom-draggable-list__edit-buttons {
+        display: flex;
+        gap: 5px;
+
+        button {
+            padding: .2rem .5rem;
+            border: none;
+            font-size: 0.75rem;
+            border-radius: var(--custom-draggable-control-radius);
+            cursor: pointer;
+    
+            &:first-child {
+                background: var(--custom-draggable-btn-confirm-bg);
+                color: var(--custom-draggable-btn-color);
+            }
+
+            &:last-child {
+                background: var(--custom-draggable-btn-cancel-bg);
+                color: var(--custom-draggable-btn-color);
+            }
+
+            &:hover {
+                opacity: 0.8;
+            }
+        }
+    }
+
+}
+