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

package/resources/filament/packages/tables/resources/css/group-header.css

@@ -0,0 +1,54 @@
+.fi-ta-group-header {
+    @apply flex w-full items-center gap-x-3 py-2;
+
+    .fi-ta-content-loading > .fi-ta-content &,
+    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
+        & > div {
+            @apply relative w-fit max-w-full text-transparent;
+
+            &::after {
+                @apply absolute inset-x-0 top-1/2 h-4 -translate-y-1/2;
+                animation: var(--loading-skeleton-animation);
+                background-color: var(--loading-skeleton-bg);
+                border-radius: var(--loading-skeleton-border-radius);
+                content: '';
+            }
+
+            & > * {
+                @apply opacity-0;
+            }
+        }
+
+        & > .fi-icon-btn {
+            @apply opacity-0;
+        }
+    }
+
+    &.fi-collapsible {
+        @apply cursor-pointer;
+
+        &.fi-collapsed {
+            & .fi-icon-btn {
+                @apply -rotate-180;
+            }
+        }
+    }
+
+    & .fi-ta-group-heading {
+        @apply text-sm font-medium text-gray-950 dark:text-white;
+    }
+
+    & .fi-ta-group-description {
+        @apply text-sm text-gray-500 dark:text-gray-400;
+    }
+}
+
+.fi-ta-group-checkbox {
+    .fi-ta-content-loading > .fi-ta-content &,
+    .fi-ta-content-loading > .fi-ta-table > .fi-ta-records > .fi-ta-row & {
+        @apply shadow-none ring-0 transition-none;
+        animation: var(--loading-skeleton-animation);
+        background-color: var(--loading-skeleton-bg) !important;
+        background-image: none !important;
+    }
+}

package/resources/filament/packages/tables/resources/css/header-cell.css

@@ -0,0 +1,224 @@
+.fi-ta-header-cell {
+    @apply px-3 py-3.5 text-start text-sm font-semibold text-gray-950 sm:first-of-type:ps-6 sm:last-of-type:pe-6 dark:text-white;
+
+    &.fi-growable {
+        @apply w-full;
+    }
+
+    &.fi-grouped {
+        @apply border-gray-200 dark:border-white/5 [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
+    }
+
+    &.fi-align-center {
+        @apply text-center;
+
+        & .fi-ta-header-cell-sort-btn {
+            @apply justify-center;
+        }
+    }
+
+    &.fi-align-end {
+        @apply text-end;
+
+        & .fi-ta-header-cell-sort-btn {
+            @apply justify-end;
+        }
+    }
+
+    &.fi-align-left {
+        @apply text-left;
+
+        & .fi-ta-header-cell-sort-btn {
+            @apply justify-start rtl:flex-row-reverse;
+        }
+    }
+
+    &.fi-align-right {
+        @apply text-right;
+
+        & .fi-ta-header-cell-sort-btn {
+            @apply justify-end rtl:flex-row-reverse;
+        }
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply text-justify;
+
+        & .fi-ta-header-cell-sort-btn {
+            @apply justify-between;
+        }
+    }
+
+    &.fi-ta-header-cell-sorted {
+        & .fi-icon {
+            @apply text-gray-950 dark:text-white;
+        }
+    }
+
+    &:not(.fi-ta-header-cell-sorted) {
+        & .fi-icon {
+            @apply text-gray-400 dark:text-gray-500;
+        }
+
+        & .fi-ta-header-cell-sort-btn:hover {
+            & .fi-icon {
+                @apply text-gray-500 dark:text-gray-400;
+            }
+        }
+
+        & .fi-ta-header-cell-sort-btn:focus-visible {
+            & .fi-icon {
+                @apply text-gray-500 dark:text-gray-400;
+            }
+        }
+    }
+
+    &.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:table-cell;
+    }
+
+    &.md\:fi-visible {
+        @apply hidden md:table-cell;
+    }
+
+    &.lg\:fi-visible {
+        @apply hidden lg:table-cell;
+    }
+
+    &.xl\:fi-visible {
+        @apply hidden xl:table-cell;
+    }
+
+    &.\32xl\:fi-visible {
+        @apply hidden 2xl:table-cell;
+    }
+
+    &.fi-wrapped {
+        @apply whitespace-normal;
+    }
+
+    &:not(.fi-wrapped) {
+        @apply whitespace-nowrap;
+    }
+
+    & .fi-ta-header-cell-sort-btn {
+        @apply focus-visible:ring-primary-600 dark:focus-visible:ring-primary-500 flex w-full cursor-pointer appearance-none items-center justify-start gap-x-1 rounded-md border-0 bg-transparent p-0 text-start outline-none focus-visible:ring-2;
+
+        &.fi-disabled {
+            @apply cursor-default opacity-70;
+        }
+
+        /* The user agent stylesheet sets `text-transform: none` on form controls, and preflight only restores `font`, `letter-spacing`, and `color` inheritance — so without this, styling applied to the header cell reaches the plain label but not the sortable button. */
+        text-transform: inherit;
+    }
+
+    & .fi-icon {
+        @apply shrink-0 transition duration-75;
+    }
+
+    & .fi-loading-indicator {
+        @apply text-gray-400 dark:text-gray-500;
+    }
+}
+
+.fi-ta-header-group-cell {
+    @apply border-gray-200 px-3 py-2 text-sm font-semibold text-gray-950 sm:first-of-type:ps-6 sm:last-of-type:pe-6 dark:border-white/5 dark:text-white [&:not(:first-of-type)]:border-s [&:not(:last-of-type)]:border-e;
+
+    &.fi-align-start {
+        @apply text-start;
+    }
+
+    &.fi-align-center {
+        @apply text-center;
+    }
+
+    &.fi-align-end {
+        @apply text-end;
+    }
+
+    &.fi-align-left {
+        @apply text-left;
+    }
+
+    &.fi-align-right {
+        @apply text-right;
+    }
+
+    &.fi-align-justify,
+    &.fi-align-between {
+        @apply text-justify;
+    }
+
+    &.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:table-cell;
+    }
+
+    &.md\:fi-visible {
+        @apply hidden md:table-cell;
+    }
+
+    &.lg\:fi-visible {
+        @apply hidden lg:table-cell;
+    }
+
+    &.xl\:fi-visible {
+        @apply hidden xl:table-cell;
+    }
+
+    &.\32xl\:fi-visible {
+        @apply hidden 2xl:table-cell;
+    }
+
+    &.fi-wrapped {
+        @apply whitespace-normal;
+    }
+
+    &:not(.fi-wrapped) {
+        @apply whitespace-nowrap;
+    }
+}
+
+.fi-ta-empty-header-cell {
+    @apply w-1;
+}

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

