kdutify 0.16.9-rc.0 → 2.6.0

package/src/components/KTreeview/KTreeviewNode.ts

@@ -0,0 +1,373 @@
+// Components
+import { KExpandTransition } from '../transitions'
+import { KIcon } from '../KIcon'
+import KTreeview from './KTreeview'
+
+// Mixins
+import { inject as RegistrableInject } from '../../mixins/registrable'
+import Colorable from '../../mixins/colorable'
+
+// Utils
+import mixins, { ExtractKdu } from '../../util/mixins'
+import { getObjectValueByPath, createRange } from '../../util/helpers'
+
+// Types
+import { KNode, KNodeChildren, PropType } from 'kdu'
+import { PropValidator } from 'kdu/types/options'
+
+type KTreeViewInstance = InstanceType<typeof KTreeview>
+
+const baseMixins = mixins(
+  Colorable,
+  RegistrableInject('treeview')
+)
+
+interface options extends ExtractKdu<typeof baseMixins> {
+  treeview: KTreeViewInstance
+}
+
+export const KTreeviewNodeProps = {
+  activatable: Boolean,
+  activeClass: {
+    type: String,
+    default: 'k-treeview-node--active',
+  },
+  color: {
+    type: String,
+    default: 'primary',
+  },
+  disablePerNode: Boolean,
+  expandIcon: {
+    type: String,
+    default: '$subgroup',
+  },
+  indeterminateIcon: {
+    type: String,
+    default: '$checkboxIndeterminate',
+  },
+  itemChildren: {
+    type: String,
+    default: 'children',
+  },
+  itemDisabled: {
+    type: String,
+    default: 'disabled',
+  },
+  itemKey: {
+    type: String,
+    default: 'id',
+  },
+  itemText: {
+    type: String,
+    default: 'name',
+  },
+  loadChildren: Function as PropType<(item: any) => Promise<void>>,
+  loadingIcon: {
+    type: String,
+    default: '$loading',
+  },
+  offIcon: {
+    type: String,
+    default: '$checkboxOff',
+  },
+  onIcon: {
+    type: String,
+    default: '$checkboxOn',
+  },
+  openOnClick: Boolean,
+  rounded: Boolean,
+  selectable: Boolean,
+  selectedColor: {
+    type: String,
+    default: 'accent',
+  },
+  shaped: Boolean,
+  transition: Boolean,
+  selectionType: {
+    type: String as PropType<'leaf' | 'independent'>,
+    default: 'leaf',
+    validator: (v: string) => ['leaf', 'independent'].includes(v),
+  },
+}
+
+/* @kdujs/component */
+const KTreeviewNode = baseMixins.extend<options>().extend({
+  name: 'k-treeview-node',
+
+  inject: {
+    treeview: {
+      default: null,
+    },
+  },
+
+  props: {
+    level: Number,
+    item: {
+      type: Object,
+      default: () => null,
+    } as PropValidator<Record<string, unknown> | null>,
+    parentIsDisabled: Boolean,
+    ...KTreeviewNodeProps,
+  },
+
+  data: () => ({
+    hasLoaded: false,
+    isActive: false, // Node is selected (row)
+    isIndeterminate: false, // Node has at least one selected child
+    isLoading: false,
+    isOpen: false, // Node is open/expanded
+    isSelected: false, // Node is selected (checkbox)
+  }),
+
+  computed: {
+    disabled (): boolean {
+      return (
+        getObjectValueByPath(this.item, this.itemDisabled) ||
+        (!this.disablePerNode && (this.parentIsDisabled && this.selectionType === 'leaf'))
+      )
+    },
+    key (): string {
+      return getObjectValueByPath(this.item, this.itemKey)
+    },
+    children (): any[] | null {
+      const children = getObjectValueByPath(this.item, this.itemChildren)
+      return children && children.filter((child: any) => !this.treeview.isExcluded(getObjectValueByPath(child, this.itemKey)))
+    },
+    text (): string {
+      return getObjectValueByPath(this.item, this.itemText)
+    },
+    scopedProps (): object {
+      return {
+        item: this.item,
+        leaf: !this.children,
+        selected: this.isSelected,
+        indeterminate: this.isIndeterminate,
+        active: this.isActive,
+        open: this.isOpen,
+      }
+    },
+    computedIcon (): string {
+      if (this.isIndeterminate) return this.indeterminateIcon
+      else if (this.isSelected) return this.onIcon
+      else return this.offIcon
+    },
+    hasChildren (): boolean {
+      return !!this.children && (!!this.children.length || !!this.loadChildren)
+    },
+  },
+
+  created () {
+    this.treeview.register(this)
+  },
+
+  beforeDestroy () {
+    this.treeview.unregister(this)
+  },
+
+  methods: {
+    checkChildren (): Promise<void> {
+      return new Promise<void>(resolve => {
+        // TODO: Potential issue with always trying
+        // to load children if response is empty?
+        if (!this.children || this.children.length || !this.loadChildren || this.hasLoaded) return resolve()
+
+        this.isLoading = true
+        resolve(this.loadChildren(this.item))
+      }).then(() => {
+        this.isLoading = false
+        this.hasLoaded = true
+      })
+    },
+    open () {
+      this.isOpen = !this.isOpen
+      this.treeview.updateOpen(this.key, this.isOpen)
+      this.treeview.emitOpen()
+    },
+    genLabel () {
+      const children = []
+
+      if (this.$scopedSlots.label) children.push(this.$scopedSlots.label(this.scopedProps))
+      else children.push(this.text)
+
+      return this.$createElement('div', {
+        slot: 'label',
+        staticClass: 'k-treeview-node__label',
+      }, children)
+    },
+    genPrependSlot () {
+      if (!this.$scopedSlots.prepend) return null
+
+      return this.$createElement('div', {
+        staticClass: 'k-treeview-node__prepend',
+      }, this.$scopedSlots.prepend(this.scopedProps))
+    },
+    genAppendSlot () {
+      if (!this.$scopedSlots.append) return null
+
+      return this.$createElement('div', {
+        staticClass: 'k-treeview-node__append',
+      }, this.$scopedSlots.append(this.scopedProps))
+    },
+    genContent () {
+      const children = [
+        this.genPrependSlot(),
+        this.genLabel(),
+        this.genAppendSlot(),
+      ]
+
+      return this.$createElement('div', {
+        staticClass: 'k-treeview-node__content',
+      }, children)
+    },
+    genToggle () {
+      return this.$createElement(KIcon, {
+        staticClass: 'k-treeview-node__toggle',
+        class: {
+          'k-treeview-node__toggle--open': this.isOpen,
+          'k-treeview-node__toggle--loading': this.isLoading,
+        },
+        slot: 'prepend',
+        on: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
+
+            if (this.isLoading) return
+
+            this.checkChildren().then(() => this.open())
+          },
+        },
+      }, [this.isLoading ? this.loadingIcon : this.expandIcon])
+    },
+    genCheckbox () {
+      return this.$createElement(KIcon, {
+        staticClass: 'k-treeview-node__checkbox',
+        props: {
+          color: this.isSelected || this.isIndeterminate ? this.selectedColor : undefined,
+          disabled: this.disabled,
+        },
+        on: {
+          click: (e: MouseEvent) => {
+            e.stopPropagation()
+
+            if (this.isLoading) return
+
+            this.checkChildren().then(() => {
+              // We nextTick here so that items watch in KTreeview has a chance to run first
+              this.$nextTick(() => {
+                this.isSelected = !this.isSelected
+                this.isIndeterminate = false
+
+                this.treeview.updateSelected(this.key, this.isSelected)
+                this.treeview.emitSelected()
+              })
+            })
+          },
+        },
+      }, [this.computedIcon])
+    },
+    genLevel (level: number) {
+      return createRange(level).map(() => this.$createElement('div', {
+        staticClass: 'k-treeview-node__level',
+      }))
+    },
+    genNode () {
+      const children = [this.genContent()]
+
+      if (this.selectable) children.unshift(this.genCheckbox())
+
+      if (this.hasChildren) {
+        children.unshift(this.genToggle())
+      } else {
+        children.unshift(...this.genLevel(1))
+      }
+
+      children.unshift(...this.genLevel(this.level))
+
+      return this.$createElement('div', this.setTextColor(this.isActive && this.color, {
+        staticClass: 'k-treeview-node__root',
+        class: {
+          [this.activeClass]: this.isActive,
+        },
+        on: {
+          click: () => {
+            if (this.openOnClick && this.hasChildren) {
+              this.checkChildren().then(this.open)
+            } else if (this.activatable && !this.disabled) {
+              this.isActive = !this.isActive
+              this.treeview.updateActive(this.key, this.isActive)
+              this.treeview.emitActive()
+            }
+          },
+        },
+      }), children)
+    },
+    genChild (item: any, parentIsDisabled: boolean) {
+      return this.$createElement(KTreeviewNode, {
+        key: getObjectValueByPath(item, this.itemKey),
+        props: {
+          activatable: this.activatable,
+          activeClass: this.activeClass,
+          item,
+          selectable: this.selectable,
+          selectedColor: this.selectedColor,
+          color: this.color,
+          disablePerNode: this.disablePerNode,
+          expandIcon: this.expandIcon,
+          indeterminateIcon: this.indeterminateIcon,
+          offIcon: this.offIcon,
+          onIcon: this.onIcon,
+          loadingIcon: this.loadingIcon,
+          itemKey: this.itemKey,
+          itemText: this.itemText,
+          itemDisabled: this.itemDisabled,
+          itemChildren: this.itemChildren,
+          loadChildren: this.loadChildren,
+          transition: this.transition,
+          openOnClick: this.openOnClick,
+          rounded: this.rounded,
+          shaped: this.shaped,
+          level: this.level + 1,
+          selectionType: this.selectionType,
+          parentIsDisabled,
+        },
+        scopedSlots: this.$scopedSlots,
+      })
+    },
+    genChildrenWrapper () {
+      if (!this.isOpen || !this.children) return null
+
+      const children = [this.children.map(c => this.genChild(c, this.disabled))]
+
+      return this.$createElement('div', {
+        staticClass: 'k-treeview-node__children',
+      }, children)
+    },
+    genTransition () {
+      return this.$createElement(KExpandTransition, [this.genChildrenWrapper()])
+    },
+  },
+
+  render (h): KNode {
+    const children: KNodeChildren = [this.genNode()]
+
+    if (this.transition) children.push(this.genTransition())
+    else children.push(this.genChildrenWrapper())
+
+    return h('div', {
+      staticClass: 'k-treeview-node',
+      class: {
+        'k-treeview-node--leaf': !this.hasChildren,
+        'k-treeview-node--click': this.openOnClick,
+        'k-treeview-node--disabled': this.disabled,
+        'k-treeview-node--rounded': this.rounded,
+        'k-treeview-node--shaped': this.shaped,
+        'k-treeview-node--selected': this.isSelected,
+      },
+      attrs: {
+        'aria-expanded': String(this.isOpen),
+      },
+    }, children)
+  },
+})
+
+export default KTreeviewNode

