@pocketprep/ui-kit 3.4.47 → 3.4.49

package/lib/components/Forms/CheckboxOption.vue

@@ -3,8 +3,11 @@
         v-if="checkboxId"
         v-dark="isDarkMode"
         class="uikit-checkbox-option"
-        :class="{ 'uikit-checkbox-option--selected': modelValue }"
-        tabindex="0"
+        :class="{
+            'uikit-checkbox-option--selected': modelValue,
+            'uikit-checkbox-option--disabled': disabled,
+        }"
+        :tabindex="disabled ? -1 : 0"
         :aria-labelledby="checkboxId"
         role="checkbox"
         :aria-checked="modelValue === true ? true : modelValue === null ? 'mixed' : false"
@@ -15,7 +18,7 @@
         <Checkbox
             :modelValue="modelValue"
             tabindex="-1"
-            :disabled="false"
+            :disabled="disabled"
             class="uikit-checkbox-option__checkbox"
             :is-dark-mode="isDarkMode"
             :has-label="true"
@@ -43,6 +46,7 @@ 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
 
@@ -52,7 +56,11 @@ export default class CheckboxOption extends Vue {
 
     @Emit('update:modelValue')
     emitUpdateModelValue (val: boolean) {
-        return val
+        if (this.disabled) {
+            return this.modelValue
+        } else {
+            return val
+        }
     }
 }
 </script>
@@ -75,7 +83,7 @@ export default class CheckboxOption extends Vue {
     position: relative;
     z-index: 1;
 
-    &:hover {
+    &:not(&--disabled):hover {
         label {
             color: $slate-03;
         }
@@ -98,7 +106,7 @@ export default class CheckboxOption extends Vue {
     &--dark {
         color: rgba($white, 0.72);
 
-        &:hover {
+        &:not(&--disabled):hover {
             label {
                 color: rgba($white, 0.72);
             }
@@ -160,6 +168,18 @@ export default class CheckboxOption extends Vue {
         }
     }
 
+    &--disabled {
+        color: $slate;
+
+        &--dark {
+            color: rgba($white, 0.7);
+
+            label {
+                color: rgba($white, 0.7) !important;
+            }
+        }
+    }
+
     &__label {
         margin-left: 12px;
         width: calc(100% - 27px);

package/lib/components/Tables/Table.vue

@@ -238,7 +238,7 @@
 </template>
 
 <script lang="ts">
-import { Component, Emit, Prop, Vue } from 'vue-facing-decorator'
+import { Component, Emit, Prop, Vue, Watch } from 'vue-facing-decorator'
 import Icon from '../Icons/Icon.vue'
 import OverflowTooltip from '../Tooltips/OverflowTooltip.vue'
 import { dark } from '../../directives'
@@ -334,6 +334,14 @@ export default class Table extends Vue {
         this.emitSort()
     }
 
+    @Watch('defaultSort')
+    defaultSortChanged () {
+        if (this.defaultSort) {
+            this.currentSort = JSON.parse(JSON.stringify(this.defaultSort))
+            this.emitSort()
+        }
+    }
+
     @Emit('sort')
     emitSort (): ITableSortSettings {
         return this.currentSort

package/package.json

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