@ulu/frontend-vue 0.1.0-beta.1 → 0.1.0-beta.11

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="UluFacetsResults">
+    <transition-group 
+      v-if="items.length"
+      :tag="tag" 
+      :name="transitionName"
+      class="UluFacetsResults__list"
+    >
+      <li
+        class="UluFacetsResults__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="UluFacetsResults__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: 'UluFacetsFade'
+    }
+  });
+</script>
+
+<style lang="scss">
+  .UluFacetsResults__list {
+    list-style: none;
+    padding: 0;
+  }
+
+  .UluFacetsFade-enter-active,
+  .UluFacetsFade-leave-active {
+    transition: opacity 0.25s ease;
+  }
+
+  .UluFacetsFade-enter-from,
+  .UluFacetsFade-leave-to {
+    opacity: 0;
+  }
+</style>

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

@@ -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,31 @@
+<template>
+  <div class="UluFacetsSidebarLayout">
+    <div class="UluFacetsSidebarLayout__header">
+      <slot name="header"></slot>
+    </div>
+    <div class="UluFacetsSidebarLayout__body">
+      <div class="UluFacetsSidebarLayout__sidebar">
+        <slot name="sidebar"></slot>
+      </div>
+      <div class="UluFacetsSidebarLayout__main">
+        <slot name="main"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+// This component is purely for layout, no logic needed.
+</script>
+
+<style lang="scss">
+.UluFacetsSidebarLayout__body {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 2rem;
+
+  @media (min-width: 768px) {
+    grid-template-columns: 250px 1fr;
+  }
+}
+</style>

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

@@ -0,0 +1,45 @@
+<template>
+  <div class="UluFacetsSort" :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/_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) },
+];

package/lib/components/systems/facets/useFacets.js

