kdutify 0.16.9-rc.0 → 2.6.0

package/src/stylus/settings/_variables.styl

@@ -1,396 +0,0 @@
-@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

@@ -1,24 +0,0 @@
-@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

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

package/src/stylus/tools/_colors.styl

@@ -1,17 +0,0 @@
-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

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

package/src/stylus/trumps/_display.styl

@@ -1,14 +0,0 @@
-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

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

package/src/stylus/trumps/_spacing.styl

@@ -1,37 +0,0 @@
-$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

@@ -1,13 +0,0 @@
-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

@@ -1,134 +0,0 @@
-/**
- * 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

@@ -1,21 +0,0 @@
-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>
-}