feat: 0.22.0 (#578)

## Fix:
* fix(table): hide action column if no rows to show
* fix(table): fix width of empty state's cell
* fix(table): display actions when there are rows just filtered
* fix(textarea): display label when given as a slot
* fix(file-uploader): fixed overflow issue
* fix(file-uploader): add back missing upload asap prop
* fix(table): improved column type
    * Before the row was being extended therefore overwritten
      Here it is unionised in the argument

## Chore:
* chore: increment version
* chore(deps-dev): updated dependencies
* chore: increment version
* chore: ignore build package from git

## Feature:
* feat(modal): add confirm mechanism
* feat(file-uploader): added slot for customising the displayed files

## Performance
* perf(panel): removed actions section when unused

## Style:
* style(radio): made width consistent with other inputs
* style(file-uploader): removed duplicate class
* style(file-uploader): improved refresh animation
* style(file-uploader): remove unused class

## Testing:
* test: updated snapshots
* test(file-uploader): update snapshot

## Documentation:
* docs(file-uploader): fixed demo

.gitignore

@@ -6,6 +6,7 @@ node_modules
 
 # generated content
 dist
+karnama-vueish-*
 
 jest.config.js
 jest.config.js.map

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.21.0",
+    "version": "0.22.0",
     "files": [
         "dist",
         "types"

src/components/file-uploader/Demo.vue

@@ -9,22 +9,45 @@
         <div class="grid grid-cols-2 grid-rows-2 gap-2" style="height: calc(100vh - 200px)">
             <UIFileUploader :error="error"
                             :upload="upload"
-                            class="border-brand-400 col-span-1"
+                            class="col-span-1"
                             @validation-error="logError" />
             <div />
             <UIFileUploader :error="error"
                             :upload="upload"
-                            class="border-brand-400 col-span-2"
+                            class="col-span-2"
                             @validation-error="logError">
                 <template #default="{ uploadIcon }">
                     <p class="text-pink-600" v-html="uploadIcon" />
                     <p class="text-lg">
+                        <small class="text-color-muted">Customised with slots</small>
+                        <br>
                         Drop files here to upload them
                     </p>
                     <UIButton theme="pink" class="mt-2">
                         Browse
                     </UIButton>
                 </template>
+                <template #files="slotProps">
+                    <template v-if="slotProps.files.length <= 1">
+                        <UIFile v-for="(file, index) in slotProps.files"
+                                :key="index"
+                                :file="file"
+                                class="py-2"
+                                :upload="upload"
+                                @removed="slotProps.removeFile" />
+                    </template>
+                    <UIRadioGroup v-else name="defaultUpload">
+                        <div v-for="(file, index) in slotProps.files"
+                             :key="index"
+                             class="flex items-center justify-between">
+                            <UIRadio :value="file.name" />
+                            <UIFile :file="file"
+                                    class="py-2"
+                                    :upload="upload"
+                                    @removed="slotProps.removeFile" />
+                        </div>
+                    </UIRadioGroup>
+                </template>
             </UIFileUploader>
         </div>
     </div>

src/components/file-uploader/UIFile.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex items-center justify-between dark:text-white">
+    <div class="flex items-center justify-between dark:text-white w-full px-2" style="min-width: 210px">
         <div class="flex items-center flex-row overflow-hidden">
             <UISpinnerLoader :determinate="!isLoading" :diameter="50" :stroke="2">
                 <UIAvatar :src="src" class="avatar text-xs" :content="extension" />
@@ -17,7 +17,7 @@
                         @click="$emit('removed', file)"
                         v-html="clearIcon" />
                 <button v-else-if="failedToUpload"
-                        class="transition hover:rotate-180 !duration-200"
+                        class="transition-transform hover:-rotate-180 duration-300"
                         @click="uploadFile"
                         v-html="retryIcon" />
                 <span v-else class="text-green-600 dark:text-green-500" v-html="checkIcon" />

src/components/file-uploader/UIFileUploader.vue

@@ -6,9 +6,10 @@
                  error
              }"
              aria-label="File Upload"
-             class="rounded-lg drop-zone border-2 border-dashed transition-colors flex flex-wrap items-stretch
+             class="rounded-lg drop-zone border-2 border-dashed transition-colors grid items-stretch
                     dark:text-white relative border-current h-full"
              tabindex="0"
+             style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));"
              v-bind="omit($attrs, 'class', 'style')"
              @dragover.prevent="isDraggedOver = true"
              @keydown.enter="openFileBrowser"
@@ -22,6 +23,7 @@
                    @change.prevent="addFiles">
 
             <div class="grow flex flex-col items-center justify-center p-2 text-center cursor-pointer"
+                 style="min-width: 50%;"
                  @click="openFileBrowser">
                 <slot :upload-icon="uploadIcon">
                     <p class="mb-4 text-brand-600" v-html="uploadIcon" />
@@ -36,17 +38,20 @@
                 </slot>
             </div>
             <div v-show="files.length"
