kdutify 0.16.9-rc.0 → 2.6.0

package/src/mixins/overlayable/index.ts

@@ -0,0 +1,236 @@
+// Components
+import KOverlay from '../../components/KOverlay'
+
+// Utilities
+import {
+  keyCodes,
+  addOnceEventListener,
+  addPassiveEventListener,
+  getZIndex,
+  composedPath,
+} from '../../util/helpers'
+
+// Types
+import Kdu from 'kdu'
+
+interface Toggleable extends Kdu {
+  isActive?: boolean
+}
+
+interface Stackable extends Kdu {
+  activeZIndex: number
+}
+
+interface options {
+  absolute?: boolean
+  $refs: {
+    dialog?: HTMLElement
+    content?: HTMLElement
+  }
+}
+
+/* @kdujs/component */
+export default Kdu.extend<Kdu & Toggleable & Stackable & options>().extend({
+  name: 'overlayable',
+
+  props: {
+    hideOverlay: Boolean,
+    overlayColor: String,
+    overlayOpacity: [Number, String],
+  },
+
+  data () {
+    return {
+      animationFrame: 0,
+      overlay: null as InstanceType<typeof KOverlay> | null,
+    }
+  },
+
+  watch: {
+    hideOverlay (value) {
+      if (!this.isActive) return
+
+      if (value) this.removeOverlay()
+      else this.genOverlay()
+    },
+  },
+
+  beforeDestroy () {
+    this.removeOverlay()
+  },
+
+  methods: {
+    createOverlay () {
+      const overlay = new KOverlay({
+        propsData: {
+          absolute: this.absolute,
+          value: false,
+          color: this.overlayColor,
+          opacity: this.overlayOpacity,
+        },
+      })
+
+      overlay.$mount()
+
+      const parent = this.absolute
+        ? this.$el.parentNode
+        : document.querySelector('[data-app]')
+
+      parent && parent.insertBefore(overlay.$el, parent.firstChild)
+
+      this.overlay = overlay
+    },
+    genOverlay () {
+      this.hideScroll()
+
+      if (this.hideOverlay) return
+
+      if (!this.overlay) this.createOverlay()
+
+      this.animationFrame = requestAnimationFrame(() => {
+        if (!this.overlay) return
+
+        if (this.activeZIndex !== undefined) {
+          this.overlay.zIndex = String(this.activeZIndex - 1)
+        } else if (this.$el) {
+          this.overlay.zIndex = getZIndex(this.$el)
+        }
+
+        this.overlay.value = true
+      })
+
+      return true
+    },
+    /** removeOverlay(false) will not restore the scollbar afterwards */
+    removeOverlay (showScroll = true) {
+      if (this.overlay) {
+        addOnceEventListener(this.overlay.$el, 'transitionend', () => {
+          if (
+            !this.overlay ||
+            !this.overlay.$el ||
+            !this.overlay.$el.parentNode ||
+            this.overlay.value ||
+            this.isActive
+          ) return
+
+          this.overlay.$el.parentNode.removeChild(this.overlay.$el)
+          this.overlay.$destroy()
+          this.overlay = null
+        })
+
+        // Cancel animation frame in case
+        // overlay is removed before it
+        // has finished its animation
+        cancelAnimationFrame(this.animationFrame)
+
+        this.overlay.value = false
+      }
+
+      showScroll && this.showScroll()
+    },
+    scrollListener (e: WheelEvent & KeyboardEvent) {
+      if (e.type === 'keydown') {
+        if (
+          ['INPUT', 'TEXTAREA', 'SELECT'].includes((e.target as Element).tagName) ||
+          (e.target as HTMLElement).isContentEditable
+        ) return
+
+        const up = [keyCodes.up, keyCodes.pageup]
+        const down = [keyCodes.down, keyCodes.pagedown]
+
+        if (up.includes(e.keyCode)) {
+          (e as any).deltaY = -1
+        } else if (down.includes(e.keyCode)) {
+          (e as any).deltaY = 1
+        } else {
+          return
+        }
+      }
+
+      if (e.target === this.overlay ||
+        (e.type !== 'keydown' && e.target === document.body) ||
+        this.checkPath(e)) e.preventDefault()
+    },
+    hasScrollbar (el?: Element) {
+      if (!el || el.nodeType !== Node.ELEMENT_NODE) return false
+
+      const style = window.getComputedStyle(el)
+      return ((['auto', 'scroll'].includes(style.overflowY!) || el.tagName === 'SELECT') && el.scrollHeight > el.clientHeight) ||
+      ((['auto', 'scroll'].includes(style.overflowX!)) && el.scrollWidth > el.clientWidth)
+    },
+    shouldScroll (el: Element, e: WheelEvent): boolean {
+      if (el.hasAttribute('data-app')) return false
+
+      const dir = e.shiftKey || e.deltaX ? 'x' : 'y'
+      const delta = dir === 'y' ? e.deltaY : e.deltaX || e.deltaY
+
+      let alreadyAtStart: boolean
+      let alreadyAtEnd: boolean
+      if (dir === 'y') {
+        alreadyAtStart = el.scrollTop === 0
+        alreadyAtEnd = el.scrollTop + el.clientHeight === el.scrollHeight
+      } else {
+        alreadyAtStart = el.scrollLeft === 0
+        alreadyAtEnd = el.scrollLeft + el.clientWidth === el.scrollWidth
+      }
+
+      const scrollingUp = delta < 0
+      const scrollingDown = delta > 0
+
+      if (!alreadyAtStart && scrollingUp) return true
+      if (!alreadyAtEnd && scrollingDown) return true
+      if ((alreadyAtStart || alreadyAtEnd)) {
+        return this.shouldScroll(el.parentNode as Element, e)
+      }
+
+      return false
+    },
+    isInside (el: Element, parent: Element): boolean {
+      if (el === parent) {
+        return true
+      } else if (el === null || el === document.body) {
+        return false
+      } else {
+        return this.isInside(el.parentNode as Element, parent)
+      }
+    },
+    checkPath (e: WheelEvent) {
+      const path = composedPath(e)
+
+      if (e.type === 'keydown' && path[0] === document.body) {
+        const dialog = this.$refs.dialog
+        // getSelection returns null in firefox in some edge cases, can be ignored
+        const selected = window.getSelection()!.anchorNode as Element
+        if (dialog && this.hasScrollbar(dialog) && this.isInside(selected, dialog)) {
+          return !this.shouldScroll(dialog, e)
+        }
+        return true
+      }
+
+      for (let index = 0; index < path.length; index++) {
+        const el = path[index]
+
+        if (el === document) return true
+        if (el === document.documentElement) return true
+        if (el === this.$refs.content) return true
+
+        if (this.hasScrollbar(el as Element)) return !this.shouldScroll(el as Element, e)
+      }
+
+      return true
+    },
+    hideScroll () {
+      if (this.$kdutify.breakpoint.smAndDown) {
+        document.documentElement!.classList.add('overflow-y-hidden')
+      } else {
+        addPassiveEventListener(window, 'wheel', this.scrollListener as EventHandlerNonNull, { passive: false })
+        window.addEventListener('keydown', this.scrollListener as EventHandlerNonNull)
+      }
+    },
+    showScroll () {
+      document.documentElement!.classList.remove('overflow-y-hidden')
+      window.removeEventListener('wheel', this.scrollListener as EventHandlerNonNull)
+      window.removeEventListener('keydown', this.scrollListener as EventHandlerNonNull)
+    },
+  },
+})

