kdutify 0.16.9-rc.0 → 2.6.1

package/src/util/mergeData.ts

@@ -0,0 +1,156 @@
+/* eslint-disable max-statements */
+import { KNodeData } from 'kdu'
+import { camelize, wrapInArray } from './helpers'
+
+const pattern = {
+  styleList: /;(?![^(]*\))/g,
+  styleProp: /:(.*)/,
+} as const
+
+function parseStyle (style: string) {
+  const styleMap: Dictionary<any> = {}
+
+  for (const s of style.split(pattern.styleList)) {
+    let [key, val] = s.split(pattern.styleProp)
+    key = key.trim()
+    if (!key) {
+      continue
+    }
+    // May be undefined if the `key: value` pair is incomplete.
+    if (typeof val === 'string') {
+      val = val.trim()
+    }
+    styleMap[camelize(key)] = val
+  }
+
+  return styleMap
+}
+
+/**
+ * Intelligently merges data for createElement.
+ * Merges arguments left to right, preferring the right argument.
+ * Returns new KNodeData object.
+ */
+export default function mergeData (...kNodeData: KNodeData[]): KNodeData
+export default function mergeData (): KNodeData {
+  const mergeTarget: KNodeData & Dictionary<any> = {}
+  let i: number = arguments.length
+  let prop: string
+
+  // Allow for variadic argument length.
+  while (i--) {
+    // Iterate through the data properties and execute merge strategies
+    // Object.keys eliminates need for hasOwnProperty call
+    for (prop of Object.keys(arguments[i])) {
+      switch (prop) {
+        // Array merge strategy (array concatenation)
+        case 'class':
+        case 'directives':
+          if (arguments[i][prop]) {
+            mergeTarget[prop] = mergeClasses(mergeTarget[prop], arguments[i][prop])
+          }
+          break
+        case 'style':
+          if (arguments[i][prop]) {
+            mergeTarget[prop] = mergeStyles(mergeTarget[prop], arguments[i][prop])
+          }
+          break
+        // Space delimited string concatenation strategy
+        case 'staticClass':
+          if (!arguments[i][prop]) {
+            break
+          }
+          if (mergeTarget[prop] === undefined) {
+            mergeTarget[prop] = ''
+          }
+          if (mergeTarget[prop]) {
+            // Not an empty string, so concatenate
+            mergeTarget[prop] += ' '
+          }
+          mergeTarget[prop] += arguments[i][prop].trim()
+          break
+        // Object, the properties of which to merge via array merge strategy (array concatenation).
+        // Callback merge strategy merges callbacks to the beginning of the array,
+        // so that the last defined callback will be invoked first.
+        // This is done since to mimic how Object.assign merging
+        // uses the last given value to assign.
+        case 'on':
+        case 'nativeOn':
+          if (arguments[i][prop]) {
+            mergeTarget[prop] = mergeListeners(mergeTarget[prop], arguments[i][prop])
+          }
+          break
+        // Object merge strategy
+        case 'attrs':
+        case 'props':
+        case 'domProps':
+        case 'scopedSlots':
+        case 'staticStyle':
+        case 'hook':
+        case 'transition':
+          if (!arguments[i][prop]) {
+            break
+          }
+          if (!mergeTarget[prop]) {
+            mergeTarget[prop] = {}
+          }
+          mergeTarget[prop] = { ...arguments[i][prop], ...mergeTarget[prop] }
+          break
+        // Reassignment strategy (no merge)
+        default: // slot, key, ref, tag, show, keepAlive
+          if (!mergeTarget[prop]) {
+            mergeTarget[prop] = arguments[i][prop]
+          }
+      }
+    }
+  }
+
+  return mergeTarget
+}
+
+export function mergeStyles (
+  target: undefined | string | object[] | object,
+  source: undefined | string | object[] | object
+) {
+  if (!target) return source
+  if (!source) return target
+
+  target = wrapInArray(typeof target === 'string' ? parseStyle(target) : target)
+
+  return (target as object[]).concat(typeof source === 'string' ? parseStyle(source) : source)
+}
+
+export function mergeClasses (target: any, source: any) {
+  if (!source) return target
+  if (!target) return source
+
+  return target ? wrapInArray(target).concat(source) : source
+}
+
+export function mergeListeners (...args: [
+  { [key: string]: Function | Function[] } | undefined,
+  { [key: string]: Function | Function[] } | undefined
+]) {
+  if (!args[0]) return args[1]
+  if (!args[1]) return args[0]
+
+  const dest: { [key: string]: Function | Function[] } = {}
+
+  for (let i = 2; i--;) {
+    const arg = args[i]
+    for (const event in arg) {
+      if (!arg[event]) continue
+
+      if (dest[event]) {
+        // Merge current listeners before (because we are iterating backwards).
+        // Note that neither "target" or "source" must be altered.
+        dest[event] = ([] as Function[]).concat(arg[event], dest[event])
+      } else {
+        // Straight assign.
+        dest[event] = arg[event]
+      }
+    }
+  }
+
+  return dest
+}

