@navette-js/panels 0.0.0-stage → 1.0.0-beta.1

package/resources/filament/packages/tables/resources/css/container.css

@@ -0,0 +1,311 @@
+.fi-ta-ctn {
+    @apply relative flex rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:bg-gray-900 dark:ring-white/10;
+
+    &:not(.fi-ta-ctn-with-header) {
+        @apply overflow-hidden;
+    }
+
+    &.fi-loading {
+        @apply animate-pulse;
+    }
+
+    & .fi-ta-header {
+        @apply flex flex-col gap-3 border-b border-gray-200 p-4 sm:px-6 dark:border-white/10;
+
+        &.fi-ta-header-adaptive-actions-position {
+            @apply sm:flex-row sm:items-center;
+
+            & .fi-ta-actions {
+                @apply sm:ms-auto;
+            }
+
+            &:not(:has(.fi-ta-header-heading)) {
+                &:not(:has(.fi-ta-header-description)) {
+                    & .fi-ta-actions {
+                        @apply ms-auto;
+                    }
+                }
+            }
+        }
+
+        & .fi-ta-actions {
+            /* The negative margins let the buttons overhang the header's vertical padding, so a header with actions matches the height of one without them. They are applied to the container instead of the buttons so wrapped rows of actions keep their gap, laddered so the largest button size present wins, and scoped to `sm` since the header stacks vertically below it. */
+            &:has(.fi-btn.fi-size-xs:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-0.5;
+            }
+
+            &:has(.fi-btn.fi-size-sm:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-1;
+            }
+
+            &:has(.fi-btn.fi-size-md:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-1.5;
+            }
+
+            &:has(.fi-btn.fi-size-lg:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-2;
+            }
+
+            &:has(.fi-btn.fi-size-xl:not(.fi-dropdown-panel *)) {
+                @apply sm:-my-2.5;
+            }
+        }
+
+        & .fi-ta-header-heading {
+            @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
+        }
+
+        & .fi-ta-header-description {
+            @apply mt-1 text-sm text-gray-600 dark:text-gray-400;
+        }
+    }
+
+    & .fi-ta-header-toolbar {
+        @apply flex flex-wrap items-center justify-between gap-4 border-b border-gray-200 px-4 py-3 sm:px-6 dark:border-white/10;
+
+        & > * {
+            @apply flex min-h-9 items-center gap-x-4;
+        }
+
+        & > :nth-child(1) {
+            @apply shrink-0;
+        }
+
+        & > :nth-child(2) {
+            @apply ms-auto;
+        }
+
+        & .fi-ta-grouping-settings {
+            & .fi-dropdown {
+                &.sm\:fi-hidden {
+                    @apply sm:hidden;
+                }
+
+                & .fi-ta-grouping-settings-fields {
+                    @apply grid gap-y-6 p-6;
+
+                    & label {
+                        @apply grid gap-y-2 text-sm leading-6 font-medium text-gray-950 dark:text-white;
+                    }
+                }
+            }
+
+            & > .fi-ta-grouping-settings-fields {
+                @apply hidden items-center gap-x-3 sm:flex;
+            }
+        }
+
+        & .fi-ta-filters-dropdown {
+            & .fi-ta-filters {
+                @apply p-6;
+            }
+        }
+
+        & .fi-ta-col-manager-dropdown {
+            & .fi-ta-col-manager {
+                @apply p-6;
+            }
+        }
+    }
+
+    & .fi-ta-filters {
+        @apply grid gap-y-4;
+
+        &.fi-ta-filters-below-content {
+            @apply border-t border-gray-200 p-4 sm:px-6 dark:border-white/10;
+        }
+
+        & .fi-ta-filters-header {
+            @apply flex items-center justify-between;
+
+            & .fi-ta-filters-heading {
+                @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
+            }
+
+            & .fi-loading-indicator {
+                @apply text-gray-400 dark:text-gray-500;
+            }
+        }
+
+        & .fi-ta-filters-actions-ctn {
+            @apply flex gap-3;
+        }
+    }
+
+    & .fi-ta-filters-above-content-ctn {
+        @apply grid border-b border-gray-200 px-4 py-4 sm:px-6 dark:border-white/10;
+
+        & .fi-ta-filters-trigger-action-ctn {
+            @apply ms-auto;
+        }
+
+        &.fi-open {
+            & .fi-ta-filters-trigger-action-ctn {
+                @apply mt-3;
+            }
+
+            &:has(.fi-ta-filters-actions-ctn) {
+                & .fi-ta-filters-trigger-action-ctn {
+                    @apply -mt-7;
+                }
+            }
+        }
+    }
+
+    & .fi-ta-reorder-indicator {
+        @apply flex items-center gap-x-3 border-b border-gray-200 bg-gray-50 px-3 py-1.5 text-sm leading-6 font-medium text-gray-700 sm:px-6 dark:border-white/10 dark:bg-white/5 dark:text-gray-200;
+
+        & .fi-loading-indicator {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+    }
+
+    & .fi-ta-selection-indicator {
+        @apply flex flex-col justify-between gap-y-1 border-b border-gray-200 bg-gray-50 px-3 py-2 sm:flex-row sm:items-center sm:px-6 sm:py-1.5 dark:border-white/10 dark:bg-white/5;
+
+        & .fi-loading-indicator {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+
+        & .fi-ta-selection-indicator-actions-ctn {
+            @apply flex gap-x-3;
+        }
+
+        & > * {
+            @apply flex gap-x-3;
+        }
+
+        & > :nth-child(1) {
+            @apply text-sm leading-6 font-medium text-gray-700 dark:text-gray-200;
+        }
+
+        & > :nth-child(2) {
+            @apply ms-auto;
+        }
+    }
+
+    & .fi-ta-filter-indicators {
+        @apply flex items-start justify-between gap-x-3 border-b border-gray-200 bg-gray-50 px-3 py-1.5 sm:px-6 dark:border-white/10 dark:bg-white/5;
+
+        & > :nth-child(1) {
+            @apply flex flex-col gap-x-3 gap-y-1 sm:flex-row;
+
+            & .fi-ta-filter-indicators-label {
+                @apply text-sm leading-6 font-medium whitespace-nowrap text-gray-700 dark:text-gray-200;
+            }
+
+            & .fi-ta-filter-indicators-badges-ctn {
+                @apply flex flex-wrap gap-1.5;
+            }
+        }
+
+        & > :nth-child(2).fi-icon-btn {
+            @apply -mt-1;
+        }
+    }
+
+    & .fi-pagination {
+        @apply border-t border-gray-200 px-3 py-3 sm:px-6 dark:border-white/10;
+    }
+
+    & .fi-ta-table-loading-ctn {
+        @apply flex h-32 items-center justify-center;
+    }
+
+    & .fi-ta-main {
+        @apply min-w-0 flex-1;
+    }
+
+    & .fi-ta-filters-trigger-action-ctn.lg\:fi-hidden {
+        @apply lg:hidden;
+    }
+
+    & .fi-ta-filters-before-content-ctn,
+    & .fi-ta-filters-after-content-ctn {
+        @apply absolute z-20 hidden w-screen max-w-[14rem]! shrink-0 rounded-lg border-gray-200 bg-white shadow-lg ring-1 ring-gray-950/5 transition lg:static lg:z-auto lg:shadow-none lg:ring-0 dark:border-white/10 dark:bg-gray-900 dark:ring-white/10;
+
+        & .fi-ta-filters {
+            @apply p-6 lg:py-4;
+        }
+
+        &.fi-open {
+            @apply block;
+        }
+
+        &.lg\:fi-open {
+            @apply lg:block;
+        }
+
+        &.fi-opacity-0 {
+            @apply opacity-0;
+        }
+
+        &.fi-width-3xs {
+            @apply max-w-3xs!;
+        }
+
+        &.fi-width-2xs {
+            @apply max-w-2xs!;
+        }
+
+        &.fi-width-xs {
+            @apply max-w-xs!;
+        }
+
+        &.fi-width-sm {
+            @apply max-w-sm!;
+        }
+
+        &.fi-width-md {
+            @apply max-w-md!;
+        }
+
+        &.fi-width-lg {
+            @apply max-w-lg!;
+        }
+
+        &.fi-width-xl {
+            @apply max-w-xl!;
+        }
+
+        &.fi-width-2xl {
+            @apply max-w-2xl!;
+        }
+
+        &.fi-width-3xl {
+            @apply max-w-3xl!;
+        }
+
+        &.fi-width-4xl {
+            @apply max-w-4xl!;
+        }
+
+        &.fi-width-5xl {
+            @apply max-w-5xl!;
+        }
+
+        &.fi-width-6xl {
+            @apply max-w-6xl!;
+        }
+
+        &.fi-width-7xl {
+            @apply max-w-7xl!;
+        }
+
+        &.fi-width-none {
+            @apply max-w-none!;
+        }
+
+        &.fi-width-container {
+            @apply container!;
+        }
+    }
+
+    & .fi-ta-filters-before-content-ctn {
+        @apply start-0 lg:rounded-s-xl lg:rounded-e-none lg:border-e;
+    }
+
+    & .fi-ta-filters-after-content-ctn {
+        @apply end-0 lg:rounded-s-none lg:rounded-e-xl lg:border-s;
+    }
+}

package/resources/filament/packages/tables/resources/css/content.css

@@ -0,0 +1,342 @@
+.fi-ta-content-loading {
+    --loading-skeleton-animation: var(--animate-pulse);
+    --loading-skeleton-bg: var(--gray-200);
+    --loading-skeleton-border-radius: var(--radius-md);
+
+    @variant dark {
+        --loading-skeleton-bg: rgb(255 255 255 / 0.1);
+    }
+
+    @media (prefers-reduced-motion: reduce) {
+        --loading-skeleton-animation: none;
+    }
+
+    & > .fi-ta-content,
+    & > .fi-ta-table > .fi-ta-records {
+        @apply pointer-events-none;
+    }
+}
+
+.fi-ta-content-ctn {
+    @apply relative divide-y divide-gray-200 overflow-x-auto dark:divide-white/10 dark:border-t-white/10;
+
+    & .fi-ta-content-header {
+        @apply flex items-center gap-4 gap-x-6 bg-gray-50 px-4 sm:px-6 dark:bg-white/5;
+
+        & .fi-ta-page-checkbox {
+            @apply my-4 shrink-0;
+        }
+
+        & .fi-ta-sorting-settings {
+            @apply flex gap-x-3 py-3;
+        }
+    }
+
+    &:not(.fi-ta-ctn-with-footer .fi-ta-content-ctn) {
+        @apply rounded-b-xl;
+    }
+
+    &:not(.fi-ta-ctn-with-header .fi-ta-content-ctn) {
+        @apply border-t-0;
+    }
+
+    & .fi-ta-content {
+        @apply grid;
+
+        &.fi-ta-content-grid {
+            @apply gap-4 p-4 sm:px-6;
+
+            &.fi-ta-content-grouped {
+                @apply pt-0;
+            }
+
+            & .fi-ta-group-header {
+                @apply -mx-4 border-y border-gray-200 first:border-t-0 sm:-mx-6 dark:border-white/5;
+                width: calc(100% + 2rem);
+
+                @variant sm {
+                    width: calc(100% + 3rem);
+                }
+            }
+
+            & .fi-ta-record {
+                @apply rounded-xl shadow-sm ring-1 ring-gray-950/5 dark:bg-white/5 dark:ring-white/10;
+
+                &.fi-clickable {
+                    @apply dark:hover:bg-white/10 dark:hover:ring-white/20;
+                }
+
+                &.fi-selected {
+                    @apply dark:bg-white/10 dark:ring-white/20;
+                }
+
+                &:not(.fi-selected) {
+                    @apply bg-white dark:bg-white/5 dark:ring-white/10;
+                }
+
+                &.fi-ta-record-with-content-prefix {
+                    & .fi-ta-record-content {
+                        @apply ps-2;
+                    }
+
+                    & .fi-ta-actions {
+                        @apply ps-2;
+                    }
+                }
+
+                &.fi-ta-record-with-content-suffix {
+                    & .fi-ta-record-content {
+                        @apply pe-2;
+                    }
+
+                    & .fi-ta-actions {
+                        @apply pe-2;
+                    }
+                }
+            }
+        }
+
+        &:not(.fi-ta-content-grid) {
+            @apply divide-y divide-gray-200 dark:divide-white/10;
+
+            & .fi-ta-record {
+                &.fi-clickable {
+                    @apply dark:hover:bg-white/5;
+                }
+
+                &.fi-selected {
+                    @apply before:bg-primary-600 dark:before:bg-primary-500 before:absolute before:inset-y-0 before:start-0 before:w-0.5 dark:bg-white/5;
+                }
+
+                & .fi-ta-record-content-ctn {
+                    @apply md:flex-row md:items-center;
+                }
+
+                &:not(.fi-ta-record-with-content-prefix) {
+                    & .fi-ta-record-content {
+                        @apply sm:ps-6;
+                    }
+
+                    & .fi-ta-actions {
+                        @apply sm:ps-6;
+                    }
+                }
+
+                &:not(.fi-ta-record-with-content-suffix) {
+                    & .fi-ta-record-content {
+                        @apply sm:pe-6;
+                    }
+
+                    & .fi-ta-actions {
+                        @apply sm:pe-6;
+                    }
+                }
+
+                &.fi-ta-record-with-content-prefix {
+                    @apply sm:ps-3;
+
+                    & .fi-ta-record-content {
+                        @apply ps-3;
+                    }
+
+                    & .fi-ta-actions {
+                        @apply ps-3;
+                    }
+                }
+
+                &.fi-ta-record-with-content-suffix {
+                    @apply sm:pe-3;
+
+                    & .fi-ta-record-content {
+                        @apply pe-3;
+                    }
+
+                    & .fi-ta-actions {
+                        @apply pe-3;
+                    }
+                }
+
+                & .fi-ta-actions {
+                    @apply md:ps-3;
+                }
+            }
+        }
+
+        & .fi-ta-group-header {
+            @apply col-span-full bg-gray-50 px-1 sm:px-3 dark:bg-white/5;
+
+            & .fi-ta-group-checkbox {
+                @apply mx-3;
+            }
+        }
+
+        & .fi-ta-group-summary,
+        & .fi-ta-table {
+            @apply col-span-full;
+        }
+
+        & .fi-ta-record {
+            @apply relative flex h-full items-center bg-white transition duration-75 dark:bg-gray-900;
+
+            .fi-ta-content-loading & .fi-ta-record-checkbox {
+                @apply shadow-none ring-0 transition-none;
+                animation: var(--loading-skeleton-animation);
+                background-color: var(--loading-skeleton-bg) !important;
+                background-image: none !important;
+            }
+
+            &.fi-ta-record-with-content-prefix {
+                @apply ps-1;
+            }
+
+            &.fi-ta-record-with-content-suffix {
+                @apply pe-1;
+            }
+
+            &.fi-clickable {
+                @apply hover:bg-gray-50;
+            }
+
+            &.fi-collapsed {
+                @apply hidden;
+            }
+
+            &.fi-selected {
+                @apply bg-gray-50;
+            }
+
+            & .fi-ta-reorder-handle {
+                @apply mx-1 my-2;
+            }
+
+            & .fi-ta-record-checkbox {
+                @apply mx-3 my-4 shrink-0;
+            }
+
+            & .fi-ta-record-content-ctn {
+                @apply flex h-full w-full flex-col gap-y-3 py-4;
+
+                & > :nth-child(1) {
+                    @apply flex-1;
+                }
+
+                & .fi-ta-record-content {
+                    @apply block w-full;
+
+                    & .fi-ta-col {
+                        @apply flex justify-start text-start disabled:pointer-events-none;
+
+                        &.fi-growable {
+                            @apply w-full;
+                        }
+
+                        &.fi-align-center {
+                            @apply justify-center text-center;
+                        }
+
+                        &.fi-align-end {
+                            @apply justify-end text-end;
+                        }
+
+                        &.fi-align-left {
+                            @apply justify-start text-left;
+                        }
+
+                        &.fi-align-right {
+                            @apply justify-end text-right;
+                        }
+
+                        &.fi-align-justify,
+                        &.fi-align-between {
+                            @apply justify-between text-justify;
+                        }
+                    }
+
+                    &.fi-collapsible {
+                        @apply mt-3;
+                    }
+
+                    & .fi-growable {
+                        @apply w-full flex-1;
+                    }
+
+                    & .sm\:fi-hidden {
+                        @apply sm:hidden;
+                    }
+
+                    & .md\:fi-hidden {
+                        @apply md:hidden;
+                    }
+
+                    & .lg\:fi-hidden {
+                        @apply lg:hidden;
+                    }
+
+                    & .xl\:fi-hidden {
+                        @apply xl:hidden;
+                    }
+
+                    & .\32xl\:fi-hidden {
+                        @apply 2xl:hidden;
+                    }
+
+                    & .sm\:fi-visible {
+                        @apply hidden sm:block;
+                    }
+
+                    & .md\:fi-visible {
+                        @apply hidden md:block;
+                    }
+
+                    & .lg\:fi-visible {
+                        @apply hidden lg:block;
+                    }
+
+                    & .xl\:fi-visible {
+                        @apply hidden xl:block;
+                    }
+
+                    & .\32xl\:fi-visible {
+                        @apply hidden 2xl:block;
+                    }
+                }
+            }
+
+            & .fi-ta-record-collapse-btn {
+                @apply mx-1 my-2 shrink-0;
+            }
+
+            & .fi-ta-actions {
+                &.fi-ta-actions-before-columns-position {
+                    @apply order-first;
+                }
+            }
+
+            &:not(.fi-ta-record-with-content-prefix) {
+                & .fi-ta-record-content {
+                    @apply ps-4;
+                }
+
+                & .fi-ta-actions {
+                    @apply ps-4;
+                }
+            }
+
+            &:not(.fi-ta-record-with-content-suffix) {
+                & .fi-ta-record-content {
+                    @apply pe-4;
+                }
+
+                & .fi-ta-actions {
+                    @apply pe-4;
+                }
+            }
+
+            &.fi-ta-record-collapsed {
+                & .fi-ta-record-collapse-btn {
+                    @apply rotate-180;
+                }
+            }
+        }
+    }
+}

package/resources/filament/packages/tables/resources/css/empty-state.css

@@ -0,0 +1,31 @@
+.fi-ta-empty-state {
+    @apply px-6 py-12;
+
+    &:not(.fi-ta-ctn-with-content-layout .fi-ta-empty-state) {
+        @apply border-t border-gray-200 dark:border-white/10;
+    }
+
+    & .fi-ta-empty-state-content {
+        @apply mx-auto grid max-w-lg justify-items-center text-center;
+    }
+
+    & .fi-ta-empty-state-icon-bg {
+        @apply mb-4 rounded-full bg-gray-100 p-3 dark:bg-gray-500/20;
+
+        & .fi-icon {
+            @apply text-gray-500 dark:text-gray-400;
+        }
+    }
+
+    & .fi-ta-empty-state-heading {
+        @apply text-base leading-6 font-semibold text-gray-950 dark:text-white;
+    }
+
+    & .fi-ta-empty-state-description {
+        @apply mt-1 text-sm text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-ta-actions {
+        @apply mt-6;
+    }
+}