wini-web-components 2.8.4 → 2.8.6

package/src/component/table/table.tsx

@@ -1,108 +0,0 @@
-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

@@ -1,108 +0,0 @@
-.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

@@ -1,31 +0,0 @@
-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

@@ -1,27 +0,0 @@
-.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

@@ -1,24 +0,0 @@
-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

@@ -1,57 +0,0 @@
-.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

@@ -1,65 +0,0 @@
-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

@@ -1,71 +0,0 @@
-.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

@@ -1,102 +0,0 @@
-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>
-    }
-}