kdutify 0.16.9-rc.0 → 2.6.1

package/src/components/KCalendar/KCalendarDaily.sass

@@ -0,0 +1,140 @@
+@import './_variables.scss'
+
+// Theme
++theme(k-calendar-daily) using ($material)
+  background-color: map-deep-get($material, 'calendar', 'background-color')
+  border-left: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+  border-top: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+  .k-calendar-daily__intervals-head
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+    &::after
+      background: map-deep-get($material, 'calendar', 'line-color')
+      background: linear-gradient(90deg, transparent, map-deep-get($material, 'calendar', 'line-color'))
+
+  .k-calendar-daily_head-day
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+    border-bottom: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+    color: map-deep-get($material, 'calendar', 'text-color')
+
+    &.k-past
+      .k-calendar-daily_head-weekday,
+      .k-calendar-daily_head-day-label
+        color: map-deep-get($material, 'calendar', 'past-color')
+
+  .k-calendar-daily__intervals-body
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+    .k-calendar-daily__interval-text
+      color: map-deep-get($material, 'calendar', 'interval-color')
+
+  .k-calendar-daily__day
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+    border-bottom: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+  .k-calendar-daily__day-interval
+    border-top: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+    &:first-child
+      border-top: none !important
+
+  .k-calendar-daily__interval::after
+    border-top: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+.k-calendar-daily
+  display: flex
+  flex-direction: column
+  overflow: hidden
+  height: 100%
+
+.k-calendar-daily__head
+  flex: none
+  display: flex
+
+.k-calendar-daily__intervals-head
+  flex: none
+  position: relative
+
+  &::after
+    position: absolute
+    bottom: 0px
+    height: $calendar-line-width
+    left: 0
+    right: 0
+    content: ''
+
+.k-calendar-daily_head-day
+  flex: 1 1 auto
+  width: 0
+  position: relative
+
+.k-calendar-daily_head-weekday
+  user-select: none
+  padding: $calendar-daily-weekday-padding
+  font-size: $calendar-daily-weekday-font-size
+  text-align: center
+  text-transform: uppercase
+
+.k-calendar-daily_head-day-label
+  user-select: none
+  padding: $calendar-daily-day-padding
+  cursor: pointer
+  text-align: center
+
+.k-calendar-daily__body
+  flex: 1 1 60%
+  overflow: hidden
+  display: flex
+  position: relative
+  flex-direction: column
+
+.k-calendar-daily__scroll-area
+  overflow-y: scroll
+  flex: 1 1 auto
+  display: flex
+  align-items: flex-start
+
+.k-calendar-daily__pane
+  width: 100%
+  overflow-y: hidden
+  flex: none
+  display: flex
+  align-items: flex-start
+
+.k-calendar-daily__day-container
+  display: flex
+  flex: 1
+  width: 100%
+  height: 100%
+
+.k-calendar-daily__intervals-body
+  flex: none
+  user-select: none
+
+.k-calendar-daily__interval
+  text-align: $calendar-daily-interval-gutter-align
+  padding-right: $calendar-daily-interval-gutter-line-width
+  border-bottom: none
+  position: relative
+
+  &::after
+    width: $calendar-daily-interval-gutter-line-width
+    position: absolute
+    height: $calendar-line-width
+    display: block
+    content: ''
+    right: 0
+    bottom: -$calendar-line-width
+
+.k-calendar-daily__interval-text
+  display: block
+  position: relative
+  top: $calendar-daily-interval-gutter-top
+  font-size: $calendar-daily-interval-gutter-font-size
+  padding-right: $calendar-daily-interval-gutter-width
+
+.k-calendar-daily__day
+  flex: 1
+  width: 0
+  position: relative

package/src/components/KCalendar/KCalendarDaily.ts

