Merge pull request #158 from libvue/feature/improve-misc

Feature/improve misc
libvue · Apr 20, 2024 · cd8757d · cd8757d
2 parents 01d0a77 + 3eb163b
commit cd8757d
Show file tree

Hide file tree

Showing 37 changed files with 72 additions and 46 deletions.
diff --git a/src/docs/components/ComponentDetails.vue b/src/docs/components/ComponentDetails.vue
@@ -1,12 +1,12 @@
 <template>
     <div class="component-details">
-        <div v-if="props" v-space-after="1" class="props-table">
+        <div v-if="props && rowsProps.length > 0" v-space-after="1" class="props-table">
             <lv-heading v-space-after="1" :level="6">{{ title }} Props</lv-heading>
             <lv-card>
                 <lv-table :rows="rowsProps" :columns="columnsProps"></lv-table>
             </lv-card>
         </div>
-        <div v-if="emits" class="emits-table">
+        <div v-if="emits" v-space-after="slots.length > 0 ? 1 : 0" class="emits-table">
             <lv-heading v-space-after="1" :level="6">{{ title }} Emits</lv-heading>
             <lv-card>
                 <lv-table :rows="rowsEmits" :columns="columnsEmits" />

diff --git a/src/docs/views/documentation/components/lv-accordion.vue b/src/docs/views/documentation/components/lv-accordion.vue
@@ -26,7 +26,7 @@
         </lv-accordion>
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html" />
-    <component-details component="LvAccordion"></component-details>
+    <component-details :slots="['default']" component="LvAccordion"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-avatar-group.vue b/src/docs/views/documentation/components/lv-avatar-group.vue
@@ -10,7 +10,7 @@
         </lv-avatar-group>
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html" />
-    <component-details component="LvAvatarGroup"></component-details>
+    <component-details :slots="['default']" component="LvAvatarGroup"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-badge.vue b/src/docs/views/documentation/components/lv-badge.vue
@@ -18,7 +18,7 @@
         </lv-badge>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="codeSlotted" />
-    <component-details component="LvBadge"></component-details>
+    <component-details :slots="['default']" component="LvBadge"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-blockquote.vue b/src/docs/views/documentation/components/lv-blockquote.vue
@@ -6,7 +6,7 @@
     </lv-card>
 
     <code-preview v-space-after="1" lang="html" :code="codeBlockquote" />
-    <component-details component="LvBlockquote"></component-details>
+    <component-details :slots="['default']" component="LvBlockquote"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-button-group.vue b/src/docs/views/documentation/components/lv-button-group.vue
@@ -9,7 +9,7 @@
         </lv-button-group>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code"/>
-    <component-details component="LvButtonGroup"></component-details>
+    <component-details :slots="['default']" component="LvButtonGroup"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-button.vue b/src/docs/views/documentation/components/lv-button.vue
@@ -120,7 +120,7 @@
         </template>
     </lv-tabs>
 
-    <component-details v-space-after="1" component="LvButton"></component-details>
+    <component-details v-space-after="1" :slots="['default']" component="LvButton"></component-details>
 
 </template>
 

diff --git a/src/docs/views/documentation/components/lv-card.vue b/src/docs/views/documentation/components/lv-card.vue
@@ -26,7 +26,7 @@
             <code-preview v-space-after="1" lang="html" :code="codeNoBorder" />
         </template>
     </lv-tabs>
-    <component-details component="LvCard"></component-details>
+    <component-details :slots="['default']" component="LvCard"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-code.vue b/src/docs/views/documentation/components/lv-code.vue
@@ -7,7 +7,7 @@
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html" />
 
-    <component-details component="LvCode"></component-details>
+    <component-details :slots="['default']" component="LvCode"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-cookie-consent.vue b/src/docs/views/documentation/components/lv-cookie-consent.vue
@@ -1,7 +1,6 @@
 <template>
     <lv-heading v-space-after="0.5" :level="3">Cookie Consent</lv-heading>
     <lv-heading v-space-after="2" sub :level="6">Because we have to somehow</lv-heading>
-    <lv-heading v-space-after="1" :level="6">Default</lv-heading>
     <lv-card v-space-after="1">
         <lv-button color="solid-primary" label="Toggle Consent" @click="showCookieConsent = !showCookieConsent" />
         <lv-cookie-consent
@@ -12,7 +11,7 @@
         />
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code" />
-    <component-details component="LvCookieConsent"></component-details>
+    <component-details :slots="['default']" component="LvCookieConsent"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-description-list.vue b/src/docs/views/documentation/components/lv-description-list.vue
@@ -11,7 +11,7 @@
     </lv-card>
     <code-preview v-space-after="1" :files="files" :active="activeFile" @change-file="(v) => activeFile = v" />
 
-    <component-details component="LvDescriptionList"></component-details>
+    <component-details :slots="['%item.id%']" component="LvDescriptionList"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-dialog.vue b/src/docs/views/documentation/components/lv-dialog.vue
@@ -36,7 +36,7 @@
         </lv-dialog>
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html"/>
-    <component-details component="LvDialog"></component-details>
+    <component-details :slots="['default', 'header', 'content', 'footer']" component="LvDialog"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-drawer.vue b/src/docs/views/documentation/components/lv-drawer.vue
@@ -25,7 +25,7 @@
         </lv-flex>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code"/>
