@pocketprep/ui-kit 3.8.4 → 3.9.0

package/lib/components/Charts/highcharts-wrap.ts

@@ -0,0 +1,81 @@
+import Highcharts from 'highcharts'
+import Accessibility from 'highcharts/modules/accessibility'
+
+type TCustomSeries = Highcharts.Series & {
+    options: {
+        borderRadiusTopLeft: number
+        borderRadiusTopRight: number
+        borderRadiusBottomRight: number
+        borderRadiusBottomLeft: number
+    }
+}
+
+type TShapeArgs = {
+    d?: Highcharts.SVGPathArray
+    width?: number
+    height?: number
+    x?: number
+    y?: number
+}
+
+type TCustomPoint = Highcharts.Point & {
+    shapeArgs: TShapeArgs
+    shapeType: string
+    dlBox: TShapeArgs
+}
+
+type TCustomHighcharts = typeof Highcharts & {
+    seriesTypes: {
+        column: {
+            prototype: Record<string, unknown>
+        }
+    }
+}
+
+Accessibility(Highcharts);
+(function (H) {
+    H.wrap((H.seriesTypes.column.prototype), 'translate', function (this: TCustomSeries, proceed: () => void) {
+        const options = this.options
+
+        proceed.call(this);
+
+        (this.points as TCustomPoint[]).forEach(function (point) {
+            if (options.borderRadiusTopLeft || options.borderRadiusTopRight) {
+                const w = Number(point.shapeArgs.width)
+                const h = Number(point.shapeArgs.height)
+                const x = Number(point.shapeArgs.x)
+                const y = Number(point.shapeArgs.y)
+                const maxR = Math.min(w, h) / 2
+
+                let radiusTopLeft = H.relativeLength(options.borderRadiusTopLeft || 0, w)
+                let radiusTopRight = H.relativeLength(options.borderRadiusTopRight || 0, w)
+
+
+                radiusTopLeft = radiusTopLeft > maxR ? maxR : radiusTopLeft
+                radiusTopRight = radiusTopRight > maxR ? maxR : radiusTopRight
+
+                point.dlBox = point.shapeArgs
+
+                point.shapeType = 'path'
+                /* eslint-disable @stylistic/array-element-newline */
+                const d = [
+                    'M', x + radiusTopLeft, y,
+                    'L', x + w - radiusTopRight, y,
+                    'C', x + w - (radiusTopRight / 2), y, x + w, y + (radiusTopRight / 2), x + w, y + radiusTopRight,
+                    'L', x + w, y + h,
+                    'C', x + w, y + h, x + w, y + h, x + w, y + h,
+                    'L', x, y + h,
+                    'C', x, y + h, x, y + h, x, y + h,
+                    'L', x, y + radiusTopLeft,
+                    'C', x, y + (radiusTopLeft / 2), x + (radiusTopLeft / 2), y, x + radiusTopLeft, y,
+                    'Z',
+                ] as unknown as Highcharts.SVGPathArray
+                /* eslint-enable */
+                point.shapeArgs = {
+                    d,
+                }
+            }
+
+        })
+    })
+}(Highcharts as TCustomHighcharts))

package/lib/components/Controls/SegmentControl.vue

@@ -23,36 +23,38 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
+<script setup lang="ts">
+import { onBeforeMount, ref } from 'vue'
 