@@ -0,0 +1,259 @@
+// Styles
+import './KCalendarDaily.sass'
+
+// Types
+import { KNode } from 'kdu'
+
+// Directives
+import Resize from '../../directives/resize'
+
+// Components
+import KBtn from '../KBtn'
+
+// Mixins
+import CalendarWithIntervals from './mixins/calendar-with-intervals'
+
+// Util
+import { convertToUnit, getSlot } from '../../util/helpers'
+import { CalendarTimestamp } from 'kdutify/types'
+
+/* @kdujs/component */
+export default CalendarWithIntervals.extend({
+  name: 'k-calendar-daily',
+
+  directives: { Resize },
+
+  data: () => ({
+    scrollPush: 0,
+  }),
+
+  computed: {
+    classes (): object {
+      return {
+        'k-calendar-daily': true,
+        ...this.themeClasses,
+      }
+    },
+  },
+
+  mounted () {
+    this.init()
+  },
+
+  methods: {
+    init () {
+      this.$nextTick(this.onResize)
+    },
+    onResize () {
+      this.scrollPush = this.getScrollPush()
+    },
+    getScrollPush (): number {
+      const area = this.$refs.scrollArea as HTMLElement
+      const pane = this.$refs.pane as HTMLElement
+
+      return area && pane ? (area.offsetWidth - pane.offsetWidth) : 0
+    },
+    genHead (): KNode {
+      return this.$createElement('div', {
+        staticClass: 'k-calendar-daily__head',
+        style: {
+          marginRight: this.scrollPush + 'px',
+        },
+      }, [
+        this.genHeadIntervals(),
+        ...this.genHeadDays(),
+      ])
+    },
+    genHeadIntervals (): KNode {
+      const width: string | undefined = convertToUnit(this.intervalWidth)
+
+      return this.$createElement('div', {
+        staticClass: 'k-calendar-daily__intervals-head',
+        style: {
+          width,
+        },
+      }, getSlot(this, 'interval-header'))
+    },
+    genHeadDays (): KNode[] {
+      return this.days.map(this.genHeadDay)
+    },
+    genHeadDay (day: CalendarTimestamp, index: number): KNode {
+      return this.$createElement('div', {
+        key: day.date,
+        staticClass: 'k-calendar-daily_head-day',
+        class: this.getRelativeClasses(day),
+        on: this.getDefaultMouseEventHandlers(':day', _e => {
+          return this.getSlotScope(day)
+        }),
+      }, [
+        this.genHeadWeekday(day),
+        this.genHeadDayLabel(day),
+        ...this.genDayHeader(day, index),
+      ])
+    },
+    genDayHeader (day: CalendarTimestamp, index: number): KNode[] {
+      return getSlot(this, 'day-header', () => ({
+        week: this.days, ...day, index,
+      })) || []
+    },
+    genHeadWeekday (day: CalendarTimestamp): KNode {
+      const color = day.present ? this.color : undefined
+
+      return this.$createElement('div', this.setTextColor(color, {
+        staticClass: 'k-calendar-daily_head-weekday',
+      }), this.weekdayFormatter(day, this.shortWeekdays))
+    },
+    genHeadDayLabel (day: CalendarTimestamp): KNode {
+      return this.$createElement('div', {
+        staticClass: 'k-calendar-daily_head-day-label',
+      }, getSlot(this, 'day-label-header', day) || [this.genHeadDayButton(day)])
+    },
+    genHeadDayButton (day: CalendarTimestamp): KNode {
+      const color = day.present ? this.color : 'transparent'
+
+      return this.$createElement(KBtn, {
+        props: {
+          color,
+          fab: true,
+          depressed: true,
+        },
+        on: this.getMouseEventHandlers({
+          'click:date': { event: 'click', stop: true },
+          'contextmenu:date': { event: 'contextmenu', stop: true, prevent: true, result: false },
+        }, _e => {
+          return day
+        }),
+      }, this.dayFormatter(day, false))
+    },
+    genBody (): KNode {
+      return this.$createElement('div', {
+        staticClass: 'k-calendar-daily__body',
+      }, [
+        this.genScrollArea(),
+      ])
+    },
+    genScrollArea (): KNode {
+      return this.$createElement('div', {
+        ref: 'scrollArea',
+        staticClass: 'k-calendar-daily__scroll-area',
+      }, [
+        this.genPane(),
+      ])
+    },
+    genPane (): KNode {
+      return this.$createElement('div', {
+        ref: 'pane',
+        staticClass: 'k-calendar-daily__pane',
+        style: {
+          height: convertToUnit(this.bodyHeight),
+        },
+      }, [
+        this.genDayContainer(),
+      ])
+    },
+    genDayContainer (): KNode {
+      return this.$createElement('div', {
+        staticClass: 'k-calendar-daily__day-container',
+      }, [
+        this.genBodyIntervals(),
+        ...this.genDays(),
+      ])
+    },
+    genDays (): KNode[] {
+      return this.days.map(this.genDay)
+    },
+    genDay (day: CalendarTimestamp, index: number): KNode {
+      return this.$createElement('div', {
+        key: day.date,
+        staticClass: 'k-calendar-daily__day',
+        class: this.getRelativeClasses(day),
+        on: this.getDefaultMouseEventHandlers(':time', e => {
+          return this.getSlotScope(this.getTimestampAtEvent(e, day))
+        }),
+      }, [
+        ...this.genDayIntervals(index),
+        ...this.genDayBody(day),
+      ])
+    },
+    genDayBody (day: CalendarTimestamp): KNode[] {
+      return getSlot(this, 'day-body', () => this.getSlotScope(day)) || []
+    },
+    genDayIntervals (index: number): KNode[] {
+      return this.intervals[index].map(this.genDayInterval)
+    },
+    genDayInterval (interval: CalendarTimestamp): KNode {
+      const height: string | undefined = convertToUnit(this.intervalHeight)
+      const styler = this.intervalStyle || this.intervalStyleDefault
+
+      const data = {
+        key: interval.time,
+        staticClass: 'k-calendar-daily__day-interval',
+        style: {
+          height,
+          ...styler(interval),
+        },
+      }
+
+      const children = getSlot(this, 'interval', () => this.getSlotScope(interval))
+
+      return this.$createElement('div', data, children)
+    },
+    genBodyIntervals (): KNode {
+      const width: string | undefined = convertToUnit(this.intervalWidth)
+      const data = {
+        staticClass: 'k-calendar-daily__intervals-body',
+        style: {
+          width,
+        },
+        on: this.getDefaultMouseEventHandlers(':interval', e => {
+          return this.getTimestampAtEvent(e, this.parsedStart)
+        }),
+      }
+
+      return this.$createElement('div', data, this.genIntervalLabels())
+    },
+    genIntervalLabels (): KNode[] | null {
+      if (!this.intervals.length) return null
+
+      return this.intervals[0].map(this.genIntervalLabel)
+    },
+    genIntervalLabel (interval: CalendarTimestamp): KNode {
+      const height: string | undefined = convertToUnit(this.intervalHeight)
+      const short: boolean = this.shortIntervals
+      const shower = this.showIntervalLabel || this.showIntervalLabelDefault
+      const show = shower(interval)
+      const label = show ? this.intervalFormatter(interval, short) : undefined
+
+      return this.$createElement('div', {
+        key: interval.time,
+        staticClass: 'k-calendar-daily__interval',
+        style: {
+          height,
+        },
+      }, [
+        this.$createElement('div', {
+          staticClass: 'k-calendar-daily__interval-text',
+        }, label),
+      ])
+    },
+  },
+
+  render (h): KNode {
+    return h('div', {
+      class: this.classes,
+      on: {
+        dragstart: (e: MouseEvent) => {
+          e.preventDefault()
+        },
+      },
+      directives: [{
+        modifiers: { quiet: true },
+        name: 'resize',
+        value: this.onResize,
+      }],
+    }, [
+      !this.hideHeader ? this.genHead() : '',
+      this.genBody(),
+    ])
+  },
+})

