5htp-core 0.4.7 → 0.4.8

package/src/client/components/inputv3/Rte/style.less

@@ -0,0 +1,428 @@
+.input.rte {
+    .other h2 {
+        font-size: 18px;
+        color: #444;
+        margin-bottom: 7px;
+    }
+
+    .other a {
+        color: #777;
+        text-decoration: underline;
+        font-size: 14px;
+    }
+
+    .other ul {
+        padding: 0;
+        margin: 0;
+        list-style-type: none;
+    }
+
+    .App {
+        font-family: sans-serif;
+        text-align: center;
+    }
+
+    h1 {
+        font-size: 24px;
+        color: #333;
+    }
+
+    .ltr {
+        text-align: left;
+    }
+
+    .rtl {
+        text-align: right;
+    }
+
+    .editor-container {
+        margin: 0;
+        color: #000;
+        position: relative;
+        line-height: 20px;
+        font-weight: 400;
+        text-align: left;
+        border-top-left-radius: 10px;
+        border-top-right-radius: 10px;
+    }
+
+    .editor-inner {
+        background: #fff;
+        position: relative;
+    }
+
+    .editor-input {
+        min-height: 150px;
+        resize: none;
+        font-size: 15px;
+        caret-color: rgb(5, 5, 5);
+        position: relative;
+        tab-size: 1;
+        outline: 0;
+        caret-color: #444;
+    }
+
+    .editor-placeholder {
+        color: #999;
+        overflow: hidden;
+        position: absolute;
+        text-overflow: ellipsis;
+        top: 3px;
+        left: 0px;
+        font-size: 15px;
+        user-select: none;
+        display: inline-block;
+        pointer-events: none;
+    }
+
+    .editor-text-bold {
+        font-weight: bold;
+    }
+
+    .editor-text-italic {
+        font-style: italic;
+    }
+
+    .editor-text-underline {
+        text-decoration: underline;
+    }
+
+    .editor-text-strikethrough {
+        text-decoration: line-through;
+    }
+
+    .editor-text-underlineStrikethrough {
+        text-decoration: underline line-through;
+    }
+
+    .editor-text-code {
+        background-color: rgb(240, 242, 245);
+        padding: 1px 0.25rem;
+        font-family: Menlo, Consolas, Monaco, monospace;
+        font-size: 94%;
+    }
+
+    .editor-link {
+        color: rgb(33, 111, 219);
+        text-decoration: none;
+    }
+
+    .tree-view-output {
+        display: block;
+        background: #222;
+        color: #fff;
+        padding: 5px;
+        font-size: 12px;
+        white-space: pre-wrap;
+        margin: 1px auto 10px auto;
+        max-height: 250px;
+        position: relative;
+        border-bottom-left-radius: 10px;
+        border-bottom-right-radius: 10px;
+        overflow: auto;
+        line-height: 14px;
+    }
+
+    .editor-code {
+        background-color: rgb(240, 242, 245);
+        font-family: Menlo, Consolas, Monaco, monospace;
+        display: block;
+        padding: 8px 8px 8px 52px;
+        line-height: 1.53;
+        font-size: 13px;
+        margin: 0;
+        margin-top: 8px;
+        margin-bottom: 8px;
+        tab-size: 2;
+        /* white-space: pre; */
+        overflow-x: auto;
+        position: relative;
+    }
+
+    .editor-code:before {
+        content: attr(data-gutter);
+        position: absolute;
+        background-color: #eee;
+        left: 0;
+        top: 0;
+        border-right: 1px solid #ccc;
+        padding: 8px;
+        color: #777;
+        white-space: pre-wrap;
+        text-align: right;
+        min-width: 25px;
+    }
+
+    .editor-code:after {
+        content: attr(data-highlight-language);
+        top: 0;
+        right: 3px;
+        padding: 3px;
+        font-size: 10px;
+        text-transform: uppercase;
+        position: absolute;
+        color: rgba(0, 0, 0, 0.5);
+    }
+
+    .editor-tokenComment {
+        color: slategray;
+    }
+
+    .editor-tokenPunctuation {
+        color: #999;
+    }
+
+    .editor-tokenProperty {
+        color: #905;
+    }
+
+    .editor-tokenSelector {
+        color: #690;
+    }
+
+    .editor-tokenOperator {
+        color: #9a6e3a;
+    }
+
+    .editor-tokenAttr {
+        color: #07a;
+    }
+
+    .editor-tokenVariable {
+        color: #e90;
+    }
+
+    .editor-tokenFunction {
+        color: #dd4a68;
+    }
+
+    .editor-paragraph {
+        margin: 0;
+        margin-bottom: 8px;
+        position: relative;
+    }
+
+    .editor-paragraph:last-child {
+        margin-bottom: 0;
+    }
+
+    .editor-heading-h1 {
+        font-size: 24px;
+        color: rgb(5, 5, 5);
+        font-weight: 400;
+        margin: 0;
+        margin-bottom: 12px;
+        padding: 0;
+    }
+
+    .editor-heading-h2 {
+        font-size: 15px;
+        color: rgb(101, 103, 107);
+        font-weight: 700;
+        margin: 0;
+        margin-top: 10px;
+        padding: 0;
+        text-transform: uppercase;
+    }
+
+    .editor-quote {
+        margin: 0;
+        margin-left: 20px;
+        font-size: 15px;
+        color: rgb(101, 103, 107);
+        border-left-color: rgb(206, 208, 212);
+        border-left-width: 4px;
+        border-left-style: solid;
+        padding-left: 16px;
+    }
+
+    .editor-list-ol {
+        padding: 0;
+        margin: 0;
+        margin-left: 16px;
+    }
+
+    .editor-list-ul {
+        padding: 0;
+        margin: 0;
+        margin-left: 16px;
+    }
+
+    .editor-listitem {
+        margin: 8px 32px 8px 32px;
+    }
+
+    .editor-nested-listitem {
+        list-style-type: none;
+    }
+
+    pre::-webkit-scrollbar {
+        background: transparent;
+        width: 10px;
+    }
+
+    pre::-webkit-scrollbar-thumb {
+        background: #999;
+    }
+
+    .debug-timetravel-panel {
+        overflow: hidden;
+        padding: 0 0 10px 0;
+        margin: auto;
+        display: flex;
+    }
+
+    .debug-timetravel-panel-slider {
+        padding: 0;
+        flex: 8;
+    }
+
+    .debug-timetravel-panel-button {
+        padding: 0;
+        border: 0;
+        background: none;
+        flex: 1;
+        color: #fff;
+        font-size: 12px;
+    }
+
+    .debug-timetravel-panel-button:hover {
+        text-decoration: underline;
+    }
+
+    .debug-timetravel-button {
+        border: 0;
+        padding: 0;
+        font-size: 12px;
+        top: 10px;
+        right: 15px;
+        position: absolute;
+        background: none;
+        color: #fff;
+    }
+
+    .debug-timetravel-button:hover {
+        text-decoration: underline;
+    }
+
+    .toolbar {
+        display: flex;
+        background: #fff;
+        vertical-align: middle;
+    }
+
+    .toolbar button.toolbar-item {
+        border: 0;
+        display: flex;
+        background: none;
+        border-radius: 10px;
+        padding: 8px;
+        cursor: pointer;
+        vertical-align: middle;
+    }
+
+    .toolbar button.toolbar-item:disabled {
+        cursor: not-allowed;
+    }
+
+    .toolbar button.toolbar-item.spaced {
+        margin-right: 2px;
+    }
+
+    .toolbar button.toolbar-item i.format {
+        background-size: contain;
+        display: inline-block;
+        height: 18px;
+        width: 18px;
+        margin-top: 2px;
+        vertical-align: -0.25em;
+        display: flex;
+        opacity: 0.6;
+    }
+
+    .toolbar button.toolbar-item:disabled i.format {
+        opacity: 0.2;
+    }
+
+    .toolbar button.toolbar-item.active {
+        background-color: rgba(223, 232, 250, 0.3);
+    }
+
+    .toolbar button.toolbar-item.active i {
+        opacity: 1;
+    }
+
+    .toolbar .toolbar-item:hover:not([disabled]) {
+        background-color: #eee;
+    }
+
+    .toolbar .divider {
+        width: 1px;
+        background-color: #eee;
+        margin: 0 4px;
+    }
+
+    .toolbar .toolbar-item .text {
+        display: flex;
+        line-height: 20px;
+        width: 200px;
+        vertical-align: middle;
+        font-size: 14px;
+        color: #777;
+        text-overflow: ellipsis;
+        width: 70px;
+        overflow: hidden;
+        height: 20px;
+        text-align: left;
+    }
+
+    .toolbar .toolbar-item .icon {
+        display: flex;
+        width: 20px;
+        height: 20px;
+        user-select: none;
+        margin-right: 8px;
+        line-height: 16px;
+        background-size: contain;
+    }
+
+    i.undo {
+        background-image: url(icons/arrow-counterclockwise.svg);
+    }
+
+    i.redo {
+        background-image: url(icons/arrow-clockwise.svg);
+    }
+
+    i.bold {
+        background-image: url(icons/type-bold.svg);
+    }
+
+    i.italic {
+        background-image: url(icons/type-italic.svg);
+    }
+
+    i.underline {
+        background-image: url(icons/type-underline.svg);
+    }
+
+    i.strikethrough {
+        background-image: url(icons/type-strikethrough.svg);
+    }
+
+    i.left-align {
+        background-image: url(icons/text-left.svg);
+    }
+
+    i.center-align {
+        background-image: url(icons/text-center.svg);
+    }
+
+    i.right-align {
+        background-image: url(icons/text-right.svg);
+    }
+
+    i.justify-align {
+        background-image: url(icons/justify.svg);
+    }
+}

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

