5htp-core 0.4.9-97 → 0.4.9-98

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.9-97",
+	"version": "0.4.9-98",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",

package/src/client/assets/css/components/button.less

@@ -11,8 +11,8 @@
 
     // Layout
     position: relative;
-    gap: @spacing;
-    min-width: 0/*fit-content*/; // Fit content, even when flexbox parent width < content width
+    gap: @spacing / 2;
+    min-width: @sizeComponent; // Wdth should be < height
  
     // Dimensions
     font-size: 1em;
@@ -29,8 +29,7 @@
 
     // Colors
     // NOTE: transparent by default (menu items, etc..)
-    background: transparent;
-    color: var(--cTxtAccent);  
+    background: var(--cBg);
         
     // Hover
     //transition: all .5s linear;
@@ -38,6 +37,7 @@
     li:hover > & {
 
         color: var(--cTxtImportant);
+        background: var(--cBgActive);
         //transition: all .1s linear;
         
         > i {
@@ -77,9 +77,14 @@
         }
     }
 
+    &.selected {
+        background: var(--cBgSelected);
+        color: #fff;
+    }
+
     // Click
     &.pressed {
-        transform: scale(0.9);
+        background: var(--cBgPressed) !important;
     }
 
     &,
@@ -149,6 +154,11 @@
 
     }
 
+    &:not(.bg) {
+
+        color: var(--cTxtAccent);
+    }
+
     /*----------------------------------
     - STATE
     ----------------------------------*/
@@ -231,7 +241,7 @@
     // Give less imortance to buttons which are in lists
     color: var(--cTxtBase);  
     box-shadow: none;
-    //width: 100%;
+    padding: 0 1em; // Row display = more condensed
 
     &.active,
     &:hover {
@@ -239,14 +249,6 @@
         color: var(--cTxtImportant);
     }
 
-    > .label {
-        // All the list items label must be aligned
-        justify-content: flex-start;
-        // Since they're all horizontally aligned,
-        // Label = max width, so icon right are also aligned to right
-        flex: 1;
-    }
-
     &.icon {
 
         color: var(--cTxtDesc);
@@ -273,6 +275,20 @@
     }
 }
 
+.col {
+    &.menu > .btn, 
+    &.menu > li > .btn {
+
+        > .label {
+            // All the list items label must be aligned
+            justify-content: flex-start;
+            // Since they're all horizontally aligned,
+            // Label = max width, so icon right are also aligned to right
+            flex: 1;
+        }
+    }
+}
+
 ul.col,
 ul.row {
 

package/src/client/assets/css/theme.less

@@ -19,9 +19,7 @@
         // Default theming for the children components
         @{componentsSelector} {
             // Don't apply the default theme to already themed components
-            &:not(.bg) {
-                .apply-theme-style( @componentsTheme, false, false );
-            }
+            .apply-theme-style( @componentsTheme, false, false );
         }
     }
 }
@@ -35,15 +33,23 @@
     @bgActive: if( (@theme[alpha]) or (alpha(@bg) < 1),
         fadeout( @bg, 90%),
         if( @isLight, 
-            @bg - #040404, 
+            @bg - #0A0A0A, 
             @bg + #111, 
         )
     );
+    @bgPressed: if( (@theme[alpha]) or (alpha(@bg) < 1),
+        fadeout( @bg, 80%),
+        if( @isLight, 
+            @bg - #1A1A1A, 
+            @bg + #222, 
+        )
+    );
     @fg: @theme[foreground];
 
     // Background
     --cBg: @bg; 
     --cBgActive: @bgActive;
+    --cBgPressed: @bgPressed;
     & when (@apply = true) {
         background: var(--cBg);
     }
@@ -51,6 +57,7 @@
     // Accent
     & when (@theme[accent1]) {
         --cTxtAccent: @theme[accent1];
+        --cBgSelected: @@theme[accent1];
     }
     & when (@theme[accent2]) {
         --cTxtAccent2: @theme[accent2];

package/src/client/assets/css/utils/layouts.less

@@ -140,8 +140,11 @@
         }
     }
 
+    // Put this one at first because high possibilities we need to override
+    &.al-middle, 
+    &.al-center { justify-content: center; }
+
     &, &.al-top { justify-content: flex-start; }
-    &.al-middle, &.al-center { justify-content: center; }
     &.al-bottom { justify-content: flex-end; }
 
     &.al-left { align-items: flex-start; }

package/src/client/components/Select/ChoiceElement.tsx

