kdutify 0.16.9-rc.0 → 2.6.0

package/src/components/KTimeline/KTimelineItem.ts

@@ -0,0 +1,121 @@
+// Types
+import mixins, { ExtractKdu } from '../../util/mixins'
+import { KNode, KNodeData } from 'kdu'
+
+// Components
+import KTimeline from './KTimeline'
+import KIcon from '../KIcon'
+
+// Mixins
+import Themeable from '../../mixins/themeable'
+import Colorable from '../../mixins/colorable'
+
+const baseMixins = mixins(
+  Colorable,
+  Themeable
+/* @kdujs/component */
+)
+
+type KTimelineInstance = InstanceType<typeof KTimeline>
+
+interface options extends ExtractKdu<typeof baseMixins> {
+  timeline: KTimelineInstance
+}
+
+export default baseMixins.extend<options>().extend({
+  name: 'k-timeline-item',
+
+  inject: ['timeline'],
+
+  props: {
+    color: {
+      type: String,
+      default: 'primary',
+    },
+    fillDot: Boolean,
+    hideDot: Boolean,
+    icon: String,
+    iconColor: String,
+    large: Boolean,
+    left: Boolean,
+    right: Boolean,
+    small: Boolean,
+  },
+
+  computed: {
+    hasIcon (): boolean {
+      return !!this.icon || !!this.$slots.icon
+    },
+  },
+
+  methods: {
+    genBody () {
+      return this.$createElement('div', {
+        staticClass: 'k-timeline-item__body',
+      }, this.$slots.default)
+    },
+    genIcon (): KNode | KNode[] {
+      if (this.$slots.icon) {
+        return this.$slots.icon
+      }
+
+      return this.$createElement(KIcon, {
+        props: {
+          color: this.iconColor,
+          dark: !this.theme.isDark,
+          small: this.small,
+        },
+      }, this.icon)
+    },
+    genInnerDot () {
+      const data: KNodeData = this.setBackgroundColor(this.color)
+
+      return this.$createElement('div', {
+        staticClass: 'k-timeline-item__inner-dot',
+        ...data,
+      }, [this.hasIcon && this.genIcon()])
+    },
+    genDot () {
+      return this.$createElement('div', {
+        staticClass: 'k-timeline-item__dot',
+        class: {
+          'k-timeline-item__dot--small': this.small,
+          'k-timeline-item__dot--large': this.large,
+        },
+      }, [this.genInnerDot()])
+    },
+    genDivider () {
+      const children = []
+
+      if (!this.hideDot) children.push(this.genDot())
+
+      return this.$createElement('div', {
+        staticClass: 'k-timeline-item__divider',
+      }, children)
+    },
+    genOpposite () {
+      return this.$createElement('div', {
+        staticClass: 'k-timeline-item__opposite',
+      }, this.$slots.opposite)
+    },
+  },
+
+  render (h): KNode {
+    const children = [
+      this.genBody(),
+      this.genDivider(),
+    ]
+
+    if (this.$slots.opposite) children.push(this.genOpposite())
+
+    return h('div', {
+      staticClass: 'k-timeline-item',
+      class: {
+        'k-timeline-item--fill-dot': this.fillDot,
+        'k-timeline-item--before': this.timeline.reverse ? this.right : this.left,
+        'k-timeline-item--after': this.timeline.reverse ? this.left : this.right,
+        ...this.themeClasses,
+      },
+    }, children)
+  },
+})

package/src/components/KTimeline/_mixins.sass

