sprintify-ui 0.0.185 → 0.0.187

package/dist/types/src/components/BaseFileUploader.vue.d.ts

@@ -9,7 +9,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     maxSize?: number | undefined;
     accept?: string | undefined;
     acceptedExtensions?: string[] | undefined;
-    cropper?: boolean | BaseCropperConfig | null | undefined;
+    cropper?: boolean | Record<string, any> | BaseCropperConfig | null | undefined;
 }>, {
     component: string;
     url: undefined;
@@ -31,7 +31,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     maxSize?: number | undefined;
     accept?: string | undefined;
     acceptedExtensions?: string[] | undefined;
-    cropper?: boolean | BaseCropperConfig | null | undefined;
+    cropper?: boolean | Record<string, any> | BaseCropperConfig | null | undefined;
 }>, {
     component: string;
     url: undefined;
@@ -50,7 +50,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<__
     "onUpload:end"?: ((...args: any[]) => any) | undefined;
 }, {
     disabled: boolean;
-    cropper: BaseCropperConfig | boolean | null;
+    cropper: BaseCropperConfig | Record<string, any> | boolean | null;
     loading: boolean;
     accept: string;
     url: string;

package/dist/types/src/composables/breakpoints.d.ts

@@ -1,12 +1,27 @@
-export declare function useBreakpoints(): {
-    greater(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): import("vue").Ref<boolean>;
-    greaterOrEqual: (k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md") => import("vue").Ref<boolean>;
-    smaller(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): import("vue").Ref<boolean>;
-    smallerOrEqual(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): import("vue").Ref<boolean>;
-    between(a: "xs" | "sm" | "lg" | "xl" | "2xl" | "md", b: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): import("vue").Ref<boolean>;
-    isGreater(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): boolean;
-    isGreaterOrEqual(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): boolean;
-    isSmaller(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): boolean;
-    isSmallerOrEqual(k: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): boolean;
-    isInBetween(a: "xs" | "sm" | "lg" | "xl" | "2xl" | "md", b: "xs" | "sm" | "lg" | "xl" | "2xl" | "md"): boolean;
-} & Record<"xs" | "sm" | "lg" | "xl" | "2xl" | "md", import("vue").Ref<boolean>>;
+import type { Ref } from 'vue';
+export * from './breakpoints';
+export type Breakpoints<K extends string = string> = Record<K, number | string>;
+export declare function useBreakpoints<K extends string>(breakpoints?: Breakpoints<K>): {
+    greater(k: K): Ref<boolean>;
+    greaterOrEqual: (k: K) => Ref<boolean>;
+    smaller(k: K): Ref<boolean>;
+    smallerOrEqual(k: K): Ref<boolean>;
+    between(a: K, b: K): Ref<boolean>;
+    isGreater(k: K): boolean;
+    isGreaterOrEqual(k: K): boolean;
+    isSmaller(k: K): boolean;
+    isSmallerOrEqual(k: K): boolean;
+    isInBetween(a: K, b: K): boolean;
+} & Record<K, Ref<boolean>>;
+export type UseBreakpointsReturn<K extends string = string> = {
+    greater: (k: K) => Ref<boolean>;
+    greaterOrEqual: (k: K) => Ref<boolean>;
+    smaller(k: K): Ref<boolean>;
+    smallerOrEqual: (k: K) => Ref<boolean>;
+    between(a: K, b: K): Ref<boolean>;
+    isGreater(k: K): boolean;
+    isGreaterOrEqual(k: K): boolean;
+    isSmaller(k: K): boolean;
+    isSmallerOrEqual(k: K): boolean;
+    isInBetween(a: K, b: K): boolean;
+} & Record<K, Ref<boolean>>;

package/dist/types/src/composables/mediaQuery.d.ts

@@ -0,0 +1,2 @@
+import type { MaybeComputedRef } from '@vueuse/shared';
+export declare function useMediaQuery(query: MaybeComputedRef<string>): import("vue").Ref<boolean>;

package/dist/types/src/index.d.ts

@@ -42,8 +42,8 @@ declare const messages: {
             file_must_be_of_type: string;
             filters: string;
             go_to_page: string;
-            just_now: string;
             invalid_value: string;
+            just_now: string;
             maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
@@ -55,7 +55,8 @@ declare const messages: {
             of: string;
             or: string;
             page: string;
-            pagination_detail: string;
+            pagination_detail_1: string;
+            pagination_detail_2: string;
             postal_code_zip_code: string;
             previous: string;
             previous_month: string;
@@ -125,8 +126,8 @@ declare const messages: {
             file_must_be_of_type: string;
             filters: string;
             go_to_page: string;
-            just_now: string;
             invalid_value: string;
+            just_now: string;
             maximum_x_decimal_places: string;
             min_x_characters: string;
             month: string;
@@ -138,7 +139,8 @@ declare const messages: {
             of: string;
             or: string;
             page: string;
-            pagination_detail: string;
+            pagination_detail_1: string;
+            pagination_detail_2: string;
             postal_code_zip_code: string;
             previous: string;
             previous_month: string;
@@ -225,8 +227,8 @@ declare const config: {
                 file_must_be_of_type: string;
                 filters: string;
                 go_to_page: string;
-                just_now: string;
                 invalid_value: string;
+                just_now: string;
                 maximum_x_decimal_places: string;
                 min_x_characters: string;
                 month: string;
@@ -238,7 +240,8 @@ declare const config: {
                 of: string;
                 or: string;
                 page: string;
-                pagination_detail: string;
+                pagination_detail_1: string;
+                pagination_detail_2: string;
                 postal_code_zip_code: string;
                 previous: string;
                 previous_month: string;
@@ -308,8 +311,8 @@ declare const config: {
                 file_must_be_of_type: string;
                 filters: string;
                 go_to_page: string;
-                just_now: string;
                 invalid_value: string;
+                just_now: string;
                 maximum_x_decimal_places: string;
                 min_x_characters: string;
                 month: string;
@@ -321,7 +324,8 @@ declare const config: {
                 of: string;
                 or: string;
                 page: string;
-                pagination_detail: string;
+                pagination_detail_1: string;
+                pagination_detail_2: string;
                 postal_code_zip_code: string;
                 previous: string;
                 previous_month: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.0.185",
+  "version": "0.0.187",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",
@@ -64,7 +64,7 @@
     "@vitejs/plugin-vue": "^4.0.0",
     "@vue/eslint-config-typescript": "^11.0.2",
     "@vueup/vue-quill": "^1.1.0",
-    "@vueuse/core": "^9.12.0",
+    "@vueuse/core": "^9.13.0",
     "autoprefixer": "^10.4.13",
     "axios": "^0.26.1",
     "babel-loader": "^8.3.0",

package/src/components/BaseDataIterator.vue

@@ -99,22 +99,16 @@
         <!-- Pagination -->
 
         <div v-if="paginationMetadata" class="mt-4">
-          <p class="text-center text-sm text-slate-400 sm:text-right">
-            {{
-              (paginationMetadata.current_page - 1) *
-                paginationMetadata.per_page +
-              1
-            }}
-            -
-            {{
-              $t('sui.pagination_detail', {
-                page: Math.min(
-                  paginationMetadata.current_page * paginationMetadata.per_page,
-                  paginationMetadata.total
-                ),
-                total: paginationMetadata.total,
-              })
-            }}
+          <p
+            class="text-center text-sm text-slate-500 sm:text-right [&>b]:font-medium [&>b]:text-slate-600"
+          >
+            {{ $t('sui.pagination_detail_1') }}
+
+            <b>{{ paginationStart }}</b> - <b>{{ paginationEnd }}</b>
+
+            {{ $t('sui.pagination_detail_2') }}
+
+            <b>{{ paginationMetadata.total }}</b>
           </p>
         </div>
 
@@ -674,6 +668,29 @@ function updateSearchInput() {
   searchQuery.value = searchKeywords.value;
 }
 
+const paginationStart = computed(() => {
+  if (paginationMetadata.value == null) {
+    return '';
+  }
+
+  return (
+    paginationMetadata.value.per_page *
+      (paginationMetadata.value.current_page - 1) +
+    1
+  );
+});
+
+const paginationEnd = computed(() => {
+  if (paginationMetadata.value == null) {
+    return '';
+  }
+
+  return Math.min(
+    paginationMetadata.value.current_page * paginationMetadata.value.per_page,
+    paginationMetadata.value.total
+  );
+});
+
 /*
 |--------------------------------------------------------------------------
 | Created

package/src/components/BaseFileUploader.vue

@@ -53,7 +53,7 @@ const props = withDefaults(
     maxSize?: number;
     accept?: string;
     acceptedExtensions?: string[];
-    cropper?: BaseCropperConfig | boolean | null;
+    cropper?: BaseCropperConfig | Record<string, any> | boolean | null;
   }>(),
   {
     component: 'BaseFilePicker',
@@ -86,15 +86,19 @@ const componentInternal = computed(() => {
 });
 
 const pickerProps = computed(() => {
-  return {
+  const pickerProps = {
     disabled: props.disabled || props.loading || uploading.value,
     buttonClass: props.buttonClass,
     maxSize: props.maxSize,
     accept: props.component == 'BaseFilePickerCrop' ? undefined : props.accept,
     acceptedExtensions: props.acceptedExtensions,
-    cropper:
-      props.component == 'BaseFilePickerCrop' ? props.cropper : undefined,
-  };
+  } as Record<string, any>;
+
+  if (props.component == 'BaseFilePickerCrop') {
+    pickerProps.cropper = props.cropper;
+  }
+
+  return pickerProps;
 });
 
 const uploading = ref(false);

package/src/composables/breakpoints.ts

@@ -1,6 +1,94 @@
-import { useBreakpoints as useBase } from '@vueuse/core';
-import breakpoints from '../../config/breakpoints.json';
+import type { Ref } from 'vue';
+import { increaseWithUnit } from '@vueuse/shared';
+import { useMediaQuery } from './mediaQuery';
+import defaultBreakpoints from '../../config/breakpoints.json';
+export * from './breakpoints';
 
-export function useBreakpoints() {
-  return useBase(breakpoints);
+export type Breakpoints<K extends string = string> = Record<K, number | string>;
+
+export function useBreakpoints<K extends string>(breakpoints?: Breakpoints<K>) {
+  const breakpointsInternal = computed(() => {
+    if (breakpoints) return breakpoints;
+    return defaultBreakpoints as Breakpoints<K>;
+  });
+
+  function getValue(k: K, delta?: number) {
+    let v = breakpointsInternal.value[k];
+
+    if (delta != null) v = increaseWithUnit(v, delta);
+
+    if (typeof v === 'number') v = `${v}px`;
+
+    return v;
+  }
+
+  function match(query: string): boolean {
+    if (!window) return false;
+    return window.matchMedia(query).matches;
+  }
+
+  const greaterOrEqual = (k: K) => {
+    return useMediaQuery(`(min-width: ${getValue(k)})`);
+  };
+
+  const shortcutMethods = Object.keys(breakpointsInternal.value).reduce(
+    (shortcuts, k) => {
+      Object.defineProperty(shortcuts, k, {
+        get: () => greaterOrEqual(k as K),
+        enumerable: true,
+        configurable: true,
+      });
+      return shortcuts;
+    },
+    {} as Record<K, Ref<boolean>>
+  );
+
+  return {
+    greater(k: K) {
+      return useMediaQuery(`(min-width: ${getValue(k, 0.1)})`);
+    },
+    greaterOrEqual,
+    smaller(k: K) {
+      return useMediaQuery(`(max-width: ${getValue(k, -0.1)})`);
+    },
+    smallerOrEqual(k: K) {
+      return useMediaQuery(`(max-width: ${getValue(k)})`);
+    },
+    between(a: K, b: K) {
+      return useMediaQuery(
+        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
+      );
+    },
+    isGreater(k: K) {
+      return match(`(min-width: ${getValue(k, 0.1)})`);
+    },
+    isGreaterOrEqual(k: K) {
+      return match(`(min-width: ${getValue(k)})`);
+    },
+    isSmaller(k: K) {
+      return match(`(max-width: ${getValue(k, -0.1)})`);
+    },
+    isSmallerOrEqual(k: K) {
+      return match(`(max-width: ${getValue(k)})`);
+    },
+    isInBetween(a: K, b: K) {
+      return match(
+        `(min-width: ${getValue(a)}) and (max-width: ${getValue(b, -0.1)})`
+      );
+    },
+    ...shortcutMethods,
+  };
 }
+
+export type UseBreakpointsReturn<K extends string = string> = {
+  greater: (k: K) => Ref<boolean>;
+  greaterOrEqual: (k: K) => Ref<boolean>;
+  smaller(k: K): Ref<boolean>;
+  smallerOrEqual: (k: K) => Ref<boolean>;
+  between(a: K, b: K): Ref<boolean>;
+  isGreater(k: K): boolean;
+  isGreaterOrEqual(k: K): boolean;
+  isSmaller(k: K): boolean;
+  isSmallerOrEqual(k: K): boolean;
+  isInBetween(a: K, b: K): boolean;
+} & Record<K, Ref<boolean>>;

package/src/composables/mediaQuery.ts

@@ -0,0 +1,42 @@
+import { ref, watchEffect } from 'vue';
+import type { MaybeComputedRef } from '@vueuse/shared';
+import { resolveRef, tryOnScopeDispose } from '@vueuse/shared';
+
+export function useMediaQuery(query: MaybeComputedRef<string>) {
+  const isSupported = () =>
+    window && 'matchMedia' in window && typeof window.matchMedia === 'function';
+
+  let mediaQuery: MediaQueryList | undefined;
+  const matches = ref(false);
+
+  const cleanup = () => {
+    if (!mediaQuery) return;
+    if ('removeEventListener' in mediaQuery)
+      // eslint-disable-next-line @typescript-eslint/no-use-before-define
+      mediaQuery.removeEventListener('change', update);
+    // @ts-expect-error deprecated API
+    // eslint-disable-next-line @typescript-eslint/no-use-before-define
+    else mediaQuery.removeListener(update);
+  };
+
+  const update = () => {
+    if (!isSupported()) return;
+
+    cleanup();
+
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    mediaQuery = window.matchMedia(resolveRef(query).value) as MediaQueryList;
+    matches.value = mediaQuery.matches;
+
+    if ('addEventListener' in mediaQuery)
+      mediaQuery.addEventListener('change', update);
+    // @ts-expect-error deprecated API
+    else mediaQuery.addListener(update);
+  };
+
+  watchEffect(update);
+
+  tryOnScopeDispose(() => cleanup());
+
+  return matches;
+}

package/src/lang/en.json

@@ -33,8 +33,8 @@
     "file_must_be_of_type": "The file must be of type",
     "filters": "Filters",
     "go_to_page": "Go to ",
-    "just_now": "Just now",
     "invalid_value": "Invalid value",
+    "just_now": "Just now",
     "maximum_x_decimal_places": "Maximum 1 decimal place|Maximum {count} decimal places",
     "min_x_characters": "{x} characters minimum",
     "month": "Month",
@@ -46,7 +46,8 @@
     "of": "of",
     "or": "or",
     "page": "Page",
-    "pagination_detail": "{page} records of {total}",
+    "pagination_detail_1": "Viewing",
+    "pagination_detail_2": "of",
     "postal_code_zip_code": "Postal Code / Zip Code",
     "previous": "Previous",
     "previous_month": "Previous month",

package/src/lang/fr.json

@@ -33,8 +33,8 @@
     "file_must_be_of_type": "Le fichier doit être de type",
     "filters": "Filtres",
     "go_to_page": "Page",
-    "just_now": "à l’instant",
     "invalid_value": "Valeur invalide",
+    "just_now": "à l’instant",
     "maximum_x_decimal_places": "Maximum 1 décimale|Maximum {count} décimales",
     "min_x_characters": "{x} caractères minimum",
     "month": "Mois",
@@ -46,7 +46,8 @@
     "of": "de",
     "or": "ou",
     "page": "Page",
-    "pagination_detail": "{page} items de {total}",
+    "pagination_detail_1": "Affichage de",
+    "pagination_detail_2": "de",
     "postal_code_zip_code": "Code postal",
     "previous": "Précédent",
     "previous_month": "Mois précédent",