Skip to content

Commit

Permalink
feat: add popover
Browse files Browse the repository at this point in the history
  • Loading branch information
CyanSalt committed Jul 14, 2023
1 parent 34a180c commit d67eb06
Show file tree
Hide file tree
Showing 18 changed files with 420 additions and 27 deletions.
1 change: 1 addition & 0 deletions docs/.vitepress/config.ts
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ export default defineConfig({
{ text: 'Alert', link: '/components/alert' },
{ text: 'Dialog', link: '/components/dialog' },
{ text: 'Drawer', link: '/components/drawer' },
{ text: 'Popover', link: '/components/popover' },
],
},
],
Expand Down
2 changes: 1 addition & 1 deletion docs/components/alert.md
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ import { RAlert, RSpace } from 'roughness'

Alert style type. It's actually just a class name, so you can also pass in another value and declare custom styles for it.

Also see [Color Styles](/guide/theme#color-styles).
See also [Color Styles](/guide/theme#color-styles).

</template>
</RTable>
Expand Down
4 changes: 2 additions & 2 deletions docs/components/button.md
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ import { RButton, RSpace } from 'roughness'
<RButton type="error" filled>Error</RButton>
</RSpace>

Also see [GraphicsConfig](/components/graphics#configuration).
See also [GraphicsConfig](/components/graphics#configuration).

### Rounded

Expand Down Expand Up @@ -335,7 +335,7 @@ import { RButton, RSpace } from 'roughness'

Button style type. It's actually just a class name, so you can also pass in another value and declare custom styles for it.

Also see [Color Styles](/guide/theme#color-styles).
See also [Color Styles](/guide/theme#color-styles).

</template>
</RTable>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/card.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@
import { RButton, RCard, RDetails, RSpace, RTable, RText } from 'roughness'
</script>

# RCard
# Card

Sawatdee Card!

Expand Down
2 changes: 1 addition & 1 deletion docs/components/drawer.md
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ function showBottom() {
}
</script>

# RDrawer
# Drawer

There is a time machine hidden in the drawer.

Expand Down
2 changes: 1 addition & 1 deletion docs/components/icon.md
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import icons from 'feather-icons/dist/icons.json'
import { RAlert, RDetails, RIcon, RSpace, RTable, RText } from 'roughness'
</script>

# RIcon
# Icon

No Picture, No Truth.

Expand Down
2 changes: 1 addition & 1 deletion docs/components/link.md
Original file line number Diff line number Diff line change
Expand Up @@ -85,7 +85,7 @@ import { RLink, RSpace } from 'roughness'
<RLink tag="button" type="error">Cancel confirming</RLink>
</RSpace>

Also see [Button](/components/button#tag).
See also [Button](/components/button#tag).

## Usage

Expand Down
2 changes: 1 addition & 1 deletion docs/components/list.md
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ import { RList, RListItem } from 'roughness'
</template>
<template #body:reactions:default>

`['hover-at', 'focus-within', 'active']`
`[]`

</template>
<template #body:reactions:description>
Expand Down
183 changes: 183 additions & 0 deletions docs/components/popover.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,183 @@
<script lang="ts" setup>
import { RDetails, RPopover, RSpace, RTable } from 'roughness'
</script>

# Popover

Should this text appear in a popover?

## Example

<RDetails>
<template #summary>Show Code</template>

```vue
<script lang="ts" setup>
import { RPopover } from 'roughness'
</script>
<template>
<RPopover>
<template #anchor>Tom is dreaming...</template>
About giving Jerry as a gift to the girl he loves
</RPopover>
</template>
```

</RDetails>

<RPopover>
<template #anchor>Tom is dreaming...</template>
About giving Jerry as a gift to the girl he loves
</RPopover>

## Usage

### Props

<RSpace overflow>
<RTable
:columns="['name', 'type', 'default', 'description']"
:rows="['align', 'graphics-options', 'open', 'reactions', 'side']"
>
<template #body:*:name="{ row }">{{ row }}</template>
<template #body:align:type>

`'start' | 'end' | 'center' | 'stretch'`

</template>
<template #body:align:default>

`'start'`

</template>
<template #body:align:description>

Alignment of the popover content relative to the anchor.

- `start`: Align to the left or top of the anchor, depending on the value of `side`
- `end`: Align to the right or bottom of the anchor, depending on the value of `side`
- `center`: Align to the center of the anchor
- `stretch`: Align to both sides of the anchor at the same time

</template>

<template #body:graphics-options:type>

`import('roughjs/bin/core').Options`

</template>
<template #body:graphics-options:description>

[Options for Rough.js](https://github.com/rough-stuff/rough/wiki#options).

See [Graphics Configuration](/components/graphics#component-prop).

</template>

<template #body:open:type>

`boolean`

</template>
<template #body:open:default>

`false`

</template>
<template #body:open:description>
Whether to display the popover content.
</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:side:type>

`'top' | 'bottom' | 'left' | 'right'`

</template>
<template #body:side:default>

`'top'`

</template>
<template #body:side:description>
Which side of the anchor the popover will show on.
</template>
</RTable>
</RSpace>

### Slots

<RSpace overflow>
<RTable
:columns="['name', 'parameters', 'description']"
:rows="['anchor', 'default']"
>
<template #body:*:name="{ row }">{{ row }}</template>
<template #body:anchor:description>
Anchor of the popover.
</template>

<template #body:default:description>
Content of the popover.
</template>
</RTable>
</RSpace>

### Styles

<RSpace overflow>
<RTable
:columns="['name', 'values', 'default', 'description']"
:rows="['border-color', 'border-width']"
>
<template #body:*:name="{ row }">--r-popover-{{ 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 popover border.
</template>

<template #body:border-width:values>

`<length>`

</template>
<template #body:border-width:default>

`1px`

</template>
<template #body:border-width:description>
Width of the popover border.
</template>
</RTable>
</RSpace>
30 changes: 29 additions & 1 deletion docs/components/select.md
Original file line number Diff line number Diff line change
Expand Up @@ -145,7 +145,7 @@ See [Checkbox Tree](/components/checkbox#tree).
<RSpace overflow>
<RTable
:columns="['name', 'values', 'default', 'description']"
:rows="['border-color', 'border-width', 'dropdown-border-width']"
:rows="['border-color', 'border-width', 'dropdown-border-width', 'dropdown-padding-block', 'dropdown-padding-inline']"
>
<template #body:*:name="{ row }">--r-select-{{ row }}</template>
Expand Down Expand Up @@ -190,5 +190,33 @@ See [Checkbox Tree](/components/checkbox#tree).
<template #body:dropdown-border-width:description>
Width of the select dropdown border.
</template>

<template #body:dropdown-padding-block:values>

1-2 `<length>` or `<percentage>`

</template>
<template #body:dropdown-padding-block:default>

`12px`

</template>
<template #body:dropdown-padding-block:description>
Vertical padding of the select dropdown.
</template>

<template #body:dropdown-padding-inline:values>

1-2 `<length>` or `<percentage>`

</template>
<template #body:dropdown-padding-inline:default>

`12px`

</template>
<template #body:dropdown-padding-inline:description>
Horizontal padding of the select dropdown.
</template>
</RTable>
</RSpace>
4 changes: 3 additions & 1 deletion docs/components/tabs.md
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,8 @@ import { RDetails, RSpace, RTable, RTabs, RText } from 'roughness'

# Tabs

My brain has too many tabs open.

## Example

<RDetails>
Expand Down Expand Up @@ -73,7 +75,7 @@ import { RTabs } from 'roughness'
</template>
<template #body:reactions:default>

`[]`
`['hover', 'focus-within', 'active']`

</template>
<template #body:reactions:description>
Expand Down
2 changes: 1 addition & 1 deletion docs/components/text.md
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ import { RSpace, RText } from 'roughness'

Text style type. It's actually just a class name, so you can also pass in another value and declare custom styles for it.

Also see [Color Styles](/guide/theme#color-styles).
See also [Color Styles](/guide/theme#color-styles).

</template>
</RTable>
Expand Down
1 change: 1 addition & 0 deletions src/button/index.vue
Original file line number Diff line number Diff line change
Expand Up @@ -96,6 +96,7 @@ function draw(rc: RoughSVG, svg: SVGSVGElement) {
display: inline-block;
padding-block: var(--r-common-box-padding-block);
padding-inline: var(--r-common-box-padding-inline);
border: none;
color: var(--r-button-color);
white-space: nowrap;
text-align: center;
Expand Down
1 change: 1 addition & 0 deletions src/components.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,6 +15,7 @@ export { default as RInput } from './input/index.vue'
export { default as RLink } from './link/index.vue'
export { default as RList } from './list/index.vue'
export { default as RListItem } from './list/list-item.vue'
export { default as RPopover } from './popover/index.vue'
export { default as RRate } from './rate/index.vue'
export { default as RSelect } from './select/index.vue'
export { default as RSpace } from './space/index.vue'
Expand Down
Loading

0 comments on commit d67eb06

Please sign in to comment.