@@ -1,7 +1,6 @@
 @import (reference) "@/client/assets/vars.less";
 
 @hInput: @sizeComponent;
-@labelH: 0.6em;
 
 // TODO: Adapter textarea à input/basev2
 .contChamp textarea {
@@ -12,6 +11,22 @@
     padding-top: @spacing * 2 !important;
 }
 
+.inputWrapper {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5em;
+    align-items: stretch;
+
+    > label {
+        font-weight: 700;
+    }
+
+    > p.hint {
+        text-align: left;
+        color: var(--cTxtDesc);
+    }
+}
+
 .input {
     &.text,
     &.select {
@@ -22,15 +37,6 @@
         > i {
             color: var(--cTxtDesc);
         }
-        
-        label {
-            display: flex;
-            align-items: center;
-            color: var(--cTxtImportant);
-            font-size: 0.9em;
-            font-weight: 600;
-            transition: all .1s ease-out;
-        }
     }
 
     // Error bubble
@@ -72,28 +78,9 @@
     --cBg2: #eee;
     //box-shadow: 1px 3px 0 fade(#000,4%), 0 1px 2px 0 fade(#000,2%);
 
-    @gapAround: (@hInput - @labelH) / 2;
+    @gapAround: @spacing;
     > .btn:first-child { margin-left: 0 - @gapAround / 2; }
 
-    label {
-        position: absolute;
-        left: 0; width: 100%;
-        top: 0;
-        height: @labelH;
-        font-size: 0.8em;
-        line-height: 0.8em;
-
-        color: var(--cTxtImportant);
-    }
-
-    &.empty:not(.focus)  {
-        label {
-            height: 100%;
-            font-size: 1em;
-            color: var(--cTxtBase);
-        }
-    }
-
     .contValue {
         position: relative;
         flex: 1;
@@ -114,7 +101,7 @@
         border: none;
         font-family: inherit;
         width: 100%;
-        padding: @labelH 0 0 0;
+        padding: 0;
         font-size: 1rem;
         color: inherit;
     }
@@ -128,7 +115,7 @@
     }
 
     textarea {
-        padding: @labelH + @spacing 0 @spacing 0;
-        min-height: 4em;
+        padding: 0;
+        min-height: 6em;
     }
 }

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

