fui-material 0.2.60 → 0.2.62

package/src/material/FButton/FButton.css

@@ -1,50 +0,0 @@
-.btn {
-    height: min-content;
-}
-
-.btn-default-primary {
-    color: #2F80ED !important;
-    background-color: #fff !important;
-    border-color: #2F80ED !important;
-}
-.btn-default-secondary {
-    color: #6c757d !important;
-    background-color: #fff !important;
-    border-color: #6c757d !important;
-}
-.btn-default-success {
-    color: #2E7D32 !important;
-    background-color: #EFF5F0 !important;
-    border-color: #2E7D32 !important;
-}
-.btn-default-danger {
-    color: #dc3545 !important;
-    background-color: #fff !important;
-    border-color: #dc3545 !important;
-}
-.btn-default-warning {
-    color: #ffc107 !important;
-    background-color: #fff !important;
-    border-color: #ffc107 !important;
-}
-.btn-default-info {
-    color: #0dcaf0 !important;
-    background-color: #fff !important;
-    border-color: #0dcaf0 !important;
-}
-.btn-default-light {
-    color: #f8f9fa !important;
-    background-color: #fff !important;
-    border-color: #f8f9fa !important;
-}
-.btn-default-dark {
-    color: #212529 !important;
-    background-color: #fff !important;
-    border-color: #212529 !important;
-}
-.btn-default-link {
-    color: #0a58ca !important;
-    background-color: #fff !important;
-    border-color: #0a58ca !important;
-    text-decoration: underline !important;
-}

package/src/material/FButton/FButton.tsx

@@ -1,69 +0,0 @@
-import React from "react";
-import './FButton.css'
-import "../statick/Colors.css"
-
-export interface IFButton {
-    children?: React.ReactChild | React.ReactNode,
-    variant?: 'contained' | 'default'
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: 'btn-lg' | 'btn-sm' | 'btn-xs'
-    disabled?: boolean
-    onClick?: React.MouseEventHandler<HTMLButtonElement> | undefined
-    st?: React.CSSProperties,
-    className?: string
-    fullWidth?: boolean
-    id?: string,
-    type?: "button" | "submit" | "reset" | undefined
-}
-
-const FButton = (
-    {
-        children,
-        variant = 'contained',
-        color = 'primary',
-        size = 'btn-sm',
-        disabled,
-        onClick,
-        st,
-        className,
-        fullWidth,
-        id,
-        type = 'button'
-    }: IFButton
-) => {
-
-    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"
-        }
-    }
-
-    return (
-        <React.Fragment>
-            <button
-                disabled={disabled}
-                type={type}
-                className={`btn ${variant === 'contained' ? 'btn' : 'btn-default'}-${color} ${size} ${className !== undefined ? className : ''}`}
-                onClick={onClick}
-                style={st}
-                id={id}
-            >
-                {children}
-            </button>
-        </React.Fragment>
-    )
-}
-
-export default FButton

package/src/material/FButton/index.ts

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

package/src/material/FButtonFile/FButtonFile.css

