8000 feat: add placeholder component · romhml/compodium@c58301f · GitHub
[go: up one dir, main page]
Skip to content

Commit c58301f

Browse files
romhmlromhml
committed
feat: add placeholder component
1 parent 71866fa commit c58301f

2 files changed

Lines changed: 69 additions & 1 deletion

File tree

‎src/module.ts‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import type { CollectionConfig } from './types'
22
import { existsSync, readFileSync } from 'node:fs'
33
import { addCustomTab, startSubprocess } from '@nuxt/devtools-kit'
4-
import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addVitePlugin, updateTemplates, addImportsDir, logger } from '@nuxt/kit'
4+
import { defineNuxtModule, createResolver, addTemplate, addServerHandler, addVitePlugin, updateTemplates, addImportsDir, logger, addComponentsDir } from '@nuxt/kit'
55
import { getPort } from 'get-port-please'
66
import { camelCase, pascalCase } from 'scule'
77
import sirv from 'sirv'
@@ -63,6 +63,8 @@ export default defineNuxtModule<ModuleOptions>({
6363

6464
if (!nuxt.options.dev) return
6565

66+
addComponentsDir({ path: resolve('./runtime/components') })
67+
6668
const appResolver = createResolver(nuxt.options.rootDir)
6769

6870
options.collections ??= [

‎src/runtime/components/Placeholder.vue‎

Lines changed: 66 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,66 @@
1+
<template>
2+
<div class="placeholder">
3+
<svg
4+
class="placeholder-svg"
5+
fill="none"
6+
>
7+
<defs>
8+
<pattern
9+
id="pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e"
10+
x="0"
11+
y="0"
12+
width="10"
13+
height="10"
14+
patternUnits="userSpaceOnUse"
15+
>
16+
<path d="M-3 13 15-5M-5 5l18-18M-1 21 17 3" />
17+
</pattern>
18+
</defs>
19+
<rect
20+
stroke="none"
21+
fill="url(#pattern-5c1e4f0e-62d5-498b-8ff0-cf77bb448c8e)"
22+
width="100%"
23+
height="100%"
24+
/>
25+
</svg>
26+
27+
<slot />
28+
</div>
29+
</template>
30+
31+
<style scoped>
32+
.placeholder {
33+
position: relative;
34+
overflow: hidden;
35+
border-radius: var(--ui-radius, 0.375rem);
36+
border: 1px dashed var(--ui-border-accented, oklch(0.871 0.006 286.286));
37+
opacity: 0.75;
38+
padding-left: 1rem;
39+
padding-right: 1rem;
40+
display: flex;
41+
align-items: center;
42+
justify-content: center;
43+
}
44+
45+
.dark .placeholder {
46+
opacity: 0.75;
47+
border: 1px dashed var(--ui-border-accented, oklch(0.37 0.013 285.805));
48+
}
49+
50+
.placeholder-svg {
51+
position: absolute;
52+
top: 0;
53+
right: 0;
54+
bottom: 0;
55+
left: 0;
56+
height: 100%;
57+
width: 100%;
58+
stroke-opacity: 0.1;
59+
stroke: var(--ui-border-inverted, oklch(0.21 0.006 285.885));
60+
}
61+
62+
.dark .placeholder-svg {
63+
stroke: var(--ui-border-inverted, #fff);
64+
stroke-opacity: 0.1;
65+
}
66+
</style>

0 commit comments

Comments
 (0)
0