Add Sprunje Filter

userfrosting · Oct 13, 2024 · 1481d5e · 1481d5e
1 parent e7d1b2a
commit 1481d5e
Show file tree

Hide file tree

Showing 12 changed files with 2,282 additions and 2,139 deletions.
diff --git a/dist/components-DhKcd0nA.js → dist/components-BqmVBmsV.js b/dist/components-DhKcd0nA.js → dist/components-BqmVBmsV.js
diff --git a/dist/components-CqRikqol.cjs → dist/components-D71L4-1z.cjs b/dist/components-CqRikqol.cjs → dist/components-D71L4-1z.cjs
diff --git a/dist/components.cjs b/dist/components.cjs
@@ -1 +1 @@
-"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./components-CqRikqol.cjs");exports.AlertContainer=a._sfc_main;exports.AppLink=a._sfc_main$1;exports.CardBox=a._sfc_main$3;exports.CardBoxBig=a._sfc_main$4;exports.FooterContent=a.FooterContent;exports.FormForgotPassword=a._sfc_main$8;exports.FormLogin=a._sfc_main$6;exports.FormRegister=a._sfc_main$7;exports.HeaderPage=a._sfc_main$5;exports.InfoBox=a._sfc_main$2;exports.MainContent=a.MainContent;exports.NavBar=a._sfc_main$9;exports.NavBarDropdown=a._sfc_main$10;exports.NavBarDropdownSeparator=a.NavBarDropdownSeparator;exports.NavBarItem=a._sfc_main$11;exports.NavBarLogin=a._sfc_main$12;exports.NavBarUserCard=a._sfc_main$13;exports.NavBarUserCardButton=a._sfc_main$14;exports.PageForgotPassword=a._sfc_main$17;exports.PageLogin=a._sfc_main$15;exports.PageRegister=a._sfc_main$16;exports.PageResendVerification=a._sfc_main$18;exports.SideBar=a.SideBar;exports.SideBarDropdown=a._sfc_main$19;exports.SideBarItem=a._sfc_main$20;exports.SideBarLabel=a._sfc_main$21;exports.SprunjeColumn=a.SprunjeColumn;exports.SprunjeHeader=a._sfc_main$22;exports.SprunjePaginator=a._sfc_main$23;exports.SprunjeTable=a._sfc_main$24;exports.default=a.PinkCupcakeComponents;
+"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./components-D71L4-1z.cjs");exports.AlertContainer=a._sfc_main;exports.AppLink=a._sfc_main$1;exports.CardBox=a._sfc_main$3;exports.CardBoxBig=a._sfc_main$4;exports.FooterContent=a.FooterContent;exports.FormForgotPassword=a._sfc_main$8;exports.FormLogin=a._sfc_main$6;exports.FormRegister=a._sfc_main$7;exports.HeaderPage=a._sfc_main$5;exports.InfoBox=a._sfc_main$2;exports.MainContent=a.MainContent;exports.NavBar=a._sfc_main$9;exports.NavBarDropdown=a._sfc_main$10;exports.NavBarDropdownSeparator=a.NavBarDropdownSeparator;exports.NavBarItem=a._sfc_main$11;exports.NavBarLogin=a._sfc_main$12;exports.NavBarUserCard=a._sfc_main$13;exports.NavBarUserCardButton=a._sfc_main$14;exports.PageForgotPassword=a._sfc_main$17;exports.PageLogin=a._sfc_main$15;exports.PageRegister=a._sfc_main$16;exports.PageResendVerification=a._sfc_main$18;exports.SideBar=a.SideBar;exports.SideBarDropdown=a._sfc_main$19;exports.SideBarItem=a._sfc_main$20;exports.SideBarLabel=a._sfc_main$21;exports.SprunjeColumn=a.SprunjeColumn;exports.SprunjeHeader=a._sfc_main$22;exports.SprunjePaginator=a._sfc_main$23;exports.SprunjeTable=a._sfc_main$24;exports.default=a.PinkCupcakeComponents;
diff --git a/dist/components.js b/dist/components.js
@@ -1,4 +1,4 @@
-import { _ as s, a as e, d as o, e as n, F as t, j as d, h as i, i as B, f as g, b as p, M as S, k as P, l as m, N as u, m as v, n as C, o as N, p as F, s as l, q as w, r as f, t as j, S as x, u as L, v as b, w as A, x as D, y as I, z as R, A as k, P as H } from "./components-DhKcd0nA.js";
+import { _ as s, a as e, d as o, e as n, F as t, j as d, h as i, i as B, f as g, b as p, M as S, k as P, l as m, N as u, m as v, n as C, o as N, p as F, s as l, q as w, r as f, t as j, S as x, u as L, v as b, w as A, x as D, y as I, z as R, A as k, P as H } from "./components-BqmVBmsV.js";
 export {
   s as AlertContainer,
   e as AppLink,

diff --git a/dist/components/Sprunjer/SprunjeFilters.vue.d.ts b/dist/components/Sprunjer/SprunjeFilters.vue.d.ts
@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;
diff --git a/dist/components/Sprunjer/SprunjeSearch.vue.d.ts b/dist/components/Sprunjer/SprunjeSearch.vue.d.ts
@@ -3,10 +3,16 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: StringConstructor;
         required: true;
     };
