feat(avatar): border style

CyanSalt · Apr 9, 2024 · a4e593e · a4e593e
1 parent b4d6f34
commit a4e593e
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 2 deletions.
diff --git a/docs/components/avatar.md b/docs/components/avatar.md
@@ -109,7 +109,47 @@ const name = ref('Cameron')
 
   </template>
 
-  Border color of the avatar.
+  Color of the avatar border.
+
+  </RStyle>
+
+  <RStyle name="border-width">
+
+  <template #values>
+
+  `<length>`
+
+  </template>
+
+  <template #default-value>
+
+  `1px`
+
+  </template>
+
+  Width of the avatar border.
+
+  </RStyle>
+
+  <RStyle name="border-dash">
+
+  <template #values>
+
+  `<length> +` or `none`
+
+  </template>
+
+  <template #default-value>
+
+  `none`
+
+  </template>
+
+  List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the avatar border.
+
+  An odd number of values will be repeated to yield an even number of values. Thus, `8` is equivalent to `8 8`.
+
+  See [`stroke-dasharray`](https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/stroke-dasharray).
 
   </RStyle>
 

diff --git a/docs/components/card.md b/docs/components/card.md
@@ -256,7 +256,7 @@ import { RCard, RSpace } from 'roughness'
 
   </template>
 
-  List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the button border.
+  List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the card border.
 
   An odd number of values will be repeated to yield an even number of values. Thus, `8` is equivalent to `8 8`.
 

diff --git a/src/avatar/index.vue b/src/avatar/index.vue
@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import '../common/style.scss'
 import type { RoughSVG } from 'roughjs/bin/svg'
+import { getLengthProperty, getLengthPropertyAsArray } from '../common/property'
 import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
 import { getSVGSize } from '../graphics/utils'
@@ -48,6 +49,9 @@ const color = $computed(() => {
 
 function draw(rc: RoughSVG, svg: SVGSVGElement) {
   const { width, height } = getSVGSize(svg)
+  const strokeWidth = getLengthProperty(svg, '--r-avatar-border-width') ?? 0
+  const strokeLineDash = getLengthPropertyAsArray(svg, '--r-avatar-border-dash')
+    ?.map(value => value ?? 0) ?? undefined
   const scaleX = width / 10
   const scaleY = height / 10
   for (const pixel of pixels) {
@@ -71,6 +75,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
       height - padding * 2,
       {
         stroke: 'var(--r-avatar-border-color)',
+        strokeWidth,
+        strokeLineDash,
       },
     )
     svg.appendChild(ellipse)
@@ -82,6 +88,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
       height - padding * 2,
       {
         stroke: 'var(--r-avatar-border-color)',
+        strokeWidth,
+        strokeLineDash,
       },
     )
     svg.appendChild(rectangle)
@@ -96,10 +104,20 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 </template>
 
 <style lang="scss">
+@use '../common/_partials';
+
 .r-avatar {
   --r-avatar-size: 2em;
   --r-avatar-border-color: var(--r-common-comment-color);
+  --r-avatar-border-width: 1px;
+  --r-avatar-border-dash: none;
   block-size: var(--r-avatar-size);
   inline-size: var(--r-avatar-size);
+  &::before {
+    @include partials.ghost();
+    border-spacing: var(--r-avatar-border-dash);
+    border-top: var(--r-avatar-border-width) solid;
+    transition: border-spacing 1ms, border-top 1ms !important;
+  }
 }
 </style>