feat(docs): add "copy to clipboard" to styles section

docs/src/components/DocTable.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <q-table
+      :rows="rows"
+      :columns="validatedColumns"
+      row-key="name"
+      flat
+      bordered
+      hide-bottom
+      :rows-per-page-options="[0]"
+      style="width: fit-content;"
+    >
+      <template v-slot:body-cell-name="props">
+        <q-td :props="props">
+          <q-badge
+            color="brand-primary cursor-pointer"
+            outline
+            :label="props.row.name"
+            @click="copy(props.row.name)"
+            class="text-subtitle1"
+          />
+        </q-td>
+      </template>
+      <template v-slot:body-cell-description="props">
+        <q-td :props="props" class="text-body1" style="font-size: 1rem;">
+          <span v-html="formatDescription(props.row.description)"></span>
+        </q-td>
+      </template>
+    </q-table>
+  </div>
+</template>
+
+<script>
+import { copyToClipboard } from 'quasar'
+
+export default {
+  props: {
+    rows: {
+      type: Array,
+      required: true
+    },
+    additionalColumns: {
+      type: Array,
+      required: false,
+      default: () => []
+    }
+  },
+  data () {
+    return {
+      requiredColumns: [
+        { name: 'name', label: 'Class Name', align: 'left', field: row => row.name, headerStyle: 'font-weight: bold; font-size: 1rem;' },
+        { name: 'description', label: 'Description', align: 'left', field: row => row.description, headerStyle: 'font-weight: bold; font-size: 1rem;' }
+      ]
+    }
+  },
+  computed: {
+    validatedColumns () {
+      return [ ...this.requiredColumns, ...this.additionalColumns ]
+    }
+  },
+  methods: {
+    copy (text) {
+      copyToClipboard(text)
+        .then(() => {
+          this.$q.notify('Copied to clipboard')
+        })
+        .catch(() => {
+          this.$q.notify({
+            color: 'negative',
+            message: 'Failed to copy to clipboard'
+          })
+        })
+    },
+    formatDescription (description) {
+      return description.replace(/`([^`]+)`/g, '<code class="doc-token">$1</code>')
+    }
+  }
+}
+</script>

docs/src/pages/style/shadows/ShadowClasses.vue

@@ -0,0 +1,28 @@
+<template>
+<div>
+    <DocTable :rows="classes" />
+  </div>
+</template>
+
+<script>
+import DocTable from 'src/components/DocTable.vue'
+
+export default {
+  components: {
+    DocTable
+  },
+  data () {
+    return {
+      classes: [
+        { name: 'no-shadow', description: 'Remove any shadow' },
+        { name: 'inset-shadow', description: 'Set an inset shadow on top' },
+        { name: 'inset-shadow-down', description: 'Set an inset shadow on bottom' },
+        { name: 'shadow-1', description: 'Set a depth of 1' },
+        { name: 'shadow-2', description: 'Set a depth of 2' },
+        { name: 'shadow-N', description: 'Where `N` is an integer from 1 to 24.' },
+        { name: 'shadow-transition', description: 'Apply the default CSS transition effect on the shadow' }
+      ]
+    }
+  }
+}
+</script>

docs/src/pages/style/shadows/ShadowDepthClasses.vue

@@ -0,0 +1,24 @@
+<template>
+<div>
+    <DocTable :rows="classes" />
+  </div>
+</template>
+
+<script>
+import DocTable from 'src/components/DocTable.vue'
+
+export default {
+  components: {
+    DocTable
+  },
+  data () {
+    return {
+      classes: [
+        { name: 'shadow-up-1', description: 'Set a depth of 1' },
+        { name: 'shadow-up-2', description: 'Set a depth of 2' },
+        { name: 'shadow-up-N', description: 'Where `N` is an integer from 1 to 24.' }
+      ]
+    }
+  }
+}
+</script>

docs/src/pages/style/shadows.md → docs/src/pages/style/shadows/shadows.md

@@ -9,25 +9,21 @@ The shadows are in accordance to Material Design specifications (24 levels of de
 
 ## Usage
 
-| CSS Class Name | Description |
-| --- | --- |
-| `no-shadow` | Remove any shadow |
-| `inset-shadow` | Set an inset shadow on top |
-| `inset-shadow-down` | Set an inset shadow on bottom |
-| `shadow-1` | Set a depth of 1 |
-| `shadow-2` | Set a depth of 2 |
-| `shadow-N` | Where `N` is an integer from 1 to 24. |
-| `shadow-transition` | Apply the default CSS transition effect on the shadow |
+<script doc>
+import ShadowClasses from './ShadowClasses.vue'
+</script>
+
+<ShadowClasses />
 
 <DocExample title="Standard shadows" file="Standard" scrollable />
 
 The shadows above point towards the bottom of the element. If you want them to point towards the top of the element, add `up` before the number:
 
-| CSS Class Name | Description |
-| --- | --- |
-| `shadow-up-1` | Set a depth of 1 |
-| `shadow-up-2` | Set a depth of 2 |
-| `shadow-up-N` | Where `N` is an integer from 1 to 24. |
+<script doc>
+import ShadowDepthClasses from './ShadowDepthClasses.vue'
+</script>
+
+<ShadowDepthClasses />
 
 <DocExample title="Shadows pointing up" file="PointingUp" scrollable />
 

docs/src/pages/style/typography/TypographyClasses.vue

@@ -0,0 +1,32 @@
+<template>
+ <div>
+    <DocTable :rows="classes" />
+  </div>
+</template>
+
+<script>
+import DocTable from 'src/components/DocTable.vue'
+
+export default {
+  components: {
+    DocTable
+  },
+  data () {
+    return {
+      classes: [
+        { name: 'text-right', description: 'Align text to the right' },
+        { name: 'text-left', description: 'Align text to the left' },
+        { name: 'text-center', description: 'Align text to the center' },
+        { name: 'text-justify', description: 'Text will be justified' },
+        { name: 'text-bold', description: 'Text will be in bold' },
+        { name: 'text-italic', description: 'Text will be in italic' },
+        { name: 'text-no-wrap', description: 'Non wrappable text (applies `white-space: nowrap`)' },
+        { name: 'text-strike', description: 'pplies `text-decoration: line-through` ' },
+        { name: 'text-uppercase', description: 'Transform text to uppercase' },
+        { name: 'text-lowercase', description: 'Transform text to lowercase' },
+        { name: 'text-capitalize', description: 'Capitalize first letter of the text' }
+      ]
+    }
+  }
+}
+</script>

docs/src/pages/style/typography/TypographyHeadings.vue

@@ -6,7 +6,12 @@
       class="row items-center q-mb-lg"
     >
       <div class="col-sm-3 col-12">
-        <q-badge color="brand-primary" outline :label="heading.cls" />
+        <q-badge
+          color="brand-primary cursor-pointer"
+          outline
+          :label="heading.cls"
+          @click="copyCls(heading.cls)"
+        />
         <q-badge
           v-if="heading.equivalent"
           class="q-ml-sm"
@@ -22,19 +27,41 @@
   </div>
 </template>
 
-<script setup>
-const headings = [
-  { label: 'Headline 1', cls: 'text-h1', equivalent: 'h1' },
-  { label: 'Headline 2', cls: 'text-h2', equivalent: 'h2' },
-  { label: 'Headline 3', cls: 'text-h3', equivalent: 'h3' },
-  { label: 'Headline 4', cls: 'text-h4', equivalent: 'h4' },
-  { label: 'Headline 5', cls: 'text-h5', equivalent: 'h5' },
-  { label: 'Headline 6', cls: 'text-h6', equivalent: 'h6' },
-  { label: 'Subtitle 1', cls: 'text-subtitle1' },
-  { label: 'Subtitle 2', cls: 'text-subtitle2' },
-  { label: 'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.', cls: 'text-body1' },
-  { label: 'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.', cls: 'text-body2' },
-  { label: 'Caption text', cls: 'text-caption' },
-  { label: 'Overline', cls: 'text-overline' }
-]
+<script>
+import { copyToClipboard } from 'quasar'
+
+export default {
+  data () {
+    return {
+      headings: [
+        { label: 'Headline 1', cls: 'text-h1', equivalent: 'h1' },
+        { label: 'Headline 2', cls: 'text-h2', equivalent: 'h2' },
+        { label: 'Headline 3', cls: 'text-h3', equivalent: 'h3' },
+        { label: 'Headline 4', cls: 'text-h4', equivalent: 'h4' },
+        { label: 'Headline 5', cls: 'text-h5', equivalent: 'h5' },
+        { label: 'Headline 6', cls: 'text-h6', equivalent: 'h6' },
+        { label: 'Subtitle 1', cls: 'text-subtitle1' },
+        { label: 'Subtitle 2', cls: 'text-subtitle2' },
+        { label: 'Body 1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quos blanditiis tenetur unde suscipit, quam beatae rerum inventore consectetur, neque doloribus, cupiditate numquam dignissimos laborum fugiat deleniti? Eum quasi quidem quibusdam.', cls: 'text-body1' },
+        { label: 'Body 2. Lorem ipsum dolor sit amet consectetur adipisicing elit. Cupiditate aliquid ad quas sunt voluptatum officia dolorum cumque, possimus nihil molestias sapiente necessitatibus dolor saepe inventore, soluta id accusantium voluptas beatae.', cls: 'text-body2' },
+        { label: 'Caption text', cls: 'text-caption' },
+        { label: 'Overline', cls: 'text-overline' }
+      ]
+    }
+  },
+  methods: {
+    copyCls (cls) {
+      copyToClipboard(cls)
+        .then(() => {
+          this.$q.notify('Copied to clipboard')
+        })
+        .catch(() => {
+          this.$q.notify({
+            color: 'negative',
+            message: 'Failed to copy to clipboard'
+          })
+        })
+    }
+  }
+}
 </script>

docs/src/pages/style/typography/TypographyWeights.vue

@@ -6,7 +6,12 @@
       class="row items-center q-mb-md"
     >
       <div class="col-sm-3 col-12">
-        <q-badge color="brand-primary" outline :label="`text-weight-${ weight }`" />
+        <q-badge
+          color="brand-primary cursor-pointer"
+          outline
+          :label="`text-weight-${ weight }`"
+          @click="copyWeigh(`text-weight-${ weight }`)"
+        />
       </div>
       <div class="col-sm-9 col-12 q-mb-none q-pl-md q-pt-sm q-pb-sm">
         <div :class="`text-weight-${weight}`">
@@ -17,6 +22,28 @@
   </div>
 </template>
 
-<script setup>
-const weights = [ 'thin', 'light', 'regular', 'medium', 'bold', 'bolder' ]
+<script>
+import { copyToClipboard } from 'quasar'
+
+export default {
+  data () {
+    return {
+      weights: [ 'thin', 'light', 'regular', 'medium', 'bold', 'bolder' ]
+    }
+  },
+  methods: {
+    copyWeigh (weight) {
+      copyToClipboard(weight)
+        .then(() => {
+          this.$q.notify('Copied to clipboard')
+        })
+        .catch(() => {
+          this.$q.notify({
+            color: 'negative',
+            message: 'Failed to copy to clipboard'
+          })
+        })
+    }
+  }
+}
 </script>

docs/src/pages/style/typography/typography.md

@@ -26,19 +26,12 @@ import TypographyWeights from './TypographyWeights.vue'
 <TypographyWeights />
 
 ## CSS Helper Classes
-| Class Name | Description |
-| --- | --- |
-| `text-right` | Align text to the right |
-| `text-left` | Align text to the left |
-| `text-center` | Align text to the center |
-| `text-justify` | Text will be justified |
-| `text-bold` | Text will be in bold |
-| `text-italic` | Text will be in italic |
-| `text-no-wrap` | Non wrappable text (applies `white-space: nowrap`) |
-| `text-strike` | Applies `text-decoration: line-through` |
-| `text-uppercase` | Transform text to uppercase |
-| `text-lowercase` | Transform text to lowercase |
-| `text-capitalize` | Capitalize first letter of the text |
+
+<script doc>
+import TypographyClasses from './TypographyClasses.vue'
+</script>
+
+<TypographyClasses />
 
 ## Default Font
 The default webfont embedded is [Roboto](https://fonts.google.com/specimen/Roboto). **But it is not required**. You can use whatever font(s) you like.