@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Forms/Checkbox.vue

@@ -37,38 +37,38 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
-
-@Component({
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Checkbox extends Vue {
-    @Prop() modelValue!: boolean | null
-    @Prop() disabled?: boolean
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) hasLabel!: boolean
-
-    /*******    Element-specific style props    *******/
+import { dark as vDark } from '../../directives'
+import { ref } from 'vue'
+
+const {
+    modelValue = undefined,
+    disabled = false,
+    isDarkMode = false,
+    hasLabel = false,
+    checkboxStyles = null,
+    checkboxCheckStyles = null,
+} = defineProps<{
+    modelValue?: boolean | null
+    disabled?: boolean
+    isDarkMode?: boolean
+    hasLabel?: boolean
+    /* ******    Element-specific style props    ****** */
     // .uikit-checkbox
-    @Prop() checkboxStyles!: Record<string, string>
+    checkboxStyles?: Record<string, string> | null
     // .uikit-checkbox__check
-    @Prop() checkboxCheckStyles!: Record<string, string>
+    checkboxCheckStyles?: Record<string, string> | null
+}>()
 
-    hover = false
-    focus = false
+const emit = defineEmits<{
+    'update:modelValue': [modelVal: boolean]
+}>()
 
-    @Emit('update:modelValue')
-    toggleCheckbox () {
-        return !this.modelValue
-    }
+const focus = ref(false)
+
+const toggleCheckbox = () => {
+    emit('update:modelValue', !modelValue)
 }
 </script>
 

package/lib/components/Forms/CheckboxOption.vue

@@ -33,38 +33,38 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Checkbox from '../Forms/Checkbox.vue'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        Checkbox,
-    },
+import { dark as vDark } from '../../directives'
+import { onMounted, ref } from 'vue'
+
+const {
+    modelValue = false,
+    isDarkMode = false,
+    label = '',
+    disabled = false,
+} = defineProps<{
+    modelValue?: boolean
+    isDarkMode?: boolean
+    label?: string
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [modelVal: boolean]
+}>()
+
+const checkboxId = ref<null | string>(null)
+
+onMounted(() => {
+    checkboxId.value = `checkbox-${Math.round(Math.random() * 1000000)}`
 })
-export default class CheckboxOption extends Vue {
-    @Prop({ default: false }) modelValue!: boolean | null
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop() label!: string
-    @Prop({ default: false }) disabled!: boolean
 
-    checkboxId: null | string = null
-
-    mounted () {
-        this.checkboxId = `checkbox-${Math.round(Math.random() * 1000000)}`
-    }
-
-    @Emit('update:modelValue')
-    emitUpdateModelValue (val: boolean) {
-        if (this.disabled) {
-            return this.modelValue
-        } else {
-            return val
-        }
+const emitUpdateModelValue = (val: boolean) => {
+    if (disabled) {
+        emit('update:modelValue', modelValue)
+    } else {
+        emit('update:modelValue', val)
     }
 }
 </script>
@@ -194,4 +194,4 @@ export default class CheckboxOption extends Vue {
         margin-top: 1px;
     }
 }
-</style>
+</style>

package/lib/components/Forms/Errors.vue

@@ -33,33 +33,30 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
+import { dark as vDark } from '../../directives'
+import { computed, onMounted, useTemplateRef } from 'vue'
 
-@Component({
-    directives: {
-        dark,
-    },
-    components: {
-        Icon,
-    },
-})
-export default class Errors extends Vue {
-    @Prop({ default: () => ([]) }) errors!: string[]
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop() errorHeader!: string
+const {
+    errors = [],
+    isDarkMode = false,
+    errorHeader = '',
+} = defineProps<{
+    errors?: string[]
+    isDarkMode?: boolean
+    errorHeader?: string
+}>()
 
-    get filteredErrors () {
-        return [ ...new Set(this.errors) ]
-    }
+const errorsRef = useTemplateRef<HTMLElement | undefined>('uikit-errors')
 
-    mounted () {
-        const errorsEl = this.$refs['uikit-errors'] as HTMLElement | undefined
-        errorsEl?.focus()
-    }
-}
+const filteredErrors = computed(() => {
+    return [ ...new Set(errors) ]
+})
+
+onMounted(() => {
+    errorsRef.value?.focus()
+})
 </script>
 
 <style lang="scss">
@@ -115,4 +112,4 @@ export default class Errors extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Forms/Input.vue

@@ -9,9 +9,9 @@
             :id="`${componentId}--label`"
             v-dark="isDarkMode"
             class="uikit-input__label"
-            :class="{ 
-                'uikit-input__label--hover': hover || forceHoverStyle, 
-                'uikit-input__label--focus': focus || forceFocusStyle, 
+            :class="{
+                'uikit-input__label--hover': hover || forceHoverStyle,
+                'uikit-input__label--focus': focus || forceFocusStyle,
                 'uikit-input__label--error': error,
                 'uikit-input__input--hide-caret': hideInputCaret,
                 'uikit-input__label--with-subtext': !!labelSubtext,
@@ -39,9 +39,9 @@
                 :autofocus="autoFocus"
                 :tabindex="tabindex"
                 class="uikit-input__input"
-                :class="{ 
-                    'uikit-input__input--hover': hover || forceHoverStyle, 
-                    'uikit-input__input--focus': focus || forceFocusStyle, 
+                :class="{
+                    'uikit-input__input--hover': hover || forceHoverStyle,
+                    'uikit-input__input--focus': focus || forceFocusStyle,
                     'uikit-input__input--error': error,
                     'uikit-input__input--hide-caret': hideInputCaret,
                 }"
@@ -82,9 +82,9 @@
             class="uikit-input__input"
             :name="name"
             :aria-required="ariaRequired"
-            :class="{ 
-                'uikit-input__input--hover': hover || forceHoverStyle, 
-                'uikit-input__input--focus': focus || forceFocusStyle, 
+            :class="{
+                'uikit-input__input--hover': hover || forceHoverStyle,
+                'uikit-input__input--focus': focus || forceFocusStyle,
                 'uikit-input__input--error': error,
                 'uikit-input__input--hide-caret': hideInputCaret,
             }"
