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

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

@@ -0,0 +1,88 @@
+.fi-fo-field {
+    @apply grid gap-y-2;
+
+    &.fi-fo-field-has-inline-label {
+        @apply sm:grid-cols-3 sm:items-start sm:gap-x-4;
+
+        & .fi-fo-field-content-col {
+            @apply sm:col-span-2;
+        }
+    }
+
+    & .fi-fo-field-label-ctn,
+    & .fi-fo-field-label {
+        @apply flex items-start gap-x-3;
+
+        & > .fi-checkbox-input {
+            @apply mt-0.5 shrink-0;
+        }
+
+        & > .fi-toggle {
+            @apply -my-0.5;
+        }
+
+        & > .fi-sc:nth-child(1) {
+            @apply grow-0;
+        }
+
+        &.fi-hidden {
+            @apply hidden;
+        }
+    }
+
+    & .fi-fo-field-label-content {
+        @apply text-sm font-medium text-gray-950 dark:text-white;
+
+        & .fi-fo-field-label-required-mark {
+            @apply text-danger-600 dark:text-danger-400 font-medium;
+        }
+    }
+
+    & .fi-fo-field-label-col {
+        @apply grid h-full auto-cols-fr gap-y-2;
+
+        &.fi-vertical-align-start {
+            @apply sm:items-start;
+        }
+
+        &.fi-vertical-align-center {
+            @apply sm:items-center;
+        }
+
+        &.fi-vertical-align-end {
+            @apply sm:items-end;
+        }
+    }
+
+    & .fi-fo-field-content-col {
+        @apply grid auto-cols-fr gap-y-2;
+    }
+
+    & .fi-fo-field-content-slot {
+        @apply contents;
+    }
+
+    & .fi-fo-field-content-ctn {
+        @apply flex w-full items-center gap-x-3;
+
+        &.fi-empty {
+            @apply contents;
+
+            & > .fi-fo-field-content {
+                @apply contents;
+            }
+        }
+    }
+
+    & .fi-fo-field-content {
+        @apply w-full;
+    }
+
+    & .fi-fo-field-wrp-error-message {
+        @apply text-danger-600 dark:text-danger-400 text-sm;
+    }
+
+    & .fi-fo-field-wrp-error-list {
+        @apply list-inside list-disc space-y-0.5;
+    }
+}

package/resources/filament/packages/forms/resources/css/components/file-upload/filepond-plugin-media-preview.css

