wini-web-components 2.8.1 → 2.8.4

package/src/component/table/table.tsx

@@ -0,0 +1,108 @@
+import React, { CSSProperties, MouseEventHandler, ReactNode } from 'react';
+import './table.css'
+
+export enum CellAlignItems {
+    start = 'start',
+    center = 'center',
+    end = 'end',
+}
+
+type TbCellProps = {
+    id?: string,
+    fixed?: boolean,
+    children?: ReactNode,
+    className?: string,
+    style?: CSSProperties,
+    align?: CellAlignItems | string,
+    onClick?: React.MouseEventHandler<HTMLTableDataCellElement>
+}
+
+export class TbCell extends React.Component<TbCellProps> {
+    render(): React.ReactNode {
+        return <td id={this.props.id} onClick={this.props.onClick} style={this.props.style} align-cell={this.props.align ?? CellAlignItems.start} className={`tb-cell ${this.props.className ?? ''} ${this.props.fixed ? 'tb-cell-fixed' : ''}`}>{this.props.children}</td>
+    }
+}
+
+interface TbRowProps {
+    id?: string,
+    children?: Array<TbCell>,
+    className?: string,
+    style?: CSSProperties,
+    onClick?: MouseEventHandler<HTMLTableRowElement>,
+}
+
+
+export class TbRow extends React.Component<TbRowProps> {
+    render(): React.ReactNode {
+        return <tr id={this.props.id} style={this.props.style} className={`tb-row ${this.props.className ?? ""}`} onClick={this.props.onClick}>
+            {(this.props.children ?? []).map((e: TbCell, i: number) => {
+                let ox: number | string = 0
+                if (this.props.children && i > 0 && i < (this.props.children.length - 1)) {
+                    ox = `calc(${this.props.children.slice(0, i).map(tb => {
+                        const wValue = tb.props.style?.minWidth ?? tb.props.style?.width
+                        return wValue ? typeof wValue === 'number' ? `${wValue}px` : wValue : '60px';
+                    }).join(" + ")})`
+                }
+                return <TbCell
+                    id={e.props.id}
+                    key={`tb-cell-${i}`}
+                    align={e.props.align}
+                    children={e.props.children}
+                    fixed={e.props.fixed}
+                    onClick={e.props.onClick}
+                    style={e.props.fixed ? (this.props.children && i === this.props.children.length - 1) ? { right: 0, ...(e.props.style ?? {}) } : { left: ox, ...(e.props.style ?? {}) } : e.props.style}
+                    className={e.props.className} />;
+            })}
+        </tr>
+    }
+}
+
+export class TbHeader extends React.Component<TbRowProps> {
+    render() {
+        return <thead style={this.props.style} className={`tb-header ${this.props.className ?? ""}`}>
+            <tr>
+                {(this.props.children ?? []).map((e: TbCell, i: number) => {
+                    let ox: number | string = 0
+                    if (this.props.children && i > 0 && i < (this.props.children.length - 1)) {
+                        ox = `calc(${this.props.children.slice(0, i).map(tb => tb.props.style?.width ? typeof tb.props.style.width === 'number' ? `${tb.props.style.width}px` : tb.props.style.width : '60px').join(" + ")})`
+                    }
+                    return <TbCell
+                        id={e.props.id}
+                        key={`tb-cell-${i}`}
+                        align={e.props.align}
+                        children={e.props.children}
+                        onClick={e.props.onClick}
+                        fixed={e.props.fixed}
+                        style={e.props.fixed ? (this.props.children && i === this.props.children.length - 1) ? { right: 0, ...(e.props.style ?? {}) } : { left: ox, ...(e.props.style ?? {}) } : e.props.style}
+                        className={e.props.className} />;
+                })}
+            </tr>
+        </thead>
+    }
+}
+
+interface TbBodyProps {
+    id?: string,
+    children?: Array<TbRow>,
+    className?: string,
+    style?: CSSProperties,
+}
+
+export class TbBody extends React.Component<TbBodyProps> {
+    render(): React.ReactNode {
+        return <tbody id={this.props.id}>{this.props.children as ReactNode}</tbody>
+    }
+}
+
+interface TableProps {
+    id?: string,
+    children?: Array<TbBody | TbHeader>,
+    className?: string,
+    style?: CSSProperties,
+}
+
+export class Table extends React.Component<TableProps> {
+    render(): React.ReactNode {
+        return <table id={this.props.id} className={`custom-table ${this.props.className}`} style={this.props.style}>{this.props.children as ReactNode}</table>
+    }
+}

