VueUiSkeleton add rings & wheel types

Author: graphieros

package-lock.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-data-ui",
   "private": false,
-  "version": "1.9.29",
+  "version": "1.9.30",
   "type": "module",
   "description": "A user-empowering data visualization Vue components library",
   "keywords": [

package.json

@@ -3500,6 +3500,28 @@ function copyConfig(c) {
 
 const updateStep = ref(0);
 
+const skeletonOptions = ref([
+  'line',
+  'sparkline',
+  'bar',
+  'donut',
+  'onion',
+  'gauge',
+  'quadrant',
+  'radar',
+  'waffle',
+  'table',
+  'rating',
+  'verticalBar',
+  'heatmap',
+  'candlesticks',
+  'pyramid',
+  'rings',
+  'wheel'
+]);
+
+const skeletonChoice = ref('wheel')
+
 </script>
 
 <template>
@@ -3513,7 +3535,29 @@ const updateStep = ref(0);
         <h4 style="color: #5f8bee">Manual testing arena</h4>
       </div>
 
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)" open>
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)" open>
+        <template #general>
+          <select v-model="skeletonChoice">
+            <option v-for="(opt) in skeletonOptions">{{ opt }}</option>
+          </select>
+        </template>
+        <template #title>VueUiSkeleton</template>
+        <template #dev>
+          <SkeletonTest
+            :config="{ type: skeletonChoice, style: { rating: { useSmiley: true, filled: true } } }"
+          />
+        </template>
+        <template #prod>
+          <VueUiSkeleton
+            :config="{ type: skeletonChoice, style: { rating: { useSmiley: true, filled: true } } }"
+          />
+        </template>
+        <template #config>
+          {{ PROD_CONFIG.vue_ui_skeleton }}
+        </template>
+      </Box>
+
+      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_wheel)">
         <template #title>VueUiWheel</template>
         <template #dev>
           <WheelTest
@@ -3857,23 +3901,6 @@ const updateStep = ref(0);
           {{ PROD_CONFIG.vue_ui_thermometer }}
         </template>
       </Box>
-      
-      <Box @copy="copyConfig(PROD_CONFIG.vue_ui_skeleton)">
-        <template #title>VueUiSkeleton</template>
-        <template #dev>
-          <SkeletonTest
-            :config="{ type: 'rating', style: { rating: { useSmiley: true, filled: true } } }"
-          />
-        </template>
-        <template #prod>
-          <VueUiSkeleton
-            :config="{ type: 'rating', style: { rating: { useSmiley: true, filled: true } } }"
-          />
-        </template>
-        <template #config>
-          {{ PROD_CONFIG.vue_ui_skeleton }}
-        </template>
-      </Box>
 
       <Box @copy="copyConfig(PROD_CONFIG.vue_ui_smiley)">
         <template #title>VueUiSmiley</template>

src/App.vue

@@ -41,6 +41,9 @@ function copy() {
                     <slot name="config"></slot>
                 </code>
             </div>
+            <div style="padding-left:24px">
+                <slot name="general"/>
+            </div>
             <div style="display: flex;flex-direction:row; gap:12px; align-items:center;justify-content:center;background:#2A2A2A;padding:12px">
                 <div style="width:100%;padding:12px;">
                     <div style="width:100%;text-align:center;color: #ff6400;margin-bottom:12px">DEV</div>

src/Box.vue

@@ -258,6 +258,29 @@ const sparkline = ref(
     ]
 )
 
+function calcTickStart(angle, distance = 1) {
+    const angleStart = 29.85;
+    return {
+        x: 200 + 160 * Math.cos(angleStart + angle * Math.PI / 180) * distance,
+        y: 200 + 160 * Math.sin(angleStart + angle * Math.PI / 180) * distance
+    }
+}
+
+const ticks = computed(() => {
+    const tickArray = [];
+    const tickAmount = 100;
+    for(let i = 0; i < tickAmount; i += 1) {
+        tickArray.push({
+            x1: calcTickStart((360 / tickAmount) * i).x,
+            y1: calcTickStart((360 / tickAmount) * i).y,
+            x2: calcTickStart((360 / tickAmount) * i, 0.9).x,
+            y2: calcTickStart((360 / tickAmount) * i, 0.9).y,
+            color: skeletonConfig.value.style.wheel.color
+        })
+    }
+    return tickArray;
+})
+
 </script>
 
 <template>