@@ -0,0 +1,104 @@
+/**
+ * Source: https://github.com/nielsboogaard/filepond-plugin-media-preview (MIT)
+ * Changes:
+ * - Vendored compiled CSS from dist — upstream source is SCSS.
+ * - Overrode FilePond's reordering cursor for audio controls.
+ * - Expanded the audio timeline hit target.
+ */
+.filepond--media-preview audio {
+    display: none;
+}
+
+.filepond--media-preview .audioplayer {
+    width: calc(100% - 1.4em);
+    margin: 2.3em auto auto;
+    cursor: pointer;
+}
+
+.filepond--media-preview .playpausebtn {
+    margin-top: 0.3em;
+    margin-right: 0.3em;
+    height: 25px;
+    width: 25px;
+    border-radius: 25px;
+    border: none;
+    background-repeat: no-repeat;
+    background-position: center;
+    float: left;
+    outline: none;
+    cursor: pointer;
+}
+.filepond--media-preview .playpausebtn:hover {
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.filepond--media-preview .play {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAyElEQVQ4T9XUsWoCQRRG4XPaFL5SfIy8gKYKBCysrax8Ahs7qzQ2qVIFOwsrsbEWLEK6EBFGBrIQhN2d3dnGgalm+Jh7789Ix8uOPe4YDCH0gZ66atKW0pJDCE/AEngDXtRjCpwCRucbGANzNVTBqWBhfAJDdV+GNgWj8wtM41bPt3AbsDB2f69d/0dzwC0wUDe54A8wAWbqJbfkD+BZPeQO5QsYqYu6LKb0MIb7VT3VYfG8CnwEHtT3FKi4c8e/TZMyk3LYFrwCgMdHFbRDKS8AAAAASUVORK5CYII=');
+}
+
+.filepond--media-preview .pause {
+    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAAh0lEQVQ4T+2UsQkCURBE30PLMbAMMResQrAPsQ0TK9AqDKxGZeTLD74aGNwlhzfZssvADDMrPcOe+RggYZIJcG2s2KinMidZAvu6u6uzT8u+JCeZArfmcKUeK+EaONTdQy23bxgJX8aPHvIHsSnVuzTx36rn2pQFsGuqN//ZlK7vbIDvq6vkJ9yteBXzecYbAAAAAElFTkSuQmCC');
+}
+
+.filepond--media-preview .timeline {
+    box-sizing: content-box;
+    width: calc(100% - 2.5em);
+    height: 3px;
+    padding-block: 14px;
+    margin-top: 2px;
+    float: left;
+    border-radius: 15px;
+    background: rgba(255, 255, 255, 0.3);
+    background-clip: content-box;
+}
+
+.filepond--media-preview .playhead {
+    width: 13px;
+    height: 13px;
+    border-radius: 50%;
+    margin-top: -5px;
+    background: white;
+    transform: translateX(-50%);
+}
+
+.filepond--media-preview-wrapper {
+    position: absolute;
+    left: 0;
+    top: 0;
+    right: 0;
+    height: 100%;
+    margin: 0;
+    border-radius: 0.45em;
+    overflow: hidden;
+    background: rgba(0, 0, 0, 0.01);
+    pointer-events: auto;
+}
+.filepond--media-preview-wrapper:before {
+    content: ' ';
+    position: absolute;
+    width: 100%;
+    height: 2em;
+    /* FF3.6-15 */
+    /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, black 0%, rgba(0, 0, 0, 0) 100%);
+    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
+    /* IE6-9 */
+    z-index: 3;
+}
+
+.filepond--media-preview {
+    position: relative;
+    z-index: 1;
+    display: block;
+    width: 100%;
+    height: 100%;
+    -webkit-transform-origin: center center;
+    transform-origin: center center;
+    will-change: transform, opacity;
+}
+.filepond--media-preview video,
+.filepond--media-preview audio {
+    width: 100%;
+    will-change: transform;
+}

package/resources/filament/packages/forms/resources/css/components/file-upload.css