package/src/util/mixins.ts

@@ -0,0 +1,21 @@
+/* eslint-disable max-len, import/export, no-use-before-define */
+import Kdu, { KduConstructor } from 'kdu'
+
+export default function mixins<T extends KduConstructor[]> (...args: T): ExtractKdu<T> extends infer V ? V extends Kdu ? KduConstructor<V> : never : never
+export default function mixins<T extends Kdu> (...args: KduConstructor[]): KduConstructor<T>
+export default function mixins (...args: KduConstructor[]): KduConstructor {
+  return Kdu.extend({ mixins: args })
+}
+
+/**
+ * Returns the instance type from a KduConstructor
+ * Useful for adding types when using mixins().extend()
+ */
+export type ExtractKdu<T extends KduConstructor | KduConstructor[]> = T extends (infer U)[]
+  ? UnionToIntersection<
+    U extends KduConstructor<infer V> ? V : never
+  >
+  : T extends KduConstructor<infer V> ? V : never
+
+type UnionToIntersection<U> =
+  (U extends any ? (k: U) => void : never) extends ((k: infer I) => void) ? I : never

package/src/util/rebuildFunctionalSlots.ts

@@ -0,0 +1,13 @@
+import { CreateElement, KNode } from 'kdu'
+
+export default function rebuildFunctionalSlots (slots: { [key: string]: KNode[] | undefined }, h: CreateElement) {
+  const children: KNode[] = []
+
+  for (const slot in slots) {
+    if (slots.hasOwnProperty(slot)) {
+      children.push(h('template', { slot }, slots[slot]))
+    }
+  }
+
+  return children
+}

package/types/.npmignore

@@ -0,0 +1,2 @@
+# Ignore type tests
+test

package/types/alacarte.d.ts

@@ -0,0 +1,46 @@
+declare module 'kdutify/es5/install' {
+  import { KduConstructor } from 'kdu'
+
+  const install: (Kdu: KduConstructor, args: {}) => void
+
+  export { install }
+}
+declare module 'kdutify/es5/components/Kdutify' {
+  import Kdutify from 'kdutify'
+
+  export default Kdutify
+}
+
+declare module 'kdutify/es5/components/*' {
+  import { ComponentOrPack } from 'kdutify'
+  import { KduConstructor } from 'kdu'
+
+  const KdutifyComponent: {
+    default: ComponentOrPack & KduConstructor
+    [key: string]: ComponentOrPack & KduConstructor
+  }
+
+  export = KdutifyComponent
+}
+
+declare module 'kdutify/es5/directives' {
+  import { DirectiveOptions } from 'kdu'
+
+  const ClickOutside: DirectiveOptions
+  const Intersect: DirectiveOptions
+  const Mutate: DirectiveOptions
+  const Resize: DirectiveOptions
+  const Ripple: DirectiveOptions
+  const Scroll: DirectiveOptions
+  const Touch: DirectiveOptions
+
+  export {
+    ClickOutside,
+    Intersect,
+    Mutate,
+    Ripple,
+    Resize,
+    Scroll,
+    Touch
+  }
+}

