@sparqjs/schema-vue 0.1.0

package/src/asset/preview/style.css

@@ -0,0 +1,382 @@
+.sparq-asset-preview__thumb {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    overflow: hidden;
+    background:
+        linear-gradient(45deg, color-mix(in srgb, var(--sparq-asset-preview-border, var(--sparq-picker-border, var(--sq-schema-border))) 48%, transparent) 25%, transparent 25%),
+        linear-gradient(-45deg, color-mix(in srgb, var(--sparq-asset-preview-border, var(--sparq-picker-border, var(--sq-schema-border))) 48%, transparent) 25%, transparent 25%),
+        linear-gradient(45deg, transparent 75%, color-mix(in srgb, var(--sparq-asset-preview-border, var(--sparq-picker-border, var(--sq-schema-border))) 48%, transparent) 75%),
+        linear-gradient(-45deg, transparent 75%, color-mix(in srgb, var(--sparq-asset-preview-border, var(--sparq-picker-border, var(--sq-schema-border))) 48%, transparent) 75%),
+        var(--sparq-asset-preview-muted-surface, var(--sparq-picker-muted-surface, #f8fafc));
+    background-position:
+        0 0,
+        0 6px,
+        6px -6px,
+        -6px 0;
+    background-size: 12px 12px;
+}
+
+.sparq-asset-preview__thumb.is-card {
+    aspect-ratio: 4 / 3;
+    height: auto;
+    max-height: 160px;
+}
+
+.sparq-asset-preview__thumb.is-thumb {
+    width: 44px;
+    height: 44px;
+    border-radius: var(--sq-schema-radius-xs);
+}
+
+.sparq-asset-preview__thumb img {
+    width: 100%;
+    height: 100%;
+    object-fit: contain;
+}
+
+.sparq-asset-preview__thumb.is-previewable {
+    cursor: zoom-in;
+}
+
+.sparq-asset-preview__file-label {
+    display: grid;
+    width: 42px;
+    height: 52px;
+    place-items: center;
+    border: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    border-radius: var(--sq-schema-radius-xs);
+    background:
+        linear-gradient(135deg, transparent 0 72%, color-mix(in srgb, var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc)) 18%, transparent) 72%),
+        var(--sparq-asset-preview-surface, var(--sparq-picker-surface, var(--sq-schema-surface)));
+    color: var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc));
+    font-size: 11px;
+    font-weight: 700;
+}
+
+.sparq-asset-preview__dialog {
+    --sparq-asset-preview-primary: var(--sq-schema-primary);
+    --sparq-asset-preview-primary-soft: color-mix(in srgb, var(--sq-schema-primary-soft) 84%, var(--sq-schema-surface));
+    --sparq-asset-preview-danger: var(--sq-schema-danger);
+    --sparq-asset-preview-border: var(--sq-schema-border);
+    --sparq-asset-preview-surface: var(--sq-schema-surface);
+    --sparq-asset-preview-muted-surface: var(--sq-schema-surface-muted);
+    --sparq-asset-preview-text: var(--sq-schema-title);
+    --sparq-asset-preview-muted: var(--sq-schema-muted);
+    --sparq-asset-preview-shadow: var(--sq-schema-shadow-floating);
+    --sparq-asset-preview-overlay: var(--sq-schema-overlay);
+    position: fixed;
+    inset: 0;
+    z-index: var(--sparq-asset-preview-z-index, 2200);
+    display: grid;
+    place-items: center;
+    box-sizing: border-box;
+    width: 100vw;
+    height: 100vh;
+    height: 100dvh;
+    padding: 24px;
+}
+
+.sparq-asset-preview__mask {
+    position: absolute;
+    inset: 0;
+    background: var(--sparq-asset-preview-overlay, var(--sq-schema-overlay));
+}
+
+.sparq-asset-preview__panel {
+    position: relative;
+    display: grid;
+    grid-template-rows: auto minmax(0, 1fr) auto auto;
+    width: min(960px, 100%);
+    height: min(760px, 100%);
+    max-height: 100%;
+    min-height: min(520px, 100%);
+    overflow: hidden;
+    border: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    border-radius: var(--sq-schema-radius-lg);
+    background: var(--sparq-asset-preview-surface, var(--sparq-picker-surface, #ffffff));
+    box-shadow: var(--sparq-asset-preview-shadow, var(--sparq-picker-shadow, 0 18px 56px rgb(15 23 42 / 18%)));
+}
+
+.sparq-asset-preview__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: 12px;
+    border-bottom: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    padding: 12px 14px;
+}
+
+.sparq-asset-preview__title {
+    overflow: hidden;
+    color: var(--sparq-asset-preview-text, var(--sparq-picker-text, #1f2937));
+    font-size: 14px;
+    font-weight: 650;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sparq-asset-preview__close {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    place-items: center;
+    border: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    border-radius: var(--sq-schema-radius-xs);
+    background: var(--sparq-asset-preview-surface, var(--sparq-picker-surface, #ffffff));
+    color: var(--sparq-asset-preview-muted, var(--sparq-picker-muted, #64748b));
+    cursor: pointer;
+    font-size: 20px;
+    line-height: 1;
+}
+
+.sparq-asset-preview__close:hover {
+    border-color: color-mix(in srgb, var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc)) 34%, var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef)));
+    color: var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc));
+}
+
+.sparq-asset-preview__close:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--sparq-asset-preview-primary-soft, var(--sparq-picker-primary-soft, rgb(34 81 204 / 14%)));
+}
+
+.sparq-asset-preview__stage {
+    position: relative;
+    display: grid;
+    min-height: 180px;
+    place-items: center;
+    overflow: hidden;
+    background: var(--sparq-asset-preview-muted-surface, var(--sparq-picker-muted-surface, #f8fafc));
+}
+
+.sparq-asset-preview__image-frame {
+    position: absolute;
+    inset: 16px;
+    display: grid;
+    min-width: 0;
+    min-height: 0;
+    place-items: center;
+    overflow: auto;
+}
+
+.sparq-asset-preview__image-frame img {
+    display: block;
+    width: auto !important;
+    height: auto !important;
+    min-width: 0;
+    min-height: 0;
+    max-width: 100% !important;
+    max-height: 100% !important;
+    object-fit: contain !important;
+    transition: transform 160ms ease;
+    transform-origin: center;
+    user-select: none;
+}
+
+.sparq-asset-preview__image-frame img.is-hidden {
+    opacity: 0;
+}
+
+.sparq-asset-preview__placeholder {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    z-index: 1;
+    display: grid;
+    min-width: min(280px, calc(100% - 32px));
+    min-height: 132px;
+    place-items: center;
+    align-content: center;
+    gap: 12px;
+    border: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    border-radius: var(--sq-schema-radius);
+    background: color-mix(in srgb, var(--sparq-asset-preview-surface, var(--sparq-picker-surface, #ffffff)) 92%, transparent);
+    box-shadow: var(--sq-schema-shadow-soft);
+    color: var(--sparq-asset-preview-text, var(--sparq-picker-text, #1f2937));
+    font-size: 14px;
+    font-weight: 600;
+    transform: translate(-50%, -50%);
+}
+
+.sparq-asset-preview__spinner {
+    width: 34px;
+    height: 34px;
+    border: 3px solid color-mix(in srgb, var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc)) 16%, transparent);
+    border-top-color: var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc));
+    border-radius: var(--sq-schema-radius-pill);
+    animation: sparq-asset-preview-spin 800ms linear infinite;
+}
+
+.sparq-asset-preview__stage.is-failed .sparq-asset-preview__spinner {
+    border-color: var(--sparq-asset-preview-danger, var(--sparq-picker-danger, #dc2626));
+    animation: none;
+}
+
+.sparq-asset-preview__stage.is-failed .sparq-asset-preview__placeholder {
+    color: var(--sparq-asset-preview-danger, var(--sparq-picker-danger, #dc2626));
+}
+
+.sparq-asset-preview__placeholder-text {
+    line-height: 1;
+}
+
+.sparq-asset-preview__toolbar {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 8px;
+    min-height: 42px;
+    border-top: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    background: var(--sparq-asset-preview-surface, var(--sparq-picker-surface, #ffffff));
+    padding: 6px 12px;
+}
+
+.sparq-asset-preview__toolbar.is-empty {
+    display: none;
+}
+
+.sparq-asset-preview__tool {
+    display: grid;
+    width: 30px;
+    height: 30px;
+    place-items: center;
+    border: 1px solid transparent;
+    border-radius: var(--sq-schema-radius-xs);
+    background: transparent;
+    color: var(--sparq-asset-preview-text, var(--sparq-picker-text, #1f2937));
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 650;
+    line-height: 1;
+}
+
+.sparq-asset-preview__tool:hover:not(:disabled) {
+    border-color: color-mix(in srgb, var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc)) 22%, transparent);
+    background: var(--sparq-asset-preview-primary-soft, var(--sparq-picker-primary-soft, rgb(34 81 204 / 14%)));
+    color: var(--sparq-asset-preview-primary, var(--sparq-picker-primary, #2251cc));
+}
+
+.sparq-asset-preview__tool:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--sparq-asset-preview-primary-soft, var(--sparq-picker-primary-soft, rgb(34 81 204 / 14%)));
+}
+
+.sparq-asset-preview__tool:disabled {
+    color: color-mix(in srgb, var(--sparq-asset-preview-muted, var(--sparq-picker-muted, #64748b)) 56%, transparent);
+    cursor: not-allowed;
+}
+
+.sparq-asset-preview__scale {
+    min-width: 48px;
+    color: var(--sparq-asset-preview-muted, var(--sparq-picker-muted, #64748b));
+    font-size: 12px;
+    font-weight: 600;
+    text-align: center;
+}
+
+.sparq-asset-preview__divider {
+    width: 1px;
+    height: 18px;
+    background: var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+}
+
+.sparq-asset-preview__meta {
+    display: grid;
+    gap: 8px;
+    max-height: 132px;
+    overflow: auto;
+    border-top: 1px solid var(--sparq-asset-preview-border, var(--sparq-picker-border, #dbe3ef));
+    margin: 0;
+    padding: 12px 14px;
+    color: var(--sparq-asset-preview-text, var(--sparq-picker-text, #1f2937));
+    font-size: 12px;
+}
+
+.sparq-asset-preview__meta div {
+    display: grid;
+    grid-template-columns: 64px minmax(0, 1fr);
+    gap: 8px;
+}
+
+.sparq-asset-preview__meta dt {
+    color: var(--sparq-asset-preview-muted, var(--sparq-picker-muted, #64748b));
+}
+
+.sparq-asset-preview__meta dd {
+    overflow: hidden;
+    margin: 0;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+@keyframes sparq-asset-preview-spin {
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+@media (prefers-reduced-motion: reduce) {
+    .sparq-asset-preview__image-frame img {
+        transition: none;
+    }
+
+    .sparq-asset-preview__spinner {
+        animation: none;
+    }
+}
+
+@media (max-width: 640px) {
+    .sparq-asset-preview__dialog {
+        padding: 12px;
+    }
+
+    .sparq-asset-preview__panel {
+        border-radius: var(--sq-schema-radius);
+        min-height: min(460px, 100%);
+    }
+
+    .sparq-asset-preview__header,
+    .sparq-asset-preview__meta {
+        padding-right: 12px;
+        padding-left: 12px;
+    }
+
+    .sparq-asset-preview__stage {
+        min-height: 220px;
+    }
+
+    .sparq-asset-preview__image-frame {
+        inset: 10px;
+    }
+
+    .sparq-asset-preview__toolbar {
+        gap: 4px;
+        overflow-x: auto;
+        justify-content: flex-start;
+    }
+}
+
+@media (max-height: 560px) {
+    .sparq-asset-preview__dialog {
+        padding: 12px;
+    }
+
+    .sparq-asset-preview__panel {
+        min-height: 0;
+    }
+
+    .sparq-asset-preview__header,
+    .sparq-asset-preview__toolbar,
+    .sparq-asset-preview__meta {
+        padding-top: 8px;
+        padding-bottom: 8px;
+    }
+
+    .sparq-asset-preview__stage {
+        min-height: 140px;
+    }
+
+    .sparq-asset-preview__meta {
+        max-height: 92px;
+    }
+}

package/src/asset/upload/style.css

@@ -0,0 +1,167 @@
+.sparq-asset-upload {
+    /* 上传面板主色。默认跟随资源选择器或宿主主题色。 */
+    --sparq-upload-primary: var(--sparq-picker-primary, var(--sparq-primary, var(--sq-schema-primary)));
+    /* 上传面板边框色。用于拖拽区、任务行和进度轨道。 */
+    --sparq-upload-border: var(--sparq-picker-border, var(--sparq-border, var(--sq-schema-border)));
+    /* 上传面板表面色。用于任务行背景。 */
+    --sparq-upload-surface: var(--sparq-picker-surface, var(--sparq-panel, var(--sq-schema-surface)));
+    /* 上传面板弱背景色。用于拖拽区和空状态。 */
+    --sparq-upload-soft: var(--sparq-picker-muted-surface, var(--sparq-panel-soft, var(--sq-schema-surface-muted)));
+    /* 上传面板主要文字色。用于文件名和拖拽标题。 */
+    --sparq-upload-text: var(--sparq-picker-text, var(--sparq-title, var(--sq-schema-title)));
+    /* 上传面板次要文字色。用于大小、状态和空状态。 */
+    --sparq-upload-muted: var(--sparq-picker-muted, var(--sparq-subtle, var(--sq-schema-muted)));
+    /* 上传失败色。用于失败和取消状态。 */
+    --sparq-upload-danger: var(--sparq-picker-danger, var(--sparq-danger, var(--sq-schema-danger)));
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+}
+
+.sparq-asset-upload__dropzone {
+    display: grid;
+    min-height: 260px;
+    place-items: center;
+    gap: 10px;
+    border: 1px dashed var(--sparq-upload-border);
+    border-radius: var(--sq-schema-radius, 6px);
+    background: var(--sparq-upload-soft);
+    cursor: pointer;
+    transition:
+        border-color 160ms ease,
+        background-color 160ms ease;
+}
+
+.sparq-asset-upload.is-compact .sparq-asset-upload__dropzone {
+    min-height: 176px;
+}
+
+.sparq-asset-upload__dropzone:hover,
+.sparq-asset-upload__dropzone.is-dragging {
+    border-color: var(--sparq-upload-primary);
+    background: color-mix(in srgb, var(--sparq-upload-primary) 8%, var(--sparq-upload-soft));
+}
+
+.sparq-asset-upload__dropzone.is-disabled {
+    cursor: not-allowed;
+    opacity: 0.62;
+}
+
+.sparq-asset-upload__file-input {
+    display: none;
+}
+
+.sparq-asset-upload__drop-icon {
+    display: grid;
+    width: 52px;
+    height: 52px;
+    place-items: center;
+    border: 1px solid color-mix(in srgb, var(--sparq-upload-primary) 24%, var(--sparq-upload-border));
+    border-radius: var(--sq-schema-radius-lg, 8px);
+    color: var(--sparq-upload-primary);
+    background: color-mix(in srgb, var(--sparq-upload-primary) 8%, var(--sparq-upload-surface));
+    font-size: 28px;
+    line-height: 1;
+}
+
+.sparq-asset-upload__drop-title {
+    color: var(--sparq-upload-text);
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.sparq-asset-upload__task-list {
+    display: grid;
+    gap: 8px;
+    max-height: 280px;
+    overflow: auto;
+}
+
+.sparq-asset-upload__task {
+    display: grid;
+    grid-template-columns: minmax(120px, 1fr) 82px minmax(100px, 160px) 58px auto;
+    gap: 10px;
+    align-items: center;
+    min-width: 0;
+    padding: 10px;
+    border: 1px solid var(--sparq-upload-border);
+    border-radius: var(--sq-schema-radius-sm, 5px);
+    background: var(--sparq-upload-surface);
+}
+
+.sparq-asset-upload__task-name {
+    overflow: hidden;
+    color: var(--sparq-upload-text);
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sparq-asset-upload__task-size,
+.sparq-asset-upload__task-status,
+.sparq-asset-upload__empty {
+    color: var(--sparq-upload-muted);
+    font-size: 12px;
+}
+
+.sparq-asset-upload__task-progress {
+    height: 6px;
+    overflow: hidden;
+    border-radius: var(--sq-schema-radius-pill, 999px);
+    background: var(--sparq-upload-border);
+}
+
+.sparq-asset-upload__task-progress > span {
+    display: block;
+    height: 100%;
+    border-radius: inherit;
+    background: var(--sparq-upload-primary);
+}
+
+.sparq-asset-upload__task-status {
+    text-align: right;
+}
+
+.sparq-asset-upload__task-status.is-success {
+    color: var(--sq-schema-success, #16a34a);
+}
+
+.sparq-asset-upload__task-status.is-error,
+.sparq-asset-upload__task-status.is-canceled {
+    color: var(--sparq-upload-danger);
+}
+
+.sparq-asset-upload__task-actions {
+    display: inline-flex;
+    justify-content: flex-end;
+    gap: 7px;
+}
+
+.sparq-asset-upload__task-action {
+    padding: 0;
+    border: 0;
+    color: var(--sparq-upload-primary);
+    background: transparent;
+    cursor: pointer;
+    font-size: 12px;
+    font-weight: 600;
+}
+
+.sparq-asset-upload__empty {
+    padding: 4px 0;
+    text-align: center;
+}
+
+@media (max-width: 680px) {
+    .sparq-asset-upload__task {
+        grid-template-columns: minmax(0, 1fr) auto;
+    }
+
+    .sparq-asset-upload__task-progress {
+        grid-column: 1 / -1;
+        grid-row: 2;
+    }
+
+    .sparq-asset-upload__task-size {
+        display: none;
+    }
+}

package/src/custom-components/IconInput/style.css

@@ -0,0 +1,101 @@
+.sparq-icon-input {
+    --sparq-icon-input-border: var(--sq-schema-border);
+    --sparq-icon-input-border-strong: var(--sq-schema-border-strong);
+    --sparq-icon-input-surface: var(--sq-schema-surface);
+    --sparq-icon-input-surface-soft: var(--sq-schema-surface-muted);
+    --sparq-icon-input-text: var(--sq-schema-text);
+    --sparq-icon-input-title: var(--sq-schema-title);
+    --sparq-icon-input-muted: var(--sq-schema-muted);
+    --sparq-icon-input-primary: var(--sq-schema-primary);
+    --sparq-icon-input-primary-soft: color-mix(in srgb, var(--sq-schema-primary-soft) 84%, var(--sq-schema-surface));
+    display: block;
+    width: 100%;
+}
+
+.sparq-icon-input-dialog {
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+}
+
+.sparq-icon-input__status {
+    margin: 6px 0 0;
+    color: var(--sparq-icon-input-muted);
+    font-size: 12px;
+    line-height: 18px;
+}
+
+.sparq-icon-input__status.is-warning {
+    color: var(--sq-schema-warning-strong);
+}
+
+.sparq-icon-input-dialog__title {
+    color: var(--sparq-icon-input-title);
+    font-size: 15px;
+    font-weight: 600;
+    line-height: 22px;
+}
+
+.sparq-icon-input-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
+    gap: 8px;
+    max-height: 420px;
+    overflow: auto;
+}
+
+.sparq-icon-input-option {
+    display: flex;
+    min-width: 0;
+    min-height: 72px;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 7px;
+    border: 1px solid var(--sparq-icon-input-border);
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    background: var(--sparq-icon-input-surface);
+    color: var(--sparq-icon-input-text);
+    cursor: pointer;
+    padding: 8px 6px;
+    transition:
+        border-color 160ms ease,
+        background-color 160ms ease,
+        color 160ms ease,
+        box-shadow 160ms ease;
+}
+
+.sparq-icon-input-option:hover {
+    border-color: var(--sparq-icon-input-border-strong);
+    background: var(--sparq-icon-input-surface-soft);
+}
+
+.sparq-icon-input-option.is-selected {
+    border-color: var(--sparq-icon-input-primary);
+    background: var(--sparq-icon-input-primary-soft);
+    color: var(--sparq-icon-input-primary);
+    box-shadow: var(--sq-schema-focus);
+}
+
+.sparq-icon-input-option__label {
+    display: block;
+    width: 100%;
+    overflow: hidden;
+    color: inherit;
+    font-size: 11px;
+    font-weight: 500;
+    line-height: 15px;
+    text-align: center;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.sparq-icon-input-empty {
+    display: flex;
+    min-height: 160px;
+    align-items: center;
+    justify-content: center;
+    color: var(--sparq-icon-input-muted);
+    font-size: 13px;
+    line-height: 20px;
+}

package/src/custom-components/KeyValueEditor/style.css

@@ -0,0 +1,44 @@
+.sparq-key-value-editor {
+    display: grid;
+    gap: 8px;
+}
+
+.sparq-key-value-editor__toolbar {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 8px;
+}
+
+.sparq-key-value-editor__rows {
+    display: grid;
+    gap: 8px;
+}
+
+.sparq-key-value-editor__row {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    gap: 8px;
+}
+
+.sparq-key-value-editor__cell {
+    flex: 1 1 0;
+    min-width: 0;
+}
+
+.sparq-key-value-editor__error {
+    border: 1px solid color-mix(in srgb, var(--sq-schema-danger) 26%, var(--sq-schema-border));
+    border-radius: calc(var(--sq-schema-radius) - 4px);
+    background: color-mix(in srgb, var(--sq-schema-danger) 8%, var(--sq-schema-surface));
+    padding: 6px 8px;
+    color: var(--sq-schema-danger);
+    font-size: 12px;
+    line-height: 18px;
+}
+
+@media (max-width: 640px) {
+    .sparq-key-value-editor__row {
+        flex-direction: column;
+        align-items: stretch;
+    }
+}