fui-material 1.16.2 → 1.16.4

package/src/material/CarouselComponent/FCarouselItem/FCarouselItem.tsx

@@ -0,0 +1,50 @@
+import {FC, Fragment} from 'react';
+
+import '../static/carousel.css'
+
+export interface FCarouselItem {
+    children?: React.ReactElement | React.ReactNode,
+    className?: string,
+    id?: string,
+    index: number,
+    st?: React.CSSProperties,
+    widthCard?: number | string,
+    heightCard?: number | string,
+    onClick?: React.MouseEventHandler<HTMLLIElement> | undefined,
+}
+
+const FCarouselItem: FC<FCarouselItem> = (
+    {
+        index,
+        children,
+        className,
+        id,
+        st,
+        widthCard = '390px',
+        heightCard = '250px',
+        onClick
+    }
+) => {
+
+    const style = Object.assign({}, {width: widthCard, height: heightCard}, st)
+
+    return (
+        <Fragment>
+            <li
+                key={index}
+                id={id}
+                style={style}
+                className={className}
+                onClick={onClick}
+            >
+                <figure>
+                    <picture>
+                        {children}
+                    </picture>
+                </figure>
+            </li>
+        </Fragment>
+    );
+};
+
+export default FCarouselItem;

package/src/material/CarouselComponent/FCarouselItem/index.ts

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

package/src/material/CarouselComponent/static/arrow-left.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="128px" id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" width="128px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><line style="fill:none;stroke:#2F3435;stroke-width:12;stroke-linecap:square;stroke-miterlimit:10;" x1="87.5" x2="40.5" y1="111" y2="64"/><line style="fill:none;stroke:#2F3435;stroke-width:12;stroke-linecap:square;stroke-miterlimit:10;" x1="40.5" x2="87.5" y1="64" y2="17"/></g></svg>

package/src/material/CarouselComponent/static/arrow-right.svg

@@ -0,0 +1 @@
+<?xml version="1.0" ?><!DOCTYPE svg  PUBLIC '-//W3C//DTD SVG 1.1//EN'  'http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd'><svg height="128px" id="Layer_1" style="enable-background:new 0 0 128 128;" version="1.1" viewBox="0 0 128 128" width="128px" xml:space="preserve" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><g><line style="fill:none;stroke:#2F3435;stroke-width:12;stroke-linecap:square;stroke-miterlimit:10;" x1="40.5" x2="87.5" y1="17" y2="64"/><line style="fill:none;stroke:#2F3435;stroke-width:12;stroke-linecap:square;stroke-miterlimit:10;" x1="87.5" x2="40.5" y1="64" y2="111"/></g></svg>

package/src/material/CarouselComponent/static/carousel.css

@@ -0,0 +1,76 @@
+.f-carousel-container {
+    display: flex;
+    align-items: center;
+    position: relative;
+    width: fit-content;
+}
+
+.f-horizontal-scroll-bar {
+    horiz-align: center;
+    padding-left: 0;
+    display: grid;
+    grid-auto-flow: column;
+    grid-gap: calc(16px / 2);
+    overflow-x: auto;
+    overscroll-behavior-x: contain;
+    scroll-snap-type: x mandatory;
+    scroll-padding-inline: 16px;
+
+    /* Скрыть полосу прокрутки */
+    scrollbar-width: none; /* Для Firefox */
+    -ms-overflow-style: none; /* Для Internet Explorer и Edge */
+}
+
+.f-horizontal-scroll-bar::-webkit-scrollbar {
+    display: none; /* Для Chrome, Safari и Opera */
+}
+
+.f-horizontal-scroll-bar figure {
+    scroll-snap-align: center;
+}
+
+.f-horizontal-scroll-bar li {
+    scroll-snap-align: none center;
+    list-style-type: none;
+}
+
+.f-carousel-button {
+    background-color: white;
+    width: 64px;
+    height: 64px;
+    border-radius: 50%;
+    padding: 10px 20px;
+    cursor: pointer;
+    border: none;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    transition: transform .2s;
+
+    position: absolute;
+}
+
+.f-carousel-button.next {
+    right: -32px;
+}
+.f-carousel-button.prev {
+    left: -32px;
+}
+
+
+.f-carousel-button img {
+    width: 48px;
+    height: 48px;
+}
+
+.f-carousel-button:hover {
+    transform: translateX(5px);
+    transition: transform .2s;
+}
+
+.f-carousel-button:active {
+    transform: scale(.98);
+    transition: transform .2s;
+}

package/src/material/Dialog/FDialog/FDialog.tsx

