@pocketprep/ui-kit 3.5.6 → 3.5.7

package/lib/components/Calendar/Calendar.vue

@@ -6,6 +6,7 @@
             ref="calendarInput"
             v-model="dateString"
             :label="label"
+            :labelSubtext="labelSubtext"
             class="uikit-calendar__input"
             :placeholder="placeholder"
             :is-dark-mode="isDarkMode"
@@ -25,6 +26,7 @@
                 class="uikit-calendar__clear-date-icon"
                 :class="{
                     'uikit-calendar__clear-date-icon--no-label': !label,
+                    'uikit-calendar__clear-date-icon--with-subtext': !!labelSubtext
                 }"
                 @click.stop.prevent="clearCalendar"
             >
@@ -43,6 +45,7 @@
                 :class="{
                     'uikit-calendar__calendar-icon--active': !disabled && (hover || isShowingCalendar),
                     'uikit-calendar__calendar-icon--no-label': !label,
+                    'uikit-calendar__calendar-icon--with-subtext': !!labelSubtext
                 }"
             >
                 <Icon type="calendarPicker" />
@@ -79,6 +82,7 @@ import type { ComponentPublicInstance } from 'vue'
 })
 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
@@ -215,6 +219,10 @@ export default class Calendar extends Vue {
             color: $pewter;
         }
 
+        &--with-subtext {
+            top: 48px;
+        }
+
         &:hover {
             color: $brand-blue;
 
@@ -262,6 +270,10 @@ export default class Calendar extends Vue {
             }
         }
 
+        &--with-subtext {
+            top: 48px;
+        }
+
         svg {
             width: 100%;
             height: 100%;

package/lib/components/Forms/Input.vue

@@ -14,8 +14,15 @@
                 'uikit-input__label--focus': focus || forceFocusStyle, 
                 'uikit-input__label--error': error,
                 'uikit-input__input--hide-caret': hideInputCaret,
+                'uikit-input__label--with-subtext': !!labelSubtext,
             }"
         >{{ label }}</label>
+        <div
+            v-if="labelSubtext"
+            class="uikit-input__label-subtext"
+        >
+            {{ labelSubtext }}
+        </div>
         <div
             v-if="fieldType === 'password'"
             class="uikit-input__password-container"
@@ -104,6 +111,7 @@ import { dark } from '../../directives'
 })
 export default class Input extends Vue {
     @Prop() label?: string
+    @Prop() labelSubtext?: string
     @Prop({ default: 'text' }) fieldType?: string
     @Prop({ default: '' }) placeholder?: string
     @Prop({ default: '524288' }) maxlength?: string // that's the default input field length
@@ -253,6 +261,18 @@ export default class Input extends Vue {
         &--hide-caret {
             caret-color: transparent;
         }
+
+        &--with-subtext {
+            margin-bottom: 1px;
+        }
+    }
+
+    &__label-subtext {
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 18px;
+        color: $ash;
+        margin: 0 0 4px 12px;
     }
 
     &__password-container {

package/lib/components/Forms/Select.vue

@@ -97,7 +97,7 @@
                 :class="{
                     'uikit-select__arrow--hover': hover,
                     'uikit-select__arrow--focus': focus,
-                    'uikit-select__arrow--show-dropdown': showDropdown,
+                    'uikit-select__arrow--show-dropdown': showDropdown && !disabled,
                 }"
                 @mousedown.prevent
                 @click="showDropdown = !showDropdown"
@@ -131,7 +131,7 @@
                         @mousedown.prevent
                     >
                         <slot name="dropdownListItem" :item="item">
-                            {{ item.label }}
+                            {{ item.label || emptyOptionLabel }}
                             <div
                                 v-if="item.subtext"
                                 v-dark="isDarkMode"
@@ -398,6 +398,7 @@ export default class Select extends Vue {
             this.searchText = ''
         } else {
             this.showDropdown = false
+            this.emitClose()
         }
     }
 
@@ -444,6 +445,11 @@ export default class Select extends Vue {
     emitOpenDropdown (open: boolean) {
         return open
     }
+
+    @Emit('close')
+    emitClose () {
+        return true
+    }
 }
 </script>
 