@@ -4,6 +4,7 @@
 
 // Npm
 import React from 'react';
+import type { ComponentChild }  from 'preact';
 import type { StateUpdater } from 'preact/hooks';
 
 // Core libs
@@ -16,10 +17,13 @@ import { useState } from '@client/hooks';
 export type InputBaseProps<TValue> = {
 
     title: string, // Now mandatory
+    hint?: ComponentChild,
     required?: boolean,
     errors?: string[],
     size?: TComponentSize,
 
+    wrapper?: boolean,
+
     value: TValue,
     onChange?: (value: TValue) => void,
 }
@@ -64,7 +68,7 @@ export function useInput<TValue>(
         if (state.changed === false)
             return;
 
-        console.log(`[input] Commit value:`, state.value, externalValue);
+        //console.log(`[input] Commit value:`, state.value, externalValue);
         if (onChange !== undefined)
             onChange(state.value);
     }
@@ -73,7 +77,7 @@ export function useInput<TValue>(
     React.useEffect(() => {
 
         if (externalValue !== undefined && externalValue !== state.value) {
-            console.log("External value change", externalValue);
+            //console.log("External value change", externalValue);
             setState({ value: externalValue, valueSource: 'external', changed: true })
         }
         
@@ -91,4 +95,34 @@ export function useInput<TValue>(
 /*----------------------------------
 - COMPONENT
 ----------------------------------*/
+export const InputWrapper = ({ children, wrapper = true, title, hint, required }: InputBaseProps<unknown> & {
+    children: ComponentChild
+}) => {
+
+    /*----------------------------------
+    - INIT
+    ----------------------------------*/
+
+    /*----------------------------------
+    - ACTIONS
+    ----------------------------------*/
+
+    /*----------------------------------
+    - RENDER
+    ----------------------------------*/
+    return wrapper === false ? <>{children}</> : (
+        <div class="inputWrapper">
+
+            <label>{title}{required && (
+                <span class="fg error">&nbsp;*</span>
+            )}</label>
+
+            {hint && <p class="hint">{hint}</p>}
+
+            {children}
+            
+        </div>
+    )
+}
+
 import './base.less';

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

@@ -8,7 +8,7 @@ import { VNode, JSX } from 'preact';
 import TextareaAutosize from 'react-textarea-autosize';
 
 // Core libs
-import { useInput, InputBaseProps } from './base';
+import { useInput, InputBaseProps, InputWrapper } from './base';
 import { default as Validator } from '../../../common/validation/validator';
 import type SchemaValidators from '@common/validation/validators';
 
@@ -47,17 +47,18 @@ type TInputElementProps = Omit<(
 /*----------------------------------
 - COMPOSANT
 ----------------------------------*/
-export default ({ 
-    // Decoration
-    icon, prefix, suffix, iconR, required, size, className = '',
-    // State
-    inputRef, errors,
-    // Behavior
-    type, choice, validator,
-    // Actions
-    onPressEnter,
-    ...props 
-}: Props & InputBaseProps<string> & TInputElementProps) => {
+export default (props: Props & InputBaseProps<string> & TInputElementProps) => {
+
+    let {
+        // Decoration
+        icon, prefix, suffix, iconR, placeholder, size, className = '',
+        // State
+        inputRef, errors,
+        // Behavior
+        type, validator,
+        // Actions
+        onPressEnter
+    } = props;
 
     /*----------------------------------
     - INIT
@@ -128,7 +129,7 @@ export default ({
 
     } else if (type === 'longtext') {
 
-        prefix = prefix || <i src="text" />;
+        // No icon because not good looking ane we want as much space as possible
         Tag = 'textarea';
         className += ' multiline';
 
@@ -170,43 +171,43 @@ export default ({
     /*----------------------------------
     - RENDER
     ----------------------------------*/
-    return <>
-        <div class={className} onClick={() => refInput.current?.focus()}>
+    return (
+        <InputWrapper {...props}>
+            <div class={className} onClick={() => refInput.current?.focus()}>
 
-            {prefix}
+                {prefix}
 
-            <div class="contValue">
+                <div class="contValue">
 
-                <Tag {...fieldProps}
-                    // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
-                    ref={refInput}
-                    value={value}
-                    onFocus={() => setState({ focus: true })}
-                    onBlur={() => setState({ focus: false })}
-                    onChange={(e) => updateValue(e.target.value)}
+                    <Tag {...fieldProps}
 
-                    onKeyDown={(e: KeyboardEvent) => {
+                        placeholder={placeholder || props.title}
 
-                        if (onPressEnter && e.key === 'Enter' && value !== undefined) {
-                            commitValue();
-                            onPressEnter(value)
-                        }
-                    }}
-                />
+                        // @ts-ignore: Property 'ref' does not exist on type 'IntrinsicAttributes'
+                        ref={refInput}
+                        value={value}
+                        onFocus={() => setState({ focus: true })}
+                        onBlur={() => setState({ focus: false })}
+                        onChange={(e) => updateValue(e.target.value)}
+                        onKeyDown={(e: KeyboardEvent) => {
 
-                <label>{props.title}{required && (
-                    <span class="fg error">&nbsp;*</span>
-                )}</label>
-            </div>
+                            if (onPressEnter && e.key === 'Enter' && value !== undefined) {
+                                commitValue();
+                                onPressEnter(value)
+                            }
+                        }}
+                    />
+                </div>
 
-            {suffix}
+                {suffix}
+                    
+                {errors?.length && (
+                    <div class="bubble bg error bottom">
+                        {errors.join('. ')}
+                    </div>
+                )}
                 
-            {errors?.length && (
-                <div class="bubble bg error bottom">
-                    {errors.join('. ')}
-                </div>
-            )}
-            
-        </div>
-    </>
+            </div>
+        </InputWrapper>
+    )
 }