@symbo.ls/atoms 2.11.239 → 2.11.242

package/Collection.js

@@ -5,6 +5,49 @@ import { isString, isNot, isArray, isObject, isObjectLike, deepDiff, deepClone }
 
 export const Collection = {
   define: {
+    $collection: (param, el, state) => {
+      if (!param) return
+
+      if (isString(param)) {
+        if (param === 'state') param = state.parse()
+        else param = getChildStateInKey(param, state)
+      }
+      if (isState(param)) param = param.parse()
+      if (isNot(param)('array', 'object')) return
+
+      const { __ref: ref } = el
+
+      if (ref.__stateCollectionCache) {
+        const d = deepDiff(param, ref.__stateCollectionCache) // eslint-disable-line
+        if (Object.keys(d).length) {
+          ref.__stateCollectionCache = deepClone(param)
+          delete ref.__noCollectionDifference
+        } else {
+          ref.__noCollectionDifference = true
+          return
+        }
+      } else {
+        ref.__stateCollectionCache = deepClone(param)
+      }
+
+      const obj = {
+        tag: 'fragment',
+        props: {
+          childProps: el.props && el.props.childProps
+        }
+      }
+
+      for (const key in param) {
+        const value = param[key]
+        obj[key] = isObjectLike(value) ? value : { value }
+      }
+
+      el.removeContent()
+      el.content = obj
+
+      return obj
+    },
+
     $setCollection: (param, el, state) => {
       if (!param) return
 

package/Text.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { isUndefined } from '@domql/utils'
 import { getFontSizeByKey, getFontFamily } from '@symbo.ls/scratch'
 
 export const Text = {
@@ -15,18 +16,19 @@ export const Text = {
       const { props, deps } = el
       return props.fontSize ? deps.getFontSizeByKey(props.fontSize) : null
     },
-    fontFamily: ({ props, deps }) => props.fontFamily && ({
+    font: ({ props }) => !isUndefined(props.font) && ({ font: props.font }),
+    fontFamily: ({ props, deps }) => !isUndefined(props.fontFamily) && ({
       fontFamily: deps.getFontFamily(props.fontFamily) || props.fontFamily
     }),
-    lineHeight: ({ props }) => props.lineHeight && ({ lineHeight: props.lineHeight }),
-    // lineHeight: ({ props }) => props.lineHeight && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
-    textDecoration: ({ props }) => props.textDecoration && ({ textDecoration: props.textDecoration }),
-    textTransform: ({ props }) => props.textTransform && ({ textTransform: props.textTransform }),
-    whiteSpace: ({ props }) => props.whiteSpace && ({ whiteSpace: props.whiteSpace }),
-    wordWrap: ({ props }) => props.wordWrap && ({ wordWrap: props.wordWrap }),
-    letterSpacing: ({ props }) => props.letterSpacing && ({ letterSpacing: props.letterSpacing }),
-    textAlign: ({ props }) => props.textAlign && ({ textAlign: props.textAlign }),
-    fontWeight: ({ props }) => props.fontWeight && ({
+    lineHeight: ({ props }) => !isUndefined(props.lineHeight) && ({ lineHeight: props.lineHeight }),
+    // lineHeight: ({ props }) => !isUndefined(props.lineHeight) && getSpacingBasedOnRatio(props, 'lineHeight', null, ''),
+    textDecoration: ({ props }) => !isUndefined(props.textDecoration) && ({ textDecoration: props.textDecoration }),
+    textTransform: ({ props }) => !isUndefined(props.textTransform) && ({ textTransform: props.textTransform }),
+    whiteSpace: ({ props }) => !isUndefined(props.whiteSpace) && ({ whiteSpace: props.whiteSpace }),
+    wordWrap: ({ props }) => !isUndefined(props.wordWrap) && ({ wordWrap: props.wordWrap }),
+    letterSpacing: ({ props }) => !isUndefined(props.letterSpacing) && ({ letterSpacing: props.letterSpacing }),
+    textAlign: ({ props }) => !isUndefined(props.textAlign) && ({ textAlign: props.textAlign }),
+    fontWeight: ({ props }) => !isUndefined(props.fontWeight) && ({
       fontWeight: props.fontWeight,
       fontVariationSettings: '"wght" ' + props.fontWeight
     })
@@ -65,4 +67,8 @@ export const Footnote = {
   props: { fontSize: 'Z' }
 }
 
+export const B = { tag: 'b' }
+
+export const I = { tag: 'i' }
+
 // export const Paragraph = { tag: 'p' }

package/Theme.js

@@ -159,6 +159,14 @@ export const Theme = {
       columnRule: deps.transformBorder(props.columnRule)
     }),
 
+    filter: ({ props, deps }) => !isUndefined(props.filter) && ({
+      filter: props.filter
+    }),
+
+    mixBlendMode: ({ props, deps }) => !isUndefined(props.mixBlendMode) && ({
+      mixBlendMode: props.mixBlendMode
+    }),
+
     appearance: ({ props }) => !isUndefined(props.appearance) && ({
       appearance: props.appearance
     })

package/Transform.js

@@ -2,6 +2,7 @@
 
 export const Transform = {
   class: {
+    zoom: ({ props }) => props.zoom && ({ zoom: props.zoom }),
     transform: ({ props }) => props.transform && ({ transform: props.transform }),
     transformOrigin: ({ props }) => props.transformOrigin && ({ transformOrigin: props.transformOrigin })
   }

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.239",
+  "version": "2.11.242",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "41a7706e6ed0e20fce89aa1a0ed4975f7aa92aac",
+  "gitHead": "56daeda0385e51332c376ac254d54bb6fd8e35e5",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",