feat(background): add offset prop

Signed-off-by: braks <78412429+bcakmakoglu@users.noreply.github.com>
2023-03-23 15:58:30 +01:00
parent e70ebc2093
commit 1f49358569
3 changed files with 63 additions and 21 deletions
@@ -0,0 +1,31 @@
+import type { FunctionalComponent } from 'vue'
+import { BackgroundVariant } from './types'
+
+interface LinePatternProps {
+  dimensions: [number, number]
+  size?: number
+  color: string
+}
+
+export const LinePattern: FunctionalComponent<LinePatternProps> = ({ 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> = ({ radius, color }) => {
+  return () => h('circle', { cx: radius, cy: radius, r: radius, fill: color })
+}
+
+export const Patterns = {
+  [BackgroundVariant.Lines]: LinePattern,
+  [BackgroundVariant.Dots]: DotPattern,
+}