package/src/component/tag/tag.module.css

@@ -0,0 +1,108 @@
+.tag-container {
+    padding: 3px 7px;
+    border-radius: 100rem;
+    gap: 6px;
+    justify-content: center;
+    color: var(--neutral-text-subtitle-color, #61616B);
+    border: var(--neutral-bolder-border);
+}
+
+.tag-container[class~="dashed"] {
+    border-style: dashed;
+}
+
+.tag-container[class~="size32"] {
+    padding: 4px 11px;
+    gap: 8px;
+}
+
+.tag-container.type-button {
+    cursor: pointer;
+}
+
+.tag-container>.tag-label {
+    color: inherit;
+    font: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    line-height: inherit;
+    font-weight: inherit;
+    text-align: inherit;
+    letter-spacing: inherit;
+}
+
+.tag-container.disabled {
+    color: var(--neutral-text-disabled-color);
+    background-color: var(--neutral-disable-background-color) !important;
+    border-color: var(--neutral-disable-background-color) !important;
+    pointer-events: none !important;
+}
+
+.tag-container[class~="tag-primary"] {
+    background-color: var(--primary-main-color) !important;
+    border-color: var(--primary-main-color) !important;
+}
+
+.tag-container[class~="tag-primary"] * {
+    color: var(--neutral-text-stable-color) !important;
+    --color: var(--neutral-text-stable-color) !important;
+}
+
+.tag-container[class~="tag-grey"] {
+    border-color: var(--neutral-bolder-border-color) !important;
+    background-color: var(--neutral-main-background-color) !important;
+}
+
+.tag-container[class~="tag-grey"] * {
+    color: var(--neutral-text-subtitle-color) !important;
+    --color: var(--neutral-text-subtitle-color) !important;
+}
+
+.tag-container[class~="tag-neutral"] {
+    border-color: var(--neutral-bolder-border-color) !important;
+}
+
+.tag-container[class~="tag-neutral"] * {
+    color: var(--neutral-text-subtitle-color) !important;
+    --color: var(--neutral-text-subtitle-color) !important;
+}
+
+.tag-container[class~="tag-infor"] {
+    background-color: var(--infor-background);
+    border-color: var(--infor-main-color) !important;
+}
+
+.tag-container[class~="tag-infor"] * {
+    color: var(--infor-main-color) !important;
+    --color: var(--infor-main-color) !important;
+}
+
+.tag-container[class~="tag-warning"] {
+    background-color: var(--warning-background);
+    border-color: var(--warning-main-color) !important;
+}
+
+.tag-container[class~="tag-warning"] * {
+    color: var(--warning-main-color) !important;
+    --color: var(--warning-main-color) !important;
+}
+
+.tag-container[class~="tag-error"] {
+    background-color: var(--error-background);
+    border-color: var(--error-main-color) !important;
+}
+
+.tag-container[class~="tag-error"] * {
+    color: var(--error-main-color) !important;
+    --color: var(--error-main-color) !important;
+}
+
+.tag-container[class~="tag-success"] {
+    background-color: var(--success-background);
+    border-color: var(--success-main-color) !important;
+}
+
+.tag-container[class~="tag-success"] * {
+    color: var(--success-main-color) !important;
+    --color: var(--success-main-color) !important;
+}

package/src/component/tag/tag.tsx

@@ -0,0 +1,31 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import { Text } from '../text/text';
+import styles from './tag.module.css'
+import { ComponentStatus } from '../component-status';
+
+interface TagProps {
+    id?: string,
+    title: string,
+    prefix?: ReactNode,
+    suffix?: ReactNode,
+    disabled?: boolean,
+    style?: CSSProperties,
+    /** 
+     * default: size24: button-text-6 \
+     * recommend: size24: button-text-6 | size32: button-text-4 \
+     * status tag: tag-primary | tag-infor | tag-warning | tag-error | tag-success | tag-grey | tag-neutral | tag-infor-main | tag-warning-main | tag-error-main | tag-success-main
+     * */
+    className?: string,
+    status?: ComponentStatus,
+    onClick?: React.MouseEventHandler<HTMLDivElement>
+}
+
+export class Tag extends React.Component<TagProps> {
+    render() {
+        return <div id={this.props.id} tag-type={this.props.status ?? 'default'} className={`${styles['tag-container']} row ${this.props.onClick ? styles['type-button'] : ''} ${this.props.disabled ? styles['disabled'] : ""} ${this.props.className ?? "button-text-6"} `} style={this.props.style} onClick={this.props.onClick}>
+            {this.props.prefix}
+            <Text maxLine={1} className={styles['tag-label']}>{this.props.title}</Text>
+            {this.props.suffix}
+        </div>
+    }
+}

package/src/component/text/text.css

@@ -0,0 +1,27 @@
+.comp-text {
+    display: inline-block;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: var(--max-line);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    -webkit-box-pack: center;
+    text-align: start;
+    vertical-align: middle;
+    display: -webkit-box;
+}
+
+.comp-text.type-button {
+    cursor: pointer;
+}
+
+.comp-text.innerhtml * {
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    text-align: inherit;
+    margin: 0;
+    padding: 0;
+    font-family: inherit;
+    font-size: inherit;
+    -webkit-box-pack: inherit;
+}

package/src/component/text/text.tsx

@@ -0,0 +1,24 @@
+import React, { CSSProperties, ReactNode } from 'react';
+import './text.css';
+
+interface TextProps {
+    id?: string,
+    children?: ReactNode,
+    style?: CSSProperties,
+    className?: string,
+    maxLine?: number,
+    onClick?: React.MouseEventHandler<HTMLDivElement>,
+    onHover?: React.MouseEventHandler<HTMLDivElement>,
+    html?: string,
+}
+
+export class Text extends React.Component<TextProps> {
+    render(): React.ReactNode {
+        let convertStyle: CSSProperties = this.props.style ?? {}
+        if (this.props.maxLine) {
+            convertStyle = { ...convertStyle, '--max-line': this.props.maxLine } as CSSProperties
+        }
+        return this.props.html ? <div dangerouslySetInnerHTML={{ __html: this.props.html }} id={this.props.id} onMouseOver={this.props.onHover} onClick={this.props.onClick} className={`comp-text innerhtml ${this.props.onClick ? 'type-button' : ''} ${this.props.className ?? ''}`} style={convertStyle} /> :
+            <div id={this.props.id} onMouseOver={this.props.onHover} onClick={this.props.onClick} className={`comp-text ${this.props.onClick ? 'type-button' : ''} ${this.props.className ?? ''}`} style={convertStyle}>{this.props.children}</div>
+    }
+}

package/src/component/text-area/text-area.module.css

@@ -0,0 +1,57 @@
+.text-area-container {
+    height: 4rem;
+    position: relative;
+    gap: 0.8rem;
+    border-radius: 0.8rem;
+    border: var(--neutral-bolder-border);
+    padding: 0.8rem 1.6rem;
+    align-items: start;
+}
+
+.text-area-container:has(> textarea:disabled) {
+    background-color: var(--neutral-disable-background-color) !important;
+    color: var(--neutral-text-disabled-color) !important;
+    pointer-events: none !important;
+}
+
+.text-area-container:focus-within {
+    border-color: var(--primary-main-color);
+}
+
+.text-area-container>textarea {
+    flex: 1;
+    padding: 0;
+    width: 100%;
+    height: inherit;
+    max-height: 100%;
+    border: none;
+    outline: none;
+    background-color: transparent !important;
+    font: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    text-overflow: inherit;
+    resize: inherit;
+}
+
+.text-area-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.text-area-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -0.4rem;
+    width: max-content;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    font-family: inherit;
+    transform: translateY(100%);
+}

