Skip to content

Commit b22cce0

Browse files
gureckisgureckis
committed
feat: Box component for drawing rectangles around and over things
1 parent 7191805 commit b22cce0

6 files changed

Lines changed: 178 additions & 0 deletions

File tree

‎components/Box.vue‎

Lines changed: 105 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
<script setup>
2+
import { computed } from 'vue'
3+
import { resolveColor } from '../layoutHelper'
4+
const props = defineProps({
5+
shape: {
6+
type: String,
7+
default: 's-s-2-0',
8+
},
9+
color: {
10+
type: String,
11+
default: 'white',
12+
},
13+
size: {
14+
type: String,
15+
default: '150px', // Default width in pixels
16+
},
17+
custom: {
18+
// add a custom class if you want
19+
type: String,
20+
default: '',
21+
},
22+
})
23+
24+
// -
25+
// - s-d-3-10
26+
// color: scheme
27+
// width:
28+
29+
// - square vs rounded vs full
30+
// - dashed, solid, no border
31+
// - border width
32+
// - fill opacity
33+
34+
// - fill color
35+
// - border color
36+
// - size
37+
38+
const size = computed(() => {
39+
return props.size
40+
})
41+
const borderwidth = computed(() => {
42+
return props.shape.split('-')[2] + 'px'
43+
})
44+
const borderstyle = computed(() => {
45+
let parts = props.shape.split('-')
46+
if (parts[1] == 'd') {
47+
return 'dashed'
48+
} else if (parts[1] == 'o') {
49+
return 'dotted'
50+
} else if (parts[1] == 's') {
51+
return 'solid'
52+
} else {
53+
return 'none'
54+
}
55+
})
56+
57+
const style = computed(() => {
58+
let s = ''
59+
let parts = props.shape.split('-')
60+
console.log(parts)
61+
console.log(parts[0])
62+
// no validation currently!
63+
64+
// square versus rounded vs full
65+
if (parts[0] == 'r') {
66+
s += 'rounded-lg '
67+
} else if (parts[0] == 'f') {
68+
s += 'rounded-full '
69+
} else {
70+
s += 'rounded-none '
71+
}
72+
73+
// color scheme
74+
s += `neversink-${props.color}-scheme binder `
75+
76+
// add custom class
77+
s += props.custom
78+
79+
// bg opacity
80+
s += ` opacity-${parts[3]} `
81+
82+
console.log(s)
83+
return s
84+
})
85+
86+
const trans = computed(() => {
87+
const val = 100 - parseInt(props.shape.split('-')[3])
88+
return `${val}%`
89+
})
90+
</script>
91+
<template>
92+
<div :class="style"><slot></slot></div>
93+
</template>
94+
<style scoped>
95+
.binder {
96+
--new-color: color-mix(in srgb, var(--neversink-bg-color), transparent v-bind(trans));
97+
border-color: var(--neversink-border-color);
98+
background-color: var(--new-color);
99+
color: var(--neversink-text-color);
100+
width: v-bind(size);
101+
height: v-bind(size);
102+
border-width: v-bind(borderwidth);
103+
border-style: v-bind(borderstyle);
104+
}
105+
</style>

‎docs/.vitepress/config.js‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -65,6 +65,7 @@ export default defineConfig({
6565
{ text: 'Thumb', link: '/components/thumb' },
6666
{ text: 'Line', link: '/components/line' },
6767
{ text: 'VDragLine', link: '/components/vdragline' },
68+
{ text: 'Box', link: '/components/box' },
6869
],
6970
},
7071
{ text: 'Customizing', link: '/customizing' },

