@symbo.ls/atoms 2.11.424 → 2.11.427

package/Block.js

@@ -30,12 +30,16 @@ export const Block = {
       display: props.display
     }),
 
-    hide: ({ props, deps }) => props.hide && ({
+    show: (el, s, ctx) => (ctx.utils.exec(el.props.show, el, s) === false) && ({
+      display: 'none !important'
+    }),
+
+    hide: (el, s, ctx) => ctx.utils.exec(el.props.hide, el, s) && ({
       display: 'none !important'
     }),
 
-    width: ({ props, deps }) => deps.transformSizeRatio('width', props),
     height: ({ props, deps }) => deps.transformSizeRatio('height', props),
+    width: ({ props, deps }) => deps.transformSizeRatio('width', props),
 
     boxSize: ({ props, deps }) => {
       if (!deps.isString(props.boxSize)) return
@@ -46,6 +50,9 @@ export const Block = {
       }
     },
 
+    inlineSize: ({ props, deps }) => deps.transformSizeRatio('inlineSize', props),
+    blockSize: ({ props, deps }) => deps.transformSizeRatio('blockSize', props),
+
     minWidth: ({ props, deps }) => deps.transformSizeRatio('minWidth', props),
     maxWidth: ({ props, deps }) => deps.transformSizeRatio('maxWidth', props),
     widthRange: ({ props, deps }) => {
@@ -68,21 +75,30 @@ export const Block = {
       }
     },
 
+    size: ({ props, deps }) => {
+      if (!deps.isString(props.size)) return
+      const [inlineSize, blockSize] = props.size.split(' ')
+      return {
+        ...deps.transformSizeRatio('inlineSize', inlineSize),
+        ...deps.transformSizeRatio('blockSize', blockSize || inlineSize)
+      }
+    },
+
     minSize: ({ props, deps }) => {
       if (!deps.isString(props.minSize)) return
-      const [minHeight, minWidth] = props.minSize.split(' ')
+      const [minInlineSize, minBlockSize] = props.minSize.split(' ')
       return {
-        ...deps.transformSize('minHeight', minHeight),
-        ...deps.transformSize('minWidth', minWidth || minHeight)
+        ...deps.transformSize('minInlineSize', minInlineSize),
+        ...deps.transformSize('minBlockSize', minBlockSize || minInlineSize)
       }
     },
 
     maxSize: ({ props, deps }) => {
       if (!deps.isString(props.maxSize)) return
-      const [maxHeight, maxWidth] = props.maxSize.split(' ')
+      const [maxInlineSize, maxBlockSize] = props.maxSize.split(' ')
       return {
-        ...deps.transformSize('maxHeight', maxHeight),
-        ...deps.transformSize('maxWidth', maxWidth || maxHeight)
+        ...deps.transformSize('maxInlineSize', maxInlineSize),
+        ...deps.transformSize('maxBlockSize', maxBlockSize || maxInlineSize)
       }
     },
 
@@ -148,6 +164,10 @@ export const Block = {
     gap: ({ props, deps }) => !deps.isUndefined(props.gap) && ({
       gap: transfromGap(props.gap)
     }),
+
+    columnGap: ({ props, deps }) => props.columnGap ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
+    rowGap: ({ props, deps }) => props.rowGap ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null,
+
     gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     float: ({ props, deps }) => !deps.isUndefined(props.float) && ({
@@ -217,15 +237,6 @@ export const Block = {
       gridRowStart: props.gridRowStart
     }),
 
-    size: ({ props, deps }) => {
-      if (!deps.isString(props.heightRange)) return
-      const [minHeight, maxHeight] = props.heightRange.split(' ')
-      return {
-        ...deps.transformSizeRatio('minHeight', minHeight),
-        ...deps.transformSizeRatio('maxHeight', maxHeight || minHeight)
-      }
-    },
-
     resize: ({ props, deps }) => !deps.isUndefined(props.resize) && ({
       resize: props.resize
     }),
@@ -241,7 +252,6 @@ export const Block = {
     columnWidth: ({ props, deps }) => !deps.isUndefined(props.columnWidth) && ({
       columnWidth: props.columnWidth
     }),
-    columnGap: ({ props, deps }) => deps.transformSizeRatio('columnGap', props),
     columnSpan: ({ props, deps }) => !deps.isUndefined(props.columnSpan) && ({
       columnSpan: props.columnSpan
     }),

package/Collection.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { isState, getChildStateInKey } from '@domql/state'
+import { addAdditionalExtend } from '@domql/element/utils/component'
 import { isString, isNot, isArray, isObject, isObjectLike, exec, deepCloneWithExtend } from '@domql/utils'
 
 export const Collection = {
@@ -9,12 +10,19 @@ export const Collection = {
       const { __ref: ref } = el
       const { children, childrenAs, childrenExtend } = (el.props || {})
       const childrenExec = children && exec(children, el, state)
-      const hasChildren = isArray(childrenExec)
 
-      if (hasChildren) {
+      if (isArray(childrenExec)) {
         param = deepCloneWithExtend(childrenExec)
         if (childrenAs) param = param.map(v => ({ extend: childrenExtend, [childrenAs]: v }))
-      } else if (!param) return
+      } else if (isObject(childrenExec)) {
+        param = deepCloneWithExtend(childrenExec)
+        param = Object.keys(param).map(v => {
+          const val = param[v]
+          return addAdditionalExtend(v, val)
+        })
+      }
+
+      if (!param) return
 
       if (isString(param)) {
         if (param === 'state') param = state.parse()
@@ -109,6 +117,7 @@ export const Collection = {
       const obj = {
         tag: 'fragment',
         props: {
+          children: el.props && el.props.children,
           childProps: el.props && el.props.childProps
         }
       }

package/Grid.js

@@ -24,9 +24,6 @@ export const Grid = {
     autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
     rowStart: ({ props }) => props.rowStart ? ({ gridRowStart: props.rowStart }) : null,
 
-    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
-
-    columnGap: ({ props, deps }) => props.columnGap ? deps.getSpacingBasedOnRatio(props, 'columnGap') : null,
-    rowGap: ({ props, deps }) => props.rowGap ? deps.getSpacingBasedOnRatio(props, 'rowGap') : null
+    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null
   }
 }

package/Media.js

@@ -53,7 +53,7 @@ const execClass = (key, props, result, element) => {
     context: element.context,
     state: element.state,
     deps: element.deps
-  })
+  }, element.state, element.context)
 
   if (isArray(classExec)) classExec = classExec.reduce((a, c) => merge(a, c), {})
 

package/Svg.js

@@ -3,9 +3,7 @@
 // create SVG symbol
 export const Svg = {
   tag: 'svg',
-  props: {
-    style: { '*': { fill: 'currentColor' } }
-  },
+  props: {},
   attr: {
     xmlns: 'http://www.w3.org/2000/svg',
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'

package/Text.js

@@ -32,6 +32,7 @@ export const Text = {
     textAlign: ({ props }) => !isUndefined(props.textAlign) && ({ textAlign: props.textAlign }),
     writingMode: ({ props }) => !isUndefined(props.writingMode) && ({ writingMode: props.writingMode }),
     textOrientation: ({ props }) => !isUndefined(props.textOrientation) && ({ textOrientation: props.textOrientation }),
+    textIndent: ({ props }) => !isUndefined(props.textIndent) && ({ textIndent: props.textIndent }),
     fontWeight: ({ props }) => !isUndefined(props.fontWeight) && ({
       fontWeight: props.fontWeight,
       fontVariationSettings: '"wght" ' + props.fontWeight

package/Theme.js

@@ -160,6 +160,10 @@ export const Theme = {
       backdropFilter: props.backdropFilter
     }),
 
+    caretColor: ({ props }) => !isUndefined(props.caretColor) && ({
+      caretColor: props.caretColor
+    }),
+
     opacity: ({ props }) => !isUndefined(props.opacity) && ({
       opacity: props.opacity
     }),

package/XYZ.js

@@ -4,6 +4,8 @@ import { isUndefined } from '@domql/utils'
 
 export const XYZ = {
   class: {
-    zIndex: ({ props }) => !isUndefined(props.zIndex) && ({ zIndex: props.zIndex })
+    zIndex: ({ props }) => !isUndefined(props.zIndex) && ({ zIndex: props.zIndex }),
+    perspective: ({ props }) => !isUndefined(props.perspective) && ({ perspective: props.perspective }),
+    perspectiveOrigin: ({ props }) => !isUndefined(props.perspectiveOrigin) && ({ perspectiveOrigin: props.perspectiveOrigin })
   }
 }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.424",
+  "version": "2.11.427",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "3708811dd9976df392626400dd5560e1b11237b1",
+  "gitHead": "60efc845b7989c7e8e631bacfdaa0dba0827b8cf",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",