@uxf/data-grid 10.0.2 → 11.0.0-beta.1

package/tailwindui/styles.css

@@ -1,592 +0,0 @@
-@import url("react-data-grid/lib/styles.css");
-
-@layer rdg.Root {
-    .uxf-data-grid__table {
-        --rdg-color-scheme: light;
-        --rdg-color: theme("colors.lightHigh");
-        --rdg-border-color: theme("colors.lightBorder");
-        --rdg-summary-border-color: theme("colors.lightBorder");
-        --rdg-background-color: theme("colors.white");
-        --rdg-header-background-color: theme("colors.gray.50");
-        --rdg-row-hover-background-color: theme("colors.gray.50");
-        --rdg-row-selected-background-color: theme("colors.gray.100/.75");
-        --rdg-row-selected-hover-background-color: theme("colors.gray.200/.75");
-        --rdg-selection-color: theme("colors.lightBorder");
-        --rdg-font-size: 14px;
-
-        :root .dark & {
-            --rdg-color-scheme: dark;
-            --rdg-color: theme("colors.darkHigh");
-            --rdg-border-color: theme("colors.darkBorder");
-            --rdg-summary-border-color: theme("colors.darkBorder");
-            --rdg-background-color: theme("colors.gray.950");
-            --rdg-header-background-color: theme("colors.gray.900");
-            --rdg-row-hover-background-color: theme("colors.gray.950");
-            --rdg-row-selected-background-color: theme("colors.gray.900/.75");
-            --rdg-row-selected-hover-background-color: theme("colors.gray.800/.75");
-            --rdg-selection-color: theme("colors.darkBorder");
-            --rdg-font-size: 14px;
-        }
-    }
-}
-
-.uxf-data-grid {
-    border: 1px solid var(--rdg-border-color);
-    border-radius: theme("borderRadius.DEFAULT");
-
-    &.no-border {
-        border-style: none;
-    }
-
-    &__action-cell {
-        background-color: var(--rdg-background-color);
-        border-inline-start: 1px solid var(--rdg-border-color);
-        position: sticky;
-        right: 0;
-    }
-
-    &__action-cell-wrapper {
-        @apply space-x-2;
-
-        align-items: center;
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        text-align: center;
-        width: 100%;
-
-        .uxf-icon {
-            color: theme("colors.lightMedium");
-
-            :root .dark & {
-                color: theme("colors.darkMedium");
-            }
-        }
-    }
-
-    &__body-cell {
-        &--boolean {
-            align-items: center;
-            display: flex;
-            height: 100%;
-            width: 100%;
-        }
-    }
-
-    &__drawer {
-        @apply ease-in-out;
-
-        background-color: theme("colors.gray.900/.25");
-        inset: 0;
-        overflow: hidden;
-        position: fixed;
-        z-index: theme("zIndex.modal");
-
-        :root .dark & {
-            background-color: theme("colors.gray.900/.75");
-        }
-
-        &--open {
-            @apply transition-opacity duration-500;
-
-            opacity: 100;
-            transform: translateX(0);
-        }
-
-        &--closed {
-            @apply transition-all delay-500;
-
-            opacity: 0;
-            transform: translateX(100%);
-        }
-
-        &-body-wrapper {
-            @apply transition-all duration-500 ease-in-out;
-
-            background-color: theme("colors.white");
-            box-shadow: theme("boxShadow.xl");
-            height: 100%;
-            max-width: theme("maxWidth.sm");
-            position: absolute;
-            right: 0;
-            transform: translateX(100%);
-            width: theme("width.11/12");
-
-            &--open {
-                transform: translateX(0);
-            }
-        }
-
-        &-body {
-            display: flex;
-            flex-direction: column;
-            height: 100%;
-            max-width: theme("maxWidth.sm");
-            overflow-y: scroll;
-            padding-bottom: theme("spacing.10");
-            position: relative;
-            width: 100%;
-
-            :root .dark & {
-                background-color: theme("colors.gray.950");
-                color: theme("colors.gray.100");
-            }
-        }
-
-        &-close-button {
-            margin-left: auto;
-            margin-right: theme("spacing.4");
-            margin-top: theme("spacing.4") !important;
-        }
-
-        &-header {
-            font-weight: theme("fontWeight.bold");
-            padding: theme("spacing.8") theme("spacing.4") theme("spacing.4");
-        }
-
-        &-content {
-            padding: theme("spacing.4");
-        }
-
-        &-backdrop {
-            cursor: pointer;
-            height: 100%;
-            width: 100vw;
-        }
-    }
-
-    &__fallback {
-        align-items: center;
-        color: theme("colors.gray.600"); /* ?? */
-        display: flex;
-        grid-column: 1/-1;
-        justify-content: center;
-        text-align: center;
-    }
-
-    &__filter {
-        &--interval {
-            display: grid;
-            gap: theme("spacing.4");
-            grid-template-columns: 1fr min-content 1fr;
-
-            .uxf-data-grid__filter-gap {
-                align-items: center;
-                display: flex;
-                padding-top: theme("spacing.5");
-            }
-        }
-    }
-
-    &__filters {
-        @apply space-y-4;
-    }
-
-    &__filter-list {
-        @apply space-x-2;
-
-        padding: theme("spacing.2");
-    }
-
-    &__footer {
-        align-items: center;
-        display: flex;
-        flex-wrap: wrap;
-        gap: theme("spacing.4");
-        justify-content: flex-end;
-        padding: theme("spacing.2");
-
-        &.no-border {
-            padding-inline: 0;
-        }
-    }
-
-    &__linear-progress {
-        border-radius: 20px;
-        height: 3px;
-        left: 0;
-        overflow: hidden;
-        position: absolute;
-        right: 0;
-        z-index: 1;
-
-        &.is-loading::before {
-            animation: datagridlineanim 1s linear infinite;
-            background-color: theme("colors.dataGridSecondary");
-            border-radius: inherit;
-            content: "";
-            height: 3px;
-            left: -50%;
-            position: absolute;
-            width: 40%;
-        }
-    }
-
-    &__linear-progress-wrapper {
-        position: relative;
-    }
-
-    &__pagination-counts {
-        @apply text-sm;
-
-        color: theme("colors.lightLow");
-    }
-
-    &__plugin-fulltext {
-        color: theme("colors.gray.400");
-        margin: theme("spacing.2") 0;
-        width: 100%;
-
-        @screen sm {
-            width: auto;
-        }
-
-        .uxf-icon {
-            color: theme("colors.lightMedium");
-
-            :root .dark & {
-                color: theme("colors.darkMedium");
-            }
-        }
-    }
-
-    &__plugin-button {
-        flex-shrink: 0;
-        margin: theme("spacing.2") 0;
-
-        .uxf-icon {
-            color: theme("colors.lightMedium");
-
-            :root .dark & {
-                color: theme("colors.darkMedium");
-            }
-        }
-    }
-
-    &__rows-per-page {
-        @apply text-sm;
-
-        align-items: center;
-        color: theme("colors.lightLow");
-        display: flex;
-        flex-wrap: wrap;
-        gap: theme("spacing.2");
-
-        .uxf-select {
-            width: theme("width.28");
-        }
-    }
-
-    &__select-row-checkbox-wrapper {
-        align-items: center;
-        color: theme("colors.white");
-        display: flex;
-        height: 100%;
-        justify-content: center;
-        width: 100%;
-    }
-
-    &__selected-rows-toolbar-wrapper {
-        align-items: center;
-        bottom: theme("spacing.8");
-        display: flex;
-        justify-content: center;
-        left: 0;
-        position: fixed;
-        right: 0;
-    }
-
-    &__selected-rows-toolbar {
-        @apply text-sm drop-shadow-xl;
-
-        align-items: center;
-        background-color: theme("colors.dataGridPrimary");
-        border: 1px solid theme("colors.lightBorder");
-        border-radius: 999px;
-        color: theme("colors.white");
-        display: flex;
-        justify-content: center;
-        padding: theme("spacing.2") theme("spacing.6");
-
-        :root .dark & {
-            border-color: theme("colors.darkBorder");
-        }
-    }
-
-    &__selected-rows-toolbar-actions {
-        @apply space-x-2;
-
-        padding-left: theme("spacing.4");
-    }
-
-    &__table {
-        overflow-y: hidden;
-
-        &::-webkit-scrollbar {
-            height: 8px;
-            width: 8px;
-        }
-
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
-        }
-
-        &::-webkit-scrollbar-thumb,
-        &::-webkit-scrollbar-thumb:hover {
-            background-color: theme("colors.lightLow");
-            border-radius: 999px;
-
-            :root .dark & {
-                background-color: theme("colors.darkLow");
-            }
-        }
-    }
-
-    &__toolbar {
-        align-items: center;
-        border-bottom: 1px solid theme("colors.lightBorder");
-        display: flex;
-        flex-wrap: wrap;
-        gap: theme("spacing.2");
-        justify-content: flex-end;
-        padding: theme("spacing.2");
-
-        :root .dark & {
-            border-bottom-color: theme("colors.darkBorder");
-        }
-
-        @screen md {
-            padding-block: 0;
-            padding-left: 0;
-        }
-    }
-
-    &__toolbar-tab {
-        @apply text-sm;
-
-        align-items: center;
-        border-bottom: 2px solid transparent;
-        color: theme("colors.lightMedium");
-        display: inline-flex;
-        font-weight: theme("fontWeight.medium");
-        padding: theme("spacing.4");
-        white-space: nowrap;
-
-        :root .dark & {
-            color: theme("colors.darkMedium");
-        }
-
-        &:hover {
-            color: theme("colors.lightHigh");
-
-            :root .dark & {
-                color: theme("colors.darkHigh");
-            }
-        }
-
-        &.is-active {
-            border-bottom-color: currentcolor;
-            color: theme("colors.dataGridPrimary");
-        }
-    }
-
-    &__toolbar-tabs {
-        align-self: stretch;
-        display: flex;
-        flex: 1;
-
-        &-nav {
-            &--desktop {
-                @apply space-x-4;
-
-                display: none;
-                margin-bottom: -1px;
-
-                @screen md {
-                    display: flex;
-                }
-            }
-
-            &--mobile {
-                align-items: center;
-                display: flex;
-                width: max-content;
-                z-index: theme("zIndex.10");
-
-                @screen md {
-                    display: none;
-                }
-
-                .uxf-data-grid__toolbar-tabs-button {
-                    align-items: center;
-                    display: flex;
-                    margin: 0;
-
-                    &-icon {
-                        color: theme("colors.lightHigh");
-                        margin-left: theme("spacing.1");
-
-                        :root .dark & {
-                            color: theme("colors.darkHigh");
-                        }
-                    }
-                }
-            }
-
-            &-text {
-                color: theme("colors.lightHigh");
-
-                :root .dark & {
-                    color: theme("colors.darkHigh");
-                }
-            }
-        }
-
-        &-modal-content {
-            @apply divide-lightBorder dark:divide-darkBorder divide-y;
-
-            align-items: flex-start;
-            display: flex;
-            flex-direction: column;
-            padding-bottom: theme("spacing.4");
-            padding-top: theme("spacing.1");
-            text-align: left;
-        }
-
-        &-modal-button {
-            border-radius: 0;
-            justify-content: flex-start;
-            width: 100%;
-        }
-
-        &-modal-button-text {
-            color: theme("colors.lightHigh");
-
-            :root .dark & {
-                color: theme("colors.darkHigh");
-            }
-        }
-
-        &-modal-active-tab-icon {
-            color: theme("colors.lightMedium");
-            margin-right: theme("spacing.3");
-
-            :root .dark & {
-                color: theme("colors.darkMedium");
-            }
-        }
-    }
-
-    &__toolbar-control {
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        gap: theme("spacing.2");
-        justify-content: space-between;
-        order: 3;
-        width: 100%;
-
-        @screen xs {
-            order: 2;
-            width: auto;
-        }
-    }
-
-    &__toolbar-customs {
-        align-items: center;
-        display: flex;
-        flex-direction: row;
-        gap: theme("spacing.2");
-        order: 2;
-
-        @screen xs {
-            order: 2;
-        }
-
-        @screen md {
-            margin-block: theme("spacing.2");
-        }
-
-        &-mobile {
-            display: flex;
-
-            @screen md {
-                display: none;
-            }
-        }
-
-        &-desktop {
-            display: none;
-
-            @screen md {
-                display: flex;
-                gap: theme("spacing.2");
-            }
-        }
-    }
-}
-
-/* TODO: tohle je imo k ničemu, že Vejvis? */
-
-/* .rdg-cell.action {
-    align-items: center;
-    border-right: 0;
-    box-shadow: -3px 0 15px rgba(221 221 221 / 50%);
-    display: flex;
-    justify-content: center;
-    position: sticky;
-    right: 0;
-    text-align: right;
-} */
-
-.rdg-header-row {
-    color: theme("colors.lightLow");
-    font-weight: theme("fontWeight.normal");
-
-    :root .dark & {
-        color: theme("colors.darkLow");
-    }
-
-    .rdg-cell {
-        background-color: var(--rdg-header-background-color);
-
-        :root .dark & {
-            color: theme("colors.darkMedium");
-        }
-
-        &:not(:first-child) {
-            border-inline-start: 1px solid var(--rdg-border-color);
-        }
-    }
-}
-
-.rdg-header-sort-name + span {
-    align-items: center;
-    display: flex;
-}
-
-.rdg-cell {
-    border-block-end-width: 1px;
-    border-color: var(--rdg-border-color);
-    border-inline-end: none;
-
-    &.rdg-cell-frozen {
-        box-shadow: none;
-    }
-}
-
-@keyframes datagridlineanim {
-    0% {
-        left: -40%;
-    }
-
-    50% {
-        left: 20%;
-        width: 80%;
-    }
-
-    100% {
-        left: 100%;
-        width: 100%;
-    }
-}