‎docs/.vitepress/theme/index.js‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ import ArrowDraw from '../../../components/ArrowDraw.vue'
1616
import ArrowHeads from '../../../components/ArrowHeads.vue'
1717
import Thumb from '../../../components/Thumb.vue'
1818
import Line from '../../../components/Line.vue'
19+
import Box from '../../../components/Box.vue'
1920
import BackPack from '../../../components/vue3-kawaii/components/backpack/BackPack.vue'
2021
import Browser from '../../../components/vue3-kawaii/components/browser/Browser.vue'
2122
import Cat from '../../../components/vue3-kawaii/components/cat/Cat.vue'
@@ -45,6 +46,7 @@ export default {
4546
app.component('ArrowHeads', ArrowHeads)
4647
app.component('Thumb', Thumb)
4748
app.component('Line', Line)
49+
app.component('Box', Box)
4850
app.component('BackPack', BackPack)
4951
app.component('Browser', Browser)
5052
app.component('Cat', Cat)

‎docs/components.md‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -28,4 +28,6 @@ The current components are:
2828

2929
- [VDragLine](/components/vdragline) - draws a straight line (no arrowheads), the v-drag version.
3030

31+
- [Box](/components/box) - draws a box or rectangle shape
32+
3133
Most component can just be included in-line in your markdown. However, in some cases it can make sense to position these components using the `v-drag` directive. For example, the `SpeechBubble` component can be positioned using the `v-drag` directive to place it in a specific location on the slide. This can be useful for creating custom layouts or animations. In that case, it makes sense to keep the component in the [default slot](/layouts#slots) of each layout.

‎docs/components/box.md‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
# Box
2+
3+
## Description
4+
5+
Draws an empty or filled box. Useful for highlighting and grouping things.
6+
7+
## `Box` component
8+
9+
The `Box` component is used to just draw a rectangle. It has the following props:
10+
11+
- `shape` (optional) the shape of the box. There are four values connected with a kebob style notation. The first element is the shape which can be `s` (square), `r` (rounded) or `f` (full) which is practically a circle. The second element is the border type which can be `s` (solid), `d` (dashed) or `o` (dotted). The third element is the border radius in pixels. The fourth element is the opacity of the fill (0 = transparent, 100=opaque).
12+
For example, the default is 's-s-2-0' which is a rounded rectangle with a 2px border and transparent fill. A few examples appear below.
13+
- `size` (optional) the size of the square. The default is '150px'.
14+
- `color` (optional) the color of the shape. It uses the color schemes in the theme. The default is 'white' (which means a black border and white fill).
15+
- `custom` (optional) any custom classes you want to add to the box. The default is none.
16+
17+
```md
18+
<Box v-drag />
19+
```
20+
21+
Renders as:
22+
23+
<Box />
24+
25+
well a box, what did you expect.
26+
27+
But of course you can customise it:
28+
29+
```md
30+
<Box shape='r-d-8-0' width='200px' custom='m-10 ' />
31+
```
32+
33+
<Box shape='r-d-8-0' width='200px' custom='m-10 ' />
34+
35+
```md
36+
<Box shape='f-o-5-50' color='sky-light' custom='m-10' />
37+
```
38+
39+
<Box shape='f-o-5-50' color='sky-light' custom='m-10' />
40+
41+
more transparent:
42+
43+
```md
44+
<Box shape='f-o-5-10' color='sky-light' custom='m-10' />
45+
```
46+
47+
<Box shape='f-o-5-10' color='sky-light' custom='m-10' />
48+
49+
If can include text as well using a slot
50+
51+
```md
52+
<Box>Hi there</Box>
53+
```
54+
55+
renders as:
56+
57+
<Box>Hi there</Box>
58+
59+
You might like to syle it a bit
60+
61+
```md
62+
<Box custom='pt-10'>Hi there</Box>
63+
```
64+
65+
<Box custom='p-10'>Hi there</Box>

‎uno.config.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -191,6 +191,9 @@ export default defineConfig({
191191
'grid-col-span-1',
192192
'mt-10',
193193
'mb-10',
194+
'm-10',
195+
'w-150px',
196+
'h-150px',
194197
] /* for the docs */,
195198
],
196199
transformers: [transformerDirectives()],

0 commit comments

Comments
 (0)