@symbo.ls/atoms 2.11.474 → 2.11.477

package/Collection.js

@@ -1,46 +1,45 @@
 'use strict'
 
 import { isState, getChildStateInKey } from '@domql/state'
-import { isString, isNot, isArray, isObject, isObjectLike, exec, deepCloneWithExtend, 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 = deepCloneWithExtend(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 = deepCloneWithExtend(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()
@@ -49,7 +48,7 @@ export const Collection = {
       if (isState(param)) param = param.parse()
       if (isNot(param)('array', 'object')) return
 
-      param = deepCloneWithExtend(param)
+      param = deepClone(param)
 
       if (ref.__collectionCache) {
         const equals = JSON.stringify(param) === JSON.stringify(ref.__collectionCache)
@@ -57,16 +56,17 @@ export const Collection = {
           ref.__noCollectionDifference = true
           return
         } else {
-          ref.__collectionCache = deepCloneWithExtend(param)
+          ref.__collectionCache = deepClone(param)
           delete ref.__noCollectionDifference
         }
       } else {
-        ref.__collectionCache = deepCloneWithExtend(param)
+        ref.__collectionCache = deepClone(param)
       }
 
       const obj = {
         tag: 'fragment',
         props: {
+          ignoreChildProps: true,
           childProps: el.props && el.props.childProps
         }
       }
@@ -117,7 +117,7 @@ export const Collection = {
       if (isNot(param)('array', 'object')) return
 
       const { __ref: ref } = el
-      param = deepCloneWithExtend(param)
+      param = deepClone(param)
 
       if (ref.__stateCollectionCache) {
         const equals = JSON.stringify(param) === JSON.stringify(ref.__stateCollectionCache)
@@ -125,11 +125,11 @@ export const Collection = {
           ref.__noCollectionDifference = true
           return
         } else {
-          ref.__stateCollectionCache = deepCloneWithExtend(param)
+          ref.__stateCollectionCache = deepClone(param)
           delete ref.__noCollectionDifference
         }
       } else {
-        ref.__stateCollectionCache = deepCloneWithExtend(param)
+        ref.__stateCollectionCache = deepClone(param)
       }
 
       const obj = {
@@ -163,7 +163,7 @@ export const Collection = {
       if (isNot(param)('array', 'object')) return
 
       const { __ref: ref } = el
-      param = deepCloneWithExtend(param)
+      param = deepClone(param)
 
       if (ref.__propsCollectionCache) {
         const equals = JSON.stringify(param) === JSON.stringify(ref.__propsCollectionCache) // eslint-disable-line
@@ -171,11 +171,11 @@ export const Collection = {
           ref.__noCollectionDifference = true
           return
         } else {
-          ref.__propsCollectionCache = deepCloneWithExtend(param)
+          ref.__propsCollectionCache = deepClone(param)
           delete ref.__noCollectionDifference
         }
       } else {
-        ref.__propsCollectionCache = deepCloneWithExtend(param)
+        ref.__propsCollectionCache = deepClone(param)
       }
 
       const obj = {

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,14 +1,14 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.474",
+  "version": "2.11.477",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "dd0429b4bfcc2d43545a301dfe406c5000bd7ae0",
+  "gitHead": "47546f8e3e61900fb07e92c3faf7abf2bce919ae",
   "dependencies": {
     "@domql/state": "^2.5.0",
     "@domql/utils": "^2.5.0",
     "@symbo.ls/emotion": "^2.11.470",
-    "@symbo.ls/scratch": "^2.11.470"
+    "@symbo.ls/scratch": "^2.11.475"
   },
   "source": "src/index.js",
   "devDependencies": {