feat: number as keys

docs/components/graphics.md

@@ -113,10 +113,10 @@ import { RButton, RGraphicsConfig } from 'roughness'
 </script>
 
 <template>
-  <RGraphicsConfig :options="{ fillStyle: 'cross-hatch' }">
+  <RGraphicsConfig :options="{ fillStyle: 'solid' }">
     <RSpace vertical align="start">
-      <RButton filled>Psychological Shadow</RButton>
-      <RRate :model-value="3" />
+      <RButton filled>Medieval Sky</RButton>
+      <RRate :model-value="1" />
     </RSpace>
   </RGraphicsConfig>
 </template>
@@ -148,7 +148,7 @@ import { RButton } from 'roughness'
 
 </RDetails>
 
-<RButton filled :graphics-options="{ fillStyle: 'cross-hatch' }">Medieval Sky</RButton>
+<RButton filled :graphics-options="{ fillStyle: 'cross-hatch' }">Psychological Shadow</RButton>
 
 ## Usage
 

docs/components/list.md

@@ -46,7 +46,7 @@ import { RList } from 'roughness'
 </script>
 
 <template>
-  <RList :items="['1', '2']" list-style="square">
+  <RList :items="2" list-style="square">
     <template #1>How are you?</template>
     <template #2>Fine, thank you.<br>And you?</template>
   </RList>
@@ -55,7 +55,7 @@ import { RList } from 'roughness'
 
 </RDetails>
 
-<RList :items="['1', '2']" list-style="square">
+<RList :items="2" list-style="square">
   <template #1>How are you?</template>
   <template #2>Fine, thank you.<br>And you?</template>
 </RList>
@@ -73,14 +73,18 @@ import { RList } from 'roughness'
 
   <template #body:items.type>
 
-  `string[]`
+  `string[] | number`
 
   </template>
   <template #body:items.default>
     <RText type="error">Required</RText>
   </template>
   <template #body:items.description>
-    Item keys. Recommended to use all lowercase letters and hyphens and underscores.
+
+  Item keys. Recommended to use all lowercase letters and hyphens and underscores.
+
+  When specified as number, integer strings of `1...n` will be generated as values.
+
   </template>
 
   <template #body:list-style.type>
@@ -97,7 +101,7 @@ import { RList } from 'roughness'
 
   Marker style of the list. See [`list-style-type`](https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type).
 
-  When declared as `auto`, the list will be **ordered** and the markers will be drawn by the user agent.
+  When specified as `auto`, the list will be **ordered** and the markers will be drawn by the user agent.
 
   </template>
 

docs/components/table.md

@@ -122,14 +122,18 @@ See [Responsive Graphics](/components/graphics#responsive).
 
   <template #body:columns.type>
 
-  `string[]`
+  `string[] | number`
 
   </template>
   <template #body:columns.default>
     <RText type="error">Required</RText>
   </template>
   <template #body:columns.description>
-    Column keys. Recommended to use all lowercase letters and hyphens and underscores.
+
+  Column keys. Recommended to use all lowercase letters and hyphens and underscores.
+
+  When specified as number, integer strings of `1...n` will be generated as values.
+
   </template>
 
   <template #body:header.type>
@@ -166,14 +170,18 @@ See [Responsive Graphics](/components/graphics#responsive).
 
   <template #body:rows.type>
 
-  `string[]`
+  `string[] | number`
 
   </template>
   <template #body:rows.default>
     <RText type="error">Required</RText>
   </template>
   <template #body:rows.description>
-    Row keys. Recommended to use all lowercase letters and hyphens and underscores.
+
+  Row keys. Recommended to use all lowercase letters and hyphens and underscores.
+
+  When specified as number, integer strings of `1...n` will be generated as values.
+
   </template>
 </RTable>
 </RSpace>

src/list/index.vue

@@ -20,15 +20,21 @@ const {
   graphicsOptions,
   reactions = (() => []) as never,
 } = defineProps<{
-  items: string[],
+  items: string[] | number,
   listStyle?: 'disc' | 'circle' | 'square' | 'auto',
 } & GraphicsProps>()
 
 defineSlots<{
-  '*'?: (props: {}) => any,
+  '*'?: (props: { item: string }) => any,
   default?: (props: {}) => any,
 }>()
 
+const renderedItems = $computed(() => {
+  return typeof items === 'number'
+    ? Array.from({ length: items }, (item, index) => String(index + 1))
+    : items
+})
+
 const tag = $computed(() => {
   return listStyle === 'auto' ? 'ol' : 'ul'
 })
@@ -114,7 +120,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     <li v-if="listStyle !== 'auto'" role="presentation" class="r-list__markers">
       <RGraphics ref="graphics" :options="graphicsOptions" @draw="draw" />
     </li>
-    <li v-for="item in items" :key="item" class="r-list__item">
+    <li v-for="item in renderedItems" :key="item" class="r-list__item">
       <slot :name="item">
         <slot name="*" :item="item"></slot>
       </slot>

src/table/index.vue

@@ -23,10 +23,10 @@ const {
   reactions = (() => []) as never,
   graphicsOptions,
 } = defineProps<{
-  columns: string[],
+  columns: string[] | number,
   footer?: boolean,
   header?: boolean,
-  rows: string[],
+  rows: string[] | number,
 } & GraphicsProps>()
 
 defineSlots<{
@@ -35,6 +35,18 @@ defineSlots<{
   default?: (props: {}) => any,
 }>()
 
+const renderedRows = $computed(() => {
+  return typeof rows === 'number'
+    ? Array.from({ length: rows }, (item, index) => String(index + 1))
+    : rows
+})
+
+const renderedColumns = $computed(() => {
+  return typeof columns === 'number'
+    ? Array.from({ length: columns }, (item, index) => String(index + 1))
+    : columns
+})
+
 let head = $ref<HTMLTableSectionElement>()
 let body = $ref<HTMLTableSectionElement>()
 let foot = $ref<HTMLTableSectionElement>()
@@ -145,16 +157,16 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     <slot></slot>
     <thead v-if="header" ref="head">
       <tr>
-        <th v-for="column in columns" :key="column">
+        <th v-for="column in renderedColumns" :key="column">
           <slot :name="`header:${column}`">
             <slot name="header:*" :column="column">{{ startCase(column) }}</slot>
           </slot>
         </th>
       </tr>
     </thead>
     <tbody ref="body">
-      <tr v-for="row in rows" :key="row">
-        <td v-for="column in columns" :key="column">
+      <tr v-for="row in renderedRows" :key="row">
+        <td v-for="column in renderedColumns" :key="column">
           <slot :name="`body:${row}.${column}`">
             <slot :name="`body:*.${column}`" :row="row">
               <slot :name="`body:${row}.*`" :column="column">
@@ -167,7 +179,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
     </tbody>
     <tfoot v-if="footer" ref="foot">
       <tr>
-        <th v-for="column in columns" :key="column">
+        <th v-for="column in renderedColumns" :key="column">
           <slot :name="`footer:${column}`">
             <slot name="footer:*" :column="column"></slot>
           </slot>