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

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

@@ -1,62 +1,104 @@
 <template>
-  <div v-if="activeFilters.length" class="facets-active-filters">
-    <slot name="label">
-      <strong class="facets-active-filters__label">Active Filters:</strong>
-    </slot>
-    <div class="facets-active-filters__items">
-      <UluButton
-        v-for="filter in activeFilters"
-        :key="`${filter.groupUid}-${filter.uid}`"
-        class="button--sm"
-        @click="removeFilter(filter)"
+  <div v-if="activeFilters.length" class="facets-active" :class="classes.container">
+    <component :is="labelElement" class="facets-active__label" :class="classes.label">
+      <slot name="label">
+        Active Filters:
+      </slot>
+    </component>
+    <ul class="facets-active__list" :class="classes.list">
+      <li  
+        class="facets-active__item"
+        v-for="filter in activeFilters" 
+        :key="`${ filter.groupUid }-${ filter.uid }`"
+        :class="classes.item"
       >
-        {{ filter.label }}
-        <UluIcon icon="type:close" />
-      </UluButton>
-    </div>
-    <button @click="clearFilters" class="button button--link">Clear All</button>
+        <button
+          :class="classes.filterButton"
+          icon="type:remove"
+          @click="removeFilter(filter)"
+        >
+          <span :class="classes.filterButtonText">
+            <span class="hidden-visually">Remove Active Filter:</span>
+            {{ filter.label }}
+          </span>
+          <span :class="classes.filterButtonIcon">
+            <UluIcon :icon="removeIcon" />
+          </span>
+        </button>
+      </li>
+    </ul>
+    <button @click="clearFilters" :class="classes.clearButton">Clear All</button>
   </div>
 </template>
 
 <script setup>
-import { computed } from 'vue';
-import UluButton from '../../elements/UluButton.vue';
-import UluIcon from '../../elements/UluIcon.vue';
+  import { computed } from 'vue';
+  import UluIcon from '../../elements/UluIcon.vue';
 
-const props = defineProps({
-  /**
-   * The selectedFacets array from the useFacets composable.
-   */
-  selectedFacets: {
-    type: Array,
-    default: () => []
-  }
-});
+  const props = defineProps({
+    /**
+     * The selectedFacets array from the useFacets composable.
+     */
+    selectedFacets: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * Element to use for label
+     */
+    labelElement: {
+      type: String,
+      default: "strong"
+    },
+    /**
+     * Icon to use for remove (in button)
+     */
+    removeIcon: {
+      type: String,
+      default: "type:close"
+    },
+    /**
+     * Classes for different element { label, list, item, filterButton, filterButtonText, filterButtonIcon, clearButton }
+     */
+    classes: {
+      type: Object,
+      default: () => ({
+        container: "layout-flex flex-wrap",
+        label: "hidden-visually",
+        list: "layout-flex flex-wrap",
+        item: "margin-right-small-x",
+        filterButton: "button button--small button--outline no-min-width",
+        filterButtonText: null,
+        filterButtonIcon: "button__icon",
+        clearButton: "button button--small"
+      })
+    }
+  });
 
-const emit = defineEmits(['facet-change', 'clear-filters']);
+  const emit = defineEmits(['facet-change', 'clear-filters']);
 
-const activeFilters = computed(() => {
-  const filters = [];
-  props.selectedFacets.forEach(group => {
-    group.children.forEach(child => {
-      filters.push({
-        ...child,
-        groupUid: group.uid
+  const activeFilters = computed(() => {
+    const filters = [];
+    props.selectedFacets.forEach(group => {
+      group.children.forEach(child => {
+        filters.push({
+          ...child,
+          groupUid: group.uid
+        });
       });
     });
+    return filters;
   });
-  return filters;
-});
 
-function removeFilter(filter) {
-  emit('facet-change', {
-    groupUid: filter.groupUid,
-    facetUid: filter.uid,
-    selected: false
-  });
-}
+  function removeFilter(filter) {
+    emit('facet-change', {
+      groupUid: filter.groupUid,
+      facetUid: filter.uid,
+      selected: false
+    });
+  }
 
-function clearFilters() {
-  emit('clear-filters');
-}
+  function clearFilters() {
+    emit('clear-filters');
+  }
 </script>

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/lib/plugins/core/index.js

@@ -15,6 +15,7 @@ const defaults = {
     success: "fas fa-circle-check",
     externalLink: "fas fa-arrow-up-right-from-square",
     close: "fas fa-xmark",
+    remove: "fas fa-xmark",
     expand: "fas fa-plus",
     collapse: "fas fa-minus",
     resizeHorizontal: "fas fa-grip-lines-vertical",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.1-beta.15",
+  "version": "0.1.1-beta.17",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -63,7 +63,7 @@
   "peerDependencies": {
     "@formkit/auto-animate": "^0.9.0",
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.113",
+    "@ulu/frontend": "^0.1.0-beta.114",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
@@ -87,7 +87,7 @@
     "@storybook/addon-essentials": "^9.0.0-alpha.12",
     "@storybook/addon-links": "^9.1.1",
     "@storybook/vue3-vite": "^9.1.1",
-    "@ulu/frontend": "^0.1.0-beta.113",
+    "@ulu/frontend": "^0.1.0-beta.114",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

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

@@ -6,13 +6,19 @@ type __VLS_WithSlots<T, S> = T & (new () => {
 declare const __VLS_component: import("vue").DefineComponent<{}, {
     $emit: typeof emit;
     $props: Partial<typeof props>;
+    classes: Record<string, any>;
+    labelElement: string;
     selectedFacets: unknown[];
+    removeIcon: string;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
     label?: ((props: {}) => any) | undefined;
 };
 declare const emit: (event: "facet-change" | "clear-filters", ...args: any[]) => void;
 declare const props: {
+    readonly classes: Record<string, any>;
+    readonly labelElement: string;
     readonly selectedFacets: unknown[];
+    readonly removeIcon: string;
 };
 //# sourceMappingURL=UluFacetsActiveFilters.vue.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"UluFacetsActiveFilters.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsActiveFilters.vue"],"names":[],"mappings":"wBAmNqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;2OAGrC;;;;AApIH,sFAA4D;AAV5D;;EAQG"}
+{"version":3,"file":"UluFacetsActiveFilters.vue.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/UluFacetsActiveFilters.vue"],"names":[],"mappings":"wBAmTqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;2OAGrC;;;;AA7JD,sFAA4D;AAxC5D;;;;;EAsCG"}

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";

package/types/plugins/core/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AAkCA,mEAyDC;AA3DD,gCAA0D"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/plugins/core/index.js"],"names":[],"mappings":"AAmCA,mEAyDC;AA3DD,gCAA0D"}