package/src/component/text-area/text-area.tsx

@@ -0,0 +1,65 @@
+import React, { createRef, CSSProperties } from "react";
+import styles from './text-area.module.css'
+import { UseFormRegister } from "react-hook-form";
+
+interface TextAreaProps {
+    id?: string,
+    value?: string,
+    maxLength?: number,
+    defaultValue?: string,
+    onChange?: React.ChangeEventHandler<HTMLTextAreaElement>,
+    onBlur?: React.FocusEventHandler<HTMLTextAreaElement>,
+    onFocus?: React.FocusEventHandler<HTMLTextAreaElement>,
+    placeholder?: string,
+    disabled?: boolean,
+    readOnly?: boolean,
+    autoFocus?: boolean,
+    className?: string,
+    helperText?: string,
+    name?: string,
+    helperTextColor?: string,
+    style?: CSSProperties,
+    register?: UseFormRegister<{}>,
+}
+
+export class TextArea extends React.Component<TextAreaProps> {
+    private containerRef = createRef<HTMLDivElement>()
+
+    getTextarea = () => {
+        return this.containerRef.current?.querySelector("textarea")
+    }
+
+    render(): React.ReactNode {
+        return <div
+            ref={this.containerRef}
+            id={this.props.id}
+            className={`${styles['text-area-container']} row ${this.props.className ?? 'body-3'} ${this.props.helperText?.length ? styles['helper-text'] : ""}`}
+            helper-text={this.props.helperText}
+            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
+        >
+            {this.props.register ?
+                <textarea
+                    name={this.props.name}
+                    autoFocus={this.props.autoFocus}
+                    {...this.props.register}
+                    maxLength={this.props.maxLength}
+                    placeholder={this.props.placeholder}
+                    readOnly={this.props.readOnly}
+                    disabled={this.props.disabled}
+                    onFocus={this.props.onFocus}
+                /> : <textarea
+                    autoFocus={this.props.autoFocus}
+                    maxLength={this.props.maxLength}
+                    name={this.props.name}
+                    defaultValue={this.props.defaultValue}
+                    value={this.props.value}
+                    placeholder={this.props.placeholder}
+                    readOnly={this.props.readOnly}
+                    disabled={this.props.disabled}
+                    onChange={this.props.onChange}
+                    onFocus={this.props.onFocus}
+                    onBlur={this.props.onBlur}
+                />}
+        </div>
+    }
+}

