kdutify 0.16.9-rc.0 → 2.6.0

package/src/components/KGrid/KCol.ts

@@ -0,0 +1,134 @@
+import './KGrid.sass'
+
+import Kdu, { KNode, PropOptions } from 'kdu'
+import mergeData from '../../util/mergeData'
+import { upperFirst } from '../../util/helpers'
+
+// no xs
+const breakpoints = ['sm', 'md', 'lg', 'xl']
+
+const breakpointProps = (() => {
+  return breakpoints.reduce((props, val) => {
+    props[val] = {
+      type: [Boolean, String, Number],
+      default: false,
+    }
+    return props
+  }, {} as Dictionary<PropOptions>)
+})()
+
+const offsetProps = (() => {
+  return breakpoints.reduce((props, val) => {
+    props['offset' + upperFirst(val)] = {
+      type: [String, Number],
+      default: null,
+    }
+    return props
+  }, {} as Dictionary<PropOptions>)
+})()
+
+const orderProps = (() => {
+  return breakpoints.reduce((props, val) => {
+    props['order' + upperFirst(val)] = {
+      type: [String, Number],
+      default: null,
+    }
+    return props
+  }, {} as Dictionary<PropOptions>)
+})()
+
+const propMap = {
+  col: Object.keys(breakpointProps),
+  offset: Object.keys(offsetProps),
+  order: Object.keys(orderProps),
+}
+
+function breakpointClass (type: keyof typeof propMap, prop: string, val: boolean | string | number) {
+  let className = type
+  if (val == null || val === false) {
+    return undefined
+  }
+  if (prop) {
+    const breakpoint = prop.replace(type, '')
+    className += `-${breakpoint}`
+  }
+  // Handling the boolean style prop when accepting [Boolean, String, Number]
+  // means Kdu will not convert <k-col sm></k-col> to sm: true for us.
+  // Since the default is false, an empty string indicates the prop's presence.
+  if (type === 'col' && (val === '' || val === true)) {
+    // .col-md
+    return className.toLowerCase()
+  }
+  // .order-md-6
+  className += `-${val}`
+  return className.toLowerCase()
+}
+
+const cache = new Map<string, any[]>()
+
+export default Kdu.extend({
+  name: 'k-col',
+  functional: true,
+  props: {
+    cols: {
+      type: [Boolean, String, Number],
+      default: false,
+    },
+    ...breakpointProps,
+    offset: {
+      type: [String, Number],
+      default: null,
+    },
+    ...offsetProps,
+    order: {
+      type: [String, Number],
+      default: null,
+    },
+    ...orderProps,
+    alignSelf: {
+      type: String,
+      default: null,
+      validator: (str: any) => ['auto', 'start', 'end', 'center', 'baseline', 'stretch'].includes(str),
+    },
+    tag: {
+      type: String,
+      default: 'div',
+    },
+  },
+  render (h, { props, data, children, parent }): KNode {
+    // Super-fast memoization based on props, 5x faster than JSON.stringify
+    let cacheKey = ''
+    for (const prop in props) {
+      cacheKey += String((props as any)[prop])
+    }
+    let classList = cache.get(cacheKey)
+
+    if (!classList) {
+      classList = []
+      // Loop through `col`, `offset`, `order` breakpoint props
+      let type: keyof typeof propMap
+      for (type in propMap) {
+        propMap[type].forEach(prop => {
+          const value: string | number | boolean = (props as any)[prop]
+          const className = breakpointClass(type, prop, value)
+          if (className) classList!.push(className)
+        })
+      }
+
+      const hasColClasses = classList.some(className => className.startsWith('col-'))
+
+      classList.push({
+        // Default to .col if no other col-{bp}-* classes generated nor `cols` specified.
+        col: !hasColClasses || !props.cols,
+        [`col-${props.cols}`]: props.cols,
+        [`offset-${props.offset}`]: props.offset,
+        [`order-${props.order}`]: props.order,
+        [`align-self-${props.alignSelf}`]: props.alignSelf,
+      })
+
+      cache.set(cacheKey, classList)
+    }
+
+    return h(props.tag, mergeData(data, { class: classList }), children)
+  },
+})

package/src/components/KGrid/KContainer.ts

