@ulu/frontend-vue 0.1.0-beta.26 → 0.1.0-beta.28

package/lib/components/forms/UluSelectableMenu.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="menu-stack form-theme" :role="groupRole" :aria-labelledby="legendId">
+    <div v-if="legend" :id="legendId" class="hidden-visually">{{ legend }}</div>
+    <ul class="menu-stack__list">
+      <li class="menu-stack__item" v-for="option in options" :key="option.uid">
+        <div class="menu-stack__selectable">
+          <input
+            :type="type"
+            :id="getId(option)"
+            :name="name"
+            :value="option.uid"
+            :checked="isChecked(option)"
+            @change="handleChange(option, $event)"
+          >
+          <label :for="getId(option)">
+            <slot :option="option">
+              {{ option?.label || option?.title || option?.text }}
+            </slot>
+          </label>
+        </div>
+      </li>
+    </ul>
+  </div>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+
+const props = defineProps({
+  legend: String,
+  options: Array,
+  type: {
+    type: String,
+    default: 'checkbox',
+  },
+  modelValue: [String, Array],
+});
+
+const emit = defineEmits(['update:modelValue']);
+
+const name = computed(() => props.legend ? props.legend.toLowerCase().replace(/\s+/g, '-') : `menu-${Math.random().toString(36).substring(7)}`);
+const legendId = computed(() => name.value ? `${name.value}-legend` : null);
+const groupRole = computed(() => props.type === 'radio' ? 'radiogroup' : 'group');
+
+const getId = (option) => `${name.value}-${option.uid}`;
+
+const isChecked = (option) => {
+  if (props.type === 'radio') {
+    return props.modelValue === option.uid;
+  }
+  if (Array.isArray(props.modelValue)) {
+    return props.modelValue.includes(option.uid);
+  }
+  if (props.type === 'checkbox') {
+    return option.checked || false;
+  }
+  return false;
+};
+
+const handleChange = (option, event) => {
+  if (props.type === 'radio') {
+    emit('update:modelValue', option.uid);
+  } else {
+    if (Array.isArray(props.modelValue)) {
+      const newValue = [...props.modelValue];
+      const index = newValue.indexOf(option.uid);
+      if (index > -1) {
+        newValue.splice(index, 1);
+      } else {
+        newValue.push(option.uid);
+      }
+      emit('update:modelValue', newValue);
+    } else {
+      option.checked = event.target.checked;
+    }
+  }
+};
+</script>

package/lib/components/index.js

@@ -27,7 +27,7 @@ export { default as UluList } from './elements/UluList.vue';
 export { default as UluMain } from './elements/UluMain.vue';
 export { default as UluSpokeSpinner } from './elements/UluSpokeSpinner.vue';
 export { default as UluTag } from './elements/UluTag.vue';
-export { default as UluCheckboxMenu } from './forms/UluCheckboxMenu.vue';
+export { default as UluSelectableMenu } from './forms/UluSelectableMenu.vue';
 export { default as UluFileDisplay } from './forms/UluFileDisplay.vue';
 export { default as UluFormFile } from './forms/UluFormFile.vue';
 export { default as UluFormMessage } from './forms/UluFormMessage.vue';

package/lib/components/navigation/UluBreadcrumb.vue

@@ -4,9 +4,10 @@
     aria-label="Breadcrumb"
     v-if="items.length"
   >
-    <ul :class="classes.list">
+    <ol :class="classes.list">
       <li v-for="(item, index) in items" :key="index" :class="classes.item">
         <router-link
+          v-if="!item.current"
           :to="item.to"
           :class="classes.link"
           :aria-current="item.current ? 'page' : null"
@@ -15,6 +16,11 @@
             {{ item.title }}
           </slot>
         </router-link>
+        <span v-else :class="item.current">
+          <slot :item="item">
+            {{ item.title }}
+          </slot>
+        </span>
         <template v-if="index < items.length - 1">
           <slot name="separator">
             <UluIcon
@@ -24,7 +30,7 @@
           </slot>
         </template>
       </li>
-    </ul>
+    </ol>
   </nav>
 </template>
 
@@ -63,6 +69,7 @@
           list: "breadcrumb__list",
           item: "breadcrumb__item",
           link: "breadcrumb__link",