package/src/component/text-field/text-field.module.css

@@ -0,0 +1,71 @@
+.text-field-container {
+    position: relative;
+    box-sizing: border-box;
+    padding: 0.8rem 1.5rem;
+    border: var(--neutral-main-border);
+    border-radius: 0.8rem;
+    gap: 0.8rem;
+}
+
+input::-webkit-outer-spin-button,
+input::-webkit-inner-spin-button {
+    -webkit-appearance: none;
+    margin: 0;
+}
+
+.text-field-container[class~="size48"] {
+    padding: 1.2rem 1.5rem;
+}
+
+.text-field-container[class~="size32"] {
+    padding: 0.4rem 1.1rem;
+}
+
+.text-field-container[class~="size24"] {
+    padding: 0 0.7rem;
+}
+
+.text-field-container:has(> input:disabled) {
+    background-color: var(--neutral-disable-background-color) !important;
+    color: var(--neutral-text-disabled-color) !important;
+    pointer-events: none !important;
+}
+
+.text-field-container:focus-within {
+    border-color: var(--primary-main-color);
+}
+
+.text-field-container>input {
+    flex: 1;
+    width: 100%;
+    border: none;
+    outline: none;
+    padding: 0;
+    background-color: transparent !important;
+    font: inherit;
+    color: inherit;
+    font-size: inherit;
+    font-family: inherit;
+    font-weight: inherit;
+    line-height: inherit;
+    text-align: inherit;
+    text-overflow: inherit;
+}
+
+.text-field-container.helper-text {
+    overflow: visible !important;
+    border-color: var(--helper-text-color) !important;
+}
+
+.text-field-container.helper-text::after {
+    content: attr(helper-text);
+    color: var(--helper-text-color);
+    position: absolute;
+    left: 0;
+    bottom: -0.4rem;
+    width: max-content;
+    font-size: 1.2rem;
+    line-height: 1.6rem;
+    font-family: inherit;
+    transform: translateY(100%);
+}

