Dev environment - Add testing arena for VueUiDigits

Author: graphieros

TestingArena/ArenaVueUiDigits.vue

@@ -0,0 +1,79 @@
+<script setup>
+import { ref, computed } from "vue";
+import LocalVueUiDigits from "../src/components/vue-ui-digits.vue";
+import LocalVueDataUi from '../src/components/vue-data-ui.vue';
+import Box from "./Box.vue";
+import convertArrayToObject from "./convertModel";
+import { VueUiDigits } from "vue-data-ui";
+import { VueUiDigits as VueUiDigitsTreeshaken } from "vue-data-ui/vue-ui-digits";
+import ConfigKnobs from "./ConfigKnobs.vue";
+import { useConfigurationControls } from "./createConfigModel";
+import { useConfig } from "../src/useConfig"
+
+const { vue_ui_digits: DEFAULT_CONFIG } = useConfig();
+
+const {
+    RANGE,
+    TEXT,
+    COLOR,
+    createModel
+} = useConfigurationControls(DEFAULT_CONFIG);
+
+const dataset = ref(0.123456789);
+
+const model = createModel([
+    TEXT('height', { def: '100%' }),
+    TEXT('width', { def: null }),
+    COLOR('backgroundColor', { def: '#FFFFFF '}),
+    COLOR('digits.color', { def: '#1A1A1A' }),
+    COLOR('digits.skeletonColor', { def: '#E1E5E8' }),
+    RANGE('digits.thickness', { def: 1, step: 0.1, min: 0.1, max: 3 })
+]);
+
+const config = computed(() => {
+    const c = convertArrayToObject(model.value);
+    return {
+        ...c
+    }
+})
+
+</script>
+
+<template>
+    <Box comp="VueUiDigits" :dataset="dataset" :config="config">
+        <template #title>VueUiDigits</template>
+
+        <template #responsive>
+            <div style="width: 300px; height: 80px; resize: both; overflow: auto; background: white">
+                <LocalVueUiDigits :dataset="dataset" :config="{
+                    width: '100%',
+                    height: '100%'
+                }"/>
+            </div>
+        </template>
+        
+        <template #local>
+            <LocalVueUiDigits :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #VDUI-local>
+            <LocalVueDataUi component="VueUiDigits" :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #build>
+            <VueUiDigits :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #build-treesh>
+            <VueUiDigitsTreeshaken :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #VDUI-build>
+            <VueDataUi component="VueUiDigits" :dataset="dataset" :config="config"/>
+        </template>
+
+        <template #knobs>
+            <ConfigKnobs :model="model" @change="step += 1"/>
+        </template>
+    </Box>
+</template>

manual-testing/src/App.vue

@@ -66,7 +66,8 @@ const components = [
   { name: 'ArenaVueUiXy', icon: 'chartLine'}, 
   { name: 'ArenaVueUiXyCanvas', icon: 'chartLine'}, 
   { name: 'ArenaVueUiAnnotator', icon: 'annotator'},
-  { name: 'ArenaVueUiCursor', icon: 'cursor'}
+  { name: 'ArenaVueUiCursor', icon: 'cursor'},
+  { name: 'ArenaVueUiDigits', icon: 'digit8'},
 ].map(componentItem => ({
   path: `/${componentItem.name}`,
   name: componentItem.name.replace('Arena', ''),

manual-testing/src/router/index.ts

@@ -61,7 +61,8 @@ const components = [
   'ArenaVueUiChord', 
   'ArenaVueUiDashboard',
   'ArenaVueUiAnnotator',
-  'ArenaVueUiCursor'
+  'ArenaVueUiCursor',
+  'ArenaVueUiDigits'
 ].map(c => ({
   path: `/${c}`,
   name: c,