-/**
- * @see [Designs for Controls](https://marvelapp.com/adf8ab3/screen/69484212)  
- */
-@Component
-export default class SegmentControl extends Vue {
-    @Prop({ default: 'Option 1' }) option1!: string
-    @Prop({ default: 'Option 2' }) option2!: string
-    @Prop({ default: 1 }) defaultOption!: number
+const {
+    option1 = 'Option 1',
+    option2 = 'Option 2',
+    defaultOption = 1,
+} = defineProps<{
+    option1?: string
+    option2?: string
+    defaultOption?: number
+}>()
 
-    activeOption = 1
+const emit = defineEmits<{
+    'change': [option: number]
+}>()
 
-    @Emit('change')
-    toggleOption () {
-        this.activeOption = this.activeOption === 2 ? 1 : 2
-        return this.activeOption
-    }
+const activeOption = ref(1)
 
-    @Emit('change')
-    optionClicked (option: number) {
-        this.activeOption = option
-        return option
-    }
+const toggleOption = () => {
+    activeOption.value = activeOption.value === 2 ? 1 : 2
+    emit('change', activeOption.value)
+}
 
-    created () {
-        this.activeOption = this.defaultOption
-    }
+const optionClicked = (option: number) => {
+    activeOption.value = option
+    emit('change', option)
 }
+
+onBeforeMount(() => {
+    activeOption.value = defaultOption
+})
 </script>
 
 <style lang="scss">

package/lib/components/Controls/Slider.vue

@@ -39,61 +39,65 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop, Watch, Emit } from 'vue-facing-decorator'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
+<script setup lang="ts">
+import { computed, onMounted, ref, watch } from 'vue'
+import { dark as vDark } from '../../directives'
+
+const {
+    min = 0,
+    max,
+    step = 1,
+    modelValue,
+    size = 'large',
+    isDarkMode = false,
+    inputId = null,
+    disabled = false,
+} = defineProps<{
+    min?: number
+    max: number
+    step?: number
+    modelValue: number
+    size?: 'small' | 'large'
+    isDarkMode?: boolean
+    inputId?: string | null
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [sliderValue: number]
+}>()
+
+const sliderValue = ref(0)
+
+const filledWidth = computed(() => {
+    return ((modelValue - min) / (max - min)) * 100
+})
+
+onMounted(() => {
+    sliderValue.value = modelValue
+    sliderValueChanged()
 })
-export default class Slider extends Vue {
-    @Prop({ default: 0 }) min!: number
-    @Prop() max!: number
-    @Prop({ default: 1 }) step!: number
-    @Prop() modelValue!: number
-    @Prop({ default: 'large' }) size!: 'small' | 'large'
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop({ default: null }) inputId!: string | null
-    @Prop({ default: false }) disabled!: boolean
-
-    sliderValue = 0
-
-    get filledWidth () {
-        return ((this.modelValue - this.min) / (this.max - this.min)) * 100
-    }
 
-    mounted () {
-        this.sliderValue = this.modelValue
-        this.sliderValueChanged()
+const sliderValueChanged = () => {
+    if (sliderValue.value % step !== 0) {
+        sliderValue.value = Math.round(sliderValue.value / step) * step || 0
     }
 
-    @Watch('modelValue')
-    valueChanged () {
-        this.sliderValue = this.modelValue
+    if (sliderValue.value > max) {
+        sliderValue.value = max
+    } else if (sliderValue.value < min) {
+        sliderValue.value = min
     }
 
-    @Watch('sliderValue')
-    sliderValueChanged () {
-        if (this.sliderValue % this.step !== 0) {
-            this.sliderValue = Math.round(this.sliderValue / this.step) * this.step || 0
-        }
+    emit('update:modelValue', sliderValue.value)
+}
 
-        if (this.sliderValue > this.max) {
-            this.sliderValue = this.max
-        } else if (this.sliderValue < this.min) {
-            this.sliderValue = this.min
-        }
+watch(() => modelValue, () => {
+    sliderValue.value = modelValue
+})
 
-        this.emitUpdateModelValue(this.sliderValue)
-    }
+watch(sliderValue, sliderValueChanged)
 
-    @Emit('update:modelValue')
-    emitUpdateModelValue (sliderValue: number) {
-        return sliderValue
-    }
-}
 </script>
 <style lang="scss">
 @use '@/styles/colors' as *;
@@ -420,4 +424,4 @@ export default class Slider extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/Controls/ToggleSwitch.vue

@@ -2,10 +2,10 @@
     <div
         v-dark="isDarkMode"
         class="uikit-toggle-switch"
-        :class="{ 
-            'uikit-toggle-switch--enabled': modelValue, 
+        :class="{
+            'uikit-toggle-switch--enabled': modelValue,
             'uikit-toggle-switch--disabled': disabled,
-            [`uikit-toggle-switch--${size}`]: true 
+            [`uikit-toggle-switch--${size}`]: true
         }"
         tabindex="0"
         role="checkbox"
@@ -16,9 +16,9 @@
         @click="!disabled && toggleOption()"
     >
         <div
-            v-dark="isDarkMode" 
-            class="uikit-toggle-switch__handle" 
-            :class="{ 
+            v-dark="isDarkMode"
+            class="uikit-toggle-switch__handle"
+            :class="{
                 [`uikit-toggle-switch__handle--${size}`]: true,
                 [`uikit-toggle-switch__handle--${size}--enabled`]: modelValue,
                 'uikit-toggle-switch__handle--enabled': modelValue,
@@ -27,25 +27,27 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Component, Vue, Prop, Emit } from 'vue-facing-decorator'
-import { dark } from '../../directives'
-
-@Component({
-    directives: {
-        dark,
-    },
-})
-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')
-    toggleOption () {
-        return !this.modelValue
-    }
+<script setup lang="ts">
+import { dark as vDark } from '../../directives'
+
+const {
+    modelValue,
+    isDarkMode = false,
+    disabled = false,
+    size = 'small',
+} = defineProps<{
+    modelValue: boolean
+    isDarkMode?: boolean
+    disabled?: boolean
+    size?: 'small' | 'large'
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [val: boolean]
+}>()
+
+const toggleOption = () => {
+    emit('update:modelValue', !modelValue)
 }
 </script>
 
