kdutify 0.16.9-rc.0 → 2.6.1

package/src/components/KRadioGroup/KRadio.ts

@@ -0,0 +1,192 @@
+// Styles
+import './KRadio.sass'
+
+// Components
+import KRadioGroup from './KRadioGroup'
+import KLabel from '../KLabel'
+import KIcon from '../KIcon'
+import KInput from '../KInput'
+
+// Mixins
+import BindsAttrs from '../../mixins/binds-attrs'
+import Colorable from '../../mixins/colorable'
+import { factory as GroupableFactory } from '../../mixins/groupable'
+import Rippleable from '../../mixins/rippleable'
+import Themeable from '../../mixins/themeable'
+import Selectable, { prevent } from '../../mixins/selectable'
+
+// Utilities
+import { getSlot } from '../../util/helpers'
+
+// Types
+import { KNode, KNodeData } from 'kdu'
+import mixins from '../../util/mixins'
+import { mergeListeners } from '../../util/mergeData'
+
+const baseMixins = mixins(
+  BindsAttrs,
+  Colorable,
+  Rippleable,
+  GroupableFactory('radioGroup'),
+  Themeable
+)
+
+interface options extends InstanceType<typeof baseMixins> {
+  radioGroup: InstanceType<typeof KRadioGroup>
+}
+
+/* @kdujs/component */
+export default baseMixins.extend<options>().extend({
+  name: 'k-radio',
+
+  inheritAttrs: false,
+
+  props: {
+    disabled: Boolean,
+    id: String,
+    label: String,
+    name: String,
+    offIcon: {
+      type: String,
+      default: '$radioOff',
+    },
+    onIcon: {
+      type: String,
+      default: '$radioOn',
+    },
+    readonly: Boolean,
+    value: {
+      default: null,
+    },
+  },
+
+  data: () => ({
+    isFocused: false,
+  }),
+
+  computed: {
+    classes (): object {
+      return {
+        'k-radio--is-disabled': this.isDisabled,
+        'k-radio--is-focused': this.isFocused,
+        ...this.themeClasses,
+        ...this.groupClasses,
+      }
+    },
+    computedColor (): string | undefined {
+      return Selectable.options.computed.computedColor.call(this)
+    },
+    computedIcon (): string {
+      return this.isActive
+        ? this.onIcon
+        : this.offIcon
+    },
+    computedId (): string {
+      return KInput.options.computed.computedId.call(this)
+    },
+    hasLabel: KInput.options.computed.hasLabel,
+    hasState (): boolean {
+      return (this.radioGroup || {}).hasState
+    },
+    isDisabled (): boolean {
+      return this.disabled || (
+        !!this.radioGroup &&
+        this.radioGroup.isDisabled
+      )
+    },
+    isReadonly (): boolean {
+      return this.readonly || (
+        !!this.radioGroup &&
+        this.radioGroup.isReadonly
+      )
+    },
+    computedName (): string {
+      if (this.name || !this.radioGroup) {
+        return this.name
+      }
+
+      return this.radioGroup.name || `radio-${this.radioGroup._uid}`
+    },
+    rippleState (): string | undefined {
+      return Selectable.options.computed.rippleState.call(this)
+    },
+    validationState (): string | undefined {
+      return (this.radioGroup || {}).validationState || this.computedColor
+    },
+  },
+
+  methods: {
+    genInput (args: any) {
+      // We can't actually use the mixin directly because
+      // it's made for standalone components, but its
+      // genInput method is exactly what we need
+      return Selectable.options.methods.genInput.call(this, 'radio', args)
+    },
+    genLabel () {
+      if (!this.hasLabel) return null
+
+      return this.$createElement(KLabel, {
+        on: {
+          // Label shouldn't cause the input to focus
+          click: prevent,
+        },
+        attrs: {
+          for: this.computedId,
+        },
+        props: {
+          color: this.validationState,
+          focused: this.hasState,
+        },
+      }, getSlot(this, 'label') || this.label)
+    },
+    genRadio () {
+      const { title, ...radioAttrs } = this.attrs$
+
+      return this.$createElement('div', {
+        staticClass: 'k-input--selection-controls__input',
+      }, [
+        this.$createElement(KIcon, this.setTextColor(this.validationState, {
+          props: {
+            dense: this.radioGroup && this.radioGroup.dense,
+          },
+        }), this.computedIcon),
+        this.genInput({
+          name: this.computedName,
+          value: this.value,
+          ...radioAttrs,
+        }),
+        this.genRipple(this.setTextColor(this.rippleState)),
+      ])
+    },
+    onFocus (e: Event) {
+      this.isFocused = true
+      this.$emit('focus', e)
+    },
+    onBlur (e: Event) {
+      this.isFocused = false
+      this.$emit('blur', e)
+    },
+    onChange () {
+      if (this.isDisabled || this.isReadonly || this.isActive) return
+
+      this.toggle()
+    },
+    onKeydown: () => {}, // Override default with noop
+  },
+
+  render (h): KNode {
+    const data: KNodeData = {
+      staticClass: 'k-radio',
+      class: this.classes,
+      on: mergeListeners({
+        click: this.onChange,
+      }, this.listeners$),
+      attrs: { title: this.attrs$.title },
+    }
+
+    return h('div', data, [
+      this.genRadio(),
+      this.genLabel(),
+    ])
+  },
+})

