feat(docs): Polish sections in multiple pages

Author: rstoenescu

docs/src/components/DocInstallation.vue

@@ -67,7 +67,7 @@ export default {
 
       ;['components', 'directives'].forEach(type => {
         if (this[type] !== void 0) {
-          parts.push(`// not needed if using auto-import feature:
+          parts.push(`// NOT needed if using auto-import feature:
     ${type}: [
       ${this.nameAsString(this[type], 6)}
     ]`)

docs/src/examples/QVideo/Basic.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="q-pa-md q-gutter-md">
+  <div class="q-pa-md">
     <q-video
       src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
     />

docs/src/examples/QVideo/HtmlMarkup.vue

@@ -1,11 +1,11 @@
 <template>
-  <div class="q-pa-md q-gutter-md">
-      <div class="q-video">
-        <iframe
-          src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
-          frameborder="0"
-          allowfullscreen
-        />
-      </div>
+  <div class="q-pa-md">
+    <div class="q-video">
+      <iframe
+        src="https://www.youtube.com/embed/k3_tw44QsZQ?rel=0"
+        frameborder="0"
+        allowfullscreen
+      />
+    </div>
   </div>
 </template>

docs/src/pages/vue-components/checkbox.md

@@ -19,35 +19,56 @@ Please also refer to the [QOptionGroup](/vue-components/option-group) on other p
 <doc-installation components="QCheckbox" />
 
 ## Usage
+
+### Standard
+
 <doc-example title="Standard" file="QCheckbox/Standard" />
 
+### Label
+
 <doc-example title="Label" file="QCheckbox/Label" />
 
+### Coloring
+
 In the second row in the example below, the property `keep-color` is being used to retain the passed in color when the checkbox is not in a toggled state.
 
 <doc-example title="Coloring" file="QCheckbox/Coloring" />
 
+### Dense and dark
+
 <doc-example title="Dense" file="QCheckbox/Dense" />
 
 <doc-example title="On a dark background" file="QCheckbox/OnDarkBackground" dark />
 
+### Indeterminate state
+
 In the example below, as soon as you click on the first checkbox it starts toggling between true/false. The second checkbox, on the other hand toggles between the three states (indeterminate/true/false) with help from `toggle-indeterminate`. You can optionally set the property `indeterminate-value`, otherwise the indeterminate value will be considered `null`.
 
 <doc-example title="Indeterminate state" file="QCheckbox/IndeterminateState" />
 
+### Array model
+
 <doc-example title="Array as model" file="QCheckbox/ArrayAsModel" />
 
+### Custom model values
+
 <doc-example title="Custom model values" file="QCheckbox/CustomModel" />
 
+### With QOptionGroup
+
 ::: tip
 You can also use [QOptionGroup](/vue-components/option-group), which simplifies the usage when you have groups of checkboxes, like in example below.
 :::
 
 <doc-example title="Usage with QOptionGroup" file="QCheckbox/OptionGroup" />
 
+### With QItem
+
 In the example below, we are rendering a `<label>` tag (notice `tag="label"`) so the QCheckbox will respond to clicks on QItems to change toggle state.
 
-<doc-example title="In a list" file="QCheckbox/InaList" />
+<doc-example title="With QItem" file="QCheckbox/InaList" />
+
+### Disable
 
 <doc-example title="Disable" file="QCheckbox/Disable" />
 

docs/src/pages/vue-components/expansion-item.md

@@ -16,8 +16,12 @@ They are basically [QItem](/vue-components/list-and-list-items) components wrapp
 
 ## Usage
 
+### Basic
+
 <doc-example title="Basic" file="QExpansionItem/Basic" />
 
+### Controlling expansion state
+
 <doc-example title="Controlling expansion state" file="QExpansionItem/ControlExpansionState" />
 
 ### Style

docs/src/pages/vue-components/no-ssr.md

@@ -14,37 +14,43 @@ Alternatively, you can also use it to render content only on server-side and it
 <doc-installation components="QNoSsr" />
 
 ## Usage
-Basic:
+
+### Basic
+
 ```html
 <q-no-ssr>
   <div>This won't be rendered on server</div>
 </q-no-ssr>
 ```
 
-Multiple client nodes:
+### Multiple client nodes
+
 ```html
 <q-no-ssr>
   <div>This won't be rendered on server.</div>
   <div>This won't either.</div>
 </q-no-ssr>
 ```
 
-Multiple client nodes with tag prop:
+### Multiple client nodes with tag prop
+
 ```html
 <q-no-ssr tag="blockquote">
   <div>This won't be rendered on server.</div>
   <div>This won't either.</div>
 </q-no-ssr>
 ```
 
-Placeholder property:
+### Placeholder property
+
 ```html
 <q-no-ssr placeholder="Rendered on server">
   <div>This won't be rendered on server</div>
 </q-no-ssr>
 ```
 
-Placeholder slot:
+### Placeholder slot
+
 ```html
 <q-no-ssr>
   <div>This won't be rendered on server</div>
@@ -54,7 +60,8 @@ Placeholder slot:
 </q-no-ssr>
 ```
 
-Multiple content in placeholder slot:
+### Multiple content in placeholder slot
+
 ```html
 <q-no-ssr>
   <div>This won't be rendered on server</div>
@@ -65,7 +72,8 @@ Multiple content in placeholder slot:
 </q-no-ssr>
 ```
 
-Only placeholder slot:
+### Only placeholder slot
+
 ```html
 <q-no-ssr>
   <template v-slot:placeholder>

docs/src/pages/vue-components/option-group.md

@@ -14,28 +14,39 @@ The QOptionGroup component is a helper component that allows you better control
 <doc-installation components="QOptionGroup" />
 
 ## Usage
+
+### Standard
+
 <doc-example title="Standard" file="QOptionGroup/Standard" />
 
+### With QCheckbox or QToggle
+
 <doc-example title="With checkboxes" file="QOptionGroup/Checkbox" />
 
 ::: warning
-The model for checkboxes must be an array
+The model for checkboxes/toggles must be an array.
 :::
 
 <doc-example title="With toggles" file="QOptionGroup/Toggle" />
 
-::: warning
-The model for toggles must be an array
-:::
+### With labels on left side
 
 <doc-example title="With option labels on the left side" file="QOptionGroup/Label" />
 
+### Inline
+
 <doc-example title="Inline" file="QOptionGroup/Inline" />
 
+### Dense
+
 <doc-example title="Dense and inline" file="QOptionGroup/DenseInline" />
 
+### Disable
+
 <doc-example title="Disabled" file="QOptionGroup/Disable" />
 
+### Dark
+
 <doc-example title="On a dark background" file="QOptionGroup/Dark" dark />
 
 ## QOptionGroup API

docs/src/pages/vue-components/popup-proxy.md

@@ -17,10 +17,16 @@ QPopupProxy should be used when you need either a [QMenu](/vue-components/menu)
 Use your browsers development tools to toggle the device between mobile or desktop (with browser refresh after each change) or, physically resize your browser's window to watch the QPopupProxy component switch between either a QMenu or a QDialog before clicking/tapping on its container. The default breakpoint is set at 450px.
 :::
 
+### Standard
+
 <doc-example title="Standard" file="QPopupProxy/Standard" />
 
+### Context menu
+
 <doc-example title="Context menu (right click / long tap)" file="QPopupProxy/ContextMenu" />
 
+### Breakpoint
+
 On the example below, click on the icon in the input.
 
 <doc-example title="Breakpoint @600px" file="QPopupProxy/Breakpoint" />

docs/src/pages/vue-components/pull-to-refresh.md

@@ -23,9 +23,10 @@ To refresh, pull down (with mouse or through finger touch) on the content below
 
 <doc-example title="Custom icon" file="QPullToRefresh/Icon" />
 
-### Tips
+::: tip TIPS
 * If using a QLayout, then it's recommended that you put QPullToRefresh as direct child of QPage and wrap your page content with it.
 * If you change the parent of this component, don't forget to call `updateScrollTarget()` on the QPullToRefresh Vue reference.
+:::
 
 ## QPullToRefresh API
 <doc-api file="QPullToRefresh" />

docs/src/pages/vue-components/radio.md

@@ -18,29 +18,44 @@ Please also refer to the [QOptionGroup](/vue-components/option-group) on other p
 <doc-installation components="QRadio" />
 
 ## Usage
+
+### Standard
+
 <doc-example title="Standard" file="QRadio/Standard" />
 
+### Dense
+
 <doc-example title="Dense" file="QRadio/Dense" />
 
+### Coloring
+
 In the second row in the example below, the property `keep-color` is being used to retain the passed in color when the radio button is not in a toggled state.
 
 <doc-example title="Coloring" file="QRadio/Coloring" />
 
+### Dark and disable
+
 <doc-example title="On a dark background" file="QRadio/OnDarkBackground" dark />
 
+<doc-example title="Disable" file="QRadio/Disable" />
+
+### Label on left-side
+
 <doc-example title="Label on left side" file="QRadio/LabelPosition" />
 
+### With QOptionGroup
+
 ::: tip
 You can also use [QOptionGroup](/vue-components/option-group), which simplifies the usage when you have groups of radios, like in example below.
 :::
 
 <doc-example title="Usage with QOptionGroup" file="QRadio/OptionGroup" />
 
-In the example below, we are rendering a `<label>` tag (notice `tag="label"`) so the QRadio will respond to clicks on QItems to change toggle state.
+### With QItem
 
-<doc-example title="In a list" file="QRadio/InaList" />
+In the example below, we are rendering a `<label>` tag (notice `tag="label"`) so the QRadio will respond to clicks on QItems to change toggle state.
 
-<doc-example title="Disable" file="QRadio/Disable" />
+<doc-example title="With QItem" file="QRadio/InaList" />
 
 ## QRadio API
 <doc-api file="QRadio" />