@@ -44,66 +39,25 @@
diff --git a/docs/src/components/Demo/style.scss b/docs/src/components/Demo/style.scss
index 69530caf..f2c67a0b 100644
--- a/docs/src/components/Demo/style.scss
+++ b/docs/src/components/Demo/style.scss
@@ -1,26 +1,25 @@
.demo {
overflow: hidden;
- border-radius: 0.5rem;
+ border-radius: 0.75rem;
&__preview {
- padding: 1.25rem;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
border-bottom-width: 0;
color: $colorBlack;
background-color: $colorWhite;
- max-height: 50rem;
+ max-height: unquote("max(300px, 60vh)");
overflow: auto;
scroll-behavior: smooth;
+ border: 3px solid $colorBlack;
}
&__source {
- border: 1px solid rgba($colorWhite, 0.1);
background-color: $colorBlack;
}
&__tabs {
- padding: 1rem 1.25rem 0 1.25rem;
+ padding: 0.5rem 1.25rem 0 1.25rem;
background-color: rgba($colorBlack, 0.9);
white-space: nowrap;
overflow-x: auto;
@@ -62,12 +61,12 @@
width: 100%;
padding: 0.5rem 1.25rem;
font-size: 0.85rem;
- border: 1px solid rgba($colorWhite, 0.1);
+ border-top: 1px solid rgba($colorWhite, 0.1);
border-bottom-left-radius: inherit;
border-bottom-right-radius: inherit;
- border-top-width: 0;
background-color: $colorBlack;
white-space: nowrap;
+ color: rgba($colorWhite, 0.5);
}
&__name {
@@ -83,6 +82,10 @@
&__link {
margin-left: auto;
+
+ &:hover {
+ color: $colorWhite;
+ }
}
&__error {
diff --git a/docs/src/components/DemoContent/index.vue b/docs/src/components/DemoContent/index.vue
new file mode 100644
index 00000000..2ae76abb
--- /dev/null
+++ b/docs/src/components/DemoContent/index.vue
@@ -0,0 +1,18 @@
+
+
+
+
+
+
+
+
diff --git a/docs/src/components/DemoFrame/index.vue b/docs/src/components/DemoFrame/index.vue
new file mode 100644
index 00000000..abf8ddb4
--- /dev/null
+++ b/docs/src/components/DemoFrame/index.vue
@@ -0,0 +1,128 @@
+
+
+
+
+
+
+
diff --git a/docs/src/components/DemoMixin/index.js b/docs/src/components/DemoMixin/index.js
new file mode 100644
index 00000000..6746ba59
--- /dev/null
+++ b/docs/src/components/DemoMixin/index.js
@@ -0,0 +1,85 @@
+import collect from 'collect.js'
+
+export default {
+ props: {
+ name: {
+ type: String,
+ required: true,
+ },
+
+ mode: {
+ type: String,
+ default: 'vue',
+ },
+
+ inline: {
+ type: Boolean,
+ default: false,
+ },
+
+ highlight: {
+ type: String,
+ default: null,
+ },
+
+ showSource: {
+ type: Boolean,
+ default: true,
+ },
+ },
+
+ data() {
+ return {
+ files: [],
+ syntax: {
+ vue: 'html',
+ },
+ }
+ },
+
+ computed: {
+ props() {
+ return {
+ name: this.name,
+ mode: this.mode,
+ inline: this.inline,
+ highlight: this.highlight,
+ showSource: this.showSource,
+ }
+ },
+
+ mainFile() {
+ const file = this.files
+ .find(item => item.path.endsWith('index.vue') || item.path.endsWith('index.jsx'))
+
+ if (!file) {
+ return false
+ }
+
+ return require(`~/demos/${file.path}`).default
+ },
+ },
+
+ mounted() {
+ this.files = collect(require.context('~/demos/', true, /.+\..+$/).keys())
+ .filter(path => path.startsWith(`./${this.name}/`))
+ .filter(path => !path.endsWith('.spec.js') && !path.endsWith('.spec.ts'))
+ .map(path => path.replace('./', ''))
+ .map(path => {
+ const extension = path.split('.').pop()
+
+ return {
+ path,
+ name: path.replace(`${this.name}/`, ''),
+ content: require(`!!raw-loader!~/demos/${path}`).default,
+ extension,
+ highlight: this.syntax[extension] || extension,
+ }
+ })
+ .filter(item => {
+ return ['vue', 'ts', 'js', 'jsx', 'scss'].includes(item.extension)
+ })
+ .sortBy(item => item.path.split('/').length && !item.path.endsWith('index.vue'))
+ .toArray()
+ },
+}
diff --git a/docs/src/components/FeatureItem/index.vue b/docs/src/components/FeatureItem/index.vue
new file mode 100644
index 00000000..debe7fa3
--- /dev/null
+++ b/docs/src/components/FeatureItem/index.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/components/FeatureList/index.vue b/docs/src/components/FeatureList/index.vue
new file mode 100644
index 00000000..c9373d42
--- /dev/null
+++ b/docs/src/components/FeatureList/index.vue
@@ -0,0 +1,22 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/components/LiveDemo/CustomLayout.vue b/docs/src/components/LiveDemo/CustomLayout.vue
deleted file mode 100644
index bf817bca..00000000
--- a/docs/src/components/LiveDemo/CustomLayout.vue
+++ /dev/null
@@ -1,86 +0,0 @@
-
-
-
-
-
-
-
diff --git a/docs/src/components/LiveDemo/index.vue b/docs/src/components/LiveDemo/index.vue
deleted file mode 100644
index 9ea74a24..00000000
--- a/docs/src/components/LiveDemo/index.vue
+++ /dev/null
@@ -1,110 +0,0 @@
-
-
-
-
-
-
-
-
-
- Could not find a demo called “{{ name }}”.
-
-
-
-
-
-
diff --git a/docs/src/components/LiveDemo/style.scss b/docs/src/components/LiveDemo/style.scss
deleted file mode 100644
index cf709170..00000000
--- a/docs/src/components/LiveDemo/style.scss
+++ /dev/null
@@ -1,58 +0,0 @@
-.live-demo {
- background-color: $colorWhite;
- overflow: hidden;
- border-radius: 0.5rem;
-
- &__preview {
- border-top-left-radius: inherit;
- border-top-right-radius: inherit;
- border-bottom-width: 0;
- }
-
- &__tab {
- display: inline-flex;
- position: relative;
- background-color: transparent;
- color: rgba($colorWhite, 0.7);
- padding: 0.1rem 0.5rem;
- border-radius: 5px;
- font-weight: 500;
- border: none;
- margin-right: 0.5rem;
-
- &:first-child {
- margin-left: -0.5rem;
- }
-
- &.is-active,
- &:hover {
- color: $colorWhite;
- background-color: rgba($colorWhite, 0.1);
- }
- }
-
- &__code {
- pre {
- margin: 0;
- border-radius: 0;
- }
- }
-
- &__meta {
- display: flex;
- justify-content: space-between;
- width: 100%;
- padding: 0.5rem 1.25rem;
- border: 1px solid rgba($colorWhite, 0.1);
- border-bottom-left-radius: inherit;
- border-bottom-right-radius: inherit;
- border-top-width: 0;
- background-color: $colorBlack;
- }
-
- &__error {
- padding: 1.25rem;
- color: $colorRed;
- background-color: rgba($colorRed, 0.1);
- }
-}
diff --git a/docs/src/components/LogoItem/index.vue b/docs/src/components/LogoItem/index.vue
new file mode 100644
index 00000000..3ae515aa
--- /dev/null
+++ b/docs/src/components/LogoItem/index.vue
@@ -0,0 +1,61 @@
+
+
+
+
+ {{ title }}
+
+
+
+
+
+
+
diff --git a/docs/src/components/LogoList/index.vue b/docs/src/components/LogoList/index.vue
new file mode 100644
index 00000000..2075067e
--- /dev/null
+++ b/docs/src/components/LogoList/index.vue
@@ -0,0 +1,23 @@
+
+
+
+
+
+
+
+
+
diff --git a/docs/src/components/PageNavigation/style.scss b/docs/src/components/PageNavigation/style.scss
index 1583320c..a0e51f6f 100644
--- a/docs/src/components/PageNavigation/style.scss
+++ b/docs/src/components/PageNavigation/style.scss
@@ -4,13 +4,13 @@
padding: 1.5rem 0;
&__link {
- color: rgba($colorWhite, 0.6);
+ color: rgba($colorBlack, 0.6);
padding: 0.25rem 0.5rem;
border-radius: 5px;
&:hover {
- color: $colorWhite;
- background-color: rgba($colorWhite, 0.05);
+ color: $colorBlack;
+ background-color: rgba($colorBlack, 0.05);
}
}
}
diff --git a/docs/src/components/Prism/index.vue b/docs/src/components/Prism/index.vue
index 8c336bbc..581ced2d 100644
--- a/docs/src/components/Prism/index.vue
+++ b/docs/src/components/Prism/index.vue
@@ -1,5 +1,5 @@
- {{ code }}
+
+ ${process.env.NODE_ENV === 'production'
+ ? ''
+ : ''
+ }
+
+