@@ -97,61 +97,73 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
-import { dark } from '../../directives'
-
-@Component({
-    components: {
-        Icon,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Input extends Vue {
-    @Prop() label?: string
-    @Prop() labelSubtext?: string
-    @Prop({ default: 'text' }) fieldType?: string
-    @Prop() minNumber?: number
-    @Prop({ default: '' }) placeholder?: string
-    @Prop({ default: '524288' }) maxlength?: string // that's the default input field length
-    @Prop({ default: false }) center?: boolean
-    @Prop() modelValue!: string
-    @Prop({ default: false }) disabled?: boolean
-    @Prop({ default: false }) autoFocus?: boolean
-    @Prop({ default: false }) error?: boolean
-    @Prop({ default: 0 }) tabindex?: number
-    @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
-    showPassword = false
-    
-    get componentId () {
-        if (this.label) {
-            return `input-${this.label.toLowerCase().replace(/ /g, '-')}`
-        } else {
-            return `input-${Math.round(Math.random() * 1000000)}`
-        }
+import { dark as vDark } from '../../directives'
+import { computed, ref } from 'vue'
+
+const {
+    label = '',
+    labelSubtext = '',
+    fieldType = 'text',
+    minNumber = undefined,
+    placeholder = '',
+    maxlength = '524288',
+    modelValue = null,
+    disabled = false,
+    autoFocus = false,
+    error = false,
+    tabindex = 0,
+    isDarkMode = false,
+    ariaRequired = false,
+    name = '',
+    forceHoverStyle = false,
+    forceFocusStyle = false,
+    hideInputCaret = false,
+} = defineProps<{
+    label?: string
+    labelSubtext?: string
+    fieldType?: string
+    minNumber?: number
+    placeholder?: string
+    maxlength?: string // default input field length
+    modelValue?: string | null
+    disabled?: boolean
+    autoFocus?: boolean
+    error?: boolean
+    tabindex?: number
+    isDarkMode?: boolean
+    ariaRequired?: boolean
+    name?: string
+    forceHoverStyle?: boolean
+    forceFocusStyle?: boolean
+    hideInputCaret?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [modelVal: string]
+}>()
+
+const hover = ref(false)
+const focus = ref(false)
+const showPassword = ref(false)
+
+const componentId = computed(() => {
+    if (label) {
+        return `input-${label.toLowerCase().replace(/ /g, '-')}`
+    } else {
+        return `input-${Math.round(Math.random() * 1000000)}`
     }
+})
 
-    keydownListener (e: Event | KeyboardEvent) {
-        if (this.focus && 'key' in e && e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
-            e.stopPropagation()
-        }
+const keydownListener = (e: Event | KeyboardEvent) => {
+    if (focus.value && 'key' in e && e.key.match(/^[A-Za-z0-9\s\-_@]$/)) {
+        e.stopPropagation()
     }
+}
 
-    @Emit('update:modelValue')
-    valueChange ($event: Event) {
-        return ($event.target as HTMLInputElement).value
-    }
+const valueChange = ($event: Event) => {
+    emit('update:modelValue', ($event.target as HTMLInputElement).value)
 }
 </script>
 

package/lib/components/Forms/Radio.vue

@@ -29,7 +29,7 @@
                 class="uikit-radio__item"
                 :data-value="item.value"
                 :tabindex="(disabled || item.disabled) ? -1 : 0"
-                :class="{ 
+                :class="{
                     'uikit-radio__item--selected': modelValue && item.value === modelValue.value,
                     'uikit-radio__item--disabled': disabled || item.disabled,
                     'uikit-radio__item--has-helper-text': !!(item.helperText)
@@ -58,7 +58,7 @@
                                 v-if="item.helperText"
                                 v-dark="isDarkMode"
                                 class="uikit-radio__item-helper-text"
-                                v-html="item.helperText" 
+                                v-html="item.helperText"
                             />
                         </slot>
                     </div>

package/lib/components/Forms/RadioButton.vue

@@ -2,18 +2,18 @@
 import { dark as vDark } from '../../directives'
 
 defineProps<{
-    selected: boolean
-    disabled: boolean
-    isDarkMode: boolean
+    selected?: boolean
+    disabled?: boolean
+    isDarkMode?: boolean
     color: 'blue' | 'green' | 'gray'
 }>()
 </script>
 
 <template>
-    <div 
-        v-dark="isDarkMode" 
-        class="uikit-radio-btn" 
-        :class="{ 
+    <div
+        v-dark="isDarkMode"
+        class="uikit-radio-btn"
+        :class="{
             'uikit-radio-btn--selected': selected,
             'uikit-radio-btn--disabled': disabled,
             [`uikit-radio-btn--${color}`]: true,
@@ -125,7 +125,7 @@ defineProps<{
 
     &--gray {
         border-color: $slate;
-        
+
         &::before {
             background: $slate;
         }