+          current: "breadcrumb__current",
           separator: "breadcrumb__separator"
         })
       }

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

@@ -9,7 +9,7 @@
           <template #sidebar>
             <UluFacetsSearch v-model="searchValue" />
             <UluFacetsSort v-model="selectedSort" :sort-types="sortTypes" />
-            <UluFacetsFilters :facets="facets" @facet-change="handleFacetChange" />
+            <UluFacetsFilterLists :facets="facets" @facet-change="handleFacetChange" />
           </template>
           <template #main>
             <UluFacetsResults :items="paginatedItems">
@@ -45,7 +45,7 @@
     useFacets,
     usePagination,
     UluFacetsSidebarLayout,
-    UluFacetsFilters,
+    UluFacetsFilterLists,
     UluFacetsSort,
     UluFacetsSearch,
     UluFacetsResults

package/lib/components/systems/facets/{UluFacetsFilters.vue → UluFacetsFilterLists.vue}

@@ -22,7 +22,9 @@
         <UluFacetsList
           :children="group.children.slice(0, maxVisible)"
           :groupUid="group.uid"
-          :classFacet="classes.facet"
+          :groupName="group.name"
+          :type="group.multiple ? 'checkbox' : 'radio'"
+          :model-value="selectedUids(group)"
           @facet-change="emit('facet-change', $event)"
         />
         <UluCollapsibleRegion
@@ -40,7 +42,9 @@
             <UluFacetsList
               :children="group.children.slice(maxVisible)"
               :groupUid="group.uid"
-              :classFacet="classes.facet"
+              :groupName="group.name"
+              :type="group.multiple ? 'checkbox' : 'radio'"
+              :model-value="selectedUids(group)"
               @facet-change="emit('facet-change', $event)"
             />
           </template>
@@ -70,4 +74,11 @@
   });
 
   const emit = defineEmits(['facet-change']);
-</script>
+
+  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/UluFacetsFilterPopovers.vue

