sprintify-ui 0.7.9 → 0.7.10

package/dist/types/components/BaseDataIterator.vue.d.ts

@@ -76,6 +76,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Filters position
+     */
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }, {
     fetch: () => void;
     fetchWithLoading: () => void;
@@ -171,6 +178,13 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    /**
+     * Filters position
+     */
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }>> & {
     onClick?: ((...args: any[]) => any) | undefined;
     onDelete?: ((...args: any[]) => any) | undefined;
@@ -190,6 +204,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     layout: "default" | "compact";
     sections: DataIteratorSection[];
     scrollTopOnFetch: boolean;
+    filtersPosition: "section" | "top";
 }, {}>, Partial<Record<string, (_: {
     query: {
         [x: string]: any;
@@ -210,6 +225,16 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     updateQuery: (newQuery: DataTableQuery) => void;
     updateQueryValue: (key: string, value: any) => void;
+}) => any>> & Partial<Record<string, (_: {
+    query: {
+        [x: string]: any;
+        page?: number | undefined;
+        sort?: string | undefined;
+        search?: string | undefined;
+        filter?: Record<string, any> | undefined;
+    };
+    updateQuery: (newQuery: DataTableQuery) => void;
+    updateQueryValue: (key: string, value: any) => void;
 }) => any>> & {
     default?(_: {
         items: Collection;

package/dist/types/components/BaseDataTable.vue.d.ts

@@ -186,6 +186,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }, {
     fetch: typeof fetch;
     fetchWithoutLoading: typeof fetchWithoutLoading;
@@ -377,6 +381,10 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
         default: boolean;
         type: BooleanConstructor;
     };
+    filtersPosition: {
+        default: string;
+        type: PropType<"section" | "top">;
+    };
 }>> & {
     onDelete?: ((...args: any[]) => any) | undefined;
     "onUpdate:checked-rows"?: ((...args: any[]) => any) | undefined;
@@ -392,6 +400,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     layout: "default" | "compact";
     sections: DataIteratorSection[];
     scrollTopOnFetch: boolean;
+    filtersPosition: "section" | "top";
     showUrl: ((row: CollectionItem) => RouteLocationRaw) | undefined;
     editButton: boolean;
     editUrl: ((row: CollectionItem) => RouteLocationRaw) | undefined;

package/dist/types/components/BaseMenu.vue.d.ts

@@ -7,7 +7,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     placement: {
         default: string;
-        type: PropType<"bottom-end" | "bottom-start" | "bottom" | "top" | "top-start" | "top-end">;
+        type: PropType<"top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end">;
     };
     size: {
         default: string;
@@ -32,7 +32,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     };
     placement: {
         default: string;
-        type: PropType<"bottom-end" | "bottom-start" | "bottom" | "top" | "top-start" | "top-end">;
+        type: PropType<"top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end">;
     };
     size: {
         default: string;
@@ -54,7 +54,7 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
     size: "xs" | "sm" | "md";
     twButton: string | unknown[] | Record<string, any>;
     items: ActionItem[];
-    placement: "bottom-end" | "bottom-start" | "bottom" | "top" | "top-start" | "top-end";
+    placement: "top" | "bottom-end" | "bottom-start" | "bottom" | "top-start" | "top-end";
     width: number;
     twMenu: string | string[];
 }, {}>, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "sprintify-ui",
-  "version": "0.7.9",
+  "version": "0.7.10",
   "scripts": {
     "build": "rimraf dist && vue-tsc && vite build",
     "build-fast": "rimraf dist && vite build",

package/src/components/BaseDataIterator.stories.js

@@ -12,7 +12,11 @@ export default {
     size: {
       control: { type: 'select' },
       options: sizes,
-    }
+    },
+    filtersPosition: {
+      control: { type: 'select' },
+      options: ['top', 'section'],
+    },
   },
   args: {
     url: 'https://effettandem.com/api/content/articles',

package/src/components/BaseDataIterator.vue

@@ -68,6 +68,24 @@
           </BaseMenu>
         </div>
 
+        <div
+          v-if="filtersPosition == 'top' && hasFilters"
+          :class="{
+            'mb-2.5': sizeInternal.size.value == 'sm',
+            'mb-4': sizeInternal.size.value == 'md',
+          }"
+        >
+          <BaseDataIteratorSectionBox :section="sectionFilter">
+            <slot
+              :name="sectionFilter.name"
+              :query="query"
+              :update-query="updateFilterQuery"
+              :update-query-value="updateFilterQueryValue"
+            />
+          </BaseDataIteratorSectionBox>
+        </div>
+
+
         <slot
           :items="items"
           :loading="loading"
@@ -286,6 +304,14 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+
+  /**
+   * Filters position
+   */
+  filtersPosition: {
+    default: 'section',
+    type: String as PropType<'section' | 'top'>,
+  }
 });
 
 const http = config.http;
@@ -745,18 +771,22 @@ onMounted(() => {
 
 const sectionModalActive = ref<null | number>(null);
 
+const sectionFilter = computed(() => {
+  return {
+    name: 'filters',
+    title: t('sui.filters'),
+    closeText: t('sui.apply_filters'),
+    icon: 'heroicons:funnel',
+    opened: true,
+  };
+});
+
 const sectionsInternal = computed<DataIteratorSection[]>(() => {
   const sections = props.sections ?? [];
 
-  if (hasFilters.value) {
+  if (hasFilters.value && props.filtersPosition == 'section') {
     return [
-      {
-        name: 'filters',
-        title: t('sui.filters'),
-        closeText: t('sui.apply_filters'),
-        icon: 'heroicons:funnel',
-        opened: true,
-      },
+      sectionFilter.value,
       ...sections,
     ];
   }

package/src/components/BaseDataTable.stories.js

@@ -20,7 +20,11 @@ export default {
     size: {
       control: { type: 'select' },
       options: ['sm', 'md'],
-    }
+    },
+    filtersPosition: {
+      control: { type: 'select' },
+      options: ['top', 'section'],
+    },
   },
   args: {
     url: 'https://effettandem.com/api/content/articles',

package/src/components/BaseDataTable.vue

@@ -11,6 +11,7 @@
     :size="sizeInternal.size.value"
     :sections="sectionsInternal"
     :scroll-top-on-fetch="maxHeight ? false : scrollTopOnFetch"
+    :filters-position="filtersPosition"
     @fetch="onFetch"
     @will-scroll-top="onWillScrollTop"
   >
@@ -487,6 +488,11 @@ const props = defineProps({
     default: true,
     type: Boolean,
   },
+
+  filtersPosition: {
+    default: 'section',
+    type: String as PropType<'top' | 'section'>,
+  },
 });
 
 const sizeInternal = useInputSize(props.size);