@ulu/frontend-vue 0.1.0-beta.9 → 0.1.1-beta.1

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

@@ -0,0 +1,125 @@
+<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>
+          <slot name="trigger" :group="group" :label="selectedLabel(group)">
+            <span>{{ group.name }}: <strong>{{ selectedLabel(group) }}</strong></span>
+          </slot>
+          <UluIcon :class="classes.triggerIcon" icon="fas fa-chevron-down" />
+        </template>
+        <template #default="{ close }">
+          <UluSelectableMenu
+            :legend="group.name"
+            :type="group.multiple ? 'checkbox' : 'radio'"
+            :options="getMenuOptions(group)"
+            :model-value="selectedUids(group)"
+            @update:model-value="onFilterChange(group, $event, close)"
+            :hideInputs="hideInputs"
+          />
+        </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({
+  /**
+   * An array of facet groups to display.
+   */
+  facets: {
+    type: Array,
+    default: () => []
+  },
+  /**
+   * An object of classes to apply to the component.
+   */
+  classes: {
+    type: Object,
+    default: () => ({
+      trigger: "button",
+      triggerIcon: "button__icon"
+      // content: null,
+      // container: null,
+      // group: null
+    })
+  },
+  /**
+   * If true, the input elements will be visually hidden.
+   */
+  hideInputs: Boolean
+});
+
+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="facets-dropdown-filters">
+    <div
+      class="facets-dropdown-filters__group"
+      v-for="group in facets"
+      :key="group.uid"
+    >
+      <label :for="`facet-dropdown-${group.uid}`" class="facets-dropdown-filters__label">
+        {{ group.name }}
+      </label>
+      <select
+        :id="`facet-dropdown-${group.uid}`"
+        class="facets-dropdown-filters__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">
+.facets-dropdown-filters {
+  display: flex;
+  gap: 1rem;
+  align-items: center;
+  flex-wrap: wrap;
+}
+.facets-dropdown-filters__group {
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+</style>

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

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

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

@@ -1,39 +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" 
-        v-model="facet.selected"
-      >
-      <label 
-        class="UluFacets__facet-label" 
-        :for="facetCheckboxId(facet)"
-      >
-        {{ facet.label }}
-      </label>
-    </li>
-  </ul>
+  <UluSelectableMenu
+    class="ulu-facets__facet-list"
+    :legend="groupUid"
+    :type="type"
+    :options="menuOptions"
+    :model-value="modelValue"
+    @update:model-value="handleChange"
+  >
+    <template #default="{ option }">
+      {{ option.label }} <span v-if="option.count !== undefined">({{ option.count }})</span>
+    </template>
+  </UluSelectableMenu>
 </template>
 
-<script>
-  export default {
-    name: 'UluFacetsList',
-    props: {
-      groupUid: String,
-      children: Array,
-      classFacet: String
-    },
-    methods: {
-      facetCheckboxId(facet) {
-        return `facet-${ this.groupUid }-${ facet.uid }`;
+<script setup>
+import { computed } from 'vue';
+import UluSelectableMenu from '../../forms/UluSelectableMenu.vue';
+
+const props = defineProps({
+  groupUid: String,
+  groupName: String,
+  children: Array,
+  type: {
+    type: String,
+    default: 'checkbox',
+  },
+  modelValue: [String, Array],
+});
+
+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>
+}
+</script>

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

@@ -0,0 +1,63 @@
+<template>
+  <div class="facets-results">
+    <transition-group
+      v-if="items.length"
+      :tag="tag"
+      :name="transitionName"
+      class="facets-results__list"
+      :class="classes.list"
+    >
+      <li
+        class="facets-results__item"
+        :class="classes.item"
+        v-for="(item, index) in items"
+        :key="item.id || index"
+      >
+        <slot name="item" :item="item" :index="index"></slot>
+      </li>
+    </transition-group>
+    <div v-else class="facets-results__empty">
+      <slot name="empty">
+        <p>No matching items found.</p>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  defineProps({
+    items: {
+      type: Array,
+      required: true
+    },
+    tag: {
+      type: String,
+      default: 'ul'
+    },
+    transitionName: {
+      type: String,
+      default: 'facets-fade'
+    },
+    classes: {
+      type: Object,
+      default: () => ({})
+    }
+  });
+</script>
+
+<style lang="scss">
+  .facets-results__list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .facets-fade-enter-active,
+  .facets-fade-leave-active {
+    transition: opacity 0.25s ease;
+  }
+
+  .facets-fade-enter-from,
+  .facets-fade-leave-to {
+    opacity: 0;
+  }
+</style>

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

@@ -1,5 +1,5 @@
 <template>
-  <div class="UluFacets__keyword-search">
+  <div class="ulu-facets__keyword-search">
     <label :class="classes.searchLabel" :for="id">
       <strong>Search</strong>
     </label>
@@ -10,58 +10,35 @@
       type="text" 
       :placeholder="placeholder"
     >
-    <!-- <button 
-      v-if="value"
-      :class="classes.searchClear" 
-      @click="clear"
-      :aria-label="classes.searchClearIcon ? 'Clear Search' : false"
-      type="button" 
-    >
-      <span 
-        v-if="classes.searchClearIcon" 
-        :class="classes.searchClearIcon"
-        aria-hidden="true"
-      ></span>
-      <span v-else>
-        Clear
-      </span>
-    </button> -->
   </div>
 </template>
 
-<script>
-  let uid = 0;
-  export default {
-    name: 'UluFacetsSearch',
-    props: {
-      classes: Object,
-      modelValue: String,
-      placeholder: {
-        type: String,
-        default: "Keywords…"
-      }
-    },
-    data() {
-      return {
-        id: `facet-view-keyword-${ ++uid }`
-      }
+<script setup>
+  import { computed } from 'vue';
+
+  const props = defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
     },
-    computed: {
-      localValue: {
-        get() {
-          return this.modelValue;
-        },
-        set(val) {
-          this.$emit('update:modelValue', val);
-        }
-      }
+    modelValue: String,
+    placeholder: {
+      type: String,
+      default: "Keywords…"
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  let uid = 0;
+  const id = `facet-view-keyword-${++uid}`;
+
+  const localValue = computed({
+    get() {
+      return props.modelValue;
     },
-    methods: {
-      clear() {
-        // this.value = null;
-        // this.applied = false;
-        // this.$emit("search", null);
-      }
+    set(val) {
+      emit('update:modelValue', val);
     }
-  }
-</script>
+  });
+</script>

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

@@ -0,0 +1,70 @@
+<template>
+  <div 
+    class="facets-sidebar-layout" 
+    :class="{ 'facets-sidebar-layout--filters-hidden' : isMobile }"
+  >
+    <div class="facets-sidebar-layout__header">
+      <slot name="header"></slot>
+    </div>
+
+    <div v-show="isMobile" class="facets-sidebar-layout__mobile-controls">
+      <button class="button" @click="showMobileFilters = true">Filters & Sort</button>
+    </div>
+
+    <div class="facets-sidebar-layout__body">
+      <!-- Desktop container for the sidebar -->
+      <div v-show="!isMobile" class="facets-sidebar-layout__sidebar" ref="desktopTarget"></div>
+      
+      <div class="facets-sidebar-layout__main">
+        <slot name="main"></slot>
+      </div>
+    </div>
+
+    <UluModal
+      v-if="isMobile"
+      v-model="showMobileFilters"
+      position="right"
+      title="Filters & Sort"
+      allowResize
+    >
+      <!-- Mobile container for the sidebar -->
+      <div class="facets-sidebar-layout__sidebar" ref="mobileTarget"></div>
+    </UluModal>
+
+    <teleport :to="teleportTarget" v-if="teleportTarget">
+      <slot name="sidebar"></slot>
+    </teleport>
+  </div>
+</template>
+
+<script setup>
+  import { ref, inject, computed } from 'vue';
+  import UluModal from '../../collapsible/UluModal.vue';
+
+  const showMobileFilters = ref(false);
+  const isMobile = inject("uluIsMobile");
+
+  const desktopTarget = ref(null);
+  const mobileTarget = ref(null);
+
+  const teleportTarget = computed(() => {
+    if (isMobile.value) {
+      return mobileTarget.value;
+    } else {
+      return desktopTarget.value;
+    }
+  });
+</script>
+
+<style lang="scss">
+  .facets-sidebar-layout__body {
+    display: grid;
+    grid-template-columns: 250px 1fr;
+    gap: 2rem;
+  }
+  .facets-sidebar-layout--filters-hidden {
+    .facets-sidebar-layout__body {
+      grid-template-columns: 1fr;
+    }
+  }
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="facets-sort" :class="classes.sortForm">
+    <label 
+      :for="sortId" 
+      :class="classes.sortFormLabel"
+    >
+      <slot>Sort:</slot>
+    </label>
+    <select 
+      :value="modelValue"
+      @change="emit('update:modelValue', $event.target.value)"
+      :id="sortId" 
+      :class="classes.sortFormSelect"
+    >
+      <option v-for="(item, key) in sortTypes" :value="key" :key="key">
+        {{ item.text }}
+      </option>
+    </select>
+  </div>
+</template>
+
+<script setup>
+  import { ref } from 'vue';
+
+  let idCounter = 0;
+
+  defineProps({
+    classes: {
+      type: Object,
+      default: () => ({})
+    },
+    sortTypes: {
+      type: Object,
+      default: () => ({})
+    },
+    modelValue: {
+      type: String,
+      default: ''
+    }
+  });
+
+  const emit = defineEmits(['update:modelValue']);
+
+  const sortId = ref(`ulu-facet-sort-${++idCounter}`);
+</script>

package/lib/components/systems/facets/_facets.scss

@@ -54,9 +54,8 @@ $config: (
   $prefix: selector.class("facets");
 
   #{ $prefix }__body {
-        .FacetView__body {
-        display: flex
-;
+    .FacetView__body {
+      display: flex;
     }
   }
 }

package/lib/components/systems/facets/_mock-data.js

@@ -0,0 +1,40 @@
+export const initialMockFacets = [
+  {
+    name: 'Category',
+    uid: 'category',
+    open: true,
+    children: [
+      { uid: 'cat1', label: 'Design' },
+      { uid: 'cat2', label: 'Development' },
+      { uid: 'cat3', label: 'Marketing' },
+      { uid: 'cat4', label: 'Business' },
+      { uid: 'cat5', label: 'Lifestyle' },
+      { uid: 'cat6', label: 'Technology' },
+    ]
+  },
+  {
+    name: 'Author',
+    uid: 'author',
+    open: true,
+    children: [
+      { uid: 'jane-doe', label: 'Jane Doe' },
+      { uid: 'john-smith', label: 'John Smith' },
+      { uid: 'peter-jones', label: 'Peter Jones' },
+    ]
+  }
+];
+
+export const mockItems = [
+  { id: 1, title: 'The Art of UI Design', description: 'A deep dive into creating beautiful user interfaces.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 5, 15) },
+  { id: 2, title: 'Vue.js for Beginners', description: 'Getting started with the popular JavaScript framework.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 8, 22) },
+  { id: 3, title: 'Content Marketing Strategies', description: 'How to attract and retain customers with great content.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 11, 10) },
+  { id: 4, title: 'Startup Funding 101', description: 'A guide to raising capital for your new venture.', category: ['cat4'], author: ['jane-doe'], date: new Date(2024, 1, 5) },
+  { id: 5, title: 'Minimalist Living', description: 'Declutter your life and find more happiness.', category: ['cat5'], author: ['john-smith'], date: new Date(2023, 3, 30) },
+  { id: 6, title: 'The Future of AI', description: 'Exploring the impact of artificial intelligence on society.', category: ['cat6'], author: ['peter-jones'], date: new Date(2024, 0, 1) },
+  { id: 7, title: 'Advanced CSS Techniques', description: 'Take your styling skills to the next level.', category: ['cat1', 'cat2'], author: ['jane-doe'], date: new Date(2023, 10, 18) },
+  { id: 8, title: 'Building a Scalable API', description: 'Best practices for designing and implementing APIs.', category: ['cat2', 'cat6'], author: ['john-smith'], date: new Date(2023, 7, 3) },
+  { id: 9, title: 'Social Media for Business', description: 'Leveraging social platforms for growth.', category: ['cat3'], author: ['peter-jones'], date: new Date(2022, 9, 14) },
+  { id: 10, title: 'Negotiation and Deal Making', description: 'Master the art of getting what you want.', category: ['cat4'], author: ['jane-doe'], date: new Date(2023, 6, 25) },
+  { id: 11, title: 'Healthy Eating Habits', description: 'A guide to a balanced and nutritious diet.', category: ['cat5'], author: ['john-smith'], date: new Date(2024, 2, 12) },
+  { id: 12, title: 'Quantum Computing Explained', description: 'A simple introduction to a complex topic.', category: ['cat6'], author: ['peter-jones'], date: new Date(2023, 9, 9) },
+];