package/src/component/text-field/text-field.tsx

@@ -0,0 +1,102 @@
+import React, { createRef, CSSProperties, ReactNode } from "react";
+import styles from './text-field.module.css'
+import { UseFormRegister } from "react-hook-form";
+
+interface TextFieldProps {
+    id?: string,
+    value?: string,
+    maxLength?: number,
+    defaultValue?: string,
+    onChange?: React.ChangeEventHandler<HTMLInputElement>,
+    onComplete?: React.KeyboardEventHandler<HTMLInputElement>,
+    onBlur?: React.FocusEventHandler<HTMLInputElement>,
+    onFocus?: React.FocusEventHandler<HTMLInputElement>,
+    placeholder?: string,
+    disabled?: boolean,
+    readOnly?: boolean,
+    /** 
+     * default: size40: body-3
+     * recommend: size48: body-3 | size32: body-3 | size24: body-3
+     *  */
+    className?: string,
+    helperText?: string,
+    name?: string,
+    suffix?: ReactNode,
+    prefix?: ReactNode,
+    helperTextColor?: string,
+    style?: CSSProperties,
+    type?: React.HTMLInputTypeAttribute,
+    autoFocus?: boolean,
+    autoComplete?: React.HTMLInputAutoCompleteAttribute,
+    register?: UseFormRegister<{}>,
+}
+
+export class TextField extends React.Component<TextFieldProps> {
+    private containerRef = createRef<HTMLDivElement>()
+
+    getInput = () => {
+        return this.containerRef.current?.querySelector("input")
+    }
+
+    render(): React.ReactNode {
+        return <div
+            ref={this.containerRef}
+            id={this.props.id}
+            className={`${styles['text-field-container']} row ${this.props.className ?? 'body-3'} ${this.props.helperText?.length ? styles['helper-text'] : ""}`}
+            helper-text={this.props.helperText}
+            style={this.props.style ? { ...({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties), ...this.props.style } : ({ '--helper-text-color': this.props.helperTextColor ?? '#e14337' } as CSSProperties)}
+        >
+            {this.props.prefix}
+            {this.props.register ?
+                <input
+                    name={this.props.name}
+                    {...this.props.register}
+                    autoComplete={this.props.autoComplete}
+                    autoFocus={this.props.autoFocus}
+                    maxLength={this.props.maxLength}
+                    type={this.props.type ?? 'text'}
+                    placeholder={this.props.placeholder}
+                    readOnly={this.props.readOnly}
+                    disabled={this.props.disabled}
+                    onFocus={this.props.onFocus}
+                    onKeyDown={this.props.onComplete ? (ev) => {
+                        if (this.props.onComplete) {
+                            switch (ev.key.toLowerCase()) {
+                                case "enter":
+                                    this.props.onComplete(ev)
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                    } : undefined}
+                /> : <input
+                    autoComplete={this.props.autoComplete}
+                    autoFocus={this.props.autoFocus}
+                    maxLength={this.props.maxLength}
+                    name={this.props.name}
+                    type={this.props.type ?? 'text'}
+                    defaultValue={this.props.defaultValue}
+                    value={this.props.value}
+                    placeholder={this.props.placeholder}
+                    readOnly={this.props.readOnly}
+                    disabled={this.props.disabled}
+                    onChange={this.props.onChange}
+                    onFocus={this.props.onFocus}
+                    onBlur={this.props.onBlur}
+                    onKeyDown={this.props.onComplete ? (ev) => {
+                        if (this.props.onComplete) {
+                            switch (ev.key.toLowerCase()) {
+                                case "enter":
+                                    this.props.onComplete(ev)
+                                    break;
+                                default:
+                                    break;
+                            }
+                        }
+                    } : undefined}
+                />}
+            {this.props.suffix}
+        </div>
+    }
+}