smbls 0.8.29 → 0.8.30

package/package.json

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

package/src/{Box/index.js → Box.js}

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive } from '..'
+import { Shape, Position, Block, Text, Overflow, Transition, Transform, Responsive } from '.'
 
 const PropsCSS = {
   class: {

package/src/{Button/index.js → Button.js}

@@ -1,6 +1,6 @@
 'use strict'
 
-import { IconText } from '../'
+import { IconText } from '.'
 
 const css = {
   appearance: 'none',

package/src/ButtonSet.js

@@ -0,0 +1,10 @@
+'use strict'
+
+import { SquareButton } from './Button'
+import { Flex } from './Flex'
+
+export const ButtonSet = {
+  tag: 'nav',
+  proto: Flex,
+  childProto: SquareButton
+}

package/src/DatePicker/index.js

@@ -3,13 +3,10 @@
 import style from './style'
 
 import Icon from '../Icon'
-import Shape from '../Shape'
-import { Block } from '../Block'
 
 export const DatePicker = {
   style,
 
-  proto: [Shape, Block],
   props: {
     theme: 'lightDark',
     padding: 'A',

package/src/{Flex/index.js → Flex.js}

@@ -1,12 +1,10 @@
 'use strict'
 
-import style from './style'
-import { mapBasedOnRatio } from '../Block'
+import { mapBasedOnRatio } from './Block'
 
 export const Flex = {
-  style,
-
   props: {
+    display: 'flex',
     flow: 'row'
   },
 

package/src/{Grid/index.js → Grid.js}

@@ -1,12 +1,9 @@
 'use strict'
 
-import style from './style'
-import { mapBasedOnRatio } from '../Block'
+import { mapBasedOnRatio } from './Block'
 
 export const Grid = {
-  style,
-
-  props: {},
+  props: { display: 'grid' },
 
   class: {
     columns: ({ props }) => props.columns ? ({ gridTemplateColumns: props.columns }) : null,

package/src/{Label/index.js → Label.js}

@@ -1,7 +1,7 @@
 'use strict'
-import { Block } from '../Block'
-import { Shape } from '../Shape'
-import { Text } from '../Text'
+import { Block } from './Block'
+import { Shape } from './Shape'
+import { Text } from './Text'
 
 export const Label = {
   proto: [Shape, Block, Text],

package/src/{Link/index.js → Link.js}

@@ -1,7 +1,7 @@
 'use strict'
 
 import { exec } from '@domql/utils'
-import { Shape, Text } from '..'
+import { Shape, Text } from '.'
 
 export const Link = {
   proto: [Shape, Text],

package/src/Media.js

@@ -1,6 +1,6 @@
 'use strict'
 
-import { merge } from '@domql/utils'
+import { merge, isArray } from '@domql/utils'
 import { CASES as CONFIG_CASES, MEDIA as CONFIG_MEDIA, getTheme } from '@symbo.ls/scratch'
 
 const convertToClass = (subProps, element) => {
@@ -10,7 +10,11 @@ const convertToClass = (subProps, element) => {
     const classnameExec = className[prop]
     if (typeof classnameExec !== 'function') continue
 
-    const contertedToClass = classnameExec({ props: subProps })
+    let contertedToClass = classnameExec({ props: subProps })
+    if (isArray(contertedToClass)) {
+      contertedToClass = contertedToClass.reduce((a, c) => merge(a, c), {})
+    }
+
     for (const finalProp in contertedToClass) subPropsClassname[finalProp] = contertedToClass[finalProp]
   }
   return subPropsClassname
@@ -38,13 +42,10 @@ const init = (el, s) => {
     } else if (screen.slice(0, 1) === '$') {
       const caseKey = screen.slice(1)
       if (!CONFIG_CASES[caseKey]) continue
-
       const caseProps = props[screen]
-      const execCaseProps = convertToClass(caseProps, el)
-
       const { CASE } = className
       if (!CASE) className.CASE = {}
-      merge(className.CASE, execCaseProps)
+      merge(className.CASE, convertToClass(caseProps, el))
     }
   }
 }
@@ -53,22 +54,25 @@ export const Responsive = {
   on: {
     init,
     initUpdate: el => {
+      // FORCE STATE UPDATE:
       const { props, class: className } = el
       const rootState = el.__root ? el.__root.state : el.state
       // console.log(props)
+      if (el.key !== 'app') return
 
       if (props.theme) {
-        // console.group(props.theme)
         const { theme } = props
+        // console.group(props.theme)
+
+        const convertTheme = getTheme(theme)
 
-        for (const key in theme) {
+        for (const key in convertTheme) {
           if (key.includes('dark') || key.includes('light')) {
             const parse = key.split(': ')[1].split(')')[0]
             if (rootState.globalTheme === parse) {
               props.theme = getTheme(theme[key])
             } else props.theme = theme
             className.MEDIA_FORCED_BY_STATE = props.theme
-            props.generatedTheme = true
           }
         }
         // console.groupEnd(props.theme)

package/src/{Notification/index.js → Notification.js}

@@ -1,6 +1,6 @@
 'use strict'
 
-import { Shape, Block, IconText, Direction, Flex, Text } from '../'
+import { Shape, Block, IconText, Direction, Flex, Text } from '.'
 
 export const Notification = {
   style: { cursor: 'pointer' },

package/src/{Overflow/index.js → Overflow.js}

@@ -2,6 +2,6 @@
 
 export const Overflow = {
   class: {
-    overflow: ({ props }) => props.overflow && ({ overflow: props.overflow }),
+    overflow: ({ props }) => props.overflow && ({ overflow: props.overflow })
   }
 }

package/src/{Pills/index.js → Pills.js}

@@ -1,5 +1,4 @@
 'use strict'
-import Shape from '../Shape'
 
 export const Pills = {
   style: {
@@ -18,13 +17,10 @@ export const Pills = {
   },
   childProto: {
     tag: 'div',
-    proto: Shape,
     props: {
       round: 42,
       theme: 'White'
     }
   },
-  ...[
-    {}, {}, {}
-  ]
+  ...[{}, {}, {}]
 }

package/src/{SideBar/index.js → Sidebar.js}

@@ -1,5 +1,6 @@
 'use strict'
-import { Icon, Link } from '../'
+
+import { Icon, Link } from '.'
 
 const MenuItem = {
   proto: Link,

package/src/{Transform/index.js → Transform.js}

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

package/src/Block/style.js

@@ -1 +0,0 @@
-'use strict'

package/src/Button/style.js

@@ -1,4 +0,0 @@
-'use strict'
-
-export default {
-}

package/src/ButtonSet/index.js

@@ -1,14 +0,0 @@
-'use strict'
-
-import { SquareButton } from '../Button'
-import { Shape } from '../Shape'
-import { Flex } from '../Flex'
-import { Block } from '../Block'
-
-export const ButtonSet = {
-  tag: 'nav',
-  proto: [Shape, Flex, Block],
-  childProto: {
-    proto: [SquareButton]
-  }
-}

package/src/Flex/style.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export default {
-  display: 'flex'
-}

package/src/Grid/style.js

@@ -1,5 +0,0 @@
-'use strict'
-
-export default {
-  display: 'grid'
-}

package/src/Text/style.js

@@ -1,2 +0,0 @@
-'use strict'
-

package/src/Transition/style.js

@@ -1,2 +0,0 @@
-'use strict'
-