package/src/components/KTreeview/_mixins.sass

@@ -0,0 +1,18 @@
+@mixin treeview-shaped($size, $margin)
+  .k-treeview-node__root,
+  .k-treeview-node__root:before
+    border-bottom-right-radius: #{$size * 0.5} !important
+    border-top-right-radius: #{$size * 0.5} !important
+
+  .k-treeview-node__root
+    margin-top: $margin
+    margin-bottom: $margin
+
+@mixin treeview-rounded($size, $margin)
+  .k-treeview-node__root,
+  .k-treeview-node__root:before
+    border-radius: #{$size * 0.5} !important
+
+  .k-treeview-node__root
+    margin-top: $margin
+    margin-bottom: $margin

package/src/components/KTreeview/_variables.scss

@@ -0,0 +1,10 @@
+@import '../../styles/styles.sass';
+
+$treeview-transition: .2s map-get($transition, 'linear-out-slow-in') !default;
+$treeview-label-font-size: inherit !default;
+$treeview-node-height: 48px !default;
+$treeview-node-height-dense: 40px !default;
+$treeview-node-shaped-margin: 8px !default;
+$treeview-node-padding: 8px !default;
+$treeview-node-margin: 6px !default;
+$treeview-node-level-width: 24px !default;

package/src/components/KTreeview/index.ts

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

