feat: add card

docs/.vitepress/config.ts

@@ -54,6 +54,7 @@ export default defineConfig({
           {
             text: 'Data',
             items: [
+              { text: 'Card', link: '/components/card' },
               { text: 'Table', link: '/components/table' },
             ],
           },

docs/components/card.md

@@ -0,0 +1,198 @@
+<script lang="ts" setup>
+import { RButton, RCard, RDetails, RSpace, RTable, RText } from 'roughness'
+</script>
+
+# RCard
+
+Sawatdee Card!
+
+## Example
+
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RCard } from 'roughness'
+</script>
+
+<template>
+  <RCard>
+    <template #title>A Tranquil Night</template>
+    Abed, I see a silver light,<br>
+    I wonder if It’s frost around.<br>
+    Looking up, I find the moon bright;<br>
+    Bowing, in homesickness I’m drowned.
+  </RCard>
+</template>
+```
+
+</RDetails>
+
+<RCard>
+  <template #title>A Tranquil Night</template>
+  Abed, I see a silver light,<br>
+  I wonder if It’s frost around.<br>
+  Looking up, I find the moon bright;<br>
+  Bowing, in homesickness I’m drowned.
+</RCard>
+
+## Usage
+
+### Props
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'type', 'default', 'description']"
+  :rows="['footer', 'header', 'reactions', 'tag']"
+>
+  <template #body:*.name="{ row }">{{ row }}</template>
+
+  <template #body:footer.type>
+
+  `boolean`
+
+  </template>
+  <template #body:footer.default>
+
+  `false`
+
+  </template>
+  <template #body:footer.description>
+    Whether to display the card header.
+  </template>
+
+  <template #body:header.type>
+
+  `boolean`
+
+  </template>
+  <template #body:header.default>
+
+  `true`
+
+  </template>
+  <template #body:header.description>
+    Whether to display the card header.
+  </template>
+
+  <template #body:reactions.type>
+
+  `string[]`
+
+  </template>
+  <template #body:reactions.default>
+
+  `[]`
+
+  </template>
+  <template #body:reactions.description>
+
+  States that trigger graphics redrawing.
+
+  See [Reactions](/guide/theme#reactions).
+
+  </template>
+
+  <template #body:tag.type>
+
+  `string`
+
+  </template>
+  <template #body:tag.default>
+
+  `'article'`
+
+  </template>
+  <template #body:tag.description>
+    HTML tag for rendering the button.
+  </template>
+</RTable>
+</RSpace>
+
+### Styles
+
+<RSpace overflow>
+<RTable
+  :columns="['name', 'values', 'default', 'description']"
+  :rows="['border-color', 'border-width', 'border-dash', 'padding-block', 'padding-inline']"
+>
+  <template #body:*.name="{ row }">--r-card-{{ row }}</template>
+
+  <template #body:border-color.values>
+
+  `<color>`
+
+  </template>
+  <template #body:border-color.default>
+
+  `var(--r-common-text-color)`
+
+  </template>
+  <template #body:border-color.description>
+    Color of the button border.
+  </template>
+
+  <template #body:border-width.values>
+
+  `<length>`
+
+  </template>
+  <template #body:border-width.default>
+
+  `1px`
+
+  </template>
+  <template #body:border-width.description>
+    Width of the card 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 button 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:padding-block.values>
+
+  1-2 `<length>` or `<percentage>`
+
+  </template>
+  <template #body:padding-block.default>
+
+  `calc(var(--r-common-box-padding-block) * 2)`
+
+  </template>
+  <template #body:padding-block.description>
+    Vertical padding of the card and between the card header or footer and the body.
+  </template>
+
+  <template #body:padding-inline.values>
+
+  1-2 `<length>` or `<percentage>`
+
+  </template>
+  <template #body:padding-inline.default>
+
+  `var(--r-common-box-padding-inline)`
+
+  </template>
+  <template #body:padding-inline.description>
+    Horizontal padding of the card.
+  </template>
+</RTable>
+</RSpace>

docs/components/grid-guide.md

@@ -118,7 +118,7 @@ import { RGridGuide } from 'roughness'
   </template>
   <template #body:color.default>
 
-  `rgb(255 255 255 / 0.1)` in dark theme, `#f5f5f5` else
+  `rgb(255 255 255 / 10%)` in dark theme, `#f5f5f5` else
 
   </template>
   <template #body:color.description>

docs/components/link.md

@@ -62,7 +62,30 @@ import { RLink, RSpace } from 'roughness'
 
 ### As Button
 
-See [Button](/components/button#tag).
+<RDetails>
+  <template #summary>Show Code</template>
+
+```vue
+<script lang="ts" setup>
+import { RLink, RSpace } from 'roughness'
+</script>
+
+<template>
+  <RSpace>
+    <RLink tag="button" type="primary">Confirm cancelling</RLink>
+    <RLink tag="button" type="error">Cancel confirming</RLink>
+  </RSpace>
+</template>
+```
+
+</RDetails>
+
+<RSpace>
+  <RLink tag="button" type="primary">Confirm cancelling</RLink>
+  <RLink tag="button" type="error">Cancel confirming</RLink>
+</RSpace>
+
+Also see [Button](/components/button#tag).
 
 ## Usage
 
@@ -71,10 +94,24 @@ See [Button](/components/button#tag).
 <RSpace overflow>
 <RTable
   :columns="['name', 'type', 'default', 'description']"
-  :rows="['...']"
+  :rows="['tag', '...']"
 >
   <template #body:*.name="{ row }">{{ row }}</template>
 
+  <template #body:tag.type>
+
+  `string`, but usually `'a' | 'button'`
+
+  </template>
+  <template #body:tag.default>
+
+  `'a'`
+
+  </template>
+  <template #body:tag.description>
+    HTML tag for rendering the link.
+  </template>
+
   <template #body:....description>
 
   See [Text Props](/components/text#props).

src/card/index.vue

@@ -0,0 +1,103 @@
+<script lang="ts" setup>
+import type { RoughSVG } from 'roughjs/bin/svg'
+import { toRef } from 'vue'
+import type { ReactionProps } from '../common/utils'
+import { useReactionState } from '../common/utils'
+import RGraphics from '../graphics/index.vue'
+import { getSVGSize, measureSVGSize, measureSVGSizeAsArray } from '../graphics/utils'
+import RSpace from '../space/index.vue'
+import RText from '../text/index.vue'
+
+defineOptions({
+  name: 'RCard',
+})
+
+const {
+  footer = false,
+  header = true,
+  tag = 'article',
+  reactions = (() => []) as never,
+} = defineProps<{
+  footer?: boolean,
+  header?: boolean,
+  tag?: string,
+} & ReactionProps>()
+
+defineSlots<{
+  title?: (props: {}) => any,
+  'header-end'?: (props: {}) => any,
+  footer?: (props: {}) => any,
+  default?: (props: {}) => any,
+}>()
+
+const getReactionState = useReactionState(toRef(() => reactions))
+
+function draw(rc: RoughSVG, svg: SVGSVGElement) {
+  getReactionState()
+  const { width, height } = getSVGSize(svg)
+  const strokeWidth = measureSVGSize(svg, '--r-card-border-width') ?? 0
+  const strokeLineDash = measureSVGSizeAsArray(svg, '--r-card-border-dash')
+    ?.map(value => value ?? 0) ?? undefined
+  const padding = 2
+  const rect = rc.rectangle(
+    padding,
+    padding,
+    width - padding * 2,
+    height - padding * 2,
+    {
+      stroke: 'var(--r-card-border-color)',
+      strokeWidth,
+      strokeLineDash,
+    },
+  )
+  svg.appendChild(rect)
+}
+</script>
+
+<template>
+  <component :is="tag" class="r-card">
+    <RGraphics @draw="draw" />
+    <RSpace
+      v-if="header"
+      tag="header"
+      justify="space-between"
+      align="center"
+      class="r-card__header"
+    >
+      <RText tag="strong" size="large" class="r-card__title">
+        <slot name="title"></slot>
+      </RText>
+      <slot name="header-end"></slot>
+    </RSpace>
+    <section class="r-card__body">
+      <slot></slot>
+    </section>
+    <RSpace
+      v-if="footer"
+      tag="footer"
+      justify="end"
+      align="center"
+      class="r-card__footer"
+    >
+      <slot name="footer"></slot>
+    </RSpace>
+  </component>
+</template>
+
+<style lang="scss" scoped>
+.r-card {
+  --r-card-border-color: var(--r-common-text-color);
+  --r-card-border-width: 1px;
+  --r-card-border-dash: none;
+  --r-card-padding-block: calc(var(--r-common-box-padding-block) * 2);
+  --r-card-padding-inline: var(--r-common-box-padding-inline);
+  padding-block: var(--r-card-padding-block);
+  padding-inline: var(--r-card-padding-inline);
+}
+.r-card__header {
+  margin-block-end: var(--r-card-padding-block);
+}
+.r-card__footer {
+  margin-block-start: var(--r-card-padding-block);
+}
+</style>

src/common/style.scss

@@ -35,7 +35,7 @@
 :root.dark {
   --r-common-text-color: #f4f4f0;
   --r-common-background-color: #31343a;
-  --r-common-placeholder-color: rgb(255 255 255 / #{math.div(3 - math.sqrt(5), 2)});
+  --r-common-placeholder-color: rgb(255 255 255 / #{math.div(3 - math.sqrt(5), 4) * 100%});
   --r-common-primary-color: #94c0cc;
   --r-common-info-color: #a6aebb;
   --r-common-success-color: #bcdf8a;

src/components.ts

@@ -1,5 +1,6 @@
 export { default as RAlert } from './alert/index.vue'
 export { default as RButton } from './button/index.vue'
+export { default as RCard } from './card/index.vue'
 export { default as RCheckbox } from './checkbox/index.vue'
 export { default as RCheckboxGroup } from './checkbox/checkbox-group.vue'
 export { default as RDetails } from './details/index.vue'