package/src/components/KRadioGroup/KRadioGroup.sass

@@ -0,0 +1,39 @@
+@import './_variables'
+@import '../../styles/styles.sass'
+
+.k-input--radio-group
+  legend.k-label
+    cursor: text
+    font-size: 14px
+    height: auto
+
+  &__input
+    border: none
+    cursor: default
+    display: flex
+    width: 100%
+
+  &--column .k-input--radio-group__input > .k-label
+    padding-bottom: $radio-group-padding
+
+  &--row .k-input--radio-group__input > .k-label
+    padding-right: $radio-group-padding
+
+  &--row
+    legend
+      align-self: center
+      display: inline-block
+
+    .k-input--radio-group__input
+      flex-direction: row
+      flex-wrap: wrap
+
+  &--column
+    legend
+      padding-bottom: $radio-group-padding
+
+    .k-radio:not(:last-child):not(:only-child)
+      margin-bottom: $radio-group-padding
+
+    .k-input--radio-group__input
+      flex-direction: column

package/src/components/KRadioGroup/KRadioGroup.ts

@@ -0,0 +1,100 @@
+// Styles
+import '../../styles/components/_selection-controls.sass'
+import './KRadioGroup.sass'
+
+// Extensions
+import KInput from '../KInput'
+import { BaseItemGroup } from '../KItemGroup/KItemGroup'
+
+// Mixins
+import Comparable from '../../mixins/comparable'
+
+// Types
+import mixins from '../../util/mixins'
+import { PropType } from 'kdu'
+
+const baseMixins = mixins(
+  Comparable,
+  BaseItemGroup,
+  KInput
+)
+
+/* @kdujs/component */
+export default baseMixins.extend({
+  name: 'k-radio-group',
+
+  provide () {
+    return {
+      radioGroup: this,
+    }
+  },
+
+  props: {
+    column: {
+      type: Boolean,
+      default: true,
+    },
+    height: {
+      type: [Number, String],
+      default: 'auto',
+    },
+    name: String,
+    row: Boolean,
+    // If no value set on KRadio
+    // will match valueComparator
+    // force default to null
+    value: null as unknown as PropType<any>,
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        ...KInput.options.computed.classes.call(this),
+        'k-input--selection-controls k-input--radio-group': true,
+        'k-input--radio-group--column': this.column && !this.row,
+        'k-input--radio-group--row': this.row,
+      }
+    },
+  },
+
+  methods: {
+    genDefaultSlot () {
+      return this.$createElement('div', {
+        staticClass: 'k-input--radio-group__input',
+        attrs: {
+          id: this.id,
+          role: 'radiogroup',
+          'aria-labelledby': this.computedId,
+        },
+      }, KInput.options.methods.genDefaultSlot.call(this))
+    },
+    genInputSlot () {
+      const render = KInput.options.methods.genInputSlot.call(this)
+
+      delete render.data!.on!.click
+
+      return render
+    },
+    genLabel () {
+      const label = KInput.options.methods.genLabel.call(this)
+
+      if (!label) return null
+
+      label.data!.attrs!.id = this.computedId
+      // WAI considers this an orphaned label
+      delete label.data!.attrs!.for
+      label.tag = 'legend'
+
+      return label
+    },
+    onClick: BaseItemGroup.options.methods.onClick,
+  },
+
+  render (h) {
+    const knode = KInput.options.render.call(this, h)
+
+    this._b(knode.data!, 'div', this.attrs$)
+
+    return knode
+  },
+})

package/src/components/KRadioGroup/_variables.scss

@@ -0,0 +1,4 @@
+@import '../../styles/styles.sass';
+
+$radio-margin-right: 16px !default;
+$radio-group-padding: 8px !default;

package/src/components/KRadioGroup/index.ts

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

package/src/components/KRangeSlider/KRangeSlider.sass

