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

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

@@ -1,84 +1,104 @@
 <template>
-  <div v-if="activeFilters.length" class="ulu-facets-active-filters">
-    <slot name="label">
-      <strong class="ulu-facets-active-filters__label">Active Filters:</strong>
-    </slot>
-    <div class="ulu-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 clearFilters() {
-  emit('clear-filters');
-}
-</script>
-
-<style lang="scss">
-.ulu-facets-active-filters {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  gap: 1rem;
-  margin-bottom: 1.5rem;
-  padding-bottom: 1.5rem;
-  border-bottom: 1px solid #eee;
-
-  &__label {
-    margin-right: 0.5rem;
+  function removeFilter(filter) {
+    emit('facet-change', {
+      groupUid: filter.groupUid,
+      facetUid: filter.uid,
+      selected: false
+    });
   }
 
-  &__items {
-    display: flex;
-    flex-wrap: wrap;
-    gap: 0.5rem;
+  function clearFilters() {
+    emit('clear-filters');
   }
-}
-</style>
+</script>

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

@@ -1,14 +1,14 @@
 <template>
-  <div class="ulu-facets__filter-lists">
+  <div class="facets-filters">
     <UluCollapsible
       v-for="group in facets"
       :key="group.uid"
       :classes="{
-        container: ['ulu-facets__group', classes.group],
-        containerOpen: ['ulu-facets__group--open', classes.groupOpen],
-        containerClosed: ['ulu-facets__group--closed', classes.groupClosed],
-        trigger: ['ulu-facets__group-trigger', classes.groupTrigger],
-        content: ['ulu-facets__group-content', classes.groupContent]
+        container: ['facets-filters__group', classes.group],
+        containerOpen: ['facets-filters__group--open', classes.groupOpen],
+        containerClosed: ['facets-filters__group--closed', classes.groupClosed],
+        trigger: ['facets-filters__group-trigger', classes.groupTrigger],
+        content: ['facets-filters__group-content', classes.groupContent]
       }"
       :startOpen="group.open"
     >
@@ -29,7 +29,7 @@
         />
         <UluCollapsible
           v-if="group.children.length > maxVisible"
-          class="ulu-facets__more-facets"
+          class="facets-filters__more-facets"
           :class="classes.moreFacets"
           :clickOutsideCloses="false"
           :closeOnEscape="false"

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

@@ -1,6 +1,6 @@
 <template>
   <UluSelectableMenu
-    class="ulu-facets__facet-list"
+    class="facets-list"
     :legend="groupUid"
     :type="type"
     :options="menuOptions"

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="ulu-facets__keyword-search">
+  <div class="facets-search">
     <label :class="classes.searchLabel" :for="id">
       <strong>Search</strong>
     </label>

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.14",
+  "version": "0.1.1-beta.16",
   "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":"wBA2OqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AATzB;WAIkB,OAAO,IAAI;YADV,OAAO,CAAC,OAAO,KAAK,CAAC;;2OAGrC;;;;AAtIH,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/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"}