@_unit/unit 1.0.19 → 1.0.20

package/src/system/platform/component/H1/spec.json

@@ -6,10 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}",
-          "{background:'red'}"
-        ]
+        "examples": ["{}", "{background:'red'}"]
       }
     },
     "attr": {
@@ -17,11 +14,7 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{tabIndex:1}",
-          "{title:'hello'}",
-          "{draggable:true}"
-        ]
+        "examples": ["{tabIndex:1}", "{title:'hello'}", "{draggable:true}"]
       }
     }
   },
@@ -30,10 +23,7 @@
     "icon": "square",
     "description": "HTML h3 heading element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "dd7616e2-2e64-4d9c-b13e-ca7efeacd982",
   "base": true,
@@ -43,4 +33,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/H2/spec.json

@@ -6,10 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}",
-          "{background:'red'}"
-        ]
+        "examples": ["{}", "{background:'red'}"]
       }
     },
     "attr": {
@@ -17,11 +14,7 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{tabIndex:1}",
-          "{title:'hello'}",
-          "{draggable:true}"
-        ]
+        "examples": ["{tabIndex:1}", "{title:'hello'}", "{draggable:true}"]
       }
     }
   },
@@ -30,10 +23,7 @@
     "icon": "square",
     "description": "HTML h3 heading element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "321f971c-b898-4ca4-9e6e-3d75d68940f7",
   "base": true,
@@ -43,4 +33,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/H3/spec.json

@@ -6,10 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}",
-          "{background:'red'}"
-        ]
+        "examples": ["{}", "{background:'red'}"]
       }
     },
     "attr": {
@@ -17,11 +14,7 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{tabIndex:1}",
-          "{title:'hello'}",
-          "{draggable:true}"
-        ]
+        "examples": ["{tabIndex:1}", "{title:'hello'}", "{draggable:true}"]
       }
     }
   },
@@ -30,10 +23,7 @@
     "icon": "square",
     "description": "HTML h3 heading element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "b7f043ee-4f9d-4f69-90fe-63b1357ff4c2",
   "base": true,
@@ -43,4 +33,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Icon/spec.json

@@ -5,9 +5,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     },
     "attr": {
@@ -15,20 +13,14 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     },
     "icon": {
       "type": "string",
       "optional": true,
       "metadata": {
-        "examples": [
-          "\"unit\"",
-          "\"circle\"",
-          "\"square\""
-        ]
+        "examples": ["\"unit\"", "\"circle\"", "\"square\""]
       }
     }
   },
@@ -37,10 +29,7 @@
     "icon": "square",
     "description": "icon from the system",
     "complexity": 47,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "63a417e5-d354-4b39-9ebd-05f55e70de7b",
   "base": true,
@@ -51,4 +40,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Iframe/spec.json

@@ -24,10 +24,7 @@
     "icon": "square",
     "description": "website container container",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "32ff22b0-8221-4584-9c78-d21102dcfa6a",
   "base": true,
@@ -38,4 +35,4 @@
   "type": "`U`&`C`&`V`&`J`&`CH`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Inherit/spec.json

@@ -5,9 +5,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     }
   },
@@ -16,10 +14,7 @@
     "icon": "square",
     "description": "apply default style to all children",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "b5286262-9f92-40d3-8545-88fb3079a0f9",
   "base": true,
@@ -30,4 +25,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Label/spec.json

@@ -6,9 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     },
     "attr": {
@@ -16,9 +14,7 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     }
   },
@@ -27,10 +23,7 @@
     "icon": "square",
     "description": "HTML label element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "23b7df22-79e0-4233-8388-7e6e8f1859c6",
   "base": true,
@@ -40,4 +33,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Paragraph/spec.json

@@ -6,10 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}",
-          "{background:'red'}"
-        ]
+        "examples": ["{}", "{background:'red'}"]
       }
     },
     "attr": {
@@ -17,11 +14,7 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{tabIndex:1}",
-          "{title:'hello'}",
-          "{draggable:true}"
-        ]
+        "examples": ["{tabIndex:1}", "{title:'hello'}", "{draggable:true}"]
       }
     }
   },
@@ -30,10 +23,7 @@
     "icon": "square",
     "description": "HTML h3 heading element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "2a5ad480-9d38-4918-8774-41fac7b54203",
   "base": true,
