Merge pull request #381 from messenjer/refactor/remove-clientonly-around-script-setup

refactor: remove <ClientOnly> around script setup in .md

Author: mariusa

docs/components/Alert.md

@@ -286,8 +286,6 @@ To create a `<b-alert>` that dismisses automatically after a period of time, set
 | `default`     | Content to place in the alert  |
 | ~~`dismiss`~~ | Content for the dismiss button |
 
-<ClientOnly>
-
 <script lang="ts" setup>
   import {ref, computed} from 'vue'
 
@@ -315,5 +313,3 @@ To create a `<b-alert>` that dismisses automatically after a period of time, set
   };
 
 </script>
-
-</ClientOnly>

docs/components/Avatar.md

@@ -838,10 +838,10 @@ Avatars are based upon `<b-badge>` and `<b-button>` components, and as such, rel
 | --------- | ---------------------------------------------- |
 | `default` | Content (avatars) to place in the avatar group |
 
-<!-- <script lang="ts" setup>
+<script lang="ts" setup>
   import {ref, Ref} from 'vue';
 
   const alertEvent = (event: PointerEvent) => {
     alert(`Clicked`);
   }
-</script> -->
+</script>

docs/components/Breadcrumb.md

@@ -172,7 +172,7 @@ Use slot `prepend` to put content before the breadcrumb. Use slot `append` to pu
 | ------- | ----------------------------------- | --------------------------------------- |
 | `click` | `event` - Native click event object | Content to place in the breadcrumb item |
 
-<!-- <script lang="ts" setup>
+<script lang="ts" setup>
   import {ref, Ref} from 'vue';
   import {BreadcrumbItem} from '../../src/types';
 
@@ -187,4 +187,4 @@ Use slot `prepend` to put content before the breadcrumb. Use slot `append` to pu
   const alertEvent = (event: PointerEvent) => {
     alert(`Event ${event.target}`);
   }
-</script> -->
+</script>

docs/components/Button.md

@@ -409,8 +409,6 @@ added, nor will the keyboard event listeners be enabled.
 | ------- | ------------------------- | ---------------------------------------- |
 | `click` | Native click event object | Emitted when non-disabled button clicked |
 
-<ClientOnly>
-
 <script lang='ts' setup>
   import {ref, computed} from 'vue'
 
@@ -424,5 +422,3 @@ added, nor will the keyboard event listeners be enabled.
 
   const btnStates = computed(() => buttons.value.map(b => b.state))
 </script>
-
-</ClientOnly>

docs/components/Collapse.md

@@ -429,8 +429,6 @@ apply those roles for you automatically, as it depends on your final document ma
 | `shown`             |                                                   | Emitted when collapse has finished opening |
 | `update:modelValue` | `visible` Will be true if the collapse is visible | Emitted when collapse has finished opening |
 
-<ClientOnly>
-
 <script lang="ts" setup>
   import {ref, computed} from 'vue'
 
