@symbo.ls/datepicker 1.1.1 → 1.2.0

package/index.js

@@ -2,60 +2,156 @@
 
 import style from './style'
 
-import { Icon } from '@symbo.ls/icon'
+import { SquareButton, Button } from '@symbo.ls/button'
+import { Flex } from '@symbo.ls/flex'
+import { Grid } from '@symbo.ls/grid'
 
-export const DatePicker = {
-  style,
+const buttonProps = {
+  theme: 'transparent',
+  color: '--theme-quinary-dark-color',
+  ':hover': {
+    theme: 'quinary .child'
+  }
+}
 
+const aside = {
   props: {
-    theme: 'lightDark',
-    padding: 'A',
-    round: 'Z',
-    depth: 16
+    gap: 'X2',
+    margin: '-Z - -Z -X2',
+    padding: 'Z - Z X2',
+    minHeight: '100%',
+    height: '100%',
+    width: '--spacing-D'
   },
 
-  aside: {
-    childExtends: { tag: 'button' },
-    ...[
-      { text: '2020' },
-      // ...
-    ]
-  },
+  cnt: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      overflow: 'hidden auto',
+      boxSize: '100% --spacing-D',
+      top: '0',
+      position: 'absolute',
+      maxHeight: '100%',
+      justifyContent: 'flex-end'
+    },
 
-  main: {
-    header: {
-      icon: {
-        extends: Icon,
-        props: { icon: 'arrowMediumLeft' }
-      },
-      month: {
-        childExtends: { tag: 'span' },
-        ...[
-          { text: 'january' },
-          // ...
-        ]
+    childExtend: {
+      extend: Button,
+      props: {
+        ...buttonProps,
+        fontSize: 'Z1'
       },
-      icon2: {
-        extends: Icon,
-        props: { icon: 'arrowMediumRight' }
+      text: ({ state }) => state.value
+    }
+  }
+
+}
+
+const main = {
+  extend: Flex,
+
+  props: {
+    flex: 1,
+    gap: 'X2',
+    flow: 'column',
+
+    header: {
+      align: 'center space-between'
+    }
+  },
+
+  header: {
+    extend: Flex,
+    left: {
+      extend: SquareButton,
+      props: {
+        ...buttonProps,
+        round: 'C',
+        icon: 'arrowAngleLeft'
       }
     },
-    days: {
-      tag: 'section',
-      header: {
-        childExtends: { tag: 'span' },
-        ...[
-          { text: 'Mo' },
-          // ...
-        ]
-      },
-      content: {
-        childExtends: { tag: 'button' },
-        ...[
-          { text: '1' },
-          // ...
-        ]
+    month: {
+      tag: 'span',
+      text: 'December'
+    },
+    right: {
+      extend: SquareButton,
+      props: {
+        ...buttonProps,
+        round: 'C',
+        icon: 'arrowAngleRight'
       }
     }
+  },
+  days: {
+    extend: Flex,
+    props: {
+      flow: 'column',
+      gap: 'X2'
+    },
+    childExtend: {
+      extend: Grid,
+      props: {
+        columns: 'repeat(7, 1fr)',
+        gap: 'X2'
+      }
+    },
+    weekDays: {
+      childExtend: {
+        extend: Button,
+        props: {
+          ...buttonProps,
+          fontSize: 'Z1',
+          padding: 'X2'
+        }
+      },
+      ...[
+        { text: 'Mo' },
+        { text: 'Tu' },
+        { text: 'We' },
+        { text: 'Th' },
+        { text: 'Fr' },
+        { text: 'Sa' },
+        { text: 'Su' }
+      ]
+    },
+
+    cnt: {
+      childExtend: {
+        extend: SquareButton,
+
+        props: ({ key, state }) => ({
+          ...buttonProps,
+          theme: 'quaternary',
+          active: key === '18',
+          '.active': {
+            theme: 'quinary'
+          }
+        })
+      },
+
+      ...new Array(31).fill(undefined).map((_, i) => ({ text: i + 1 }))
+    }
   }
 }
+
+export const DatePicker = {
+  style,
+  extend: Flex,
+
+  props: {
+    position: 'relative',
+    theme: 'quinary',
+    transition: 'A all',
+    round: 'Z',
+    padding: 'Z Z2 Z X2',
+    gap: 'X2',
+    depth: 16,
+    minHeight: '0',
+    align: 'stretch center'
+  },
+
+  aside,
+  main
+}

package/package.json

@@ -1,9 +1,9 @@
 {
   "name": "@symbo.ls/datepicker",
-  "version": "1.1.1",
+  "version": "1.2.0",
   "main": "index.js",
   "license": "MIT",
-  "gitHead": "12925f3ed5a651a53282e32d28f21c015d3875e0",
+  "gitHead": "769d39aee2ab66f0d64b1e0052893442857e7432",
   "dependencies": {
     "@symbo.ls/block": "latest",
     "@symbo.ls/icon": "latest",

package/style.js

@@ -1,95 +1,13 @@
 'use strict'
 
 export default {
-  maxWidth: `${336 / 16}em`,
-  maxHeight: `${260 / 16}em`,
-  display: 'flex',
-  padding: '0 1em',
-  boxSizing: 'border-box',
-  borderRadius: '10px',
-  button: {
-    border: 'none',
-    outline: 'none',
-    background: 'transparent',
-    cursor: 'pointer'
-  },
-
-  aside: {
-    display: 'flex',
-    flexDirection: 'column',
-    overflowX: 'auto',
-    paddingRight: `${10 / 16}em`,
-
-    button: {
-      opacity: 0.5,
-      marginBottom: `${22 / 12}em`
-    }
-  },
-
   main: {
-    flex: 1,
-    paddingTop: `${14 / 16}em`,
-    paddingBottom: `${10 / 16}em`,
-    overflow: 'hidden',
-
-    display: 'flex',
-    flexDirection: 'column',
-
-    '> header': {
-      display: 'flex',
-      alignItems: 'center',
-      height: 'auto',
-      overflow: 'hidden',
-      width: '100%',
-      padding: `0 ${8 / 16}em ${14 / 16}em ${8 / 16}em`,
-      boxSizing: 'border-box'
-    },
-    '> header > svg': {
-      cursor: 'pointer'
-    },
-
-    '> header > div': {
-      display: 'flex',
-      overflow: 'hidden',
-      flex: 1
-    },
-    '> header span': {
-      minWidth: '100%',
-      textTransform: 'capitalize',
-      textAlign: 'center',
-      fontWeight: 'bold'
-    },
-
-    section: {
-      flex: 1,
-      display: 'flex',
-      flexDirection: 'column'
-    },
-    'section > header': {
-      height: 'auto',
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-      gap: '6px',
-      paddingBottom: `${2 / 16}em`
-    },
-    'section > header span': {
-      textAlign: 'center',
-      fontWeight: 'bold'
-    },
     'section > header span:nth-child(6)': {
       opacity: 0.5
     },
     'section > header span:nth-child(7)': {
       opacity: 0.5
     },
-    'section > div': {
-      flex: 1,
-      display: 'grid',
-      gridTemplateColumns: 'repeat(7, 1fr)',
-      gap: '6px'
-    },
-    'section > div button': {
-    },
     'section > div button:nth-child(7n)': {
       opacity: 0.5
     },