-                 class="w-full sm:w-1/2 flex flex-col py-6 px-2
+                 class="w-full flex flex-col py-6 overflow-y-auto pl-6 pr-4
                         justify-between bg-gray-200 dark:bg-gray-600 items-center"
                  @keydown.enter.stop>
-                <div class="max-h-64 pl-6 mr-2 pr-4 file-list w-full divide-y">
-                    <UIFile v-for="(file, index) in files"
-                            :key="index"
-                            :file="file"
-                            class="py-2"
-                            :upload="upload"
-                            :upload-on-mounted="uploadAsap"
-                            @removed="removeFile" />
+                <div class="file-list w-full divide-y">
+                    <!-- eslint-disable-next-line vue/attribute-hyphenation-->
+                    <slot name="files" :files="files" :removeFile="removeFile">
+                        <UIFile v-for="(file, index) in files"
+                                :key="index"
+                                :file="file"
+                                class="py-2"
+                                :upload="upload"
+                                :upload-on-mounted="uploadAsap"
+                                @removed="removeFile" />
+                    </slot>
                 </div>
                 <UIButton v-if="!uploadAsap"
                           theme="brand"
@@ -82,7 +87,6 @@ import UIExpandTransition from 'components/transitions/UIExpandTransition.vue';
 import { error, positiveOptionalNumber } from '@/shared-props';
 import { omit } from 'lodash-es';
 
