docs: enhance examples (#1029)

* docs(button): enhance examples * docs(checkbox): enhance examples * docs(collapse): enhance examples * docs(input): enhance examples * docs(notification): enhance examples * docs(radio): enhance examples * docs(taginput): enhance examples * docs(select): enhance examples * docs(slider): enhance examples * docs(switch): enhance examples * docs(sidebar): enhance examples * docs(tabs): enhance examples * docs(programmatic): enhance docs * docs: update readme
oruga-ui · Aug 7, 2024 · 39bfbef · 39bfbef
1 parent 79a7ab9
commit 39bfbef
Show file tree

Hide file tree

Showing 37 changed files with 304 additions and 53 deletions.
diff --git a/README.md b/README.md
@@ -61,7 +61,7 @@ Browse [online documentation here](https://oruga-ui.com/documentation/).
 
 🕹 To see Oruga in action, go to the [Example section](https://oruga-ui.com/documentation/#examples) in the documentation.
 
-Note: the documentation source code is in the `docs` directory, it serves as the demo as well.
+Note: the source code of the documentation examples can be found in the `examples` directories for each component, it serves as the demo as well.
 
 ## Quick start
 

diff --git a/packages/oruga/src/components/button/Button.vue b/packages/oruga/src/components/button/Button.vue
@@ -194,7 +194,7 @@ const rootClasses = defineClasses(
         "variantClass",
         "o-btn--",
         computed(() => props.variant),
-        computed(() => !!props.variant),
+        computed(() => !!props.variant && !props.outlined && !props.inverted),
     ],
     [
         "outlinedClass",

diff --git a/packages/oruga/src/components/button/examples/base.vue b/packages/oruga/src/components/button/examples/base.vue
@@ -1,14 +1,17 @@
 <script setup lang="ts">
 import { reactive } from "vue";
 
-const clickMe = () => {
+const clickMe = (): void => {
     alert("Clicked!");
 };
 
 const settings = reactive({
-    rounded: false,
-    variant: "success",
+    variant: "primary",
     size: "medium",
+    rounded: false,
+    outlined: false,
+    inverted: false,
+    disabled: false,
 });
 </script>
 
@@ -27,21 +30,34 @@ const settings = reactive({
                 <o-select v-model="settings.variant">
                     <option value="default">default</option>
                     <option value="primary">primary</option>
+                    <option value="secondary">secondary</option>
                     <option value="success">success</option>
                     <option value="info">info</option>
                     <option value="warning">warning</option>
                     <option value="danger">danger</option>
                 </o-select>
             </o-field>
+            <o-field label="Inverted">
+                <o-switch v-model="settings.inverted" />
+            </o-field>
+            <o-field label="Outlined">
+                <o-switch v-model="settings.outlined" />
+            </o-field>
             <o-field label="Rounded">
                 <o-switch v-model="settings.rounded" />
             </o-field>
+            <o-field label="Disabled">
+                <o-switch v-model="settings.disabled" />
+            </o-field>
         </o-field>
 
         <o-button
             :variant="settings.variant"
             :size="settings.size"
             :rounded="settings.rounded"
+            :inverted="settings.inverted"
+            :outlined="settings.outlined"
+            :disabled="settings.disabled"
             @click="clickMe">
             Click Me
         </o-button>

diff --git a/packages/oruga/src/components/button/examples/index.vue b/packages/oruga/src/components/button/examples/index.vue
@@ -5,6 +5,12 @@ import BaseCode from "./base.vue?raw";
 import Styles from "./styles.vue";
 import StylesCode from "./styles.vue?raw";
 
+import Outlined from "./outlined.vue";
+import OutlinedCode from "./outlined.vue?raw";
+
+import Inverted from "./inverted.vue";
+import InvertedCode from "./inverted.vue?raw";
+
 import Icons from "./icons.vue";
 import IconsCode from "./icons.vue?raw";
 
@@ -19,6 +25,12 @@ import TagsCode from "./tags.vue?raw";
     <h3 id="styles">States and Styles</h3>
     <ExampleViewer :component="Styles" :code="StylesCode" />
 
+    <h3 id="outlined">Outlined</h3>
+    <ExampleViewer :component="Outlined" :code="OutlinedCode" />
+
+    <h3 id="inverted">Inverted</h3>
+    <ExampleViewer :component="Inverted" :code="InvertedCode" />
+
     <h3 id="icons">Icons</h3>
     <ExampleViewer :component="Icons" :code="IconsCode" />
 

diff --git a/packages/oruga/src/components/button/examples/inverted.vue b/packages/oruga/src/components/button/examples/inverted.vue
@@ -0,0 +1,11 @@
+<template>
+    <section class="odocs-spaced">
+        <o-button label="Default" inverted />
+        <o-button label="Primary" variant="primary" inverted />
+        <o-button label="Secondary" variant="secondary" inverted />
+        <o-button label="Success" variant="success" inverted />
+        <o-button label="Info" variant="info" inverted />
+        <o-button label="Warning" variant="warning" inverted />
+        <o-button label="Danger" variant="danger" inverted />
+    </section>
+</template>
diff --git a/packages/oruga/src/components/button/examples/outlined.vue b/packages/oruga/src/components/button/examples/outlined.vue
@@ -0,0 +1,11 @@
+<template>
+    <section class="odocs-spaced">
+        <o-button label="Default" outlined />
+        <o-button label="Primary" variant="primary" outlined />
+        <o-button label="Secondary" variant="secondary" outlined />
+        <o-button label="Success" variant="success" outlined />
+        <o-button label="Info" variant="info" outlined />
+        <o-button label="Warning" variant="warning" outlined />
+        <o-button label="Danger" variant="danger" outlined />
+    </section>
+</template>
diff --git a/packages/oruga/src/components/button/examples/styles.vue b/packages/oruga/src/components/button/examples/styles.vue
@@ -2,6 +2,7 @@
     <section>
         <div class="odocs-spaced">
             <o-button label="Primary" variant="primary" />
+            <o-button label="Secondary" variant="secondary" />
             <o-button label="Success" variant="success" />
             <o-button label="Info" variant="info" />
             <o-button label="Warning" variant="warning" />
@@ -14,11 +15,6 @@
             <o-button label="Rounded" rounded />
         </div>
 
-        <div class="odocs-spaced">
-            <o-button label="Outlined" variant="primary" outlined />
-            <o-button label="Inverted" variant="primary" inverted />
-        </div>
-
         <div class="odocs-spaced">
             <o-button label="Expanded" variant="primary" expanded />
         </div>

diff --git a/packages/oruga/src/components/checkbox/examples/index.vue b/packages/oruga/src/components/checkbox/examples/index.vue
@@ -5,6 +5,9 @@ import BaseCode from "./base.vue?raw";
 import Variants from "./variants.vue";
 import VariantsCode from "./variants.vue?raw";
 
+import Interminate from "./interminate.vue";
+import InterminateCode from "./interminate.vue?raw";
+
 import Sizes from "./sizes.vue";
 import SizesCode from "./sizes.vue?raw";
 
@@ -19,6 +22,9 @@ import ArrayCode from "./array.vue?raw";
     <h3 id="variants">Variants</h3>
     <ExampleViewer :component="Variants" :code="VariantsCode" />
 
+    <h3 id="interminate">Interminate</h3>
+    <ExampleViewer :component="Interminate" :code="InterminateCode" />
+
     <h3 id="sizes">Sizes</h3>
     <ExampleViewer :component="Sizes" :code="SizesCode" />
 

diff --git a/packages/oruga/src/components/checkbox/examples/interminate.vue b/packages/oruga/src/components/checkbox/examples/interminate.vue
@@ -0,0 +1,31 @@
+<template>
+    <section>
+        <o-field>
+            <o-checkbox indeterminate label="Default" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox variant="primary" indeterminate label="Primary" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox variant="secondary" indeterminate label="Secondary" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox variant="success" indeterminate label="Success" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox variant="info" indeterminate label="Info" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox variant="warning" indeterminate label="Warning" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox variant="danger" indeterminate label="Danger" />
+        </o-field>
+    </section>
+</template>
diff --git a/packages/oruga/src/components/checkbox/examples/variants.vue b/packages/oruga/src/components/checkbox/examples/variants.vue
@@ -1,27 +1,34 @@
 <template>
     <section>
         <o-field>
-            <o-checkbox :value="true" label="Default" />
+            <o-checkbox :model-value="true" label="Default" />
         </o-field>
 
         <o-field>
-            <o-checkbox :value="true" variant="primary" label="Primary" />
+            <o-checkbox :model-value="true" variant="primary" label="Primary" />
         </o-field>
 
         <o-field>
-            <o-checkbox :value="true" variant="info" label="Info" />
+            <o-checkbox
+                :model-value="true"
+                variant="secondary"
+                label="secondary" />
         </o-field>
 
         <o-field>
-            <o-checkbox :value="true" variant="success" label="Success" />
+            <o-checkbox :model-value="true" variant="success" label="Success" />
         </o-field>
 
         <o-field>
-            <o-checkbox :value="true" variant="danger" label="Danger" />
+            <o-checkbox :model-value="true" variant="info" label="Info" />
         </o-field>
 
         <o-field>
-            <o-checkbox :value="true" variant="warning" label="Warning" />
+            <o-checkbox :model-value="true" variant="warning" label="Warning" />
+        </o-field>
+
+        <o-field>
+            <o-checkbox :model-value="true" variant="danger" label="Danger" />
         </o-field>
     </section>
 </template>
diff --git a/packages/oruga/src/components/collapse/examples/accordion.vue b/packages/oruga/src/components/collapse/examples/accordion.vue
@@ -2,6 +2,7 @@
 import { ref } from "vue";
 
 const isOpen = ref(0);
+const isOpenAgain = ref(0);
 
 const collapses = ref([
     {
@@ -29,64 +30,79 @@ const collapses = ref([
             :key="index"
             class="card"
             animation="slide"
+            trigger-class="trigger-fullwidth"
             :open="isOpen == index"
             @open="isOpen = index">
             <template #trigger="props">
                 <div class="card-header" role="button">
-                    <p class="card-header-title">
+                    <span class="card-header-title">
                         {{ collapse.title }}
-                    </p>
+                    </span>
+
                     <a class="card-header-icon">
                         <o-icon :icon="props.open ? 'caret-up' : 'caret-down'">
                         </o-icon>
                     </a>
                 </div>
             </template>
+
             <div class="card-content">
-                <div class="content" v-html="collapse.text" />
+                <p class="content" v-html="collapse.text" />
             </div>
         </o-collapse>
     </section>
+
+    <br />
+
+    <section>
+        <article v-for="(collapse, index) of collapses" :key="index">
+            <o-collapse
+                animation="slide"
+                :open="isOpenAgain == index"
+                @update:open="isOpenAgain = index">
+                <template #trigger>
+                    <o-button variant="success" :label="collapse.title" />
+                </template>
+
+                <div class="card">
+                    <p class="card-content" v-html="collapse.text" />
+                </div>
+            </o-collapse>
+        </article>
+    </section>
 </template>
 
 <style>
 .card {
+    position: relative;
     background-color: #fff;
     box-shadow:
         0 2px 3px hsla(0, 0%, 4%, 0.1),
         0 0 0 1px hsla(0, 0%, 4%, 0.1);
-    color: #4a4a4a;
-    max-width: 100%;
-    position: relative;
 }
 
 .card-header {
-    background-color: transparent;
-    align-items: stretch;
-    box-shadow: 0 1px 2px hsla(0, 0%, 4%, 0.1);
     display: flex;
+    align-items: center;
+    box-shadow: 0 1px 2px hsla(0, 0%, 4%, 0.1);
 }
 
 .card-header-title {
-    align-items: center;
-    color: #363636;
-    display: flex;
     flex-grow: 1;
     font-weight: 700;
     padding: 0.75rem;
-    margin: 0;
 }
 
 .card-header-icon {
-    align-items: center;
     cursor: pointer;
-    display: flex;
     padding: 0.75rem;
-    justify-content: center;
 }
 
 .card-content {
     padding: 1.5rem;
-    background-color: transparent;
+}
+
+.trigger-fullwidth {
+    width: 100%;
 }
 </style>
diff --git a/packages/oruga/src/components/input/examples/variants.vue b/packages/oruga/src/components/input/examples/variants.vue
@@ -4,6 +4,10 @@
             <o-input placeholder="Primary" />
         </o-field>
 
+        <o-field label="Secondary" variant="secondary">
+            <o-input placeholder="Secondary" />
+        </o-field>
+
         <o-field label="Success" variant="success">
             <o-input placeholder="Success" />
         </o-field>

diff --git a/packages/oruga/src/components/input/examples/with-icons.vue b/packages/oruga/src/components/input/examples/with-icons.vue
@@ -3,11 +3,11 @@ import { ref } from "vue";
 
 const email = ref("");
 
-function searchIconClick() {
+function searchIconClick(): void {
     alert("You wanna make a search?");
 }
 
-function clearIconClick() {
+function clearIconClick(): void {
     email.value = "";
     alert("Email cleared!");
 }

diff --git a/packages/oruga/src/components/modal/ModalProgrammatic.ts b/packages/oruga/src/components/modal/ModalProgrammatic.ts
@@ -38,7 +38,7 @@ const ModalProgrammatic = {
         const defaultParams = {
             programmatic: { instances },
             active: true, // set the active state to true
-            destroyOnHide: true, // set destroy on hide true
+            destroyOnHide: true, // set default destroy on hide to true
         };
 
         const propsData = merge(defaultParams, componentParams);

diff --git a/packages/oruga/src/components/modal/examples/programmatically-async.vue b/packages/oruga/src/components/modal/examples/programmatically-async.vue
@@ -12,7 +12,6 @@ const promptModal = async (): Promise<void> => {
             message: "Do you really want me to ship the selected sprockets?",
         },
         trapFocus: true,
-        destroyOnHide: true,
     });
     // Note utilizing the promise requires Promise be supported by the browser
     // If you are running Vue 2 on IE 11 this will not be the case unless you
@@ -37,7 +36,6 @@ const promptModalCloseAll = async (): Promise<void> => {
                 "There is a 3 second timeout that will close all programmatic modals",
         },
         trapFocus: true,
-        destroyOnHide: true,
     });
 
     setTimeout(() => oruga.modal.closeAll({ action: "closeAll" }), 3 * 1000);