@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Icons/IconPeople.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="31px" height="23px" viewBox="0 0 31 23" 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 IconPeople extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconPercent.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">
@@ -13,12 +20,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconPercent extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconPerson.vue

@@ -1,17 +1,16 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="14" height="20" viewBox="0 0 14 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M4.96739 7.05006C4.96739 5.92748 5.87742 5.01745 7 5.01745C8.12258 5.01745 9.03261 5.92748 9.03261 7.05006C9.03261 8.17264 8.12258 9.08267 7 9.08267C5.87742 9.08267 4.96739 8.17264 4.96739 7.05006ZM7 3.58267C5.08501 3.58267 3.53261 5.13508 3.53261 7.05006C3.53261 8.96505 5.08501 10.5175 7 10.5175C8.91499 10.5175 10.4674 8.96505 10.4674 7.05006C10.4674 5.13508 8.91499 3.58267 7 3.58267ZM7.00004 11.6C4.69956 11.6 2.03794 12.267 0.836079 14.5542C0.643404 14.9209 0.784458 15.3743 1.15113 15.567C1.5178 15.7597 1.97125 15.6186 2.16392 15.2519C2.96206 13.733 4.85601 13.1 7.00004 13.1C9.11878 13.1 11.048 13.7366 11.842 15.1882C12.0408 15.5516 12.4965 15.6851 12.8599 15.4863C13.2233 15.2875 13.3568 14.8318 13.158 14.4684C11.952 12.2634 9.26369 11.6 7.00004 11.6Z" fill="currentColor"/>
     </svg>
 
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconPerson extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconPresent.vue

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

package/lib/components/Icons/IconPreview.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">
@@ -8,12 +15,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconPreview extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconQuestions.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">
@@ -14,12 +21,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconQuestions extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconQuick10.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">
@@ -12,12 +19,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconQuick10 extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconQuickActions.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-        
+
 const { title } = defineProps<{
     title: string
 }>()
 </script>
-        
+
 <template>
     <svg width="24"
          height="24"

package/lib/components/Icons/IconRecommendedFilter.vue

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

package/lib/components/Icons/IconRemoveCircle.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 IconRemoveCircle extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconReviewFlag.vue

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

package/lib/components/Icons/IconSearch.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="15px" height="16px" viewBox="0 0 15 16" 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 IconSearch extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconShare.vue

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

package/lib/components/Icons/IconSideBar.vue

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

package/lib/components/Icons/IconSideBarActive.vue

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

package/lib/components/Icons/IconStar.vue

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

package/lib/components/Icons/IconStopwatch.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">
@@ -11,12 +18,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-
-@Component
-export default class IconStopwatch extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconStrike.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="10px" height="12px" viewBox="0 0 10 12" 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 IconStrike extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconSubject.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">
@@ -11,12 +18,3 @@
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-facing-decorator'
-
-@Component
-export default class IconSubject extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconText.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="30px" height="30px" viewBox="0 0 30 30" 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 IconText extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconTimer.vue