-    <component-details component="LvDrawer"></component-details>
+    <component-details :slots="['default']" component="LvDrawer"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-fieldset.vue b/src/docs/views/documentation/components/lv-fieldset.vue
@@ -30,7 +30,7 @@
         </lv-grid>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code"/>
-    <component-details component="LvFieldset"></component-details>
+    <component-details :slots="['default', 'hint', 'invalid']" component="LvFieldset"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-flex.vue b/src/docs/views/documentation/components/lv-flex.vue
@@ -56,7 +56,7 @@
         </lv-flex>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="codeFill" />
-    <component-details component="LvFlex"></component-details>
+    <component-details :slots="['default']" component="LvFlex"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-grid.vue b/src/docs/views/documentation/components/lv-grid.vue
@@ -30,16 +30,18 @@
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html" />
 
-    <component-details v-space-after="1" title="Grid" component="LvGrid"></component-details>
+    <component-details v-space-after="1" :slots="['default']" title="Grid" component="LvGrid"></component-details>
 
     <component-details
         v-space-after="1"
+        :slots="['default']"
         title="Grid Row"
         component="LvGridRow"
     ></component-details>
 
     <component-details
         v-space-after="1"
+        :slots="['default']"
         title="Grid Column"
         component="LvGridColumn"
     ></component-details>

diff --git a/src/docs/views/documentation/components/lv-header.vue b/src/docs/views/documentation/components/lv-header.vue
@@ -20,7 +20,7 @@
     </lv-card>
 
     <code-preview v-space-after="1" lang="html" :code="code" />
-    <component-details component="LvHeader" :slots="['branding', 'search', 'extra']"></component-details>
+    <component-details component="LvHeader" :slots="['branding', 'search', 'navigation', 'extra']"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-heading.vue b/src/docs/views/documentation/components/lv-heading.vue
@@ -25,7 +25,7 @@
         <lv-heading sub :level="6">Subheading</lv-heading>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="codeSub" />
-    <component-details component="LvHeading"></component-details>
+    <component-details :slots="['default']" component="LvHeading"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-hero.vue b/src/docs/views/documentation/components/lv-hero.vue
@@ -47,7 +47,7 @@
         </template>
     </lv-tabs>
 
-    <component-details component="LvHero" :slots="['image', 'buttons']"></component-details>
+    <component-details component="LvHero" :slots="['image', 'buttons', 'description', 'title']"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-horizontal-nav.vue b/src/docs/views/documentation/components/lv-horizontal-nav.vue
@@ -20,10 +20,11 @@
     <code-preview v-space-after="1" lang="html" :code="code" />
     <component-details
         v-space-after="1"
+        :slots="['default']"
         title="LvHorizontalNavItem"
         component="LvHorizontalNavItem"
     ></component-details>
-    <component-details title="LvHorizontalNavGroup" component="LvHorizontalNavGroup"></component-details>
+    <component-details title="LvHorizontalNavGroup" :slots="['default']" component="LvHorizontalNavGroup"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-image-carousel.vue b/src/docs/views/documentation/components/lv-image-carousel.vue
@@ -16,7 +16,7 @@
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code" />
 
-    <component-details component="LvImageCarousel"></component-details>
+    <component-details :slots="['default']" component="LvImageCarousel"></component-details>
 </template>
 
 

diff --git a/src/docs/views/documentation/components/lv-keyboard.vue b/src/docs/views/documentation/components/lv-keyboard.vue
@@ -21,7 +21,7 @@
     </lv-card>
 
     <code-preview v-space-after="1" lang="html" :code="code" />
-    <component-details component="LvKeyboard"></component-details>
+    <component-details :slots="['default']" component="LvKeyboard"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-link.vue b/src/docs/views/documentation/components/lv-link.vue
@@ -22,7 +22,7 @@
         <lv-link :zoom-on-hover="true"><lv-card>Any content</lv-card></lv-link>
     </lv-card>
     <code-preview v-space-after="1" lang="html" code='<lv-link :zoom-on-hover="true"><lv-card>Any content</lv-card></lv-link>' />
-    <component-details component="LvLink"></component-details>
+    <component-details :slots="['default']" component="LvLink"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-list.vue b/src/docs/views/documentation/components/lv-list.vue
@@ -12,8 +12,8 @@
     </lv-card>
 
     <code-preview v-space-after="1" lang="html" :code="code" />
-    <component-details component="LvList" title="LvList"></component-details>
-    <component-details component="LvListItem" title="LvListItem"></component-details>
+    <component-details :slots="['default']" component="LvList" title="LvList"></component-details>
+    <component-details :slots="['default']" component="LvListItem" title="LvListItem"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-notice.vue b/src/docs/views/documentation/components/lv-notice.vue
@@ -77,7 +77,7 @@
             <code-preview v-space-after="1" lang="html" :code="codeIcons" />
         </template>
     </lv-tabs>
