5htp-core 0.5.9-53 → 0.5.9-54

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

@@ -1,5 +1,5 @@
 .table {
-    
+
     overflow: auto;
 
     &.scrollable {
@@ -40,7 +40,8 @@ table {
 
     td, th {
 
-        padding: 1em 1em;
+        padding: 0.6em 1em;
+        font-size: 1rem;
         text-align: left;
 
         &:not(:last-child) {
@@ -129,14 +130,6 @@ table {
         }
     }
 
-    // Size
-    &.s, .table.s & {
-        td, th {
-            padding: 0.7em 1em;
-            font-size: 1rem;
-        }
-    }
-
     // Tableua responsive
     //  Utilisation déconseillée (lauvaise utilisation de l'espace, ergonomie horrible
     /*@media (max-width: @responsive2) {

package/client/components/Checkbox.tsx

@@ -26,7 +26,10 @@ export default (initProps: Props) => {
     - INIT
     ----------------------------------*/
 
-    const [{ title }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+    const [{ title, onChange }, { errors, required, ...props }] = useMantineInput<Props>(initProps);
+
+    console.log("initProps", initProps);
+    
 
     /*----------------------------------
     - RENDER
@@ -37,6 +40,7 @@ export default (initProps: Props) => {
             error={errors?.join(', ')}
             required={required}
             {...props}
+            onChange={e => onChange?.(e.target.checked)}
         />
     )
 }

package/client/components/DropDown.tsx

@@ -5,8 +5,8 @@
 // Npm
 import React from 'react';
 import { JSX, ComponentChild } from 'preact';
-import { Menu, MenuProps } from '@mantine/core';
-import Button, { Props as ButtonProps } from './Button';
+import { Button, Menu, MenuProps } from '@mantine/core';
+import { Props as ButtonProps } from './Button';
 
 // Core libs
 import { useMantineInput, InputBaseProps } from './utils';
@@ -24,12 +24,18 @@ export type Props = ButtonProps & {
 ----------------------------------*/
 export default ({ 
     label, children, 
-    menuProps = {}, ...btnProps 
+    menuProps = {}, size, icon, ...btnProps 
 }: Props) => {
     return (
-        <Menu {...menuProps}>
+        <Menu {...menuProps} size={size}>
             <Menu.Target>
-                <Button {...btnProps}>{label}</Button>
+                <Button {...btnProps} 
+                    rightSection={<i src="angle-down" />}
+                    variant="subtle"
+                >
+                    {icon && <i src={icon} />}
+                    {label}
+                </Button>
             </Menu.Target>
             <Menu.Dropdown>
                 {children}

package/client/components/Rte/ToolbarPlugin/ElementFormat.tsx

@@ -85,8 +85,10 @@ export default function ElementFormatDropdown({
     const formatOption = FormatOptions.find((option) => option.value === currentValue) || FormatOptions[0];
 
     return (
-        <DropDown disabled={disabled} icon={isRTL ? formatOption.iconRTL : formatOption.icon} size="s" 
-            label={formatOption.label}
+        <DropDown disabled={disabled} 
+            icon={isRTL ? formatOption.iconRTL : formatOption.icon} 
+            size="s" 
+            hint={formatOption.label}
             popover={{ tag: 'li' }}
         >
             {FormatOptions.map((option) => (

package/client/components/Rte/ToolbarPlugin/index.tsx

@@ -510,7 +510,7 @@ export default function ToolbarPlugin({
             )}
             
             {blockType === 'code' ? (
-                <DropDown label={getLanguageFriendlyName(codeLanguage)}
+                <DropDown size="s" label={getLanguageFriendlyName(codeLanguage)}
                     disabled={!isEditable}
                     icon="code"
                 >
@@ -591,7 +591,7 @@ export default function ToolbarPlugin({
 
                     <DropDown popover={{ tag: 'li' }} icon="font" size="s"
                         disabled={!isEditable}
-                        label="Formatting options for additional text styles"
+                        hint="Formatting options for additional text styles"
                     >
 
                         <Button icon="strikethrough" size="s"
@@ -640,8 +640,8 @@ export default function ToolbarPlugin({
                             <DropDown popover={{ tag: 'li' }}
                                 disabled={!isEditable}
                                 size="s"
-                                label="Insert"
-                                title="Insert specialized editor node"
+                                icon="plus-circle"
+                                hint="Insert specialized editor node"
                             >
 
                                 <Button icon="horizontal-rule" size="s" onClick={() => {

package/client/components/Select.tsx

@@ -5,7 +5,6 @@
 // Npm
 import React from 'react';
 import { 
-    Select as MantineSelect, 
     SelectProps, 
     MultiSelect as MantineMultiSelect, 
     ComboboxItem,
@@ -31,23 +30,16 @@ export type Choice = ComboboxItem;
 const ensureChoice = (
     choice: ComboboxItem | string, 
     choices: ComboboxItem[],
-    current: ComboboxItem | ComboboxItem[] | null
+    current: ComboboxItem[]
 ): ComboboxItem => {
 
     // Allready a choice
-    if (typeof choice === 'object' && choice.label) {
+    if (typeof choice === 'object')
         return choice;
-    }
-
-    // Complete list of the choices
-    const allChoices = [...choices];
-    if (Array.isArray(current))
-        allChoices.push(...current);
 
     // Find the choice
-    const found = allChoices.find( c => c.value === choice);
-    if (found)
-        return found;
+    const found = [...choices, ...current].find( c => c.value === choice );
+    if (found) return found;
 
     // Create a new choice
     return {
@@ -72,24 +64,16 @@ export default (initProps: Props) => {
         ...props
     }] = useMantineInput<Props, string|number>(initProps);
 
-    const initRef = React.useRef<boolean>();
+    const currentArray = Array.isArray(current) ? current : current ? [current] : [];
 
     const choicesViaFunc = typeof initChoices === 'function';
     if (choicesViaFunc)
         enableSearch = true;
     else 
-        initChoices = initChoices?.map( c => ensureChoice(c, [], current) ) || [];
-
-    if (enableSearch)
-        props.searchable = true;
+        initChoices = initChoices?.map( c => ensureChoice(c, [], currentArray) ) || [];
 
     let [choices, setChoices] = React.useState<ComboboxItem[]>( choicesViaFunc 
-        ? (Array.isArray(current) 
-            ? current.map( c => ensureChoice(c, [], current) )
-            : current 
-                ? [ensureChoice(current, [], [])]
-                : []
-        ) || []
+        ? currentArray.map( c => ensureChoice(c, [], currentArray) )
         : initChoices
     );
 
@@ -106,8 +90,6 @@ export default (initProps: Props) => {
     - ACTIONS
     ----------------------------------*/
 
-    const valueToChoice = (value: string) => choices.find(c => c.value === value);
-
     React.useEffect(() => {
 
         if (choicesViaFunc && opened) {
@@ -123,8 +105,6 @@ export default (initProps: Props) => {
             })
         }
 
-        initRef.current = true;
-
     }, [
         opened,
         search.keywords,
@@ -133,26 +113,37 @@ export default (initProps: Props) => {
         typeof initChoices === 'function' ? true : initChoices
     ]);
 
-    let Component: typeof MantineSelect | typeof MantineMultiSelect;
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+
     if (multiple) {
-        Component = MantineMultiSelect;
-        props.value = current ? current.map( c => ensureChoice(c, choices, current).value ) : [];
+
+        props.value = current 
+            ? current.map( c => ensureChoice(c, choices, currentArray).value ) 
+            : [];
+
         props.onChange = (value: string[]) => {
-            onChange( value.map(valueToChoice) )
+            onChange( value.map(value => ensureChoice(value, choices, currentArray)) )
         };
+
     } else {
-        Component = MantineSelect;
-        props.value = current ? ensureChoice(current, choices, current).value : '';
-        props.onChange = (value: string) => onChange( valueToChoice(value) );
-    }   
 
-    if (props.placeholder === 'Languages') {
-        console.log("CHOICES", current, props.value);
-    }
+        props.value = current 
+            ? [ensureChoice(current, choices, currentArray).value] 
+            : [];
+
+        props.onChange = (value: string[]) => {
+
+            setOpened(false);
+
+            onChange( value.length > 0 
+                ? ensureChoice(value[value.length - 1], choices, currentArray) 
+                : undefined 
+            )
+        };
+    }   
 
-    /*----------------------------------
-    - RENDER
-    ----------------------------------*/
     if (minimal) {
         return (
             <Menu width={300} opened={opened} onChange={setOpened} 
@@ -213,19 +204,32 @@ export default (initProps: Props) => {
 
     } else {
         return (
-            <Component 
+            <MantineMultiSelect 
                 {...props} 
     
-                data={choices}
+                data={[
+                    {
+                        group: 'Search results',
+                        // Exclude the choices that are already selected
+                        items: choices.filter(c => !props.value.includes(c.value))
+                    },
+                    {
+                        group: 'Selected',
+                        items: currentArray
+                    }
+                ]}
                 nothingFound={search.loading ? 'Loading...' : props || 'No options found'}
                 comboboxProps={{
                     withArrow: false
                 }}
     
+                searchable={enableSearch}
                 clearable={!required}
                 required={required}
                 allowDeselect={!required}
+                checkIconPosition="right"
     
+                dropdownOpened={opened}
                 onDropdownOpen={() => setOpened(true)}
                 onDropdownClose={() => setOpened(false)}
                 onSearchChange={(keywords) => setSearch(s => ({ ...s, keywords }))}

package/package.json

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

package/types/icons.d.ts

@@ -1 +1 @@
-export type TIcones = "long-arrow-right"|"times"|"solid/spinner-third"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"rocket"|"chart-bar"|"planet-ringed"|"crosshairs"|"brands/linkedin"|"plus-circle"|"comments-alt"|"user-circle"|"arrow-right"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"key"|"user"|"at"|"times-circle"|"calendar-alt"|"paper-plane"|"search"|"lightbulb"|"magnet"|"solid/crown"|"brands/discord"|"pen"|"plus"|"file"|"envelope"|"angle-up"|"angle-down"|"binoculars"|"info-circle"|"check-circle"|"exclamation-circle"|"check"|"meh-rolling-eyes"|"trash"|"arrow-left"|"bars"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"cog"|"power-off"|"question-circle"|"play"|"minus-circle"|"external-link"|"plane-departure"|"wind"|"usd-circle"|"users"|"home-alt"|"trophy"|"arrow-to-bottom"|"map-marker-alt"|"clock"|"ellipsis-h"|"building"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"unlink"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"
+export type TIcones = "times"|"solid/spinner-third"|"long-arrow-right"|"sack-dollar"|"bell"|"bullseye"|"project-diagram"|"user-friends"|"eye"|"lock"|"comments"|"phone"|"chalkboard-teacher"|"chart-bar"|"rocket"|"user-circle"|"planet-ringed"|"brands/linkedin"|"crosshairs"|"arrow-right"|"user-shield"|"shield-alt"|"chart-line"|"money-bill-wave"|"star"|"link"|"file-alt"|"long-arrow-left"|"at"|"key"|"plus-circle"|"comments-alt"|"user-plus"|"mouse-pointer"|"thumbs-up"|"dollar-sign"|"user"|"calendar-alt"|"paper-plane"|"search"|"lightbulb"|"magnet"|"times-circle"|"angle-up"|"angle-down"|"envelope"|"plus"|"solid/crown"|"brands/discord"|"pen"|"file"|"binoculars"|"check"|"info-circle"|"check-circle"|"exclamation-circle"|"arrow-left"|"meh-rolling-eyes"|"trash"|"solid/star"|"solid/star-half-alt"|"regular/star"|"chevron-left"|"cog"|"power-off"|"bars"|"usd-circle"|"users"|"home-alt"|"trophy"|"plane-departure"|"wind"|"question-circle"|"play"|"minus-circle"|"external-link"|"map-marker-alt"|"clock"|"arrow-to-bottom"|"ellipsis-h"|"building"|"unlink"|"bold"|"italic"|"underline"|"strikethrough"|"subscript"|"superscript"|"code"|"font"|"empty-set"|"horizontal-rule"|"page-break"|"image"|"table"|"poll"|"columns"|"sticky-note"|"caret-right"|"align-left"|"align-center"|"align-right"|"align-justify"|"indent"|"outdent"|"list-ul"|"check-square"|"h1"|"h2"|"h3"|"h4"|"list-ol"|"paragraph"|"quote-left"