@@ -691,6 +697,7 @@ export default class Select extends Vue {
         padding: 5px 11px;
         font-size: 15px;
         line-height: 20px;
+        height: 20px;
         cursor: default;
         user-select: none;
 

package/lib/components/Icons/Icon.vue

@@ -75,6 +75,7 @@
     <IconPresent v-else-if="type === 'present'" :title="title" />
     <IconLink v-else-if="type === 'link'" :title="title" />
     <IconAssignment v-else-if="type === 'assignment'" :title="title" />
+    <IconQuickActions v-else-if="type === 'quickActions'" :title="title" />
 </template>
 
 <script lang="ts">
@@ -148,6 +149,7 @@ import IconTimer from './IconTimer.vue'
 import IconPresent from './IconPresent.vue'
 import IconLink from './IconLink.vue'
 import IconAssignment from './IconAssignment.vue'
+import IconQuickActions from './IconQuickActions.vue'
 
 @Component({
     name: 'Icon',
@@ -220,6 +222,7 @@ import IconAssignment from './IconAssignment.vue'
         IconPresent,
         IconLink,
         IconAssignment,
+        IconQuickActions,
     },
 })
 export default class Icon extends Vue {

package/lib/components/Icons/IconQuickActions.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+        
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+        
+<template>
+    <svg width="24"
+         height="24"
+         viewBox="0 0 24 24"
+         fill="none"
+         xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
+        <circle cx="5"
+                cy="12"
+                r="2"
+                fill="currentColor" />
+        <circle cx="12"
+                cy="12"
+                r="2"
+                fill="currentColor" />
+        <circle cx="19"
+                cy="12"
+                r="2"
+                fill="currentColor" />
+    </svg>
+</template>

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

@@ -66,4 +66,5 @@ export type TIconType =
     | 'timer'
     | 'present'
     | 'link'
-    | 'assignment'
+    | 'assignment'
+    | 'quickActions'

package/lib/components/Tags/Tag.vue

@@ -5,11 +5,16 @@
         :class="{
             'uikit-tag--small': size === 'small',
             'uikit-tag--medium': size === 'medium',
+            'uikit-tag--large': size === 'large',
             'uikit-tag--beta': isBetaTag,
             'uikit-tag--learning': isLearningTag,
             'uikit-tag--active': isActiveTag,
             'uikit-tag--pending': isPendingTag,
             'uikit-tag--archived': isArchivedTag,
+            'uikit-tag--draft': isDraftTag,
+            'uikit-tag--available': isAvailableTag,
+            'uikit-tag--upcoming': isUpcomingTag,
+            'uikit-tag--closed': isClosedTag,
         }"
         :style="tagStyles"
     >
@@ -38,6 +43,10 @@ export default class Tag extends Vue {
     @Prop({ default: false }) isActiveTag!: boolean
     @Prop({ default: false }) isPendingTag!: boolean
     @Prop({ default: false }) isArchivedTag!: boolean
+    @Prop({ default: false }) isDraftTag!: boolean
+    @Prop({ default: false }) isAvailableTag!: boolean
+    @Prop({ default: false }) isUpcomingTag!: boolean
+    @Prop({ default: false }) isClosedTag!: boolean
     @Prop({ default: 'large' }) size!: 'small' | 'medium' | 'large'
     @Prop({ default: false }) isDarkMode!: boolean
     @Prop({ default: undefined }) backgroundColor!: string | undefined
@@ -89,6 +98,13 @@ export default class Tag extends Vue {
         border: 1px solid $banana-bread;
     }
 
+    &--large {
+        font-size: 14px;
+        height: 20px;
+        line-height: 19px;
+        padding: 0 3px;
+    }
+
     &--medium {
         font-size: 12px;
         height: 17px;
@@ -147,5 +163,29 @@ export default class Tag extends Vue {
             background: rgba($pewter, 0.30);
         }
     }
+
+    &--draft {
+        border: none;
+        background: $buttermilk;
+        color: $brand-black;
+    }
+
+    &--available {
+        border: none;
+        background: $spectral-green;
+        color: $white;
+    }
+
+    &--closed {
+        border: 1px solid rgba($pewter, 0.3);
+        background: none;
+        color: $brand-black;
+    }
+
+    &--upcoming {
+        border: none;
+        background: rgba($spectral-green, 0.2);
+        color: $brand-black;
+    }
 }
 </style>

package/package.json

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