+    label: {
+        type: StringConstructor;
+    };
 }>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     column: {
         type: StringConstructor;
         required: true;
     };
+    label: {
+        type: StringConstructor;
+    };
 }>> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
diff --git a/dist/components/Sprunjer/SprunjeTable.vue.d.ts b/dist/components/Sprunjer/SprunjeTable.vue.d.ts
@@ -6,6 +6,7 @@ declare function __VLS_template(): {
         body?(_: {
             item: any;
         }): any;
+        filterPanel?(_: {}): any;
         paginator?(_: {}): any;
     };
     refs: {};
@@ -15,6 +16,7 @@ type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
 declare const __VLS_component: import('vue').DefineComponent<{
     dataUrl: string;
     hidePagination?: boolean;
+    hideFilters?: boolean;
     defaultSorts?: {
         [key: string]: string;
     };
@@ -27,6 +29,7 @@ declare const __VLS_component: import('vue').DefineComponent<{
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     dataUrl: string;
     hidePagination?: boolean;
+    hideFilters?: boolean;
     defaultSorts?: {
         [key: string]: string;
     };

diff --git a/dist/plugins.cjs b/dist/plugins.cjs
diff --git a/dist/plugins.js b/dist/plugins.js
@@ -1,4 +1,4 @@
-import { c as is, g as fs, U as ts, P as rs } from "./components-DhKcd0nA.js";
+import { c as is, g as fs, U as ts, P as rs } from "./components-BqmVBmsV.js";
 import { defineComponent as t2, computed as y, watch as zs, h as W3 } from "vue";
 const x3 = () => {
 };

diff --git a/src/components/Sprunjer/SprunjeFilters.vue b/src/components/Sprunjer/SprunjeFilters.vue
@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { Sprunjer } from '@userfrosting/sprinkle-core/sprunjer'
+import { inject, computed } from 'vue'
+
+const sprunjer = inject('sprunjer') as Sprunjer
+const { data, filters } = sprunjer
+
+const filterable = computed(() => {
+    return data.value.filterable
+})
+
+const resetFilters = () => {
+    filters.value = {}
+}
+</script>
+
+<template>
+    <h3 class="uk-heading-divider">Filters</h3>
+    <dl class="uk-description-list" v-for="(column, index) in filterable" :key="index">
+        <dt>{{ column }}</dt>
+        <dd>
+            <input class="uk-input" type="text" :placeholder="column" v-model="filters[column]" />
+        </dd>
+    </dl>
+    <button class="uk-button uk-button-default uk-button-small" @click="resetFilters">
+        <font-awesome-icon icon="xmark" fixed-width /> Clear filters
+    </button>
+</template>
diff --git a/src/components/Sprunjer/SprunjeSearch.vue b/src/components/Sprunjer/SprunjeSearch.vue
@@ -1,11 +1,14 @@
 <script setup lang="ts">
 import type { Sprunjer } from '@userfrosting/sprinkle-core/sprunjer'
-import { inject, ref, watch } from 'vue'
+import { inject, ref, watch, computed } from 'vue'
 
 const props = defineProps({
     column: {
         type: String,
         required: true
+    },
+    label: {
+        type: String
     }
 })
 
@@ -16,14 +19,18 @@ const { filters } = sprunjer
 watch(filterValue, () => {
     filters.value[props.column] = filterValue.value
 })
+
+const searchLabel = computed(() => {
+    return props.label ? 'Search ' + props.label + '...' : 'Search ' + props.column + '...'
+})
 </script>
 
 <template>
     <div class="uk-search uk-search-default" v-if="column">
         <input
             class="uk-search-input uk-form-small"
             type="search"
-            :placeholder="'Search ' + column + '...'"
+            :placeholder="searchLabel"
             aria-label="Search"
             v-model="filterValue" />
         <span class="uk-search-icon-flip" uk-search-icon></span>

diff --git a/src/components/Sprunjer/SprunjeTable.vue b/src/components/Sprunjer/SprunjeTable.vue
@@ -1,12 +1,17 @@
 <script setup lang="ts">
-import { provide } from 'vue'
+import { provide, ref } from 'vue'
 import { useSprunjer } from '@userfrosting/sprinkle-core/sprunjer'
 import SprunjePaginator from './SprunjePaginator.vue'
 import SprunjeSearch from './SprunjeSearch.vue'
+import SprunjeFilters from './SprunjeFilters.vue'
 
+/**
+ * Props
+ */
 const {
     dataUrl,
     hidePagination = false,
+    hideFilters = false,
     defaultSorts = {},
     defaultFilters = {},
     defaultSize = 10,
@@ -15,16 +20,28 @@ const {
 } = defineProps<{
     dataUrl: string
     hidePagination?: boolean
+    hideFilters?: boolean
     defaultSorts?: { [key: string]: string }
     defaultFilters?: { [key: string]: string }
     defaultSize?: number
     defaultPage?: number
     searchColumn?: string
 }>()
 
+/**
+ * Component state
+ */
+const filterPanelOpen = ref(false)
+
+/**
+ * Sprunjer
+ */
 const sprunjer = useSprunjer(() => dataUrl, defaultSorts, defaultFilters, defaultSize, defaultPage)
 const { rows } = sprunjer
 
+/**
+ * Provide sprunjer to children components
+ */
 provide('sprunjer', sprunjer)
 </script>
 
@@ -34,24 +51,36 @@ provide('sprunjer', sprunjer)
             <slot name="actions"></slot>
         </div>
         <div class="uk-text-right">
-            <slot name="filters">
-                <SprunjeSearch v-if="searchColumn" :column="searchColumn" />
-                <!-- <SprunjeFilter /> -->
-            </slot>
+            <slot name="filters"></slot>
+            <SprunjeSearch v-if="searchColumn" :column="searchColumn" />
+            <a
+                class="uk-button uk-button-default uk-button-small"
+                @click="filterPanelOpen = !filterPanelOpen"
+                v-if="!hideFilters">
+                <font-awesome-icon icon="filter" />
+            </a>
+        </div>
+    </div>
+    <div uk-grid class="uk-grid-small uk-grid-divider">
+        <div class="uk-width-expand">
+            <table class="uk-table uk-table-striped uk-table-small">
+                <thead>
+                    <tr>
+                        <slot name="header"></slot>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr v-for="row in rows" :key="row.id">
+                        <slot name="body" :item="row"></slot>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        <div v-if="filterPanelOpen === true" class="uk-width-1-4">
+            <SprunjeFilters />
+            <slot name="filterPanel"></slot>
         </div>
     </div>
-    <table class="uk-table uk-table-striped uk-table-small">
-        <thead>
-            <tr>
-                <slot name="header"></slot>
-            </tr>
-        </thead>
-        <tbody>
-            <tr v-for="row in rows" :key="row.id">
-                <slot name="body" :item="row"></slot>
-            </tr>
-        </tbody>
-    </table>
     <slot v-if="!hidePagination" name="paginator">
         <SprunjePaginator />
     </slot>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./components-CqRikqol.cjs");exports.AlertContainer=a._sfc_main;exports.AppLink=a._sfc_main$1;exports.CardBox=a._sfc_main$3;exports.CardBoxBig=a._sfc_main$4;exports.FooterContent=a.FooterContent;exports.FormForgotPassword=a._sfc_main$8;exports.FormLogin=a._sfc_main$6;exports.FormRegister=a._sfc_main$7;exports.HeaderPage=a._sfc_main$5;exports.InfoBox=a._sfc_main$2;exports.MainContent=a.MainContent;exports.NavBar=a._sfc_main$9;exports.NavBarDropdown=a._sfc_main$10;exports.NavBarDropdownSeparator=a.NavBarDropdownSeparator;exports.NavBarItem=a._sfc_main$11;exports.NavBarLogin=a._sfc_main$12;exports.NavBarUserCard=a._sfc_main$13;exports.NavBarUserCardButton=a._sfc_main$14;exports.PageForgotPassword=a._sfc_main$17;exports.PageLogin=a._sfc_main$15;exports.PageRegister=a._sfc_main$16;exports.PageResendVerification=a._sfc_main$18;exports.SideBar=a.SideBar;exports.SideBarDropdown=a._sfc_main$19;exports.SideBarItem=a._sfc_main$20;exports.SideBarLabel=a._sfc_main$21;exports.SprunjeColumn=a.SprunjeColumn;exports.SprunjeHeader=a._sfc_main$22;exports.SprunjePaginator=a._sfc_main$23;exports.SprunjeTable=a._sfc_main$24;exports.default=a.PinkCupcakeComponents;
		"use strict";Object.defineProperties(exports,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}});const a=require("./components-D71L4-1z.cjs");exports.AlertContainer=a._sfc_main;exports.AppLink=a._sfc_main$1;exports.CardBox=a._sfc_main$3;exports.CardBoxBig=a._sfc_main$4;exports.FooterContent=a.FooterContent;exports.FormForgotPassword=a._sfc_main$8;exports.FormLogin=a._sfc_main$6;exports.FormRegister=a._sfc_main$7;exports.HeaderPage=a._sfc_main$5;exports.InfoBox=a._sfc_main$2;exports.MainContent=a.MainContent;exports.NavBar=a._sfc_main$9;exports.NavBarDropdown=a._sfc_main$10;exports.NavBarDropdownSeparator=a.NavBarDropdownSeparator;exports.NavBarItem=a._sfc_main$11;exports.NavBarLogin=a._sfc_main$12;exports.NavBarUserCard=a._sfc_main$13;exports.NavBarUserCardButton=a._sfc_main$14;exports.PageForgotPassword=a._sfc_main$17;exports.PageLogin=a._sfc_main$15;exports.PageRegister=a._sfc_main$16;exports.PageResendVerification=a._sfc_main$18;exports.SideBar=a.SideBar;exports.SideBarDropdown=a._sfc_main$19;exports.SideBarItem=a._sfc_main$20;exports.SideBarLabel=a._sfc_main$21;exports.SprunjeColumn=a.SprunjeColumn;exports.SprunjeHeader=a._sfc_main$22;exports.SprunjePaginator=a._sfc_main$23;exports.SprunjeTable=a._sfc_main$24;exports.default=a.PinkCupcakeComponents;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
		export default _default;