@@ -0,0 +1,140 @@
+import { ref, computed } from 'vue';
+import Fuse from 'fuse.js';
+
+const sortAlpha = items => {
+  const getTitle = i => (i.title || i.label || "");
+  return items.sort((a, b) => getTitle(a).localeCompare(getTitle(b)));
+}
+const defaultSorts = {
+  az: { text: "A-Z", sort: sortAlpha },
+  za: { text: "Z-A", sort: items => sortAlpha(items).reverse() },
+};
+
+/**
+ * A composable for handling client-side faceted search, filtering, and sorting.
+ * @param {import('vue').Ref<Array<Object>>} allItems - A Vue ref containing the full list of items to be processed.
+ * @param {Object} options - Configuration options for the composable.
+ * @param {Array} [options.initialFacets=[]] - The initial configuration for the facets.
+ * @param {String} [options.initialSearchValue=''] - The initial value for the search input.
+ * @param {String} [options.initialSortType='az'] - The initial sort type.
+ * @param {Boolean} [options.noDefaultSorts=false] - If true, the default 'A-Z' and 'Z-A' sorts will not be included.
+ * @param {Object} [options.extraSortTypes={}] - Additional sort types to be merged with the default ones.
+ * @param {Object} [options.searchOptions={}] - Configuration options for Fuse.js.
+ * @param {Function} [options.getItemFacet] - A function to retrieve facet information from an item.
+ */
+export function useFacets(allItems, options = {}) {
+  const {
+    initialFacets = [],
+    initialSearchValue = '',
+    initialSortType = 'az',
+    noDefaultSorts = false,
+    extraSortTypes = {},
+    searchOptions: initialSearchOptions = {},
+    getItemFacet = (item, uid) => item[uid]
+  } = options;
+
+  // --- State ---
+  const facets = ref(createFacets(initialFacets));
+  const searchValue = ref(initialSearchValue);
+  const selectedSort = ref(initialSortType);
+
+  // --- Helpers ---
+  function createFacets(initial) {
+    return initial.map(group => ({
+      ...group,
+      open: group.open || false,
+      children: group.children.map(facet => ({
+        ...facet,
+        selected: facet.selected || false
+      })),
+      selectedCount: 0
+    }));
+  }
+
+  // --- Computed ---
+  const sortTypes = computed(() => ({
+    ...(noDefaultSorts ? {} : defaultSorts),
+    ...extraSortTypes
+  }));
+
+  const searchOptions = computed(() => ({
+    shouldSort: true,
+    keys: ["title", "label", "description", "author"],
+    ...initialSearchOptions
+  }));
+
+  const selectedFacets = computed(() => {
+    const selected = [];
+    facets.value.forEach((group) => {
+      const { name, uid, children } = group;
+      let count = 0;
+      let added = false;
+      if (children) {
+        children.forEach(child => {
+          if (child.selected) {
+            ++count;
+            if (!added) {
+              selected.push({ uid, name, children: [] });
+              added = true;
+            }
+            selected[selected.length - 1].children.push(child);
+          }
+        });
+      }
+      group.selectedCount = count;
+    });
+    return selected;
+  });
+
+  const filteredItems = computed(() => {
+    if (!selectedFacets.value.length) {
+      return allItems.value;
+    }
+    return allItems.value.filter(item => {
+      return selectedFacets.value.some(group => {
+        const cats = getItemFacet(item, group.uid);
+        if (cats && cats.length) {
+          return group.children.some(facet => cats.includes(facet.uid));
+        }
+        return false;
+      });
+    });
+  });
+
+  const searchedItems = computed(() => {
+    if (!searchValue.value?.length) {
+      return filteredItems.value;
+    }
+    const fuse = new Fuse(filteredItems.value, searchOptions.value);
+    return fuse.search(searchValue.value).map(result => result.item);
+  });
+
+  const displayItems = computed(() => {
+    const sortFn = sortTypes.value[selectedSort.value]?.sort;
+    if (typeof sortFn !== 'function') {
+      return searchedItems.value;
+    }
+    // The sort function should not mutate the original array
+    return sortFn([...searchedItems.value]);
+  });
+
+  // --- Methods ---
+  function clearFilters() {
+    facets.value = createFacets(initialFacets);
+  }
+
+  return {
+    // State
+    facets,
+    searchValue,
+    selectedSort,
+    sortTypes,
+
+    // Computed
+    displayItems,
+    selectedFacets,
+
+    // Methods
+    clearFilters
+  };
+}

package/lib/components/systems/index.js

@@ -1,5 +1,8 @@
-export { default as UluFacets } from './facets/UluFacets.vue';
+export { default as UluFacetsFilters } from './facets/UluFacetsFilters.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';
+export { default as UluFacetsSort } from './facets/UluFacetsSort.vue';
 export { default as UluFacetsList } from './facets/UluFacetsList.vue';
 export { default as UluScrollAnchors } from './scroll-anchors/UluScrollAnchors.vue';
 export { default as UluScrollAnchorsNav } from './scroll-anchors/UluScrollAnchorsNav.vue';

package/lib/components/systems/table-sticky/UluTableSticky.vue

@@ -180,7 +180,7 @@
   import UluTableStickyTable from "./UluTableStickyTable.vue";
   import { debounce } from "@ulu/utils/performance.js";
   import { runAfterFramePaint } from "@ulu/utils/browser/performance.js";
-  import cloneDeep from "lodash/cloneDeep";
+  import cloneDeep from "lodash-es/cloneDeep.js";
   
   const arrayOfObjects = a => a.every(o => typeof o === "object");
   const required = true;

package/lib/composables/index.js

@@ -7,4 +7,5 @@
 export { useIcon } from './useIcon.js';
 export { useModifiers } from './useModifiers.js';
 export { useWindowResize } from './useWindowResize.js';
+export { useRequiredInject } from './useRequiredInject.js';
 export { useBreakpointManager } from './useBreakpointManager.js';

package/lib/composables/useRequiredInject.js

