32 lines
835 B
TypeScript
32 lines
835 B
TypeScript
import type { FunctionalComponent } from 'vue'
|
|
import { h } from 'vue'
|
|
import { BackgroundVariant } from './types'
|
|
|
|
interface LinePatternProps {
|
|
dimensions: [number, number]
|
|
size?: number
|
|
color: string
|
|
}
|
|
|
|
export const LinePattern: FunctionalComponent<LinePatternProps> = function ({ dimensions, size, color }) {
|
|
return h('path', {
|
|
'stroke': color,
|
|
'stroke-width': size,
|
|
'd': `M${dimensions[0] / 2} 0 V${dimensions[1]} M0 ${dimensions[1] / 2} H${dimensions[0]}`,
|
|
})
|
|
}
|
|
|
|
interface DotPatternProps {
|
|
radius: number
|
|
color: string
|
|
}
|
|
|
|
export const DotPattern: FunctionalComponent<DotPatternProps> = function ({ radius, color }) {
|
|
return h('circle', { cx: radius, cy: radius, r: radius, fill: color })
|
|
}
|
|
|
|
export const Patterns = {
|
|
[BackgroundVariant.Lines]: LinePattern,
|
|
[BackgroundVariant.Dots]: DotPattern,
|
|
}
|