feat(circle): [WIP] ACircle component with Knob, Chart, Spinner and useTrigonometry.

docs/.vitepress/config.ts

@@ -62,6 +62,7 @@ export default defineConfig({
             { text: 'Card', link: '/guide/components/card' },
             { text: 'Checkbox', link: '/guide/components/checkbox' },
             { text: 'Chip', link: '/guide/components/chip' },
+            { text: 'Circle', link: '/guide/components/circle' },
             { text: 'Dialog', link: '/guide/components/dialog' },
             { text: 'Drawer', link: '/guide/components/drawer' },
             { text: 'Input', link: '/guide/components/input' },

docs/components/demos/circle/DemoCircleBasic.vue

@@ -0,0 +1,135 @@
+<script lang="ts" setup>
+import { ref } from 'vue'
+
+const arcValue = ref(10)
+const origin = ref(0)
+const distance = ref(100)
+
+const radius = 100
+const pad = 20
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="grid-row sm:grid-cols-3 place-items-stretch">
+      <AInput
+        v-model="arcValue"
+        type="number"
+        label="Arc"
+        hint="Value in %"
+      />
+      <AInput
+        v-model="origin"
+        type="number"
+        label="Origin"
+        hint="Value in %"
+      />
+      <AInput
+        v-model="distance"
+        type="number"
+        label="Distance"
+        hint="Value in %"
+      />
+    </div>
+
+    <div class="flex gap-6">
+      <ACircle
+        :value="{
+          value: arcValue,
+          origin,
+          distance,
+          startDistance: radius - distance,
+          endDistance: radius - distance,
+          class: 'stroke-primary stroke-2',
+          color: 'current',
+        }"
+        class="mx-auto"
+        svg-classes="w-300px h-300px"
+        ring-classes="stroke-1"
+      >
+        <template #default="{ arcs }">
+          <!-- 👉 Axis -->
+          <line
+            :x1="-radius - pad"
+            :x2="radius + pad"
+            class="stroke-dark dark:stroke-light stroke-0.1"
+          />
+          <line
+            :y1="radius + pad"
+            :y2="-radius - pad"
+            class="stroke-dark dark:stroke-light stroke-0.1"
+          />
+
+          <template
+            v-for="(arc, i) in arcs"
+            :key="i"
+          >
+            <!-- 👉 Handles -->
+            <circle
+              class="fill-primary"
+              :cx="arc.startX"
+              :cy="arc.startY"
+              r="5"
+            />
+            <circle
+              class="fill-primary"
+              :cx="arc.endX"
+              :cy="arc.endY"
+              r="5"
+            />
+
+            <!-- 👉 Sides -->
+            <line
+              :x2="arc.startX"
+              :y2="arc.startY"
+              :class="`stroke-${arc.color} stroke-1`"
+            />
+            <line
+              :x2="arc.endX"
+              :y2="arc.endY"
+              :class="`stroke-${arc.color} stroke-1`"
+            />
+
+            <!-- 👉 Dashed lines -->
+            <line
+              :x1="arc.endX"
+              :x2="arc.endX"
+              :y2="arc.endY"
+              :class="`stroke-${arc.color} stroke-0.5`"
+              stroke-dasharray="4,4"
+            />
+            <line
+              :y1="arc.endY"
+              :x2="arc.endX"
+              :y2="arc.endY"
+              :class="`stroke-${arc.color} stroke-0.5`"
+              stroke-dasharray="4,4"
+            />
+
+            <!-- 👉 X and Y values -->
+            <text
+              :x="arc.endX"
+              :y="arc.endY > 0 ? -12 : 14"
+              fill="currentColor"
+              class="text-xs"
+              dominant-baseline="middle"
+              text-anchor="middle"
+            >
+              {{ Math.round(arc.endX) }}
+            </text>
+            <text
+              :x="arc.endX > 0 ? -10 : 10"
+              :y="arc.endY"
+              fill="currentColor"
+              class="text-xs"
+              dominant-baseline="middle"
+              :text-anchor="arc.endX > 0 ? 'end' : 'start'"
+            >
+              {{ Math.round(-arc.endY) }}
+            </text>
+          </template>
+        </template>
+      </ACircle>
+    </div>
+  </div>
+</template>

docs/components/demos/circle/DemoCircleChart.vue

@@ -0,0 +1,83 @@
+<script lang="ts" setup>
+import { computed, ref } from 'vue'
+
+const isPercentages = ref(true)
+
+const val1 = ref(20)
+const val2 = ref(40)
+const val3 = ref(10)
+const values = computed(() => [
+  { value: val1.value, class: 'stroke-primary', color: 'primary', startDistance: 20, endDistance: 10 },
+  { value: val2.value, class: 'stroke-danger', color: 'danger', startDistance: 70, endDistance: 10 },
+  { value: val3.value, class: 'stroke-success', color: 'success', startDistance: 20, endDistance: 10 },
+])
+const slices = computed(() => [
+  { value: val1.value, class: 'stroke-primary stroke-full' },
+  { value: val2.value, class: 'stroke-danger stroke-full' },
+  { value: val3.value, class: 'stroke-success stroke-20' },
+])
+</script>
+
+<template>
+  <div class="flex flex-col gap-6">
+    <div class="grid-row sm:grid-cols-3 place-items-stretch">
+      <AInput
+        v-model="val1"
+        type="number"
+      />
+      <AInput
+        v-model="val2"
+        type="number"
+      />
+      <AInput
+        v-model="val3"
+        type="number"
+      />
+      <ACheckbox v-model="isPercentages">
+        It's percentages
+      </ACheckbox>
+    </div>
+
+    <div class="flex gap-6">
+      <ACircle
+        :value="values"
+        :is-percentages="isPercentages"
+        svg-classes="w-100px h-100px"
+      />
+
+      <ACircle
+        :value="values"
+        :is-percentages="isPercentages"
+        class="text-8xl"
+        rounded
+      >
+        <template #default="{ arcs }">
+          <circle
+            v-for="(dot, i) in arcs"
+            :key="i"
+            :class="`fill-${dot.color} stroke-white`"
+            :cx="dot.startX"
+            :cy="dot.startY"
+            r="8"
+          />
+          <circle
+            v-for="(dot, i) in arcs"
+            :key="i"
+            :class="`fill-${dot.color} stroke-black`"
+            :cx="dot.endX"
+            :cy="dot.endY"
+            r="4"
+          />
+        </template>
+      </ACircle>
+
+      <ACircle
+        :value="slices"
+        :is-percentages="isPercentages"
+        class="text-8xl"
+        ring-classes="hidden"
+        type="pie"
+      />
+    </div>
+  </div>
+</template>

docs/components/demos/circle/DemoCircleKnob.vue

@@ -0,0 +1,159 @@
+<script lang="ts" setup>
+import { TransitionPresets, useMouseInElement, useMousePressed, useTransition, useWindowScroll } from '@vueuse/core'
+import { rand } from '@vueuse/shared'
+import { computed, onMounted, ref, watch } from 'vue'
+
+const colors = ['primary', 'info', 'success', 'warning', 'danger']
+
+const baseNumber = ref(35)
+
+const number = useTransition(baseNumber, {
+  duration: 1500,
+  transition: TransitionPresets.easeOutExpo,
+})
+
+const toggle = () => {
+  baseNumber.value = rand(0, 100)
+}
+
+const target = ref(null)
+const knob = ref(25)
+const { elementX, elementY, elementWidth, elementHeight, isOutside } = useMouseInElement(target)
+const { pressed } = useMousePressed({ target })
+
+// Calculate the angle
+const angle = computed(() => {
+  const theta = (Math.atan2(elementY.value - (elementHeight.value / 2), elementX.value - (elementWidth.value / 2)) * 180 / Math.PI + 450) % 360
+
+  return (theta / 3.6) % 100
+})
+watch(angle, () => {
+  if (pressed.value)
+    knob.value = angle.value
+})
+
+// scroll
+const { y } = useWindowScroll()
+
+const scroll = ref(1)
+const wHeight = ref(0)
+onMounted(() => {
+  wHeight.value = document.body.scrollHeight - window.innerHeight
+})
+watch(y, () => {
+  scroll.value = y.value / wHeight.value * 100
+})
+
+const scrollToTop = () => {
+  window.scrollTo({ top: 0, behavior: 'smooth' })
+}
+
+const onClick = () => {
+  console.log('click')
+}
+</script>
+
+<template>
+  <ACircle
+    color="danger"
+    class="text-xl"
+    :value="[{ class: 'fill-$a-layer-color animate-ping-dot', r: 40 },
+             { class: 'fill-$a-layer-color animate-ping', r: 60 },
+    ]"
+    svg-classes="rounded-full"
+    ring-classes="hidden"
+  />
+
+  <ACircle
+    :value="scroll"
+    :color="scroll >= 100 ? 'success' : null"
+    class="text-6xl fixed z-999 bottom-4 right-4 cursor-pointer hover:opacity-80 transition"
+    svg-classes="transition"
+    ring-classes="hover:bg-primary"
+    @click="scrollToTop()"
+  >
+    <template #center>
+      <div
+        v-if="scroll < 100"
+        class="text-xs"
+      >
+        {{ Math.round(y) }}
+      </div>
+      <i
+        v-else
+        class="i-bx-bxs-arrow-from-bottom text-success text-2xl"
+      />
+    </template>
+  </ACircle>
+
+  <div class="flex justify-between">
+    <ABtn
+      class="animate-shake-x"
+      @click="toggle()"
+    >
+      Transition
+    </ABtn>
+
+    <ACircle
+      :value="number"
+      color="warning"
+      class="text-6xl"
+    />
+
+    <ACircle
+      ref="target"
+      :value="number"
+      color="primary"
+      class="text-6xl"
+    >
+      <template #center>
+        <div class="text-sm">
+          {{ Math.round(number) }}
+        </div>
+      </template>
+    </ACircle>
+
+    <ACircle
+      ref="target"
+      :value="{ value: knob, class: 'stroke-15 stroke-cap-round' }"
+      color="danger"
+      class="text-8xl cursor-pointer"
+      ring-classes="stroke-15"
+    >
+      <template #default="{ arcs, total }">
+        <circle
+          class="fill-danger"
+          :cx="arcs[0].endX"
+          :cy="arcs[0].endY"
+          r="20"
+          @click="onClick"
+        />
+        <text
+          x="0"
+          y="0"
+          fill="red"
+          class="text-5xl text-center"
+          dominant-baseline="middle"
+          text-anchor="middle"
+        >
+          {{ Math.round(total) }}
+        </text>
+      </template>
+    </ACircle>
+
+    <ACircle
+      ref="target"
+      :value="[{ value: knob, class: 'stroke-info' }]"
+      color="info"
+      class="text-8xl bg-info bg-opacity-30 rounded-full cursor-pointer"
+      ring-classes="stroke-white opacity-50"
+    >
+      <template #center>
+        <div class="text-base flex justify-between items-center w-10 text-info font-bold">
+          <i class="i-bx-bxs-volume-full" />
+          {{ Math.round(knob) }}
+        </div>
+      </template>
+    </ACircle>
+  </div>
+</template>