fix: select label

docs/components/checkbox.md

@@ -213,7 +213,7 @@ const treeValue = ref<string | undefined>()
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['checked', 'graphics-options', 'indeterminate', 'reactions', 'value']"
+  :rows="['checked', 'graphics-options', 'indeterminate', 'label', 'reactions', 'value']"
 >
   <template #body:*:name="{ row }">{{ row }}</template>
 
@@ -244,6 +244,15 @@ const treeValue = ref<string | undefined>()
 
   </template>
 
+  <template #body:value:type>
+
+  `string`
+
+  </template>
+  <template #body:value:description>
+    Item label when checked and displayed, e.g. in Select.
+  </template>
+
   <template #body:indeterminate:type>
 
   `boolean`

docs/components/select.md

@@ -1,5 +1,5 @@
 <script lang="ts" setup>
-import { RCheckbox, RDetails, RSelect, RSpace, RTable } from 'roughness'
+import { RCheckbox, RDetails, RSelect, RSpace, RTable, RText } from 'roughness'
 </script>
 
 # Select
@@ -20,21 +20,21 @@ import { RCheckbox, RSelect } from 'roughness'
 
 <template>
   <RSelect placeholder="Test engineer rank">
-    <RCheckbox value="Stable">Stable</RCheckbox>
-    <RCheckbox value="Beta">Beta</RCheckbox>
-    <RCheckbox value="Dev">Dev</RCheckbox>
-    <RCheckbox value="Canary">Canary</RCheckbox>
+    <RCheckbox value="stable" label="Stable" />
+    <RCheckbox value="beta" label="Beta" />
+    <RCheckbox value="dev" label="Dev" />
+    <RCheckbox value="canary" label="Canary" />
   </RSelect>
 </template>
 ```
 
 </RDetails>
 
 <RSelect placeholder="Test engineer rank">
-  <RCheckbox value="Stable">Stable</RCheckbox>
-  <RCheckbox value="Beta">Beta</RCheckbox>
-  <RCheckbox value="Dev">Dev</RCheckbox>
-  <RCheckbox value="Canary">Canary</RCheckbox>
+  <RCheckbox value="stable" label="Stable" />
+  <RCheckbox value="beta" label="Beta" />
+  <RCheckbox value="dev" label="Dev" />
+  <RCheckbox value="canary" label="Canary" />
 </RSelect>
 
 ### Multiple
@@ -49,21 +49,21 @@ import { RCheckbox, RSelect } from 'roughness'
 
 <template>
   <RSelect multiple placeholder="Exodia">
-    <RCheckbox value="Right Arm">Right Arm</RCheckbox>
-    <RCheckbox value="Left Arm">Left Arm</RCheckbox>
-    <RCheckbox value="Right Leg">Right Leg</RCheckbox>
-    <RCheckbox value="Left Leg">Left Leg</RCheckbox>
+    <RCheckbox value="Right Arm" label="Right Arm" />
+    <RCheckbox value="Left Arm" label="Left Arm" />
+    <RCheckbox value="Right Leg" label="Right Leg" />
+    <RCheckbox value="Left Leg" label="Left Leg" />
   </RSelect>
 </template>
 ```
 
 </RDetails>
 
 <RSelect multiple placeholder="Exodia">
-  <RCheckbox value="Right Arm">Right Arm</RCheckbox>
-  <RCheckbox value="Left Arm">Left Arm</RCheckbox>
-  <RCheckbox value="Right Leg">Right Leg</RCheckbox>
-  <RCheckbox value="Left Leg">Left Leg</RCheckbox>
+  <RCheckbox value="Right Arm" label="Right Arm" />
+  <RCheckbox value="Left Arm" label="Left Arm" />
+  <RCheckbox value="Right Leg" label="Right Leg" />
+  <RCheckbox value="Left Leg" label="Left Leg" />
 </RSelect>
 
 ### Tree

src/checkbox/index.vue

@@ -8,7 +8,7 @@ import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
 import { getFilledSizeOptions, getSVGSize, measureSVGSize } from '../graphics/utils'
 import type { CheckboxValue } from './utils'