@@ -1,17 +1,16 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="9" height="14" viewBox="0 0 9 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+        <title>{{ title }}</title>
         <path fill-rule="evenodd" clip-rule="evenodd" d="M0 1.75C0 1.26675 0.391751 0.875 0.875 0.875H8.125C8.60825 0.875 9 1.26675 9 1.75C9 2.23325 8.60825 2.625 8.125 2.625H7.979V4.48831C7.979 5.22803 7.66678 6.03 6.7178 6.89211C7.11675 7.28524 7.40564 7.68358 7.60566 8.08961C7.89408 8.67506 7.979 9.23862 7.979 9.75921V11.375H8.125C8.60825 11.375 9 11.7668 9 12.25C9 12.7332 8.60825 13.125 8.125 13.125H0.875C0.391751 13.125 0 12.7332 0 12.25C0 11.7668 0.391751 11.375 0.875 11.375H0.962891V9.75726C0.962891 8.80986 1.29291 7.85054 2.27856 6.8915C1.33075 6.04208 0.962891 5.2413 0.962891 4.48636V2.625H0.875C0.391751 2.625 0 2.23325 0 1.75ZM2.21289 2.625H6.729V4.48831C6.729 4.84853 6.58924 5.47829 5.37852 6.37313C5.2214 6.48925 5.12763 6.67217 5.12505 6.86752C5.12248 7.06288 5.21141 7.2482 5.36542 7.36841C5.96537 7.83674 6.29783 8.2634 6.48435 8.64201C6.66927 9.01738 6.729 9.38242 6.729 9.75921V9.96977C6.43462 9.43897 5.93209 8.875 5.38105 8.875C3.89098 8.875 2.68379 9.73361 2.21289 10.5856V9.75726C2.21289 9.07761 2.45056 8.2919 3.63458 7.36764C3.78859 7.24742 3.87752 7.0621 3.87495 6.86674C3.87237 6.67139 3.7786 6.48848 3.62148 6.37235C2.38796 5.46065 2.21289 4.8262 2.21289 4.48636V2.625Z" fill="currentColor"
         />
     </svg>
     <!-- eslint-enable -->
 </template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-facing-decorator'
-
-@Component
-export default class IconTimer extends Vue {
-    @Prop() title!: string
-}
-</script>

package/lib/components/Icons/IconWarning.vue

@@ -1,3 +1,10 @@
+<script setup lang="ts">
+
+const { title } = defineProps<{
+    title: string
+}>()
+</script>
+
 <template>
     <!-- eslint-disable -->
     <svg width="16px" height="16px" viewBox="0 0 16 16" 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 IconWarning extends Vue {
-    @Prop() title!: string
-}
-</script>

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

@@ -73,4 +73,4 @@ export type TIconType =
     | 'readiness'
     | 'concept'
     | 'star'
-    | 'recommendedFilter'
+    | 'recommendedFilter'

package/lib/components/Loaders/SkeletonLoader.vue

@@ -4,11 +4,7 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component } from 'vue-facing-decorator'
-
-@Component
-export default class SkeletonLoader extends Vue {}
+<script setup lang="ts">
 </script>
 
 <style lang="scss" scoped>

package/lib/components/Modal/Modal.vue

@@ -14,7 +14,7 @@
             <IconClose title="close" />
         </div>
         <div
-            v-if="hasHeadSlot"
+            v-if="$slots.head?.()[0]?.children?.length"
             class="uikit-modal__head"
             :class="{
                 'uikit-modal__head--no-border-bottom': removeHeadBorderBottom
@@ -26,34 +26,28 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
 import IconClose from '../Icons/IconClose.vue'
-import { dark } from '../../directives'
-
-@Component({
-    components: {
-        IconClose,
-    },
-    directives: {
-        dark,
-    },
-})
-export default class Modal extends Vue {
-    @Prop({ default: false }) showCloseButton!: boolean
-    @Prop({ default: () => ({}) }) customCloseStyles?: { [key: string]: string }
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: false }) removeHeadBorderBottom!: boolean
-    
-    get hasHeadSlot () {
-        // See https://github.com/vuejs/core/issues/7002
-        return !!(this.$slots.head?.()[0]?.children?.length)
-    }
-
-    @Emit('close')
-    emitClose () {
-        return true
-    }
+import { dark as vDark } from '../../directives'
+
+const {
+    showCloseButton = false,
+    customCloseStyles = {},
+    isDarkMode = false,
+    removeHeadBorderBottom = false,
+} = defineProps<{
+    showCloseButton?: boolean
+    customCloseStyles?: Record<string, string>
+    isDarkMode?: boolean
+    removeHeadBorderBottom?: boolean
+}>()
+
+const emit = defineEmits<{
+    'close': []
+}>()
+
+const emitClose = () => {
+    emit('close')
 }
 </script>
 
@@ -142,4 +136,4 @@ export default class Modal extends Vue {
         }
     }
 }
-</style>
+</style>