@@ -0,0 +1,62 @@
+import './_grid.sass'
+import './KGrid.sass'
+
+import Grid from './grid'
+
+import mergeData from '../../util/mergeData'
+
+/* @kdujs/component */
+export default Grid('container').extend({
+  name: 'k-container',
+  functional: true,
+  props: {
+    id: String,
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    fluid: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  render (h, { props, data, children }) {
+    let classes
+    const { attrs } = data
+    if (attrs) {
+      // reset attrs to extract utility clases like pa-3
+      data.attrs = {}
+      classes = Object.keys(attrs).filter(key => {
+        // TODO: Remove once resolved
+        if (key === 'slot') return false
+
+        const value = attrs[key]
+
+        // add back data attributes like data-test="foo" but do not
+        // add them as classes
+        if (key.startsWith('data-')) {
+          data.attrs![key] = value
+          return false
+        }
+
+        return value || typeof value === 'string'
+      })
+    }
+
+    if (props.id) {
+      data.domProps = data.domProps || {}
+      data.domProps.id = props.id
+    }
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'container',
+        class: Array<any>({
+          'container--fluid': props.fluid,
+        }).concat(classes || []),
+      }),
+      children
+    )
+  },
+})

package/src/components/KGrid/KFlex.ts

@@ -0,0 +1,5 @@
+import './_grid.sass'
+
+import Grid from './grid'
+
+export default Grid('flex')

package/src/components/KGrid/KGrid.sass

@@ -0,0 +1,41 @@
+@import '../../styles/styles.sass'
+@import './_mixins'
+
+.container
+  +make-container
+  +make-container-max-widths
+
+  &--fluid
+    max-width: 100%
+
+// Row
+//
+// Rows contain and clear the floats of your columns.
+.row
+  +make-row
+
+  & + .row
+    margin-top: $grid-gutter / 2
+
+    &--dense
+      margin-top: $form-grid-gutter / 2
+
+  &--dense
+    margin: -$form-grid-gutter / 2
+
+    > .col,
+    > [class*="col-"]
+      padding: $form-grid-gutter / 2
+
+  // Remove the negative margin from default .row, then the horizontal padding
+  // from all immediate children columns (to prevent runaway style inheritance).
+  &.no-gutters
+    margin: 0
+    > .col,
+    > [class*="col-"]
+      padding: 0
+
+// Columns
+//
+// Common styles for small and large grid columns
++make-grid-columns

package/src/components/KGrid/KLayout.ts

@@ -0,0 +1,5 @@
+import './_grid.sass'
+
+import Grid from './grid'
+
+export default Grid('layout')

package/src/components/KGrid/KRow.ts

@@ -0,0 +1,138 @@
+import './KGrid.sass'
+
+import Kdu, { PropOptions } from 'kdu'
+import mergeData from '../../util/mergeData'
+import { upperFirst } from '../../util/helpers'
+
+// no xs
+const breakpoints = ['sm', 'md', 'lg', 'xl']
+
+const ALIGNMENT = ['start', 'end', 'center']
+
+function makeProps (prefix: string, def: () => PropOptions) {
+  return breakpoints.reduce((props, val) => {
+    props[prefix + upperFirst(val)] = def()
+    return props
+  }, {} as Dictionary<PropOptions>)
+}
+
+const alignValidator = (str: any) => [...ALIGNMENT, 'baseline', 'stretch'].includes(str)
+const alignProps = makeProps('align', () => ({
+  type: String,
+  default: null,
+  validator: alignValidator,
+}))
+
+const justifyValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around'].includes(str)
+const justifyProps = makeProps('justify', () => ({
+  type: String,
+  default: null,
+  validator: justifyValidator,
+}))
+
+const alignContentValidator = (str: any) => [...ALIGNMENT, 'space-between', 'space-around', 'stretch'].includes(str)
+const alignContentProps = makeProps('alignContent', () => ({
+  type: String,
+  default: null,
+  validator: alignContentValidator,
+}))
+
+const propMap = {
+  align: Object.keys(alignProps),
+  justify: Object.keys(justifyProps),
+  alignContent: Object.keys(alignContentProps),
+}
+
+const classMap = {
+  align: 'align',
+  justify: 'justify',
+  alignContent: 'align-content',
+}
+
+function breakpointClass (type: keyof typeof propMap, prop: string, val: string) {
+  let className = classMap[type]
+  if (val == null) {
+    return undefined
+  }
+  if (prop) {
+    // alignSm -> Sm
+    const breakpoint = prop.replace(type, '')
+    className += `-${breakpoint}`
+  }
+  // .align-items-sm-center
+  className += `-${val}`
+  return className.toLowerCase()
+}
+
+const cache = new Map<string, any[]>()
+
+export default Kdu.extend({
+  name: 'k-row',
+  functional: true,
+  props: {
+    tag: {
+      type: String,
+      default: 'div',
+    },
+    dense: Boolean,
+    noGutters: Boolean,
+    align: {
+      type: String,
+      default: null,
+      validator: alignValidator,
+    },
+    ...alignProps,
+    justify: {
+      type: String,
+      default: null,
+      validator: justifyValidator,
+    },
+    ...justifyProps,
+    alignContent: {
+      type: String,
+      default: null,
+      validator: alignContentValidator,
+    },
+    ...alignContentProps,
+  },
+  render (h, { props, data, children }) {
+    // Super-fast memoization based on props, 5x faster than JSON.stringify
+    let cacheKey = ''
+    for (const prop in props) {
+      cacheKey += String((props as any)[prop])
+    }
+    let classList = cache.get(cacheKey)
+
+    if (!classList) {
+      classList = []
+      // Loop through `align`, `justify`, `alignContent` breakpoint props
+      let type: keyof typeof propMap
+      for (type in propMap) {
+        propMap[type].forEach(prop => {
+          const value: string = (props as any)[prop]
+          const className = breakpointClass(type, prop, value)
+          if (className) classList!.push(className)
+        })
+      }
+
+      classList.push({
+        'no-gutters': props.noGutters,
+        'row--dense': props.dense,
+        [`align-${props.align}`]: props.align,
+        [`justify-${props.justify}`]: props.justify,
+        [`align-content-${props.alignContent}`]: props.alignContent,
+      })
+
+      cache.set(cacheKey, classList)
+    }
+
+    return h(
+      props.tag,
+      mergeData(data, {
+        staticClass: 'row',
+        class: classList,
+      }),
+      children
+    )
+  },
+})

