@pocketprep/ui-kit 3.2.3 → 3.3.0

package/lib/components/Calendar/Calendar.vue

@@ -1,50 +1,66 @@
 <template>
-    <div class="uikit-calendar">
-        <Input
+    <div
+        class="uikit-calendar"
+    >
+        <PocketInput
+            ref="calendarInput"
             v-model="dateString"
             :label="label"
             class="uikit-calendar__input"
             :placeholder="placeholder"
             :is-dark-mode="isDarkMode"
-            disabled
+            :force-hover-style="hover"
+            :force-focus-style="isShowingCalendar"
+            :hideInputCaret="true"
+            :disabled="disabled"
             @update:modelValue="processDateString"
-            @click="calendar && calendar.show()"
-        />
-        <div
-            ref="calendarToggle"
-            v-dark="isDarkMode"
-            class="uikit-calendar__icon"
-            :class="{ 'uikit-calendar__icon--hover': hover, 'uikit-calendar__icon--focus': focus }"
-            tabindex="0"
-            @keydown.stop.prevent.enter="calendar && calendar.show()"
-            @click="calendar && calendar.show()"
+            @click="showCalendar"
+            @keydown="handleInputKeydown"
+            @mouseover="hover = true"
+            @mouseout="hover = false"
         >
-            <Icon type="calendar" />
-        </div>
-        <div
-            ref="calendar"
-            class="uikit-calendar__trigger"
-            :tabindex="-1"
-        />
+            <div
+                v-if="isShowingCalendar"
+                v-dark="isDarkMode"
+                class="uikit-calendar__clear-date-icon"
+                @click.stop.prevent="clearCalendar"
+            >
+                <Icon type="close" />
+            </div>
+            <div
+                v-dark="isDarkMode"
+                class="uikit-calendar__calendar-icon"
+                :class="{
+                    'uikit-calendar__calendar-icon--active': !disabled && (hover || isShowingCalendar),
+                }"
+            >
+                <Icon type="calendarPicker" />
+            </div>
+            <div
+                ref="calendar"
+                class="uikit-calendar__trigger"
+                :tabindex="-1"
+            />
+        </PocketInput>
     </div>
 </template>
 
 <script lang="ts">
-import type { ComponentPublicInstance } from 'vue'
 import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
-import Input from '../Forms/Input.vue'
+import PocketInput from '../Forms/Input.vue'
 import Icon from '../Icons/Icon.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: {
-        Input,
+        PocketInput,
         Icon,
     },
 })
@@ -53,12 +69,13 @@ export default class Calendar extends Vue {
     @Prop({ default: '' }) placeholder!: string
     @Prop() modelValue!: Date | null
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) disabled!: boolean
 
     calendar: null | Litepicker = null
     calendarInput: Date | null = null
     dateString = ''
     hover = false
-    focus = false
+    isShowingCalendar = false
     afterCalendarTab = -1
 
     beforeUnmount () {
@@ -78,6 +95,12 @@ export default class Calendar extends Vue {
                     this.dateString = this.calendarInput.toLocaleDateString()
                     this.emitUpdateModelValue(this.calendarInput)
                 })
+                picker.on('clear:selection', () => {
+                    this.calendarInput = null
+                    this.dateString = ''
+                    this.emitUpdateModelValue(this.calendarInput)
+                    picker.hide()
+                })
                 picker.on('show', () => {
                     this.$nextTick(() => {
                         const calendarEls = Array.from<HTMLElement>(document.querySelectorAll('.litepicker'))
@@ -86,19 +109,48 @@ export default class Calendar extends Vue {
                             'button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])'
                         ) as HTMLElement
                         focusableEl.focus()
+                        this.isShowingCalendar = true
                     })
                 })
                 picker.on('hide', () => {
-                    const calendarToggle = ((
-                        this.$refs['calendarToggle'] as ComponentPublicInstance | undefined
-                    )?.$el)
-                    calendarToggle?.focus()
-                    calendarToggle?.blur()
+                    const calendarInputContainer = this.$refs['calendarInput'] as ComponentPublicInstance | undefined
+                    const calendarInputContainerEl = calendarInputContainer?.$el as HTMLDivElement | undefined
+                    const calendarInputEl = calendarInputContainerEl?.querySelector('input')
+                    calendarInputEl?.focus()
+                    calendarInputEl?.blur()
+                    this.isShowingCalendar = false
                 })
             },
         })
     }
 
