karnama · fullstackfool · Mar 8, 2021 · Feb 15, 2021 · Feb 16, 2021 · Feb 16, 2021
diff --git a/README.md b/README.md
@@ -1,2 +1,5 @@
 # vueish
 Vue UI Library
+
+Install:
+ - add `style="position: relative"` to the body tag
diff --git a/index.html b/index.html
@@ -7,7 +7,7 @@
   <title>Vite App</title>
 </head>
 <body>
-<div id="app" class="h-full">
+<div id="app" class="h-full relative">
 </div>
 <script type="module" src="/src/demo.ts"></script>
 </body>

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -32,7 +32,7 @@
         "@vitejs/plugin-vue": "^1.0.4",
         "@vue/compiler-sfc": "^3.0.5",
         "@vue/eslint-config-typescript": "^7.0.0",
-        "@vue/test-utils": "^2.0.0-beta.14",
+        "@vue/test-utils": "^2.0.0-rc.2",
         "@vuedx/typecheck": "^0.6.3",
         "@vuedx/typescript-plugin-vue": "^0.6.3",
         "autoprefixer": "^10.2.3",
@@ -56,5 +56,8 @@
         "vue-loader": "^16.1.2",
         "vue-router": "^4.0.3",
         "vue-template-compiler": "^2.6.12"
+    },
+    "dependencies": {
+        "vue3-click-away": "^1.1.0"
     }
 }
diff --git a/src/components/panel/UIPanel.vue b/src/components/panel/UIPanel.vue
@@ -1,6 +1,7 @@
 <template>
     <section :id="id"
              class="ui-panel rounded shadow-md bg-default relative transition-all"
+             :aria-expanded="open"
              :class="{ 'hover:shadow-lg': !open }">
         <UIFadeTransition>
             <UILinearLoader v-if="loading" class="absolute rounded-t" />

diff --git a/src/components/radio/UIRadio.test.ts b/src/components/radio/UIRadio.test.ts
@@ -3,6 +3,7 @@ import type { DOMWrapper } from '@vue/test-utils';
 import UIRadio from './UIRadio.vue';
 import UIRadioGroup from './UIRadioGroup.vue';
 import { disableConsoleWarn, enableConsoleWarn } from '@helpers/test';
+import { h } from 'vue';
 
 describe('UIRadio', () => {
     it('should bind attributes to the input', () => {
@@ -192,16 +193,18 @@ describe('UIRadioGroup', () => {
             }
         });
 
+        const radioGroup = wrapper.findComponent(UIRadioGroup);
         const input = wrapper.find('input[type="radio"]');
 
         await input.trigger('click');
-        expect(wrapper.emitted()).toHaveProperty('update:modelValue');
-        expect(wrapper.emitted()['update:modelValue'][0]).toStrictEqual(['foo']);
+        expect(radioGroup.emitted('update:modelValue')).not.toBeUndefined();
+        expect(radioGroup.emitted('update:modelValue')![0]).toStrictEqual(['foo']);
     });
 
     it('should throw an error if there are missing UIRadio components', () => {
         disableConsoleWarn();
-        expect(() => mount(UIRadioGroup)).toThrow('UIRadioGroup requires at least 2 UIRadio components present');
+        expect(() => mount(UIRadioGroup))
+            .toThrow('UIRadioGroup requires at least 2 UIRadio components in the default slot.');
         enableConsoleWarn();
     });
 });
diff --git a/src/components/radio/UIRadioGroup.vue b/src/components/radio/UIRadioGroup.vue
@@ -39,6 +39,7 @@ export default defineComponent({
     setup(props, ctx) {
         const slot = ref<HTMLDivElement>();
         const watchStopHandlers: ReturnType<typeof watch>[] = [];
+
         const updateInputs = () => {
             watchStopHandlers.forEach(stop => stop());
             watchStopHandlers.length = 0;
@@ -48,7 +49,7 @@ export default defineComponent({
 
             // Validate they exist
             if (!inputs || inputs.length < 2) {
-                throw Error('UIRadioGroup requires at least 2 UIRadio components present.');
+                throw Error('UIRadioGroup requires at least 2 UIRadio components in the default slot.');
             }
 
             const setChecked = (input: HTMLInputElement) => input.checked = props.modelValue === input.value;

diff --git a/src/components/select/Demo.vue b/src/components/select/Demo.vue
@@ -0,0 +1,57 @@
+<template>
+    <UISelect v-model="selected"
+              :options="options"
+              placeholder="Please select..." />
+
+    <UISelect v-model="multiSelected"
+              multi
+              class="my-12"
+              :options="options"
+              placeholder="Please select..." />
+
+    <UISelect v-model="multiSelected"
+              multi
+              disabled
+              :options="options"
+              placeholder="Please select..." />
+</template>
+
+<script lang="ts">
+import { defineComponent, ref } from 'vue';
+import UISelect from '@components/select/UISelect.vue';
+
+const options = [
+    {
+        id: 1,
+        name: 'Bruce Banner'
+    },
+    {
+        id: 2,
+        name: 'Bruce Wayne'
+    },
+    {
+        id: 3,
+        name: 'Bruce Lee'
+    },
+    {
+        id: 4,
+        name: 'Brucie Bonus'
+    }
+];
+
+export default defineComponent({
+    // eslint-disable-next-line vue/no-reserved-component-names
+    name: 'Select',
+    components: { UISelect },
+    setup() {
+        const selected = ref(null);
+        const multiSelected = ref(null);
+
+        return {
+            selected,
+            multiSelected,
+            options
+        };
+    }
+});
+</script>