@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Forms/Textarea.vue

@@ -42,12 +42,12 @@
             </div>
         </div>
         <textarea
+            ref="textarea"
             v-dark="isDarkMode"
             :value="modelValue"
             :disabled="disabled"
             :placeholder="placeholder"
             :autofocus="autoFocus"
-            :style="{ height, width }"
             class="uikit-textarea__textarea"
             :class="{
                 'uikit-textarea__textarea--hover': hover,
@@ -60,42 +60,56 @@
     </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 Tooltip from '../Tooltips/Tooltip.vue'
-import { dark } from '../../directives'
-
-@Component({
-    components: {
-        Icon,
-        Tooltip,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Textarea extends Vue {
-    @Prop() label?: string
-    @Prop() placeholder?: string
-    @Prop() center?: boolean
-    @Prop() modelValue!: string
-    @Prop() disabled?: boolean
-    @Prop() autoFocus?: boolean
-    @Prop({ default: '150px' }) height?: string
-    @Prop({ default: '341px' }) width?: string
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) showIconAndTooltip!: boolean
-    @Prop({ default: '' }) tooltipText!: string
-
-    hover = false
-    focus = false
-    showTextAreaTooltip = false
-
-    @Emit('update:modelValue')
-    valueChange ($event: Event) {
-        return ($event.target as HTMLInputElement).value
+import { dark as vDark } from '../../directives'
+import { onMounted, ref, useTemplateRef } from 'vue'
+
+const {
+    label = '',
+    placeholder = '',
+    modelValue = null,
+    disabled = false,
+    autoFocus = false,
+    height = '150px',
+    width = '341px',
+    isDarkMode = false,
+    showIconAndTooltip = false,
+    tooltipText = '',
+} = defineProps<{
+    label?: string
+    placeholder?: string
+    modelValue?: string | null
+    disabled?: boolean
+    autoFocus?: boolean
+    height?: string
+    width?: string
+    isDarkMode?: boolean
+    showIconAndTooltip?: boolean
+    tooltipText?: string
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [modelVal: string]
+}>()
+
+const hover = ref(false)
+const focus = ref(false)
+const showTextAreaTooltip = ref(false)
+
+const textareaRef = useTemplateRef<HTMLElement>('textarea')
+
+onMounted(() => {
+    if (textareaRef.value) {
+        textareaRef.value.style.width = width
+        textareaRef.value.style.height = height
     }
+})
+
+const valueChange = ($event: Event) => {
+    const val = ($event.target as HTMLInputElement).value
+    emit('update:modelValue', val)
 }
 </script>
 
@@ -223,4 +237,4 @@ export default class Textarea extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Icons/IconAccordionArrow.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="12px" height="8px" viewBox="0 0 12 8" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -12,12 +19,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconAccordionArrow extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconActivity.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="18px" height="23px" viewBox="0 0 18 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -10,12 +17,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconActivity extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconAdd.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -8,14 +15,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component({
-    name: 'IconAdd',
-})
-export default class IconAdd extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconAddCircle.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -11,12 +18,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconAddCircle extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconArrow.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="13px" height="10px" viewBox="0 0 13 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -10,12 +17,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconArrow extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconBarChart.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="18px" height="23px" viewBox="0 0 18 23" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -12,12 +19,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconBarChart extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconCalendar.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -8,12 +15,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconCalendar extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconCalendarPicker.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -6,12 +13,3 @@
     </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/IconChat.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="26" height="24" viewBox="0 0 26 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -7,12 +14,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconChat extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconCheck.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="20px" height="17px" viewBox="0 0 20 17" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -10,12 +17,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconCheck extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconClose.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="20px" height="20px" viewBox="0 0 20 20" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -12,12 +19,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconClose extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconConcept.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-        
+
 const { title } = defineProps<{
     title: string
 }>()

package/lib/components/Icons/IconCorrect.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="21px" height="22px" viewBox="0 0 21 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -8,12 +15,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconCorrect extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconEdit.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -10,14 +17,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component({
-    name: 'IconEdit',
-})
-export default class IconEdit extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconExam.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="25px" height="24px" viewBox="0 0 25 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -23,12 +30,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconExam extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconExternalLink.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -19,12 +26,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconExternalLink extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconEyeHide.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -8,12 +15,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-
-@Component
-export default class IconEyeHide extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconEyeShow.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="21" height="21" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -6,12 +13,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconEyeShow extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconFilter.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -8,12 +15,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-
-@Component
-export default class IconFilter extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconFilterActive.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="24px" height="24px" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -9,12 +16,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-
-@Component
-export default class IconFilterActive extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconFlag.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="48px" height="48px" viewBox="0 0 48 48" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -14,12 +21,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconFlag extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconFlagContent.vue

@@ -1,17 +1,16 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M1 0.75C0.585786 0.75 0.25 1.08579 0.25 1.5V6.55447C0.24998 6.55675 0.249969 6.55903 0.249969 6.56131C0.249969 6.56359 0.24998 6.56587 0.25 6.56815V11.5C0.25 11.9142 0.585786 12.25 1 12.25C1.41421 12.25 1.75 11.9142 1.75 11.5V7.3252C2.61133 7.35953 3.13054 7.45342 3.46431 7.56148C3.84262 7.68395 4.00196 7.82743 4.22385 8.03108L4.23743 8.04354C4.50278 8.28719 4.8432 8.59977 5.49932 8.82009C6.12507 9.03021 6.99901 9.14573 8.34764 9.14573C8.76185 9.14573 9.09764 8.80995 9.09764 8.39573C9.09764 8.35733 9.09475 8.31961 9.08919 8.28277C9.09477 8.24586 9.09767 8.20807 9.09767 8.1696V3.33692C9.09767 2.92271 8.76188 2.58692 8.34767 2.58692C7.05195 2.58692 6.36892 2.4728 5.97516 2.3395C5.62985 2.2226 5.48754 2.08879 5.26578 1.88027L5.25703 1.87203C4.98257 1.614 4.63595 1.29617 3.94822 1.07349C3.30579 0.865477 2.40029 0.75 1 0.75ZM7.59767 7.63089V4.0735C6.65622 4.03744 5.99439 3.92963 5.49419 3.7603C4.83948 3.53866 4.50426 3.22331 4.24479 2.9792L4.22957 2.96489C4.01557 2.76369 3.86215 2.62229 3.48615 2.50055C3.15118 2.39209 2.62615 2.29771 1.75 2.26358V5.82406C2.72352 5.85934 3.40888 5.96689 3.92631 6.1344C4.61044 6.35588 4.96031 6.67101 5.23811 6.92596L5.24449 6.93182C5.4732 7.14175 5.62312 7.27936 5.9768 7.39812C6.28969 7.50318 6.77883 7.59589 7.59767 7.63089Z" fill="currentColor"/>
     </svg>
 
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconFlagContent extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconFlagFeedback.vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+
+const { title, secondaryColor = 'currentColor' } = defineProps<{
+    title: string
+    secondaryColor?: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="21px" height="22px" viewBox="0 0 21 22" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
@@ -12,13 +20,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconFlagFeedback extends Vue {
-    @Prop() title!: string
-    @Prop({ default: 'currentColor' }) secondaryColor!: string
-}
-</script>