@sparqjs/schema-vue 0.1.0

package/src/detail/style.css

@@ -0,0 +1,427 @@
+.sparq-detail-shell {
+    --sparq-detail-gap: 16px;
+    --sparq-detail-card-bg: var(--sq-schema-surface);
+    --sparq-detail-card-border: var(--sq-schema-border);
+    --sparq-detail-card-shadow: var(--sq-schema-shadow-soft);
+    --sparq-detail-label-color: var(--sq-schema-subtle);
+    --sparq-detail-value-color: var(--sq-schema-title);
+    --sparq-detail-muted-bg: var(--sq-schema-surface-muted);
+    overflow: hidden;
+    border: 1px solid var(--sparq-detail-card-border);
+    border-radius: calc(var(--sq-schema-radius) + 2px);
+    background:
+        linear-gradient(180deg, color-mix(in srgb, var(--sq-schema-panel-glass) 92%, transparent), var(--sq-schema-surface)),
+        var(--sq-schema-surface);
+    box-shadow: var(--sq-schema-shadow);
+}
+
+.sparq-detail-shell__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 16px;
+    border-bottom: 1px solid var(--sparq-detail-card-border);
+    background:
+        linear-gradient(135deg, color-mix(in srgb, var(--sq-schema-primary-soft) 42%, transparent), transparent 72%),
+        linear-gradient(180deg, color-mix(in srgb, var(--sq-schema-panel-glass) 94%, transparent), var(--sq-schema-surface));
+    padding: 18px 20px;
+}
+
+.sparq-detail-shell__headline {
+    min-width: 0;
+}
+
+.sparq-detail-shell__title {
+    margin: 0;
+    color: var(--sparq-detail-value-color);
+    font-size: 20px;
+    font-weight: 750;
+    line-height: 1.3;
+}
+
+.sparq-detail-shell__meta {
+    margin: 6px 0 0;
+    color: var(--sparq-detail-label-color);
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+.sparq-detail-shell__actions {
+    display: flex;
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 8px;
+}
+
+.sparq-detail-shell__body {
+    padding: 18px;
+    background: var(--sparq-detail-muted-bg);
+}
+
+.sparq-detail-shell__body > .sparq-detail > [data-slot='header'] {
+    display: none;
+}
+
+.sparq-detail {
+    display: block;
+    min-width: 0;
+}
+
+.sparq-detail > [data-slot='header'] {
+    margin-bottom: var(--sparq-detail-gap);
+    border: 1px solid var(--sparq-detail-card-border);
+    border-radius: calc(var(--sq-schema-radius) - 2px);
+    background:
+        linear-gradient(135deg, color-mix(in srgb, var(--sq-schema-primary-soft) 38%, transparent), transparent 76%),
+        linear-gradient(180deg, color-mix(in srgb, var(--sq-schema-panel-glass) 94%, transparent), var(--sq-schema-surface));
+    padding: 18px 20px;
+    box-shadow: var(--sparq-detail-card-shadow);
+}
+
+.sparq-detail > [data-slot='header'] h3 {
+    margin: 0 0 6px;
+    color: var(--sparq-detail-value-color);
+    font-size: 20px;
+    font-weight: 700;
+    line-height: 1.3;
+}
+
+.sparq-detail [data-slot='fields'] {
+    min-width: 0;
+}
+
+.sparq-detail .sparq-section-block,
+.sparq-detail .sparq-view-node-card,
+.sparq-detail .sparq-view-node-tabs {
+    min-width: 0;
+    height: 100%;
+}
+
+.sparq-detail .sparq-section-block {
+    border: 1px solid var(--sparq-detail-card-border);
+    border-radius: calc(var(--sq-schema-radius) - 2px);
+    background: var(--sparq-detail-card-bg);
+    padding: 16px;
+    box-shadow: var(--sparq-detail-card-shadow);
+}
+
+.sparq-detail .sparq-section-block__header {
+    margin-bottom: 14px;
+    border-left: 0;
+    border-bottom: 1px solid color-mix(in srgb, var(--sparq-detail-card-border) 82%, var(--sq-schema-surface) 18%);
+    padding: 0 0 12px;
+}
+
+.sparq-detail .sparq-section-block__title {
+    font-size: 15px;
+    font-weight: 700;
+}
+
+.sparq-detail .sparq-section-block__help {
+    margin-top: 4px;
+}
+
+.sparq-detail-field {
+    display: grid;
+    grid-template-columns: minmax(96px, 0.42fr) minmax(0, 1fr);
+    gap: 8px 14px;
+    align-items: start;
+    min-width: 0;
+    min-height: 42px;
+    border: 1px solid transparent;
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    background: var(--sparq-detail-muted-bg);
+    padding: 10px 12px;
+}
+
+.sparq-detail-field__label {
+    min-width: 0;
+    color: var(--sparq-detail-label-color);
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.sparq-detail-field__value {
+    min-width: 0;
+    color: var(--sparq-detail-value-color);
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 1.6;
+    overflow-wrap: anywhere;
+}
+
+.sparq-detail-field .sparq-help-text,
+.sparq-detail-field [data-slot='node-help'] {
+    grid-column: 2;
+    margin-top: -2px;
+}
+
+.sparq-detail .sparq-field-display,
+.sparq-detail .sparq-field-link,
+.sparq-detail .sparq-file-link-list {
+    white-space: normal;
+}
+
+@media (max-width: 720px) {
+    .sparq-detail-shell__header {
+        flex-direction: column;
+    }
+
+    .sparq-detail-shell__actions {
+        width: 100%;
+        justify-content: flex-start;
+    }
+
+    .sparq-detail-shell__body {
+        padding: 12px;
+    }
+
+    .sparq-detail-field {
+        grid-template-columns: 1fr;
+    }
+
+    .sparq-detail-field .sparq-help-text,
+    .sparq-detail-field [data-slot='node-help'] {
+        grid-column: 1;
+    }
+}
+
+.sparq-audit-panel {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+    min-height: 100%;
+    background: var(--sq-schema-surface-muted);
+}
+
+.sparq-audit-summary {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    border: 1px solid var(--sq-schema-border);
+    border-radius: var(--sq-schema-radius);
+    background: var(--sq-schema-surface);
+    padding: 14px 16px;
+    box-shadow: var(--sq-schema-shadow-soft);
+}
+
+.sparq-audit-summary__main {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: baseline;
+    gap: 8px;
+    min-width: 0;
+}
+
+.sparq-audit-summary__label,
+.sparq-audit-summary__id,
+.sparq-audit-item__time,
+.sparq-audit-item__meta {
+    color: var(--sq-schema-muted);
+    font-size: 12px;
+}
+
+.sparq-audit-summary__title,
+.sparq-audit-item__title,
+.sparq-audit-changes__after {
+    color: var(--sq-schema-title);
+}
+
+.sparq-audit-summary__title {
+    font-size: 15px;
+}
+
+.sparq-audit-state {
+    border: 1px dashed var(--sq-schema-border-strong);
+    border-radius: var(--sq-schema-radius);
+    background: var(--sq-schema-surface);
+    padding: 24px;
+    color: var(--sq-schema-muted);
+    text-align: center;
+}
+
+.sparq-audit-timeline {
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 14px;
+    padding-left: 18px;
+}
+
+.sparq-audit-timeline::before {
+    position: absolute;
+    top: 6px;
+    bottom: 6px;
+    left: 5px;
+    width: 2px;
+    background: var(--sq-schema-border);
+    content: '';
+}
+
+.sparq-audit-item {
+    position: relative;
+    display: grid;
+    grid-template-columns: 16px minmax(0, 1fr);
+    gap: 10px;
+}
+
+.sparq-audit-item__dot {
+    z-index: 1;
+    width: 12px;
+    height: 12px;
+    margin-top: 18px;
+    border: 2px solid var(--sq-schema-surface);
+    border-radius: var(--sq-schema-radius-pill);
+    background: var(--sq-schema-muted);
+    box-shadow: 0 0 0 2px var(--sq-schema-border);
+}
+
+.sparq-audit-item--success .sparq-audit-item__dot {
+    background: var(--sq-schema-success);
+}
+
+.sparq-audit-item--primary .sparq-audit-item__dot {
+    background: var(--sq-schema-primary);
+}
+
+.sparq-audit-item--danger .sparq-audit-item__dot {
+    background: var(--sq-schema-danger);
+}
+
+.sparq-audit-item--warning .sparq-audit-item__dot {
+    background: var(--sq-schema-warning);
+}
+
+.sparq-audit-item__card {
+    min-width: 0;
+    border: 1px solid var(--sq-schema-border);
+    border-radius: var(--sq-schema-radius);
+    background: var(--sq-schema-surface);
+    padding: 14px;
+    box-shadow: var(--sq-schema-shadow-soft);
+}
+
+.sparq-audit-item__header {
+    display: flex;
+    align-items: flex-start;
+    justify-content: space-between;
+    gap: 12px;
+}
+
+.sparq-audit-item__title-group {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 8px;
+    min-width: 0;
+}
+
+.sparq-audit-item__title {
+    font-size: 15px;
+}
+
+.sparq-audit-item__type {
+    border-radius: var(--sq-schema-radius-pill);
+    background: var(--sq-schema-surface-soft);
+    padding: 2px 8px;
+    color: var(--sq-schema-subtle);
+    font-size: 12px;
+}
+
+.sparq-audit-item__type.is-success {
+    background: color-mix(in srgb, var(--sq-schema-success) 10%, var(--sq-schema-surface));
+    color: var(--sq-schema-success);
+}
+
+.sparq-audit-item__type.is-primary {
+    background: color-mix(in srgb, var(--sq-schema-primary) 10%, var(--sq-schema-surface));
+    color: var(--sq-schema-primary-strong);
+}
+
+.sparq-audit-item__type.is-danger {
+    background: color-mix(in srgb, var(--sq-schema-danger) 10%, var(--sq-schema-surface));
+    color: var(--sq-schema-danger);
+}
+
+.sparq-audit-item__type.is-warning {
+    background: color-mix(in srgb, var(--sq-schema-warning) 10%, var(--sq-schema-surface));
+    color: var(--sq-schema-warning-strong);
+}
+
+.sparq-audit-item__meta {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    margin-top: 8px;
+}
+
+.sparq-audit-item__avatar {
+    width: 20px;
+    height: 20px;
+    border-radius: var(--sq-schema-radius-pill);
+    object-fit: cover;
+}
+
+.sparq-audit-item__summary {
+    margin: 10px 0 0;
+    color: var(--sq-schema-subtle);
+    font-size: 13px;
+    line-height: 1.6;
+}
+
+.sparq-audit-changes {
+    margin-top: 10px;
+}
+
+.sparq-audit-changes summary {
+    cursor: pointer;
+    color: var(--sq-schema-link);
+    font-size: 13px;
+    user-select: none;
+}
+
+.sparq-audit-changes__table {
+    display: grid;
+    grid-template-columns: minmax(96px, 0.8fr) minmax(0, 1fr) minmax(0, 1fr);
+    gap: 1px;
+    margin-top: 10px;
+    overflow: hidden;
+    border: 1px solid var(--sq-schema-border);
+    border-radius: calc(var(--sq-schema-radius) - 2px);
+    background: var(--sq-schema-border);
+}
+
+.sparq-audit-changes__field,
+.sparq-audit-changes__before,
+.sparq-audit-changes__after {
+    min-width: 0;
+    background: var(--sq-schema-surface);
+    padding: 8px 10px;
+    color: var(--sq-schema-text);
+    font-size: 12px;
+    overflow-wrap: anywhere;
+}
+
+.sparq-audit-changes__field {
+    color: var(--sq-schema-muted);
+    font-weight: 600;
+}
+
+.sparq-audit-footer {
+    display: flex;
+    justify-content: center;
+    padding: 4px 0 12px;
+}
+
+@media (max-width: 720px) {
+    .sparq-audit-summary,
+    .sparq-audit-item__header {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .sparq-audit-changes__table {
+        grid-template-columns: 1fr;
+    }
+}

package/src/render/style.css

@@ -0,0 +1,230 @@
+.sparq-view {
+    min-width: 0;
+    color: var(--sq-schema-text);
+}
+
+.sparq-view--fit {
+    height: 100%;
+    min-height: 0;
+}
+
+.sparq-view-container {
+    min-width: 0;
+    color: var(--sq-schema-text);
+}
+
+.sparq-view-container--page {
+    display: grid;
+}
+
+.sparq-view-container--page > [data-slot] {
+    min-width: 0;
+}
+
+.sparq-view-container--page > [data-slot='search'] + [data-slot='table'] {
+    margin-top: var(--sq-schema-spacing-sm);
+}
+
+.sparq-view-container--page > [data-slot='tree'] {
+    padding: var(--sq-schema-spacing-md) var(--sq-schema-spacing-lg);
+    border: 1px solid var(--sq-schema-border);
+    border-radius: calc(var(--sq-schema-radius) + 1px);
+    background:
+        linear-gradient(180deg, color-mix(in srgb, var(--sq-schema-panel-glass) 92%, transparent), var(--sq-schema-surface)),
+        var(--sq-schema-surface);
+    box-shadow: var(--sq-schema-shadow);
+}
+
+.sparq-view-container--search,
+.sparq-view-container--table,
+.sparq-view-container--form,
+.sparq-view-container--detail {
+    min-width: 0;
+    overflow: hidden;
+}
+
+.sparq-view-container--search,
+.sparq-view-container--table {
+    border: 1px solid var(--sq-schema-border);
+    border-radius: var(--sq-schema-radius);
+    background: var(--sq-schema-surface);
+    box-shadow: var(--sq-schema-shadow-soft);
+}
+
+.sparq-view-container--search > [data-slot='header'],
+.sparq-view-container--table > [data-slot='header'],
+.sparq-view-container--form > [data-slot='header'],
+.sparq-view-container--detail > [data-slot='header'] {
+    display: grid;
+    gap: var(--sq-schema-spacing-3xs);
+    padding: var(--sq-schema-spacing-xl) var(--sq-schema-spacing-2xl) var(--sq-schema-spacing-md);
+    border-bottom: 1px solid var(--sq-schema-border);
+    background:
+        linear-gradient(180deg, color-mix(in srgb, var(--sq-schema-primary-soft) 38%, transparent), transparent 78%),
+        linear-gradient(180deg, color-mix(in srgb, var(--sq-schema-panel-glass) 94%, transparent), var(--sq-schema-surface));
+}
+
+.sparq-view-container--search > [data-slot='header'] h3,
+.sparq-view-container--table > [data-slot='header'] h3,
+.sparq-view-container--form > [data-slot='header'] h3,
+.sparq-view-container--detail > [data-slot='header'] h3 {
+    margin: 0;
+    color: var(--sq-schema-title);
+    font-size: 18px;
+    font-weight: 760;
+    line-height: 1.2;
+}
+
+.sparq-view-container--search > [data-slot='header'] .sparq-help-text,
+.sparq-view-container--table > [data-slot='header'] .sparq-help-text,
+.sparq-view-container--form > [data-slot='header'] .sparq-help-text,
+.sparq-view-container--detail > [data-slot='header'] .sparq-help-text {
+    color: var(--sq-schema-subtle);
+}
+
+.sparq-view-container--search > [data-sparq-form] {
+    padding: var(--sq-schema-spacing-lg) var(--sq-schema-spacing-xl);
+}
+
+.sparq-view-container--form > [data-sparq-form] {
+    padding: var(--sq-schema-spacing-lg) var(--sq-schema-spacing-xl) var(--sq-schema-spacing-xl);
+}
+
+.sparq-view-container--form > [data-slot='footer'] {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sq-schema-spacing-2xs);
+    padding: var(--sq-schema-spacing-md) var(--sq-schema-spacing-xl);
+    border-top: 1px solid var(--sq-schema-border);
+    background: color-mix(in srgb, var(--sq-schema-surface-soft) 72%, var(--sq-schema-surface));
+}
+
+.sparq-view-container--search > [data-sparq-form] > [data-sparq-layout-row],
+.sparq-view-container--form > [data-sparq-form] > [data-sparq-layout-row],
+.sparq-view-container--search > [data-sparq-form] > .sparq-view-node-row,
+.sparq-view-container--form > [data-sparq-form] > .sparq-view-node-row {
+    row-gap: var(--sq-schema-spacing-3xs);
+}
+
+.sparq-search-operation {
+    display: flex;
+    align-items: flex-end;
+    /*justify-content: flex-end;*/
+}
+
+.sparq-table-body {
+    min-width: 0;
+    padding: var(--sq-schema-spacing-lg) var(--sq-schema-spacing-xl) var(--sq-schema-spacing-sm);
+}
+
+.sparq-table-body > [data-sparq-table] {
+    width: 100%;
+}
+
+.sparq-table-footer {
+    display: flex;
+    justify-content: flex-end;
+    padding: 0 var(--sq-schema-spacing-xl) var(--sq-schema-spacing-xl);
+}
+
+.sparq-view--scroll-view {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+.sparq-view--scroll-view .sparq-view-container--page,
+.sparq-view--scroll-view .sparq-view-container--table,
+.sparq-view--scroll-view [data-slot='table'] {
+    display: flex;
+    flex: 1 1 auto;
+    flex-direction: column;
+    min-height: 0;
+}
+
+.sparq-view--scroll-view .sparq-view-container--search,
+.sparq-view--scroll-view .sparq-table-toolbar,
+.sparq-view--scroll-view .sparq-table-footer {
+    flex: 0 0 auto;
+}
+
+.sparq-view--scroll-view .sparq-view-container--table .sparq-table-body {
+    display: flex;
+    flex: 1 1 auto;
+    min-height: 0;
+    overflow: auto;
+}
+
+.sparq-view--scroll-view .sparq-view-container--table .sparq-table-body > [data-sparq-table] {
+    height: 100%;
+}
+
+.sparq-table-toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: var(--sq-schema-spacing-sm);
+    padding: var(--sq-schema-spacing-md) var(--sq-schema-spacing-xl) var(--sq-schema-spacing-2xs);
+}
+
+.sparq-table-toolbar + .sparq-table-body {
+    padding-top: 0;
+}
+
+.sparq-table-toolbar-main {
+    display: flex;
+    min-width: 0;
+    flex: 1;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--sq-schema-spacing-xs);
+}
+
+.sparq-table-toolbar-section {
+    display: inline-flex;
+    align-items: center;
+}
+
+.sparq-table-toolbar-left,
+.sparq-table-toolbar-batch {
+    flex: 0 0 auto;
+}
+
+.sparq-table-toolbar-filters {
+    min-width: 0;
+    gap: var(--sq-schema-spacing-2xs);
+}
+
+.sparq-table-toolbar-right {
+    flex: 0 0 auto;
+    margin-left: auto;
+}
+
+@media (max-width: 640px) {
+    .sparq-view-container--search > [data-slot='header'],
+    .sparq-view-container--table > [data-slot='header'],
+    .sparq-view-container--form > [data-slot='header'],
+    .sparq-view-container--detail > [data-slot='header'],
+    .sparq-view-container--search > [data-sparq-form],
+    .sparq-view-container--form > [data-sparq-form],
+    .sparq-table-toolbar,
+    .sparq-table-body,
+    .sparq-table-footer {
+        padding-right: var(--sq-schema-spacing-md);
+        padding-left: var(--sq-schema-spacing-md);
+    }
+
+    .sparq-table-toolbar {
+        align-items: stretch;
+        flex-direction: column;
+    }
+
+    .sparq-table-toolbar-main {
+        width: 100%;
+    }
+
+    .sparq-table-toolbar-right {
+        margin-left: 0;
+    }
+}