@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Calendar/Calendar.vue

@@ -34,7 +34,7 @@
                 <Tooltip
                     class="uikit-calendar__clear-date-tooltip"
                     v-if="showClearDateTooltip">Clear Date</Tooltip>
-                <Icon 
+                <Icon
                     type="close"
                     @mouseenter="showClearDateTooltip = true"
                     @mouseleave="showClearDateTooltip = false"
@@ -61,134 +61,136 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import PocketInput from '../Forms/Input.vue'
 import Icon from '../Icons/Icon.vue'
 import Tooltip from '../Tooltips/Tooltip.vue'
 import Litepicker from 'litepicker'
 import 'litepicker/dist/plugins/keyboardnav'
 import type { DateTime } from 'litepicker/dist/types/datetime'
-import { dark } from '../../directives'
-import type { ComponentPublicInstance } from 'vue'
-
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        PocketInput,
-        Icon,
-        Tooltip,
-    },
+import { dark as vDark } from '../../directives'
+import { nextTick, onBeforeUnmount, onMounted, ref, useTemplateRef, type ComponentPublicInstance } from 'vue'
+
+const {
+    label = '',
+    labelSubtext = '',
+    placeholder = '',
+    modelValue = null,
+    isDarkMode,
+    disabled,
+    error,
+} = defineProps<{
+    label?: string
+    labelSubtext?: string
+    placeholder?: string
+    modelValue?: Date | null
+    isDarkMode?: boolean
+    disabled?: boolean
+    error?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [calendarInput: Date | null]
+}>()
+
+const calendarInstance = ref<null | Litepicker>(null)
+const calendarInput = ref<Date | null>(null)
+const dateString = ref('')
+const hover = ref(false)
+const isShowingCalendar = ref(false)
+const showClearDateTooltip = ref(false)
+const calendarRef = useTemplateRef<HTMLElement>('calendar')
+const calendarInputContainer = useTemplateRef<ComponentPublicInstance>('calendarInput')
+
+onBeforeUnmount(() => {
+    calendarInstance.value?.destroy()
 })
-export default class Calendar extends Vue {
-    @Prop() label!: string
-    @Prop() labelSubtext?: string
-    @Prop({ default: '' }) placeholder!: string
-    @Prop() modelValue!: Date | null
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) disabled!: boolean
-    @Prop({ default: false }) error!: boolean
-
-    calendar: null | Litepicker = null
-    calendarInput: Date | null = null
-    dateString = ''
-    hover = false
-    isShowingCalendar = false
-    afterCalendarTab = -1
-    showClearDateTooltip = false
-
-    beforeUnmount () {
-        this.calendar?.destroy()
-    }
 
-    mounted () {
-        this.calendarInput = this.modelValue
-        this.dateString = this.modelValue ? this.modelValue.toLocaleDateString() : ''
-        this.calendar = new Litepicker({
-            element: this.$refs.calendar as HTMLElement,
+onMounted(() => {
+    calendarInput.value = modelValue
+    dateString.value = modelValue ? modelValue.toLocaleDateString() : ''
+    if (calendarRef.value) {
+        calendarInstance.value = new Litepicker({
+            element: calendarRef.value,
             plugins: [ 'keyboardnav' ],
             firstDay: 0,
             setup: picker => {
                 picker.on('selected', (date: DateTime) => {
-                    this.calendarInput = date.toJSDate()
-                    this.dateString = this.calendarInput.toLocaleDateString()
-                    this.emitUpdateModelValue(this.calendarInput)
+                    calendarInput.value = date.toJSDate()
+                    dateString.value = calendarInput.value.toLocaleDateString()
+                    emitUpdateModelValue(calendarInput.value)
                 })
                 picker.on('clear:selection', () => {
-                    this.calendarInput = null
-                    this.dateString = ''
-                    this.emitUpdateModelValue(this.calendarInput)
+                    calendarInput.value = null
+                    dateString.value = ''
+                    emitUpdateModelValue(calendarInput.value)
                     picker.hide()
                 })
                 picker.on('show', () => {
-                    this.$nextTick(() => {
+                    nextTick(() => {
                         const calendarEls = Array.from<HTMLElement>(document.querySelectorAll('.litepicker'))
                         const visibleCalendarEl = calendarEls.find(el => el.getBoundingClientRect().height)
                         const focusableEl = visibleCalendarEl?.querySelector(
                             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
                         ) as HTMLElement
                         focusableEl.focus()
-                        this.isShowingCalendar = true
+                        isShowingCalendar.value = true
                     })
                 })
                 picker.on('hide', () => {
-                    const calendarInputContainer = this.$refs['calendarInput'] as ComponentPublicInstance | undefined
-                    const calendarInputContainerEl = calendarInputContainer?.$el as HTMLDivElement | undefined
+                    const calendarInputContainerEl = calendarInputContainer.value?.$el as HTMLDivElement | undefined
                     const calendarInputEl = calendarInputContainerEl?.querySelector('input')
                     calendarInputEl?.focus()
                     calendarInputEl?.blur()
-                    this.isShowingCalendar = false
+                    isShowingCalendar.value = false
                 })
             },
         })
     }
+})
 
-    clearCalendar () {
-        if (this.disabled) {
-            return
-        }
-
-        this.calendar?.clearSelection()
+const clearCalendar = () => {
+    if (disabled) {
+        return
     }
 
-    showCalendar () {
-        if (this.disabled) {
-            return
-        }
+    calendarInstance.value?.clearSelection()
+}
 
-        this.calendar && this.calendar.show()
+const showCalendar = () => {
+    if (disabled) {
+        return
     }
 
-    handleInputKeydown (event: KeyboardEvent) {
-        if (event.key === 'Backspace') {
-            this.clearCalendar()
-            return
-        }
-        if (![ 'Shift', 'Tab' ].includes(event.key)) {
-            if (!this.isShowingCalendar) {
-                this.showCalendar()
-            }
-            event.stopPropagation()
-            event.preventDefault()
-            return false
-        }
-    }
+    calendarInstance.value?.show()
+}
 
-    processDateString () {
-        const inputDate = new Date(this.dateString)
-        if (inputDate && inputDate.toLocaleDateString() !== this.calendarInput?.toLocaleDateString()) {
-            this.calendarInput = inputDate
-            this.emitUpdateModelValue(this.calendarInput)
+const handleInputKeydown = (event: KeyboardEvent) => {
+    if (event.key === 'Backspace') {
+        clearCalendar()
+        return
+    }
+    if (![ 'Shift', 'Tab' ].includes(event.key)) {
+        if (!isShowingCalendar.value) {
+            showCalendar()
         }
+        event.stopPropagation()
+        event.preventDefault()
+        return false
     }
+}
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (calendarInput: Date | null) {
-        return calendarInput
+const processDateString = () => {
+    const inputDate = new Date(dateString.value)
+    if (inputDate && inputDate.toLocaleDateString() !== calendarInput.value?.toLocaleDateString()) {
+        calendarInput.value = inputDate
+        emitUpdateModelValue(calendarInput.value)
     }
 }
+
+const emitUpdateModelValue = (newCalendarInput: Date | null) => {
+    emit('update:modelValue', newCalendarInput)
+}
 </script>
 
 <style lang="scss">
@@ -291,4 +293,4 @@ export default class Calendar extends Vue {
         }
     }
 }
-</style>
+</style>