@@ -43,4 +33,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Parent/spec.json

@@ -7,10 +7,7 @@
     "icon": "square",
     "description": "HTML div element",
     "complexity": 42,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "78b0939d-43e1-4f6c-867d-e4217a55d217",
   "base": true,
@@ -20,4 +17,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Render/spec.json

@@ -6,9 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     },
     "component": {
@@ -21,10 +19,7 @@
     "icon": "square",
     "description": "render a component",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "7772a2f5-40c8-482e-83f4-bed9bfb364e3",
   "base": true,
@@ -34,4 +29,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Span/spec.json

@@ -6,9 +6,7 @@
       "type": "object",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{}"
-        ]
+        "examples": ["{}"]
       }
     }
   },
@@ -17,10 +15,7 @@
     "icon": "square",
     "description": "HTML div element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "c711d540-9de3-437e-854a-b59491af3cf8",
   "base": true,
@@ -30,4 +25,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Style/spec.json

@@ -6,9 +6,7 @@
       "type": "string",
       "optional": true,
       "metadata": {
-        "examples": [
-          "div { outline: 1px solid currentColor; }"
-        ]
+        "examples": ["div { outline: 1px solid currentColor; }"]
       }
     },
     "attr": {
@@ -16,11 +14,7 @@
       "optional": true,
       "defaultIgnored": true,
       "metadata": {
-        "examples": [
-          "{tabIndex:1}",
-          "{title:'hello'}",
-          "{draggable:true}"
-        ]
+        "examples": ["{tabIndex:1}", "{title:'hello'}", "{draggable:true}"]
       }
     }
   },
@@ -29,10 +23,7 @@
     "icon": "square",
     "description": "HTML style element",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "62ca7eae-ea36-4960-a8f2-6b5978cabbab",
   "base": true,
@@ -42,4 +33,4 @@
   },
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Wrap/spec.json

@@ -5,9 +5,7 @@
       "type": "`C`",
       "optional": true,
       "metadata": {
-        "examples": [
-          "${unit:{id:\"f27cae4e-fea8-11ea-b91e-db41e114c426\"}}"
-        ]
+        "examples": ["${unit:{id:\"f27cae4e-fea8-11ea-b91e-db41e114c426\"}}"]
       }
     }
   },
@@ -22,10 +20,7 @@
     "icon": "square",
     "description": "wrap all children with `component`",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "454aaff2-cd74-4f6e-baf2-631bb32e7a6b",
   "base": true,
@@ -36,4 +31,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/Zoom/spec.json

@@ -9,25 +9,19 @@
       "type": "{x:number,y:number,z:number}",
       "optional": true,
       "metadata": {
-        "examples": [
-          "{x:0,y:0,z:1}"
-        ]
+        "examples": ["{x:0,y:0,z:1}"]
       }
     },
     "width": {
       "type": "number",
       "metadata": {
-        "examples": [
-          "240"
-        ]
+        "examples": ["240"]
       }
     },
     "height": {
       "type": "number",
       "metadata": {
-        "examples": [
-          "240"
-        ]
+        "examples": ["240"]
       }
     }
   },
@@ -36,10 +30,7 @@
     "icon": "square",
     "description": "parent container",
     "complexity": 43,
-    "tags": [
-      "platform",
-      "component"
-    ]
+    "tags": ["platform", "component"]
   },
   "id": "3ffeaaf8-30dd-11eb-9dcc-836b075fc64d",
   "component": {
@@ -50,4 +41,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/app/Bot/spec.json

@@ -24,11 +24,7 @@
     "icon": "bot",
     "description": "your fellow robot",
     "complexity": 45,
-    "tags": [
-      "platform",
-      "component",
-      "app"
-    ]
+    "tags": ["platform", "component", "app"]
   },
   "id": "0e9e6cd4-67eb-11ea-995b-4b0721193361",
   "base": true,
@@ -39,4 +35,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}

package/src/system/platform/component/app/Class/Component.ts

@@ -31,6 +31,7 @@ const OPENING: number = 120
 export interface Props {
   id?: string
   className?: string
+  attr?: Dict<string>
   style?: Dict<string>
   specs: Specs
 }