@@ -0,0 +1,19 @@
+@import '../../styles/styles.sass'
+
+// Theme
++theme(k-input--range-slider) using ($material)
+  &.k-input--slider.k-input--is-disabled
+    .k-slider.k-slider
+      .k-slider__thumb
+        background: map-deep-get($material, 'selection-controls', 'thumb', 'disabled')
+
+/** Input Group */
+.k-input--range-slider
+  &.k-input--is-disabled
+    .k-slider__track-fill
+      display: none
+
+    &.k-input--slider
+      .k-slider.k-slider
+        .k-slider__thumb
+          border-color: transparent

package/src/components/KRangeSlider/KRangeSlider.ts

@@ -0,0 +1,255 @@
+// Styles
+import './KRangeSlider.sass'
+
+// Components
+import KSlider from '../KSlider'
+
+// Helpers
+import {
+  addOnceEventListener,
+  createRange,
+  deepEqual,
+  passiveSupported,
+} from '../../util/helpers'
+
+// Types
+import { PropValidator } from 'kdu/types/options'
+
+/* @kdujs/component */
+export default KSlider.extend({
+  name: 'k-range-slider',
+
+  props: {
+    value: {
+      type: Array,
+      default: () => ([0, 0]),
+    } as unknown as PropValidator<[number, number]>,
+  },
+
+  data () {
+    return {
+      activeThumb: null as null | number,
+      lazyValue: this.value,
+    }
+  },
+
+  computed: {
+    classes (): object {
+      return {
+        ...KSlider.options.computed.classes.call(this),
+        'k-input--range-slider': true,
+      }
+    },
+    internalValue: {
+      get (): number[] {
+        return this.lazyValue
+      },
+      set (val: number[]) {
+        // Round value to ensure the
+        // entire slider range can
+        // be selected with step
+        let value = val.map((v = 0) => this.roundValue(Math.min(Math.max(v, this.minValue), this.maxValue)))
+
+        // Switch values if range and wrong order
+        if (value[0] > value[1] || value[1] < value[0]) {
+          if (this.activeThumb !== null) {
+            const toFocus = this.activeThumb === 1 ? 0 : 1
+            const el = this.$refs[`thumb_${toFocus}`] as HTMLElement
+            el.focus()
+          }
+          value = [value[1], value[0]]
+        }
+
+        this.lazyValue = value
+        if (!deepEqual(value, this.value)) this.$emit('input', value)
+
+        this.validate()
+      },
+    },
+    inputWidth (): number[] {
+      return this.internalValue.map((v: number) => (
+        this.roundValue(v) - this.minValue) / (this.maxValue - this.minValue) * 100
+      )
+    },
+  },
+
+  methods: {
+    getTrackStyle (startLength: number, endLength: number, startPadding = 0, endPadding = 0) {
+      const startDir = this.vertical ? this.$kdutify.rtl ? 'top' : 'bottom' : this.$kdutify.rtl ? 'right' : 'left'
+      const endDir = this.vertical ? 'height' : 'width'
+
+      const start = `calc(${startLength}% + ${startPadding}px)`
+      const end = `calc(${endLength}% + ${endPadding}px)`
+
+      return {
+        transition: this.trackTransition,
+        [startDir]: start,
+        [endDir]: end,
+      }
+    },
+    getIndexOfClosestValue (arr: number[], v: number) {
+      if (Math.abs(arr[0] - v) < Math.abs(arr[1] - v)) return 0
+      else return 1
+    },
+    genInput () {
+      return createRange(2).map(i => {
+        const input = KSlider.options.methods.genInput.call(this)
+
+        input.data = input.data || {}
+        input.data.attrs = input.data.attrs || {}
+        input.data.attrs.value = this.internalValue[i]
+        input.data.attrs.id = `input-${i ? 'max' : 'min'}-${this._uid}`
+
+        return input
+      })
+    },
+    genTrackContainer () {
+      const children = []
+
+      const padding = this.isDisabled ? 10 : 0
+      const sections: { class: string, color: string | undefined, styles: [number, number, number, number] }[] = [
+        {
+          class: 'k-slider__track-background',
+          color: this.computedTrackColor,
+          styles: [0, this.inputWidth[0], 0, -padding],
+        },
+        {
+          class: this.isDisabled ? 'k-slider__track-background' : 'k-slider__track-fill',
+          color: this.isDisabled ? this.computedTrackColor : this.computedTrackFillColor,
+          styles: [this.inputWidth[0], Math.abs(this.inputWidth[1] - this.inputWidth[0]), padding, padding * -2],
+        },
+        {
+          class: 'k-slider__track-background',
+          color: this.computedTrackColor,
+          styles: [this.inputWidth[1], Math.abs(100 - this.inputWidth[1]), padding, -padding],
+        },
+      ]
+
+      if (this.$kdutify.rtl) sections.reverse()
+
+      children.push(...sections.map(section => this.$createElement('div', this.setBackgroundColor(section.color, {
+        staticClass: section.class,
+        style: this.getTrackStyle(...section.styles),
+      }))))
+
+      return this.$createElement('div', {
+        staticClass: 'k-slider__track-container',
+        ref: 'track',
+      }, children)
+    },
+    genChildren () {
+      return [
+        this.genInput(),
+        this.genTrackContainer(),
+        this.genSteps(),
+        createRange(2).map(index => {
+          const value = this.internalValue[index]
+          const onFocus = (e: Event) => {
+            this.isFocused = true
+            this.activeThumb = index
+
+            this.$emit('focus', e)
+          }
+
+          const onBlur = (e: Event) => {
+            this.isFocused = false
+            this.activeThumb = null
+
+            this.$emit('blur', e)
+          }
+
+          const valueWidth = this.inputWidth[index]
+          const isActive = this.isActive && this.activeThumb === index
+          const isFocused = this.isFocused && this.activeThumb === index
+
+          return this.genThumbContainer(value, valueWidth, isActive, isFocused, onFocus, onBlur, `thumb_${index}`)
+        }),
+      ]
+    },
+    reevaluateSelected (value: number) {
+      this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      const refName = `thumb_${this.activeThumb}`
+      const thumbRef = this.$refs[refName] as HTMLElement
+      thumbRef.focus()
+    },
+    onSliderMouseDown (e: MouseEvent | TouchEvent) {
+      const value = this.parseMouseMove(e)
+
+      this.reevaluateSelected(value)
+
+      this.oldValue = this.internalValue
+      this.isActive = true
+
+      if ((e.target as Element)?.matches('.k-slider__thumb-container, .k-slider__thumb-container *')) {
+        this.thumbPressed = true
+        const domRect = (e.target as Element).getBoundingClientRect()
+        const touch = 'touches' in e ? e.touches[0] : e
+        this.startOffset = this.vertical
+          ? touch.clientY - (domRect.top + domRect.height / 2)
+          : touch.clientX - (domRect.left + domRect.width / 2)
+      } else {
+        this.startOffset = 0
+        window.clearTimeout(this.mouseTimeout)
+        this.mouseTimeout = window.setTimeout(() => {
+          this.thumbPressed = true
+        }, 300)
+      }
+
+      const mouseUpOptions = passiveSupported ? { passive: true, capture: true } : true
+      const mouseMoveOptions = passiveSupported ? { passive: true } : false
+
+      const isTouchEvent = 'touches' in e
+
+      this.onMouseMove(e)
+      this.app.addEventListener(isTouchEvent ? 'touchmove' : 'mousemove', this.onMouseMove, mouseMoveOptions)
+      addOnceEventListener(this.app, isTouchEvent ? 'touchend' : 'mouseup', this.onSliderMouseUp, mouseUpOptions)
+
+      this.$emit('start', this.internalValue)
+    },
+    onSliderClick (e: MouseEvent) {
+      if (!this.isActive) {
+        if (this.noClick) {
+          this.noClick = false
+          return
+        }
+
+        const value = this.parseMouseMove(e)
+
+        this.reevaluateSelected(value)
+
+        this.setInternalValue(value)
+
+        this.$emit('change', this.internalValue)
+      }
+    },
+    onMouseMove (e: MouseEvent | TouchEvent) {
+      const value = this.parseMouseMove(e)
+
+      if (e.type === 'mousemove') {
+        this.thumbPressed = true
+      }
+
+      if (this.activeThumb === null) {
+        this.activeThumb = this.getIndexOfClosestValue(this.internalValue, value)
+      }
+
+      this.setInternalValue(value)
+    },
+    onKeyDown (e: KeyboardEvent) {
+      if (this.activeThumb === null) return
+
+      const value = this.parseKeyDown(e, this.internalValue[this.activeThumb])
+
+      if (value == null) return
+
+      this.setInternalValue(value)
+      this.$emit('change', this.internalValue)
+    },
+    setInternalValue (value: number) {
+      this.internalValue = this.internalValue.map((v: number, i: number) => {
+        if (i === this.activeThumb) return value
+        else return Number(v)
+      })
+    },
+  },
+})

package/src/components/KRangeSlider/index.ts

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

package/src/components/KRating/KRating.sass

@@ -0,0 +1,28 @@
+@import './_variables.scss'
+
+.k-rating
+  max-width: 100%
+  white-space: nowrap
+
+  .k-icon
+    padding: $rating-padding
+    border-radius: $rating-border-radius
+    user-select: none
+    outline: none
+
+    &::after
+      display: none
+
+    +ltr()
+      transform: scaleX(1)
+
+    +rtl()
+      transform: scaleX(-1)
+
+  &--readonly
+    .k-icon
+      pointer-events: none
+
+  &--dense
+    .k-icon
+      padding: $rating-dense-padding