@@ -448,8 +446,6 @@ apply those roles for you automatically, as it depends on your final document ma
         `
 </script>
 
-</ClientOnly>
-
 <style>
 .collapsed > .when-open {
   display: none;

docs/components/Form.md

@@ -458,46 +458,6 @@ Refer to the
 [Bootstrap v5 Form Validation Documentation](https://getbootstrap.com/docs/5.0/forms/validation/)
 for details on the Bootstrap v5 validation states.
 
-<ClientOnly>
-
-<script lang='ts' setup>
-  import {ref, computed, reactive, nextTick} from 'vue'
-
-  const form = reactive({
-    email: '',
-    name: '',
-    food: null,
-    checked: []
-  })
-
-  const foods = [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn']
-  const show = ref(true)
-
-  const onSubmit = (event) => {
-    event.preventDefault()
-    alert(JSON.stringify(form))
-  }
-
-  const onReset = (event) => {
-    event.preventDefault()
-    // Reset our form values
-    form.email = ''
-    form.name = ''
-    form.food = null
-    form.checked = []
-    // Trick to reset/clear native browser form validation state
-    show.value = false
-    nextTick(() => {
-      show.value = true
-    })
-  }
-
-  const userId = ref('')
-  const validation = computed(()=> userId.value.length > 4 && userId.value.length < 13)
-</script>
-
-</ClientOnly>
-
 ## Component reference
 
 ### `<b-form>`
@@ -584,3 +544,39 @@ for details on the Bootstrap v5 validation states.
 | Property  | Description                                         |
 | --------- | --------------------------------------------------- |
 | `default` | Content to place in the form valid feedback element |
+
+<script lang='ts' setup>
+  import {ref, computed, reactive, nextTick} from 'vue'
+
+  const form = reactive({
+    email: '',
+    name: '',
+    food: null,
+    checked: []
+  })
+
+  const foods = [{ text: 'Select One', value: null }, 'Carrots', 'Beans', 'Tomatoes', 'Corn']
+  const show = ref(true)
+
+  const onSubmit = (event) => {
+    event.preventDefault()
+    alert(JSON.stringify(form))
+  }
+
+  const onReset = (event) => {
+    event.preventDefault()
+    // Reset our form values
+    form.email = ''
+    form.name = ''
+    form.food = null
+    form.checked = []
+    // Trick to reset/clear native browser form validation state
+    show.value = false
+    nextTick(() => {
+      show.value = true
+    })
+  }
+
+  const userId = ref('')
+  const validation = computed(()=> userId.value.length > 4 && userId.value.length < 13)
+</script>

docs/components/FormCheckbox.md

@@ -741,7 +741,7 @@ The indeterminate state is **visual only**. The checkbox is still either checked
 <p class="alert alert-warning">
   <strong>Caution:</strong> Props that support HTML strings (<code>*-html</code>) can be vulnerable to
   <a class="alert-link" href="https://en.wikipedia.org/wiki/Cross-site_scripting">
-  <abbr title="Cross Site Scripting Attacks">XSS attacks</abbr></a>when passed raw user supplied values. You must properly 
+  <abbr title="Cross Site Scripting Attacks">XSS attacks</abbr></a>when passed raw user supplied values. You must properly
   <a class="alert-link" href="https://en.wikipedia.org/wiki/HTML_sanitization">sanitize</a> the user input first!
 </p>
 
@@ -808,8 +808,6 @@ The indeterminate state is **visual only**. The checkbox is still either checked
 | `change` | `checked` - Value of checkbox(es). When bound to multiple checkboxes, value will be an array | Emitted when selected value(s) is changed due to user interaction |
 | `input`  | `checked` - Value of checkbox(es). When bound to multiple checkboxes, value will be an array | Emitted when selected value(s) is changed                         |
 
-<ClientOnly>
-
 <script lang='ts' setup>
   import {ref, computed} from 'vue'
 
@@ -820,7 +818,7 @@ The indeterminate state is **visual only**. The checkbox is still either checked
 
   const availableCars = ['BMW', 'Mercedes', 'Toyota'];
   const selectedCars = ref([]);
- 
+
   const concatSelectedCars = computed(() => { return selectedCars.value.join(', ');});
 
   const checkEx2Selected = ref(['A']);
@@ -856,5 +854,3 @@ The indeterminate state is **visual only**. The checkbox is still either checked
   const contextualState = computed(() => contextualSelected.value.length === 2);
 
 </script>
-
-</ClientOnly>

docs/components/Pagination.md

@@ -76,7 +76,7 @@ For a full list of all available slots see the [Slots](#comp-ref-b-pagination-sl
         </template>
       </b-pagination>
       Current page : {{ ex1CurrentPage }}
-    </div>  
+    </div>
   </b-card>
 </ClientOnly>
 
@@ -480,8 +480,6 @@ To be done
 | `update:modelValue` | `current page` - Value of he current page                                                   |                                                    |
 | `page-click`        | `bvEvent ` - The `BvEvent` object. Call `bvEvent.preventDefault()` to cancel page selection | Emitted when a page button was clicked. Cancelable |
 
-<ClientOnly>
-
 <script lang='ts' setup>
   import {ref, computed} from 'vue'
 
@@ -502,5 +500,3 @@ To be done
   const ex5CurrentPage = ref(3);
   const ex5Rows = ref(100);
 </script>
-
-</ClientOnly>

docs/components/Toast.md

@@ -134,20 +134,17 @@ Toasts can be displayed as variants thru various helper methods or be set in `To
   <ComponentReference></ComponentReference>
 </ClientOnly>
 
-<ClientOnly>
-
 <script lang='ts' setup>
   import {ref, computed} from 'vue';
   import {useToast} from 'bootstrap-vue-3';
 
+  // let toast = useToast()
 
-    let show1 = () => {toast.show({title: 'example title'})};
-    let show2 = () => {toast.show({title: 'example title', body: "This is a toast"}, {variant: 'info'})};
+  let show1 = () => {toast.show({title: 'example title'})};
+  let show2 = () => {toast.show({title: 'example title', body: "This is a toast"}, {variant: 'info'})};
 
-    let variantshow1 = () => {toast.show({title: 'Item Deleted'}, {pos: 'bottom-center', variant: 'danger'})};
-    let variantshow2 = () => {toast.show({title: 'New Message', body: "This is a toast"}, {pos: 'bottom-right', variant: 'info'})};
-    let variantshow3 = () => {toast.show({title: 'Warning for Item', body: "Please check list"},{pos: 'bottom-right', variant: 'warning'})};
-    let variantshow4 = () => {toast.show({title: 'Event Created!', body: "Bootstrap Event"},{pos: 'bottom-right', variant: 'success'})};
+  let variantshow1 = () => {toast.show({title: 'Item Deleted'}, {pos: 'bottom-center', variant: 'danger'})};
+  let variantshow2 = () => {toast.show({title: 'New Message', body: "This is a toast"}, {pos: 'bottom-right', variant: 'info'})};
+  let variantshow3 = () => {toast.show({title: 'Warning for Item', body: "Please check list"},{pos: 'bottom-right', variant: 'warning'})};
+  let variantshow4 = () => {toast.show({title: 'Event Created!', body: "Bootstrap Event"},{pos: 'bottom-right', variant: 'success'})};
 </script>
-
-</ClientOnly>