@@ -1,180 +0,0 @@
-.btn-default-primary {
-    color: #2F80ED !important;
-    background-color: #fff !important;
-    border-color: #2F80ED !important;
-}
-.btn-default-secondary {
-    color: #6c757d !important;
-    background-color: #fff !important;
-    border-color: #6c757d !important;
-}
-.btn-default-success {
-    color: #198754 !important;
-    background-color: #fff !important;
-    border-color: #198754 !important;
-}
-.btn-default-danger {
-    color: #dc3545 !important;
-    background-color: #fff !important;
-    border-color: #dc3545 !important;
-}
-.btn-default-warning {
-    color: #ffc107 !important;
-    background-color: #fff !important;
-    border-color: #ffc107 !important;
-}
-.btn-default-info {
-    color: #0dcaf0 !important;
-    background-color: #fff !important;
-    border-color: #0dcaf0 !important;
-}
-.btn-default-light {
-    color: #f8f9fa !important;
-    background-color: #fff !important;
-    border-color: #f8f9fa !important;
-}
-.btn-default-dark {
-    color: #212529 !important;
-    background-color: #fff !important;
-    border-color: #212529 !important;
-}
-.btn-default-link {
-    color: #0a58ca !important;
-    background-color: #fff !important;
-    border-color: #0a58ca !important;
-    text-decoration: underline !important;
-}
-
-.cl-btn-3 {
-    width: 10px;
-    height: 10px;
-    position: relative;
-    transform: rotate(45deg) scale(2);
-}
-
-.cl-btn-3 .top,
-.cl-btn-3 .bot {
-    display: block;
-    background: #337AB7;
-    position: absolute;
-    top: 50%;
-    left: 50%;
-    animation-timing-function: cubic-bezier(1, 0, 0, 1);
-    animation-iteration-count: 1;
-}
-
-.cl-btn-3 .top {
-    height: 100%;
-    width: 2px;
-    margin-left: -1px;
-    transform: skewY(45deg);
-    top: 0;
-}
-
-.cl-btn-3 .bot {
-    width: 100%;
-    height: 2px;
-    margin-top: -1px;
-    transform: skewX(-45deg);
-    left: 0;
-}
-
-.cl-btn-3:hover {
-    cursor: pointer;
-}
-
-.cl-btn-3:hover .top {
-    animation: top-out 0.25s forwards, top-in 0.25s forwards 0.25s;
-}
-
-.cl-btn-3:hover .bot {
-    animation: bot-out 0.25s forwards 0.1s, bot-in 0.25s forwards 0.35s;
-}
-
-@-webkit-keyframes top-out {
-    from {
-        top: 0%;
-        height: 100%;
-    }
-    to {
-        top: 100%;
-        height: 0%;
-    }
-}
-
-@keyframes top-out {
-    from {
-        top: 0%;
-        height: 100%;
-    }
-    to {
-        top: 100%;
-        height: 0%;
-    }
-}
-
-@-webkit-keyframes top-in {
-    from {
-        top: -100%;
-        height: 0%;
-    }
-    to {
-        top: 0%;
-        height: 100%;
-    }
-}
-
-@keyframes top-in {
-    from {
-        top: -100%;
-        height: 0%;
-    }
-    to {
-        top: 0%;
-        height: 100%;
-    }
-}
-
-@-webkit-keyframes bot-out {
-    from {
-        left: 0%;
-        width: 100%;
-    }
-    to {
-        left: 100%;
-        width: 0%;
-    }
-}
-
-@keyframes bot-out {
-    from {
-        left: 0%;
-        width: 100%;
-    }
-    to {
-        left: 100%;
-        width: 0%;
-    }
-}
-
-@-webkit-keyframes bot-in {
-    from {
-        left: -100%;
-        width: 0%;
-    }
-    to {
-        left: 0%;
-        width: 100%;
-    }
-}
-
-@keyframes bot-in {
-    from {
-        left: -100%;
-        width: 0%;
-    }
-    to {
-        left: 0%;
-        width: 100%;
-    }
-}

package/src/material/FButtonFile/FButtonFile.tsx

