smbls 0.15.18 → 0.15.20

package/package.json

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

package/src/atoms/Block.js

@@ -99,10 +99,11 @@ export const Block = {
     gridArea: ({ props }) => props.gridArea && ({ gridArea: props.gridArea }),
 
     flex: ({ props }) => props.flex && ({ flex: props.flex }),
+    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
     alignItems: ({ props }) => props.alignItems && ({ alignItems: props.alignItems }),
     alignContent: ({ props }) => props.alignContent && ({ alignContent: props.alignContent }),
     justifyContent: ({ props }) => props.justifyContent && ({ justifyContent: props.justifyContent }),
-    flexDirection: ({ props }) => props.flexDirection && ({ flexDirection: props.flexDirection }),
+    justifyItems: ({ props }) => props.justifyItems && ({ justifyItems: props.justifyItems }),
     alignSelf: ({ props }) => props.alignSelf && ({ alignSelf: props.alignSelf }),
     order: ({ props }) => props.order && ({ order: props.order }),
 

package/src/atoms/Flex.js

@@ -2,8 +2,7 @@
 
 export const Flex = {
   props: {
-    display: 'flex',
-    flow: 'row'
+    display: 'flex'
   },
 
   class: {

package/src/atoms/Grid.js

@@ -6,11 +6,20 @@ export const Grid = {
   props: { display: 'grid' },
 
   class: {
-    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
-    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
     area: ({ props }) => props.area ? ({ gridArea: props.area }) : null,
     template: ({ props }) => props.template ? ({ gridTemplate: props.template }) : null,
     templateAreas: ({ props }) => props.templateAreas ? ({ gridTemplateAreas: props.templateAreas }) : null,
+
+    columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,
+    templateColumns: ({ props }) => props.templateColumns ? ({ gridTemplateColumns: props.templateColumns }) : null,
+    autoColumns: ({ props }) => props.autoColumns ? ({ gridAutoColumns: props.autoColumns }) : null,
+
+    rows: ({ props }) => props.rows ? ({ gridTemplateRows: props.rows }) : null,
+    templateRows: ({ props }) => props.templateRows ? ({ gridTemplateRows: props.templateRows }) : null,
+    autoRows: ({ props }) => props.autoRows ? ({ gridAutoRows: props.autoRows }) : null,
+
+    autoFlow: ({ props }) => props.autoFlow ? ({ gridAutoFlow: props.autoFlow }) : null,
+
     columnGap: ({ props }) => props.columnGap ? getSpacingBasedOnRatio(props, 'columnGap') : null,
     rowGap: ({ props }) => props.rowGap ? getSpacingBasedOnRatio(props, 'rowGap') : null
   }

package/src/atoms/Shape/index.js

@@ -25,7 +25,7 @@ export const Shape = {
       const { shape, shapeDirection } = props
       if (!shape || !shapeDirection) return
       const shapeDir = SHAPES[shape + 'Direction']
-      return shape ? shapeDir[shapeDirection || 'top'] : null
+      return shape && shapeDir ? shapeDir[shapeDirection || 'left'] : null
     },
     shapeDirectionColor: el => {
       const { props } = el

package/src/atoms/Shape/style.js

@@ -1,6 +1,7 @@
 'use strict'
 
 import { UNIT, getColor, getTheme } from '@symbo.ls/scratch' // eslint-disable-line no-unused-vars
+import { Timing } from '../Timing'
 
 export const depth = {
   4: { boxShadow: `rgba(0,0,0,.10) 0 2${UNIT.default} 4${UNIT.default}` },
@@ -11,37 +12,22 @@ export const depth = {
   42: { boxShadow: `rgba(0,0,0,.10) 0 20${UNIT.default} 42${UNIT.default}` }
 }
 
-const getComputedBackgroundColor = el => {
-  const { props, node } = el
-  const propsColor = getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
-  // const propsTheme = getTheme(props.theme)
-
-  if (!propsColor) {
-    // const computedStyle = window.getComputedStyle(node)
-    // // if (props.shapeDirection) {
-    // //   console.group(el.parent.parent.parent.key + ' - ' + el.parent.key)
-    // //   console.log(propsTheme)
-    // //   console.log(getColor(props.borderColor))
-    // //   console.log(getColor(props.backgroundColor))
-    // //   console.log(getColor(props.background))
-    // //   console.log(computedStyle.getPropertyValue('border-color'))
-    // //   console.log(computedStyle.getPropertyValue('background'))
-    // //   console.log(computedStyle.getPropertyValue('background-color'))
-    // //   console.log(el)
-    // //   console.groupEnd(el.parent.parent.parent.key + ' - ' + el.parent.key)
-    // // }
-    // return computedStyle.getPropertyValue('border-color') ||
-    //   computedStyle.getPropertyValue('background') ||
-    //   computedStyle.getPropertyValue('background-color')
-  }
+const getComputedBackgroundColor = ({ props }) => {
+  return getColor(props.borderColor) || getColor(props.backgroundColor) || getColor(props.background)
+}
 
-  return propsColor
+const inheritTransition = (el) => {
+  const exec = Timing.class.transition(el)
+  return exec && exec['transition']
 }
 
 export const SHAPES = {
   rectangle: {},
   circle: { borderRadius: '100%' },
   bubble: {},
+  tv: {
+    borderRadius: '1.15em/2.5em'
+  },
 
   tooltip: el => ({
     position: el.props.position || 'relative',
@@ -52,6 +38,8 @@ export const SHAPES = {
       height: '0px',
       border: `.35em solid`,
       borderColor: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'border-color',
       position: 'absolute',
       borderRadius: '.15em'
     }
@@ -60,7 +48,7 @@ export const SHAPES = {
   tooltipDirection: {
     top: {
       '&:before': {
-        top: '-.1em',
+        top: '0',
         left: '50%',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
@@ -68,21 +56,21 @@ export const SHAPES = {
     right: {
       '&:before': {
         top: '50%',
-        right: '-.1em',
-        transform: 'translate(-50%, -50%) rotate(45deg)'
+        right: '0',
+        transform: 'translate(50%, -50%) rotate(45deg)'
       }
     },
     bottom: {
       '&:before': {
-        bottom: '-.1em',
+        bottom: '0',
         left: '50%',
-        transform: 'translate(-50%, -50%) rotate(45deg)'
+        transform: 'translate(-50%, 50%) rotate(45deg)'
       }
     },
     left: {
       '&:before': {
         top: '50%',
-        left: '-.1em',
+        left: '0',
         transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     }
@@ -93,12 +81,16 @@ export const SHAPES = {
     '&:before': {
       content: '""',
       display: 'block',
-      width: '0',
-      height: '0',
-      border: `16px solid`,
-      borderColor: getComputedBackgroundColor(el),
-      borderRadius: '6px',
-      position: 'absolute'
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background',
+      borderRadius: '.25em',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%'
     }
   }),
 
@@ -107,28 +99,105 @@ export const SHAPES = {
       '&:before': {
         bottom: '100%',
         left: '50%',
-        transform: 'translate(-50%, 60%) rotate(45deg)'
+        transform: 'translate(-50%, 50%) rotate(45deg)'
       }
     },
     right: {
       '&:before': {
         top: '50%',
         left: '100%',
-        transform: 'translate(-60%, -50%) rotate(45deg)'
+        transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     },
     bottom: {
       '&:before': {
         top: '100%',
         left: '50%',
-        transform: 'translate(-50%, -60%) rotate(45deg)'
+        transform: 'translate(-50%, -50%) rotate(45deg)'
       }
     },
     left: {
       '&:before': {
         top: '50%',
         right: '100%',
-        transform: 'translate(60%, -50%) rotate(45deg)'
+        transform: 'translate(50%, -50%) rotate(45deg)'
+      }
+    }
+  },
+
+  hexagon: el => ({
+    position: 'relative',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      borderRadius: '.25em',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      height: '73%',
+      background: getComputedBackgroundColor(el),
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+    },
+    '&:before': {
+      left: '0',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    },
+    '&:after': {
+      left: '100%',
+      transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+    }
+  }),
+
+  chevron: el => ({
+    position: 'relative',
+    // overflow: 'hidden',
+    '&:before, &:after': {
+      content: '""',
+      display: 'block',
+      position: 'absolute',
+      zIndex: '-1',
+      aspectRatio: '1/1',
+      top: '50%',
+      transformOrigin: '50% 50%',
+      transition: inheritTransition(el),
+      transitionProperty: 'background'
+
+    },
+    '&:before': {
+      background: `linear-gradient(225deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%), linear-gradient(315deg, ${getComputedBackgroundColor(el)} 25%, transparent 25%)`
+    },
+    '&:after': {
+      background: getComputedBackgroundColor(el),
+      borderRadius: '.25em'
+    }
+  }),
+
+  chevronDirection: {
+    left: {
+      '&:before': {
+        height: '100%',
+        left: '100%',
+        transform: 'translate3d(-1%, -50%, 1px) scale(-1, 1)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '0',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
+      }
+    },
+    right: {
+      '&:before': {
+        height: '100%',
+        left: '0',
+        transform: 'translate3d(-99%, -50%, 1px)'
+      },
+      '&:after': {
+        height: '73%',
+        left: '100%',
+        transform: 'translate3d(-50%, -50%, 1px) rotate(45deg)'
       }
     }
   }