@@ -38,14 +39,14 @@ export interface Props {
 export const CLASS_DEFAULT_WIDTH = 90
 export const CLASS_DEFAULT_HEIGHT = 90
 
-export default class ClassDatum extends Element<HTMLDivElement, Props> {
+export default class ClassDatum extends Element<SVGSVGElement, Props> {
   private _svg: SVGSVG
   private _svg_g: SVGG
 
   constructor($props: Props, $system: System) {
     super($props, $system)
 
-    const { id, className, style } = $props
+    const { id, attr, className } = $props
 
     let width: number = CLASS_DEFAULT_WIDTH
     let height: number = CLASS_DEFAULT_HEIGHT
@@ -55,13 +56,8 @@ export default class ClassDatum extends Element<HTMLDivElement, Props> {
         className: classnames('unit-class', className),
         width,
         height,
-        style: {
-          width: `${width}px`,
-          height: `${height}px`,
-          color: 'currentColor',
-          pointerEvents: 'none',
-          ...style,
-        },
+        style: this._style(),
+        attr,
         viewBox: `0 0 ${width} ${height}`,
       },
       this.$system
@@ -76,7 +72,7 @@ export default class ClassDatum extends Element<HTMLDivElement, Props> {
       this.$system
     )
     this._svg_g = svg_g
-    this._svg.registerParentRoot(svg_g)
+    this._svg.appendChild(svg_g)
 
     if (id) {
       this._render(id)
@@ -84,20 +80,37 @@ export default class ClassDatum extends Element<HTMLDivElement, Props> {
 
     const $element = parentElement($system)
 
-    this.$element = $element
+    this.$element = svg.$element
     this.$slot['default'] = svg
-
-    this.registerRoot(svg)
   }
 
   onPropChanged(prop: string, current: any): void {
     if (prop === 'id') {
       this._render(current)
+    } else if (prop === 'style') {
+      this._svg.setProp('style', this._style())
+    } else if (prop === 'attr') {
+      this._svg.setProp('attr', current)
+    }
+  }
+
+  private _style = () => {
+    const { style } = this.$props
+
+    let width: number = CLASS_DEFAULT_WIDTH
+    let height: number = CLASS_DEFAULT_HEIGHT
+
+    return {
+      width: `${width}px`,
+      height: `${height}px`,
+      color: 'currentColor',
+      pointerEvents: 'none',
+      ...style,
     }
   }
 
   private _render = (id: string): void => {
-    const { specs } = this.$props
+    const { specs = this.$system.specs } = this.$props
 
     const spec = specs[id]
 

package/src/system/platform/component/app/Class/index.ts

@@ -1,9 +1,11 @@
 import { Element_ } from '../../../../../Class/Element'
 import { System } from '../../../../../system'
-import { ID_CLASS } from '../../../../_ids'
+import { Dict } from '../../../../../types/Dict'
+import { ID_UNIT_CLASS } from '../../../../_ids'
 
 export interface I<T> {
   id: string
+  style: Dict<any>
 }
 
 export interface O<T> {}
@@ -12,12 +14,12 @@ export default class Class<T> extends Element_<I<T>, O<T>> {
   constructor(system: System) {
     super(
       {
-        i: ['id'],
+        i: ['id', 'style', 'attr'],
         o: [],
       },
       {},
       system,
-      ID_CLASS
+      ID_UNIT_CLASS
     )
   }
 }

package/src/system/platform/component/app/Class/spec.json

@@ -3,6 +3,13 @@
   "inputs": {
     "id": {
       "type": "string"
+    },
+    "style": {
+      "type": "object"
+    },
+    "attr": {
+      "type": "object",
+      "defaultIgnored": true
     }
   },
   "outputs": {},
@@ -10,11 +17,7 @@
     "icon": "chalkboard",
     "description": "unit class component",
     "complexity": 48,
-    "tags": [
-      "platform",
-      "component",
-      "app"
-    ]
+    "tags": ["platform", "component", "app"]
   },
   "id": "c18d7dcc-939b-11ea-90cb-77846d7504a9",
   "base": true,
@@ -25,4 +28,4 @@
   "type": "`U`&`C`&`V`&`J`",
   "system": true,
   "render": true
-}
+}