package/src/components/KGrid/KSpacer.ts

@@ -0,0 +1,4 @@
+import './_grid.sass'
+import { createSimpleFunctional } from '../../util/helpers'
+
+export default createSimpleFunctional('spacer', 'div', 'k-spacer')

package/src/components/KGrid/_grid.sass

@@ -0,0 +1,116 @@
+@import '../../styles/styles.sass'
+
+.container
+  &.grow-shrink-0
+    flex-grow: 0
+    flex-shrink: 0
+
+  &.fill-height
+    align-items: center
+    display: flex
+    flex-wrap: wrap
+
+    > .row
+      flex: 1 1 100%
+      max-width: calc(100% + #{$grid-gutter})
+
+    > .layout
+      height: 100%
+      flex: 1 1 auto
+
+      &.grow-shrink-0
+        flex-grow: 0
+        flex-shrink: 0
+
+  &.grid-list
+    @each $size, $gutter in $grid-gutters
+      &-#{$size}
+        .layout
+          .flex
+            padding: $gutter / 2
+
+        .layout:only-child
+          margin: -$gutter / 2
+
+        .layout:not(:only-child)
+          margin: auto (-$gutter / 2)
+
+        *:not(:only-child)
+          .layout:first-child
+            margin-top: -$gutter / 2
+
+          .layout:last-child
+            margin-bottom: -$gutter / 2
+
+.layout
+  display: flex
+  flex: 1 1 auto
+  flex-wrap: nowrap
+  min-width: 0
+
+  &.reverse
+    flex-direction: row-reverse
+
+  &.column
+    flex-direction: column
+
+    &.reverse
+      flex-direction: column-reverse
+
+    > .flex
+      max-width: 100%
+
+  &.wrap
+    flex-wrap: wrap
+
+  &.grow-shrink-0
+    flex-grow: 0
+    flex-shrink: 0
+
+@each $size, $width in $grid-breakpoints
+  @media all and (min-width: #{$width})
+    $n: $grid-columns
+    @while $n > 0
+      .flex.#{$size}#{$n}
+        flex-basis: $n / $grid-columns * 100%
+        flex-grow: 0
+        max-width: $n / $grid-columns * 100%
+
+      .flex.order-#{$size}#{$n}
+        order: $n
+
+      $n: $n - 1
+
+    $m: $grid-columns
+    @while $m >= 0
+      .flex.offset-#{$size}#{$m}
+        // Offsets can only ever work in row layouts
+        +ltr()
+          margin-left: $m / $grid-columns * 100%
+        +rtl()
+          margin-right: $m / $grid-columns * 100%
+
+      $m: $m - 1
+
+.flex,
+.child-flex > *
+  flex: 1 1 auto
+  max-width: 100%
+
+  &.grow-shrink-0
+    flex-grow: 0
+    flex-shrink: 0
+
+.spacer
+  flex-grow: 1 !important
+
+.grow
+  flex-grow: 1 !important
+  flex-shrink: 0 !important
+
+.shrink
+  flex-grow: 0 !important
+  flex-shrink: 1 !important
+
+.fill-height
+  height: 100%

package/src/components/KGrid/_mixins.sass

@@ -0,0 +1,72 @@
+=make-container($padding-x: $container-padding-x)
+  width: 100%
+  padding: $padding-x
+  margin-right: auto
+  margin-left: auto
+
+// For each breakpoint, define the maximum width of the container in a media query
+=make-container-max-widths($max-widths: $container-max-widths, $breakpoints: $grid-breakpoints)
+  @each $breakpoint, $container-max-width in $max-widths
+    +media-breakpoint-up($breakpoint, $breakpoints)
+      max-width: $container-max-width
+
+=make-row($gutter: $grid-gutter)
+  display: flex
+  flex-wrap: wrap
+  flex: 1 1 auto
+  margin: -$gutter / 2
+
+=make-col-ready($gutter: $grid-gutter)
+  // Prevent columns from becoming too narrow when at smaller grid tiers by
+  // always setting `width: 100%;`. This works because we use `flex` values
+  // later on to override this initial width.
+  width: 100%
+  padding: $gutter / 2
+
+=make-col($size, $columns: $grid-columns)
+  flex: 0 0 percentage($size / $columns)
+  // Add a `max-width` to ensure content within each column does not blow out
+  // the width of the column. Applies to IE10+ and Firefox. Chrome and Safari
+  // do not appear to require this.
+  max-width: percentage($size / $columns)
+
+=make-col-offset($size, $columns: $grid-columns)
+  $num: $size / $columns
+  +ltr()
+    margin-left: if($num == 0, 0, percentage($num))
+  +rtl()
+    margin-right: if($num == 0, 0, percentage($num))
+
+=make-grid-columns($columns: $grid-columns, $gutter: $grid-gutter, $breakpoints: $grid-breakpoints)
+  // Common properties for all breakpoints
+  %grid-column
+    width: 100%
+    padding: $gutter / 2
+  @each $breakpoint in map-keys($breakpoints)
+    $infix: breakpoint-infix($breakpoint, $breakpoints)
+    // Allow columns to stretch full width below their breakpoints
+    @for $i from 1 through $columns
+      .col#{$infix}-#{$i}
+        @extend %grid-column
+    .col#{$infix},
+    .col#{$infix}-auto
+      @extend %grid-column
+    +media-breakpoint-up($breakpoint, $breakpoints)
+      // Provide basic `.col-{bp}` classes for equal-width flexbox columns
+      .col#{$infix}
+        flex-basis: 0
+        flex-grow: 1
+        max-width: 100%
+      .col#{$infix}-auto
+        flex: 0 0 auto
+        width: auto
+        max-width: 100% // Reset earlier grid tiers
+      @for $i from 1 through $columns
+        .col#{$infix}-#{$i}
+          +make-col($i, $columns)
+      // `$columns - 1` because offsetting by the width of an entire row isn't possible
+      @for $i from 0 through $columns - 1
+        @if not ($infix == "" and $i == 0)
+          // Avoid emitting useless .offset-0
+          .offset#{$infix}-#{$i}
+            +make-col-offset($i, $columns)

package/src/components/KGrid/grid.ts

@@ -0,0 +1,53 @@
+// Types
+import Kdu, { KNode } from 'kdu'
+
+export default function KGrid (name: string) {
+  /* @kdujs/component */
+  return Kdu.extend({
+    name: `k-${name}`,
+
+    functional: true,
+
+    props: {
+      id: String,
+      tag: {
+        type: String,
+        default: 'div',
+      },
+    },
+
+    render (h, { props, data, children }): KNode {
+      data.staticClass = (`${name} ${data.staticClass || ''}`).trim()
+
+      const { attrs } = data
+      if (attrs) {
+        // reset attrs to extract utility clases like pa-3
+        data.attrs = {}
+        const classes = Object.keys(attrs).filter(key => {
+          // TODO: Remove once resolved
+          if (key === 'slot') return false
+
+          const value = attrs[key]
+
+          // add back data attributes like data-test="foo" but do not
+          // add them as classes
+          if (key.startsWith('data-')) {
+            data.attrs![key] = value
+            return false
+          }
+
+          return value || typeof value === 'string'
+        })
+
+        if (classes.length) data.staticClass += ` ${classes.join(' ')}`
+      }
+
+      if (props.id) {
+        data.domProps = data.domProps || {}
+        data.domProps.id = props.id
+      }
+
+      return h(props.tag, data, children)
+    },
+  })
+}

package/src/components/KGrid/index.ts

@@ -0,0 +1,26 @@
+import KContainer from './KContainer'
+import KCol from './KCol'
+import KRow from './KRow'
+import KSpacer from './KSpacer'
+import KLayout from './KLayout'
+import KFlex from './KFlex'
+
+export {
+  KContainer,
+  KCol,
+  KRow,
+  KSpacer,
+  KLayout,
+  KFlex,
+}
+
+export default {
+  $_kdutify_subcomponents: {
+    KContainer,
+    KCol,
+    KRow,
+    KSpacer,
+    KLayout,
+    KFlex,
+  },
+}