@ulu/frontend-vue 0.1.1-beta.16 → 0.1.1-beta.17

package/lib/components/systems/facets/UluFacetsFilterAccordions.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="facets-filters">
+    <UluAccordion
+      v-for="group in facets"
+      :key="group.uid"
+      :modifiers="accordionModifiers"
+      :startOpen="group.open"
+    >
+      <template #trigger="{ isOpen }">
+        <slot name="groupTrigger" :group="group" :isOpen="isOpen">
+          {{ group.name }}
+        </slot>
+      </template>
+      <template #default>
+        <UluFacetsList
+          :children="group.children.slice(0, maxVisible)"
+          :groupUid="group.uid"
+          :groupName="group.name"
+          :type="group.multiple ? 'checkbox' : 'radio'"
+          :compact="compact"
+          :model-value="selectedUids(group)"
+          @facet-change="emit('facet-change', $event)"
+        />
+        <UluAccordion
+          v-if="group.children.length > maxVisible"
+          class="facets-filters__more-facets"
+          :class="classes.moreFacets"
+          :modifiers="accordionModifiers"
+        >
+          <template #trigger="{ isOpen }">
+            {{ isOpen ? "View Less" : "Show More" }}
+          </template>
+          <template #default>
+            <UluFacetsList
+              :children="group.children.slice(maxVisible)"
+              :groupUid="group.uid"
+              :groupName="group.name"
+              :type="group.multiple ? 'checkbox' : 'radio'"
+              :compact="compact"
+              :model-value="selectedUids(group)"
+              @facet-change="emit('facet-change', $event)"
+            />
+          </template>
+        </UluAccordion>
+      </template>
+    </UluAccordion>
+  </div>
+</template>
+
+<script setup>
+  import UluFacetsList from "./UluFacetsList.vue";
+  import UluAccordion from "../../collapsible/UluAccordion.vue";
+
+  defineProps({
+    /**
+     * An object of classes to apply to the component.
+     */
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    /**
+     * The maximum number of facets to show before showing the "More" button.
+     */
+    maxVisible: {
+      type: Number,
+      default: 5
+    },
+    /**
+     * An array of facet groups to display.
+     */
+    facets: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Whether to use compact modifier on selectable menu
+     */
+    compact: Boolean,
+    /**
+     * Class modifiers for accordion (ie. 'transparent', 'secondary', etc)
+     */
+    accordionModifiers: [String, Array]
+  });
+
+  const emit = defineEmits(['facet-change']);
+
+  const selectedUids = (group) => {
+    if (group.multiple) {
+      return group.children.filter(c => c.selected).map(c => c.uid);
+    }
+    return group.children.find(c => c.selected)?.uid || '';
+  };
+</script>

package/lib/components/systems/facets/UluFacetsFilterLists.vue

@@ -31,9 +31,6 @@
           v-if="group.children.length > maxVisible"
           class="facets-filters__more-facets"
           :class="classes.moreFacets"
-          :clickOutsideCloses="false"
-          :closeOnEscape="false"
-          :transitionHeight="true"
         >
           <template #trigger="{ isOpen }">
             {{ isOpen ? "View Less" : "Show More" }}

package/lib/components/systems/index.js

@@ -1,6 +1,7 @@
 export { useFacets } from './facets/useFacets.js';
 export { default as UluFacetsActiveFilters } from './facets/UluFacetsActiveFilters.vue';
 export { default as UluFacetsFilterLists } from './facets/UluFacetsFilterLists.vue';
+export { default as UluFacetsFilterAccordions } from './facets/UluFacetsFilterAccordions.vue';
 export { default as UluFacetsFilterPopovers } from './facets/UluFacetsFilterPopovers.vue';
 export { default as UluFacetsFilterSelects } from './facets/UluFacetsFilterSelects.vue';
 export { default as UluFacetsHeaderLayout } from './facets/UluFacetsHeaderLayout.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.16",
+  "version": "0.1.1-beta.17",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [

package/types/components/systems/facets/UluFacetsFilterAccordions.vue.d.ts

@@ -0,0 +1,29 @@
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & (new () => {
+    $slots: S;
+});
+declare const __VLS_component: import("vue").DefineComponent<{}, {
+    $emit: typeof emit;
+    $props: Partial<typeof __VLS_props>;
+    classes: Record<string, any>;
+    compact: boolean;
+    maxVisible: number;
+    facets: unknown[];
+    accordionModifiers?: string | unknown[] | undefined;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+type __VLS_Slots = {
+    groupTrigger?: ((props: {
+        group: unknown;
+        isOpen: boolean | undefined;
+    }) => any) | undefined;
+};
+declare const emit: (event: "facet-change", ...args: any[]) => void;
+declare const __VLS_props: {
+    readonly classes: Record<string, any>;
+    readonly compact: boolean;
+    readonly maxVisible: number;
+    readonly facets: unknown[];
+    readonly accordionModifiers?: string | unknown[] | undefined;
+};
+//# sourceMappingURL=UluFacetsFilterAccordions.vue.d.ts.map

package/types/components/systems/facets/UluFacetsFilterAccordions.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UluFacetsFilterAccordions.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsFilterAccordions.vue"],"names":[],"mappings":"wBAkTqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,WAAW,CAAC;;;;;;2OAG3C;;;;;;;AA/KD,oEAA2C;AAhC3C;;;;;;EA8BG"}

package/types/components/systems/facets/UluFacetsFilterLists.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsFilterLists.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsFilterLists.vue"],"names":[],"mappings":"wBAkUqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,WAAW,CAAC;;;;;2OAG3C;;;;;;;AA/LD,oEAA2C;AA5B3C;;;;;EA0BG"}
+{"version":3,"file":"UluFacetsFilterLists.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsFilterLists.vue"],"names":[],"mappings":"wBAyTqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,WAAW,CAAC;;;;;2OAG3C;;;;;;;AAzLD,oEAA2C;AA5B3C;;;;;EA0BG"}

package/types/components/systems/index.d.ts

@@ -1,6 +1,7 @@
 export { useFacets } from "./facets/useFacets.js";
 export { default as UluFacetsActiveFilters } from "./facets/UluFacetsActiveFilters.vue";
 export { default as UluFacetsFilterLists } from "./facets/UluFacetsFilterLists.vue";
+export { default as UluFacetsFilterAccordions } from "./facets/UluFacetsFilterAccordions.vue";
 export { default as UluFacetsFilterPopovers } from "./facets/UluFacetsFilterPopovers.vue";
 export { default as UluFacetsFilterSelects } from "./facets/UluFacetsFilterSelects.vue";
 export { default as UluFacetsHeaderLayout } from "./facets/UluFacetsHeaderLayout.vue";