fui-material 0.2.60 → 0.2.62

package/src/material/FTextField/FTextField.css

@@ -1,95 +0,0 @@
-.ui.input {
-    font-size: 1em;
-}
-.ui.input {
-    position: relative;
-    border: 2px solid #e4e9f100;
-}
-
-.ui.icon.input>i.icon:not(.link) {
-    pointer-events: none;
-}
-.ui[class*="left icon"].input>i.icon {
-    right: auto;
-    left: 1px;
-    border-radius: .28571429rem 0 0 .28571429rem;
-}
-.ui.icon.input>i.icon {
-    cursor: default;
-    position: absolute;
-    line-height: 1;
-    text-align: center;
-    top: 0;
-    right: 0;
-    margin: 0;
-    height: 100%;
-    width: 2.67142857em;
-    opacity: .5;
-    border-radius: 0 .28571429rem .28571429rem 0;
-    transition: opacity .3s ease;
-}
-i.icon, i.icons {
-    font-size: 1em;
-}
-i.icon {
-    animation: 1.2s spin infinite linear;
-}
-
-.ui.loading.loading.input>i.icon:before {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    margin: -.64285714em 0 0 -.64285714em;
-    width: 1.28571429em;
-    height: 1.28571429em;
-    border-radius: 500rem;
-    border: .2em solid rgba(0,0,0,.1);
-}
-.ui.icon.input>i.icon:after, .ui.icon.input>i.icon:before {
-    left: 0;
-    position: absolute;
-    text-align: center;
-    top: 50%;
-    width: 100%;
-    margin-top: -.5em;
-}
-
-i.icon.search:before {
-    content: "\f002";
-}
-i.icon:before {
-    background: 0 0!important;
-}
-
-.ui.loading.loading.input>i.icon:after {
-    position: absolute;
-    content: '';
-    top: 50%;
-    left: 50%;
-    margin: -.64285714em 0 0 -.64285714em;
-    width: 1.28571429em;
-    height: 1.28571429em;
-    -webkit-animation: button-spin .6s linear;
-    animation: button-spin .6s linear;
-    -webkit-animation-iteration-count: infinite;
-    animation-iteration-count: infinite;
-    border-radius: 500rem;
-    border-color: #2164BE transparent transparent;
-    border-style: solid;
-    border-width: .2em;
-    box-shadow: 0 0 0 1px transparent;
-}
-.ui.icon.input>i.icon:after, .ui.icon.input>i.icon:before {
-    left: 0;
-    position: absolute;
-    text-align: center;
-    top: 50%;
-    width: 100%;
-    margin-top: -.5em;
-}
-
-.ui[class*="left icon"].input>input {
-    padding-left: 2.67142857em!important;
-    padding-right: 1em!important;
-}

package/src/material/FTextField/FTextField.tsx