package/src/mixins/picker/index.ts

@@ -0,0 +1,77 @@
+// Components
+import KPicker from '../../components/KPicker'
+
+// Mixins
+import Colorable from '../colorable'
+import Elevatable from '../../mixins/elevatable'
+import Themeable from '../themeable'
+
+// Utils
+import mixins from '../../util/mixins'
+
+// Types
+import { KNode } from 'kdu'
+
+export default mixins(
+  Colorable,
+  Elevatable,
+  Themeable
+/* @kdujs/component */
+).extend({
+  name: 'picker',
+
+  props: {
+    flat: Boolean,
+    fullWidth: Boolean,
+    headerColor: String,
+    landscape: Boolean,
+    noTitle: Boolean,
+    width: {
+      type: [Number, String],
+      default: 290,
+    },
+  },
+
+  methods: {
+    genPickerTitle (): KNode | null {
+      return null
+    },
+    genPickerBody (): KNode | null {
+      return null
+    },
+    genPickerActionsSlot () {
+      return this.$scopedSlots.default ? this.$scopedSlots.default({
+        save: (this as any).save,
+        cancel: (this as any).cancel,
+      }) : this.$slots.default
+    },
+    genPicker (staticClass: string) {
+      const children: KNode[] = []
+
+      if (!this.noTitle) {
+        const title = this.genPickerTitle()
+        title && children.push(title)
+      }
+
+      const body = this.genPickerBody()
+      body && children.push(body)
+
+      children.push(this.$createElement('template', { slot: 'actions' }, [this.genPickerActionsSlot()]))
+
+      return this.$createElement(KPicker, {
+        staticClass,
+        props: {
+          color: this.headerColor || this.color,
+          dark: this.dark,
+          elevation: this.elevation,
+          flat: this.flat,
+          fullWidth: this.fullWidth,
+          landscape: this.landscape,
+          light: this.light,
+          width: this.width,
+          noTitle: this.noTitle,
+        },
+      }, children)
+    },
+  },
+})

