@symbo.ls/atoms 2.11.380 → 2.11.389

package/Block.js

@@ -16,19 +16,21 @@ export const Block = {
     getSpacingByKey,
     transfromGap,
     transformSizeRatio,
-    transformSize
+    transformSize,
+    isUndefined,
+    isString
   },
 
   class: {
-    boxSizing: ({ props }) => !isUndefined(props.boxSizing)
+    boxSizing: ({ props, deps }) => !deps.isUndefined(props.boxSizing)
       ? ({ boxSizing: props.boxSizing })
       : { boxSizing: 'border-box' },
 
-    display: ({ props }) => !isUndefined(props.display) && ({
+    display: ({ props, deps }) => !deps.isUndefined(props.display) && ({
       display: props.display
     }),
 
-    hide: ({ props }) => props.hide && ({
+    hide: ({ props, deps }) => props.hide && ({
       display: 'none !important'
     }),
 
@@ -36,7 +38,7 @@ export const Block = {
     height: ({ props, deps }) => deps.transformSizeRatio('height', props),
 
     boxSize: ({ props, deps }) => {
-      if (!isString(props.boxSize)) return
+      if (!deps.isString(props.boxSize)) return
       const [height, width] = props.boxSize.split(' ')
       return {
         ...deps.transformSize('height', height),
@@ -47,7 +49,7 @@ export const Block = {
     minWidth: ({ props, deps }) => deps.transformSizeRatio('minWidth', props),
     maxWidth: ({ props, deps }) => deps.transformSizeRatio('maxWidth', props),
     widthRange: ({ props, deps }) => {
-      if (!isString(props.widthRange)) return
+      if (!deps.isString(props.widthRange)) return
       const [minWidth, maxWidth] = props.widthRange.split(' ')
       return {
         ...deps.transformSize('minWidth', minWidth),
@@ -58,7 +60,7 @@ export const Block = {
     minHeight: ({ props, deps }) => deps.transformSizeRatio('minHeight', props),
     maxHeight: ({ props, deps }) => deps.transformSizeRatio('maxHeight', props),
     heightRange: ({ props, deps }) => {
-      if (!isString(props.heightRange)) return
+      if (!deps.isString(props.heightRange)) return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
         ...deps.transformSize('minHeight', minHeight),
@@ -67,7 +69,7 @@ export const Block = {
     },
 
     minSize: ({ props, deps }) => {
-      if (!isString(props.minSize)) return
+      if (!deps.isString(props.minSize)) return
       const [minHeight, minWidth] = props.minSize.split(' ')
       return {
         ...deps.transformSize('minHeight', minHeight),
@@ -76,7 +78,7 @@ export const Block = {
     },
 
     maxSize: ({ props, deps }) => {
-      if (!isString(props.maxSize)) return
+      if (!deps.isString(props.maxSize)) return
       const [maxHeight, maxWidth] = props.maxSize.split(' ')
       return {
         ...deps.transformSize('maxHeight', maxHeight),
@@ -84,11 +86,11 @@ export const Block = {
       }
     },
 
-    direction: ({ props }) => !isUndefined(props.direction) && ({
+    direction: ({ props, deps }) => !deps.isUndefined(props.direction) && ({
       direction: props.direction
     }),
 
-    aspectRatio: ({ props }) => !isUndefined(props.aspectRatio) && ({
+    aspectRatio: ({ props, deps }) => !deps.isUndefined(props.aspectRatio) && ({
       aspectRatio: props.aspectRatio
     }),
 
@@ -97,7 +99,7 @@ export const Block = {
     padding: ({ props, deps }) => deps.transformSizeRatio('padding', props),
     scrollPadding: ({ props, deps }) => deps.transformSizeRatio('scrollPadding', props),
     paddingInline: ({ props, deps }) => {
-      if (!isString(props.paddingInline)) return
+      if (!deps.isString(props.paddingInline)) return
       const [paddingInlineStart, paddingInlineEnd] = props.paddingInline.split(' ')
       return {
         ...deps.transformSize('paddingInlineStart', paddingInlineStart),
@@ -105,7 +107,7 @@ export const Block = {
       }
     },
     paddingBlock: ({ props, deps }) => {
-      if (!isString(props.paddingBlock)) return
+      if (!deps.isString(props.paddingBlock)) return
       const [paddingBlockStart, paddingBlockEnd] = props.paddingBlock.split(' ')
       return {
         ...deps.transformSize('paddingBlockStart', paddingBlockStart),
@@ -119,7 +121,7 @@ export const Block = {
 
     margin: ({ props, deps }) => deps.transformSizeRatio('margin', props),
     marginInline: ({ props, deps }) => {
-      if (!isString(props.marginInline)) return
+      if (!deps.isString(props.marginInline)) return
       const [marginInlineStart, marginInlineEnd] = props.marginInline.split(' ')
       return {
         ...deps.transformSize('marginInlineStart', marginInlineStart),
@@ -127,7 +129,7 @@ export const Block = {
       }
     },
     marginBlock: ({ props, deps }) => {
-      if (!isString(props.marginBlock)) return
+      if (!deps.isString(props.marginBlock)) return
       const [marginBlockStart, marginBlockEnd] = props.marginBlock.split(' ')
       return {
         ...deps.transformSize('marginBlockStart', marginBlockStart),
@@ -139,46 +141,57 @@ export const Block = {
     marginBlockStart: ({ props, deps }) => deps.transformSizeRatio('marginBlockStart', props),
     marginBlockEnd: ({ props, deps }) => deps.transformSizeRatio('marginBlockEnd', props),
 
-    gap: ({ props }) => !isUndefined(props.gap) && ({
+    gap: ({ props, deps }) => !deps.isUndefined(props.gap) && ({
       gap: transfromGap(props.gap)
     }),
     gridArea: ({ props, deps }) => props.gridArea && ({ gridArea: props.gridArea }),
 
-    flex: ({ props }) => props.flex && ({
+    float: ({ props, deps }) => !deps.isUndefined(props.float) && ({
+      float: props.float
+    }),
+
+    flex: ({ props, deps }) => props.flex && ({
       flex: props.flex
     }),
-    flexDirection: ({ props }) => !isUndefined(props.flexDirection) && ({
+    flexDirection: ({ props, deps }) => !deps.isUndefined(props.flexDirection) && ({
       flexDirection: props.flexDirection
     }),
-    alignItems: ({ props }) => !isUndefined(props.alignItems) && ({
+    alignItems: ({ props, deps }) => !deps.isUndefined(props.alignItems) && ({
       alignItems: props.alignItems
     }),
-    alignContent: ({ props }) => !isUndefined(props.alignContent) && ({
+    alignContent: ({ props, deps }) => !deps.isUndefined(props.alignContent) && ({
       alignContent: props.alignContent
     }),
-    justifyContent: ({ props }) => !isUndefined(props.justifyContent) && ({
+    justifyContent: ({ props, deps }) => !deps.isUndefined(props.justifyContent) && ({
       justifyContent: props.justifyContent
     }),
-    justifyItems: ({ props }) => !isUndefined(props.justifyItems) && ({
+    justifyItems: ({ props, deps }) => !deps.isUndefined(props.justifyItems) && ({
       justifyItems: props.justifyItems
     }),
-    alignSelf: ({ props }) => !isUndefined(props.alignSelf) && ({
+    alignSelf: ({ props, deps }) => !deps.isUndefined(props.alignSelf) && ({
       alignSelf: props.alignSelf
     }),
-    order: ({ props }) => !isUndefined(props.order) && ({
+    order: ({ props, deps }) => !deps.isUndefined(props.order) && ({
       order: props.order
     }),
 
-    flexWrap: ({ props }) => !isUndefined(props.flexWrap) && ({
-      display: 'flex',
-      flexFlow: props.flexWrap
-    }),
-    flexFlow: ({ props }) => !isUndefined(props.flexFlow) && ({
+    flexWrap: ({ props, deps }) => !deps.isUndefined(props.flexWrap) && ({
       display: 'flex',
-      flexFlow: props.flexFlow + (props.reverse ? '-reverse' : '')
+      flexFlow: (props.flexFlow || 'row').split(' ')[0] + ' ' + props.flexWrap
     }),
-    flexAlign: ({ props }) => {
-      if (!isString(props.flexAlign)) return
+    flexFlow: ({ props, deps }) => {
+      const { flexFlow, reverse } = props
+      if (!deps.isString(flexFlow)) return
+      let [direction, wrap] = (flexFlow || 'row').split(' ')
+      if (flexFlow.startsWith('x') || flexFlow === 'row') direction = 'row'
+      if (flexFlow.startsWith('y') || flexFlow === 'column') direction = 'column'
+      return {
+        display: 'flex',
+        flexFlow: (direction || '') + (!direction.includes('-reverse') && reverse ? '-reverse' : '') + ' ' + (wrap || '')
+      }
+    },
+    flexAlign: ({ props, deps }) => {
+      if (!deps.isString(props.flexAlign)) return
       const [alignItems, justifyContent] = props.flexAlign.split(' ')
       return {
         display: 'flex',
@@ -187,21 +200,21 @@ export const Block = {
       }
     },
 
-    gridColumn: ({ props }) => !isUndefined(props.gridColumn) && ({
+    gridColumn: ({ props, deps }) => !deps.isUndefined(props.gridColumn) && ({
       gridColumn: props.gridColumn
     }),
-    gridColumnStart: ({ props }) => !isUndefined(props.gridColumnStart) && ({
+    gridColumnStart: ({ props, deps }) => !deps.isUndefined(props.gridColumnStart) && ({
       gridColumnStart: props.gridColumnStart
     }),
-    gridRow: ({ props }) => !isUndefined(props.gridRow) && ({
+    gridRow: ({ props, deps }) => !deps.isUndefined(props.gridRow) && ({
       gridRow: props.gridRow
     }),
-    gridRowStart: ({ props }) => !isUndefined(props.gridRowStart) && ({
+    gridRowStart: ({ props, deps }) => !deps.isUndefined(props.gridRowStart) && ({
       gridRowStart: props.gridRowStart
     }),
 
     size: ({ props, deps }) => {
-      if (!isString(props.heightRange)) return
+      if (!deps.isString(props.heightRange)) return
       const [minHeight, maxHeight] = props.heightRange.split(' ')
       return {
         ...deps.transformSizeRatio('minHeight', minHeight),
@@ -209,29 +222,29 @@ export const Block = {
       }
     },
 
-    resize: ({ props }) => !isUndefined(props.resize) && ({
+    resize: ({ props, deps }) => !deps.isUndefined(props.resize) && ({
       resize: props.resize
     }),
 
-    verticalAlign: ({ props }) => !isUndefined(props.verticalAlign) && ({ verticalAlign: props.verticalAlign }),
+    verticalAlign: ({ props, deps }) => !deps.isUndefined(props.verticalAlign) && ({ verticalAlign: props.verticalAlign }),
 
-    columns: ({ props }) => !isUndefined(props.columns) && ({
+    columns: ({ props, deps }) => !deps.isUndefined(props.columns) && ({
       columns: props.columns
     }),
-    columnRule: ({ props }) => !isUndefined(props.columnRule) && ({
+    columnRule: ({ props, deps }) => !deps.isUndefined(props.columnRule) && ({
       columnRule: props.columnRule
     }),
-    columnWidth: ({ props }) => !isUndefined(props.columnWidth) && ({
+    columnWidth: ({ props, deps }) => !deps.isUndefined(props.columnWidth) && ({
       columnWidth: props.columnWidth
     }),
     columnGap: ({ props, deps }) => deps.transformSizeRatio('columnGap', props),
-    columnSpan: ({ props }) => !isUndefined(props.columnSpan) && ({
+    columnSpan: ({ props, deps }) => !deps.isUndefined(props.columnSpan) && ({
       columnSpan: props.columnSpan
     }),
-    columnFill: ({ props }) => !isUndefined(props.columnFill) && ({
+    columnFill: ({ props, deps }) => !deps.isUndefined(props.columnFill) && ({
       columnFill: props.columnFill
     }),
-    columnCount: ({ props }) => !isUndefined(props.columnCount) && ({
+    columnCount: ({ props, deps }) => !deps.isUndefined(props.columnCount) && ({
       columnCount: props.columnCount
     })
   }
@@ -244,9 +257,10 @@ export const Hr = {
 export const Br = { tag: 'br' }
 export const Div = { tag: 'div' }
 export const Span = { tag: 'span' }
+export const Li = { tag: 'li' }
 export const Ul = {
   tag: 'ul',
-  childExtend: { tag: 'li' }
+  childExtend: { extend: 'Li' }
 }
 // export const Article = { tag: 'article' }
 
@@ -257,7 +271,7 @@ export const Gutter = {
   },
   class: {
     size: ({ props, deps }) => {
-      if (!isString(props.size)) return
+      if (!deps.isString(props.size)) return
       const [height, width] = props.size.split(' ')
       return {
         ...deps.getSpacingByKey('height', height),

package/Iframe.js

@@ -9,6 +9,9 @@ export const Iframe = {
   },
   attr: {
     src: ({ props }) => props.src,
+    srcdoc: ({ props }) => props.srcdoc,
+    sandbox: ({ props }) => props.sandbox,
+    seamless: ({ props }) => props.seamless,
     loading: ({ props }) => props.loading,
     allowfullscreen: ({ props }) => props.allowfullscreen,
     frameborder: ({ props }) => props.frameborder,

package/Svg.js

@@ -11,6 +11,8 @@ export const Svg = {
     'xmlns:xlink': 'http://www.w3.org/1999/xlink'
   },
   html: ({ key, props, context, ...el }) => {
+    if (props.semantic_symbols) return
+
     const { designSystem, utils } = context
     const SVG = designSystem && designSystem.SVG
     const useSvgSprite = props.spriteId || (context.designSystem && context.designSystem.useSvgSprite)

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/atoms",
-  "version": "2.11.380",
+  "version": "2.11.389",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "e7cf06697ab58d0d31fdcafddc125cc03d16dd22",
+  "gitHead": "e260280a4a50ca08fd7df53104a884086dc3da88",
   "dependencies": {
     "@domql/state": "latest",
     "@domql/utils": "latest",