kdutify 0.16.9-rc.0

package/src/stylus/settings/_variables.styl

@@ -0,0 +1,396 @@
+@require './_theme'
+
+// ============================================================
+// Kdutify variables
+// ============================================================
+
+$color-pack := true
+
+// Material Design
+// ============================================================
+$material-left-padding := 16px
+$material-right-padding := 16px
+
+// Grid
+// ============================================================
+$grid-breakpoints := {
+  xs: 0
+  sm: 600px
+  md: 960px
+  lg: (1280px - 16px) // Desktop gets a 16dp reduction
+  xl: (1920px - 16px) // https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
+}
+
+$grid-gutter = 8px
+$grid-columns := 12
+$grid-gutters := {
+  xs: ($grid-gutter / 4)
+  sm: ($grid-gutter / 2)
+  md: $grid-gutter
+  lg: ($grid-gutter * 2)
+  xl: ($grid-gutter * 3)
+}
+
+$container-max-widths := {
+  sm: $grid-breakpoints.sm
+  md: $grid-breakpoints.md
+  lg: $grid-breakpoints.lg
+  xl: $grid-breakpoints.xl
+}
+
+
+// Display
+// ============================================================
+$display-breakpoints := {
+  xs-only: "only screen and (max-width: %s)" % ($grid-breakpoints.sm - 1)
+  sm-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.sm ($grid-breakpoints.md  - 1))
+  sm-and-down: "only screen and (max-width: %s)" % ($grid-breakpoints.md - 1)
+  sm-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.sm
+  md-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.md ($grid-breakpoints.lg  - 1))
+  md-and-down: "only screen and (max-width: %s )" % ($grid-breakpoints.lg - 1)
+  md-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.md
+  lg-only: "only screen and (min-width: %s) and (max-width: %s)" % ($grid-breakpoints.lg ($grid-breakpoints.xl - 1))
+  lg-and-down: "only screen and (max-width: (%s - 1))" % $grid-breakpoints.xl
+  lg-and-up: "only screen and (min-width: %s)" % $grid-breakpoints.lg
+  xl-only: "only screen and (min-width: %s)" % $grid-breakpoints.xl
+}
+
+
+// Spacing
+// ============================================================
+$spacer := 16px
+$spacer-x := $spacer
+$spacer-y := $spacer
+$spacers := {
+  zero: {
+    x: 0,
+    y: 0
+  },
+  one: {
+    x: ($spacer-x * .25),
+    y: ($spacer-y * .25)
+  },
+  two: {
+    x: ($spacer-x * .5),
+    y: ($spacer-y * .5)
+  },
+  three: {
+    x: $spacer-x,
+    y: $spacer-y
+  },
+  four: {
+    x: ($spacer-x * 1.5),
+    y: ($spacer-y * 1.5)
+  },
+  five: {
+    x: ($spacer-x * 3),
+    y: ($spacer-y * 3)
+  }
+}
+
+$font-weights := {
+  thin: 100,
+  light: 300,
+  regular: 400,
+  medium: 500,
+  bold: 700,
+  black: 900
+}
+
+// Headings
+// ============================================================
+$heading-color := $theme.secondary
+$headings := {
+  h1: { size: 112px, weight: 300, line-height: 1, letter-spacing: -.04em },
+  h2: { size: 56px, weight: 400, line-height: 1.35, letter-spacing: -.02em },
+  h3: { size: 45px, weight: 400, line-height: 48px, letter-spacing: normal },
+  h4: { size: 34px, weight: 400, line-height: 40px, letter-spacing: normal },
+  h5: { size: 24px, weight: 400, line-height: 32px, letter-spacing: normal },
+  h6: { size: 20px, weight: 500, line-height: 1, letter-spacing: .02em },
+  subheading: { size: 16px, weight: 400 },
+  body-2: { size: 14px, weight: 500 },
+  body-1: { size: 14px, weight: 400 },
+  caption: { size: 12px, weight: 400 },
+  button: { size: 14px, weight: 500 }
+}
+
+
+// Transitions
+$transition := {
+  fast-out-slow-in: cubic-bezier(0.4, 0.0, 0.2, 1),
+  linear-out-slow-in: cubic-bezier(0.0, 0.0, 0.2, 1),
+  fast-out-linear-in: cubic-bezier(0.4, 0.0, 1, 1),
+  ease-in-out: cubic-bezier(0.4, 0.0, 0.6, 1),
+  fast-in-fast-out: cubic-bezier(.25,.8,.25,1),
+  swing: cubic-bezier(.25,.8,.50,1)
+}
+
+$primary-transition := 0.3s $transition.swing
+$secondary-transition := 0.2s $transition.ease-in-out
+
+// Components
+// ============================================================
+
+// Alerts
+$alert-color := inherit
+$alert-border-radius := 0
+$alert-border-width := 4px 0 0 0
+$alert-font-size := $font-size-root
+$alert-icon-color := rgba($material-light.fg-color, .3)
+$alert-icon-font-size := 24px
+$alert-padding := 16px
+$alert-margin := $spacers.one.y auto
+
+// Badges
+$badge-border-radius := 50%
+$badge-color := $material-dark.fg-color
+$badge-font-family := $body-font-family
+$badge-font-size := 14px
+$badge-height := 22px
+$badge-top := 0
+$badge-right := 0
+$badge-width := 22px
+
+// Breadcrumbs
+$breadcrumbs-flex := 0 1 auto
+$breadcrumbs-height := 40px
+$breadcrumbs-item-font-size := 14px
+$breadcrumbs-margin := 0
+$breadcrumbs-padding := 0 14px
+
+/** Buttons */
+
+// Base
+$button-border-radius := 2px
+$button-color := $material-light.fg-color
+$button-background-color := #999999
+$button-height := 36px
+$button-font-size := 14px
+$button-font-weight := 500
+$button-margin-y := 6px
+$button-margin-x := 8px
+$button-margin := $button-margin-y $button-margin-x
+$button-min-width := 88px
+$button-padding := 0 16px
+$button-text-transform := uppercase
+
+$button-dark-overlay := rgba($material-light.fg-color, .12)
+$button-dark-disabled-color := rgba($material-light.fg-color, .3)
+$button-light-overlay := rgba($material-dark.fg-color, .12)
+$button-light-disabled-color := rgba($material-dark.fg-color, .26)
+
+$button-small-height := 28px
+$button-small-font-size := 13px
+
+$button-large-height := 44px
+$button-large-font-size := 15px
+
+$button-floating-width := 56px
+$button-floating-icon-height := 24px
+$button-floating-icon-width := 24px
+$button-floating-small-width := 40px
+$button-floating-large-width := 72px
+$button-floating-small-icon-width := 18px
+$button-floating-large-icon-width := 30px
+
+// Button Dropdown
+$button-dropdown-font-size := 16px
+$button-dropdown-font-weight := 500
+$button-dropdown-overflow-editable-height := 42px
+$button-dropdown-overflow-editable-min-width := 102px
+$button-dropdown-overflow-editable-padding := 0 16px
+$button-dropdown-border-bottom := 1px solid $material-twelve-percent-dark
+$button-dropdown-input-width := calc(100% - 40px)
+$button-dropdown-input-padding-left := 16px
+$button-dropdown-background := #fff
+
+// Card
+$card-actions-border-top := 1px solid rgba($material-theme.fg-color, .1)
+$card-background := $material-theme.bg-color
+$card-padding := 16px
+$card-border-radius := 2px
+$card-title-text-size := 24px
+$card-title-text-letter-spacing := 1px
+$card-title-text-font-weight := 400
+$card-row-min-height := 36px
+
+// Chip
+$chip-background := $grey.lighten-2
+$chip-border := 1px solid $grey.lighten-2
+$chip-border-radius := 28px
+$chip-font-size := 13px
+$chip-label-border-radius := $card-border-radius
+$chip-label-color := rgba($material-light.fg-color, .87)
+$chip-icon-font-size := 24px
+$chip-icon-color := rgba($material-light.fg-color, .54)
+$chip-padding := 0 12px
+$chip-removeable-padding := 0 4px 0 12px
+$chip-outline-background := transparent !important
+$chip-outline-color := $grey.base
+$chip-height := 32px
+$chip-margin := 4px
+$chip-small-height := 26px
+
+// Collapsible
+$expansion-panel-collapse-height := 48px
+$collapsible-transition-height := 0.23s
+
+// Footer
+$footer-height := 36px
+
+/** Lists */
+//  list fonts and weights */
+$list-tile-font-size := $headings.subheading.size //16px - the mdc scss uses subheading to configure like this
+$list-tile-font-weight := $headings.subheading.weight //400
+$list-tile-active-color := $theme.primary
+
+$list-action-text-font-size := 12px //this is for the stacked actions
+$list-action-text-font-color := $grey.base
+
+$list-sub-title-font-size := ($list-tile-font-size - 2px) //14px
+
+$subheader-height-font-size := ($list-tile-font-size - 2px) //14px
+$subheader-font-weight := $font-weights.medium //500
+
+
+//   list spacing*/
+$list-left-padding := 16px
+$list-right-padding := 16px
+$list-top-padding := 8px
+$list-bottom-padding := 8px
+
+$list-item-right-margin := 56px
+$list-item-left-padding := 72px
+
+$list-item-single-height := 48px
+$list-item-double-height := 72px
+$list-item-triple-height := 88px
+$list-item-avatar-single-height := 56px
+
+$subheader-inset-margin := $list-item-right-margin
+
+//   list dense overrides */
+$list-item-dense-font-size := ($list-tile-font-size - 3px) //13px
+$subheader-dense-font-size := $list-item-dense-font-size
+$list-item-dense-icon-font-size := 21px //weird rendering issue
+
+$list-item-dense-top-padding := $list-top-padding / 2
+$list-item-dense-single-height := $list-item-single-height - 8px //40px
+$list-item-dense-double-height := $list-item-double-height - 12px //60px
+$list-item-dense-triple-height := $list-item-triple-height - 12px //76px
+
+$list-item-dense-avatar-single-height := $list-item-single-height //48px the dense concept was to take avatars to a normal single item height
+$list-item-dense-avatar-height := 38px
+
+$list-dense-subheader-height := $list-item-dense-single-height
+$list-dense-subheader-group-height := $list-dense-subheader-height //the subheader under a group menu
+
+
+/** Pickers */
+$picker-width := 315px
+$picker-title-min-height := 105px
+$time-picker-number-font-size := 16px
+$time-picker-number-margin := 10px
+
+// Toolbar
+$toolbar-height := 56px
+$toolbar-prominent-height := 64px
+$toolbar-extension-height := 72px
+$toolbar-mobile-portrait-height := 56px
+$toolbar-mobile-landscape-height := 48px
+$toolbar-extended-height := 128px
+$toolbar-item-padding := 0 16px
+$toolbar-padding-y := 0
+$toolbar-padding-x := 16px
+
+// Progress Circular
+$progress-circular-rotate-animation := progress-circular-rotate 1.4s linear infinite
+$progress-circular-rotate-dash := progress-circular-dash 1.4s ease-in-out infinite
+$process-circular-intermediate-svg-transition := all .2s ease-in-out
+$progress-circular-underlay-stroke := rgba($material-light.fg-color, 0.1)
+$progress-circular-overlay-transition := all .6s ease-in-out
+
+
+/* Selection Controls */
+$selection-switch-dark-color := rgba(#000, .38)
+$selection-switch-dark-background := #fafafa
+$selection-switch-dark-label-color := #424242
+$selection-switch-dark-enabled-color := rgba($teal.base, 1)
+$selection-switch-dark-disabled-color := rgba($grey.lighten-1, 1)
+$selection-switch-dark-disabled-background := rgba(#000, .12)
+
+$selection-switch-light-color := rgba(#fff, .3)
+$selection-switch-light-background := #bdbdbd
+$selection-switch-light-label-color := $material-dark.text-color
+$selection-switch-light-enabled-color := rgba($teal.lighten-3, 1)
+$selection-switch-light-disabled-color := rgba($grey.darken-3, 1)
+$selection-switch-light-disabled-background := rgba(#fff, .1)
+
+$selection-controls-active-color := rgba($teal.base, 1)
+$selection-controls-light-color := rgba($material-dark.fg-color, .54)
+$selection-controls-light-disabled-color := rgba($material-dark.fg-color, .26)
+$selection-controls-light-label-color := $material-dark.text-color
+
+$selection-controls-dark-color := rgba($material-light.fg-color, .70)
+$selection-controls-dark-disabled-color := rgba($material-light.fg-color, .30)
+$selection-controls-dark-label-color := $material-light.text-color
+
+
+/* Navigation drawer */
+$navigation-drawer-height := 100vh
+$navigation-drawer-background-dark := $theme.secondary
+$navigation-drawer-background-light := $material-light.bg-color
+
+// Sidebar Item
+$navigation-drawer-item-font-size := 14px
+$navigation-drawer-item-font-weight := $font-weights.medium
+$navigation-drawer-item-active-color := $theme.primary
+
+// Sidebar Group
+$navigation-drawer-group-item-font-weight := $font-weights.regular
+
+/* Slider */
+$slider-light-off := rgba($material-dark.fg-color, .26)
+$slider-light-focus-off := rgba($material-dark.fg-color, .38)
+$slider-light-disabled := rgba($material-dark.fg-color, .26)
+$slider-light-label := $material-dark.text-color
+$slider-light-ticks := rgba($material-dark.fg-color, .6)
+
+$slider-dark-off := rgba($material-light.fg-color, .3)
+$slider-dark-focus-off := rgba($material-light.fg-color, .3)
+$slider-dark-disabled := rgba($material-light.fg-color, .3)
+$slider-dark-label := $material-light.text-color
+$slider-dark-ticks := rgba($material-light.fg-color, .6)
+
+
+/** Snackbar */
+$snackbar-background-color := #323232
+
+
+/* Text Input */
+$input-group-height := 58px
+$input-group-padding := 18px 0 0
+$input-font-size := 16px
+$label-font-size := 12px
+$input-height := 30px
+$input-group-text-field-label-top := 18px
+
+$input-group-light-normal := rgba($material-dark.fg-color, $material-dark.disabledORhints-text-percent)
+$input-group-light-focus := rgba($material-dark.fg-color, .87)
+
+$input-group-dark-normal := rgba($material-light.fg-color, $material-light.disabledORhints-text-percent)
+$input-group-dark-focus := $material-light.fg-color
+
+
+$label-padding-top := 16px
+$label-padding-bottom := 8px
+$input-padding-bottom := 8px
+
+// Directives
+// ============================================================
+
+// Ripple animation
+$ripple-container-color := currentColor
+$ripple-animation-background := currentColor
+$ripple-animation-transition := .4s $transition.linear-out-slow-in
+$ripple-animation-visible-opacity := .15

package/src/stylus/theme.styl

@@ -0,0 +1,24 @@
+@import './settings/_theme.styl'
+
+app($component)
+  .application
+    &--light
+      $component($material-light)
+    &--dark
+      $component($material-dark)
+
+theme($component, $name)
+  light($component, $name)
+  dark($component, $name)
+
+light($component, $name)
+  .application--light .{$name}
+    $component($material-light)
+  .application .theme--light.{$name}
+    $component($material-light)
+
+dark($component, $name)
+  .application--dark .{$name}
+    $component($material-dark)
+  .application .theme--dark.{$name}
+    $component($material-dark)

package/src/stylus/tools/_animations.styl

@@ -0,0 +1,9 @@
+@keyframes shake
+  59%
+    margin-left: 0
+
+  60%, 80%
+    margin-left: 2px
+
+  70%, 90%
+    margin-left: -2px

package/src/stylus/tools/_colors.styl

@@ -0,0 +1,17 @@
+global-color(color_name, color_value)
+  .{color_name}
+    background-color color_value !important
+    border-color: color_value !important
+
+  .{color_name}--text
+    color color_value !important
+
+global-color-accent(color_name, color_value)
+  .{color_name}
+    &.{color_type}
+      background-color color_value !important
+      border-color: color_value !important
+
+  .{color_name}--text
+    &.text--{color_type}
+      color: color_value !important

package/src/stylus/tools/_elevations.styl

@@ -0,0 +1,7 @@
+@import '../settings/_elevations'
+
+// GENERATE HELPER CLASSES
+for z in (0..24)
+    .elevation-{z}
+      elevation(z, true)
+

package/src/stylus/trumps/_display.styl

@@ -0,0 +1,14 @@
+for size, query in $display-breakpoints
+  .hidden
+    &-{size}
+      @media query
+        display: none !important
+
+.overflow-hidden
+  overflow: hidden
+
+.overflow-x-hidden
+  overflow-x: hidden
+
+.overflow-y-hidden
+  overflow-y: hidden

package/src/stylus/trumps/_helpers.styl

@@ -0,0 +1,5 @@
+.right
+  float: right !important
+  
+.left
+  float: left !important

package/src/stylus/trumps/_spacing.styl

@@ -0,0 +1,37 @@
+$i = 0
+for level, spacer in $spacers
+  .mt-{$i}
+    margin-top: spacer.y !important
+  .mr-{$i}
+    margin-right: spacer.x !important
+  .mb-{$i}
+    margin-bottom: spacer.y !important
+  .ml-{$i}
+    margin-left: spacer.x !important
+  .mx-{$i}
+    margin-left: spacer.x !important
+    margin-right: spacer.x !important
+  .my-{$i}
+    margin-top: spacer.y !important
+    margin-bottom: spacer.y !important
+  .ma-{$i}
+    margin: spacer.y spacer.x !important
+    
+  .pt-{$i}
+    padding-top: spacer.y !important
+  .pr-{$i}
+    padding-right: spacer.x !important
+  .pb-{$i}
+    padding-bottom: spacer.y !important
+  .pl-{$i}
+    padding-left: spacer.x !important
+  .px-{$i}
+    padding-left: spacer.x !important
+    padding-right: spacer.x !important
+  .py-{$i}
+    padding-top: spacer.y !important
+    padding-bottom: spacer.y !important
+  .pa-{$i}
+    padding: spacer.y spacer.x !important
+    
+  $i = $i + 1

package/src/stylus/trumps/_text.styl

@@ -0,0 +1,13 @@
+for size, width in $grid-breakpoints
+  @media all and (min-width: width)
+    .text-{size}-left
+      text-align: left !important
+
+    .text-{size}-center
+      text-align: center !important
+      
+    .text-{size}-right
+      text-align: right !important
+      
+    .text-{size}-justify
+      text-align: justify !important

package/src/util/breakpoint.js

@@ -0,0 +1,134 @@
+/**
+ * A Kdu mixin to get the current width/height and the associated breakpoint.
+ *
+ * Useful to e.g. adapt the user interface from inside a Kdu component
+ * as opposed to using CSS classes. The breakpoint pixel values and
+ * range names are taken from Kdutify (https://github.com/kdutifyjs).
+ *
+ * Use within a component:
+ *
+ *   import breakpoint from './breakpoint.js'
+ *
+ *   export default {
+ *     name: 'my-component',
+ *     mixins: [breakpoint],
+ *     ...
+ *
+ * Then inside a template:
+ *
+ *   <div k-if="$breakpoint.smAndDown">...</div>
+ */
+const breakpoint = {
+  data () {
+    return {
+      clientWidth: clientDimensions.getWidth(),
+      clientHeight: clientDimensions.getHeight()
+    }
+  },
+
+  computed: {
+    breakpoint () {
+      const xs = this.clientWidth < 600
+      const sm = this.clientWidth < 960 && !xs
+      const md = this.clientWidth < (1280 - 16) && !(sm || xs)
+      const lg = this.clientWidth < (1920 - 16) && !(md || sm || xs)
+      const xl = this.clientWidth >= (1920 - 16) && !(lg || md || sm || xs)
+
+      const xsOnly = xs
+      const smOnly = sm
+      const smAndDown = (xs || sm) && !(md || lg || xl)
+      const smAndUp = !xs && (sm || md || lg || xl)
+      const mdOnly = md
+      const mdAndDown = (xs || sm || md) && !(lg || xl)
+      const mdAndUp = !(xs || sm) && (md || lg || xl)
+      const lgOnly = lg
+      const lgAndDown = (xs || sm || md || lg) && !xl
+      const lgAndUp = !(xs || sm || md) && (lg || xl)
+      const xlOnly = xl
+
+      let name
+      switch (true) {
+        case (xs):
+          name = 'xs'
+          break
+        case (sm):
+          name = 'sm'
+          break
+        case (md):
+          name = 'md'
+          break
+        case (lg):
+          name = 'lg'
+          break
+        default:
+          name = 'xl'
+          break
+      }
+
+      const result = {
+        // Definite breakpoint.
+        xs,
+        sm,
+        md,
+        lg,
+        xl,
+
+        // Useful e.g. to construct CSS class names dynamically.
+        name,
+
+        // Breakpoint ranges.
+        xsOnly,
+        smOnly,
+        smAndDown,
+        smAndUp,
+        mdOnly,
+        mdAndDown,
+        mdAndUp,
+        lgOnly,
+        lgAndDown,
+        lgAndUp,
+        xlOnly,
+
+        // For custom breakpoint logic.
+        width: this.clientWidth,
+        height: this.clientHeight
+      }
+
+      return result
+    }
+  },
+
+  watch: {
+    breakpoint (val) {
+      this.$kdutify.breakpoint = val
+    }
+  },
+
+  methods: {
+    onResize () {
+      this.clientWidth = clientDimensions.getWidth()
+      this.clientHeight = clientDimensions.getHeight()
+    }
+  }
+}
+
+// Cross-browser support as described in:
+// https://stackoverflow.com/questions/1248081
+const clientDimensions = {
+  getWidth () {
+    if (typeof document === 'undefined') return 0 // SSR
+    return Math.max(
+      document.documentElement.clientWidth,
+      window.innerWidth || 0
+    )
+  },
+  getHeight () {
+    if (typeof document === 'undefined') return 0 // SSR
+    return Math.max(
+      document.documentElement.clientHeight,
+      window.innerHeight || 0
+    )
+  }
+}
+
+export default breakpoint

package/src/util/helpers.d.ts

@@ -0,0 +1,21 @@
+declare module 'kdutify/src/util/helpers' {
+  import { FunctionalComponentOptions, KNodeDirective } from 'kdu'
+
+  export function createSimpleFunctional(c: string, el: string): FunctionalComponentOptions
+  export function createSimpleTransition(name: string, origin: string, mode: string): FunctionalComponentOptions
+
+  export interface EventHandlersDict {
+    [event: string]: Function
+  }
+  export function createJavaScriptTransition(name: string, functions: EventHandlersDict, css: boolean, mode: string): FunctionalComponentOptions
+
+  export interface BindingConfig {
+    arg: KNodeDirective['arg'],
+    modifiers: KNodeDirective['modifiers'],
+    value: KNodeDirective['value']
+  }
+  export function directiveConfig(binding: BindingConfig, defaults: object): KNodeDirective
+  export function addOnceEventListener(el: EventTarget, event: string, cb: () => void): void
+  export function getObjectValueByPath(obj: object, path: string): any
+  export function createRange(length: number): Array<number>
+}