@@ -0,0 +1,26 @@
+import { inject } from 'vue';
+import { injectRegistry } from "../meta.js";
+
+// A unique sentinel object to detect if a value was provided.
+// This is used to differentiate between a provider not existing vs.
+// a provider explicitly giving a `null` value.
+const NOT_FOUND = {};
+
+/**
+ * Injects a dependency from a plugin (or other required inject) and throws an error if it's not available.
+ *
+ * @param {string} key - The injection key (e.g., 'uluBreakpointManager').
+ * @returns The injected value.
+ */
+export function useRequiredInject(key) {
+  const dependency = inject(key, NOT_FOUND);
+
+  if (dependency === NOT_FOUND) {
+    const plugin = injectRegistry[key] || '';
+    const pluginInfo = plugin ? ` from the '${ plugin }' plugin` : "";
+    const action = plugin ? "Please install missing plugin." : ""; 
+    throw new Error(`Required inject: '${ key }'${ pluginInfo } was not provided. ${ action }`);
+  }
+
+  return dependency;
+}

package/lib/index.js

@@ -7,4 +7,3 @@
 export * from './plugins/index.js';
 export * from './components/index.js';
 export * from './composables/index.js';
-export * from './settings.js';

package/lib/meta.js

@@ -0,0 +1,14 @@
+/**
+ * @module lib/meta
+ * @description A central lookup for meta like info in the system
+ */
+
+export const injectRegistry = {
+  'uluCore': 'Core',
+  'uluIsMobile': 'Breakpoints',
+  'uluBreakpointActive': 'Breakpoints',
+  'uluBreakpointDirection': 'Breakpoints',
+  'uluBreakpointManager': 'Breakpoints',
+  'uluModals': 'Modals',
+  'uluToast': 'Toast',
+};

package/lib/plugins/core/index.js

@@ -0,0 +1,87 @@
+/**
+ * @module plugins/core/index.js
+ * @description Core plugin for managing shared configuration for the library.
+ */
+import { reactive } from 'vue';
+
+const defaults = {
+  fontAwesomeStatic: false,
+  iconComponent: null,
+  iconPropResolver: (definition) => ({ icon: definition }),
+  iconsByType: {
+    danger: "fas fa-triangle-exclamation",
+    warning: "fas fa-circle-exclamation",
+    info: "fas fa-circle-info",
+    success: "fas fa-circle-check",
+    externalLink: "fas fa-arrow-up-right-from-square",
+    close: "fas fa-xmark",
+    expand: "fas fa-plus",
+    collapse: "fas fa-minus",
+    resizeHorizontal: "fas fa-grip-lines-vertical",
+    resizeVertical: "fas fa-grip-lines",
+    resizeBoth: "fas fa-grip",
+    ellipsis: "fas fa-ellipsis",
+    pathSeparator: "fas fa-chevron-right"
+  }
+};
+
+export const iconKeys = Object.keys(defaults.iconsByType);
+
+export default function install(app, userSettings = {}) {
+  // A single reactive object for all settings
+  const settings = reactive({ ...defaults });
+
+  // Separate icon overrides from other options to handle them safely
+  const { iconsByType: iconOverrides, ...otherOptions } = userSettings || {};
+
+  // Merge any user-provided options during installation
+  if (otherOptions) {
+    Object.assign(settings, otherOptions);
+  }
+
+  const api = {
+    // Methods to interact with settings
+    getSettings() {
+      return settings;
+    },
+    getDefaultSettings() {
+      return { ...defaults };
+    },
+    updateSettings(changes) {
+      return Object.assign(settings, changes);
+    },
+    getSetting(key) {
+      if (!settings.hasOwnProperty(key)) {
+        console.warn(`Attempted to access non-existent setting: ${key}`);
+        return;
+      }
+      return settings[key];
+    },
+    updateSetting(key, value) {
+      if (typeof key !== "string") {
+        throw new Error("Expected key to be string");
+      }
+      settings[key] = value;
+    },
+    getIcon(type) {
+      const icons = settings.iconsByType;
+      if (!icons[type]) {
+        throw new Error(`Icon type "${type}" not found!`);
+      }
+      return icons[type];
+    },
+    setIcon(type, definition) {
+      settings.iconsByType[type] = definition;
+    }
+  };
+
+  // Apply any individual icon overrides passed during installation
+  if (iconOverrides) {
+    for (const [type, definition] of Object.entries(iconOverrides)) {
+      api.setIcon(type, definition);
+    }
+  }
+
+  app.provide('uluCore', api);
+  app.config.globalProperties.$uluCore = api;
+}