package/src/components/KTreeview/util/filterTreeItems.ts

@@ -0,0 +1,39 @@
+import { getObjectValueByPath } from '../../../util/helpers'
+import { TreeviewItemFunction } from 'kdutify/types'
+
+export function filterTreeItem (item: object, search: string, textKey: string): boolean {
+  const text = getObjectValueByPath(item, textKey)
+
+  return text.toLocaleLowerCase().indexOf(search.toLocaleLowerCase()) > -1
+}
+
+export function filterTreeItems (
+  filter: TreeviewItemFunction,
+  item: any,
+  search: string,
+  idKey: string,
+  textKey: string,
+  childrenKey: string,
+  excluded: Set<string | number>
+): boolean {
+  if (filter(item, search, textKey)) {
+    return true
+  }
+
+  const children = getObjectValueByPath(item, childrenKey)
+
+  if (children) {
+    let match = false
+    for (let i = 0; i < children.length; i++) {
+      if (filterTreeItems(filter, children[i], search, idKey, textKey, childrenKey, excluded)) {
+        match = true
+      }
+    }
+
+    if (match) return true
+  }
+
+  excluded.add(getObjectValueByPath(item, idKey))
+
+  return false
+}

package/src/components/KVirtualScroll/KVirtualScroll.sass

@@ -0,0 +1,15 @@
+.k-virtual-scroll
+  display: block
+  flex: 1 1 auto
+  height: 100%
+  max-width: 100%
+  overflow: auto
+  position: relative
+
+  &__container
+    display: block
+
+  &__item
+    left: 0
+    position: absolute
+    right: 0

