feat: extension table

extensions/table/src/index.ts

@@ -1 +1,6 @@
-export { default as BaseTable } from './base-table.vue'
+export type { TableOptions } from './table.vue'
+export { default as Table } from './table.vue'
+export type { TableRowOptions } from './table-row.vue'
+export { default as TableRow } from './table-row.vue'
+export type { TableItemOptions } from './table-item.vue'
+export { default as TableItem } from './table-item.vue'

extensions/table/src/table-item.vue

@@ -0,0 +1,95 @@
+<script setup lang="ts">
+import { defineWidget, useChildren } from '@vue-motion/core'
+import type { WidgetOptions } from '@vue-motion/lib'
+import type { ComputedRef } from 'vue'
+import { computed, onMounted, ref } from 'vue'
+
+export interface TableItemOptions extends WidgetOptions {
+  margin?: number
+  marginX?: number
+  marginY?: number
+  marginTop?: number
+  marginBottom?: number
+  marginLeft?: number
+  marginRight?: number
+  padding?: number
+  paddingX?: number
+  paddingY?: number
+  paddingTop?: number
+  paddingBottom?: number
+  paddingLeft?: number
+  paddingRight?: number
+  width?: number
+  height?: number
+}
+
+const props = defineProps<TableItemOptions>()
+const options = defineWidget<TableItemOptions>(props)
+
+const children = useChildren()
+
+const mountedFlag = ref(false)
+
+const width: ComputedRef<number> = computed(() => {
+  if (!mountedFlag.value)
+    return 0
+  if (options.width)
+    return options.width
+  const counter: number[] = []
+  children.forEach((child) => {
+    counter.push(Math.abs(child.range?.x ?? 0) + (child.range?.width ?? 0))
+  })
+  return Math.max(...counter)
+})
+const height: ComputedRef<number> = computed(() => {
+  if (!mountedFlag.value)
+    return 0
+  if (options.height)
+    return options.height
+  const counter: number[] = []
+  children.forEach((child) => {
+    counter.push(Math.abs(child.range?.y ?? 0) + (child.range?.height ?? 0))
+  })
+  return Math.max(...counter)
+})
+
+onMounted(() => {
+  mountedFlag.value = true
+})
+
+const marginTop = computed(() => props.marginTop ?? props.marginY ?? props.margin ?? 0)
+const marginBottom = computed(() => props.marginBottom ?? props.marginY ?? props.margin ?? 0)
+const marginLeft = computed(() => props.marginLeft ?? props.marginX ?? props.margin ?? 0)
+const marginRight = computed(() => props.marginRight ?? props.marginX ?? props.margin ?? 0)
+const paddingTop = computed(() => props.paddingTop ?? props.paddingY ?? props.padding ?? 0)
+const paddingBottom = computed(() => props.paddingBottom ?? props.paddingY ?? props.padding ?? 0)
+const paddingLeft = computed(() => props.paddingLeft ?? props.paddingX ?? props.padding ?? 0)
+const paddingRight = computed(() => props.paddingRight ?? props.paddingX ?? props.padding ?? 0)
+</script>
+
+<template>
+  <td
+    :style="{
+      border: '3px solid white',
+    }"
+  >
+    <svg
+      :style="{
+        marginTop: `${marginTop}px`,
+        marginBottom: `${marginBottom}px`,
+        marginLeft: `${marginLeft}px`,
+        marginRight: `${marginRight}px`,
+        paddingTop: `${paddingTop}px`,
+        paddingBottom: `${paddingBottom}px`,
+        paddingLeft: `${paddingLeft}px`,
+        paddingRight: `${paddingRight}px`,
+        width: `${width}px`,
+        height: `${height}px`,
+      }"
+    >
+      <g :transform="`translate(${width / 2}, ${height / 2})`">
+        <slot />
+      </g>
+    </svg>
+  </td>
+</template>

extensions/table/src/table-row.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { defineWidget } from '@vue-motion/core';
+import type { WidgetOptions } from '@vue-motion/lib'
+
+export interface TableRowOptions extends WidgetOptions {
+  height?: number
+}
+
+const props = defineProps<TableRowOptions>()
+const options = defineWidget<TableRowOptions>(props)
+</script>
+
+<template>
+  <td :style="{ height: `${options.height}px` ?? void 0 }">
+    <slot />
+  </td>
+</template>

extensions/table/src/table.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { defineWidget } from '@vue-motion/core'
+import type { WidgetOptions } from '@vue-motion/lib'
+import { widget } from '@vue-motion/lib'
+
+export interface TableOptions extends WidgetOptions {
+  width?: number
+  height?: number
+}
+
+const props = defineProps<TableOptions>()
+const options = defineWidget<TableOptions>(props)
+</script>
+
+<template>
+  <g v-bind="widget(options)">
+    <foreignObject :width="options.width" :height="options.height">
+      <div
+        :style="{
+          color: 'white',
+        }" xmlns="http://www.w3.org/1999/xhtml"
+      >
+        <table
+          :style="{
+            width: `${options.width}px` ?? void 0,
+            height: `${options.height}px` ?? void 0,
+            border: '3px solid white',
+          }"
+        >
+          <slot />
+        </table>
+      </div>
+    </foreignObject>
+  </g>
+</template>