5htp-core 0.4.6 → 0.4.7-2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "5htp-core",
 	"description": "Convenient TypeScript framework designed for Performance and Productivity.",
-	"version": "0.4.6",
+	"version": "0.4.7-2",
 	"author": "Gaetan Le Gac (https://github.com/gaetanlegac)",
 	"repository": "git://github.com/gaetanlegac/5htp-core.git",
 	"license": "MIT",
@@ -13,6 +13,9 @@
 		"framework"
 	],
 	"dependencies": {
+		"@lexical/headless": "^0.18.0",
+		"@lexical/html": "^0.18.0",
+		"@lexical/react": "^0.18.0",
 		"accepts": "^1.3.7",
 		"activity-detector": "^3.0.0",
 		"ansi-to-html": "^0.7.1",
@@ -44,7 +47,9 @@
 		"intl": "^1.2.5",
 		"iso-639-1": "^2.1.9",
 		"js-cookie": "^3.0.1",
+		"jsdom": "^25.0.1",
 		"jsonwebtoken": "^8.5.1",
+		"lexical": "^0.18.0",
 		"load-script": "^2.0.0",
 		"locale": "^0.1.0",
 		"markdown-it": "^13.0.1",

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

@@ -1,5 +1,6 @@
 .table {
     overflow: auto;
+    max-height: 90vh;
 
     > table {
         border-collapse: collapse;
@@ -13,7 +14,7 @@
     }
 
     &.card {
-        padding: 1em 0;
+        padding: 0;
     }
 }
 
@@ -26,7 +27,7 @@ table {
 
     // By default, chrome disables text inherits
     line-height: inherit;
-    font-size: inherit;
+    font-size: 0.9em;
 
     th {
         font-weight: 500;
@@ -38,8 +39,8 @@ table {
         padding: 1em 1em;
         text-align: left;
 
-        + td, th {
-            border-left: solid 1px #F5F5F5
+        &:not(:last-child) {
+            border-right: solid 1px #F5F5F5;
         }
 
         &:first-child {
@@ -50,6 +51,29 @@ table {
             padding-right: 2em;
             text-align: right;
         }
+
+        &.stickyColumn {
+            position: sticky;
+            background: var(--cBg);
+            white-space: break-spaces;
+            z-index: 1;
+
+            &:first-child {
+                left: 0;
+            }
+
+            &:last-child {
+                right: 0;
+            }
+        }
+    }
+
+    thead {
+        position: sticky;
+        top: 0;
+        background: var(--cBg);
+        white-space: break-spaces;
+        z-index: 5;
     }
 
     tbody {
@@ -57,11 +81,45 @@ table {
         td, th {
             vertical-align: middle;
             border-top: solid 1px var(--cLine);
+            position: relative;
+        }
+
+        // Rows: Crop when too long
+        td {
+
+            cursor: default;
+
+            &.extendable > .row {
+
+                max-width: 20em;
+                overflow: hidden;
+                justify-content: flex-start;
+
+                &::after {
+                    content: ' ';
+                    display: block;
+                    position: absolute;
+
+                    top: 0;
+                    right: 0;
+                    width: 30%;
+                    height: 100%;
+
+                    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--cBg));
+                }
+
+                > * {
+                    flex-shrink: 0;
+                }
+
+                > .badge {
+                    font-size: 0.8em;
+                }
+            }
         }
 
-        &.actuel td {
-            background: var(--cPrincipale);
-            color: #fff;
+        tr:hover > td {
+            background: #FAFAFA;
         }
     }
 
@@ -112,4 +170,9 @@ table {
             }
         }
     }*/
+}
+
+.modal .tableCellExtended .row {
+    flex-wrap: wrap;
+    justify-content: flex-start;
 }

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

@@ -18,9 +18,7 @@ import type { TDialogControls } from '@client/components/dropdown';
 
 export type Choice = { label: ComponentChild, value: string }
 
-export type Choices = Choice[]
-
-type ChoicesFunc = (search: string) => Promise<Choices>
+type ChoicesFunc = (search: string) => Promise<Choice[]>
 
 export type Props = (
     {
@@ -37,10 +35,13 @@ export type Props = (
         validator?: StringValidator
     }
 ) & {
-    choices: Choices | ChoicesFunc,
+    choices: Choice[] | ChoicesFunc | string[],
     enableSearch?: boolean,
     required?: boolean,
     noneSelection?: false | string,
+}
+
+type SelectorProps = Props & {
     currentList: Choice[],
     refDropdown?: RefObject<TDialogControls>
 }
@@ -67,7 +68,7 @@ export default React.forwardRef<HTMLDivElement, Props>(({
     currentList,
     refDropdown,
     ...otherProps
-}: Props, ref) => {
+}: SelectorProps, ref) => {
 
    
 

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

@@ -8,6 +8,7 @@ import React from 'react';
 // Core
 import { Props as DropdownProps } from '@client/components/dropdown';
 import { Popover, Button, Input } from '@client/components';
+import { InputWrapper, InputBaseProps } from '@client/components/inputv3/base';
 
 // Specific
 import { 
@@ -21,10 +22,8 @@ import ChoiceElement from './ChoiceElement';
 - TYPES
 ----------------------------------*/
 
-export type Props = SelectorProps & {
-    dropdown: boolean | DropdownProps,
-    title: string,
-    errors?: string[],
+export type Props = SelectorProps & Omit<InputBaseProps<Choice>, 'value'> & {
+    dropdown?: boolean | DropdownProps,
 }
 
 export type { Choice } from './ChoiceSelector';
@@ -51,24 +50,27 @@ const ensureChoice = (choice: Choice | string, choices: Choice[]): Choice => {
 /*----------------------------------
 - COMONENT
 ----------------------------------*/
-export default ({ 
-    // Input basics
-    title, 
-    errors,
-    icon,
-    required,
-    validator, 
-
-    // Choice selection
-    choices: initChoices, 
-    noneSelection, 
-    enableSearch, 
-    value: current, 
-    onChange: onChangeCallback, 
-    multiple, 
-    dropdown,
-    ...otherProps
-}: Props) => {
+export default (props: Props) => {
+
+    let {
+        // Input basics
+        title,
+        errors,
+        icon,
+        required,
+        validator,
+        wrapper = true,
+
+        // Choice selection
+        choices: initChoices,
+        noneSelection,
+        enableSearch,
+        value: current,
+        onChange: onChangeCallback,
+        multiple,
+        dropdown,
+        ...otherProps
+    } = props;
 
     /*----------------------------------
     - INIT
@@ -77,8 +79,10 @@ export default ({
     const popoverState = React.useState(false);
 
     const choicesViaFunc = typeof initChoices === 'function';
-    if (choicesViaFunc && enableSearch === undefined)
+    if (choicesViaFunc)
         enableSearch = true;
+    else if (typeof initChoices[0] === 'string')
+        initChoices = initChoices.map( c => ({ label: c, value: c }));
 
     const refInputSearch = React.useRef<HTMLInputElement | null>(null);
 
@@ -159,119 +163,122 @@ export default ({
         />
     )
 
-    return dropdown ? (
-        <Popover {...(dropdown === true ? {
-            width: '200px'
-        } : dropdown)} content={(
-            <div class="card bg white col al-top">
-
-                {Search} 
-
-                {selectedItems.length !== 0 && (
-                    <ul class="row al-left wrap sp-05">
-                        {selectedItems.map( choice => (
-                            <ChoiceElement format='badge' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent 
-                            />
-                        ))}
-                    </ul>
-                )}
-
-                {search.loading ? (
-                    <div class="row al-center h-2">
-                        <i src="spin" />
+    return (
+        <InputWrapper {...props}>
+            {dropdown ? (
+                <Popover {...(dropdown === true ? {
+                    width: '200px'
+                } : dropdown)} content={(
+                    <div class="card bg white col al-top">
+
+                        {Search} 
+
+                        {selectedItems.length !== 0 && (
+                            <ul class="row al-left wrap sp-05">
+                                {selectedItems.map( choice => (
+                                    <ChoiceElement format='badge' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent 
+                                    />
+                                ))}
+                            </ul>
+                        )}
+
+                        {search.loading ? (
+                            <div class="row al-center h-2">
+                                <i src="spin" />
+                            </div>
+                        ) : (
+                        <ul class="menu col">
+                                {choices.map( choice => (
+                                    <ChoiceElement format='list' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent
+                                    />
+                                ))} 
+                            </ul>
+                        )} 
                     </div>
-                ) : (
-                   <ul class="menu col">
-                        {choices.map( choice => (
-                            <ChoiceElement format='list' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent
-                            />
-                        ))} 
-                    </ul>
-                )} 
-            </div>
-        )} state={popoverState}>
-            <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
-
-                {currentList.length === 0 ? <>
-                    {title}
-                </> : multiple ? <>
-                    {title} <span class="badge s bg accent">{currentList.length}</span> 
-                </> : <>
-                    {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 pd-1">
-                    
-                    {icon !== undefined && (
-                        <i src={icon} />
-                    )}
+                )} state={popoverState}>
+                    <Button type="secondary" icon={icon} iconR="chevron-down" {...otherProps}>
+
+                        {currentList.length === 0 ? <>
+                            {title}
+                        </> : multiple ? <>
+                            {title} <span class="badge s bg accent">{currentList.length}</span> 
+                        </> : <>
+                            {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 pd-1">
+                            
+                            {icon !== undefined && (
+                                <i src={icon} />
+                            )}
+
+                            <div class="col al-left sp-05">
+                                
+                                <label>{title}{isRequired && (
+                                    <span class="fg error">&nbsp;*</span>
+                                )}</label>
+
+                                <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>
+                            </div>
 
-                    <div class="col al-left sp-05">
-                        
-                        <label>{title}{isRequired && (
-                            <span class="fg error">&nbsp;*</span>
-                        )}</label>
-
-                        <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>
-                    </div>
-
-                </div>
 
-                <div class="pd-1">
-                    <ul class="row al-left wrap sp-05" style={{
-                        maxHeight: '30vh',
-                        overflowY: 'auto'
-                    }}>
-                        {choices.map( choice => (
-                            <ChoiceElement format='badge' choice={choice} 
-                                currentList={currentList}
-                                onChange={onChange}
-                                multiple={multiple}
-                                includeCurrent
-                            />
-                        ))}
-                    </ul>
-                </div>
-                
-            </div>
-            {errors?.length && (
-                <div class="bubble bg error bottom">
-                    {errors.join('. ')}
+                        <div class="pd-1">
+                            <ul class="row al-left wrap sp-05" style={{
+                                maxHeight: '30vh',
+                                overflowY: 'auto'
+                            }}>
+                                {choices.map( choice => (
+                                    <ChoiceElement format='badge' choice={choice} 
+                                        currentList={currentList}
+                                        onChange={onChange}
+                                        multiple={multiple}
+                                        includeCurrent
+                                    />
+                                ))}
+                            </ul>
+                        </div>
+                        
+                    </div>
+                    {errors?.length && (
+                        <div class="bubble bg error bottom">
+                            {errors.join('. ')}
+                        </div>
+                    )}
                 </div>
             )}
-        </div>
+        </InputWrapper>
     )
 }

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

@@ -2,11 +2,13 @@
 /*----------------------------------
 - DEPENDANCES
 ----------------------------------*/
+
 // Libs
 import React from 'react';
-import { ComponentChild } from 'preact';
+import { JSX, ComponentChild } from 'preact';
 
 // Composants
+import useContext from '@/client/context';
 import Button, { Props as TButtonProps } from '@client/components/button';
 import Popover from '../containers/Popover';
 import Checkbox from '../inputv3/Checkbox';
@@ -21,6 +23,7 @@ export type Props<TRow> = {
     
     data: TRow[],
     columns: (row: TRow, rows: TRow[], index: number) => TColumn[];
+    stickyHeader?: boolean,
 
     setData?: (rows: TRow[]) => void,
     empty?: ComponentChild | false,
@@ -29,11 +32,11 @@ export type Props<TRow> = {
     actions?: TAction<TRow>[]
 }
 
-export type TColumn = {
+export type TColumn = JSX.HTMLAttributes<HTMLElement> & {
     label: ComponentChild,
     cell: ComponentChild,
     raw?: number | string | boolean,
-    class?: string
+    stick?: boolean,
 }
 
 export type TAction<TRow> = Omit<TButtonProps, 'onClick'> & {
@@ -47,13 +50,16 @@ export type TAction<TRow> = Omit<TButtonProps, 'onClick'> & {
 - COMPOSANTS
 ----------------------------------*/
 export default function Liste<TRow extends TDonneeInconnue>({
+    stickyHeader,
     data: rows, setData, empty,
     columns, actions, ...props
 }: Props<TRow>) {
 
+    const { modal } = useContext();
+
     if (rows.length === 0)
         return empty === false ? null : (
-            <div class="pd-2 col al-center">
+            <div class={"pd-2 col al-center " + (props.className || '')}>
                 {empty || <>
                     <i src="meh-rolling-eyes" class="xl" />
                     Uh ... No rows here.
@@ -92,29 +98,75 @@ export default function Liste<TRow extends TDonneeInconnue>({
                 </td>
             )}
 
-            {columns(row, rows, iDonnee).map((col) => {
+            {columns(row, rows, iDonnee).map(({ 
+                label, cell, class: className, raw, 
+                stick, width, ...cellProps 
+            }) => {
+
+                let classe = className || '';
+                if (typeof raw === 'number')
+                    classe += 'txtRight';
+
+                if (stick) {
+                    classe += ' stickyColumn';
+                }
+
+                if (width) {
+
+                    if (cellProps.style === undefined)
+                        cellProps.style = {};
+
+                    cellProps.style = {
+                        ...cellProps.style,
+                        minWidth: width,
+                        width: width,
+                        maxWidth: width,
+                    }
+                }
 
                 if (iDonnee === 0) renduColonnes.push(
-                    <th>
-                        {col.label}
+                    <th class={classe} {...cellProps}>
+                        {label}
                     </th>
                 );
 
-                const affichageBrut = ['number', 'string'].includes(typeof col.cell) || React.isValidElement(col.cell);
+                let render: ComponentChild;
+                if (Array.isArray(cell)) {
 
-                let classe = col.class || '';
-                if (typeof col.raw === 'number')
-                    classe += 'txtRight';
+                    classe += ' extendable';
+
+                    render = (
+                        <div class="row sp-05">
+                            {cell.map((item, i) => (
+                                <span class={"badge bg light" + ((i % 7) + 1)}>
+                                    {item}
+                                </span>
+                            ))}
+                        </div>
+                    )
+
+                    // Extension
+                    cellProps.onClick = () => modal.show(() => (
+                        <div class="card col tableCellExtended">
+                            <h3>{label}</h3>
+                            {render}
+                        </div>
+                    ));
+                    
+                } else if (['number', 'string'].includes(typeof cell) || React.isValidElement(cell)) {
+                    render = cell;
+                } else 
+                    render = JSON.stringify(cell);
 
                 return (
-                    <td class={classe}>
-                        {affichageBrut ? col.cell : JSON.stringify(col.cell)}
+                    <td class={classe} {...cellProps}>
+                        {render}
                     </td>
                 )
             })}
 
             {actions !== undefined && (
-                <td>
+                <td class="stickyColumn">
                     <Popover content={(
                         <ul class="col menu card bg white">
                             {actions.map(({ label, onClick, ...props }: TAction<TRow>) => (
@@ -148,7 +200,7 @@ export default function Liste<TRow extends TDonneeInconnue>({
     return <>
         <div {...props}>
             <table>
-                <thead>
+                <thead className={stickyHeader ? 'stickyHeader' : undefined}>
                     <tr>
                         {selectionMultiple && (
                             <th>

package/src/client/components/index.ts

@@ -27,4 +27,5 @@ export { default as Select } from './Select';
 export { default as Input } from './inputv3';
 export { default as Checkbox } from './inputv3/Checkbox';
 export { default as File } from './inputv3/file';
-export { default as DateRangeInput } from './inputv3/Date';
+export { default as DateRangeInput } from './inputv3/Date';
+export { default as Rte } from './inputv3/Rte';