@@ -0,0 +1,112 @@
+<template>
+  <div :class="classes.container">
+    <div v-for="group in facets" :key="group.uid" :class="classes.group">
+      <UluPopover 
+        :classes="{ 
+          trigger: classes.trigger,
+          content: classes.content
+        }
+      ">
+        <template #trigger>
+          <span>{{ group.name }}: <strong>{{ selectedLabel(group) }}</strong></span>
+          <UluIcon :class="classes.triggerIcon" icon="fas fa-chevron-down" />
+        </template>
+        <template #content="{ close }">
+          <UluSelectableMenu
+            :legend="group.name"
+            :type="group.multiple ? 'checkbox' : 'radio'"
+            :options="getMenuOptions(group)"
+            :model-value="selectedUids(group)"
+            @update:model-value="onFilterChange(group, $event, close)"
+          />
+        </template>
+      </UluPopover>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import UluPopover from '../../../plugins/popovers/UluPopover.vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
+import UluIcon from '../../elements/UluIcon.vue';
+
+const props = defineProps({
+  facets: {
+    type: Array,
+    default: () => []
+  },
+  classes: {
+    type: Object,
+    default: () => ({
+      trigger: "button",
+      triggerIcon: "button__icon"
+      // content: null,
+      // container: null,
+      // group: null
+    })
+  }
+});
+
+const emit = defineEmits(['facet-change']);
+
+const getMenuOptions = (group) => {
+  if (group.multiple) {
+    return group.children;
+  }
+  return [{ label: `All ${group.name}s`, uid: '' }, ...group.children];
+};
+
+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 || '';
+};
+
+const selectedLabel = (group) => {
+  const selectedItems = group.children.filter(c => c.selected);
+  const count = selectedItems.length;
+
+  if (count === 0) {
+    return 'All';
+  }
+
+  if (group.multiple) {
+    if (count === 1) {
+      return selectedItems[0].label;
+    }
+    return `${count} selected`;
+  }
+
+  return selectedItems[0].label;
+};
+
+function onFilterChange(group, value, closePopover) {
+  if (group.multiple) {
+    const selectedUids = new Set(value);
+    group.children.forEach(facet => {
+      const shouldBeSelected = selectedUids.has(facet.uid);
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: group.uid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+  } else {
+    const selectedUid = value;
+    group.children.forEach(facet => {
+      const shouldBeSelected = facet.uid === selectedUid;
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: group.uid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+    closePopover();
+  }
+}
+</script>

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

@@ -0,0 +1,71 @@
+<template>
+  <div class="UluFacetsDropdownFilters">
+    <div
+      class="UluFacetsDropdownFilters__group"
+      v-for="group in facets"
+      :key="group.uid"
+    >
+      <label :for="`facet-dropdown-${group.uid}`" class="UluFacetsDropdownFilters__label">
+        {{ group.name }}
+      </label>
+      <select
+        :id="`facet-dropdown-${group.uid}`"
+        class="UluFacetsDropdownFilters__select"
+        @change="onFilterChange(group, $event)"
+      >
+        <option value="">All {{ group.name }}s</option>
+        <option
+          v-for="option in group.children"
+          :key="option.uid"
+          :value="option.uid"
+          :selected="option.selected"
+        >
+          {{ option.label }}
+        </option>
+      </select>
+    </div>
+  </div>
+</template>
+
+<script setup>
+const props = defineProps({
+  facets: {
+    type: Array,
+    default: () => []
+  }
+});
+
+const emit = defineEmits(['facet-change']);
+
+function onFilterChange(group, event) {
+  const selectedUid = event.target.value;
+
+  const currentlySelected = group.children.find(c => c.selected);
+  if (currentlySelected?.uid === selectedUid) return;
+
+  group.children.forEach(facet => {
+    const shouldBeSelected = facet.uid === selectedUid;
+    if (facet.selected !== shouldBeSelected) {
+      emit('facet-change', {
+        groupUid: group.uid,
+        facetUid: facet.uid,
+        selected: shouldBeSelected
+      });
+    }
+  });
+}
+</script>
+
+<style lang="scss">
+.UluFacetsDropdownFilters {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.UluFacetsDropdownFilters__group {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,24 @@
+<template>
+  <div class="UluFacetsHeaderLayout">
+    <div class="UluFacetsHeaderLayout__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="UluFacetsHeaderLayout__main">
+      <slot name="main"></slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is purely for layout, no logic needed.
+</script>
+
+<style lang="scss">
+.UluFacetsHeaderLayout__header {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  margin-bottom: 1.5rem;
+  flex-wrap: wrap;
+}
+</style>

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

@@ -1,38 +1,67 @@
 <template>
-  <ul class="UluFacets__facet-list">
-    <li 
-      class="UluFacets__facet"
-      :class="classFacet"
-      v-for="facet in children"
-      :key="facet.uid"
-    >
-      <input 
-        class="UluFacets__facet-checkbox"
-        :id="facetCheckboxId(facet)"
-        type="checkbox" 
-        :checked="facet.selected"
-        @change="emit('facet-change', { groupUid, facetUid: facet.uid, selected: $event.target.checked })"
-      >
-      <label 
-        class="UluFacets__facet-label" 
-        :for="facetCheckboxId(facet)"
-      >
-        {{ facet.label }}
-      </label>
-    </li>
-  </ul>
+  <UluSelectableMenu
+    class="UluFacets__facet-list"
+    :legend="groupUid"
+    :type="type"
+    :options="menuOptions"
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+  >
+    <template #default="{ option }">
+      {{ option.label }}
+    </template>
+  </UluSelectableMenu>
 </template>
 
 <script setup>
-  const props = defineProps({
-    groupUid: String,
-    children: Array,
-    classFacet: String
-  });
+import { computed } from 'vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
 
-  const emit = defineEmits(['facet-change']);
+const props = defineProps({
+  groupUid: String,
+  groupName: String,
+  children: Array,
+  type: {
+    type: String,
+    default: 'checkbox',
+  },
+  modelValue: [String, Array],
+});
 
-  function facetCheckboxId(facet) {
-    return `facet-${props.groupUid}-${facet.uid}`;
+const emit = defineEmits(['facet-change']);
+
+const menuOptions = computed(() => {
+  if (props.type === 'radio') {
+    return [{ label: `All ${props.groupName}s`, uid: '' }, ...props.children];
+  }
+  return props.children;
+});
+
+function handleChange(value) {
+  if (props.type === 'radio') {
+    const selectedUid = value;
+    props.children.forEach(facet => {
+      const shouldBeSelected = facet.uid === selectedUid;
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: props.groupUid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
+  } else {
+    const selectedUids = new Set(value);
+    props.children.forEach(facet => {
+      const shouldBeSelected = selectedUids.has(facet.uid);
+      if (facet.selected !== shouldBeSelected) {
+        emit('facet-change', {
+          groupUid: props.groupUid,
+          facetUid: facet.uid,
+          selected: shouldBeSelected
+        });
+      }
+    });
   }
+}
 </script>

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

@@ -1,13 +1,15 @@
 <template>
   <div class="UluFacetsResults">
-    <transition-group 
+    <transition-group
       v-if="items.length"
-      :tag="tag" 
+      :tag="tag"
       :name="transitionName"
       class="UluFacetsResults__list"
+      :class="classes.list"
     >
       <li
         class="UluFacetsResults__item"
+        :class="classes.item"
         v-for="(item, index) in items"
         :key="item.id || index"
       >
@@ -35,6 +37,10 @@
     transitionName: {
       type: String,
       default: 'UluFacetsFade'
+    },
+    classes: {
+      type: Object,
+      default: () => ({})
     }
   });
 </script>

package/lib/components/systems/index.js

@@ -1,5 +1,8 @@
 export { useFacets } from './facets/useFacets.js';
-export { default as UluFacetsFilters } from './facets/UluFacetsFilters.vue';
+export { default as UluFacetsFilterLists } from './facets/UluFacetsFilterLists.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';
 export { default as UluFacetsResults } from './facets/UluFacetsResults.vue';
 export { default as UluFacetsSearch } from './facets/UluFacetsSearch.vue';
 export { default as UluFacetsSidebarLayout } from './facets/UluFacetsSidebarLayout.vue';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.26",
+  "version": "0.1.0-beta.28",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [
@@ -38,7 +38,7 @@
     "build": "vite build",
     "types": "npx tsc",
     "deploy": "npm run types && npm run build && npm run docs:build",
-    "update-contexts": "rm -rf .contexts && mkdir -p .contexts/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .contexts/frontend/"
+    "update-contexts": "rm -rf .ctx && mkdir -p .ctx/frontend && cp -R node_modules/@ulu/frontend/scss node_modules/@ulu/frontend/js .ctx/frontend/"
   },
   "keywords": [
     "vue",
@@ -59,7 +59,7 @@
   "homepage": "https://github.com/Jscherbe/frontend-vue#readme",
   "peerDependencies": {
     "@headlessui/vue": "^1.7.23",
-    "@ulu/frontend": "^0.1.0-beta.102",
+    "@ulu/frontend": "^0.1.0-beta.104",
     "@unhead/vue": "^2.0.11",
     "vue": "^3.5.17",
     "vue-router": "^4.5.1"
@@ -82,7 +82,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.102",
+    "@ulu/frontend": "^0.1.0-beta.104",
     "@unhead/vue": "^2.0.11",
     "@vitejs/plugin-vue": "^6.0.0",
     "ollama": "^0.5.16",

package/lib/components/forms/UluCheckboxMenu.vue

@@ -1,37 +0,0 @@
-<template>
-  <div class="menu-stack form-theme">
-    <ul class="menu-stack__list">
-      <li
-        class="menu-stack__item"
-        v-for="(option, index) in options"
-        :key="index"
-      >
-        <div class="menu-stack__selectable">
-          <input 
-            type="checkbox" 
-            :id="getId(index)" 
-            v-model="option.checked"
-          >
-          <label :for="getId(index)">
-            <slot>
-              {{ option?.title || option?.text }}
-            </slot>
-          </label>
-        </div>
-      </li>
-    </ul>
-  </div>
-</template>
-
-<script setup>
-  defineProps({
-    /**
-     * Checkbox items in [{ title|text, checked }, ...]
-     */
-    options: Array
-  });
-
-  const getId = (index) => {
-    return `checkbox-menu-opt-${ index }`;
-  };
-</script>