-// todo - UIFile may make the uploader overflow if the side menu is open when using files with long titles
 export default defineComponent({
     name: 'UIFileUploader',
 
@@ -170,15 +174,15 @@ export default defineComponent({
             }
 
             if (typeof props.maxSize === 'number') {
-                const tooBigFiles = filteredList.filter(file => file.size > props.maxSize);
+                const tooBigFiles = filteredList.filter(file => file.size > props.maxSize!);
 
                 if (filteredList.length && tooBigFiles.length) {
                     ctx.emit('validationError', {
                         message: 'File size exceeds the specified allowed size.',
                         files: tooBigFiles
                     } as FileError);
 
-                    filteredList = filteredList.filter(file => file.size <= props.maxSize);
+                    filteredList = filteredList.filter(file => file.size <= props.maxSize!);
                 }
             }
 
@@ -260,8 +264,4 @@ export default defineComponent({
 .dark .error.drop-zone {
     border-color: theme('colors.red.600') !important;
 }
-
-.drop-zone {
-    overflow: clip;
-}
 </style>

src/components/file-uploader/__snapshots__/UIFile.test.ts.snap

@@ -2,7 +2,8 @@
 
 exports[`UIFile should display correctly 1`] = `
 <div
-  class="flex items-center justify-between dark:text-white"
+  class="flex items-center justify-between dark:text-white w-full px-2"
+  style="min-width: 210px;"
 >
   <div
     class="flex items-center flex-row overflow-hidden"

src/components/file-uploader/__snapshots__/UIFileUploader.test.ts.snap

@@ -6,7 +6,8 @@ exports[`UIFileUploader should display correctly 1`] = `
 >
   <div
     aria-label="File Upload"
-    class="rounded-lg drop-zone border-2 border-dashed transition-colors flex flex-wrap items-stretch dark:text-white relative border-current h-full"
+    class="rounded-lg drop-zone border-2 border-dashed transition-colors grid items-stretch dark:text-white relative border-current h-full"
+    style="grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));"
     tabindex="0"
   >
     <input
@@ -17,6 +18,7 @@ exports[`UIFileUploader should display correctly 1`] = `
     />
     <div
       class="grow flex flex-col items-center justify-center p-2 text-center cursor-pointer"
+      style="min-width: 50%;"
     >
       
       <p
@@ -50,12 +52,15 @@ exports[`UIFileUploader should display correctly 1`] = `
       
     </div>
     <div
-      class="w-full sm:w-1/2 flex flex-col py-6 px-2 justify-between bg-gray-200 dark:bg-gray-600 items-center"
+      class="w-full flex flex-col py-6 px-2 overflow-y-auto pl-6 pr-4 justify-between items-center bg-gray-200 dark:bg-gray-600"
       style="display: none;"
     >
       <div
-        class="max-h-64 pl-6 mr-2 pr-4 file-list w-full divide-y"
+        class="file-list w-full divide-y"
       >
+        <!-- eslint-disable-next-line vue/attribute-hyphenation-->
+        
+        
         
         
       </div>

src/components/modal/Demo.vue

@@ -1,4 +1,9 @@
 <template>
+    <div class="flex justify-evenly w-full mb-4">
+        <UICheckbox v-model="loading" name="loading" label="Loading" />
+        <UICheckbox v-model="blockingLoader" name="loading" label="Use blocking loader" />
+    </div>
+
     <UIModal ref="modal" :loading="loading" :blocking-loader="blockingLoader">
         <template #header>
             <h2 class="font-bold text-lg">
@@ -31,15 +36,21 @@
             </div>
         </template>
     </UIModal>
-    <UIButton @click="$refs.modal.open()">
-        Open Modal
-    </UIButton>
-    <UICheckbox v-model="loading" name="loading" label="Loading" />
-    <UICheckbox v-model="blockingLoader" name="loading" label="Use blocking loader" />
+    <UIModal ref="confirmModal" body="Are you sure you want to delete?" header="Confirm Delete." />
+
+    <div class="flex justify-evenly w-full">
+        <UIButton @click="$refs.modal.open()">
+            Open Modal
+        </UIButton>
+        <UIButton theme="red" outline @click="getConfirm">
+            Delete
+        </UIButton>
+    </div>
 </template>
 
 <script lang="ts">
 import { defineComponent, ref } from 'vue';
+import type { UIModal } from 'types';
 
 export default defineComponent({
     name: 'ModalDemo',
@@ -51,12 +62,19 @@ export default defineComponent({
         const paragraphs = ref<string[]>([paragraph, paragraph, paragraph]);
         const loading = ref(false);
         const blockingLoader = ref(false);
+        const confirmModal = ref<UIModal>();
+        const getConfirm = async () => {
+            const response = await confirmModal.value!.confirm();
+            alert('response was ' + String(response));
+        };
 
         return {
             paragraph,
             paragraphs,
             loading,
-            blockingLoader
+            blockingLoader,
+            confirmModal,
+            getConfirm
         };
     }
 });

src/components/modal/UIModal.vue

@@ -125,13 +125,14 @@ export default defineComponent({
 
     emits: ['cancel', 'accept'],
 
-    expose: ['open', 'close', 'isOpen'],
+    expose: ['open', 'close', 'isOpen', 'confirm'],
 
     setup(props, ctx) {
         const clearIcon = getIcon('clear');
 
         const isOpen = ref(false);
         const isVisible = ref(false);
+        let confirmPromiseResolve: ((value: boolean) => void) | null = null;
 
         const open = async (): Promise<void> => {
             isOpen.value = true;
@@ -142,7 +143,7 @@ export default defineComponent({
             }, 100));
         };
         const close = async (event: 'accept' | 'cancel' = 'cancel'): Promise<void> => {
-            // filter out events if user doesn't define the argument.
+            // Ensure we have only expected event names.
             event = ['accept', 'cancel'].includes(event) ? event : 'cancel';
 
             // Callback to close the modal.
@@ -152,23 +153,36 @@ export default defineComponent({
 
                 return new Promise(resolve => setTimeout(() => {
                     isOpen.value = false;
+
+                    if (confirmPromiseResolve) {
+                        confirmPromiseResolve(event === 'accept');
+                        confirmPromiseResolve = null;
+                    }
+
                     resolve();
                 }, 100));
             };
 
-            if (typeof props.closeCallback === 'function') {
+            if (props.closeCallback) {
                 return props.closeCallback(closeModal, event === 'accept');
             }
 
             return closeModal();
         };
+        const confirm = async (): Promise<boolean> => {
+            await open();
+            return new Promise(resolve => {
+                confirmPromiseResolve = resolve;
+            });
+        };
 
         return {
             clearIcon,
             isOpen,
             isVisible,
             open,
-            close
+            close,
+            confirm
         };
     }
 });

src/components/panel/UIPanel.vue

@@ -21,7 +21,7 @@
                 </slot>
             </h1>
 
-            <div v-if="open">
+            <div v-if="open && $slots.actions">
                 <slot name="actions" />
             </div>
         </header>

src/components/panel/__snapshots__/UIPanel.test.ts.snap

@@ -19,10 +19,7 @@ exports[`UIPanel should render correctly 1`] = `
       header text
       
     </h1>
-    <div>
-      
-      
-    </div>
+    <!--v-if-->
   </header>
   <transition-stub>
     

src/components/radio/UIRadioGroup.vue

@@ -11,7 +11,7 @@
         </UIExpandTransition>
 
         <div ref="slot"
-             class="slot flex"
+             class="slot flex w-full"
              role="radiogroup"
              :class="{
                  'space-x-6': horizontal,

src/components/radio/__snapshots__/UIRadio.test.ts.snap

@@ -16,7 +16,7 @@ exports[`UIRadioGroup should display correctly 1`] = `
     
   </transition-stub>
   <div
-    class="slot flex flex-col space-y-4"
+    class="slot flex w-full flex-col space-y-4"
     role="radiogroup"
   >
     

src/components/table/Demo.vue

@@ -97,7 +97,7 @@ export default defineComponent({
             { header: 'Protein (g)', rowProperty: 'protein' },
             { header: 'Iron (%)', rowProperty: 'iron', suffix: '%', sortable: true }
         ]);
-        const rows = markRaw<Row & Dessert[]>([
+        const rows = markRaw<(Row & Dessert)[]>([
             {
                 name: 'Frozen Yogurt',
                 calories: 159,
@@ -204,7 +204,6 @@ export default defineComponent({
             loading.value = false;
         };
 
-
         return {
             headers,
             rows,