package/tailwindui/ui.d.ts

@@ -1,2 +0,0 @@
-import { UIComponents } from "../types";
-export declare const UI: UIComponents<any, any>;

package/tailwindui/ui.js

@@ -1,38 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.UI = void 0;
-const pagination_1 = require("@uxf/ui/pagination/pagination");
-const body_cell_1 = require("./body-cell");
-const action_cell_base_1 = require("./components/action-cell-base");
-const container_1 = require("./components/container");
-const filter_list_1 = require("./components/filter-list");
-const linear_progress_1 = require("./components/linear-progress");
-const no_rows_fallback_1 = require("./components/no-rows-fallback");
-const pagination_counts_1 = require("./components/pagination-counts");
-const pagination_rows_per_page_select_1 = require("./components/pagination-rows-per-page-select");
-const select_row_checkbox_1 = require("./components/select-row-checkbox");
-const selected_rows_toolbar_1 = require("./components/selected-rows-toolbar");
-const toolbar_1 = require("./components/toolbar");
-const toolbar_control_1 = require("./components/toolbar-control");
-const toolbar_customs_1 = require("./components/toolbar-customs");
-const toolbar_tabs_1 = require("./components/toolbar-tabs");
-const filter_handler_1 = require("./filter-handler");
-exports.UI = {
-    ActionCell: action_cell_base_1.ActionCellBase,
-    actionCellWidth: 128,
-    BodyCells: body_cell_1.BodyCells,
-    Container: container_1.Container,
-    FilterHandlers: filter_handler_1.defaultFilterHandlers,
-    FilterList: filter_list_1.FilterList,
-    LinearProgress: linear_progress_1.LinearProgress,
-    NoRowsFallback: no_rows_fallback_1.NoRowsFallback,
-    Pagination: pagination_1.Pagination,
-    PaginationCounts: pagination_counts_1.PaginationCounts,
-    PaginationRowsPerPageSelect: pagination_rows_per_page_select_1.PaginationRowsPerPageSelect,
-    SelectRowCheckbox: select_row_checkbox_1.SelectRowCheckbox,
-    SelectedRowsToolbar: selected_rows_toolbar_1.SelectedRowsToolbar,
-    Toolbar: toolbar_1.Toolbar,
-    ToolbarControl: toolbar_control_1.ToolbarControl,
-    ToolbarCustoms: toolbar_customs_1.ToolbarCustoms,
-    ToolbarTabs: toolbar_tabs_1.ToolbarTabs,
-};