Skip to content

Commit 68629a2

Browse files
ThornWalliThornWalli
committed
fix(update): update for shadow dom
1 parent 33ccb26 commit 68629a2

File tree

24 files changed

+542
-57
lines changed

24 files changed

+542
-57
lines changed

‎.vscode/launch.json‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
{
2+
"version": "0.2.0",
3+
"configurations": [
4+
{
5+
"type": "node",
6+
"request": "launch",
7+
"name": "Debug (build) (TailwindCSS)",
8+
"runtimeVersion": "16.14.2",
9+
"runtimeArgs": [
10+
"--inspect"
11+
],
12+
"program": "${workspaceFolder}/node_modules/.bin/nuxt",
13+
"outputCapture": "std",
14+
"args": [
15+
"build",
16+
"--",
17+
"examples/tailwind-css"
18+
]
19+
},
20+
{
21+
"type": "node",
22+
"request": "launch",
23+
"name": "Debug (build) (vuetify)",
24+
"runtimeVersion": "16.14.2",
25+
"runtimeArgs": [
26+
"--inspect"
27+
],
28+
"program": "${workspaceFolder}/node_modules/.bin/nuxt",
29+
"outputCapture": "std",
30+
"args": [
31+
"build",
32+
"--",
33+
"examples/vuetify"
34+
]
35+
}
36+
]
37+
}

‎examples/default/assets/css/layout.css‎

Lines changed: 18 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -124,11 +124,16 @@ a {
124124
border-radius: 4px;
125125
}
126126

127-
.preview-link,
127+
.preview-links {
128+
display: flex;
129+
}
130+
131+
.preview-links > * {
132+
flex: 1;
133+
}
134+
135+
.preview-links > *,
128136
.back-link {
129-
position: fixed;
130-
bottom: 0;
131-
width: 100%;
132137
padding: calc(15 / 414 * 100vw) calc(10 / 414 * 100vw);
133138
font-size: calc(15 / 414 * 100vw);
134139
font-weight: bold;
@@ -138,8 +143,15 @@ a {
138143
background: #3b8070;
139144
}
140145

146+
.preview-links,
147+
.back-link {
148+
position: fixed;
149+
bottom: 0;
150+
width: 100%;
151+
}
152+
141153
@media (min-width: 576px) {
142-
.preview-link,
154+
.preview-links > *,
143155
.back-link {
144156
padding: 20px 15px;
145157
font-size: 16px;
@@ -153,7 +165,7 @@ a {
153165
background: #35495e;
154166
}
155167

156-
.preview-link > img,
168+
.preview-links > * > img,
157169
.back-link > img {
158170
display: inline-block;
159171
width: calc(18 / 16 * 1em);

‎examples/tailwind-css/entries/TailwindCssShadow.vue‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<template>
2+
<div>
3+
<Example />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import 'tailwindcss/tailwind.css';
9+
import Example from '@/components/Example';
10+
11+
export default {
12+
components: { Example }
13+
};
14+
</script>
15+
16+
<style>
17+
@tailwind base;
18+
@tailwind components;
19+
@tailwind utilities;
20+
</style>

‎examples/tailwind-css/nuxt.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -49,6 +49,16 @@ export default {
4949
path: '@/entries/TailwindCss'
5050
}
5151
]
52+
},
53+
{
54+
name: 'ExampleShadow',
55+
shadow: true,
56+
tags: [
57+
{
58+
name: 'CustomElementTailwindCss',
59+
path: '@/entries/TailwindCssShadow'
60+
}
61+
]
5262
}
5363
]
5464
},

‎examples/tailwind-css/pages/frames/custom-shadow.vue‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<template>
2+
<div>
3+
<div class="custom-elements-example__container">
4+
<fieldset class="custom-elements-example__fieldset">
5+
<legend>Shadow DOM<br>Custom-Element Component</legend>
6+
<div>
7+
<client-only>
8+
<custom-element-tailwind-css />
9+
</client-only>
10+
</div>
11+
</fieldset>
12+
</div>
13+
</div>
14+
</template>
15+
16+
<script>
17+
18+
import Vue from 'vue';
19+
20+
Vue.config.ignoredElements = [
21+
'custom-element-tailwind-css'
22+
];
23+
24+
export default {
25+
data () {
26+
return {
27+
isDev: process.env.NODE_ENV === 'development'
28+
};
29+
},
30+
31+
head () {
32+
const script = [];
33+
if (!this.isDev) {
34+
script.push({
35+
type: 'text/javascript',
36+
innerHTML: `window.customPublicPath = '${this.$router.options.base}nuxt-custom-elements/example-shadow/';`,
37+
body: true
38+
}, {
39+
type: 'text/javascript',
40+
src: `${this.$router.options.base}nuxt-custom-elements/example-shadow/example-shadow.js`,
41+
async: true,
42+
defer: true,
43+
body: true
44+
});
45+
}
46+
return {
47+
script,
48+
__dangerouslyDisableSanitizers: ['script']
49+
};
50+
},
51+
created () {
52+
this.isDev && this.$customElements.registerEntry('ExampleShadow');
53+
}
54+
};
55+
56+
</script>