package/types/colors.d.ts

@@ -0,0 +1,107 @@
+declare module 'kdutify/es5/util/colors' {
+  interface BaseColor {
+    readonly base: string
+    readonly lighten5: string
+    readonly lighten4: string
+    readonly lighten3: string
+    readonly lighten2: string
+    readonly lighten1: string
+    readonly darken1: string
+    readonly darken2: string
+    readonly darken3: string
+    readonly darken4: string
+  }
+
+  interface Color extends BaseColor {
+    readonly accent1: string
+    readonly accent2: string
+    readonly accent3: string
+    readonly accent4: string
+  }
+
+  interface Shade {
+    readonly black: string
+    readonly white: string
+    readonly transparent: string
+  }
+
+  export interface Colors {
+    red: Color
+    pink: Color
+    purple: Color
+    deepPurple: Color
+    indigo: Color
+    blue: Color
+    lightBlue: Color
+    cyan: Color
+    teal: Color
+    green: Color
+    lightGreen: Color
+    lime: Color
+    yellow: Color
+    amber: Color
+    orange: Color
+    deepOrange: Color
+    brown: BaseColor
+    blueGrey: BaseColor
+    grey: BaseColor
+    shades: Shade
+  }
+
+  const colors: Colors
+  export default colors
+}
+
+declare module 'kdutify/lib/util/colors' {
+  interface BaseColor {
+    readonly base: string
+    readonly lighten5: string
+    readonly lighten4: string
+    readonly lighten3: string
+    readonly lighten2: string
+    readonly lighten1: string
+    readonly darken1: string
+    readonly darken2: string
+    readonly darken3: string
+    readonly darken4: string
+  }
+
+  export interface Color extends BaseColor {
+    readonly accent1: string
+    readonly accent2: string
+    readonly accent3: string
+    readonly accent4: string
+  }
+
+  interface Shade {
+    readonly black: string
+    readonly white: string
+    readonly transparent: string
+  }
+
+  export interface Colors {
+    red: Color
+    pink: Color
+    purple: Color
+    deepPurple: Color
+    indigo: Color
+    blue: Color
+    lightBlue: Color
+    cyan: Color
+    teal: Color
+    green: Color
+    lightGreen: Color
+    lime: Color
+    yellow: Color
+    amber: Color
+    orange: Color
+    deepOrange: Color
+    brown: BaseColor
+    blueGrey: BaseColor
+    grey: BaseColor
+    shades: Shade
+  }
+
+  const colors: Colors
+  export default colors
+}

package/types/index.d.ts