@@ -20,7 +20,7 @@ import type { Props } from '.';
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export default ({ choice, currentList, onChange, multiple, includeCurrent, format = 'badge' }: {
+export default ({ choice, currentList, onChange, multiple, required, includeCurrent, format = 'badge' }: {
     choice: Choice,
     currentList: Choice[],
     includeCurrent?: boolean,
@@ -30,37 +30,36 @@ export default ({ choice, currentList, onChange, multiple, includeCurrent, forma
     const isCurrent = currentList.some(c => c.value === choice.value);
     if (isCurrent && !includeCurrent) return null;
 
-    const showRemoveButton = multiple;
+    const canUnselect = !required || currentList.length > 1;
+
+    const onClick = () => {
+
+        if (isCurrent && !canUnselect)
+            return;
+
+        onChange( current => multiple 
+            ? (isCurrent 
+                ? currentList.filter(item => item.value !== choice.value) 
+                : [...(current || []), choice]
+            )
+            : isCurrent ? undefined : choice
+        );
+    }
 
     return format === 'list' ? (
         <li>
-            <Button active={isCurrent} onClick={() => onChange( current => multiple 
-                ? (isCurrent 
-                    ? currentList.filter(item => item.value !== choice.value) 
-                    : [...(current || []), choice]
-                )
-                : isCurrent ? undefined : choice
-            )}>
+            <Button selected={isCurrent} onClick={onClick}>
                 {choice.label} 
             </Button>
         </li>
     ) : (
         <li>
-            <Button type="secondary" active={isCurrent} onClick={() => onChange(current => multiple
-                ? (isCurrent
-                    ? currentList.filter(item => item.value !== choice.value)
-                    : [...(current || []), choice]
-                )
-                : isCurrent ? undefined : choice
-            )}>
+            <Button type="secondary" selected={isCurrent} onClick={onClick}>
+
                 {choice.label}
 
-                {showRemoveButton && (
-                    <span class="badge xs clickable" onClick={(e) => {
-                        e.stopPropagation();
-                        onChange( current => current.filter( c => c.value !== choice.value))
-                        return false;
-                    }}>
+                {(isCurrent && canUnselect) && (
+                    <span class="badge xs clickable">
                         x
                     </span>
                 )}

package/src/client/components/Select/index.tsx

@@ -165,6 +165,7 @@ export default (props: Props) => {
     ----------------------------------*/
 
     const selectedItems = enableSearch ? currentList : []
+    const selectedItemsValue = selectedItems.map( c => c.value);
 
     const Search = enableSearch && (
         <Input  
@@ -197,6 +198,7 @@ export default (props: Props) => {
                                         currentList={currentList}
                                         onChange={onChange}
                                         multiple={multiple}
+                                        required={required}
                                         includeCurrent 
                                     />
                                 ))}
@@ -214,6 +216,7 @@ export default (props: Props) => {
                                         currentList={currentList}
                                         onChange={onChange}
                                         multiple={multiple}
+                                        required={required}
                                         includeCurrent
                                     />
                                 ))} 
@@ -229,7 +232,7 @@ export default (props: Props) => {
                         )}
                     </div>
                 )} state={popoverState}>
-                    <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
+                    <Button icon={icon} iconR="angle-down" {...otherProps}>
 
                         {currentList.length === 0 ? <>
                             {title}
@@ -239,51 +242,37 @@ export default (props: Props) => {
                             {currentList[0].label}
                         </>}
 
-                        {errors?.length && (
-                            <div class="bubble bg error bottom">
-                                {errors.join('. ')}
-                            </div>
-                        )}
-
                     </Button>
                 </Popover>
             ) : (
-                <div class="col sp-05">
-                    <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
-
-                        <div class="row al-left wrap sp-05">
-
-                            {selectedItems.map( choice => (
-                                <ChoiceElement format='badge' choice={choice} 
-                                    currentList={currentList}
-                                    onChange={onChange}
-                                    multiple={multiple}
-                                    includeCurrent 
-                                />
-                            ))} 
-
-                            {Search}  
-                        </div>
-
-                        <ul class="row al-left wrap sp-05" style={{
-                            maxHeight: '30vh',
-                        }}>
-                            {choices.map( choice => (
-                                <ChoiceElement format='badge' choice={choice} 
-                                    currentList={currentList}
-                                    onChange={onChange}
-                                    multiple={multiple}
-                                    includeCurrent
-                                />
-                            ))}
-                        </ul>
-                        
-                    </div>
-                    {errors?.length && (
-                        <div class="bubble bg error bottom">
-                            {errors.join('. ')}
-                        </div>
-                    )}
+                <div class={className} onMouseDown={() => refInputSearch.current?.focus()}>
+
+                    {Search}  
+
+                    <ul class="row al-left wrap sp-05 scrollable mgt-1" style={{
+                        maxHeight: '30vh',
+                    }}>
+                        {selectedItems.map( choice => (
+                            <ChoiceElement format='badge' choice={choice} 
+                                currentList={currentList}
+                                onChange={onChange}
+                                multiple={multiple}
+                                required={required}
+                                includeCurrent 
+                            />
+                        ))}
+
+                        {choices.map( choice => !selectedItemsValue.includes(choice.value) && (
+                            <ChoiceElement format='badge' choice={choice} 
+                                currentList={currentList}
+                                onChange={onChange}
+                                multiple={multiple}
+                                required={required}
+                                includeCurrent
+                            />
+                        ))}
+                    </ul>
+                    
                 </div>
             )}
         </InputWrapper>

package/src/client/components/button.tsx

@@ -35,6 +35,7 @@ export type Props = {
 
     state?: [string, React.StateUpdater<string>],
     active?: boolean,
+    selected?: boolean,
     disabled?: boolean,
     loading?: boolean,
     autoFocus?: boolean,
@@ -92,6 +93,7 @@ export default ({
 
     // Interactions
     active,
+    selected,
     state: stateUpdater,
     disabled,
     loading,
@@ -106,7 +108,8 @@ export default ({
 }: Props) => {
 
     const ctx = useContext();
-    let [isActive, setIsSelected] = React.useState(false);
+    let [isSelected, setIsSelected] = React.useState(false);
+    let [isActive, setIsActive] = React.useState(false);
     const [isLoading, setLoading] = React.useState(false);
 
     if (isLoading || loading) {
@@ -118,29 +121,28 @@ export default ({
     if (stateUpdater && id !== undefined) {
         const [active, setActive] = stateUpdater;
         if (id === active)
-            isActive = true;
+            isSelected = true;
         props.onClick = () => setActive(id);
     }
 
     // Shape classes
-    className = className === undefined ? 'btn' : 'btn ' + className;
+    const classNames: string[] = ['btn'];
+    if (className)
+        classNames.push(className);
 
     if (shape !== undefined) {
         if (shape === 'tile')
-            className += ' col';
+            classNames.push('col');
         else
-            className += ' ' + shape;
+            classNames.push(shape);
     }
 
     if (size !== undefined)
-        className += ' ' + size;
-
-    if (type !== undefined)
-        className += type === 'link' ? type : (' bg ' + type);
+        classNames.push(size);
 
     if (icon) {
         if (children === undefined)
-            className += ' icon';
+            classNames.push('icon');
     }
 
     // state classes
@@ -148,11 +150,17 @@ export default ({
     props.onMouseDown = () => setMouseDown(true);
     props.onMouseUp = () => setMouseDown(false);
     props.onMouseLeave = () => setMouseDown(false);
-    if (isMouseDown)
-        className += ' pressed';
 
+    // Theming & state
+    if (isMouseDown)
+        classNames.push('pressed');
+    else if (selected || isSelected === true)
+        classNames.push('bg accent');
+    else if (type !== undefined)
+        classNames.push(type === 'link' ? type : (' bg ' + type));
+    
     if (active || isActive === true)
-        className += ' active';
+        classNames.push('active');
 
     // Icon
     if (prefix === undefined && icon !== undefined)
@@ -180,12 +188,12 @@ export default ({
 
                     // Init
                     if (checkIfCurrentUrl(ctx.request.path))
-                        setIsSelected(true);
+                        setIsActive(true);
 
                     // On location change
                     return history?.listen(({ location }) => {
 
-                        setIsSelected( checkIfCurrentUrl(location.pathname) );
+                        setIsActive( checkIfCurrentUrl(location.pathname) );
     
                     })
 
@@ -207,7 +215,7 @@ export default ({
     }
 
     let render: VNode = (
-        <Tag {...props} id={id} class={className} disabled={disabled} ref={refElem} onClick={(e: MouseEvent) => {
+        <Tag {...props} id={id} class={classNames.join(' ')} disabled={disabled} ref={refElem} onClick={(e: MouseEvent) => {
 
             // annulation si:
             // - Pas clic gauche

package/src/client/components/dropdown/index.tsx

@@ -53,7 +53,7 @@ export default (props: Props) => {
             </div>
         )} state={popoverState} {...(popover || {})}>
 
-            <Button {...buttonProps} iconR={<i src="chevron-down" class="s" />} 
+            <Button {...buttonProps} iconR={<i src="angle-down" class="s" />} 
                 refElem={refButton} children={label} />
                 
         </Popover>

package/src/client/components/input/Slider/index.tsx

@@ -87,10 +87,5 @@ export default ({
                 />
             </div>
         </div>
-        {errors?.length && (
-            <div class="bubble bg error bottom">
-                {errors.join('. ')}
-            </div>
-        )}
     </>
 }

package/src/client/components/inputv3/Checkbox/index.tsx

@@ -75,11 +75,5 @@ export default ({
             )}
             
         </div>
-        
-        {errors?.length && (
-            <div class="bubble bg error bottom">
-                {errors.join('. ')}
-            </div>
-        )}
     </>
 }

package/src/client/components/inputv3/Rte/index.tsx

@@ -135,12 +135,6 @@ export default (props: Props & InputBaseProps<string>) => {
                         }
                     }}
                 /> */}
-
-                {errors?.length && (
-                    <div class="bubble bg error bottom">
-                        {errors.join('. ')}
-                    </div>
-                )}
             </div>
         </InputWrapper>
     )

package/src/client/components/inputv3/Rte/plugins/TableActionMenuPlugin/index.tsx

@@ -735,7 +735,7 @@ function TableCellActionMenuContainer({
                             setIsMenuOpen(!isMenuOpen);
                         }}
                         ref={menuRootRef}>
-                        <i className="chevron-down" />
+                        <i className="angle-down" />
                     </button>
                     
                     {isMenuOpen && (

package/src/client/components/inputv3/Rte/ui/DropDown.tsx

@@ -244,7 +244,7 @@ export default function DropDown({
                 {buttonLabel && (
                     <span className="text dropdown-button-text">{buttonLabel}</span>
                 )}
-                <i className="chevron-down" />
+                <i className="angle-down" />
             </button>
 
             {showDropDown &&

package/src/client/components/inputv3/base.less

@@ -27,33 +27,8 @@
     }
 }
 
-.input {
-    &.text,
-    &.select {
-
-        background: var(--cBg);
-        border-radius: @radius;
-
-        > i {
-            color: var(--cTxtDesc);
-        }
-    }
-
-    // Error bubble
-    position: relative;
-}
-
 .input.select {
-
-    padding: 0;
-
-    .input.text {
-        border: none;
-        box-shadow: none;
-        padding: 0;
-        height: auto;
-        width: 150px;
-    }
+    
 }
 
 .input.text {
@@ -68,9 +43,23 @@
     // Since they are not supposed to be on the same row (mobile first design)
     height: @hInput;
     align-items: center;
+    
+    background: var(--cBg);
+    border-radius: @radius;
+    transition: background .1s linear;
+
+    > i {
+        color: var(--cTxtDesc);
+    }
 
-    --cBg2: #eee;
-    //box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
+    &:hover {
+        background: var(--cBgActive);
+    }
+
+    &.focus {
+        background: #fff;
+        box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
+    }
 
     @gapAround: @spacing;
     > .btn:first-child { margin-left: 0 - @gapAround / 2; }

package/src/client/components/inputv3/base.tsx

@@ -96,7 +96,7 @@ export function useInput<TValue>(
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
-export const InputWrapper = ({ children, wrapper = true, title, hint, required, className = '' }: InputBaseProps<unknown> & {
+export const InputWrapper = ({ children, wrapper = true, title, hint, required, errors, className = '' }: InputBaseProps<unknown> & {
     children: ComponentChild
 }) => {
 
@@ -123,6 +123,12 @@ export const InputWrapper = ({ children, wrapper = true, title, hint, required,
             {hint && <p class="hint">{hint}</p>}
 
             {children}
+
+            {errors?.length && (
+                <div class="bubble bg error bottom">
+                    {errors.join('. ')}
+                </div>
+            )}
             
         </div>
     )

package/src/client/components/inputv3/index.tsx

@@ -200,12 +200,6 @@ export default (props: Props & InputBaseProps<string> & TInputElementProps) => {
                 </div>
 
                 {suffix}
-                    
-                {errors?.length && (
-                    <div class="bubble bg error bottom">
-                        {errors.join('. ')}
-                    </div>
-                )}
                 
             </div>
         </InputWrapper>