@@ -0,0 +1,63 @@
+// *********************************************************************************************************************
+// Родительский компонет диалогового окна
+// *********************************************************************************************************************
+
+import { FC, useEffect } from "react";
+
+import ReactDOM from 'react-dom';
+
+import "../style/style.css"
+
+
+export interface IFDialog {
+    openAndClose: boolean
+    id?: string,
+    className?: string
+    st?: React.CSSProperties,
+    children?: React.ReactElement | React.ReactNode,
+    hide?: boolean
+    closeButtonBackPage?: React.Dispatch<React.SetStateAction<boolean>>,
+    width?: 'xs' | 'md' | 'lg' | 'xxl' | 'adaptive'
+}
+
+const FDialog: FC<IFDialog> = ({
+    openAndClose,
+    closeButtonBackPage,
+    hide,
+    children,
+    id,
+    className,
+    st,
+    width = 'lg'
+}) => {
+
+    useEffect(() => {
+        if (document.querySelectorAll(".active-dialog").length > 0) {
+            document.body.classList.add('open-dialog')
+        } else {
+            document.body.classList.remove('open-dialog')
+        }
+    }, [openAndClose])
+
+    if (!openAndClose) return null;
+    return ReactDOM.createPortal(
+        <div
+            className={`${openAndClose ? 'f-dialog active-dialog' : 'f-dialog'} ${className !== undefined ? className : ''}`}
+            onClick={() => closeButtonBackPage && closeButtonBackPage(false)}
+            id={id}
+            style={st}
+        >
+            <div
+                className={`${openAndClose ? 'f-dialog-content active' : 'f-dialog-content'} ${hide ? 'hide' : ''}`}
+                style={{
+                    width: width === 'xxl' ? '95vw' : width === 'lg' ? '80vw' : width === 'md' ? '65vw' : width === 'xs' ? '50vw' : 'fit-content'
+                }}
+                onClick={(e) => e.stopPropagation()}
+            >
+                {children}
+            </div>
+        </div>
+        , document.body);
+}
+
+export default FDialog

package/src/material/Dialog/FDialog/index.ts

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

package/src/material/Dialog/FDialogBody/FDialogBody.tsx

@@ -0,0 +1,40 @@
+// *********************************************************************************************************************
+// Основная часть компонента диалогового окна
+// *********************************************************************************************************************
+
+
+import { FC } from "react";
+
+export interface IFDialogBody {
+    st?: React.CSSProperties
+    children?: React.ReactElement | React.ReactNode
+    scroll?: boolean
+}
+
+
+const FDialogBody: FC<IFDialogBody> = ({
+    st,
+    children,
+    scroll = true
+}) => {
+
+    let style: React.CSSProperties = {
+
+    }
+
+    if (scroll) {
+        style['overflowY'] = 'auto'
+    }
+
+    if (st !== undefined) {
+        style = Object.assign(style, st)
+    }
+
+    return (
+        <div className="dialog-body" style={style}>
+            {children}
+        </div>
+    )
+}
+
+export default FDialogBody

package/src/material/Dialog/FDialogBody/index.ts

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

package/src/material/Dialog/FDialogFooter/FDialogFooter.tsx

@@ -0,0 +1,30 @@
+// *********************************************************************************************************************
+// Нижняя часть компонента диалогового окна
+// *********************************************************************************************************************
+
+
+import { FC } from "react";
+
+export interface IFDialogFooter {
+    children?: React.ReactElement | React.ReactNode,
+    className?: string,
+    st?: React.CSSProperties | undefined,
+    id?: string,
+}
+
+
+const FDialogFooter: FC<IFDialogFooter> = ({
+    children,
+    className,
+    st,
+    id
+}) => {
+
+    return (
+        <div className={`dialog-footer ${className !== undefined ? className : ''}`} id={id} style={st}>
+            {children}
+        </div>
+    )
+}
+
+export default FDialogFooter

package/src/material/Dialog/FDialogFooter/index.ts

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

package/src/material/Dialog/FDialogHeader/FDialogHeader.tsx

@@ -0,0 +1,33 @@
+// *********************************************************************************************************************
+// Головная часть компонента диалогового окна
+// *********************************************************************************************************************
+
+import { FC } from "react";
+
+import FCloseIcon from "@icons/FCloseIcon";
+
+export interface IFDialogHeader {
+    title?: string
+    handleClose?: () => void
+}
+
+const FDialogHeader: FC<IFDialogHeader> = ({
+    title,
+    handleClose,
+}) => {
+
+    return (
+        <div className="dialog-header">
+            <div>
+                <h3 className="dialog-title" style={{ margin: 0 }}>
+                    {title === undefined ? '' : title}
+                </h3>
+            </div>
+            {handleClose !== undefined &&
+                <FCloseIcon st={{ cursor: "pointer" }} handleClose={handleClose} color={'primary'} size={30} />
+            }
+        </div>
+    )
+}
+
+export default FDialogHeader

