feat: update tsconfig | add strictNullChecks definition

oruga-ui · Oct 10, 2024 · fcdb59a · fcdb59a
1 parent 0c9a3c7
commit fcdb59a
Show file tree

Hide file tree

Showing 10 changed files with 38 additions and 34 deletions.
diff --git a/packages/oruga/src/components/carousel/Carousel.vue b/packages/oruga/src/components/carousel/Carousel.vue
@@ -248,9 +248,13 @@ const { childItems } = useProviderParent(rootRef, { data: provideData });
 const activeIndex = defineModel<number>({ default: 0 });
 const scrollIndex = ref(props.modelValue);
 
-const resizeObserver = ref<ResizeObserver>();
+let resizeObserver: ResizeObserver | undefined;
 const windowWidth = ref(0);
 
+if (isClient && window.ResizeObserver) {
+    resizeObserver = new window.ResizeObserver(onRefresh);
+}
+
 const refresh_ = ref(0);
 
 /** When v-model is changed switch to the new active item. */
@@ -266,19 +270,19 @@ watch([() => props.itemsToList, () => props.itemsToShow], () => onRefresh());
 
 onMounted(() => {
     if (isClient) {
-        if (window.ResizeObserver) {
-            resizeObserver.value = new window.ResizeObserver(onRefresh);
-            resizeObserver.value.observe(rootRef.value);
-        }
+        if (window.ResizeObserver && resizeObserver)
+            resizeObserver.observe(rootRef.value);
+
         onResized();
         startTimer();
     }
 });
 
 onBeforeUnmount(() => {
     if (isClient) {
-        if (window.ResizeObserver && resizeObserver.value)
-            resizeObserver.value.disconnect();
+        if (window.ResizeObserver && resizeObserver)
+            resizeObserver.disconnect();
+
         dragEnd();
         pauseTimer();
     }

diff --git a/packages/oruga/src/components/notification/NotificationNotice.vue b/packages/oruga/src/components/notification/NotificationNotice.vue
@@ -37,7 +37,7 @@ const props = defineProps({
      */
     container: {
         type: Object as PropType<HTMLElement>,
-        default: document.body,
+        required: true,
     },
     /**
      * Which position the notification will appear.

diff --git a/packages/oruga/src/components/notification/useNotificationProgrammatic.ts b/packages/oruga/src/components/notification/useNotificationProgrammatic.ts
@@ -55,6 +55,7 @@ const useNotificationProgrammatic = {
 
         const componentProps: NotifcationNoticeProps = {
             position: getOption("notification.position", "top-right"),
+            container: document.body,
             ..._options, // pass all props to the internal notification component
         };
 

diff --git a/packages/oruga/src/components/programmatic/useProgrammatic.ts b/packages/oruga/src/components/programmatic/useProgrammatic.ts
@@ -60,14 +60,13 @@ export const useProgrammatic = {
         options = { instances, ...options };
 
         // define the target container - either HTML `body` or by a given query selector
-        let target =
+        const target =
             typeof options.target === "string"
-                ? document.querySelector<HTMLElement>(options.target)
+                ? document.querySelector<HTMLElement>(options.target) ||
+                  document.body
                 : isElement(options?.target)
                   ? options.target
-                  : null;
-
-        if (!target) target = document.body;
+                  : document.body;
 
         // cache container
         let container: HTMLDivElement | null = document.createElement("div");

diff --git a/packages/oruga/src/components/table/Table.vue b/packages/oruga/src/components/table/Table.vue
@@ -1081,7 +1081,7 @@ function isRowFiltered(row: T): boolean {
                 (val) =>
                     re.test(removeDiacriticsFromString(val)) || re.test(val),
             );
-        if (typeof value !== "string") return value;
+        if (typeof value !== "string") return !!value;
         return re.test(removeDiacriticsFromString(value)) || re.test(value);
     });
 }

diff --git a/packages/oruga/src/components/upload/examples/disabled.vue b/packages/oruga/src/components/upload/examples/disabled.vue
@@ -11,12 +11,12 @@
 
         <o-field>
             <o-upload drag-drop disabled>
-                <center>
+                <div style="text-align: center">
                     <p>
                         <o-icon icon="upload" size="is-large" />
                     </p>
                     <p>Drop your files here or click to upload</p>
-                </center>
+                </div>
             </o-upload>
         </o-field>
     </section>

diff --git a/packages/oruga/src/components/upload/examples/drag-drop.vue b/packages/oruga/src/components/upload/examples/drag-drop.vue
@@ -12,12 +12,12 @@ function deleteDropFile(index): void {
     <section>
         <o-field>
             <o-upload v-model="dropFiles" multiple drag-drop>
-                <center>
+                <div style="text-align: center">
                     <p>
                         <o-icon icon="upload" size="is-large" />
                     </p>
                     <p>Drop your files here or click to upload</p>
-                </center>
+                </div>
             </o-upload>
         </o-field>
 

diff --git a/packages/oruga/src/components/upload/examples/variants.vue b/packages/oruga/src/components/upload/examples/variants.vue
@@ -8,49 +8,49 @@ const file = ref<File>();
     <section>
         <o-field label="Primary">
             <o-upload v-model="file" drag-drop variant="primary" expanded>
-                <center>
+                <div style="text-align: center">
                     <o-icon icon="upload" /> Hover to see color variant
-                </center>
+                </div>
             </o-upload>
         </o-field>
 
         <o-field label="Secondary">
             <o-upload v-model="file" drag-drop variant="secondary" expanded>
-                <center>
+                <div style="text-align: center">
                     <o-icon icon="upload" /> Hover to see color variant
-                </center>
+                </div>
             </o-upload>
         </o-field>
 
         <o-field label="Success">
             <o-upload v-model="file" drag-drop variant="success" expanded>
-                <center>
+                <div style="text-align: center">
                     <o-icon icon="upload" /> Hover to see color variant
-                </center>
+                </div>
             </o-upload>
         </o-field>
 
         <o-field label="Info">
             <o-upload v-model="file" drag-drop variant="info" expanded>
-                <center>
+                <div style="text-align: center">
                     <o-icon icon="upload" /> Hover to see color variant
-                </center>
+                </div>
             </o-upload>
         </o-field>
 
         <o-field label="Warning">
             <o-upload v-model="file" drag-drop variant="warning" expanded>
-                <center>
+                <div style="text-align: center">
                     <o-icon icon="upload" /> Hover to see color variant
-                </center>
+                </div>
             </o-upload>
         </o-field>
 
         <o-field label="Danger">
             <o-upload v-model="file" drag-drop variant="danger" expanded>
-                <center>
+                <div style="text-align: center">
                     <o-icon icon="upload" /> Hover to see color variant
-                </center>
+                </div>
             </o-upload>
         </o-field>
 

diff --git a/packages/oruga/src/components/utils/PositionWrapper.vue b/packages/oruga/src/components/utils/PositionWrapper.vue
@@ -159,7 +159,7 @@ function addHandler(): void {
 function removeHandler(): void {
     if (isClient) {
         if (window.ResizeObserver && resizeObserver)
-            resizeObserver?.disconnect();
+            resizeObserver.disconnect();
         window.removeEventListener("resize", updatePositioning);
         document.removeEventListener("scroll", updatePositioning);
         scrollingParent.value = undefined;

diff --git a/packages/oruga/src/composables/useObjectMap.ts b/packages/oruga/src/composables/useObjectMap.ts
@@ -1,4 +1,4 @@
-import { toValue, useId, type MaybeRefOrGetter } from "vue";
+import { toValue, type MaybeRefOrGetter } from "vue";
 
 export type ObjectMap<T> = Array<{
     key: string | number;
@@ -16,7 +16,7 @@ export function useObjectMap<T>(
         key:
             // if no key is given and data is object, create unique row id for each row
             key && value && typeof value === "object"
-                ? (value[key as keyof T] as string) || useId()
-                : useId(),
+                ? (value[key as keyof T] as string) || crypto.randomUUID()
+                : crypto.randomUUID(),
     }));
 }