package/src/components/KVirtualScroll/KVirtualScroll.ts

@@ -0,0 +1,122 @@
+// Styles
+import './KVirtualScroll.sass'
+
+// Mixins
+import Measurable from '../../mixins/measurable'
+
+// Directives
+import Scroll from '../../directives/scroll'
+
+// Utilities
+import {
+  convertToUnit,
+  getSlot,
+} from '../../util/helpers'
+
+// Types
+import { KNode } from 'kdu'
+import { PropValidator } from 'kdu/types/options'
+
+export default Measurable.extend({
+  name: 'k-virtual-scroll',
+
+  directives: { Scroll },
+
+  props: {
+    bench: {
+      type: [Number, String],
+      default: 0,
+    },
+    itemHeight: {
+      type: [Number, String],
+      required: true,
+    },
+    items: {
+      type: Array,
+      default: () => [],
+    } as PropValidator<any[]>,
+  },
+
+  data: () => ({
+    first: 0,
+    last: 0,
+    scrollTop: 0,
+  }),
+
+  computed: {
+    __bench (): number {
+      return parseInt(this.bench, 10)
+    },
+    __itemHeight (): number {
+      return parseInt(this.itemHeight, 10)
+    },
+    firstToRender (): number {
+      return Math.max(0, this.first - this.__bench)
+    },
+    lastToRender (): number {
+      return Math.min(this.items.length, this.last + this.__bench)
+    },
+  },
+
+  watch: {
+    height: 'onScroll',
+    itemHeight: 'onScroll',
+  },
+
+  mounted () {
+    this.last = this.getLast(0)
+  },
+
+  methods: {
+    getChildren (): KNode[] {
+      return this.items.slice(
+        this.firstToRender,
+        this.lastToRender,
+      ).map(this.genChild)
+    },
+    genChild (item: any, index: number) {
+      index += this.firstToRender
+
+      const top = convertToUnit(index * this.__itemHeight)
+
+      return this.$createElement('div', {
+        staticClass: 'k-virtual-scroll__item',
+        style: { top },
+        key: index,
+      }, getSlot(this, 'default', { index, item }))
+    },
+    getFirst (): number {
+      return Math.floor(this.scrollTop / this.__itemHeight)
+    },
+    getLast (first: number): number {
+      const height = parseInt(this.height || 0, 10) || this.$el.clientHeight
+
+      return first + Math.ceil(height / this.__itemHeight)
+    },
+    onScroll () {
+      this.scrollTop = this.$el.scrollTop
+      this.first = this.getFirst()
+      this.last = this.getLast(this.first)
+    },
+  },
+
+  render (h): KNode {
+    const content = h('div', {
+      staticClass: 'k-virtual-scroll__container',
+      style: {
+        height: convertToUnit((this.items.length * this.__itemHeight)),
+      },
+    }, this.getChildren())
+
+    return h('div', {
+      staticClass: 'k-virtual-scroll',
+      style: this.measurableStyles,
+      directives: [{
+        name: 'scroll',
+        modifiers: { self: true },
+        value: this.onScroll,
+      }],
+      on: this.$listeners,
+    }, [content])
+  },
+})