@@ -0,0 +1,42 @@
+@mixin timeline-dots($dot-size, $inner-dot-size)
+  height: $dot-size
+  left: calc(50% - #{$dot-size / 2})
+  width: $dot-size
+
+  .k-timeline-item__inner-dot
+    height: $inner-dot-size
+    margin: ($dot-size - $inner-dot-size) / 2
+    width: $inner-dot-size
+
+@mixin timeline-wedge-align($direction)
+  .k-timeline-item__body
+    > .k-card:before, .k-card:after
+      +ltr()
+        transform: rotate(if($direction == right, 180deg, 0))
+        #{$direction}: -($timeline-wedge-size)
+        #{if($direction == left, right, left)}: initial
+
+      +rtl()
+        transform: rotate(if($direction == right, 0, 180deg))
+        #{$direction}: initial
+        #{if($direction == left, right, left)}: -($timeline-wedge-size)
+
+@mixin timeline-item-align($direction)
+  flex-direction: if($direction == left, row-reverse, row)
+
+  .k-timeline-item__opposite
+    +ltr()
+      text-align: if($direction == left, right, left)
+
+    +rtl()
+      text-align: if($direction == left, left, right)
+
+@mixin timeline-line-align($center, $first, $second)
+  &:before
+    +ltr()
+      #{$first}: calc(#{$center} - #{$timeline-line-width / 2})
+      #{$second}: initial
+
+    +rtl()
+      #{$first}: initial
+      #{$second}: calc(#{$center} - #{$timeline-line-width / 2})

package/src/components/KTimeline/_variables.scss

@@ -0,0 +1,18 @@
+@import '../../styles/styles.sass';
+
+$timeline-divider-center: 50% !default;
+$timeline-divider-width: 96px !default;
+
+$timeline-item-padding: 24px !default;
+
+$timeline-line-width: 2px !default;
+
+$timeline-wedge-size: 10px !default;
+
+$timeline-dot-small-size: 24px !default;
+$timeline-dot-regular-size: 38px !default;
+$timeline-dot-large-size: 52px !default;
+
+$timeline-inner-dot-small-size: 18px !default;
+$timeline-inner-dot-regular-size: 30px !default;
+$timeline-inner-dot-large-size: 42px !default;

package/src/components/KTimeline/index.ts

@@ -0,0 +1,11 @@
+import KTimeline from './KTimeline'
+import KTimelineItem from './KTimelineItem'
+
+export { KTimeline, KTimelineItem }
+
+export default {
+  $_kdutify_subcomponents: {
+    KTimeline,
+    KTimelineItem,
+  },
+}

package/src/components/KToolbar/KToolbar.sass

@@ -0,0 +1,160 @@
+@import './_variables.scss'
+
++theme('k-toolbar.k-sheet') using ($material)
+  background-color: map-get($material, 'toolbar')
+
+
+// Sheet
++sheet(k-toolbar, $toolbar-elevation, $toolbar-border-radius, $toolbar-shaped-border-radius)
+
+// Block
+.k-toolbar
+  contain: layout
+  display: block
+  flex: 1 1 auto
+  max-width: 100%
+  transition: $toolbar-transition
+  position: relative
+
+  +elevation(4)
+
+  .k-input
+    padding-top: 0
+    margin-top: 0
+
+// Element
+.k-toolbar__content,
+.k-toolbar__extension
+  padding: $toolbar-content-padding-y $toolbar-content-padding-x
+
+  .k-btn.k-btn--icon.k-size--default
+    height: $toolbar-btn-icon-size
+    width: $toolbar-btn-icon-size
+
+  > .k-btn.k-btn--icon
+    &:first-child
+      +ltr()
+        margin-left: -$toolbar-btn-icon-size / 4
+
+      +rtl()
+        margin-right: -$toolbar-btn-icon-size / 4
+
+      + .k-toolbar__title
+        +ltr()
+          padding-left: $toolbar-title-padding
+
+        +rtl()
+          padding-right: $toolbar-title-padding
+
+    &:last-child
+      +ltr()
+        margin-right: -$toolbar-btn-icon-size / 4
+
+      +rtl()
+        margin-left: -$toolbar-btn-icon-size / 4
+
+  > .k-tabs
+    height: inherit
+    margin-top: -$toolbar-content-padding-y
+    margin-bottom: -$toolbar-content-padding-y
+
+    > .k-slide-group.k-tabs-bar
+      background-color: inherit
+      height: inherit
+
+    &:first-child
+      margin-left: -$toolbar-content-padding-x
+
+    &:last-child
+      margin-right: -$toolbar-content-padding-x
+
+.k-toolbar__content,
+.k-toolbar__extension
+  align-items: center
+  display: flex
+  position: relative
+  z-index: 0
+
+.k-toolbar__image
+  border-radius: inherit
+  position: absolute
+  top: 0
+  bottom: 0
+  width: 100%
+  z-index: 0
+  contain: strict
+
+  .k-image
+    border-radius: inherit
+
+.k-toolbar__items
+  display: flex
+  height: inherit
+
+  > .k-btn
+    border-radius: 0
+    height: 100% !important
+    max-height: none
+
+.k-toolbar__title
+  font-size: 1.25rem
+  line-height: 1.5
+  overflow: hidden
+  text-overflow: ellipsis
+  white-space: nowrap
+
+// Modifier
+.k-toolbar.k-toolbar--absolute
+  position: absolute
+  top: 0
+  z-index: 1
+
+.k-toolbar.k-toolbar--bottom
+  top: initial
+  bottom: 0
+
+.k-toolbar.k-toolbar--collapse
+  .k-toolbar__title
+    white-space: nowrap
+
+.k-toolbar.k-toolbar--collapsed
+  max-width: $toolbar-collapsed-max-width
+  overflow: hidden
+
+  +ltr()
+    border-bottom-right-radius: $toolbar-collapsed-border-radius
+
+  +rtl()
+    border-bottom-left-radius: $toolbar-collapsed-border-radius
+
+  .k-toolbar__title,
+  .k-toolbar__extension
+    display: none
+
+.k-toolbar--dense
+  .k-toolbar__content,
+  .k-toolbar__extension
+    padding-top: 0
+    padding-bottom: 0
+
+// @deprecated
+// TODO: Remove in v3
+.k-toolbar--flat
+  +elevation(0, true)
+
+.k-toolbar--floating
+  display: inline-flex
+
+.k-toolbar--prominent
+  .k-toolbar__content
+    align-items: flex-start
+
+  .k-toolbar__title
+    font-size: 1.5rem
+    padding-top: $toolbar-prominent-padding
+
+  &:not(.k-toolbar--bottom)
+    .k-toolbar__title
+      align-self: flex-end
+      padding-bottom: $toolbar-prominent-padding
+      padding-top: 0

package/src/components/KToolbar/KToolbar.ts

@@ -0,0 +1,166 @@
+// Styles
+import './KToolbar.sass'
+
+// Extensions
+import KSheet from '../KSheet/KSheet'
+
+// Components
+import KImg, { srcObject } from '../KImg/KImg'
+
+// Utilities
+import { convertToUnit, getSlot } from '../../util/helpers'
+import { breaking } from '../../util/console'
+
+// Types
+import { KNode, PropType } from 'kdu'
+
+/* @kdujs/component */
+export default KSheet.extend({
+  name: 'k-toolbar',
+
+  props: {
+    absolute: Boolean,
+    bottom: Boolean,
+    collapse: Boolean,
+    dense: Boolean,
+    extended: Boolean,
+    extensionHeight: {
+      default: 48,
+      type: [Number, String],
+    },
+    flat: Boolean,
+    floating: Boolean,
+    prominent: Boolean,
+    short: Boolean,
+    src: {
+      type: [String, Object] as PropType<string | srcObject>,
+      default: '',
+    },
+    tag: {
+      type: String,
+      default: 'header',
+    },
+  },
+
+  data: () => ({
+    isExtended: false,
+  }),
+
+  computed: {
+    computedHeight (): number {
+      const height = this.computedContentHeight
+
+      if (!this.isExtended) return height
+
+      const extensionHeight = parseInt(this.extensionHeight)
+
+      return this.isCollapsed
+        ? height
+        : height + (!isNaN(extensionHeight) ? extensionHeight : 0)
+    },
+    computedContentHeight (): number {
+      if (this.height) return parseInt(this.height)
+      if (this.isProminent && this.dense) return 96
+      if (this.isProminent && this.short) return 112
+      if (this.isProminent) return 128
+      if (this.dense) return 48
+      if (this.short || this.$kdutify.breakpoint.smAndDown) return 56
+      return 64
+    },
+    classes (): object {
+      return {
+        ...KSheet.options.computed.classes.call(this),
+        'k-toolbar': true,
+        'k-toolbar--absolute': this.absolute,
+        'k-toolbar--bottom': this.bottom,
+        'k-toolbar--collapse': this.collapse,
+        'k-toolbar--collapsed': this.isCollapsed,
+        'k-toolbar--dense': this.dense,
+        'k-toolbar--extended': this.isExtended,
+        'k-toolbar--flat': this.flat,
+        'k-toolbar--floating': this.floating,
+        'k-toolbar--prominent': this.isProminent,
+      }
+    },
+    isCollapsed (): boolean {
+      return this.collapse
+    },
+    isProminent (): boolean {
+      return this.prominent
+    },
+    styles (): object {
+      return {
+        ...this.measurableStyles,
+        height: convertToUnit(this.computedHeight),
+      }
+    },
+  },
+
+  created () {
+    const breakingProps = [
+      ['app', '<k-app-bar app>'],
+      ['manual-scroll', '<k-app-bar :value="false">'],
+      ['clipped-left', '<k-app-bar clipped-left>'],
+      ['clipped-right', '<k-app-bar clipped-right>'],
+      ['inverted-scroll', '<k-app-bar inverted-scroll>'],
+      ['scroll-off-screen', '<k-app-bar scroll-off-screen>'],
+      ['scroll-target', '<k-app-bar scroll-target>'],
+      ['scroll-threshold', '<k-app-bar scroll-threshold>'],
+      ['card', '<k-app-bar flat>'],
+    ]
+
+    /* istanbul ignore next */
+    breakingProps.forEach(([original, replacement]) => {
+      if (this.$attrs.hasOwnProperty(original)) breaking(original, replacement, this)
+    })
+  },
+
+  methods: {
+    genBackground () {
+      const props = {
+        height: convertToUnit(this.computedHeight),
+        src: this.src,
+      }
+
+      const image = this.$scopedSlots.img
+        ? this.$scopedSlots.img({ props })
+        : this.$createElement(KImg, { props })
+
+      return this.$createElement('div', {
+        staticClass: 'k-toolbar__image',
+      }, [image])
+    },
+    genContent () {
+      return this.$createElement('div', {
+        staticClass: 'k-toolbar__content',
+        style: {
+          height: convertToUnit(this.computedContentHeight),
+        },
+      }, getSlot(this))
+    },
+    genExtension () {
+      return this.$createElement('div', {
+        staticClass: 'k-toolbar__extension',
+        style: {
+          height: convertToUnit(this.extensionHeight),
+        },
+      }, getSlot(this, 'extension'))
+    },
+  },
+
+  render (h): KNode {
+    this.isExtended = this.extended || !!this.$scopedSlots.extension
+
+    const children = [this.genContent()]
+    const data = this.setBackgroundColor(this.color, {
+      class: this.classes,
+      style: this.styles,
+      on: this.$listeners,
+    })
+
+    if (this.isExtended) children.push(this.genExtension())
+    if (this.src || this.$scopedSlots.img) children.unshift(this.genBackground())
+
+    return h(this.tag, data, children)
+  },
+})

package/src/components/KToolbar/_variables.scss

@@ -0,0 +1,19 @@
+@import '../../styles/styles.sass';
+
+$toolbar-btn-icon-size: 48px !default;
+$toolbar-content-padding-y: 4px !default;
+$toolbar-content-padding-x: 16px !default;
+$toolbar-elevation: 4 !default;
+$toolbar-border-radius: 0 !default;
+$toolbar-shaped-border-radius: map-get($rounded, 'xl') $toolbar-border-radius !default;
+$toolbar-title-padding: 20px !default;
+$toolbar-transition: 0.2s map-get($transition, 'fast-out-slow-in') transform,
+                     0.2s map-get($transition, 'fast-out-slow-in') background-color,
+                     0.2s map-get($transition, 'fast-out-slow-in') left,
+                     0.2s map-get($transition, 'fast-out-slow-in') right,
+                     280ms map-get($transition, 'fast-out-slow-in') box-shadow,
+                     0.25s map-get($transition, 'fast-out-slow-in') max-width,
+                     0.25s map-get($transition, 'fast-out-slow-in') width !default;
+$toolbar-collapsed-max-width: 112px !default;
+$toolbar-collapsed-border-radius: 24px !default;
+$toolbar-prominent-padding: 6px !default;

package/src/components/KToolbar/index.ts

@@ -0,0 +1,22 @@
+// Components
+import KToolbar from './KToolbar'
+
+// Utilities
+import { createSimpleFunctional } from '../../util/helpers'
+
+const KToolbarTitle = createSimpleFunctional('k-toolbar__title')
+const KToolbarItems = createSimpleFunctional('k-toolbar__items')
+
+export {
+  KToolbar,
+  KToolbarItems,
+  KToolbarTitle,
+}
+
+export default {
+  $_kdutify_subcomponents: {
+    KToolbar,
+    KToolbarItems,
+    KToolbarTitle,
+  },
+}

package/src/components/KTooltip/KTooltip.sass

@@ -0,0 +1,36 @@
+@import './_variables.scss'
+
+.k-tooltip
+  display: none
+
+  &--attached
+    display: inline
+
+  &__content
+    background: $tooltip-background-color
+    color: $tooltip-text-color
+    border-radius: $tooltip-border-radius
+    font-size: $tooltip-font-size
+    line-height: round($tooltip-font-size * 1.6)
+    display: inline-block
+    padding: $tooltip-padding
+    position: absolute
+    text-transform: initial
+    width: auto
+    opacity: 0
+    pointer-events: none
+
+    &.menuable__content__active
+      opacity: $tooltip-opacity
+
+    &--fixed
+      position: fixed
+
+    &[class*="-active"]
+      transition-timing-function: $tooltip-transition-timing-function
+
+    &[class*="enter-active"]
+      transition-duration: $tooltip-transition-enter-duration
+
+    &[class*="leave-active"]
+      transition-duration: $tooltip-transition-leave-duration