‎examples/tailwind-css/pages/index.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,18 @@
77
><img src="@/../default/assets/icons/arrow-left.svg">Back to Overview</a>
88
<iframe src="./frames/nuxt" />
99
<iframe src="./frames/custom" />
10-
<a
11-
class="preview-link"
12-
:href="`${$router.options.base}nuxt-custom-elements/example/`"
13-
target="_blank"
14-
rel="noopener noreferrer"
15-
><img src="@/../default/assets/icons/external-link.svg">Open Nuxt Custom-Elements example export…</a>
10+
<iframe src="./frames/custom-shadow" />
11+
<div class="preview-links">
12+
<a
13+
:href="`${$router.options.base}nuxt-custom-elements/example/`"
14+
target="_blank"
15+
rel="noopener noreferrer"
16+
><img src="@/../default/assets/icons/external-link.svg">Open example export…</a>
17+
<a
18+
:href="`${$router.options.base}nuxt-custom-elements/example-shadow/`"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
><img src="@/../default/assets/icons/external-link.svg">Open example (Shadow DOM) export…</a>
22+
</div>
1623
</div>
1724
</template>

‎examples/tailwind-css/tailwind.config.js‎

Lines changed: 1 addition & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1 @@
1-
module.exports = {
2-
content: [],
3-
darkMode: 'media', // or 'media' or 'class'
4-
theme: {
5-
extend: {}
6-
},
7-
variants: {
8-
extend: {}
9-
},
10-
plugins: []
11-
};
1+
module.exports = {};

‎examples/vue-i18n/nuxt.config.js‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -39,6 +39,16 @@ export default {
3939
path: '@/entries/VueI18n'
4040
}
4141
]
42+
},
43+
{
44+
name: 'ExampleShadow',
45+
shadow: true,
46+
tags: [
47+
{
48+
name: 'CustomElementVueI18n',
49+
path: '@/entries/VueI18n'
50+
}
51+
]
4252
}
4353
]
4454
},

‎examples/vue-i18n/pages/frames/custom-shadow.vue‎

Lines changed: 54 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,54 @@
1+
<template>
2+
<div class="custom-elements-example__container">
3+
<fieldset class="custom-elements-example__fieldset">
4+
<legend>Shadow DOM<br>Custom-Element Component</legend>
5+
<div>
6+
<client-only>
7+
<custom-element-vue-i18n />
8+
</client-only>
9+
</div>
10+
</fieldset>
11+
</div>
12+
</template>
13+
14+
<script>
15+
16+
import Vue from 'vue';
17+
18+
Vue.config.ignoredElements = [
19+
'custom-element-vue-i18n'
20+
];
21+
22+
export default {
23+
data () {
24+
return {
25+
isDev: process.env.NODE_ENV === 'development'
26+
};
27+
},
28+
29+
head () {
30+
const script = [];
31+
if (!this.isDev) {
32+
script.push({
33+
type: 'text/javascript',
34+
innerHTML: `window.customPublicPath = '${this.$router.options.base}nuxt-custom-elements/example-shadow/';`,
35+
body: true
36+
}, {
37+
type: 'text/javascript',
38+
src: `${this.$router.options.base}nuxt-custom-elements/example-shadow/example-shadow.js`,
39+
async: true,
40+
defer: true,
41+
body: true
42+
});
43+
}
44+
return {
45+
script,
46+
__dangerouslyDisableSanitizers: ['script']
47+
};
48+
},
49+
created () {
50+
this.isDev && this.$customElements.registerEntry('ExampleShadow');
51+
}
52+
};
53+
54+
</script>

‎examples/vue-i18n/pages/index.vue‎

Lines changed: 13 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,11 +7,18 @@
77
><img src="@/../default/assets/icons/arrow-left.svg">Back to Overview</a>
88
<iframe src="./frames/nuxt" />
99
<iframe src="./frames/custom" />
10-
<a
11-
class="preview-link"
12-
:href="`${$router.options.base}nuxt-custom-elements/example/`"
13-
target="_blank"
14-
rel="noopener noreferrer"
15-
><img src="@/../default/assets/icons/external-link.svg">Open Nuxt Custom-Elements example export…</a>
10+
<iframe src="./frames/custom-shadow" />
11+
<div class="preview-links">
12+
<a
13+
:href="`${$router.options.base}nuxt-custom-elements/example/`"
14+
target="_blank"
15+
rel="noopener noreferrer"
16+
><img src="@/../default/assets/icons/external-link.svg">Open example export…</a>
17+
<a
18+
:href="`${$router.options.base}nuxt-custom-elements/example-shadow/`"
19+
target="_blank"
20+
rel="noopener noreferrer"
21+
><img src="@/../default/assets/icons/external-link.svg">Open example (Shadow DOM) export…</a>
22+
</div>
1623
</div>
1724
</template>

0 commit comments

Comments
 (0)