feat(file-uploader): improve sizing (#573)

nandi95 · web-flow · commit db7f43567f52 · 2023-01-31T13:09:35.000Z
* feat(file-uploader): allow height sizing from outside of component

* chore: updated non breaking changes

* chore: increment version

* feat(file-uploader): fix style binding

* chore: ignore setup test error

* chore: update breaking changes

* chore: fix lint issues
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@karnama/vueish",
-    "version": "0.20.0",
+    "version": "0.21.0",
     "files": [
         "dist",
         "types"
@@ -46,14 +46,14 @@
         "@types/requestidlecallback": "^0.3.1",
         "@typescript-eslint/eslint-plugin": "^5.4.0",
         "@typescript-eslint/parser": "^5.4.0",
-        "@vitejs/plugin-vue": "^3.0.0",
+        "@vitejs/plugin-vue": "^4.0.0",
         "@vue/compiler-sfc": "^3.2.11",
         "@vue/eslint-config-typescript": "^11.0.0",
         "@vue/test-utils": "2.0.0-rc.16",
         "@vue/vue3-jest": "^29.0.0",
         "autoprefixer": "^10.4.0",
         "babel-jest": "^29.0.2",
-        "babel-loader": "^8.2.2",
+        "babel-loader": "^9.1.2",
         "commitlint": "^17.0.2",
         "eslint": "^8.23.1",
         "eslint-plugin-import": "^2.22.1",
@@ -63,8 +63,8 @@
         "husky": "^8.0.1",
         "jest": "^29.0.2",
         "jest-environment-jsdom": "^29.0.2",
-        "jest-junit": "^14.0.0",
-        "jest-serializer-vue": "^2.0.2",
+        "jest-junit": "^15.0.0",
+        "jest-serializer-vue": "^3.1.0",
         "lint-staged": "^13.0.1",
         "lodash-es": "^4.17.20",
         "minimist": "^1.2.5",
@@ -74,7 +74,7 @@
         "ts-jest": "^29.0.1",
         "ts-node": "^10.0.0",
         "typescript": "^4.3.4",
-        "vite": "^3.0.0",
+        "vite": "^4.0.4",
         "vue": "^3.2.25",
         "vue-docgen-api": "^4.52.0",
         "vue-router": "^4.0.6",
diff --git a/src/DemoBoard.vue b/src/DemoBoard.vue
@@ -70,7 +70,7 @@
 <script lang="ts">
 import { computed, defineComponent, getCurrentInstance, ref, watch } from 'vue';
 import LocalCache from '@/helpers/cache/LocalCache';
-import type { Router, RouteRecord } from 'vue-router';
+import type { RouteRecord } from 'vue-router';
 import { getIcon } from '@/helpers';
 import { getVersion } from '@/main';
 
@@ -86,7 +86,7 @@ export default defineComponent({
 
         const darkMode = ref(cache.get<'light' | 'dark'>('theme', 'light') === 'dark');
         const routeMap = computed(() => {
-            const routes = (instance.appContext.app.config.globalProperties.$router as Router).getRoutes();
+            const routes = instance.appContext.app.config.globalProperties.$router .getRoutes();
             const map: { Directives?: RouteRecord[]; Components?: RouteRecord[] } = {};
 
             routes.forEach(route => {
diff --git a/src/components/file-uploader/Demo.vue b/src/components/file-uploader/Demo.vue
@@ -6,25 +6,27 @@
             </UIButton>
         </div>
 
-        <UIFileUploader :error="error"
-                        :upload="upload"
-                        class="border-brand-400"
-                        @validation-error="logError" />
-
-        <UIFileUploader :error="error"
-                        :upload="upload"
-                        class="border-brand-400"
-                        @validation-error="logError">
-            <template #default="{ uploadIcon }">
-                <p class="text-pink-600" v-html="uploadIcon" />
-                <p class="text-lg">
-                    Drop files here to upload them
-                </p>
-                <UIButton theme="pink" class="mt-2">
-                    Browse
-                </UIButton>
-            </template>
-        </UIFileUploader>
+        <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"
+                            @validation-error="logError" />
+            <div />
+            <UIFileUploader :error="error"
+                            :upload="upload"
+                            class="border-brand-400 col-span-2"
+                            @validation-error="logError">
+                <template #default="{ uploadIcon }">
+                    <p class="text-pink-600" v-html="uploadIcon" />
+                    <p class="text-lg">
+                        Drop files here to upload them
+                    </p>
+                    <UIButton theme="pink" class="mt-2">
+                        Browse
+                    </UIButton>
+                </template>
+            </UIFileUploader>
+        </div>
     </div>
 </template>
 
diff --git a/src/components/file-uploader/UIFileUploader.vue b/src/components/file-uploader/UIFileUploader.vue
@@ -1,15 +1,15 @@
 <template>
-    <div>
+    <div class="h-full" :class="$attrs.class" :style="$attrs.style">
         <div :class="{
                  'active': isDraggedOver && !isLoading,
                  'pointer-events-none': isLoading,
                  error
              }"
              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"
+                    dark:text-white relative border-current h-full"
              tabindex="0"
-             v-bind="$attrs"
+             v-bind="omit($attrs, 'class', 'style')"
              @dragover.prevent="isDraggedOver = true"
              @keydown.enter="openFileBrowser"
              @dragleave="isDraggedOver = false"
@@ -21,7 +21,7 @@
                    :accept="acceptedMimes.join(',')"
                    @change.prevent="addFiles">
 
-            <div class="grow flex flex-col items-center justify-center py-24 px-2 text-center cursor-pointer"
+            <div class="grow flex flex-col items-center justify-center p-2 text-center cursor-pointer"
                  @click="openFileBrowser">
                 <slot :upload-icon="uploadIcon">
                     <p class="mb-4 text-brand-600" v-html="uploadIcon" />
@@ -80,6 +80,7 @@ import type { FileError } from 'types';
 import UIFadeTransition from 'components/transitions/UIFadeTransition.vue';
 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({
@@ -234,7 +235,8 @@ export default defineComponent({
             addFiles,
             removeFile,
             openFileBrowser,
-            uploadFiles
+            uploadFiles,
+            omit
         };
     }
 });
diff --git a/src/components/file-uploader/__snapshots__/UIFileUploader.test.ts.snap b/src/components/file-uploader/__snapshots__/UIFileUploader.test.ts.snap
@@ -1,10 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`UIFileUploader should display correctly 1`] = `
-<div>
+<div
+  class="h-full"
+>
   <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"
+    class="rounded-lg drop-zone border-2 border-dashed transition-colors flex flex-wrap items-stretch dark:text-white relative border-current h-full"
     tabindex="0"
   >
     <input
@@ -14,7 +16,7 @@ exports[`UIFileUploader should display correctly 1`] = `
       type="file"
     />
     <div
-      class="grow flex flex-col items-center justify-center py-24 px-2 text-center cursor-pointer"
+      class="grow flex flex-col items-center justify-center p-2 text-center cursor-pointer"
     >
       
       <p
diff --git a/src/directives/click-away/index.ts b/src/directives/click-away/index.ts
@@ -27,7 +27,7 @@ export const createClickAwayListener = (el: ClickAwayElement, binding: Directive
                 event.preventDefault();
             }
 
-            if ((!el || !el.contains(event.target as Node)) && nextTick && cb && typeof cb === 'function') {
+            if (!el?.contains(event.target as Node) && nextTick && cb && typeof cb === 'function') {
                 return cb.call(event);
             }
         }
diff --git a/src/setupTests.ts b/src/setupTests.ts
@@ -4,6 +4,7 @@ import defaultSettings from '@/defaultSettings';
 import type { ComponentPublicInstance } from 'vue';
 
 beforeAll(() => {
+    // @ts-expect-error - shim doesn't have vueish, added as user doesn't need to know
     config.global.config.globalProperties = {
         // eslint-disable-next-line @typescript-eslint/naming-convention
         Vueish: defaultSettings

Original file line number	Diff line number	Diff line change
`@@ -27,7 +27,7 @@ export const createClickAwayListener = (el: ClickAwayElement, binding: Directive`
`27`	`27`	`event.preventDefault();`
`28`	`28`	`}`
`29`	`29`
`30`		`- if ((!el \|\| !el.contains(event.target as Node)) && nextTick && cb && typeof cb === 'function') {`
	`30`	`+ if (!el?.contains(event.target as Node) && nextTick && cb && typeof cb === 'function') {`
`31`	`31`	`return cb.call(event);`
`32`	`32`	`}`
`33`	`33`	`}`