package/lib/plugins/index.js

@@ -5,6 +5,7 @@
  */
 
 
+export { default as corePlugin } from './core/index.js';
 export { default as popoversPlugin } from './popovers/index.js';
 export { default as modalsPlugin } from './modals/index.js';
 export { default as toastPlugin } from './toast/index.js';

package/lib/plugins/toast/UluToast.vue

@@ -43,7 +43,7 @@
       </button>
     </div>
     <button class="toast__close" :class="classes.closeButton" @click="toast.close">
-      <UluIcon type="close"/>
+      <UluIcon :icon="'type:close'"/>
     </button>
   </div>
 </template>

package/package.json

@@ -1,11 +1,12 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.1.0-beta.1",
-  "description": "Frontend theming library (Vue)",
+  "version": "0.1.0-beta.11",
+  "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
-  "files" : [
+  "files": [
     "lib",
-    "dist"
+    "dist",
+    "types"
   ],
   "module": "./lib/index.js",
   "exports": {
@@ -18,17 +19,35 @@
     "./*": "./lib/*",
     "./scss": "./lib/_index.scss"
   },
+  "typesVersions": {
+    "*": {
+      "lib/*": [
+        "./types/*"
+      ]
+    }
+  },
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Jscherbe/frontend-vue.git"
   },
   "scripts": {
     "dev": "storybook dev -p 6006",
-    "docs:build": "storybook build -o docs --docs",
+    "docs:build": "storybook build -o docs",
     "build": "vite build",
-    "deploy": "npm run build && npm run docs:build"
+    "types": "npx tsc",
+    "deploy": "npm run types && npm run build && npm run docs:build"
   },
-  "keywords": [],
+  "keywords": [
+    "vue",
+    "vue3",
+    "ui",
+    "components",
+    "component-library",
+    "design-system",
+    "ulu",
+    "frontend",
+    "scss"
+  ],
   "author": "Joseph Scherben <jscherbe@gmail.com>",
   "license": "MIT",
   "bugs": {
@@ -48,7 +67,8 @@
   },
   "dependencies": {
     "@floating-ui/vue": "^1.1.8",
-    "@ulu/utils": "^0.0.30"
+    "@ulu/utils": "^0.0.30",
+    "lodash-es": "^4.17.21"
   },
   "devDependencies": {
     "@fortawesome/fontawesome-svg-core": "^6.7.2",
@@ -67,9 +87,11 @@
     "storybook": "^9.1.1",
     "storybook-addon-vue-mdx": "^2.0.2",
     "vite": "^7.0.0",
-    "vue-router": "^4.5.1"
+    "vue-router": "^4.5.1",
+    "typescript": "^5.3.3"
   },
   "volta": {
     "node": "22.17.0"
   }
 }
+

package/types/components/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./systems/index.js";
+//# sourceMappingURL=index.d.ts.map

package/types/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../lib/components/index.js"],"names":[],"mappings":""}

package/types/components/systems/index.d.ts

@@ -0,0 +1,2 @@
+export {};
+//# sourceMappingURL=index.d.ts.map

package/types/components/systems/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../lib/components/systems/index.js"],"names":[],"mappings":""}