@@ -0,0 +1,302 @@
+import Kdu, { Component, PluginFunction, KduConstructor, DirectiveOptions } from 'kdu'
+import './lib'
+import './alacarte'
+import './colors'
+
+// Services
+import { Application } from './services/application'
+import { Breakpoint } from './services/breakpoint'
+import { Icons } from './services/icons'
+import { Lang } from './services/lang'
+import { Theme } from './services/theme'
+import {
+  Presets,
+  UserKdutifyPreset,
+  KdutifyPreset,
+} from './services/presets'
+
+// Service Options
+import { GoToOptions, KdutifyGoToTarget } from './services/goto'
+
+export default class Kdutify {
+  constructor (preset?: Partial<UserKdutifyPreset>)
+
+  static install: PluginFunction<KdutifyUseOptions>
+  static version: string
+  static config: Config
+
+  framework: Framework
+  preset: KdutifyPreset
+  userPreset: UserKdutifyPreset
+}
+
+export interface Config {
+  silent: boolean
+}
+
+export { Presets, KdutifyPreset, UserKdutifyPreset } from './services/presets'
+
+export type ComponentOrPack = Component & {
+  $_kdutify_subcomponents?: Record<string, ComponentOrPack>
+}
+
+export interface KdutifyUseOptions {
+  transitions?: Record<string, KduConstructor>
+  directives?: Record<string, DirectiveOptions>
+  components?: Record<string, ComponentOrPack>
+}
+
+export interface Framework {
+  readonly breakpoint: Breakpoint
+  readonly goTo: (target: KdutifyGoToTarget, options?: GoToOptions) => Promise<number>
+  application: Application
+  theme: Theme
+  icons: Icons
+  lang: Lang
+  presets: Presets
+  rtl: boolean
+}
+
+declare module 'kdu/types/kdu' {
+  export interface Kdu {
+    $kdutify: Framework
+  }
+}
+
+declare module 'kdu/types/options' {
+  export interface ComponentOptions<
+    V extends Kdu,
+    Data=DefaultData<V>,
+    Methods=DefaultMethods<V>,
+    Computed=DefaultComputed,
+    PropsDef=PropsDefinition<DefaultProps>,
+    Props=DefaultProps> {
+    kdutify?: Kdutify
+  }
+}
+
+// Public types
+export type TreeviewItemFunction = (item: object, search: string, textKey: string) => boolean
+
+export type SelectItemKey = string | (string | number)[] | ((item: object, fallback?: any) => any)
+
+export interface ItemGroup<T> {
+  name: string
+  items: T[]
+}
+
+export interface DataOptions {
+  page: number
+  itemsPerPage: number
+  sortBy: string[]
+  sortDesc: boolean[]
+  groupBy: string[]
+  groupDesc: boolean[]
+  multiSort: boolean
+  mustSort: boolean
+}
+
+export interface DataPagination {
+  page: number
+  itemsPerPage: number
+  pageStart: number
+  pageStop: number
+  pageCount: number
+  itemsLength: number
+}
+
+export interface DataItemProps {
+  index: number
+  item: any
+  select: (v: boolean) => void
+  isSelected: boolean
+  expand: (v: boolean) => void
+  isExpanded: boolean
+  isMobile: boolean
+}
+
+export interface DataTableItemProps extends DataItemProps {
+  headers: DataTableHeader[]
+}
+
+export interface DataScopeProps {
+  originalItemsLength: number
+  items: any[]
+  pagination: DataPagination
+  options: DataOptions
+  updateOptions: (obj: any) => void
+  sort: (value: string) => void
+  sortArray: (sortBy: string[]) => void
+  group: (value: string) => void
+  groupedItems: ItemGroup<any>[] | null
+}
+
+export type DataTableCompareFunction<T = any> = (a: T, b: T) => number
+
+export type DataSortFunction<T extends any = any> = (
+  items: T[],
+  sortBy: string[],
+  sortDesc: boolean[],
+  locale: string,
+  customSorters?: Record<string, DataTableCompareFunction<T>>
+) => T[];
+
+export type DataGroupFunction<T extends any = any> = (
+  items: T[],
+  groupBy: string[],
+  groupDesc: boolean[],
+) => ItemGroup<T>[]
+
+export type DataSearchFunction<T extends any = any> = (items: T[], search: string) => T[]
+
+export type DatePickerFormatter = (date: string) => string
+
+export type DatePickerAllowedDatesFunction = (date: string) => boolean
+
+export type DatePickerEventColorValue = string | string[]
+
+export type DatePickerEvents = string[] | ((date: string) => boolean | DatePickerEventColorValue) | Record<string, DatePickerEventColorValue>
+
+export type DatePickerEventColors = DatePickerEventColorValue | Record<string, DatePickerEventColorValue> | ((date: string) => DatePickerEventColorValue)
+
+export type DatePickerType = 'date' | 'month'
+
+export type DatePickerMultipleFormatter = (date: string[]) => string
+
+export interface TouchHandlers {
+  start?: (wrapperEvent: TouchEvent & TouchWrapper) => void
+  end?: (wrapperEvent: TouchEvent & TouchWrapper) => void
+  move?: (wrapperEvent: TouchEvent & TouchWrapper) => void
+  left?: (wrapper: TouchWrapper) => void
+  right?: (wrapper: TouchWrapper) => void
+  up?: (wrapper: TouchWrapper) => void
+  down?: (wrapper: TouchWrapper) => void
+}
+
+export interface TouchWrapper extends TouchHandlers {
+  touchstartX: number
+  touchstartY: number
+  touchmoveX: number
+  touchmoveY: number
+  touchendX: number
+  touchendY: number
+  offsetX: number
+  offsetY: number
+}
+
+export type TouchValue = TouchHandlers & {
+  parent?: boolean
+  options?: AddEventListenerOptions
+}
+
+export type InputValidationRule = (value: any) => string | boolean
+
+export type InputMessage = string | string[]
+
+export type InputValidationRules = (InputValidationRule | string)[]
+
+export type CalendarCategory =
+  | string
+  | {
+      name?: string
+      categoryName?: string
+      [key: string]: any
+    }
+
+export type CalendarCategoryTextFunction = (
+  category: CalendarCategory
+) => string
+
+export interface CalendarTimestamp {
+  date: string
+  time: string
+  year: number
+  month: number
+  day: number
+  weekday: number
+  hour: number
+  minute: number
+  hasDay: boolean
+  hasTime: boolean
+  past: boolean
+  present: boolean
+  future: boolean
+  category?: CalendarCategory
+}
+
+export type CalendarFormatter = (timestamp: CalendarTimestamp, short: boolean) => string
+
+export interface CalendarEvent {
+  [prop: string]: any
+}
+
+export interface CalendarEventParsed {
+  input: CalendarEvent
+  start: CalendarTimestamp
+  startIdentifier: number
+  startTimestampIdentifier: number
+  end: CalendarTimestamp
+  endIdentifier: number
+  endTimestampIdentifier: number
+  allDay: boolean
+  index: number
+  category: string | false
+}
+
+export interface CalendarEventVisual {
+  event: CalendarEventParsed
+  columnCount: number
+  column: number
+  left: number
+  width: number
+}
+
+export interface CalendarDaySlotScope extends CalendarTimestamp {
+  outside: boolean
+  index: number
+  week: CalendarTimestamp[]
+  category: CalendarCategory
+}
+
+export type CalendarTimeToY = (time: CalendarTimestamp | number | string, clamp?: boolean) => number
+
+export type CalendarTimeDelta = (time: CalendarTimestamp | number | string) => number | false
+
+export interface CalendarDayBodySlotScope extends CalendarDaySlotScope {
+  timeToY: CalendarTimeToY
+  timeDelta: CalendarTimeDelta
+}
+
+export type CalendarEventOverlapMode = (events: CalendarEventParsed[], firstWeekday: number, overlapThreshold: number) => (day: CalendarDaySlotScope, dayEvents: CalendarEventParsed[], timed: boolean, reset: boolean) => CalendarEventVisual[]
+
+export type CalendarEventColorFunction = (event: CalendarEvent) => string
+
+export type CalendarEventTimedFunction = (event: CalendarEvent) => boolean
+
+export type CalendarEventCategoryFunction = (event: CalendarEvent) => string
+
+export type CalendarEventNameFunction = (event: CalendarEventParsed, timedEvent: boolean) => string
+
+export type DataTableFilterFunction = (value: any, search: string | null, item: any) => boolean
+
+export interface DataTableHeader<T extends any = any> {
+  text: string
+  value: string
+  align?: 'start' | 'center' | 'end'
+  sortable?: boolean
+  filterable?: boolean
+  groupable?: boolean
+  divider?: boolean
+  class?: string | string[]
+  cellClass?: string | string[]
+  width?: string | number
+  filter?: (value: any, search: string | null, item: any) => boolean
+  sort?: DataTableCompareFunction<T>
+}
+
+export type DataItemsPerPageOption = (number | {
+  text: string
+  value: number
+});
+
+export type RowClassFunction = (item: any) => null | undefined | string | string[] | Record<string, boolean>