package/src/material/Dialog/FDialogHeader/index.ts

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

package/src/material/Dialog/style/style.css

@@ -0,0 +1,74 @@
+.f-dialog {
+    z-index: 9999;
+    height: 100vh;
+    width: 100vw;
+    background-color: rgba(47, 128, 237, 0.35);
+    position: fixed;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    opacity: 0;
+    pointer-events: none;
+    transition: 1s;
+}
+
+.f-dialog.active-dialog {
+    opacity: 1;
+    pointer-events: all;
+}
+
+.f-dialog-content {
+    padding: 20px;
+    border-radius: 12px;
+    background-color: white;
+    transform: scale(0.5);
+    transition: 1s;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-direction: column;
+    /* максимально возможная ширина */
+    max-width: 80vw;
+    max-height: 95vh;
+}
+
+.dialog-body {
+    width: 100%;
+}
+
+.f-dialog-content.active {
+    transform: scale(1);
+}
+
+.f-dialog-content.hide {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.f-dialog-content.hide {
+    opacity: 0;
+    pointer-events: none;
+}
+
+/* Заголовок с кнопкой закрытия */
+.dialog-header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    width: 100%;
+    padding: 8px 16px 8px 16px;
+    gap: 24px;
+}
+
+/* Заголовок с кнопкой закрытия */
+.dialog-footer {
+    width: 100%;
+    padding: 16px 8px 8px 8px;
+}
+
+body.open-dialog {
+    overflow: hidden;
+}

package/src/material/Dropdown/FDropdown/FDropdown.tsx

@@ -0,0 +1,61 @@
+import { FC } from "react";
+
+import '../static/FDropdown.css'
+
+import downArrow from '../static/down-arrow.png'
+
+import FButton from "@material/FButton";
+import FStack from "@material/FStack";
+
+export interface IFDropdown {
+    label?: React.ReactElement | React.ReactNode,
+    children?: React.ReactElement | 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
+    id?: string,
+}
+
+
+const FDropdown: FC<IFDropdown> = ({
+    label,
+    variant = 'contained',
+    color = 'primary',
+    size = 'btn-sm',
+    disabled,
+    st,
+    className,
+    id,
+    children
+}) => {
+
+    return (
+        <div className={'f-dropdown'}>
+            <FButton
+                variant={variant}
+                color={color}
+                size={size}
+                disabled={disabled}
+                st={st}
+                className={`f-dropdown-bottom ${className !== undefined ? className : ''}`}
+                id={id}
+                onClick={() => {
+                    document.getElementsByClassName('#heading');
+                }}
+            >
+                <FStack direction={'row'} spacing={1} justifyContent={"center"} alignItems={'center'}>
+                    {label}
+                    <img className={'f-dropdown-down-arrow'} src={downArrow} />
+                </FStack>
+            </FButton>
+            <div className="f-dropdown-content">
+                {children}
+            </div>
+        </div>
+    )
+}
+
+export default FDropdown

package/src/material/Dropdown/FDropdownItem/FDropdownItem.tsx

@@ -0,0 +1,33 @@
+import { FC } from "react";
+
+export interface IFDropdownItem {
+    disabled?: boolean
+    st?: React.CSSProperties,
+    className?: string
+    id?: string,
+    children?: React.ReactElement | React.ReactNode,
+    onClick?: React.MouseEventHandler<HTMLLIElement> | undefined
+}
+
+const FDropdownItem: FC<IFDropdownItem> = ({
+    disabled,
+    st,
+    className,
+    id,
+    children,
+    onClick
+}) => {
+
+    return (
+        <li
+            className={`f-dropdown-link ${className !== undefined ? className : ''} ${disabled ? 'disabled' : ''}`}
+            id={id}
+            style={st}
+            onClick={onClick}
+        >
+            {children}
+        </li>
+    )
+}
+
+export default FDropdownItem

package/src/material/Dropdown/static/FDropdown.css

