kdutify 0.16.9-rc.0 → 2.6.0

package/src/mixins/transitionable/index.ts

@@ -0,0 +1,11 @@
+import Kdu from 'kdu'
+
+export default Kdu.extend({
+  name: 'transitionable',
+
+  props: {
+    mode: String,
+    origin: String,
+    transition: String,
+  },
+})

package/src/mixins/translatable/index.ts

@@ -0,0 +1,60 @@
+import Kdu from 'kdu'
+
+export default Kdu.extend({
+  name: 'translatable',
+
+  props: {
+    height: Number,
+  },
+
+  data: () => ({
+    elOffsetTop: 0,
+    parallax: 0,
+    parallaxDist: 0,
+    percentScrolled: 0,
+    scrollTop: 0,
+    windowHeight: 0,
+    windowBottom: 0,
+  }),
+
+  computed: {
+    imgHeight (): number {
+      return this.objHeight()
+    },
+  },
+
+  beforeDestroy () {
+    window.removeEventListener('scroll', this.translate, false)
+    window.removeEventListener('resize', this.translate, false)
+  },
+
+  methods: {
+    calcDimensions () {
+      const offset = this.$el.getBoundingClientRect()
+
+      this.scrollTop = window.pageYOffset
+      this.parallaxDist = this.imgHeight - this.height
+      this.elOffsetTop = offset.top + this.scrollTop
+      this.windowHeight = window.innerHeight
+      this.windowBottom = this.scrollTop + this.windowHeight
+    },
+    listeners () {
+      window.addEventListener('scroll', this.translate, false)
+      window.addEventListener('resize', this.translate, false)
+    },
+    /** @abstract **/
+    objHeight (): number {
+      throw new Error('Not implemented !')
+    },
+    translate () {
+      this.calcDimensions()
+
+      this.percentScrolled = (
+        (this.windowBottom - this.elOffsetTop) /
+        (parseInt(this.height) + this.windowHeight)
+      )
+
+      this.parallax = Math.round(this.parallaxDist * this.percentScrolled)
+    },
+  },
+})

package/src/mixins/validatable/index.ts