@@ -0,0 +1,26 @@
+@import './actions.css' layer(components);
+@import './cell.css' layer(components);
+@import './columns/checkbox.css' layer(components);
+@import './columns/color.css' layer(components);
+@import './columns/icon.css' layer(components);
+@import './columns/image.css' layer(components);
+@import './columns/select.css' layer(components);
+@import './columns/text.css' layer(components);
+@import './columns/text-input.css' layer(components);
+@import './columns/toggle.css' layer(components);
+@import './columns/layout/grid.css' layer(components);
+@import './columns/layout/panel.css' layer(components);
+@import './columns/layout/split.css' layer(components);
+@import './columns/layout/stack.css' layer(components);
+@import './columns/summaries/icon-count.css' layer(components);
+@import './columns/summaries/range.css' layer(components);
+@import './columns/summaries/text.css' layer(components);
+@import './columns/summaries/values.css' layer(components);
+@import './container.css' layer(components);
+@import './content.css' layer(components);
+@import './empty-state.css' layer(components);
+@import './group-header.css' layer(components);
+@import './header-cell.css' layer(components);
+@import './row.css' layer(components);
+@import './table.css' layer(components);
+@import './column-manager.css' layer(components);

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

@@ -0,0 +1,47 @@
+.fi-ta-row {
+    @apply [@media(hover:hover)]:transition-colors [@media(hover:hover)]:duration-75;
+
+    &.fi-clickable {
+        @apply hover:bg-gray-50 dark:hover:bg-white/5;
+    }
+
+    &.fi-striped {
+        @apply bg-gray-50 dark:bg-white/5;
+    }
+
+    &.fi-collapsed {
+        @apply hidden;
+    }
+
+    &.fi-ta-group-header-row {
+        & > td {
+            @apply bg-gray-50 dark:bg-white/5;
+        }
+    }
+
+    & .fi-ta-group-header-cell {
+        @apply px-3 sm:first-of-type:ps-6 sm:last-of-type:pe-6;
+    }
+
+    &.fi-selected {
+        &:not(.fi-striped) {
+            @apply bg-gray-50 dark:bg-white/5;
+        }
+
+        & > *:first-child {
+            @apply inset-shadow-[2px_0_0_0_var(--primary-600)] rtl:inset-shadow-[-2px_0_0_0_var(--primary-600)];
+
+            @variant dark {
+                @apply inset-shadow-[2px_0_0_0_var(--primary-500)] rtl:inset-shadow-[-2px_0_0_0_var(--primary-500)];
+            }
+        }
+    }
+}
+
+.fi-ta-reordering {
+    & .fi-ta-row {
+        &:not(.fi-ta-row-not-reorderable) {
+            @apply cursor-move;
+        }
+    }
+}