@@ -271,6 +294,63 @@ const sparkline = ref(
                 </g>
             </svg>
         </template>
+        <!-- TYPE RINGS -->
+        <template v-if="type === 'rings'">
+            <svg data-cy="skeleton-rings" width="100%" viewBox="0 0 400 400" :style="`background:${skeletonConfig.style.backgroundColor}`">
+                <circle
+                    :cx="200"
+                    :cy="200"
+                    :r="180"
+                    :fill="`${skeletonConfig.style.rings.color}${opacity[40]}`"
+                />
+                <circle
+                    :cx="200"
+                    :cy="250"
+                    :r="130"
+                    :fill="`${skeletonConfig.style.rings.color}${opacity[60]}`"
+                />
+                <circle
+                    :cx="200"
+                    :cy="290"
+                    :r="90"
+                    :fill="`${skeletonConfig.style.rings.color}${opacity[100]}`"
+                />
+            </svg>
+        </template>
+
+        <!-- TYPE WHEEL -->
+        <template v-if="type === 'wheel'">
+            <svg data-cy="skeleton-wheel" width="100%" viewBox="0 0 400 400" :style="`background:${skeletonConfig.style.backgroundColor}`">
+                <line 
+                v-for="(tick, i) in ticks"
+                :x1="tick.x1"
+                :x2="tick.x2"
+                :y1="tick.y1"
+                :y2="tick.y2"
+                :stroke="i < 66 ? tick.color : `${tick.color}${opacity[50]}`"
+                :stroke-width="5"
+                stroke-linecap="round"
+            />
+            <circle
+                :cx="200"
+                :cy="200"
+                :r="130"
+                :stroke-width="3"
+                :stroke="`${skeletonConfig.style.wheel.color}${opacity[50]}`"
+                fill="none"
+            />
+            <rect 
+                :fill="`${skeletonConfig.style.wheel.color}${opacity[50]}`"
+                :rx="12"
+                :x="160"
+                :y="170"
+                :height="60"
+                :width="80"
+                stroke="none"
+            />
+            </svg>
+        </template>
+
         <!-- TYPE SPARKLINE -->
         <template v-if="type === 'sparkline'">
             <svg data-cy="skeleton-sparkline" width="100%" viewBox="0 0 150 32" :style="`background:${skeletonConfig.style.backgroundColor}`">

src/components/vue-ui-skeleton.vue

@@ -1474,6 +1474,12 @@
             },
             "pyramid": {
                 "color": "#e1e5e8"
+            },
+            "wheel": {
+                "color": "#e1e5e8"
+            },
+            "rings": {
+                "color": "#e1e5e8"
             }
         }
     },

src/default_configs.json

@@ -2839,7 +2839,7 @@ declare module 'vue-data-ui' {
     }>;
 
     export type VueUiSkeletonConfig = {
-        type?: "bar" | "chestnut" | "donut" | "gauge" | "line" | "onion" | "quadrant" | "radar" | "rating" | "table" | "verticalBar" | "waffle" | "heatmap" | "candlestick" | "pyramid";
+        type?: "bar" | "chestnut" | "donut" | "gauge" | "line" | "onion" | "quadrant" | "radar" | "rating" | "table" | "verticalBar" | "waffle" | "heatmap" | "candlestick" | "pyramid" | "wheel" | "rings";
         style?: {
             backgroundColor?: string;
             color?: string;
@@ -2942,6 +2942,15 @@ declare module 'vue-data-ui' {
                     strokeWidth?: number;
                 };
             };
+            pyramid?: {
+                color?: string;
+            };
+            wheel?: {
+                color?: string;
+            };
+            rings?: {
+                color?: string;
+            }
         };
     };