package/src/mixins/picker-button/index.ts

@@ -0,0 +1,39 @@
+// Mixins
+import Colorable from '../colorable'
+
+// Utilities
+import mixins from '../../util/mixins'
+import { kebabCase } from '../../util/helpers'
+
+// Types
+import { KNodeChildren } from 'kdu'
+
+/* @kdujs/component */
+export default mixins(
+  Colorable
+).extend({
+  methods: {
+    genPickerButton (
+      prop: string,
+      value: any,
+      content: KNodeChildren,
+      readonly = false,
+      staticClass = ''
+    ) {
+      const active = (this as any)[prop] === value
+      const click = (event: Event) => {
+        event.stopPropagation()
+        this.$emit(`update:${kebabCase(prop)}`, value)
+      }
+
+      return this.$createElement('div', {
+        staticClass: `k-picker__title__btn ${staticClass}`.trim(),
+        class: {
+          'k-picker__title__btn--active': active,
+          'k-picker__title__btn--readonly': readonly,
+        },
+        on: (active || readonly) ? undefined : { click },
+      }, Array.isArray(content) ? content : [content])
+    },
+  },
+})

package/src/mixins/positionable/index.ts

@@ -0,0 +1,54 @@
+import Kdu from 'kdu'
+import { filterObjectOnKeys } from '../../util/helpers'
+import { OptionsKdu, KduConstructor } from 'kdu/types/kdu'
+
+const availableProps = {
+  absolute: Boolean,
+  bottom: Boolean,
+  fixed: Boolean,
+  left: Boolean,
+  right: Boolean,
+  top: Boolean,
+}
+type props = Record<keyof typeof availableProps, boolean>
+
+export type Positionable<S extends keyof props> = KduConstructor<Kdu & { [P in S]: boolean }, { [P in S]: BooleanConstructor }>
+
+export function factory <S extends keyof props> (selected?: S[]): Positionable<S>
+export function factory (selected: undefined): OptionsKdu<Kdu, {}, {}, {}, props, typeof availableProps>
+export function factory (selected: any[] = []): any {
+  return Kdu.extend({
+    name: 'positionable',
+    props: selected.length ? filterObjectOnKeys(availableProps, selected) : availableProps,
+  })
+}
+
+export default factory()
+
+// Add a `*` before the second `/`
+/* Tests /
+let single = factory(['top']).extend({
+  created () {
+    this.top
+    this.bottom
+    this.absolute
+  }
+})
+
+let some = factory(['top', 'bottom']).extend({
+  created () {
+    this.top
+    this.bottom
+    this.absolute
+  }
+})
+
+let all = factory().extend({
+  created () {
+    this.top
+    this.bottom
+    this.absolute
+    this.foobar
+  }
+})
+/**/

package/src/mixins/proxyable/index.ts

@@ -0,0 +1,59 @@
+import Kdu, { KduConstructor } from 'kdu'
+
+export type Proxyable<T extends string = 'value'> = KduConstructor<Kdu & {
+  internalLazyValue: unknown
+  internalValue: unknown
+} & Record<T, any>>
+
+export function factory<T extends string = 'value'> (prop?: T, event?: string): Proxyable<T>
+export function factory (
+  prop = 'value',
+  event = 'change'
+) {
+  return Kdu.extend({
+    name: 'proxyable',
+
+    model: {
+      prop,
+      event,
+    },
+
+    props: {
+      [prop]: {
+        required: false,
+      },
+    },
+
+    data () {
+      return {
+        internalLazyValue: this[prop] as unknown,
+      }
+    },
+
+    computed: {
+      internalValue: {
+        get (): unknown {
+          return this.internalLazyValue
+        },
+        set (val: any) {
+          if (val === this.internalLazyValue) return
+
+          this.internalLazyValue = val
+
+          this.$emit(event, val)
+        },
+      },
+    },
+
+    watch: {
+      [prop] (val) {
+        this.internalLazyValue = val
+      },
+    },
+  })
+}
+
+/* eslint-disable-next-line @typescript-eslint/no-redeclare */
+const Proxyable = factory()
+
+export default Proxyable