package/src/components/KCalendar/KCalendarMonthly.ts

@@ -0,0 +1,27 @@
+// Styles
+import './KCalendarWeekly.sass'
+
+// Mixins
+import KCalendarWeekly from './KCalendarWeekly'
+
+// Util
+import { parseTimestamp, getStartOfMonth, getEndOfMonth } from './util/timestamp'
+import { CalendarTimestamp } from 'kdutify/types'
+
+/* @kdujs/component */
+export default KCalendarWeekly.extend({
+  name: 'k-calendar-monthly',
+
+  computed: {
+    staticClass (): string {
+      return 'k-calendar-monthly k-calendar-weekly'
+    },
+    parsedStart (): CalendarTimestamp {
+      return getStartOfMonth(parseTimestamp(this.start, true))
+    },
+    parsedEnd (): CalendarTimestamp {
+      return getEndOfMonth(parseTimestamp(this.end, true))
+    },
+  },
+
+})

package/src/components/KCalendar/KCalendarWeekly.sass

@@ -0,0 +1,115 @@
+@import './_variables.scss'
+
+// Theme
++theme(k-calendar-weekly) using ($material)
+  background-color: map-deep-get($material, 'calendar', 'background-color')
+  border-top: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+  border-left: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+  .k-calendar-weekly__head-weekday
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+    color: map-deep-get($material, 'calendar', 'text-color')
+
+    &.k-past
+      color: map-deep-get($material, 'calendar', 'past-color')
+
+    &.k-outside
+      background-color: map-deep-get($material, 'calendar', 'outside-background-color')
+
+  .k-calendar-weekly__head-weeknumber
+    background-color:  map-deep-get($material, 'calendar', 'weeknumber-background-color')
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+
+  .k-calendar-weekly__day
+    border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+    border-bottom: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+    color: map-deep-get($material, 'calendar', 'text-color')
+
+    &.k-outside
+      background-color: map-deep-get($material, 'calendar', 'outside-background-color')
+
+  .k-calendar-weekly__weeknumber
+      background-color:  map-deep-get($material, 'calendar', 'weeknumber-background-color')
+      border-right: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+      border-bottom: map-deep-get($material, 'calendar', 'line-color') $calendar-line-width solid
+      color: map-deep-get($material, 'calendar', 'text-color')
+
+.k-calendar-weekly
+  width: 100%
+  height: 100%
+  display: flex
+  flex-direction: column
+  min-height: 0
+
+.k-calendar-weekly__head
+  display: flex
+  user-select: none
+
+.k-calendar-weekly__head-weekday
+  flex: 1 0 20px
+  user-select: none
+  padding: $calendar-weekly-weekday-padding
+  font-size: $calendar-weekly-weekday-font-size
+  overflow: hidden
+  text-align: center
+  text-overflow: ellipsis
+  text-transform: uppercase
+  white-space: nowrap
+
+.k-calendar-weekly__head-weeknumber
+  position: relative
+  flex: 0 0 $calendar-weekly-weeknumber-flex-basis
+
+.k-calendar-weekly__week
+  display: flex
+  flex: 1
+  height: unset
+  min-height: 0
+
+.k-calendar-weekly__weeknumber
+  display: flex
+  flex: 0 0 $calendar-weekly-weeknumber-flex-basis
+  height: unset
+  min-height: 0
+  padding-top: $calendar-weekly-weeknumber-padding-top
+  text-align: center
+
+  > small
+    width: 100% !important
+
+.k-calendar-weekly__day
+  flex: 1
+  width: 0
+  overflow: hidden
+  user-select: none
+  position: relative
+  padding: $calendar-weekly-day-padding
+  // https://bugzilla.mozilla.org/show_bug.cgi?id=1114904
+  min-width: 0
+
+  &.k-present
+    .k-calendar-weekly__day-month
+      color: currentColor
+
+.k-calendar-weekly__day-label
+  text-decoration: none
+  user-select: none
+  cursor: pointer
+  box-shadow: none
+  text-align: center
+  margin: $calendar-weekly-day-label-margin
+
+  .k-btn
+    font-size: $calendar-weekly-day-label-font-size
+    text-transform: none
+
+.k-calendar-weekly__day-month
+  position: absolute
+  text-decoration: none
+  user-select: none
+  box-shadow: none
+  top: 0
+  left: $calendar-weekly-day-month-left
+  height: $calendar-weekly-day-label-size
+  line-height: $calendar-weekly-day-label-size
+