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

package/lib/components/elements/UluDefinitionList.vue

@@ -1,5 +1,5 @@
 <template>
-  <dl :class="classes.list">
+  <dl class="definition-list" :class="[resolvedModifiers, classes.list]">
     <div 
       v-for="(item, index) in items" 
       :key="index"
@@ -10,6 +10,7 @@
           {{ item.term }}
         </slot>
       </dt>
+      
       <dd :class="classes.description">
         <slot name="description" :item="item" :index="index">
           {{ item.description }}
@@ -20,7 +21,10 @@
 </template>
 
 <script setup>
-  defineProps({
+  import { computed } from 'vue';
+  import { useModifiers } from "../../composables/useModifiers.js";
+
+  const props = defineProps({
     /**
      * Array of term, and description (props in object)
      * - Can use slots also
@@ -32,6 +36,54 @@
     classes: {
       type: Object,
       default: () => ({})
-    }
+    },
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array],
+    /**
+     * Displays only the definition descriptions on the same line.
+     */
+    inline: Boolean,
+    /**
+     * Displays both the definition term and its descriptions on the same line.
+     */
+    inlineAll: Boolean,
+    /**
+     * Displays the list in a two-column grid on larger screens.
+     */
+    table: Boolean,
+    /**
+     * Adds a rule between each item.
+     */
+    separated: Boolean,
+    /**
+     * Adds a rule to the top of the first item.
+     */
+    separatedFirst: Boolean,
+    /**
+     * Adds a rule to the bottom of the last item.
+     */
+    separatedLast: Boolean,
+    /**
+     * Reduces the margin between items.
+     */
+    compact: Boolean,
+  });
+
+  const internalModifiers = computed(() => ({
+    "inline" : props.inline,
+    "inline-all" : props.inlineAll,
+    "table" : props.table,
+    "separated" : props.separated,
+    "separated-first" : props.separatedFirst,
+    "separated-last" : props.separatedLast,
+    "compact" : props.compact,
+  }));
+
+  const { resolvedModifiers } = useModifiers({ 
+    props, 
+    internal: internalModifiers,
+    baseClass: "definition-list"
   });
 </script>

package/lib/components/navigation/UluMenuStack.vue

@@ -56,8 +56,8 @@
   });
 
   const internalModifiers = computed(() => ({
-    'hanging' : props.hanging,
-    'compact' : props.compact,
+    "hanging" : props.hanging,
+    "compact" : props.compact,
   }));
 
   const { resolvedModifiers } = useModifiers({ 

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.18",
   "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.114",
+    "@ulu/frontend": "^0.1.0-beta.117",
     "@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.114",
+    "@ulu/frontend": "^0.1.0-beta.117",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

package/types/components/elements/UluDefinitionList.vue.d.ts

@@ -4,8 +4,16 @@ type __VLS_WithSlots<T, S> = T & (new () => {
     $slots: S;
 });
 declare const __VLS_component: import("vue").DefineComponent<{}, {
-    $props: Partial<typeof __VLS_props>;
+    $props: Partial<typeof props>;
     classes: Record<string, any>;
+    table: boolean;
+    inline: boolean;
+    compact: boolean;
+    inlineAll: boolean;
+    separated: boolean;
+    separatedFirst: boolean;
+    separatedLast: boolean;
+    modifiers?: string | unknown[] | undefined;
     items?: unknown[] | undefined;
 }, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 type __VLS_Slots = {
@@ -19,8 +27,16 @@ type __VLS_Slots = {
         index: number;
     }) => any) | undefined;
 };
-declare const __VLS_props: {
+declare const props: {
     readonly classes: Record<string, any>;
+    readonly table: boolean;
+    readonly inline: boolean;
+    readonly compact: boolean;
+    readonly inlineAll: boolean;
+    readonly separated: boolean;
+    readonly separatedFirst: boolean;
+    readonly separatedLast: boolean;
+    readonly modifiers?: string | unknown[] | undefined;
     readonly items?: unknown[] | undefined;
 };
 //# sourceMappingURL=UluDefinitionList.vue.d.ts.map

package/types/components/elements/UluDefinitionList.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluDefinitionList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluDefinitionList.vue"],"names":[],"mappings":"wBA4HqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,WAAW,CAAC;;;2OAE3C;;;;;;;;;;;;AArFD;;;EAaG"}
+{"version":3,"file":"UluDefinitionList.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/elements/UluDefinitionList.vue"],"names":[],"mappings":"wBAsOqB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;;qBAEpD,CAAC,EAAE,CAAC;;;AARzB;YAGmB,OAAO,CAAC,OAAO,KAAK,CAAC;;;;;;;;;;;2OAErC;;;;;;;;;;;;AAxID;;;;;;;;;;;EA6CG"}

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