@@ -0,0 +1,67 @@
+.f-dropdown {
+    position: relative;
+    display: inline-block;
+    width: fit-content;
+}
+
+.f-dropdown-content {
+    display: none;
+    flex-direction: column;
+    position: absolute;
+    padding: 10px;
+    box-shadow: 0px 0px 5px rgb(0 0 0 / 20%);
+    border-radius: 10px;
+    min-width: 200px;
+    max-width: 400px;
+    z-index: 6;
+    margin-top: 10px;
+    opacity: 0;
+    background-color: white;
+}
+
+.f-dropdown-link {
+    padding: 8px;
+    color: #656565;
+    font-size: 14px;
+    border-bottom: 1px solid #C4C4C4;
+    cursor: pointer;
+    list-style-type: none;
+}
+
+.f-dropdown .f-dropdown-content {
+    display: flex;
+    opacity: 0;
+    visibility: hidden;
+    transform: translateY(-10%);
+    transition: opacity .7s, visibility .7s, transform .7s;
+}
+
+.f-dropdown:hover .f-dropdown-content {
+    opacity: 1;
+    visibility: visible;
+    transform: translateY(0);
+}
+
+.f-dropdown-link:last-child {
+    border-bottom: 0;
+}
+
+.f-dropdown-link:hover {
+    color: #2F80ED;
+}
+
+.f-dropdown-down-arrow {
+    width: 2rem;
+    height: 2rem;
+}
+
+@keyframes fadeInFromNone {
+    0% {
+        opacity: 0;
+        transform: translateY(-10%);
+    }
+    100% {
+        opacity: 1;
+        transform: translateY(0);
+    }
+}

package/src/material/FAccordion/FAccordion.css

@@ -0,0 +1,80 @@
+:root {
+    --color-bg: #eeedeb;
+    --color-title: #0e1c4e;
+    --color-summary-1: #fff6ee;
+    --color-summary-1-highlight: #FBE62B;
+    --color-summary-2: #fafaff;
+    --color-summary-2-highlight: #2F80ED;
+    --color-summary-3: #fff0f3;
+    --color-summary-3-highlight: #D10000;
+}
+
+.card h1 {
+    font-style: normal;
+    font-weight: bold;
+    font-size: 20px;
+    line-height: 1.2;
+    color: var(--color-title);
+}
+
+.fv-accord-title {
+    cursor: pointer;
+}
+
+.card details {
+    display: flex;
+    border-radius: 5px;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.05);
+    border-left: 15px solid gray;
+    padding: 15px;
+    margin: 0;
+}
+
+.card details.warning {
+    --highlight: var(--color-summary-1-highlight);
+    background: var(--color-summary-1);
+    border-left-color: var(--color-summary-1-highlight);
+}
+
+.card details.warning p {
+    list-style-type: corona-warning;
+}
+
+.card details.info {
+    --highlight: var(--color-summary-2-highlight);
+    background: var(--color-summary-2);
+    border-left-color: var(--color-summary-2-highlight);
+}
+
+.card details.info p {
+    list-style-type: corona-info;
+}
+
+.card details.alert {
+    --highlight: var(--color-summary-3-highlight);
+    background: var(--color-summary-3);
+    border-left-color: var(--highlight);
+}
+
+.card details.alert p {
+    list-style-type: corona-alert;
+}
+
+.card details summary,
+.card details p {
+    position: relative;
+    display: flex;
+    flex-direction: row;
+    align-content: center;
+    justify-content: flex-start;
+    font-style: normal;
+    font-weight: normal;
+    font-size: 18px;
+    color: var(--color-title);
+    padding: 20px;
+}
+
+.card details[open] summary {
+    font-weight: 700;
+}

package/src/material/FAccordion/FAccordion.tsx

@@ -0,0 +1,47 @@
+import { FC, useEffect, useState } from 'react';
+
+import './FAccordion.css';
+
+export interface IFAccordion {
+    children?: React.ReactElement | React.ReactNode;
+    variant?: 'info' | 'alert' | 'warning';
+    title?: string;
+    id?: string;
+    className?: string;
+    st?: React.CSSProperties;
+    onClick?: React.MouseEventHandler<HTMLDivElement> | undefined;
+    open?: boolean;
+    defaultOpen?: boolean;
+}
+
+const FAccordion: FC<IFAccordion> = ({
+    variant = 'info',
+    title,
+    children,
+    id,
+    className,
+    st,
+    onClick,
+    open,
+    defaultOpen
+}) => {
+
+    const [isOpen, setIsOpen] = useState(defaultOpen);
+
+    useEffect(() => {
+        if (open !== undefined) {
+            setIsOpen(open)
+        }
+    }, [open]);
+
+    return (
+        <div onClick={onClick} className={`card ${className || ''}`} id={id}>
+            <details className={`${variant}`} open={isOpen} style={st}>
+                <summary className={'fv-accord-title'}>{title}</summary>
+                {children}
+            </details>
+        </div>
+    );
+};
+
+export default FAccordion;

package/src/material/FAccordion/index.ts

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