package/src/components/KVirtualScroll/index.ts

@@ -0,0 +1,4 @@
+import KVirtualScroll from './KVirtualScroll'
+
+export { KVirtualScroll }
+export default KVirtualScroll

package/src/components/KWindow/KWindow.sass

@@ -0,0 +1,108 @@
+@import './_variables.scss'
+
+.k-window
+  overflow: hidden
+
+  &__container
+    display: flex
+    flex-direction: column
+    height: inherit
+    position: relative
+    transition: $window-transition
+
+    &--is-active
+      overflow: hidden
+
+  &__prev,
+  &__next
+    background: rgba(0, 0, 0, .3)
+    border-radius: 50%
+    position: absolute
+    margin: $window-controls-margin
+    top: $window-controls-top
+    z-index: 1
+
+    .k-btn:hover
+      background: none
+
+  &__prev
+    +ltr()
+      left: 0
+
+    +rtl()
+      right: 0
+
+  &__next
+    +ltr()
+      right: 0
+
+    +rtl()
+      left: 0
+
+  &--show-arrows-on-hover
+    overflow: hidden
+
+    .k-window__next,
+    .k-window__prev
+      transition: .2s transform map-get($transition, 'swing')
+
+    .k-window__prev
+      +ltr()
+        transform: translateX(-200%)
+
+      +rtl()
+        transform: translateX(200%)
+
+    .k-window__next
+      +ltr()
+        transform: translateX(200%)
+
+      +rtl()
+        transform: translateX(-200%)
+
+    &:hover
+      .k-window__next,
+      .k-window__prev
+        transform: translateX(0)
+
+  &-x-transition,
+  &-x-reverse-transition,
+  &-y-transition,
+  &-y-reverse-transition
+    &-enter-active,
+    &-leave-active
+      transition: $window-transition
+
+    &-leave,
+    &-leave-to
+      position: absolute !important
+      top: 0
+      width: 100%
+
+  &-x-transition
+    &-enter
+      transform: translateX(100%)
+
+    &-leave-to
+      transform: translateX(-100%)
+
+  &-x-reverse-transition
+    &-enter
+      transform: translateX(-100%)
+
+    &-leave-to
+      transform: translateX(100%)
+
+  &-y-transition
+    &-enter
+      transform: translateY(100%)
+
+    &-leave-to
+      transform: translateY(-100%)
+
+  &-y-reverse-transition
+    &-enter
+      transform: translateY(-100%)
+
+    &-leave-to
+      transform: translateY(100%)