@@ -0,0 +1,199 @@
+.fi-fo-file-upload {
+    @apply flex flex-col gap-y-2;
+
+    &.fi-align-start,
+    &.fi-align-left {
+        @apply items-start;
+    }
+
+    &.fi-align-center {
+        @apply items-center;
+    }
+
+    &.fi-align-end,
+    &.fi-align-right {
+        @apply items-end;
+    }
+
+    & .fi-fo-file-upload-input-ctn {
+        @apply h-full w-full;
+    }
+
+    &.fi-fo-file-upload-avatar {
+        & .fi-fo-file-upload-input-ctn {
+            @apply h-full w-32;
+        }
+    }
+
+    & .fi-fo-file-upload-error-message {
+        @apply text-danger-600 dark:text-danger-400 text-sm;
+    }
+
+    & .filepond--root {
+        @apply mb-0 overflow-hidden rounded-lg bg-white font-sans shadow-sm ring-1 ring-gray-950/10 dark:bg-white/5 dark:ring-white/20;
+    }
+
+    & .filepond--root[data-disabled='disabled'] {
+        @apply bg-gray-50 dark:bg-transparent dark:ring-white/10;
+    }
+
+    & .filepond--root[data-style-panel-layout='compact circle'] {
+        @apply rounded-full;
+    }
+
+    & .filepond--panel-root {
+        @apply bg-transparent;
+    }
+
+    & .filepond--file-info-sub {
+        @apply opacity-100;
+    }
+
+    & .filepond--drop-label {
+        @apply h-auto! p-3!;
+    }
+
+    &
+        .filepond--root[data-disabled]:has(.filepond--item)
+        .filepond--drop-label:has(> label:empty) {
+        @apply hidden;
+    }
+
+    & .filepond--drop-label[style*='visibility: hidden'] {
+        @apply min-h-0!;
+    }
+
+    & .filepond--drop-label label {
+        @apply p-0!;
+    }
+
+    & .filepond--drop-label,
+    & .filepond--drop-label label {
+        @apply text-sm text-gray-600! opacity-100! dark:text-gray-400!;
+    }
+
+    & .filepond--label-action {
+        @apply text-primary-700 hover:text-primary-600 dark:hover:text-primary-400 dark:text-primary-400 font-medium no-underline transition duration-75;
+    }
+
+    & .filepond--drip-blob {
+        @apply bg-gray-400 dark:bg-gray-500;
+    }
+
+    & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
+        @apply inline;
+        width: calc(50% - 0.5rem);
+    }
+
+    @variant lg {
+        & .filepond--root[data-style-panel-layout='grid'] .filepond--item {
+            width: calc(33.33% - 0.5rem);
+        }
+    }
+
+    & .filepond--download-icon {
+        @apply pointer-events-auto me-1 inline-block size-4 bg-white align-bottom hover:bg-white/70;
+        -webkit-mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
+        mask-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJmZWF0aGVyIGZlYXRoZXItZG93bmxvYWQiPjxwYXRoIGQ9Ik0yMSAxNXY0YTIgMiAwIDAgMS0yIDJINWEyIDIgMCAwIDEtMi0ydi00Ij48L3BhdGg+PHBvbHlsaW5lIHBvaW50cz0iNyAxMCAxMiAxNSAxNyAxMCI+PC9wb2x5bGluZT48bGluZSB4MT0iMTIiIHkxPSIxNSIgeDI9IjEyIiB5Mj0iMyI+PC9saW5lPjwvc3ZnPg==');
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100%;
+        mask-size: 100%;
+    }
+
+    & .filepond--open-icon {
+        @apply pointer-events-auto me-1 inline-block size-4 bg-white align-bottom hover:bg-white/70;
+        -webkit-mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
+        mask-image: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGNsYXNzPSJoLTYgdy02IiBmaWxsPSJub25lIiB2aWV3Qm94PSIwIDAgMjQgMjQiIHN0cm9rZT0iY3VycmVudENvbG9yIiBzdHJva2Utd2lkdGg9IjIiPgogIDxwYXRoIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTTEwIDZINmEyIDIgMCAwMC0yIDJ2MTBhMiAyIDAgMDAyIDJoMTBhMiAyIDAgMDAyLTJ2LTRNMTQgNGg2bTAgMHY2bTAtNkwxMCAxNCIgLz4KPC9zdmc+Cg==);
+        -webkit-mask-repeat: no-repeat;
+        mask-repeat: no-repeat;
+        -webkit-mask-size: 100%;
+        mask-size: 100%;
+    }
+
+    & .filepond--file-action-button.filepond--action-edit-item {
+        @apply bg-black/50;
+    }
+
+    & .fi-fo-file-upload-editor {
+        @apply fixed inset-0 isolate z-50 h-[100dvh] w-screen p-2 sm:p-10 md:p-20;
+
+        & .fi-fo-file-upload-editor-overlay {
+            @apply fixed inset-0 h-full w-full cursor-pointer bg-gray-950/50 dark:bg-gray-950/75;
+            will-change: transform;
+        }
+
+        & .fi-fo-file-upload-editor-window {
+            @apply isolate mx-auto flex h-full w-full flex-col overflow-hidden rounded-xl bg-white ring-1 ring-gray-900/10 lg:flex-row dark:bg-gray-800 dark:ring-gray-50/10;
+        }
+
+        & .fi-fo-file-upload-editor-image-ctn {
+            @apply m-4 max-h-full max-w-full flex-1;
+        }
+
+        & .fi-fo-file-upload-editor-image {
+            @apply h-full w-auto;
+        }
+
+        & .fi-fo-file-upload-editor-control-panel {
+            @apply flex h-full w-full flex-1 flex-col overflow-y-auto bg-gray-50 lg:max-w-xs dark:bg-gray-900/30;
+
+            & .fi-fo-file-upload-editor-control-panel-main {
+                @apply flex-1 space-y-6 overflow-auto p-4;
+            }
+
+            & .fi-fo-file-upload-editor-control-panel-group {
+                @apply grid gap-3;
+
+                & .fi-btn-group {
+                    @apply w-full;
+                }
+
+                & .fi-btn.fi-active {
+                    @apply bg-gray-50 dark:bg-gray-700;
+                }
+
+                & .fi-fo-file-upload-editor-control-panel-group-title {
+                    @apply text-xs text-gray-950 dark:text-white;
+                }
+            }
+
+            & .fi-fo-file-upload-editor-control-panel-footer {
+                @apply flex items-center justify-end gap-3 px-4 py-3;
+            }
+
+            & .fi-fo-file-upload-editor-control-panel-reset-action-ctn {
+                @apply flex justify-end;
+            }
+        }
+
+        & .cropper-drag-box.cropper-crop.cropper-modal {
+            @apply bg-gray-100/50 opacity-100 dark:bg-gray-900/80;
+        }
+
+        &.fi-fo-file-upload-editor-circle-cropper {
+            & .cropper-view-box,
+            & .cropper-face {
+                border-radius: 50%;
+            }
+        }
+
+        &.fi-fo-file-upload-editor-crop-only {
+            & .fi-fo-file-upload-editor-window {
+                @apply max-w-3xl flex-col;
+            }
+
+            & .fi-fo-file-upload-editor-image-ctn {
+                @apply min-h-0 flex-1 overflow-hidden;
+            }
+
+            & .fi-fo-file-upload-editor-control-panel {
+                @apply h-auto flex-none lg:max-w-none;
+            }
+
+            & .fi-fo-file-upload-editor-control-panel-footer {
+                @apply justify-start;
+            }
+        }
+    }
+}

