smbls 0.8.3 → 0.8.6

package/package.json

@@ -3,7 +3,7 @@
   "description": "UI Library built on Scratch and DOMQL",
   "private": false,
   "author": "symbo.ls",
-  "version": "0.8.3",
+  "version": "0.8.6",
   "repository": "https://github.com/rackai/symbols",
   "main": "src/index.js",
   "files": [

package/src/Button/index.js

@@ -9,7 +9,11 @@ export const Button = {
   tag: 'button',
   style,
   props: {
-    type: 'button'
+    type: 'button',
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    textDecoration: 'none'
   },
   attr: {
     type: ({ props }) => props.type
@@ -23,11 +27,11 @@ export const SquareButton = {
     width: 'A',
     padding: 'Z',
     aspectRatio: '1 / 1',
+    justifyContent: 'center',
     round: 'Z'
   },
   class: {
     squareButton: {
-      justifyContent: 'center',
       boxSizing: 'content-box'
     }
   }

package/src/Button/style.js

@@ -6,8 +6,4 @@ export default {
   outline: 0,
   cursor: 'pointer',
   fontFamily: 'inherit',
-  display: 'inline-flex',
-  alignItems: 'center',
-  justifyContent: 'center',
-  textDecoration: 'none'
 }

package/src/Flex/index.js

@@ -14,6 +14,7 @@ export const Flex = {
     flow: ({ props }) => ({ flexFlow: props.flow }),
     flexDirection: ({ props }) => ({ flexDirection: props.flexDirection }),
     alignItems: ({ props }) => ({ alignItems: props.alignItems }),
+    alignContent: ({ props }) => ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => ({ justifyContent: props.justifyContent }),
     gap: ({ props }) => mapBasedOnRatio(props, 'gap')
   }

package/src/IconText/index.js

@@ -1,15 +1,14 @@
 'use strict'
 
-import style from './style'
-
-import { Icon, Text, Direction, Block } from '../'
-import { } from '../Flex'
+import { Icon } from '../Icon'
 
 export const IconText = {
-  style,
-
   props: {
-    flexAlign: 'center flex-start'
+    flexAlign: 'center flex-start',
+    display: 'flex',
+    alignItems: 'center',
+    alignContent: 'center',
+    lineHeight: 1
   },
 
   icon: { proto: Icon, if: ({ parent }) => parent.props.icon, props: ({ parent }) => ({ icon: parent.props.icon }) },

package/src/IconText/style.js

@@ -1,11 +1,6 @@
 'use strict'
 
 export default {
-  display: 'flex',
-  alignItems: 'center',
-  alignContent: 'center',
-  lineHeight: 1,
-
   '> svg': {
     // marginInlineEnd: `${0.35}em`
   }

package/src/Link/index.js

@@ -1,5 +1,6 @@
 'use strict'
 
+import { exec } from '@domql/utils'
 import { Shape, Text } from '..'
 
 export const Link = {
@@ -12,7 +13,7 @@ export const Link = {
     aria: {}
   },
   attr: {
-    href: ({ props }) => props.href,
+    href: element => exec(element.props.href, element),
     target: ({ props }) => props.target,
     'aria-label': ({ props }) => props.aria.label || props.text
   }

package/src/Position/index.js

@@ -7,16 +7,10 @@ export const Position = {
 
   class: {
     position: ({ props }) => props.position && ({ position: props.position }),
-    positionAxes: ({ props }) => {
-      const { positionAxes } = props
-      if (typeof positionAxes !== 'string') return
-      const [left, top, right, bottom] = positionAxes.split(' ')
-      return {
-        left: mapSpacing(left, 'left'),
-        top: mapSpacing(top, 'top'),
-        right: mapSpacing(right, 'right'),
-        bottom: mapSpacing(bottom, 'bottom')
-      }
+    inset: ({ props }) => {
+      const { inset } = props
+      if (typeof inset !== 'string') return
+      return { inset: inset.split(' ').map(v => mapSpacing(v,'k').k).join(' ') }
     },
 
     left: ({ props }) => mapSpacing(props.left, 'left'),

package/src/Responsive/index.js

@@ -7,14 +7,10 @@ export const Responsive = {
     init: (el, s) => {
       const { props } = el
 
-      // Object.keys(props)
-      //   .filter(v => v.slice(0, 1) === '@')
-      //   .map()
-
       for (const screen in props) {
         if (screen.slice(0, 1) === '@') {
-          const screenName = screen.slice(1)
-          const responsiveKey = `@media screen and ${RESPONSIVE[screenName]}`
+          const mediaName = screen.slice(1)
+          const responsiveKey = `@media screen and ${RESPONSIVE[mediaName]}`
           const screenProps = props[screen]
           const calculatedScreenProps = {}
 
@@ -41,6 +37,33 @@ export const Responsive = {
               [responsiveKey]: calculatedScreenProps
             }
           }
+        } else if (screen.slice(0, 1) === ':') {
+          const selectorProps = {}
+          const selectorName = screen.slice(1)
+          const underSelectorProps = props[screen]
+          const selectorKey = `&${selectorName}`
+
+          for (const prop in underSelectorProps) {
+            const classProp = el.class[prop]
+            if (typeof classProp !== 'function') continue
+            let calculatedProp = classProp({ props: underSelectorProps })
+
+            if (Array.isArray(underSelectorProps)) {
+              underSelectorProps = Object.assign({}, ...underSelectorProps)
+            }
+
+            for (const finalProp in calculatedProp) {
+              selectorProps[finalProp] = calculatedProp[finalProp]
+            }
+          }
+
+          const { selectors } = el.class
+          if (selectors) selectors[selectorKey] = selectorProps
+          else {
+            el.class.selectors = {
+              [selectorKey]: selectorProps
+            }
+          }
         }
       }
     }