-import { modelInjection, multipleInjection } from './utils'
+import { labelsInjection, modelInjection, multipleInjection } from './utils'
 
 defineOptions({
   name: 'RCheckbox',
@@ -18,13 +18,15 @@ const {
   checked = false,
   disabled = false,
   indeterminate = false,
+  label,
   value,
   reactions = (() => ['focus-within', 'active']) as never,
   graphicsOptions,
 } = defineProps<{
   checked?: boolean,
   disabled?: boolean,
   indeterminate?: boolean,
+  label?: string,
   value?: CheckboxValue,
 } & GraphicsProps>()
 
@@ -38,6 +40,16 @@ defineSlots<{
 
 const multiple = $(inject(multipleInjection, ref()))
 let model = $(inject(modelInjection, ref()))
+const labels = inject(labelsInjection, new Map<CheckboxValue, string>())
+
+watchEffect(onInvalidate => {
+  if (value !== undefined && label !== undefined) {
+    labels.set(value, label)
+    onInvalidate(() => {
+      labels.delete(value)
+    })
+  }
+})
 
 let internalChecked = $ref(checked)
 
@@ -117,7 +129,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     <span class="r-checkbox__control">
       <RGraphics :options="graphicsOptions" @draw="draw" />
     </span>
-    <slot></slot>
+    <slot>{{ label }}</slot>
   </label>
 </template>
 

src/checkbox/utils.ts

@@ -4,3 +4,4 @@ export type CheckboxValue = string | number
 
 export const multipleInjection: InjectionKey<Ref<boolean>> = Symbol('RCheckboxGroup#multiple')
 export const modelInjection: InjectionKey<Ref<CheckboxValue[] | CheckboxValue | undefined>> = Symbol('RCheckboxGroup#model')
+export const labelsInjection: InjectionKey<Map<CheckboxValue, string>> = Symbol('RCheckbox#labels')

src/select/index.vue

@@ -2,9 +2,10 @@
 import '../common/style.scss'
 import { vOnClickOutside } from '@vueuse/components'
 import type { RoughSVG } from 'roughjs/bin/svg'
-import { toRef, watch, watchEffect } from 'vue'
+import { provide, reactive, toRef, watch, watchEffect } from 'vue'
 import RCheckboxGroup from '../checkbox/checkbox-group.vue'
 import type { CheckboxValue } from '../checkbox/utils'
+import { labelsInjection } from '../checkbox/utils'
 import { useReactionState } from '../common/utils'
 import RGraphics from '../graphics/index.vue'
 import type { GraphicsProps } from '../graphics/utils'
@@ -57,8 +58,13 @@ watch($$(internalModelValue), currentValue => {
   emit('update:modelValue', currentValue)
 })
 
+const labels = reactive(new Map<CheckboxValue, string>())
+
 const displayText = $computed(() => {
-  return Array.isArray(internalModelValue) ? internalModelValue.join(', ') : internalModelValue
+  const text = Array.isArray(internalModelValue)
+    ? internalModelValue.map(value => labels.get(value) ?? value)
+    : (internalModelValue !== undefined ? labels.get(internalModelValue) ?? internalModelValue : internalModelValue)
+  return Array.isArray(text) ? text.join(', ') : text
 })
 
 let input = $ref<HTMLInputElement>()
@@ -126,6 +132,8 @@ function drawDropdown(rc: RoughSVG, svg: SVGSVGElement) {
   })
   svg.appendChild(rectangle)
 }
+
+provide(labelsInjection, labels)
 </script>
 
 <template>
@@ -143,7 +151,7 @@ function drawDropdown(rc: RoughSVG, svg: SVGSVGElement) {
       @keydown.escape="close"
     >
     <RCheckboxGroup
-      v-if="state"
+      v-show="state"
       v-model="internalModelValue"
       :multiple="multiple"
       vertical
@@ -171,9 +179,15 @@ function drawDropdown(rc: RoughSVG, svg: SVGSVGElement) {
   }
 }
 .r-select__input {
+  appearance: none;
   width: 100%;
   padding-block: var(--r-common-box-padding-block);
   padding-inline: var(--r-common-box-padding-inline) calc(var(--r-common-box-padding-block) * 2 + var(--r-common-line-height));
+  border: none;
+  background-color: transparent;
+  &:focus {
+    outline: none;
+  }
   &:disabled {
     opacity: 0.8;
     cursor: not-allowed;