nuxtseo-shared 0.1.7 → 0.1.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/layer-devtools/components/DevtoolsAlert.vue +101 -0
- package/dist/layer-devtools/components/DevtoolsEmptyState.vue +105 -0
- package/dist/layer-devtools/components/DevtoolsPanel.vue +74 -0
- package/dist/layer-devtools/components/DevtoolsSnippet.vue +51 -0
- package/dist/layer-devtools/components/DevtoolsToolbar.vue +42 -0
- package/package.json +1 -1
- /package/dist/layer-devtools/components/{OSectionBlock.vue → DevtoolsSection.vue} +0 -0
|
@@ -0,0 +1,101 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
icon,
|
|
4
|
+
variant = 'info',
|
|
5
|
+
} = defineProps<{
|
|
6
|
+
icon?: string
|
|
7
|
+
variant?: 'info' | 'warning' | 'success' | 'production'
|
|
8
|
+
}>()
|
|
9
|
+
|
|
10
|
+
const defaultIcons: Record<string, string> = {
|
|
11
|
+
info: 'carbon:information',
|
|
12
|
+
warning: 'carbon:warning',
|
|
13
|
+
success: 'carbon:checkmark-outline',
|
|
14
|
+
production: 'carbon:cloud',
|
|
15
|
+
}
|
|
16
|
+
</script>
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
<div class="devtools-alert" :class="`devtools-alert-${variant}`" role="status">
|
|
20
|
+
<UIcon :name="icon || defaultIcons[variant]" class="devtools-alert-icon" aria-hidden="true" />
|
|
21
|
+
<div class="devtools-alert-content">
|
|
22
|
+
<slot />
|
|
23
|
+
</div>
|
|
24
|
+
<div v-if="$slots.action" class="devtools-alert-action">
|
|
25
|
+
<slot name="action" />
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
</template>
|
|
29
|
+
|
|
30
|
+
<style scoped>
|
|
31
|
+
.devtools-alert {
|
|
32
|
+
display: flex;
|
|
33
|
+
align-items: center;
|
|
34
|
+
gap: 0.5rem;
|
|
35
|
+
padding: 0.5rem 1rem;
|
|
36
|
+
font-size: 0.8125rem;
|
|
37
|
+
border-bottom: 1px solid var(--color-border);
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.devtools-alert-icon {
|
|
41
|
+
flex-shrink: 0;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.devtools-alert-content {
|
|
45
|
+
flex: 1;
|
|
46
|
+
min-width: 0;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.devtools-alert-action {
|
|
50
|
+
margin-left: auto;
|
|
51
|
+
flex-shrink: 0;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* Info */
|
|
55
|
+
.devtools-alert-info {
|
|
56
|
+
background: oklch(85% 0.1 230 / 0.1);
|
|
57
|
+
color: oklch(55% 0.12 230);
|
|
58
|
+
border-bottom-color: oklch(75% 0.1 230 / 0.2);
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
.dark .devtools-alert-info {
|
|
62
|
+
background: oklch(45% 0.1 230 / 0.15);
|
|
63
|
+
color: oklch(80% 0.1 230);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
/* Warning */
|
|
67
|
+
.devtools-alert-warning {
|
|
68
|
+
background: oklch(85% 0.12 85 / 0.1);
|
|
69
|
+
color: oklch(55% 0.15 85);
|
|
70
|
+
border-bottom-color: oklch(75% 0.12 85 / 0.2);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.dark .devtools-alert-warning {
|
|
74
|
+
background: oklch(45% 0.12 85 / 0.15);
|
|
75
|
+
color: oklch(80% 0.12 85);
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
/* Success */
|
|
79
|
+
.devtools-alert-success {
|
|
80
|
+
background: oklch(75% 0.15 145 / 0.12);
|
|
81
|
+
color: oklch(50% 0.15 145);
|
|
82
|
+
border-bottom-color: oklch(65% 0.12 145 / 0.2);
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.dark .devtools-alert-success {
|
|
86
|
+
background: oklch(50% 0.15 145 / 0.15);
|
|
87
|
+
color: oklch(75% 0.18 145);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
/* Production */
|
|
91
|
+
.devtools-alert-production {
|
|
92
|
+
background: oklch(85% 0.12 145 / 0.1);
|
|
93
|
+
color: oklch(45% 0.15 145);
|
|
94
|
+
border-bottom-color: oklch(75% 0.12 145 / 0.2);
|
|
95
|
+
}
|
|
96
|
+
|
|
97
|
+
.dark .devtools-alert-production {
|
|
98
|
+
background: oklch(35% 0.08 145 / 0.15);
|
|
99
|
+
color: oklch(75% 0.12 145);
|
|
100
|
+
}
|
|
101
|
+
</style>
|
|
@@ -0,0 +1,105 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
icon = 'carbon:search',
|
|
4
|
+
title,
|
|
5
|
+
description,
|
|
6
|
+
variant = 'default',
|
|
7
|
+
} = defineProps<{
|
|
8
|
+
icon?: string
|
|
9
|
+
title: string
|
|
10
|
+
description?: string
|
|
11
|
+
variant?: 'default' | 'error'
|
|
12
|
+
}>()
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<template>
|
|
16
|
+
<div class="devtools-empty">
|
|
17
|
+
<div class="devtools-empty-icon" :class="`devtools-empty-icon-${variant}`">
|
|
18
|
+
<UIcon :name="icon" class="w-8 h-8" aria-hidden="true" />
|
|
19
|
+
</div>
|
|
20
|
+
<h2 class="devtools-empty-title">
|
|
21
|
+
{{ title }}
|
|
22
|
+
</h2>
|
|
23
|
+
<p v-if="description || $slots.description" class="devtools-empty-description">
|
|
24
|
+
<slot name="description">
|
|
25
|
+
{{ description }}
|
|
26
|
+
</slot>
|
|
27
|
+
</p>
|
|
28
|
+
<div v-if="$slots.default" class="devtools-empty-actions">
|
|
29
|
+
<slot />
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<style scoped>
|
|
35
|
+
.devtools-empty {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
align-items: center;
|
|
39
|
+
text-align: center;
|
|
40
|
+
max-width: 32rem;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.devtools-empty-icon {
|
|
45
|
+
display: inline-flex;
|
|
46
|
+
align-items: center;
|
|
47
|
+
justify-content: center;
|
|
48
|
+
width: 4rem;
|
|
49
|
+
height: 4rem;
|
|
50
|
+
border-radius: var(--radius-lg);
|
|
51
|
+
margin-bottom: 1.5rem;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
.devtools-empty-icon-default {
|
|
55
|
+
background: oklch(65% 0.2 145 / 0.12);
|
|
56
|
+
color: var(--seo-green);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
.dark .devtools-empty-icon-default {
|
|
60
|
+
background: oklch(65% 0.2 145 / 0.15);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
.devtools-empty-icon-error {
|
|
64
|
+
background: oklch(55% 0.2 25 / 0.12);
|
|
65
|
+
color: oklch(55% 0.2 25);
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.dark .devtools-empty-icon-error {
|
|
69
|
+
background: oklch(55% 0.2 25 / 0.15);
|
|
70
|
+
color: oklch(75% 0.15 25);
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.devtools-empty-title {
|
|
74
|
+
font-size: 1.125rem;
|
|
75
|
+
font-weight: 600;
|
|
76
|
+
color: var(--color-text);
|
|
77
|
+
margin-bottom: 0.75rem;
|
|
78
|
+
}
|
|
79
|
+
|
|
80
|
+
@media (min-width: 640px) {
|
|
81
|
+
.devtools-empty-title {
|
|
82
|
+
font-size: 1.25rem;
|
|
83
|
+
}
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
.devtools-empty-description {
|
|
87
|
+
font-size: 0.875rem;
|
|
88
|
+
color: var(--color-text-muted);
|
|
89
|
+
margin-bottom: 1.25rem;
|
|
90
|
+
line-height: 1.5;
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
@media (min-width: 640px) {
|
|
94
|
+
.devtools-empty-description {
|
|
95
|
+
font-size: 1rem;
|
|
96
|
+
}
|
|
97
|
+
}
|
|
98
|
+
|
|
99
|
+
.devtools-empty-actions {
|
|
100
|
+
display: flex;
|
|
101
|
+
flex-direction: column;
|
|
102
|
+
align-items: center;
|
|
103
|
+
gap: 0.75rem;
|
|
104
|
+
}
|
|
105
|
+
</style>
|
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
title,
|
|
4
|
+
} = defineProps<{
|
|
5
|
+
title?: string
|
|
6
|
+
}>()
|
|
7
|
+
|
|
8
|
+
defineEmits<{
|
|
9
|
+
close: []
|
|
10
|
+
}>()
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<div class="devtools-panel">
|
|
15
|
+
<div v-if="title || $slots.header" class="devtools-panel-header">
|
|
16
|
+
<slot name="header">
|
|
17
|
+
<span class="devtools-panel-title">{{ title }}</span>
|
|
18
|
+
</slot>
|
|
19
|
+
<div class="devtools-panel-actions">
|
|
20
|
+
<slot name="actions" />
|
|
21
|
+
<UButton
|
|
22
|
+
icon="carbon:close"
|
|
23
|
+
aria-label="Close panel"
|
|
24
|
+
@click="$emit('close')"
|
|
25
|
+
/>
|
|
26
|
+
</div>
|
|
27
|
+
</div>
|
|
28
|
+
<div class="devtools-panel-content">
|
|
29
|
+
<slot />
|
|
30
|
+
</div>
|
|
31
|
+
</div>
|
|
32
|
+
</template>
|
|
33
|
+
|
|
34
|
+
<style scoped>
|
|
35
|
+
.devtools-panel {
|
|
36
|
+
display: flex;
|
|
37
|
+
flex-direction: column;
|
|
38
|
+
border-radius: var(--radius-lg);
|
|
39
|
+
border: 1px solid var(--color-border);
|
|
40
|
+
background: var(--color-surface-elevated);
|
|
41
|
+
box-shadow: 0 8px 32px oklch(0% 0 0 / 0.12);
|
|
42
|
+
overflow: hidden;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.dark .devtools-panel {
|
|
46
|
+
box-shadow: 0 8px 32px oklch(0% 0 0 / 0.4);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
.devtools-panel-header {
|
|
50
|
+
display: flex;
|
|
51
|
+
align-items: center;
|
|
52
|
+
justify-content: space-between;
|
|
53
|
+
padding: 0.625rem 0.75rem;
|
|
54
|
+
border-bottom: 1px solid var(--color-border);
|
|
55
|
+
background: var(--color-surface-sunken);
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.devtools-panel-title {
|
|
59
|
+
font-size: 0.875rem;
|
|
60
|
+
font-weight: 500;
|
|
61
|
+
color: var(--color-text);
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.devtools-panel-actions {
|
|
65
|
+
display: flex;
|
|
66
|
+
align-items: center;
|
|
67
|
+
gap: 0.25rem;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
.devtools-panel-content {
|
|
71
|
+
flex: 1;
|
|
72
|
+
overflow: auto;
|
|
73
|
+
}
|
|
74
|
+
</style>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
label,
|
|
4
|
+
code,
|
|
5
|
+
lang = 'js',
|
|
6
|
+
} = defineProps<{
|
|
7
|
+
label?: string
|
|
8
|
+
code: string
|
|
9
|
+
lang?: 'js' | 'json' | 'xml'
|
|
10
|
+
}>()
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<template>
|
|
14
|
+
<div class="devtools-snippet">
|
|
15
|
+
<div v-if="label || $slots.header" class="devtools-snippet-header">
|
|
16
|
+
<slot name="header">
|
|
17
|
+
<code class="devtools-snippet-label">{{ label }}</code>
|
|
18
|
+
</slot>
|
|
19
|
+
<DevtoolsCopyButton :text="code" />
|
|
20
|
+
</div>
|
|
21
|
+
<OCodeBlock :code="code" :lang="lang" class="devtools-snippet-block" />
|
|
22
|
+
</div>
|
|
23
|
+
</template>
|
|
24
|
+
|
|
25
|
+
<style scoped>
|
|
26
|
+
.devtools-snippet {
|
|
27
|
+
margin: 0.5rem 0.75rem;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
.devtools-snippet-header {
|
|
31
|
+
display: flex;
|
|
32
|
+
align-items: center;
|
|
33
|
+
justify-content: space-between;
|
|
34
|
+
margin-bottom: 0.375rem;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.devtools-snippet-label {
|
|
38
|
+
font-family: var(--font-mono);
|
|
39
|
+
font-size: 0.6875rem;
|
|
40
|
+
font-weight: 500;
|
|
41
|
+
color: var(--color-text-muted);
|
|
42
|
+
letter-spacing: -0.01em;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.devtools-snippet-block {
|
|
46
|
+
border-radius: var(--radius-sm);
|
|
47
|
+
font-size: 0.6875rem;
|
|
48
|
+
line-height: 1.6;
|
|
49
|
+
padding: 0.5rem 0.625rem !important;
|
|
50
|
+
}
|
|
51
|
+
</style>
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
const {
|
|
3
|
+
variant = 'default',
|
|
4
|
+
} = defineProps<{
|
|
5
|
+
variant?: 'default' | 'minimal'
|
|
6
|
+
}>()
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<template>
|
|
10
|
+
<div class="devtools-toolbar" :class="`devtools-toolbar-${variant}`" role="toolbar">
|
|
11
|
+
<slot />
|
|
12
|
+
</div>
|
|
13
|
+
</template>
|
|
14
|
+
|
|
15
|
+
<style scoped>
|
|
16
|
+
.devtools-toolbar {
|
|
17
|
+
display: flex;
|
|
18
|
+
align-items: center;
|
|
19
|
+
border-bottom: 1px solid var(--color-border);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
.devtools-toolbar-default {
|
|
23
|
+
justify-content: space-between;
|
|
24
|
+
gap: 0.75rem;
|
|
25
|
+
padding: 0.625rem 0.75rem;
|
|
26
|
+
background: var(--color-surface-elevated);
|
|
27
|
+
position: relative;
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
@media (min-width: 640px) {
|
|
31
|
+
.devtools-toolbar-default {
|
|
32
|
+
padding: 0.75rem 1rem;
|
|
33
|
+
}
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
.devtools-toolbar-minimal {
|
|
37
|
+
gap: 0.5rem;
|
|
38
|
+
padding: 0.5rem 1rem;
|
|
39
|
+
font-size: 0.75rem;
|
|
40
|
+
background: var(--color-surface-sunken);
|
|
41
|
+
}
|
|
42
|
+
</style>
|
package/package.json
CHANGED
|
File without changes
|