@@ -1,157 +0,0 @@
-import React, {useRef, useState} from "react";
-import './FButtonFile.css'
-import {FStack} from "../index";
-
-export interface IFButtonFile {
-    children?: React.ReactChild | React.ReactNode,
-    variant?: 'contained' | 'default'
-    color?: 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info' | 'light' | 'dark' | 'link'
-    size?: 'btn-lg' | 'btn-sm' | 'btn-xs'
-    disabled?: boolean
-    st?: React.CSSProperties,
-    className?: string
-    fullWidth?: boolean
-    id?: string,
-    onChange: (file: FileList | null) => void,
-    multiple?: boolean,
-    maxCount?: number,
-    accept?: string
-    spacing?: 0 | 0.5 | 1 | 2 | 3 | 4 | 8 | 12 | undefined,
-    direction?: "row" | "row-reverse" | "column" | "column-reverse" | undefined
-}
-
-const FButtonFile = (
-    {
-        children,
-        variant = 'contained',
-        color = 'primary',
-        size = 'btn-sm',
-        disabled,
-        st,
-        className,
-        fullWidth,
-        id,
-        onChange,
-        multiple = false,
-        maxCount,
-        accept,
-        spacing,
-        direction
-    }: IFButtonFile
-) => {
-
-    const fileRef = useRef();
-    const [files, setFiles] = useState<[]>([]);
-
-    if (fullWidth) {
-        if (st === undefined) {
-            st = {
-                width: '100%'
-            }
-        } else {
-            st.width = '100%'
-        }
-    }
-
-    return (
-        <React.Fragment>
-            <button
-                disabled={disabled}
-                className={`btn ${variant === 'contained' ? 'btn' : 'btn-default'}-${color} ${size} ${className !== undefined ? className : ''}`}
-                style={st}
-                id={id}
-                //@ts-ignore
-                onClick={() => fileRef.current.click()}
-            >
-                {children}
-            </button>
-            <input
-                style={{display: 'none'}}
-                //@ts-ignore
-                ref={fileRef}
-                onChange={(e) => {
-
-                    const newFiles = [...files]
-
-                    //@ts-ignore
-                    Object.values(e.target.files).map((opt) => {
-                        //@ts-ignore
-                        newFiles.push(opt)
-                    })
-
-                    // @ts-ignore
-                    setFiles(newFiles)
-                    // @ts-ignore
-                    onChange(newFiles)
-                }}
-                multiple={multiple}
-                type="file"
-                hidden
-                maxCount={maxCount}
-                accept={accept}
-            />
-            <div className="custom-files-preview" id="files" style={{marginTop: '16px'}}>
-                <FStack direction={direction} spacing={spacing}>
-                    {files !== undefined &&
-                        files.map((opt, index) => {
-                            return (
-                                <span
-                                    // @ts-ignore
-                                    key={`file-${opt.name}-${Math.round(+opt.size / 1024)}}`}
-                                    className="tag tag-default tag-file tag-block"
-                                    style={{
-                                        width: 'fit-content',
-                                        display: 'flex',
-                                        justifyContent: 'flex-end',
-                                    }}
-                                >
-                                    <span className="tag-file-name">
-                                        {/*@ts-ignore*/}
-                                        {opt.name}
-                                    </span>
-                                    <span className="tag-file-size">
-                                        {/*@ts-ignore*/}
-                                        ({Math.round(+opt.size / 1024)} КБ)
-                                    </span>
-                                        <div
-                                            className="cl-btn-3"
-                                            style={{
-                                                marginLeft: '16px',
-                                                marginTop: '2px',
-                                                width: '10px',
-                                                height: '10px',
-                                        }}
-                                             onClick={() => {
-                                                 let arFiles = [...files]
-
-                                                 arFiles.splice(index, 1)
-
-                                                 //@ts-ignore
-                                                 setFiles(arFiles)
-
-                                                 if (arFiles.length === 0) {
-                                                     // @ts-ignore
-                                                     fileRef.current.value = null;
-                                                     // @ts-ignore
-                                                     onChange(null)
-                                                 } else {
-                                                     // @ts-ignore
-                                                     onChange(arFiles)
-                                                 }
-
-                                             }}
-                                        >
-                                            <span className="top"></span>
-                                            <span className="bot"></span>
-                                        </div>
-                                </span>
-                            )
-                        })
-                    }
-                </FStack>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FButtonFile

package/src/material/FButtonFile/index.ts

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

package/src/material/FCheckbox/Checkbox.css

@@ -1,57 +0,0 @@
-.f-checkbox label {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-    color: #656565;
-    font-family: "SF UI Display", sans-serif;
-    font-size: 14px;
-    font-weight: 500;
-    align-items: center;
-}
-
-.f-checkbox label input[type=checkbox] {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    background-color: #fff;
-    margin: 0;
-    font: inherit;
-    color: #fff;
-    width: 1.15em;
-    height: 1.15em;
-    border: 1px solid #C4C4C4;
-    border-radius: 0.15em;
-    display: grid;
-    place-content: center;
-}
-
-.f-checkbox label input[type=checkbox]::before {
-    content: "";
-    width: 10px;
-    height: 10px;
-    -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-    clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
-    transform: scale(0);
-    transform-origin: bottom left;
-    transition: 120ms transform ease-in-out;
-    background-color: #fff;
-}
-
-.f-checkbox label input[type=checkbox]:checked::before {
-    transform: scale(1);
-}
-
-.f-checkbox label input[type=checkbox]:checked {
-    transform: scale(1);
-    border: 1px solid #2F80ED;
-    background-color: #2F80ED;
-    color: #fff;
-}
-
-.f-checkbox label input[type=checkbox]:focus {
-    outline: none !important;
-}
-
-.f-checkbox label input[type=checkbox]:disabled {
-    cursor: not-allowed;
-}

package/src/material/FCheckbox/FCheckbox.tsx

@@ -1,45 +0,0 @@
-import React, {FC} from "react";
-import "./Checkbox.css"
-
-export interface IFCheckbox {
-    label?: React.ReactChild | React.ReactNode,
-    onChange: React.ChangeEventHandler<HTMLInputElement> | undefined
-    defaultChecked?: boolean | undefined
-    className?: string
-    id?: string
-    st?: React.CSSProperties | undefined,
-    checked?: boolean | undefined,
-    disabled?: boolean
-}
-
-
-const FCheckbox: FC<IFCheckbox> = ({
-                                       label,
-                                       onChange,
-                                       defaultChecked,
-                                       className,
-                                       id,
-                                       st,
-                                       checked,
-                                       disabled
-                                   }) => {
-
-    return (
-        <React.Fragment>
-            <div className={`f-checkbox ${className !== undefined ? className : ''}`} id={id} style={st}>
-                <label>
-                    <input
-                        defaultChecked={defaultChecked}
-                        type="checkbox"
-                        onChange={onChange}
-                        checked={checked}
-                        disabled={disabled}
-                    />
-                    {label}
-                </label>
-            </div>
-        </React.Fragment>
-    )
-}
-
-export default FCheckbox;

package/src/material/FCheckbox/index.ts

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