@sparqjs/schema-ui-element-plus 0.1.0

package/src/style.css

@@ -0,0 +1,483 @@
+@import 'element-plus/dist/index.css';
+
+:root,
+.sparq-view,
+.sparq-view-container,
+.sparq-detail-shell,
+.sparq-audit-panel,
+[data-sparq-element-plus-form-shell],
+[data-sparq-element-plus-detail-shell],
+[data-sparq-icon-input-dialog],
+[data-sparq-key-value-editor] {
+    --el-color-primary: var(--sq-schema-primary);
+    --el-color-primary-light-3: color-mix(in srgb, var(--sq-schema-primary) 76%, var(--sq-schema-surface) 24%);
+    --el-color-primary-light-5: color-mix(in srgb, var(--sq-schema-primary) 60%, var(--sq-schema-surface) 40%);
+    --el-color-primary-light-7: color-mix(in srgb, var(--sq-schema-primary) 38%, var(--sq-schema-surface) 62%);
+    --el-color-primary-light-8: color-mix(in srgb, var(--sq-schema-primary) 26%, var(--sq-schema-surface) 74%);
+    --el-color-primary-light-9: color-mix(in srgb, var(--sq-schema-primary) 14%, var(--sq-schema-surface) 86%);
+    --el-color-primary-dark-2: var(--sq-schema-primary-strong);
+    --el-color-success: var(--sq-schema-success);
+    --el-color-warning: var(--sq-schema-warning);
+    --el-color-danger: var(--sq-schema-danger);
+    --el-color-info: var(--sq-schema-subtle);
+    --el-bg-color: var(--sq-schema-surface);
+    --el-bg-color-page: var(--sq-schema-surface-muted);
+    --el-bg-color-overlay: var(--sq-schema-surface);
+    --el-fill-color-blank: var(--sq-schema-surface);
+    --el-fill-color-light: var(--sq-schema-surface-soft);
+    --el-fill-color-lighter: var(--sq-schema-surface-muted);
+    --el-fill-color-extra-light: var(--sq-schema-surface-muted);
+    --el-fill-color-dark: var(--sq-schema-hover);
+    --el-fill-color-disabled: color-mix(in srgb, var(--sq-schema-surface-muted) 84%, var(--sq-schema-surface) 16%);
+    --el-text-color-primary: var(--sq-schema-text);
+    --el-text-color-regular: var(--sq-schema-text);
+    --el-text-color-secondary: var(--sq-schema-subtle);
+    --el-text-color-placeholder: var(--sq-schema-muted);
+    --el-text-color-disabled: var(--sq-schema-muted);
+    --el-border-color: var(--sq-schema-border);
+    --el-border-color-light: var(--sq-schema-border);
+    --el-border-color-lighter: color-mix(in srgb, var(--sq-schema-border) 74%, var(--sq-schema-surface) 26%);
+    --el-border-color-extra-light: color-mix(in srgb, var(--sq-schema-border) 58%, var(--sq-schema-surface) 42%);
+    --el-disabled-border-color: color-mix(in srgb, var(--sq-schema-border) 72%, var(--sq-schema-surface) 28%);
+    --el-border-radius-base: var(--sq-schema-radius-sm);
+    --el-disabled-bg-color: color-mix(in srgb, var(--sq-schema-surface-muted) 84%, var(--sq-schema-surface) 16%);
+    --el-disabled-text-color: var(--sq-schema-muted);
+    --el-box-shadow-light: var(--sq-schema-shadow);
+    --el-mask-color: var(--sq-schema-overlay);
+    --el-mask-color-extra-light: var(--sq-schema-overlay);
+    --el-overlay-color: var(--sq-schema-overlay);
+    --el-overlay-color-light: var(--sq-schema-overlay);
+    --el-dialog-bg-color: var(--sq-schema-surface);
+    --el-drawer-bg-color: var(--sq-schema-surface);
+}
+
+[data-sparq-element-plus-form-shell].el-dialog,
+[data-sparq-element-plus-detail-shell].el-dialog,
+[data-sparq-icon-input-dialog].el-dialog {
+    overflow: hidden;
+    border: 1px solid var(--sq-schema-border);
+    border-radius: var(--sq-schema-radius-lg);
+    background:
+        linear-gradient(
+            180deg,
+            color-mix(in srgb, var(--sq-schema-panel-glass) 94%, transparent),
+            var(--sq-schema-surface)
+        ),
+        var(--sq-schema-surface);
+    box-shadow: var(--sq-schema-shadow-floating);
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__header,
+[data-sparq-element-plus-detail-shell] .el-dialog__header,
+[data-sparq-icon-input-dialog] .el-dialog__header,
+[data-sparq-element-plus-form-shell] .el-drawer__header,
+[data-sparq-element-plus-detail-shell] .el-drawer__header {
+    margin: 0;
+    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)
+        );
+    padding: var(--sq-schema-spacing-xl) var(--sq-schema-spacing-2xl) var(--sq-schema-spacing-md);
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__title,
+[data-sparq-element-plus-detail-shell] .el-dialog__title,
+[data-sparq-icon-input-dialog] .el-dialog__title,
+[data-sparq-element-plus-form-shell] .el-drawer__title,
+[data-sparq-element-plus-detail-shell] .el-drawer__title {
+    color: var(--sq-schema-title);
+    font-weight: 760;
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__body,
+[data-sparq-element-plus-detail-shell] .el-dialog__body,
+[data-sparq-icon-input-dialog] .el-dialog__body,
+[data-sparq-element-plus-form-shell] .el-drawer__body,
+[data-sparq-element-plus-detail-shell] .el-drawer__body {
+    background: var(--sq-schema-surface-muted);
+    padding: var(--sq-schema-spacing-xl);
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__footer,
+[data-sparq-element-plus-form-shell] .el-drawer__footer,
+[data-sparq-element-plus-detail-shell] .el-drawer__footer {
+    border-top: 1px solid var(--sq-schema-border);
+    background: var(--sq-schema-surface);
+    padding: var(--sq-schema-spacing-md) var(--sq-schema-spacing-2xl) var(--sq-schema-spacing-xl);
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__headerbtn,
+[data-sparq-element-plus-detail-shell] .el-dialog__headerbtn,
+[data-sparq-icon-input-dialog] .el-dialog__headerbtn,
+[data-sparq-element-plus-form-shell] .el-drawer__close-btn,
+[data-sparq-element-plus-detail-shell] .el-drawer__close-btn {
+    border-radius: var(--sq-schema-radius-xs);
+    color: var(--sq-schema-muted);
+    transition:
+        background-color 160ms ease,
+        color 160ms ease;
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__headerbtn:hover,
+[data-sparq-element-plus-detail-shell] .el-dialog__headerbtn:hover,
+[data-sparq-icon-input-dialog] .el-dialog__headerbtn:hover,
+[data-sparq-element-plus-form-shell] .el-drawer__close-btn:hover,
+[data-sparq-element-plus-detail-shell] .el-drawer__close-btn:hover {
+    background: var(--sq-schema-surface-soft);
+    color: var(--sq-schema-primary);
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__footer,
+[data-sparq-element-plus-form-shell] .el-drawer__footer,
+[data-sparq-element-plus-detail-shell] .el-drawer__footer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: var(--sq-schema-spacing-xs);
+}
+
+[data-sparq-element-plus-form-shell] .el-dialog__body > .el-form,
+[data-sparq-element-plus-form-shell] .el-drawer__body > .el-form {
+    min-width: 0;
+}
+
+[data-sparq-icon-input-dialog] .el-dialog__body {
+    min-width: 0;
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-form-item__label,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-checkbox__label,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-radio__label,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-select__placeholder {
+    color: var(--sq-schema-subtle);
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-form-item__label {
+    font-weight: 600;
+}
+
+/* 搜索项间距由搜索栅格控制，不保留 Element Plus 表单项默认的底部间距。 */
+.sparq-view-container--search [data-sparq-element-plus-search-item] {
+    margin-bottom: 0;
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-input__wrapper,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-select__wrapper,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-date-editor.el-input__wrapper,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-cascader .el-input__wrapper,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-input-number,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-textarea__inner {
+    border-radius: var(--sq-schema-radius-sm);
+    background: var(--sq-schema-surface);
+    box-shadow: 0 0 0 1px var(--sq-schema-border) inset;
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-select__wrapper {
+    min-height: var(--el-component-size, 38px);
+}
+
+/* 复合输入只保留控件组外侧圆角，避免输入框与前后附加控件之间出现视觉断层。 */
+.sparq-view-container .el-input-group--append > .el-input__wrapper {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+.sparq-view-container .el-input-group__append .el-button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.sparq-view-container .el-input-group--prepend > .el-input__wrapper {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+}
+
+.sparq-view-container .el-input-group__prepend .el-button {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-input__wrapper:hover,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-select__wrapper:hover,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-date-editor.el-input__wrapper:hover,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-cascader .el-input__wrapper:hover,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-input-number:hover,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-textarea__inner:hover {
+    box-shadow: 0 0 0 1px var(--sq-schema-border-strong) inset;
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-input__wrapper.is-focus,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-select__wrapper.is-focused,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-date-editor.el-input__wrapper.is-focus,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-cascader .el-input__wrapper.is-focus,
+:is(.sparq-view-container, [data-sparq-element-plus-form]) .el-textarea__inner:focus {
+    box-shadow:
+        0 0 0 1px var(--sq-schema-primary) inset,
+        var(--sq-schema-focus);
+}
+
+.sparq-view-container .el-input-number.is-controls-right .el-input-number__decrease,
+.sparq-view-container .el-input-number.is-controls-right .el-input-number__increase,
+.sparq-view-container .el-input-number__decrease,
+.sparq-view-container .el-input-number__increase {
+    border-color: var(--sq-schema-border);
+    color: var(--sq-schema-subtle);
+    background: var(--sq-schema-surface-soft);
+}
+
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-input__wrapper.is-disabled,
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-select__wrapper.is-disabled,
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-date-editor.el-input__wrapper.is-disabled,
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-input-number.is-disabled,
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-textarea.is-disabled
+    .el-textarea__inner {
+    background: var(--el-fill-color-disabled);
+    color: var(--el-text-color-disabled);
+    box-shadow: 0 0 0 1px var(--el-disabled-border-color) inset;
+}
+
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-button {
+    border-radius: var(--sq-schema-radius-sm);
+    box-shadow: none;
+}
+
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-button--default {
+    border-color: var(--sq-schema-border);
+    background: var(--sq-schema-surface);
+    color: var(--sq-schema-text);
+}
+
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-button--default:hover:not(:disabled),
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-button--default:focus-visible {
+    border-color: var(--sq-schema-border-strong);
+    background: var(--sq-schema-surface-soft);
+    color: var(--sq-schema-primary);
+}
+
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-button.is-disabled,
+:is(
+        .sparq-view-container,
+        [data-sparq-element-plus-form-shell],
+        [data-sparq-element-plus-detail-shell],
+        [data-sparq-icon-input-dialog],
+        [data-sparq-key-value-editor]
+    )
+    .el-button.is-disabled:hover {
+    border-color: var(--el-disabled-border-color);
+    background: var(--el-disabled-bg-color);
+    color: var(--el-text-color-disabled);
+}
+
+:is(.sparq-view-container, [data-sparq-element-plus-form-shell], [data-sparq-element-plus-detail-shell])
+    .el-form-item__error {
+    color: var(--sq-schema-danger);
+}
+
+.sparq-view-container .el-alert,
+[data-sparq-element-plus-form-shell] .el-alert,
+[data-sparq-element-plus-detail-shell] .el-alert {
+    border-radius: var(--sq-schema-radius-sm);
+}
+
+.sparq-view-container .el-empty__description p,
+[data-sparq-element-plus-form-shell] .el-empty__description p,
+[data-sparq-element-plus-detail-shell] .el-empty__description p,
+[data-sparq-icon-input-dialog] .el-empty__description p {
+    color: var(--sq-schema-muted);
+}
+
+.sparq-view-container .el-card,
+.sparq-detail .el-card {
+    overflow: hidden;
+    border-color: var(--sq-schema-border);
+    border-radius: calc(var(--sq-schema-radius) + 1px);
+    background: var(--sq-schema-surface);
+    box-shadow: var(--sq-schema-shadow-soft);
+}
+
+.sparq-view-container .el-card__header,
+.sparq-detail .el-card__header {
+    border-bottom-color: 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 .el-tabs__header,
+.sparq-detail .el-tabs__header {
+    margin-bottom: var(--sq-schema-spacing-md);
+}
+
+.sparq-view-container .el-tabs__nav-wrap::after,
+.sparq-detail .el-tabs__nav-wrap::after {
+    background: var(--sq-schema-border);
+}
+
+.sparq-view-container .el-tabs__item,
+.sparq-detail .el-tabs__item {
+    color: var(--sq-schema-subtle);
+}
+
+.sparq-view-container .el-tabs__item.is-active,
+.sparq-detail .el-tabs__item.is-active {
+    color: var(--sq-schema-primary);
+}
+
+.sparq-view-container .el-tabs__active-bar,
+.sparq-detail .el-tabs__active-bar {
+    background: var(--sq-schema-primary);
+}
+
+.sparq-view-container .el-collapse,
+.sparq-view-container .el-collapse-item__header,
+.sparq-view-container .el-collapse-item__wrap,
+.sparq-detail .el-collapse,
+.sparq-detail .el-collapse-item__header,
+.sparq-detail .el-collapse-item__wrap {
+    border-color: var(--sq-schema-border);
+    background: var(--sq-schema-surface);
+}
+
+.sparq-view-container .el-collapse-item__header,
+.sparq-detail .el-collapse-item__header {
+    color: var(--sq-schema-title);
+}
+
+.sparq-view-container .el-table {
+    --el-table-border-color: var(--sq-schema-border);
+    --el-table-header-bg-color: var(--sq-schema-surface-soft);
+    --el-table-tr-bg-color: var(--sq-schema-surface);
+    --el-table-row-hover-bg-color: var(--sq-schema-hover);
+    --el-table-current-row-bg-color: color-mix(in srgb, var(--sq-schema-primary-soft) 68%, var(--sq-schema-surface));
+    border-radius: var(--sq-schema-radius-sm);
+}
+
+.sparq-view-container .el-table th.el-table__cell {
+    color: var(--sq-schema-subtle);
+    font-weight: 700;
+}
+
+.sparq-view-container .el-table td.el-table__cell {
+    color: var(--sq-schema-text);
+}
+
+.sparq-view-container .el-pagination {
+    justify-content: flex-end;
+}
+
+.sparq-view-container .el-pagination .btn-prev,
+.sparq-view-container .el-pagination .btn-next,
+.sparq-view-container .el-pagination .el-pager li {
+    border: 1px solid var(--sq-schema-border);
+    border-radius: var(--sq-schema-radius-xs);
+    background: var(--sq-schema-surface);
+    color: var(--sq-schema-subtle);
+}
+
+.sparq-view-container .el-pagination .el-pager li.is-active {
+    border-color: color-mix(in srgb, var(--sq-schema-primary) 26%, var(--sq-schema-border));
+    background: color-mix(in srgb, var(--sq-schema-primary-soft) 72%, var(--sq-schema-surface));
+    color: var(--sq-schema-primary);
+}
+
+.sparq-view-container .el-pagination .btn-prev:disabled,
+.sparq-view-container .el-pagination .btn-next:disabled,
+.sparq-view-container .el-pagination .el-pager li.is-disabled {
+    background: var(--el-disabled-bg-color);
+    color: var(--el-text-color-disabled);
+}
+
+.sparq-view-container [data-sparq-element-plus-resource-tree] {
+    color: var(--sq-schema-text);
+}
+
+.sparq-view-container [data-sparq-element-plus-resource-tree] .el-tree-node__content {
+    min-height: 34px;
+    border-radius: calc(var(--sq-schema-radius) - 3px);
+}
+
+.sparq-view-container [data-sparq-element-plus-resource-tree] .el-tree-node__content:hover {
+    background: var(--sq-schema-hover);
+}
+
+.sparq-view-container [data-sparq-element-plus-resource-tree] .el-tree-node.is-current > .el-tree-node__content {
+    background: color-mix(in srgb, var(--sq-schema-primary-soft) 72%, var(--sq-schema-surface));
+}