@@ -0,0 +1,269 @@
+// Mixins
+import Colorable from '../colorable'
+import Themeable from '../themeable'
+import { inject as RegistrableInject } from '../registrable'
+
+// Utilities
+import { deepEqual } from '../../util/helpers'
+import { consoleError } from '../../util/console'
+import mixins from '../../util/mixins'
+
+// Types
+import { PropValidator } from 'kdu/types/options'
+import { InputMessage, InputValidationRules } from 'kdutify/types'
+
+const baseMixins = mixins(
+  Colorable,
+  RegistrableInject<'form', any>('form'),
+  Themeable,
+)
+
+/* @kdujs/component */
+export default baseMixins.extend({
+  name: 'validatable',
+
+  props: {
+    disabled: Boolean,
+    error: Boolean,
+    errorCount: {
+      type: [Number, String],
+      default: 1,
+    },
+    errorMessages: {
+      type: [String, Array],
+      default: () => [],
+    } as PropValidator<InputMessage | null>,
+    messages: {
+      type: [String, Array],
+      default: () => [],
+    } as PropValidator<InputMessage | null>,
+    readonly: Boolean,
+    rules: {
+      type: Array,
+      default: () => [],
+    } as PropValidator<InputValidationRules>,
+    success: Boolean,
+    successMessages: {
+      type: [String, Array],
+      default: () => [],
+    } as PropValidator<InputMessage | null>,
+    validateOnBlur: Boolean,
+    value: { required: false },
+  },
+
+  data () {
+    return {
+      errorBucket: [] as string[],
+      hasColor: false,
+      hasFocused: false,
+      hasInput: false,
+      isFocused: false,
+      isResetting: false,
+      lazyValue: this.value,
+      valid: false,
+    }
+  },
+
+  computed: {
+    computedColor (): string | undefined {
+      if (this.isDisabled) return undefined
+      if (this.color) return this.color
+      // It's assumed that if the input is on a
+      // dark background, the user will want to
+      // have a white color. If the entire app
+      // is setup to be dark, then they will
+      // like want to use their primary color
+      if (this.isDark && !this.appIsDark) return 'white'
+      else return 'primary'
+    },
+    hasError (): boolean {
+      return (
+        this.internalErrorMessages.length > 0 ||
+        this.errorBucket.length > 0 ||
+        this.error
+      )
+    },
+    // TODO: Add logic that allows the user to enable based
+    // upon a good validation
+    hasSuccess (): boolean {
+      return (
+        this.internalSuccessMessages.length > 0 ||
+        this.success
+      )
+    },
+    externalError (): boolean {
+      return this.internalErrorMessages.length > 0 || this.error
+    },
+    hasMessages (): boolean {
+      return this.validationTarget.length > 0
+    },
+    hasState (): boolean {
+      if (this.isDisabled) return false
+
+      return (
+        this.hasSuccess ||
+        (this.shouldValidate && this.hasError)
+      )
+    },
+    internalErrorMessages (): InputValidationRules {
+      return this.genInternalMessages(this.errorMessages)
+    },
+    internalMessages (): InputValidationRules {
+      return this.genInternalMessages(this.messages)
+    },
+    internalSuccessMessages (): InputValidationRules {
+      return this.genInternalMessages(this.successMessages)
+    },
+    internalValue: {
+      get (): unknown {
+        return this.lazyValue
+      },
+      set (val: any) {
+        this.lazyValue = val
+
+        this.$emit('input', val)
+      },
+    },
+    isDisabled (): boolean {
+      return this.disabled || (
+        !!this.form &&
+        this.form.disabled
+      )
+    },
+    isInteractive (): boolean {
+      return !this.isDisabled && !this.isReadonly
+    },
+    isReadonly (): boolean {
+      return this.readonly || (
+        !!this.form &&
+        this.form.readonly
+      )
+    },
+    shouldValidate (): boolean {
+      if (this.externalError) return true
+      if (this.isResetting) return false
+
+      return this.validateOnBlur
+        ? this.hasFocused && !this.isFocused
+        : (this.hasInput || this.hasFocused)
+    },
+    validations (): InputValidationRules {
+      return this.validationTarget.slice(0, Number(this.errorCount))
+    },
+    validationState (): string | undefined {
+      if (this.isDisabled) return undefined
+      if (this.hasError && this.shouldValidate) return 'error'
+      if (this.hasSuccess) return 'success'
+      if (this.hasColor) return this.computedColor
+      return undefined
+    },
+    validationTarget (): InputValidationRules {
+      if (this.internalErrorMessages.length > 0) {
+        return this.internalErrorMessages
+      } else if (this.successMessages && this.successMessages.length > 0) {
+        return this.internalSuccessMessages
+      } else if (this.messages && this.messages.length > 0) {
+        return this.internalMessages
+      } else if (this.shouldValidate) {
+        return this.errorBucket
+      } else return []
+    },
+  },
+
+  watch: {
+    rules: {
+      handler (newVal, oldVal) {
+        if (deepEqual(newVal, oldVal)) return
+        this.validate()
+      },
+      deep: true,
+    },
+    internalValue () {
+      // If it's the first time we're setting input,
+      // mark it with hasInput
+      this.hasInput = true
+      this.validateOnBlur || this.$nextTick(this.validate)
+    },
+    isFocused (val) {
+      // Should not check validation
+      // if disabled
+      if (
+        !val &&
+        !this.isDisabled
+      ) {
+        this.hasFocused = true
+        this.validateOnBlur && this.$nextTick(this.validate)
+      }
+    },
+    isResetting () {
+      setTimeout(() => {
+        this.hasInput = false
+        this.hasFocused = false
+        this.isResetting = false
+        this.validate()
+      }, 0)
+    },
+    hasError (val) {
+      if (this.shouldValidate) {
+        this.$emit('update:error', val)
+      }
+    },
+    value (val) {
+      this.lazyValue = val
+    },
+  },
+
+  beforeMount () {
+    this.validate()
+  },
+
+  created () {
+    this.form && this.form.register(this)
+  },
+
+  beforeDestroy () {
+    this.form && this.form.unregister(this)
+  },
+
+  methods: {
+    genInternalMessages (messages: InputMessage | null): InputValidationRules {
+      if (!messages) return []
+      else if (Array.isArray(messages)) return messages
+      else return [messages]
+    },
+    /** @public */
+    reset () {
+      this.isResetting = true
+      this.internalValue = Array.isArray(this.internalValue)
+        ? []
+        : null
+    },
+    /** @public */
+    resetValidation () {
+      this.isResetting = true
+    },
+    /** @public */
+    validate (force = false, value?: any): boolean {
+      const errorBucket = []
+      value = value || this.internalValue
+
+      if (force) this.hasInput = this.hasFocused = true
+
+      for (let index = 0; index < this.rules.length; index++) {
+        const rule = this.rules[index]
+        const valid = typeof rule === 'function' ? rule(value) : rule
+
+        if (valid === false || typeof valid === 'string') {
+          errorBucket.push(valid || '')
+        } else if (typeof valid !== 'boolean') {
+          consoleError(`Rules should return a string or boolean, received '${typeof valid}' instead`, this)
+        }
+      }
+
+      this.errorBucket = errorBucket
+      this.valid = errorBucket.length === 0
+
+      return this.valid
+    },
+  },
+})

package/src/presets/default/index.ts

