@symbo.ls/atoms 2.11.475 → 2.11.480

package/Collection.js

@@ -1,46 +1,45 @@
 'use strict'
 
 import { isState, getChildStateInKey } from '@domql/state'
-import { isString, isNot, isArray, isObject, isObjectLike, exec, deepClone, addAdditionalExtend } from '@domql/utils'
+import { isString, isNumber, isNot, isArray, isObject, isObjectLike, exec, deepClone, addAdditionalExtend } from '@domql/utils'
 
 export const Collection = {
   define: {
     $collection: (param, el, state) => {
       const { __ref: ref } = el
-      const { children, childrenAs, childExtends } = (el.props || {})
-      const childrenExec = children && exec(children, el, state)
-
-      if (isArray(childrenExec)) {
-        param = deepClone(childrenExec)
-        if (childrenAs) param = param.map(v => ({ extend: childExtends, [childrenAs]: v }))
-      } else if (isObject(childrenExec)) {
-        if (childrenExec.$$typeof) return el.call('renderReact', childrenExec, el)
-        param = deepClone(childrenExec)
-        param = Object.keys(param).map(v => {
-          const val = param[v]
-          return addAdditionalExtend(v, val)
-        })
-        el.removeContent()
-        el.content = {
-          extend: childExtends,
-          props: {
-            childProps: el.props && el.props.childProps
+      const { children: childrenProps, childrenAs, childExtends } = (el.props || {})
+      const children = childrenProps && exec(childrenProps, el, state)
+
+      if (children) {
+        if (isObject(children)) {
+          if (children.$$typeof) return el.call('renderReact', children, el)
+          param = deepClone(children)
+          param = Object.keys(param).map(v => {
+            const val = param[v]
+            return addAdditionalExtend(v, val)
+          })
+        } else if (isArray(children)) {
+          param = deepClone(children)
+          if (childrenAs) {
+            param = param.map(v => ({
+              extend: childExtends,
+              [childrenAs]: v
+            }))
           }
+        } else if (isString(children) || isNumber(children)) {
+          el.removeContent()
+          el.content = { text: param }
+          return
         }
-        return
-      } else if (childrenExec) {
-        el.removeContent()
-        el.content = { text: param }
-        return
       }
 
       if (!param) return
+
       const filterReact = param.filter(v => !v.$$typeof)
       if (filterReact.length !== param.length) {
         const extractedReactComponents = param.filter(v => v.$$typeof)
         el.call('renderReact', extractedReactComponents, el)
-      }
-      param = filterReact
+      } param = filterReact
 
       if (isString(param)) {
         if (param === 'state') param = state.parse()
@@ -67,6 +66,7 @@ export const Collection = {
       const obj = {
         tag: 'fragment',
         props: {
+          ignoreChildProps: true,
           childProps: el.props && el.props.childProps
         }
       }
@@ -135,7 +135,7 @@ export const Collection = {
       const obj = {
         tag: 'fragment',
         props: {
-          children: el.props && el.props.children,
+          ignoreChildProps: true,
           childProps: el.props && el.props.childProps
         }
       }
@@ -181,6 +181,7 @@ export const Collection = {
       const obj = {
         tag: 'fragment',
         props: {
+          ignoreChildProps: true,
           childProps: el.props && el.props.childProps
         }
       }

package/Hgroup.js

@@ -0,0 +1,91 @@
+'use strict'
+
+export const Hgroup = {
+  extend: 'Flex',
+  tag: 'hgroup',
+
+  props: {
+    flow: 'y',
+    gap: 'Y2',
+
+    Title: {
+      fontWeight: '700',
+      alignItems: 'center'
+    },
+
+    Paragraph: {
+      margin: '0',
+      color: 'caption',
+      '> p': { margin: '0' }
+    },
+
+    H: {
+      color: 'title',
+      tag: 'h3',
+      lineHeight: '1em',
+      margin: '0'
+    },
+    P: {
+      margin: '0',
+      color: 'paragraph'
+    }
+  },
+
+  H: {},
+  P: {},
+
+  Title: {
+    extend: 'Flex',
+    if: ({ parent }) => parent.props.title,
+    props: ({ parent }) => ({
+      text: parent.props.title,
+      lineHeight: '1em'
+    })
+  },
+
+  Paragraph: {
+    extend: 'Flex',
+    if: ({ parent }) => parent.props.paragraph,
+    props: ({ parent }) => ({
+      text: parent.props.paragraph,
+      margin: '0'
+    })
+  }
+}
+
+export const HgroupRows = {
+  extend: 'Hgroup',
+
+  Title: {
+    extend: 'Flex',
+    props: { color: 'title', align: 'center space-between' }
+  },
+
+  Paragraph: {
+    extend: 'Flex',
+    props: { color: 'paragraph', align: 'center space-between' }
+  }
+}
+
+export const HgroupButton = {
+  extend: 'HgroupRows',
+
+  Title: {
+    props: { justifyContent: 'space-between' },
+
+    Span: {},
+    Button: {
+      props: {
+        background: 'transparent',
+        color: 'currentColor',
+        padding: '0',
+        Icon: {
+          name: 'x',
+          fontSize: 'C'
+        }
+      }
+    }
+  },
+
+  Paragraph: {}
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.475",
+  "version": "2.11.480",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "d2198b5f44d161e2cf0dd8a9d88a5301192bcb02",
+  "gitHead": "14db2b8d241d45fa80f588a2e0a6c50f5dbd8bee",
   "dependencies": {
     "@domql/state": "^2.5.0",
     "@domql/utils": "^2.5.0",