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

docs/src/components/DocTable.vue

@@ -0,0 +1,76 @@
+<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 setup>
+import { ref, computed } from 'vue'
+import { copyToClipboard, useQuasar } from 'quasar'
+
+const props = defineProps({
+  rows: {
+    type: Array,
+    required: true
+  },
+  additionalColumns: {
+    type: Array,
+    required: false,
+    default: () => []
+  }
+})
+
+const $q = useQuasar()
+
+const requiredColumns = ref([
+  { 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;' }
+])
+
+const validatedColumns = computed(() => {
+  return [ ...requiredColumns.value, ...props.additionalColumns ]
+})
+
+const copy = (text) => {
+  copyToClipboard(text)
+    .then(() => {
+      $q.notify('Copied to clipboard')
+    })
+    .catch(() => {
+      $q.notify({
+        color: 'negative',
+        message: 'Failed to copy to clipboard'
+      })
+    })
+}
+
+const formatDescription = (description) => {
+  return description.replace(/`([^`]+)`/g, '<code class="doc-token">$1</code>')
+}
+</script>

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

@@ -0,0 +1,20 @@
+<template>
+  <div>
+    <DocTable :rows="classes" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DocTable from 'src/components/DocTable.vue'
+
+const classes = ref([
+  { 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,16 @@
+<template>
+  <div>
+    <DocTable :rows="classes" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DocTable from 'src/components/DocTable.vue'
+
+const classes = ref([
+  { 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,24 @@
+<template>
+  <div>
+    <DocTable :rows="classes" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import DocTable from 'src/components/DocTable.vue'
+
+const classes = ref([
+  { 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: 'Applies `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"
@@ -23,7 +28,11 @@
 </template>
 
 <script setup>
-const headings = [
+import { ref } from 'vue'
+import { copyToClipboard, useQuasar } from 'quasar'
+
+const $q = useQuasar()
+const headings = ref([
   { label: 'Headline 1', cls: 'text-h1', equivalent: 'h1' },
   { label: 'Headline 2', cls: 'text-h2', equivalent: 'h2' },
   { label: 'Headline 3', cls: 'text-h3', equivalent: 'h3' },
@@ -36,5 +45,18 @@ const headings = [
   { 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' }
-]
+])
+
+const copyCls = (cls) => {
+  copyToClipboard(cls)
+    .then(() => {
+      $q.notify('Copied to clipboard')
+    })
+    .catch(() => {
+      $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}`">
@@ -18,5 +23,22 @@
 </template>
 
 <script setup>
-const weights = [ 'thin', 'light', 'regular', 'medium', 'bold', 'bolder' ]
+import { ref } from 'vue'
+import { copyToClipboard, useQuasar } from 'quasar'
+
+const $q = useQuasar()
+const weights = ref([ 'thin', 'light', 'regular', 'medium', 'bold', 'bolder' ])
+
+const copyWeigh = (weight) => {
+  copyToClipboard(weight)
+    .then(() => {
+      $q.notify('Copied to clipboard')
+    })
+    .catch(() => {
+      $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.