feat(select): border dash

CyanSalt · Jul 23, 2023 · 874e3a6 · 874e3a6
1 parent 291806d
commit 874e3a6
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 3 deletions.
diff --git a/docs/components/progress.md b/docs/components/progress.md
@@ -231,7 +231,7 @@ import { RProgress, RSpace } from 'roughness'
   </template>
   <template #body:border-dash:default>
 
-  `8px` when hovered, `none` else
+  `none`
 
   </template>
   <template #body:border-dash:description>

diff --git a/docs/components/select.md b/docs/components/select.md
@@ -251,7 +251,7 @@ See [Checkbox Tree](/components/checkbox#tree).
 <RSpace overflow>
 <RTable
   :columns="['name', 'values', 'default', 'description']"
-  :rows="['border-color', 'border-width', 'dropdown-border-width', 'dropdown-padding-block', 'dropdown-padding-inline']"
+  :rows="['border-color', 'border-width', 'border-dash', 'dropdown-border-width', 'dropdown-border-dash', 'dropdown-padding-block', 'dropdown-padding-inline']"
 >
   <template #body:*:name="{ row }">--r-select-{{ row }}</template>
 
@@ -283,6 +283,26 @@ See [Checkbox Tree](/components/checkbox#tree).
     Width of the select control border.
   </template>
 
+  <template #body:border-dash:values>
+
+  `<length> +` or `none`
+
+  </template>
+  <template #body:border-dash:default>
+
+  `none`
+
+  </template>
+  <template #body:border-dash:description>
+
+  List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the select 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).
+
+  </template>
+
   <template #body:dropdown-border-width:values>
 
   `<length>`
@@ -297,6 +317,20 @@ See [Checkbox Tree](/components/checkbox#tree).
     Width of the select dropdown border.
   </template>
 
+  <template #body:dropdown-border-dash:values>
+
+  `<length> +` or `none`
+
+  </template>
+  <template #body:dropdown-border-dash:default>
+
+  `none`
+
+  </template>
+  <template #body:dropdown-border-dash:description>
+    List of comma and/or whitespace separated the lengths of alternating dashes and gaps of the select dropdown border.
+  </template>
+
   <template #body:dropdown-padding-block:values>
 
   1-2 `<length>` or `<percentage>`

diff --git a/src/select/index.vue b/src/select/index.vue
@@ -10,7 +10,7 @@ import { sentenceCase, useReactionState } from '../common/utils'
 import { nameInjection } from '../form/utils'
 import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
-import { getSVGSize, measureSVGSize } from '../graphics/utils'
+import { getSVGSize, measureSVGSize, measureSVGSizeAsArray } from '../graphics/utils'
 import RIcon from '../icon/index.vue'
 
 defineOptions({
@@ -115,6 +115,8 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
   getReactionState()
   const { width, height } = getSVGSize(svg)
   const strokeWidth = measureSVGSize(svg, '--r-select-border-width') ?? 0
+  const strokeLineDash = measureSVGSizeAsArray(svg, '--r-select-border-dash')
+    ?.map(value => value ?? 0) ?? undefined
   const padding = 2
   const rect = rc.rectangle(
     padding,
@@ -124,6 +126,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     {
       stroke: 'var(--r-select-border-color)',
       strokeWidth,
+      strokeLineDash,
     },
   )
   svg.appendChild(rect)
@@ -132,10 +135,13 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
 function drawDropdown(rc: RoughSVG, svg: SVGSVGElement) {
   const { width, height } = getSVGSize(svg)
   const strokeWidth = measureSVGSize(svg, '--r-select-dropdown-border-width') ?? 0
+  const strokeLineDash = measureSVGSizeAsArray(svg, '--r-select-dropdown-border-dash')
+    ?.map(value => value ?? 0) ?? undefined
   const padding = 2
   const rectangle = rc.rectangle(padding, padding, width - padding * 2, height - padding * 2, {
     stroke: 'var(--r-select-border-color)',
     strokeWidth,
+    strokeLineDash,
     fill: 'var(--r-common-background-color)',
     fillStyle: 'solid',
   })
@@ -203,7 +209,9 @@ provide(labelsInjection, labels)
 .r-select {
   --r-select-border-color: var(--r-common-text-color);
   --r-select-border-width: 1px;
+  --r-select-border-dash: none;
   --r-select-dropdown-border-width: 1px;
+  --r-select-dropdown-border-dash: none;
   --r-select-dropdown-padding-block: 12px;
   --r-select-dropdown-padding-inline: 12px;
   position: relative;