package/resources/filament/packages/forms/resources/css/components/key-value.css

@@ -0,0 +1,57 @@
+.fi-fo-key-value {
+    & .fi-fo-key-value-table-ctn {
+        @apply divide-y divide-gray-200 dark:divide-white/10;
+    }
+
+    & .fi-fo-key-value-table {
+        @apply w-full table-auto divide-y divide-gray-200 dark:divide-white/5;
+
+        & > thead {
+            & > tr {
+                & > th {
+                    @apply px-3 py-2 text-start text-sm font-medium text-gray-700 dark:text-gray-200;
+
+                    &.fi-has-action {
+                        @apply w-9 p-0;
+                    }
+                }
+            }
+        }
+
+        & > tbody {
+            @apply divide-y divide-gray-200 dark:divide-white/5;
+
+            & > tr {
+                @apply divide-x divide-gray-200 rtl:divide-x-reverse dark:divide-white/5;
+
+                & > td {
+                    @apply w-1/2 p-0;
+
+                    &.fi-has-action {
+                        @apply w-auto px-3 py-2;
+
+                        & .fi-fo-key-value-table-row-sortable-handle {
+                            @apply flex;
+                        }
+                    }
+
+                    & .fi-input {
+                        @apply font-mono;
+                    }
+                }
+            }
+        }
+    }
+
+    & .fi-fo-key-value-add-action-ctn {
+        @apply flex justify-center px-3 py-2;
+    }
+}
+
+.fi-fo-key-value-wrp {
+    &.fi-fo-field-has-inline-label {
+        & .fi-fo-field-label-col {
+            @apply sm:pt-1.5;
+        }
+    }
+}