VueUiTiremarks create component

README.md

@@ -40,6 +40,7 @@ Available components:
 - [VueUiThermometer](https://vue-data-ui.graphieros.com/docs#vue-ui-thermometer)
 - [VueUiRings](https://vue-data-ui.graphieros.com/docs#vue-ui-rings)
 - [VueUiWheel](https://vue-data-ui.graphieros.com/docs#vue-ui-wheel)
+- [VueUiTiremarks](https://vue-data-ui.graphieros.com/docs#vue-ui-tiremarks)
 
 
 ## Mini charts

package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.30",
+  "version": "1.9.31",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [
@@ -32,7 +32,8 @@
     "relationship circle",
     "thermometer",
     "rings",
-    "wheel"
+    "wheel",
+    "tiremarks"
   ],
   "author": "Alec Lloyd Probert",
   "repository": {

src/App.vue

@@ -40,6 +40,7 @@ import StackTest from "./components/vue-ui-sparkstackbar.vue";
 import HistoTest from "./components/vue-ui-sparkhistogram.vue";
 import RingsTest from "./components/vue-ui-rings.vue";
 import WheelTest from "./components/vue-ui-wheel.vue";
+import TireTest from "./components/vue-ui-tiremarks.vue";
 
 const dataset = ref([
   {
@@ -3522,6 +3523,10 @@ const skeletonOptions = ref([
 
 const skeletonChoice = ref('wheel')
 
+const tiremarksDataset = ref({
+  percentage: 75
+})
+
 </script>
 
 <template>
@@ -3535,7 +3540,24 @@ const skeletonChoice = ref('wheel')
         <h4 style="color: #5f8bee">Manual testing arena</h4>
       </div>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)" open>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_tiremarks)" open>
+        <template #title>VueUiTiremarks</template>
+        <template #dev>
+          <TireTest
+            :dataset="tiremarksDataset"
+          />
+        </template>
+        <template #prod>
+          <VueUiTiremarks
+            :dataset="tiremarksDataset"
+          />
+        </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_tiremarks }}
+        </template>
+      </Box>
+
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
         <template #general>
           <select v-model="skeletonChoice">
             <option v-for="(opt) in skeletonOptions">{{ opt }}</option>