feat: <canvas>

Author: sheepbox8646

packages/widget/src/canvas.ts

@@ -0,0 +1,29 @@
+import { type } from 'arktype'
+import { defineComponent } from 'sciux-laplace'
+
+const CanvasType = type({
+  width: 'number',
+  height: 'number',
+  origin: 'number[]',
+})
+
+export default defineComponent<'canvas', typeof CanvasType.infer>((attrs) => {
+  return {
+    name: 'canvas',
+    attrs: CanvasType,
+    defaults: {
+      origin: [0, 0],
+    },
+    setup(children) {
+      const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
+      svg.setAttribute('viewBox', `0 0 ${attrs.width.value} ${attrs.height.value}`)
+      svg.setAttribute('width', '100%')
+      svg.style.aspectRatio = (attrs.width.value / attrs.height.value).toString()
+      const root = document.createElementNS('http://www.w3.org/2000/svg', 'g')
+      root.setAttribute('transform', `translate(${attrs.origin.value.join(',')})`)
+      root.append(...children())
+      svg.append(root)
+      return svg
+    },
+  }
+})

packages/widget/src/table.ts

@@ -1,3 +1,16 @@
+/**
+ * `<table>` component examples
+ * ```
+ * <table caption="The table description" align="horizon" :columns="3">
+ *  <link>a link could be a part of item</link>
+ *  <canvas></canvas> // A canvas also could
+ *  Hello world! // A pure-text node also
+ *  // Auto enter to next table line because the max columns is `3`
+ *  <each-node-can-be/>
+ * </table>
+ * ```
+ */
+
 import { size } from '@sciux/layout'
 import { type } from 'arktype'
 import { defineComponent, toValue } from 'sciux-laplace'