feat: label slot example for text-field and selection controls

fixes #600

src/data/components.json

@@ -549,7 +549,8 @@
       "switchesBoolean",
       "switchesArray",
       "switchesStates",
-      "switchesColors"
+      "switchesColors",
+      "labelSlot"
     ],
     "spec": false
   },
@@ -669,6 +670,7 @@
       "clearable",
       "iconEvents",
       "iconSlots",
+      "labelSlot",
       "characterCounter",
       "password",
       "validation",

src/examples/selection-controls/labelSlot.vue

@@ -0,0 +1,42 @@
+<template>
+  <v-container fluid>
+    <v-checkbox v-model="checkbox">
+      <div slot="label">
+        I agree that
+        <v-tooltip bottom>
+          <a slot="activator" @click.stop target="_blank" href="http://vuetifyjs.com">Vuetify</a>
+          Opens in new window
+        </v-tooltip>
+        is awesome
+      </div>
+    </v-checkbox>
+
+    <v-radio-group v-model="radios">
+      <div slot="label">Your favourite <strong>search engine</strong></div>
+      <v-radio value="Google">
+        <div slot="label">Of course it's <strong class="success--text">Google</strong></div>
+      </v-radio>
+      <v-radio value="Duckduckgo">
+        <div slot="label">Definitely <strong class="primary--text">Duckduckgo</strong></div>
+      </v-radio>
+    </v-radio-group>
+
+    <v-switch v-model="switchMe">
+      <template slot="label">
+        Turn on the progress: <v-progress-circular size="24" class="ml-2" :indeterminate="switchMe" :value="0"></v-progress-circular>
+      </template>
+    </v-switch>
+  </v-container>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+        checkbox: false,
+        radios: 'Duckduckgo',
+        switchMe: false
+      }
+    }
+  }
+</script>

src/examples/text-fields/labelSlot.vue

@@ -0,0 +1,11 @@
+<template>
+  <v-form>
+    <v-container>
+      <v-text-field>
+        <template slot="label">
+          What about <strong>icon</strong> here? <v-icon style="vertical-align: middle">find_in_page</v-icon>
+        </template>
+      </v-text-field>
+    </v-container>
+  </v-form>
+</template>

src/lang/en/components/SelectionControls.json

@@ -53,6 +53,10 @@
     "switchesColors": {
       "header": "Switches - Colors",
       "desc": "Switches can be colored by using any of the builtin colors and contextual names using the `color` prop."
+    },
+    "labelSlot": {
+      "header": "Label slot",
+      "desc": "Selection controls' labels can be defined in `label` slot - that will allow to use HTML content"
     }
   },
   "props": {

src/lang/en/components/TextFields.json

@@ -31,6 +31,10 @@
       "header": "Icon slots",
       "desc": "Instead of using prepend / append / append-outer icons you can use slots to extend input's functionality."
     },
+    "labelSlot": {
+      "header": "Label slot",
+      "desc": "Text field label can be defined in `label` slot - that will allow to use HTML content"
+    },
     "characterCounter": {
       "header": "Character counter",
       "desc": "Use a `counter` prop to inform a user of the character limit. The counter does not perform any validation by itself. You will need to pair it with either the internal validation system, or a 3rd party library. You can use it on regular, box or outline text fields."

src/lang/es-MX/components/SelectionControls.json

@@ -60,6 +60,10 @@
             "switchesColors": {
                 "header": "Switches - Colors",
                 "desc": "Puedes cambiar el color de los switches si usas cualquiera de los colores prefabricados y los nombres contextuales en la prop `color`."
+            },
+            "labelSlot": {
+              "header": "Label slot",
+              "desc": "Selection controls' labels can be defined in `label` slot - that will allow to use HTML content"
             }
         }
     ],
@@ -74,4 +78,4 @@
         "inputValue": "El valor referenciado en **v-model**",
         "value": "Configura el valor de la selección en el componente"
     }
-}
+}

src/lang/ko/components/SelectionControls.json

@@ -54,6 +54,10 @@
     "switchesColors": {
       "header": "스위치 - 색깔",
       "desc": "`color` prop를 이용하면 스위치를 어떠한 내장 색(builtin colors) 이나 contextual 이름에 대응 하는 색으로 만들 수 있습니다."
+    },
+    "labelSlot": {
+      "header": "Label slot",
+      "desc": "Selection controls' labels can be defined in `label` slot - that will allow to use HTML content"
     }
   },
   "props": {

src/lang/ru/components/SelectionControls.json

@@ -54,6 +54,10 @@
     "switchesColors": {
       "header": "Switches - Цвета",
       "desc": "Switches можно покрасить, используя любой из встроенных цветов и контекстных имён, используя свойство `color`."
+    },
+    "labelSlot": {
+      "header": "Label slot",
+      "desc": "Selection controls' labels can be defined in `label` slot - that will allow to use HTML content"
     }
   },
   "props": {

src/lang/zhHans/components/SelectionControls.json

@@ -54,6 +54,10 @@
     "switchesColors": {
       "header": "开关 - 颜色",
       "desc": "开关也可以通过 `color` 属性使用内置的颜色来设置色彩。"
+    },
+    "labelSlot": {
+      "header": "Label slot",
+      "desc": "Selection controls' labels can be defined in `label` slot - that will allow to use HTML content"
     }
   },
   "props": {