@@ -0,0 +1,70 @@
+// Styles
+import '../../styles/main.sass'
+
+// Locale
+import { en } from '../../locale'
+
+// Icons
+// TODO: Enable for v3
+// import mdi from '../../services/icons/presets/mdi'
+
+// Types
+import { KdutifyPreset } from 'kdutify/types/services/presets'
+
+export const preset: KdutifyPreset = {
+  breakpoint: {
+    // TODO: update to MD2 spec in v3 - 1280
+    mobileBreakpoint: 1264,
+    scrollBarWidth: 16,
+    thresholds: {
+      xs: 600,
+      sm: 960,
+      md: 1280,
+      lg: 1920,
+    },
+  },
+  icons: {
+    // TODO: remove v3
+    iconfont: 'mdi',
+    values: {},
+  },
+  lang: {
+    current: 'en',
+    locales: { en },
+    // Default translator exists in lang service
+    t: undefined as any,
+  },
+  rtl: false,
+  theme: {
+    dark: false,
+    default: 'light',
+    disable: false,
+    options: {
+      cspNonce: undefined,
+      customProperties: undefined,
+      minifyTheme: undefined,
+      themeCache: undefined,
+      variations: true,
+    },
+    themes: {
+      light: {
+        primary: '#1976D2',
+        secondary: '#424242',
+        accent: '#82B1FF',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FB8C00',
+      },
+      dark: {
+        primary: '#2196F3',
+        secondary: '#424242',
+        accent: '#FF4081',
+        error: '#FF5252',
+        info: '#2196F3',
+        success: '#4CAF50',
+        warning: '#FB8C00',
+      },
+    },
+  },
+}

package/src/services/application/index.ts

@@ -0,0 +1,55 @@
+// Extensions
+import { Service } from '../service'
+
+// Types
+import { TargetPropValues, TargetProp, Application as IApplication } from 'kdutify/types/services/application'
+
+export class Application extends Service implements IApplication {
+  static property: 'application' = 'application'
+
+  bar = 0
+
+  top = 0
+
+  left = 0
+
+  insetFooter = 0
+
+  right = 0
+
+  bottom = 0
+
+  footer = 0
+
+  application: Dictionary<TargetPropValues> = {
+    bar: {},
+    top: {},
+    left: {},
+    insetFooter: {},
+    right: {},
+    bottom: {},
+    footer: {},
+  }
+
+  register (
+    uid: number,
+    location: TargetProp,
+    size: number
+  ) {
+    this.application[location] = { [uid]: size }
+
+    this.update(location)
+  }
+
+  unregister (uid: number, location: TargetProp) {
+    if (this.application[location][uid] == null) return
+
+    delete this.application[location][uid]
+    this.update(location)
+  }
+
+  update (location: TargetProp) {
+    this[location] = Object.values(this.application[location])
+      .reduce((acc: number, cur: number): number => (acc + cur), 0)
+  }
+}

package/src/services/breakpoint/index.ts