@@ -1,163 +0,0 @@
-import React, {FC} from "react";
-import {FStack} from "../index";
-import "./FTextField.css"
-import FLoadIcon from "../../icons/FLoadIcon";
-
-export interface IFTextField {
-    label?: string,
-    st?: React.CSSProperties,
-    value?: string | number | readonly string[] | undefined | null,
-    onChange?: React.ChangeEventHandler<HTMLInputElement> | undefined,
-    type?: 'text' | 'number' | 'email' | 'tel' | 'password',
-    onBlur?: React.FocusEventHandler<HTMLInputElement> | undefined,
-    onFocus?: React.FocusEventHandler<HTMLInputElement> | undefined,
-    fullWidth?: boolean,
-    disabled?: boolean,
-    readOnly?: boolean | undefined,
-    defaultValue?: string | number | readonly string[] | undefined,
-    errText?: string[],
-    helpText?: string,
-    onInput?: React.FormEventHandler<HTMLInputElement> | undefined,
-    id?: string,
-    className?: string,
-    load?: boolean,
-    min?: number,
-    max?: number,
-    placeholder?: string | undefined,
-}
-
-const FTextField: FC<IFTextField> = (
-    {
-        label,
-        value,
-        onChange,
-        type = 'text',
-        onBlur,
-        onFocus,
-        fullWidth,
-        disabled,
-        readOnly,
-        defaultValue,
-        errText,
-        helpText,
-        onInput,
-        st,
-        id,
-        className,
-        load = false,
-        min,
-        max,
-        placeholder,
-    }
-) => {
-
-    if (fullWidth) {
-        if (st === undefined) {
-            st = {
-                width: '100%'
-            }
-        } else {
-            st.width = '100%'
-        }
-    } else {
-        if (st === undefined) {
-            st = {
-                width: 'fit-content'
-            }
-        } else {
-            st.width = 'fit-content'
-        }
-    }
-
-    let style = {
-        whiteSpace: 'nowrap',
-        overflow: 'hidden',
-        textOverflow: 'ellipsis',
-    }
-    st = Object.assign({}, st, style);
-
-    if (value === null) {
-        value = ''
-    }
-
-    if (type === 'number' && (value === undefined)) {
-        value = ''
-    }
-
-    return (
-        <React.Fragment>
-            <div
-                className={`
-                form-group ${className !== undefined ? className : ''}`} style={st} id={id}>
-                {label &&
-                    <label className="control-label with-offset" style={{
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    }}>
-                        {label}
-                    </label>
-                }
-                <div className={`${load ? 'ui left icon input loading' : ''}`}>
-                    <input
-                        placeholder={placeholder}
-                        style={{
-                            borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'
-                        }}
-                        min={min}
-                        max={max}
-                        disabled={disabled}
-                        defaultValue={defaultValue}
-                        required
-                        onInput={onInput}
-                        readOnly={readOnly || load}
-                        value={value}
-                        //@ts-ignore
-                        onChange={onChange}
-                        type={type}
-                        className="form-control"
-                        onBlur={onBlur}
-                        onFocus={onFocus}
-                    />
-                    {helpText !== undefined &&
-                        <span
-                            style={{
-                                whiteSpace: 'initial',
-                                color: '#a6a3a3',
-                                fontSize: '12px'
-                            }}
-                        >
-                                    {helpText}
-                                </span>
-                    }
-                    {errText !== undefined && errText.length > 0 &&
-                        <FStack direction={'column'} st={{paddingLeft: '11px'}}>
-                            {
-                                errText?.map((opt, index) => {
-                                    return (
-                                        <span
-                                            key={index}
-                                            style={{
-                                                whiteSpace: 'initial',
-                                                color: 'red'
-                                            }}
-                                        >
-                                            {opt}
-                                        </span>
-                                    )
-                                })
-                            }
-                        </FStack>
-                    }
-                    {load &&
-                        <div className={'input-load'}>
-                            <FLoadIcon size={10}/>
-                        </div>
-                    }
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FTextField;

package/src/material/FTextField/index.ts

@@ -1 +0,0 @@
-export { default } from "./FTextField";

package/src/material/FTimelineComponents/FTimeline/FTimeline.css

@@ -1,82 +0,0 @@
-.fv-tl-block-card {
-    position: relative;
-    max-width: 100%;
-}
-
-.fv-tl-block-card:nth-child(odd) {
-    padding: 30px 0 30px 30px;
-}
-
-.fv-tl-block-card:nth-child(even) {
-    padding: 30px 30px 30px 0;
-}
-
-.fv-tl-block-card::before {
-    content: "";
-    position: absolute;
-    width: 50%;
-    border: solid #0d6efd;
-}
-
-.fv-tl-block-card:nth-child(odd)::before {
-    left: 0px;
-    top: -4.5px;
-    bottom: -4.5px;
-    border-width: 5px 0 5px 5px;
-    border-radius: 50px 0 0 50px;
-}
-
-.fv-tl-block-card:nth-child(even)::before {
-    right: 0;
-    top: 0;
-    bottom: 0;
-    border-width: 5px 5px 5px 0;
-    border-radius: 0 50px 50px 0;
-}
-
-.fv-tl-block-card:first-child::before {
-    border-top: 0;
-    border-top-left-radius: 0;
-}
-
-.fv-tl-block-card:last-child:nth-child(odd)::before {
-    border-bottom: 0;
-    border-bottom-left-radius: 0;
-}
-
-.fv-tl-block-card:last-child:nth-child(even)::before {
-    border-bottom: 0;
-    border-bottom-right-radius: 0;
-}
-
-.fv-tl-card {
-    position: inherit;
-    z-index: 1;
-}
-
-.fv-tl-line-circle {
-    color: #0d6efd;
-    position: relative;
-}
-
-.fv-tl-line-circle::before {
-    content: "";
-    position: absolute;
-    width: 10px;
-    height: 10px;
-    background: white;
-    border-radius: 999px;
-    border: 3px solid #0d6efd;
-}
-
-.fv-tl-block-card:nth-child(even) > .fv-tl-line-circle {
-    text-align: right;
-}
-
-.fv-tl-block-card:nth-child(odd) > .fv-tl-line-circle::before {
-    left: -32px;
-}
-
-.fv-tl-block-card:nth-child(even) > .fv-tl-line-circle::before {
-    right: -30px;
-}

package/src/material/FTimelineComponents/FTimeline/FTimeline.tsx

@@ -1,28 +0,0 @@
-import React, {FC} from 'react';
-import "./FTimeline.css"
-
-export interface IFTimeline {
-    children?: React.ReactChild | React.ReactNode,
-    st?: React.CSSProperties,
-    id?: string,
-    className?: string
-}
-
-const FTimeline: FC<IFTimeline> = ({
-                                       children,
-                                       st,
-                                       id,
-                                       className
-                                   }) => {
-
-    return (
-        <React.Fragment>
-            <div className={`fv-timeline ${className !== undefined ? className : ''}`} style={st} id={id}>
-                {children}
-            </div>
-        </React.Fragment>
-
-    );
-};
-
-export default FTimeline;

package/src/material/FTimelineComponents/FTimeline/index.ts

@@ -1 +0,0 @@
-export { default } from "./FTimeline";

package/src/material/FTimelineComponents/FTimelineCard/FTimelineCard.tsx

@@ -1,31 +0,0 @@
-import React, {FC} from 'react';
-import {FPaper} from "../../index";
-
-export interface IFTimelineCard {
-    children?: React.ReactChild | React.ReactNode,
-    st?: React.CSSProperties,
-    title?: string,
-    id?: string,
-    className?: string
-}
-
-const FTimelineCard: FC<IFTimelineCard> = ({
-                                               children,
-                                               st,
-                                               title,
-                                               id,
-                                               className
-                                           }) => {
-    return (
-        <React.Fragment>
-            <div className={`fv-tl-block-card ${className !== undefined ? className : ''}`} id={id}>
-                <div className={'fv-tl-line-circle'}/>
-                <FPaper label={title} st={st} className={'fv-tl-card'}>
-                    {children}
-                </FPaper>
-            </div>
-        </React.Fragment>
-    );
-};
-
-export default FTimelineCard;

package/src/material/FTimelineComponents/FTimelineCard/index.ts

@@ -1 +0,0 @@
-export { default } from "./FTimelineCard";

package/src/material/SelectComponents/FSelect/FSelect.tsx

@@ -1,121 +0,0 @@
-import React, {FC} from "react";
-import "./FSelect.css"
-import {FStack} from "../../index";
-import FLoadIcon from "../../../icons/FLoadIcon";
-
-export interface IFSelect {
-    label?: string
-    st?: React.CSSProperties
-    onChange?: React.ChangeEventHandler<HTMLSelectElement> | undefined
-    children?: React.ReactChild | React.ReactNode
-    value?: string | number | readonly string[] | undefined
-    multiple?: boolean | undefined
-    size?: number | undefined
-    fullWidth?: boolean
-    disabled?: boolean
-    defaultValue?: string | number | readonly string[] | undefined,
-    id?: string,
-    className?: string,
-    load?: boolean,
-    errText?: string[],
-    helpText?: string,
-}
-
-const FSelect: FC<IFSelect> = ({
-                                   label,
-                                   st,
-                                   onChange,
-                                   children,
-                                   value,
-                                   multiple,
-                                   size,
-                                   fullWidth,
-                                   disabled,
-                                   defaultValue,
-                                   id,
-                                   className,
-                                   load = false,
-                                   errText,
-                                   helpText,
-                               }) => {
-
-    return (
-        <React.Fragment>
-            <div
-                className={`form-group ${className !== undefined ? className : ''}`}
-                style={{
-                    width: fullWidth ? '100%' : 'fit-content',
-                    whiteSpace: 'nowrap',
-                    overflow: 'hidden',
-                    textOverflow: 'ellipsis'
-
-                }}
-                id={id}
-            >
-                <label
-                    className="control-label with-offset"
-                    style={{
-                        whiteSpace: 'nowrap',
-                        overflow: 'hidden',
-                        textOverflow: 'ellipsis'
-                    }}
-                >
-                    {label}
-                </label>
-                <div className={`${load ? 'ui left icon input loading' : ''}`}>
-                    <select
-                        disabled={disabled || load}
-                        style={Object.assign({}, st, {borderColor: errText !== undefined && errText.length > 0 ? 'red' : '#C4C4C4'})}
-                        className="form-control"
-                        onChange={onChange}
-                        value={load ? undefined : value}
-                        multiple={multiple}
-                        size={size}
-                        defaultValue={defaultValue}
-                    >
-                        {!load &&
-                            children
-                        }
-                    </select>
-                    {helpText !== undefined &&
-                        <span
-                            style={{
-                                whiteSpace: 'initial',
-                                color: '#a6a3a3',
-                                fontSize: '12px'
-                            }}
-                        >
-                                    {helpText}
-                                </span>
-                    }
-                    {errText !== undefined && errText.length > 0 &&
-                        <FStack direction={'column'} st={{paddingLeft: '11px'}}>
-                            {
-                                errText?.map((opt, index) => {
-                                    return (
-                                        <span
-                                            key={index}
-                                            style={{
-                                                whiteSpace: 'initial',
-                                                color: 'red'
-                                            }}
-                                        >
-                                            {opt}
-                                        </span>
-                                    )
-                                })
-                            }
-                        </FStack>
-                    }
-                    {load &&
-                        <div className={'input-load'}>
-                            <FLoadIcon size={10}/>
-                        </div>
-                    }
-                </div>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FSelect

package/src/material/SelectComponents/FSelect/index.ts

@@ -1 +0,0 @@
-export { default } from "./FSelect";

package/src/material/SelectComponents/FSelectItem/FSelectItem.tsx

@@ -1,42 +0,0 @@
-import React, {FC} from "react";
-
-export interface IFSelectItem {
-    st?: React.CSSProperties
-    value?: string | number | readonly string[] | undefined
-    children?: React.ReactChild | React.ReactNode
-    disabled?: boolean
-    onClick?: React.MouseEventHandler<HTMLOptionElement> | undefined
-    selected?: boolean
-    className?: string,
-    id?: string
-}
-
-const FSelectItem: FC<IFSelectItem> = ({
-                                           st,
-                                           value,
-                                           children,
-                                           onClick,
-                                           disabled,
-                                           className,
-                                           id
-                                       }) => {
-
-    return (
-        <React.Fragment>
-            <option
-                selected={true}
-                disabled={disabled}
-                onClick={onClick}
-                style={st}
-                value={value}
-                className={className}
-                id={id}
-            >
-                {children}
-            </option>
-        </React.Fragment>
-    )
-
-}
-
-export default FSelectItem

package/src/material/SelectComponents/FSelectItem/index.ts

@@ -1 +0,0 @@
-export { default } from "./FSelectItem";

package/src/material/TableComponents/FTable/FTable.css

@@ -1,62 +0,0 @@
-.table-responsive .table {
-    min-width: 100%;
-    margin-bottom: 10px;
-}
-
-.table-bordered.table-bordered-half {
-    border-width: 0;
-}
-
-table, .table {
-    font-size: 13px;
-    color: #656565;
-    border-collapse: collapse;
-    border-top-width: 0;
-}
-
-.table-bordered {
-    border: 1px solid #C4C4C4;
-}
-
-.table {
-    width: 100%;
-    max-width: 100%;
-    margin-bottom: 20px;
-}
-
-table {
-    background-color: transparent;
-}
-
-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-}
-
-table thead tr {
-    border-top: 0;
-}
-table thead tr th {
-    border-top: 0;
-}
-table thead tr th:first-child {
-    border-left: 0;
-}
-table thead tr th:last-child {
-    border-right: 0;
-}
-table tbody tr td:first-child {
-    border-left: 0;
-}
-table tbody tr td:last-child {
-    border-right: 0;
-}
-
-table > tbody > tr > th, table > tbody > tr > td, table > tfoot > tr > th, table > tfoot > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
-    vertical-align: middle;
-}
-
-.table > thead > tr > th, .table > thead > tr > td, .table > tbody > tr > th, .table > tbody > tr > td, .table > tfoot > tr > th, .table > tfoot > tr > td {
-    padding: 12px 20px;
-    line-height: 1.42857;
-}

package/src/material/TableComponents/FTable/FTable.tsx

@@ -1,39 +0,0 @@
-import React, {FC} from "react";
-import "./FTable.css"
-import {FStack} from "../../index";
-
-export interface IFTable {
-    st?: React.CSSProperties
-    children?: React.ReactChild | React.ReactNode
-    id?: string
-    className?: string
-    onClick?: React.MouseEventHandler<HTMLTableElement> | undefined,
-    overflowX?: 'visible' | 'hidden' | 'clip' | 'scroll' | 'auto' | undefined
-}
-
-
-const FTable: FC<IFTable> = ({
-                                 st,
-                                 children,
-                                 id,
-                                 className,
-                                 onClick,
-                                 overflowX="auto"
-                             }) => {
-    return (
-        <React.Fragment>
-            <FStack direction={'row'} spacing={2} st={{overflowX: overflowX}}>
-                <table
-                    className={`table table-bordered table-bordered-half ${className}`}
-                    style={st}
-                    id={id}
-                    onClick={onClick}
-                >
-                    {children}
-                </table>
-            </FStack>
-        </React.Fragment>
-    );
-};
-
-export default FTable;

package/src/material/TableComponents/FTable/index.ts

@@ -1 +0,0 @@
-export { default } from "./FTable";