+    clearCalendar () {
+        if (this.disabled) {
+            return
+        }
+
+        this.calendar?.clearSelection()
+    }
+
+    showCalendar () {
+        if (this.disabled) {
+            return
+        }
+
+        this.calendar && this.calendar.show()
+    }
+
+    handleInputKeydown (event: KeyboardEvent) {
+        if (![ 'Shift', 'Tab' ].includes(event.key)) {
+            if (!this.isShowingCalendar) {
+                this.showCalendar()
+            }
+            event.stopPropagation()
+            event.preventDefault()
+            return false
+        }
+    }
+
     processDateString () {
         const inputDate = new Date(this.dateString)
         if (inputDate && inputDate.toLocaleDateString() !== this.calendarInput?.toLocaleDateString()) {
@@ -108,7 +160,7 @@ export default class Calendar extends Vue {
     }
 
     @Emit('update:modelValue')
-    emitUpdateModelValue (calendarInput: Date) {
+    emitUpdateModelValue (calendarInput: Date | null) {
         return calendarInput
     }
 }
@@ -126,32 +178,55 @@ export default class Calendar extends Vue {
         height: 1px;
     }
 
-    &__icon {
+    &__clear-date-icon {
         position: absolute;
-        right: 8px;
+        top: 30px;
+        right: 34px;
         bottom: 8px;
         width: 20px;
         height: 20px;
         cursor: pointer;
-        color: $brand-blue;
+        color: $steel;
         outline: none;
 
-        &:focus::before {
-            content: '';
-            left: -1px;
-            top: -1px;
+        &--dark {
+            color: $pewter;
+        }
+
+        &:hover {
+            color: $brand-blue;
+
+            &--dark {
+                color: $banana-bread;
+            }
+        }
+
+        svg {
             width: 100%;
             height: 100%;
-            position: absolute;
-            border: 1px solid $brand-blue;
-            border-radius: 5px;
         }
+    }
+
+    &__calendar-icon {
+        position: absolute;
+        top: 30px;
+        right: 8px;
+        bottom: 8px;
+        width: 20px;
+        height: 20px;
+        cursor: pointer;
+        color: $steel;
+        outline: none;
 
         &--dark {
-            color: $banana-bread;
+            color: $pewter;
+        }
+
+        &--active {
+            color: $brand-blue;
 
-            &:focus::before {
-                border-color: $banana-bread;
+            &--dark {
+                color: $banana-bread;
             }
         }
 

package/lib/components/Controls/ToggleSwitch.vue

@@ -4,15 +4,16 @@
         class="uikit-toggle-switch"
         :class="{ 
             'uikit-toggle-switch--enabled': modelValue, 
+            'uikit-toggle-switch--disabled': disabled,
             [`uikit-toggle-switch--${size}`]: true 
         }"
         tabindex="0"
         role="checkbox"
         :aria-checked="modelValue"
-        @keydown.enter="toggleOption"
-        @keydown.prevent.space="toggleOption"
+        @keydown.enter="!disabled && toggleOption()"
+        @keydown.prevent.space="!disabled && toggleOption()"
         @mousedown.prevent
-        @click="toggleOption"
+        @click="!disabled && toggleOption()"
     >
         <div
             v-dark="isDarkMode" 
@@ -38,6 +39,7 @@ import { dark } from '../../directives'
 export default class ToggleSwitch extends Vue {
     @Prop({ default: false }) modelValue!: boolean
     @Prop({ default: false }) isDarkMode!: boolean
+    @Prop({ default: false }) disabled!: boolean
     @Prop({ default: 'small' }) size!: 'small' | 'large'
 
     @Emit('update:modelValue')
@@ -118,6 +120,11 @@ export default class ToggleSwitch extends Vue {
         }
     }
 
+    &--disabled {
+        opacity: 0.5;
+        cursor: default;
+    }
+
     &__handle {
         background-color: $white;
         border: 0.5px solid rgba(0, 0, 0, 0.04);
@@ -157,4 +164,4 @@ export default class ToggleSwitch extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Forms/Input.vue

@@ -10,9 +10,10 @@
             v-dark="isDarkMode"
             class="uikit-input__label"
             :class="{ 
-                'uikit-input__label--hover': hover, 
-                'uikit-input__label--focus': focus, 
-                'uikit-input__label--error': error 
+                'uikit-input__label--hover': hover || forceHoverStyle, 
+                'uikit-input__label--focus': focus || forceFocusStyle, 
+                'uikit-input__label--error': error,
+                'uikit-input__input--hide-caret': hideInputCaret,
             }"
         >{{ label }}</label>
         <div
@@ -32,9 +33,10 @@
                 :tabindex="tabindex"
                 class="uikit-input__input"
                 :class="{ 
-                    'uikit-input__input--hover': hover, 
-                    'uikit-input__input--focus': focus, 
-                    'uikit-input__input--error': error
+                    'uikit-input__input--hover': hover || forceHoverStyle, 
+                    'uikit-input__input--focus': focus || forceFocusStyle, 
+                    'uikit-input__input--error': error,
+                    'uikit-input__input--hide-caret': hideInputCaret,
                 }"
                 @input="valueChange"
                 @focus="focus = true"
@@ -73,15 +75,17 @@
             :name="name"
             :aria-required="ariaRequired"
             :class="{ 
-                'uikit-input__input--hover': hover, 
-                'uikit-input__input--focus': focus, 
-                'uikit-input__input--error': error 
+                'uikit-input__input--hover': hover || forceHoverStyle, 
+                'uikit-input__input--focus': focus || forceFocusStyle, 
+                'uikit-input__input--error': error,
+                'uikit-input__input--hide-caret': hideInputCaret,
             }"
             @input="valueChange"
             @focus="focus = true"
             @blur="focus = false"
             @mouseover="hover = true"
         >
+        <slot />
     </div>
 </template>
 
@@ -112,6 +116,9 @@ export default class Input extends Vue {
     @Prop({ default: false }) isDarkMode!: boolean
     @Prop({ default: false }) ariaRequired!: boolean
     @Prop({ default: '' }) name!: string
+    @Prop({ default: false }) forceHoverStyle!: boolean
+    @Prop({ default: false }) forceFocusStyle!: boolean
+    @Prop({ default: false }) hideInputCaret!: boolean
 
     hover = false
     focus = false
@@ -148,47 +155,41 @@ export default class Input extends Vue {
         background-color: $white;
         border: 1px solid rgba($pewter, 0.85);
         color: $brand-black;
-        -webkit-text-fill-color: $brand-black;
-        -webkit-box-shadow: 0 0 0 1000px $white inset;
-        box-shadow: 0 0 0 1000px $white inset;
         border-radius: 3px;
         caret-color: $brand-blue;
         padding: 9px 11px;
-        font-size: 16px;
-        line-height: 15px;
+        font-size: 15px;
+        line-height: 20px;
         height: 36px;
         width: 100%;
         box-sizing: border-box;
         outline: none;
         z-index: 2;
 
-        &::placeholder {
+        :not(&:disabled)::placeholder {
             color: $pewter;
-            -webkit-text-fill-color: $pewter;
         }
 
         &:disabled {
             background: $gray-background;
-            border: 1px solid $gray-background;
-            color: $slate-03;
+            border: 1px solid rgba($pewter, 0.5);
+            color: $slate;
+        }
 
-            &:placeholder {
-                color: $slate-03;
-            }
+        &:disabled::placeholder {
+            color: $slate;
         }
 
         &--dark {
             background-color: $moonlit-ocean;
-            -webkit-text-fill-color: $white;
-            -webkit-box-shadow: 0 0 0 1000px $moonlit-ocean inset;
-            box-shadow: 0 0 0 1000px $moonlit-ocean inset;
             border-color: $pewter;
             color: $white;
             caret-color: $banana-bread;
 
             &:disabled {
-                border-color: $moonlit-ocean;
-                background-color: $moonlit-ocean;
+                border-color: rgba($pewter, 0.5);
+                background-color: rgba($moonlit-ocean, 0.5);
+                color: $steel;
             }
         }
 
@@ -196,7 +197,7 @@ export default class Input extends Vue {
             border: 1px solid $baby-blue;
 
             &--dark {
-                border: 0.5px solid $banana-bread;
+                border: 1px solid rgba($banana-bread, 0.4);
             }
         }
 
@@ -204,38 +205,35 @@ export default class Input extends Vue {
             border: 1px solid $brand-blue;
 
             &--dark {
-                border-color: $banana-bread;
+                border: 1px solid $banana-bread;
             }
         }
 
         &--error {
-            border: 1px solid $red-pegasus;
+            border: 1px solid $pepper;
 
             &--dark {
-                border-color: $rosa;
+                border: 1px solid $rosa;
             }
         }
+
+        &--hide-caret {
+            caret-color: transparent;
+        }
     }
 
     &__label {
         font-size: 13px;
-        line-height: 14px;
-        margin: 0 0 6px 12px;
-        color: $slate-01;
+        font-weight: 600;
+        line-height: 18px;
+        margin: 0 0 4px 12px;
+        color: $pickled-bluewood;
         display: block;
 
         &--dark {
             color: $fog;
         }
 
-        &--hover {
-            color: $slate-03;
-
-            &--dark {
-                color: $fog;
-            }
-        }
-
         &--focus {
             color: $brand-blue;
 
@@ -245,12 +243,16 @@ export default class Input extends Vue {
         }
 
         &--error {
-            color: $red-pegasus;
+            color: $pepper;
 
             &--dark {
                 color: $rosa;
             }
         }
+
+        &--hide-caret {
+            caret-color: transparent;
+        }
     }
 
     &__password-container {

package/lib/components/Forms/Select.vue

@@ -39,21 +39,23 @@
                 }"
                 @click="showDropdown = !showDropdown"
             >
-                {{ modelValue ? modelValue.label : placeholder }}
-
-                <div
-                    v-if="subtext"
-                    v-dark="isDarkMode"
-                    class="uikit-select__subtext"
-                    :class="{
-                        'uikit-select__subtext--placeholder': !subtext,
-                        'uikit-select__subtext--hover': hover,
-                        'uikit-select__subtext--focus': focus,
-                        'uikit-select__subtext--disabled': disabled,
-                    }"
-                >
-                    {{ modelValue ? modelValue.subtext : subtext }}
-                </div>
+                <slot name="selectValue" :item="modelValue">
+                    {{ modelValue ? modelValue.label : placeholder }}
+    
+                    <div
+                        v-if="subtext"
+                        v-dark="isDarkMode"
+                        class="uikit-select__subtext"
+                        :class="{
+                            'uikit-select__subtext--placeholder': !subtext,
+                            'uikit-select__subtext--hover': hover,
+                            'uikit-select__subtext--focus': focus,
+                            'uikit-select__subtext--disabled': disabled,
+                        }"
+                    >
+                        {{ modelValue ? modelValue.subtext : subtext }}
+                    </div>
+                </slot>
             </div>
             <input
                 v-else
@@ -96,31 +98,35 @@
                     'uikit-select__list--subtext': subtext,
                 }"
             >
-                <li
-                    v-for="item in filteredData"
-                    :key="JSON.stringify(item)"
-                    ref="uikit-select__items"
-                    v-dark="isDarkMode"
-                    class="uikit-select__item"
-                    :class="{ 
-                        'uikit-select__item--link': item.type === 'link',
-                        'uikit-select__item--subtext': item.subtext
-                    }"
-                    :data-value="item.value || undefined"
-                    tabindex="0"
-                    @click="selectItem(item)"
-                    @keydown="keyPressedItem"
-                    @mousedown.prevent
-                >
-                    {{ item.label }}
-                    <div
-                        v-if="item.subtext"
+                <slot name="dropdownList">
+                    <li
+                        v-for="item in filteredData"
+                        :key="JSON.stringify(item)"
+                        ref="uikit-select__items"
                         v-dark="isDarkMode"
-                        class="uikit-select__item-subtext"
+                        class="uikit-select__item"
+                        :class="{
+                            'uikit-select__item--link': item.type === 'link',
+                            'uikit-select__item--subtext': item.subtext
+                        }"
+                        :data-value="item.value || undefined"
+                        tabindex="0"
+                        @click="selectItem(item)"
+                        @keydown="keyPressedItem"
+                        @mousedown.prevent
                     >
-                        {{ item.subtext }}
-                    </div>
-                </li>
+                        <slot name="dropdownListItem" :item="item">
+                            {{ item.label }}
+                            <div
+                                v-if="item.subtext"
+                                v-dark="isDarkMode"
+                                class="uikit-select__item-subtext"
+                            >
+                                {{ item.subtext }}
+                            </div>
+                        </slot>
+                    </li>
+                </slot>
             </ul>
         </div>
     </div>
@@ -420,9 +426,10 @@ export default class Select extends Vue {
 
     &__label {
         font-size: 13px;
-        line-height: 14px;
-        margin: 0 0 6px 12px;
-        color: $slate-01;
+        line-height: 18px;
+        font-weight: 600;
+        margin: 0 0 4px 12px;
+        color: $pickled-bluewood;
         display: block;
 
         &--dark {
@@ -564,9 +571,9 @@ export default class Select extends Vue {
         position: absolute;
         right: 13px;
         top: 14px;
-        color: $pewter;
+        color: $steel;
         width: 12px;
-        height: 7px;
+        height: 8px;
         z-index: 1;
 
         &--hover {

package/lib/components/Icons/Icon.vue

@@ -30,6 +30,7 @@
     <IconExam v-else-if="type === 'exam'" :title="title" />
     <IconLightning v-else-if="type === 'lightning'" :title="title" />
     <IconCalendar v-else-if="type === 'calendar'" :title="title" />
+    <IconCalendarPicker v-else-if="type === 'calendarPicker'" :title="title" />
     <IconPassage v-else-if="type === 'passage'" :title="title" />
     <IconPencil v-else-if="type === 'pencil'" :title="title" />
     <IconPeople v-else-if="type === 'people'" :title="title" />
@@ -101,6 +102,7 @@ import IconBarChart from './IconBarChart.vue'
 import IconExam from './IconExam.vue'
 import IconLightning from './IconLightning.vue'
 import IconCalendar from './IconCalendar.vue'
+import IconCalendarPicker from './IconCalendarPicker.vue'
 import IconPassage from './IconPassage.vue'
 import IconPencil from './IconPencil.vue'
 import IconPeople from './IconPeople.vue'
@@ -169,6 +171,7 @@ import IconPresent from './IconPresent.vue'
         IconExam,
         IconLightning,
         IconCalendar,
+        IconCalendarPicker,
         IconPassage,
         IconPencil,
         IconPeople,

package/lib/components/Icons/IconCalendarPicker.vue

@@ -0,0 +1,17 @@
+<template>
+    <!-- eslint-disable -->
+    <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
+        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.5 1.75C5.5 1.19772 5.94772 0.75 6.5 0.75C7.05228 0.75 7.5 1.19772 7.5 1.75V3.25H12.5V1.75C12.5 1.19772 12.9477 0.75 13.5 0.75C14.0523 0.75 14.5 1.19772 14.5 1.75V3.25H17C18.1046 3.25 19 4.14543 19 5.25V16.25C19 17.3546 18.1046 18.25 17 18.25H3C1.89543 18.25 1 17.3546 1 16.25V5.25C1 4.14543 1.89543 3.25 3 3.25H5.5V1.75ZM3 16.25V7.75H17V16.25H3Z" fill="currentColor"/>
+    </svg>
+    <!-- eslint-enable -->
+</template>
+
+<script lang="ts">
+import { Vue, Component, Prop } from 'vue-facing-decorator'
+
+@Component
+export default class IconCalendarPicker extends Vue {
+    @Prop() title!: string
+}
+</script>

package/lib/components/Icons/icon.d.ts

@@ -25,6 +25,7 @@ export type TIconType =
     | 'exam'
     | 'lightning'
     | 'calendar'
+    | 'calendarPicker'
     | 'passage'
     | 'pencil'
     | 'people'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pocketprep/ui-kit",
-  "version": "3.2.3",
+  "version": "3.3.0",
   "description": "Pocket Prep UI Kit",
   "author": "pocketprep",
   "scripts": {