package/src/mixins/registrable/index.ts

@@ -0,0 +1,48 @@
+import Kdu from 'kdu'
+import { KduConstructor } from 'kdu/types/kdu'
+import { consoleWarn } from '../../util/console'
+
+function generateWarning (child: string, parent: string) {
+  return () => consoleWarn(`The ${child} component must be used inside a ${parent}`)
+}
+
+export type Registrable<T extends string, C extends KduConstructor | null = null> = KduConstructor<Kdu & {
+  [K in T]: C extends KduConstructor ? InstanceType<C> : {
+    register (...props: any[]): void
+    unregister (self: any): void
+  }
+}>
+
+export function inject<
+  T extends string, C extends KduConstructor | null = null
+> (namespace: T, child?: string, parent?: string): Registrable<T, C> {
+  const defaultImpl = child && parent ? {
+    register: generateWarning(child, parent),
+    unregister: generateWarning(child, parent),
+  } : null
+
+  return Kdu.extend({
+    name: 'registrable-inject',
+
+    inject: {
+      [namespace]: {
+        default: defaultImpl,
+      },
+    },
+  })
+}
+
+export function provide (namespace: string, self = false) {
+  return Kdu.extend({
+    name: 'registrable-provide',
+
+    provide (): object {
+      return {
+        [namespace]: self ? this : {
+          register: (this as any).register,
+          unregister: (this as any).unregister,
+        },
+      }
+    },
+  })
+}

package/src/mixins/returnable/index.ts

@@ -0,0 +1,34 @@
+import Kdu from 'kdu'
+
+/* @kdujs/component */
+export default Kdu.extend({
+  name: 'returnable',
+
+  props: {
+    returnValue: null as any,
+  },
+
+  data: () => ({
+    isActive: false,
+    originalValue: null as any,
+  }),
+
+  watch: {
+    isActive (val) {
+      if (val) {
+        this.originalValue = this.returnValue
+      } else {
+        this.$emit('update:return-value', this.originalValue)
+      }
+    },
+  },
+
+  methods: {
+    save (value: any) {
+      this.originalValue = value
+      setTimeout(() => {
+        this.isActive = false
+      })
+    },
+  },
+})

package/src/mixins/rippleable/index.ts

@@ -0,0 +1,34 @@
+// Directives
+import ripple from '../../directives/ripple'
+
+// Types
+import Kdu, { KNode, KNodeData, KNodeDirective } from 'kdu'
+
+export default Kdu.extend({
+  name: 'rippleable',
+
+  directives: { ripple },
+
+  props: {
+    ripple: {
+      type: [Boolean, Object],
+      default: true,
+    },
+  },
+
+  methods: {
+    genRipple (data: KNodeData = {}): KNode | null {
+      if (!this.ripple) return null
+
+      data.staticClass = 'k-input--selection-controls__ripple'
+
+      data.directives = data.directives || []
+      data.directives.push({
+        name: 'ripple',
+        value: { center: true },
+      } as KNodeDirective)
+
+      return this.$createElement('div', data)
+    },
+  },
+})

package/src/mixins/roundable/index.ts

@@ -0,0 +1,36 @@
+import Kdu from 'kdu'
+
+/* @kdujs/component */
+export default Kdu.extend({
+  name: 'roundable',
+
+  props: {
+    rounded: [Boolean, String],
+    tile: Boolean,
+  },
+
+  computed: {
+    roundedClasses (): Record<string, boolean> {
+      const composite = []
+      const rounded = typeof this.rounded === 'string'
+        ? String(this.rounded)
+        : this.rounded === true
+
+      if (this.tile) {
+        composite.push('rounded-0')
+      } else if (typeof rounded === 'string') {
+        const values = rounded.split(' ')
+
+        for (const value of values) {
+          composite.push(`rounded-${value}`)
+        }
+      } else if (rounded) {
+        composite.push('rounded')
+      }
+
+      return composite.length > 0 ? {
+        [composite.join(' ')]: true,
+      } : {}
+    },
+  },
+})