-    <component-details component="LvNotice"></component-details>
+    <component-details :slots="['default']" component="LvNotice"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-popover.vue b/src/docs/views/documentation/components/lv-popover.vue
@@ -31,7 +31,7 @@
         </lv-flex>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code"/>
-    <component-details component="LvPopover"></component-details>
+    <component-details :slots="['reference', 'content']" component="LvPopover"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-select.vue b/src/docs/views/documentation/components/lv-select.vue
@@ -38,7 +38,7 @@
         </template>
     </lv-tabs>
 
-    <component-details component="LvSelect"></component-details>
+    <component-details :slots="['option', 'no-options', 'value']" component="LvSelect"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-table.vue b/src/docs/views/documentation/components/lv-table.vue
@@ -96,7 +96,7 @@
         </template>
     </lv-tabs>
 
-    <component-details component="LvTable"></component-details>
+    <component-details :slots="['%column.key%']" component="LvTable"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-tabs.vue b/src/docs/views/documentation/components/lv-tabs.vue
@@ -13,7 +13,7 @@
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="codeTemplate" />
     <code-preview v-space-after="1" lang="javascript" :code="codeScript" />
-    <component-details component="LvTabs"></component-details>
+    <component-details :slots="['%tab.id%']" component="LvTabs"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-text-editor.vue b/src/docs/views/documentation/components/lv-text-editor.vue
@@ -9,7 +9,7 @@
         {{ content }}
     </lv-text>
     <code-preview v-space-after="1" lang="html" :code="code"/>
-    <component-details component="LvTextEditor"></component-details>
+    <component-details :slots="['buttons']" component="LvTextEditor"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-text.vue b/src/docs/views/documentation/components/lv-text.vue
@@ -10,7 +10,7 @@
         <lv-text align="right"> Lorem ipsum dolor sit amet, consectetur adipiscing elit </lv-text>
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="codeParagraph" />
-    <component-details component="LvText"></component-details>
+    <component-details :slots="['default']" component="LvText"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-toggle-group.vue b/src/docs/views/documentation/components/lv-toggle-group.vue
@@ -28,7 +28,7 @@
         </lv-flex>
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html"></code-preview>
-    <component-details component="LvToggleGroup"></component-details>
+    <component-details :slots="['default']" component="LvToggleGroup"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-toggle.vue b/src/docs/views/documentation/components/lv-toggle.vue
@@ -19,7 +19,7 @@
         </lv-flex>
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html"></code-preview>
-    <component-details component="LvToggle"></component-details>
+    <component-details :slots="['default']" component="LvToggle"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-vertical-nav.vue b/src/docs/views/documentation/components/lv-vertical-nav.vue
@@ -18,9 +18,9 @@
     </lv-card>
     <code-preview v-space-after="1" lang="html" :code="code" />
 
-    <component-details v-space-after="1" title="LvVerticalNavItem" component="LvVerticalNavItem"></component-details>
-    <component-details v-space-after="1" title="LvVerticalNavList" component="LvVerticalNavList"></component-details>
-    <component-details title="LvVerticalNavGroup" component="LvVerticalNavGroup"></component-details>
+    <component-details v-space-after="1" :slots="['default']" title="LvVerticalNavItem" component="LvVerticalNavItem"></component-details>
+    <component-details v-space-after="1" :slots="['default']" title="LvVerticalNavList" component="LvVerticalNavList"></component-details>
+    <component-details :slots="['default']" title="LvVerticalNavGroup" component="LvVerticalNavGroup"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/components/lv-window.vue b/src/docs/views/documentation/components/lv-window.vue
@@ -7,7 +7,7 @@
         </lv-window>
     </lv-card>
     <code-preview v-space-after="1" :code="code" lang="html"></code-preview>
-    <component-details component="LvWindow"></component-details>
+    <component-details :slots="['default']" component="LvWindow"></component-details>
 </template>
 
 <script>

diff --git a/src/docs/views/documentation/getting-started/install.vue b/src/docs/views/documentation/getting-started/install.vue
@@ -32,6 +32,7 @@ app.directive('space-after', spaceAfter);
 
 const registerScss = `
 @import '@libvue/core';
+@import 'theme-overrides';
 
 html {
     min-height: 100%;
@@ -51,6 +52,25 @@ body {
 }
 `.trim();
 
+const themeOverrides = `
+@mixin lightThemeOverrides {
+    --color-primary: red;
+}
+
+// Add it to the media query first
+@media (prefers-color-scheme: light) {
+    :root {
+        @include('lightThemeOverrides');
+    }
+}
+
+// Add it to the data-theme attribute second so it wins from the media query
+// This data-attribute can be added to the html or body tag
+[data-theme=light]  {
+   @include('lightThemeOverrides');
+}
+`.trim();
+
 export default {
     data() {
         return {
@@ -59,6 +79,7 @@ export default {
             registerFiles: [
                 { id: 'main', filename: 'main.js', lang: 'js', code: registerScript },
                 { id: 'scss', filename: 'app.scss', lang: 'scss', code: registerScss },
+                { id: 'theme', filename: 'theme-overrides.scss', lang: 'scss', code: themeOverrides },
             ],
         };
     },