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

package/resources/filament/packages/forms/resources/css/components/repeater.css

@@ -0,0 +1,401 @@
+.fi-fo-repeater {
+    @apply grid gap-y-4 outline-none;
+
+    & .fi-fo-repeater-actions {
+        @apply flex gap-x-3;
+
+        &.fi-hidden {
+            @apply hidden;
+        }
+    }
+
+    & .fi-fo-repeater-items {
+        @apply items-start gap-4;
+    }
+
+    & .fi-fo-repeater-item {
+        @apply rounded-xl bg-white shadow-xs ring-1 ring-gray-950/5 outline-none dark:bg-white/5 dark:ring-white/10;
+
+        &.fi-collapsed {
+            & .fi-fo-repeater-item-header-collapsible-actions {
+                @apply -rotate-180;
+            }
+
+            & .fi-fo-repeater-item-header-collapse-action {
+                @apply pointer-events-none opacity-0;
+            }
+        }
+
+        &:not(.fi-collapsed) {
+            & .fi-fo-repeater-item-header-expand-action {
+                @apply pointer-events-none opacity-0;
+            }
+        }
+    }
+
+    & .fi-fo-repeater-item-header {
+        @apply flex items-center gap-x-3 overflow-hidden px-4 py-3;
+    }
+
+    &.fi-collapsible {
+        & .fi-fo-repeater-item-header {
+            @apply cursor-pointer select-none;
+        }
+    }
+
+    & .fi-fo-repeater-item-header-start-actions {
+        @apply flex items-center gap-x-3;
+    }
+
+    & .fi-fo-repeater-item-header-label {
+        @apply text-sm font-medium text-gray-950 dark:text-white;
+
+        &.fi-truncated {
+            @apply truncate;
+        }
+    }
+
+    & .fi-fo-repeater-item-header-end-actions {
+        @apply ms-auto flex items-center gap-x-3;
+    }
+
+    & .fi-fo-repeater-item-header-collapsible-actions {
+        @apply relative transition;
+    }
+
+    & .fi-fo-repeater-item-header-collapse-action {
+        @apply transition;
+    }
+
+    & .fi-fo-repeater-item-header-expand-action {
+        @apply absolute inset-0 rotate-180 transition;
+    }
+
+    & .fi-fo-repeater-item-has-header > .fi-fo-repeater-item-content {
+        @apply border-t border-gray-100 dark:border-white/10;
+    }
+
+    & .fi-fo-repeater-item-content {
+        @apply p-4;
+    }
+
+    & .fi-fo-repeater-add-between-items-ctn {
+        @apply flex w-full justify-center;
+    }
+
+    & .fi-fo-repeater-add-between-items {
+        @apply rounded-lg bg-white dark:bg-gray-900;
+    }
+
+    & .fi-fo-repeater-label-between-items-ctn {
+        @apply relative -my-2 flex items-center;
+    }
+
+    & .fi-fo-repeater-label-between-items-divider-before {
+        @apply w-3 shrink-0 border-t border-gray-200 dark:border-white/10;
+    }
+
+    & .fi-fo-repeater-label-between-items {
+        @apply shrink-0 px-1 text-sm font-medium text-gray-500 dark:text-gray-400;
+    }
+
+    & .fi-fo-repeater-label-between-items-divider-after {
+        @apply flex-1 border-t border-gray-200 dark:border-white/10;
+    }
+
+    & .fi-fo-repeater-add {
+        @apply flex w-full justify-center;
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+    }
+}
+
+.fi-fo-simple-repeater {
+    @apply grid gap-y-4;
+
+    & .fi-fo-simple-repeater-items {
+        @apply gap-4;
+    }
+
+    & .fi-fo-simple-repeater-item {
+        @apply flex justify-start gap-x-3;
+    }
+
+    & .fi-fo-simple-repeater-item-content {
+        @apply flex-1;
+    }
+
+    & .fi-fo-simple-repeater-item-actions {
+        @apply flex items-center gap-x-1;
+    }
+
+    & .fi-fo-simple-repeater-add {
+        @apply flex w-full justify-center;
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+    }
+}
+
+.fi-fo-table-repeater {
+    @apply grid gap-3;
+
+    & > table {
+        @apply block w-full divide-y divide-gray-200 rounded-xl bg-white shadow-sm ring-1 ring-gray-950/5 dark:divide-white/10 dark:bg-gray-900 dark:ring-white/10;
+
+        & > thead {
+            @apply hidden whitespace-nowrap;
+
+            & > tr {
+                & > th {
+                    @apply border-gray-200 bg-gray-50 px-3 py-2 text-sm font-semibold text-gray-950 first-of-type:rounded-ss-xl last-of-type:rounded-se-xl dark:border-white/5 dark:bg-white/5 dark:text-white [&:not(:last-of-type)]:border-e;
+
+                    &.fi-align-start,
+                    &.fi-align-left {
+                        @apply text-start;
+                    }
+
+                    &.fi-align-end,
+                    &.fi-align-right {
+                        @apply text-end;
+                    }
+
+                    &.fi-wrapped {
+                        @apply whitespace-normal;
+                    }
+
+                    &:not(.fi-wrapped) {
+                        @apply whitespace-nowrap;
+                    }
+
+                    &.fi-fo-table-repeater-empty-header-cell {
+                        @apply w-1;
+                    }
+                }
+            }
+        }
+
+        & > tbody {
+            @apply block divide-y divide-gray-200 dark:divide-white/5;
+
+            & > tr {
+                @apply grid gap-6 p-6;
+
+                & > td {
+                    @apply block;
+
+                    &.fi-hidden {
+                        @apply hidden;
+                    }
+
+                    &.fi-vertical-align-start {
+                        @apply align-top;
+                    }
+
+                    &.fi-vertical-align-center {
+                        @apply align-middle;
+                    }
+
+                    &.fi-vertical-align-end {
+                        @apply align-bottom;
+                    }
+                }
+            }
+        }
+
+        & .fi-fo-table-repeater-header-required-mark {
+            @apply text-danger-600 dark:text-danger-400 font-medium;
+        }
+
+        & .fi-fo-table-repeater-actions {
+            @apply flex h-full items-center gap-x-3;
+        }
+    }
+
+    @supports (container-type: inline-size) {
+        @apply @container;
+
+        & > table {
+            @apply @xl:table;
+
+            & > thead {
+                @apply @xl:table-header-group;
+            }
+
+            & > tbody {
+                @apply @xl:table-row-group;
+
+                & > tr {
+                    @apply @xl:table-row @xl:p-0;
+
+                    & > td {
+                        @apply @xl:table-cell @xl:px-3 @xl:py-2;
+
+                        &.fi-hidden {
+                            @apply @xl:table-cell;
+                        }
+
+                        & .fi-fo-field {
+                            @apply @xl:gap-y-0;
+                        }
+
+                        & .fi-in-entry {
+                            @apply @xl:gap-y-0;
+                        }
+
+                        & .fi-fo-field-label-content {
+                            @apply @xl:hidden;
+                        }
+
+                        & .fi-in-entry-label {
+                            @apply @xl:hidden;
+                        }
+
+                        & .fi-fo-toggle-buttons-wrp .fi-fo-field-content-col {
+                            @apply @xl:auto-cols-[1fr];
+                        }
+                    }
+                }
+            }
+        }
+
+        &.fi-compact {
+            & > table {
+                & > tbody {
+                    & > tr {
+                        & > td {
+                            @apply @xl:border-gray-200 @xl:px-0 @xl:py-1 @xl:dark:border-white/5 @xl:[&:not(:last-of-type)]:border-e;
+                        }
+                    }
+                }
+            }
+
+            & .fi-input-wrp {
+                @apply @xl:bg-transparent! @xl:shadow-none @xl:ring-0!;
+            }
+
+            & .fi-fo-table-repeater-actions {
+                @apply @xl:px-3 @xl:py-2;
+            }
+
+            & .fi-fo-field-wrp-error-message {
+                @apply @xl:px-3 @xl:pb-2;
+            }
+
+            & .fi-in-entry-content {
+                @apply @xl:px-3;
+            }
+
+            & .fi-fo-radio {
+                @apply @xl:px-3;
+            }
+        }
+    }
+
+    @supports not (container-type: inline-size) {
+        & > table {
+            @apply lg:table;
+
+            & > thead {
+                @apply lg:table-header-group;
+            }
+
+            & > tbody {
+                @apply lg:table-row-group;
+
+                & > tr {
+                    @apply lg:table-row lg:p-0;
+
+                    & > td {
+                        @apply lg:table-cell lg:px-3 lg:py-2;
+
+                        &.fi-hidden {
+                            @apply lg:table-cell;
+                        }
+
+                        & .fi-fo-field {
+                            @apply lg:gap-y-0;
+                        }
+
+                        & .fi-in-entry {
+                            @apply lg:gap-y-0;
+                        }
+
+                        & .fi-fo-field-label-content {
+                            @apply lg:hidden;
+                        }
+
+                        & .fi-in-entry-label {
+                            @apply lg:hidden;
+                        }
+
+                        & .fi-fo-toggle-buttons-wrp .fi-fo-field-content-col {
+                            @apply lg:auto-cols-[1fr];
+                        }
+                    }
+                }
+            }
+        }
+
+        &.fi-compact {
+            & > table {
+                & > tbody {
+                    & > tr {
+                        & > td {
+                            @apply lg:border-gray-200 lg:px-0 lg:py-1 lg:dark:border-white/5 lg:[&:not(:last-of-type)]:border-e;
+                        }
+                    }
+                }
+            }
+
+            & .fi-input-wrp {
+                @apply lg:bg-transparent! lg:shadow-none lg:ring-0!;
+            }
+
+            & .fi-fo-table-repeater-actions {
+                @apply lg:px-3 lg:py-2;
+            }
+
+            & .fi-fo-field-wrp-error-message {
+                @apply lg:px-3 lg:pb-2;
+            }
+
+            & .fi-in-entry-content {
+                @apply lg:px-3;
+            }
+
+            & .fi-fo-radio {
+                @apply lg:px-3;
+            }
+        }
+    }
+
+    & .fi-fo-table-repeater-add {
+        @apply flex w-full justify-center;
+
+        &.fi-align-start,
+        &.fi-align-left {
+            @apply justify-start;
+        }
+
+        &.fi-align-end,
+        &.fi-align-right {
+            @apply justify-end;
+        }
+    }
+}