@@ -128,9 +130,9 @@ export default class ToggleSwitch extends Vue {
 
     &__handle {
         background-color: $white;
-        border: 0.5px solid rgba(0, 0, 0, 0.04);
+        border: 0.5px solid rgb(0, 0, 0, 0.04);
         border-radius: 100px;
-        box-shadow: 0 2px 6px 0 rgba(0, 0, 0, 0.1);
+        box-shadow: 0 2px 6px 0 rgb(0, 0, 0, 0.1);
         width: 16px;
         height: 16px;
         position: absolute;
@@ -141,16 +143,16 @@ export default class ToggleSwitch extends Vue {
 
         &--dark {
             background: $charcoal;
-            box-shadow: 0 3px 8px 0 rgba(0, 0, 0, 0.1);
+            box-shadow: 0 3px 8px 0 rgb(0, 0, 0, 0.1);
         }
 
         &--enabled {
-            box-shadow: 0 2px 1px 0 rgba(0, 0, 0, 0.1), 0 2px 6px 0 rgba(0, 0, 0, 0.15);
+            box-shadow: 0 2px 1px 0 rgb(0, 0, 0, 0.1), 0 2px 6px 0 rgb(0, 0, 0, 0.15);
             left: 20px;
             transition: left 0.1s linear;
 
             &--dark {
-                box-shadow: 0 3px 1px 0 rgba(0, 0, 0, 0.1), 0 3px 8px 0 rgba(0, 0, 0, 0.15);
+                box-shadow: 0 3px 1px 0 rgb(0, 0, 0, 0.1), 0 3px 8px 0 rgb(0, 0, 0, 0.15);
             }
         }
 
@@ -165,4 +167,4 @@ export default class ToggleSwitch extends Vue {
         }
     }
 }
-</style>
+</style>

package/lib/components/EmptyStates/EmptyState.vue

@@ -21,7 +21,7 @@
                             class="uikit-empty-state__icon"
                             :type="iconType"
                             :style="{ color: iconColor }"
-                            :secondary-color="brandColors.bananaBread"
+                            :secondary-color="BrandColors.bananaBread"
                         />
                     </slot>
                 </slot>
@@ -40,88 +40,84 @@
     </div>
 </template>
 
-<script lang="ts">
-import { Vue, Component, Prop } from 'vue-facing-decorator'
+<script setup lang="ts">
 import Icon from '../Icons/Icon.vue'
 import BrandColors from '../../pocketprep-export.module.scss'
 import Blob from '../Blobs/Blob.vue'
-import { dark } from '../../directives'
-
-@Component({
-    name: 'EmptyState',
-    components: {
-        Icon,
-        Blob,
-    },
-    directives: {
-        dark,
-    },
+import { dark as vDark } from '../../directives'
+import { computed } from 'vue'
+
+const {
+    message = null,
+    title = null,
+    backgroundColor = null,
+    state = null,
+    isDarkMode = false,
+    customBlobColor = null,
+    customIconColor = null,
+} = defineProps<{
+    message?: string
+    title?: string
+    backgroundColor?: 'white' | null
+    state?: 'answered' | 'incorrect' | 'correct' | 'flagged' | 'assignment' | null
+    isDarkMode?: boolean
+    customBlobColor?: string | null
+    customIconColor?: string | null
+}>()
+
+const iconType = computed(() => {
+    if (state === 'incorrect') {
+        return 'incorrect'
+    } else if (state === 'correct') {
+        return 'correct'
+    } else if (state === 'flagged') {
+        return 'flagFeedback'
+    } else if (state === 'assignment') {
+        return 'assignment'
+    }
+    // Default to activity icon
+    return 'activity'
 })
-export default class EmptyState extends Vue {
-    @Prop() message!: string
-    @Prop() title!: string
-    @Prop() backgroundColor!: 'white'
-    @Prop() state!: 'answered' | 'incorrect' | 'correct' | 'flagged' | 'assignment'
-    @Prop({ default: false }) isDarkMode!: boolean
-    @Prop() customBlobColor?: string
-    @Prop() customIconColor?: string
-
-    brandColors = BrandColors
-
-    get iconType () {
-        if (this.state === 'incorrect') {
-            return 'incorrect'
-        } else if (this.state === 'correct') {
-            return 'correct'
-        } else if (this.state === 'flagged') {
-            return 'flagFeedback'
-        } else if (this.state === 'assignment') {
-            return 'assignment'
-        }
-        // Default to activity icon
-        return 'activity'
+
+const blobColor = computed(() => {
+    if (customBlobColor) {
+        return customBlobColor
+    }
+    if (isDarkMode) {
+        return BrandColors.moonlitOcean
     }
+    if (backgroundColor && backgroundColor === 'white') {
+        return BrandColors.white
+    } else if (state === 'incorrect') {
+        return BrandColors.barelyRed
+    } else if (state === 'correct') {
+        return BrandColors.barelyGreen
+    }
+    return BrandColors.manilla
+})
 
-    get blobColor () {
-        if (this.customBlobColor) {
-            return this.customBlobColor
-        }
-        if (this.isDarkMode) {
-            return this.brandColors.moonlitOcean
+const iconColor = computed(() => {
+    if (state === 'incorrect') {
+        if (isDarkMode) {
+            return BrandColors.rosa
         }
-        if (this.backgroundColor && this.backgroundColor === 'white') {
-            return this.brandColors.white
-        } else if (this.state === 'incorrect') {
-            return this.brandColors.barelyRed
-        } else if (this.state === 'correct') {
-            return this.brandColors.barelyGreen
+        return BrandColors.pepper
+    } else if (state === 'correct') {
+        if (isDarkMode) {
+            return BrandColors.jungleGreen
         }
-        return this.brandColors.manilla
+        return BrandColors.cadaverous
     }
 
-    get iconColor () {
-        if (this.state === 'incorrect') {
-            if (this.isDarkMode) {
-                return this.brandColors.rosa
-            }
-            return this.brandColors.pepper
-        } else if (this.state === 'correct') {
-            if (this.isDarkMode) {
-                return this.brandColors.jungleGreen
-            }
-            return this.brandColors.cadaverous
-        }
-
-        if (this.customIconColor) {
-            return this.customIconColor
-        }
-        // Default to caramel
-        if (this.isDarkMode) {
-            return this.brandColors.butterscotch
-        }
-        return this.brandColors.caramel
+    if (customIconColor) {
+        return customIconColor
     }
-}
+    // Default to caramel
+    if (isDarkMode) {
+        return BrandColors.butterscotch
+    }
+    return BrandColors.caramel
+})
 </script>
 
 <style lang="scss">
@@ -198,4 +194,4 @@ export default class EmptyState extends Vue {
         }
     }
 }
-</style>
+</style>