@@ -0,0 +1,188 @@
+// Extensions
+import { Service } from '../service'
+
+// Types
+import { KdutifyPreset } from 'kdutify/types/services/presets'
+import { Breakpoint as IBreakpoint } from 'kdutify/types/services/breakpoint'
+
+export class Breakpoint extends Service implements IBreakpoint {
+  public static property: 'breakpoint' = 'breakpoint'
+
+  // Public
+  public xs = false
+
+  public sm = false
+
+  public md = false
+
+  public lg = false
+
+  public xl = false
+
+  public xsOnly = false
+
+  public smOnly = false
+
+  public smAndDown = false
+
+  public smAndUp = false
+
+  public mdOnly = false
+
+  public mdAndDown = false
+
+  public mdAndUp = false
+
+  public lgOnly = false
+
+  public lgAndDown = false
+
+  public lgAndUp = false
+
+  public xlOnly = false
+
+  // Value is xs to match v2.x functionality
+  public name: IBreakpoint['name'] = 'xs'
+
+  public height = 0
+
+  public width = 0
+
+  // TODO: Add functionality to detect this dynamically in v3
+  // Value is true to match v2.x functionality
+  public mobile = true
+
+  public mobileBreakpoint: IBreakpoint['mobileBreakpoint']
+
+  public thresholds: IBreakpoint['thresholds']
+
+  public scrollBarWidth: IBreakpoint['scrollBarWidth']
+
+  private resizeTimeout = 0
+
+  constructor (preset: KdutifyPreset) {
+    super()
+
+    const {
+      mobileBreakpoint,
+      scrollBarWidth,
+      thresholds,
+    } = preset[Breakpoint.property]
+
+    this.mobileBreakpoint = mobileBreakpoint
+    this.scrollBarWidth = scrollBarWidth
+    this.thresholds = thresholds
+  }
+
+  public init () {
+    this.update()
+
+    /* istanbul ignore if */
+    if (typeof window === 'undefined') return
+
+    window.addEventListener(
+      'resize',
+      this.onResize.bind(this),
+      { passive: true }
+    )
+  }
+
+  /* eslint-disable-next-line max-statements */
+  public update (ssr = false) {
+    const height = ssr ? 0 : this.getClientHeight()
+    const width = ssr ? 0 : this.getClientWidth()
+
+    const xs = width < this.thresholds.xs
+    const sm = width < this.thresholds.sm && !xs
+    const md = width < (this.thresholds.md - this.scrollBarWidth) && !(sm || xs)
+    const lg = width < (this.thresholds.lg - this.scrollBarWidth) && !(md || sm || xs)
+    const xl = width >= (this.thresholds.lg - this.scrollBarWidth)
+
+    this.height = height
+    this.width = width
+
+    this.xs = xs
+    this.sm = sm
+    this.md = md
+    this.lg = lg
+    this.xl = xl
+
+    this.xsOnly = xs
+    this.smOnly = sm
+    this.smAndDown = (xs || sm) && !(md || lg || xl)
+    this.smAndUp = !xs && (sm || md || lg || xl)
+    this.mdOnly = md
+    this.mdAndDown = (xs || sm || md) && !(lg || xl)
+    this.mdAndUp = !(xs || sm) && (md || lg || xl)
+    this.lgOnly = lg
+    this.lgAndDown = (xs || sm || md || lg) && !xl
+    this.lgAndUp = !(xs || sm || md) && (lg || xl)
+    this.xlOnly = xl
+
+    switch (true) {
+      case (xs):
+        this.name = 'xs'
+        break
+      case (sm):
+        this.name = 'sm'
+        break
+      case (md):
+        this.name = 'md'
+        break
+      case (lg):
+        this.name = 'lg'
+        break
+      default:
+        this.name = 'xl'
+        break
+    }
+
+    if (typeof this.mobileBreakpoint === 'number') {
+      this.mobile = width < parseInt(this.mobileBreakpoint, 10)
+
+      return
+    }
+
+    const breakpoints = {
+      xs: 0,
+      sm: 1,
+      md: 2,
+      lg: 3,
+      xl: 4,
+    } as const
+
+    const current = breakpoints[this.name]
+    const max = breakpoints[this.mobileBreakpoint]
+
+    this.mobile = current <= max
+  }
+
+  private onResize () {
+    clearTimeout(this.resizeTimeout)
+
+    // Added debounce to match what
+    // k-resize used to do but was
+    // removed due to a memory leak
+    this.resizeTimeout = window.setTimeout(this.update.bind(this), 200)
+  }
+
+  // Cross-browser support as described in:
+  // https://stackoverflow.com/questions/1248081
+  private getClientWidth () {
+    /* istanbul ignore if */
+    if (typeof document === 'undefined') return 0 // SSR
+    return Math.max(
+      document.documentElement!.clientWidth,
+      window.innerWidth || 0
+    )
+  }
+
+  private getClientHeight () {
+    /* istanbul ignore if */
+    if (typeof document === 'undefined') return 0 // SSR
+    return Math.max(
+      document.documentElement!.clientHeight,
+      window.innerHeight || 0
+    )
+  }
+}

package/src/services/goto/easing-patterns.ts

@@ -0,0 +1,28 @@
+export type EasingFunction = (t: number) => number
+
+// linear
+export const linear = (t: number) => t
+// accelerating from zero velocity
+export const easeInQuad = (t: number) => t ** 2
+// decelerating to zero velocity
+export const easeOutQuad = (t: number) => t * (2 - t)
+// acceleration until halfway, then deceleration
+export const easeInOutQuad = (t: number) => (t < 0.5 ? 2 * t ** 2 : -1 + (4 - 2 * t) * t)
+// accelerating from zero velocity
+export const easeInCubic = (t: number) => t ** 3
+// decelerating to zero velocity
+export const easeOutCubic = (t: number) => --t ** 3 + 1
+// acceleration until halfway, then deceleration
+export const easeInOutCubic = (t: number) => t < 0.5 ? 4 * t ** 3 : (t - 1) * (2 * t - 2) * (2 * t - 2) + 1
+// accelerating from zero velocity
+export const easeInQuart = (t: number) => t ** 4
+// decelerating to zero velocity
+export const easeOutQuart = (t: number) => 1 - --t ** 4
+// acceleration until halfway, then deceleration
+export const easeInOutQuart = (t: number) => (t < 0.5 ? 8 * t * t * t * t : 1 - 8 * --t * t * t * t)
+// accelerating from zero velocity
+export const easeInQuint = (t: number) => t ** 5
+// decelerating to zero velocity
+export const easeOutQuint = (t: number) => 1 + --t ** 5
+// acceleration until halfway, then deceleration
+export const easeInOutQuint = (t: number) => t < 0.5 ? 16 * t ** 5 : 1 + 16 * --t ** 5