@ulu/frontend-vue 0.1.0-beta.3 → 0.1.0-beta.30

package/README.md

@@ -1,9 +1,120 @@
 # @ulu/frontend-vue
 
-Vue component library for [Ulu frontend](https://jscherbe.github.io/frontend/).
+Vue component library for the [Ulu frontend](https://jscherbe.github.io/frontend/) ecosystem.
 
-- [Documentation](https://jscherbe.github.io/frontend-vue/)
+This library provides a set of reusable, themeable, and accessible Vue 3 components. It is designed to be modular, allowing you to import only the components and features you need, ensuring your application remains lightweight and performant.
+
+- [Documentation / Demos](https://jscherbe.github.io/frontend-vue/)
 - [Change Log](CHANGELOG.md)
+- [Installation](#installation)
+- [General Usage](#usage)
+  - [1. SCSS Setup](#1-scss-setup)
+  - [2. Plugin Registration](#2-plugin-registration)
+    - [Core Plugin (Required)](#core-plugin-required)
+    - [Optional Plugins](#optional-plugins)
+  - [3. Component Usage](#3-component-usage)
+- [Resources](#resources)
+  - [Snippets](#snippets)
+
+
+## Installation
+
+Install the library and its required peer dependencies.
+
+```bash
+npm install @ulu/frontend-vue
+```
+
+## Usage
+
+Using the library involves three main steps: setting up the SCSS, registering the Vue plugins, and importing the components you need.
+
+### 1. SCSS Setup
+
+Import the main stylesheet into your project's primary SCSS file. This will bring in all the necessary styles for the components.
+
+```scss
+// Import Ulu Vue component styles
+@use "@ulu/frontend-vue/scss" as ulu-vue;
+
+// Configure
+@include ulu-vue.plugin-toast-set((
+  "background-color" : gray
+));
+
+// Output (plugins/component) stylesheets that you use
+@include ulu-vue.plugin-toast-styles();
+```
+
+### 2. Plugin Registration
+
+This library uses a plugin-based system to configure core features and functionality. You'll need to register them in your main application entry point (e.g., `src/main.js`).
+
+#### Core Plugin (Required)
+
+The `corePlugin` is **required** to set up the library's foundational settings, such as the icon system, which is used by many components. 
+
+```javascript
+// src/main.js
+import { createApp } from 'vue';
+import App from './App.vue';
+import router from './router'; // Your vue-router instance
+
+import { corePlugin } from '@ulu/frontend-vue';
+
+const app = createApp(App);
+
+app.use(router);
+
+// Register the core plugin
+app.use(corePlugin, {
+  // Optional: You can override default settings here.
+  // For example, to use FontAwesome's static CSS classes instead of the Vue component:
+  // fontAwesomeStatic: true, 
+});
+
+app.mount('#app');
+```
+
+#### Optional Plugins
+
+Other plugins for features like responsive breakpoints, global modals, and toast notifications can be registered as needed.
+
+```javascript
+// src/main.js
+import { breakpointsPlugin, modalsPlugin, toastPlugin } from '@ulu/frontend-vue';
+
+// ...
+app.use(breakpointsPlugin);
+app.use(modalsPlugin, { /* your global modal configurations */ });
+app.use(toastPlugin, { /* default toast options */ });
+// ...
+```
+
+### 3. Component Usage
+
+Components are designed to be imported individually. This approach is highly recommended as it allows build tools like Vite or Webpack to **tree-shake** unused components, keeping your final application bundle as small as possible.
+
+**Example:**
+```vue
+<script setup>
+  import { UluButton, UluAlert } from '@ulu/frontend-vue';
+</script>
+
+<template>
+  <UluAlert type="success" title="Success!">
+    This is an alert component.
+  </UluAlert>
+
+  <UluButton primary to="/">Click Me</UluButton>
+</template>
+```
+
+
+
 
+# Resources
 
+## Snippets
 
+- Snippets for vscode are available in the repo's at [/resources/vscode/](https://github.com/Jscherbe/frontend-vue/tree/main/resources/vscode)

package/dist/{breakpoints-Cq2oSdYS.js → breakpoints-O2rDlMRj.js}

@@ -1,4 +1,4 @@
-import { l as o, r as h, a as p, g as v } from "./index-CMGxe_M1.js";
+import { l as o, r as h, a as p, g as v } from "./index-BkFIm5Ds.js";
 const k = {
   iconClassClose: "css-icon css-icon--close",
   iconClassDragX: "css-icon css-icon--drag-x",

package/dist/frontend-vue.css

@@ -1 +1 @@
-.UluFacets__more-facets{display:flex;flex-direction:column}.UluFacets__more-facets.UluCollapsibleRegion--open .UluCollapsibleRegion__content,.UluFacets__more-facets.UluCollapsibleRegion--transitioning .UluCollapsibleRegion__content{order:-1}.UluFacetsFade-enter-active,.UluFacetsFade-leave-active{transition:opacity .25s ease}.UluFacetsFade-enter-from,.UluFacetsFade-leave-to{opacity:0}.scroll-anchors__rail{border-left:3px solid rgb(220,220,220);padding-left:1rem}.scroll-anchors__indicator{position:absolute;top:0;left:0;width:3px;background-color:#000}.scroll-anchors__indicator--can-transition{transition-property:height,transform;transition-timing-function:ease-in-out;transition-duration:.25s}
+.UluFacetsDropdownFilters{display:flex;gap:1rem;align-items:center;flex-wrap:wrap}.UluFacetsDropdownFilters__group{display:flex;gap:.5rem;align-items:center}.UluFacetsHeaderLayout__header{display:flex;gap:1rem;align-items:center;margin-bottom:1.5rem;flex-wrap:wrap}.UluFacetsResults__list{list-style:none;padding:0}.UluFacetsFade-enter-active,.UluFacetsFade-leave-active{transition:opacity .25s ease}.UluFacetsFade-enter-from,.UluFacetsFade-leave-to{opacity:0}.UluFacetsSidebarLayout__body{display:grid;grid-template-columns:1fr;gap:2rem}@media (min-width: 768px){.UluFacetsSidebarLayout__body{grid-template-columns:250px 1fr}}.scroll-anchors__rail{border-left:3px solid rgb(220,220,220);padding-left:1rem}.scroll-anchors__indicator{position:absolute;top:0;left:0;width:3px;background-color:#000}.scroll-anchors__indicator--can-transition{transition-property:height,transform;transition-timing-function:ease-in-out;transition-duration:.25s}

package/dist/frontend-vue.js

@@ -1,82 +1,88 @@
-import { _ as l, L as e, p as u, $ as o, q as U, s as t, O as n, t as i, u as r, v as S, D as c, U as d, T as g, M as p, w as k, e as m, V as T, W as b, x as h, a2 as F, a4 as P, a3 as A, E as w, F as y, G as M, H as v, I as x, J as B, y as D, ad as L, z as f, A as C, P as I, Q as R, f as N, R as E, h as z, X as G, Y as j, a0 as q, a1 as O, Z as V, a5 as W, a6 as H, a7 as J, a8 as K, K as Q, a9 as X, aa as Y, ab as Z, ac as _, S as $, ae as aa, af as sa, B as la, j as ea, k as ua, m as oa, n as Ua, o as ta, ag as na, ah as ia, ai as ra, C as Sa, N as ca, d as da, an as ga, as as pa, aq as ka, ap as ma, b as Ta, i as ba, c as ha, ar as Fa, ao as Pa, am as Aa, aj as wa, ak as ya, al as Ma } from "./index-CMGxe_M1.js";
+import { _ as l, N as e, s as u, a1 as o, t, u as U, Q as i, v as r, w as n, x as c, y as S, U as d, W as F, O as p, z as b, h as m, X as g, Y as k, A as T, a5 as P, a6 as h, a7 as w, a8 as y, ad as A, a9 as L, aa as v, ab as M, ac as x, H as B, I as R, J as D, K as f, L as C, B as I, am as N, C as E, D as j, R as q, S as G, j as V, T as z, k as H, Z as O, $ as W, a2 as J, a3 as K, a0 as Q, ae as X, af as Y, ag as Z, ah as _, M as $, G as aa, ai as sa, aj as la, ak as ea, al as ua, V as oa, an as ta, ao as Ua, E as ia, m as ra, n as na, o as ca, p as Sa, q as da, ap as Fa, aq as pa, ar as ba, F as ma, P as ga, f as ka, b as Ta, d as Pa, c as ha, e as wa, aw as ya, ay as Aa, a4 as La, as as va, at as Ma, ax as xa, av as Ba, au as Ra, i as Da } from "./index-BkFIm5Ds.js";
 export {
   l as UluAccordion,
   e as UluAdaptiveLayout,
   u as UluAlert,
   o as UluAnimateNumber,
-  U as UluBadge,
-  t as UluBadgeStack,
-  n as UluBreadcrumb,
-  i as UluButton,
-  r as UluCallout,
+  t as UluBadge,
+  U as UluBadgeStack,
+  i as UluBreadcrumb,
+  r as UluButton,
+  n as UluButtonVerbose,
+  c as UluCallout,
   S as UluCard,
-  c as UluCheckboxMenu,
   d as UluCollapsibleRegion,
-  g as UluCondText,
+  F as UluCondText,
   p as UluDataGrid,
-  k as UluDefinitionList,
+  b as UluDefinitionList,
   m as UluDropdown,
-  T as UluEmpty,
-  b as UluEmptyView,
-  h as UluExternalLink,
-  F as UluFacets,
-  P as UluFacetsList,
-  A as UluFacetsSearch,
-  w as UluFileDisplay,
-  y as UluFormDropzone,
-  M as UluFormFile,
-  v as UluFormMessage,
-  x as UluFormSelect,
-  B as UluFormText,
-  D as UluIcon,
-  L as UluImageSlideShow,
-  f as UluList,
-  C as UluMain,
-  I as UluMenu,
-  R as UluMenuStack,
-  N as UluModal,
-  E as UluNavStrip,
-  z as UluOverflowPopover,
-  G as UluPlaceholderImage,
-  j as UluPlaceholderText,
-  q as UluProgressBar,
-  O as UluProgressDonut,
-  V as UluRouteAnnouncer,
-  W as UluScrollAnchors,
-  H as UluScrollAnchorsNav,
-  J as UluScrollAnchorsNavAnimated,
-  K as UluScrollAnchorsSection,
-  Q as UluSearchForm,
-  X as UluShowSkeleton,
-  Y as UluSkeletonContent,
-  Z as UluSkeletonMedia,
-  _ as UluSkeletonTextInline,
-  $ as UluSkipLink,
-  aa as UluSlideShow,
-  sa as UluSlideShowSlide,
-  la as UluSpokeSpinner,
-  ea as UluTab,
-  ua as UluTabGroup,
-  oa as UluTabList,
-  Ua as UluTabPanel,
-  ta as UluTabPanels,
-  na as UluTableSticky,
-  ia as UluTableStickyRows,
-  ra as UluTableStickyTable,
-  Sa as UluTag,
-  ca as UluTitleRail,
-  da as breakpointsPlugin,
-  ga as getDefaultSettings,
-  pa as getIconByType,
-  ka as getSetting,
-  ma as getSettings,
-  Ta as modalsPlugin,
-  ba as popoversPlugin,
-  ha as toastPlugin,
-  Fa as updateSetting,
-  Pa as updateSettings,
-  Aa as useBreakpointManager,
-  wa as useIcon,
-  ya as useModifiers,
-  Ma as useWindowResize
+  g as UluEmpty,
+  k as UluEmptyView,
+  T as UluExternalLink,
+  P as UluFacetsFilterLists,
+  h as UluFacetsFilterPopovers,
+  w as UluFacetsFilterSelects,
+  y as UluFacetsHeaderLayout,
+  A as UluFacetsList,
+  L as UluFacetsResults,
+  v as UluFacetsSearch,
+  M as UluFacetsSidebarLayout,
+  x as UluFacetsSort,
+  B as UluFileDisplay,
+  R as UluFormFile,
+  D as UluFormMessage,
+  f as UluFormSelect,
+  C as UluFormText,
+  I as UluIcon,
+  N as UluImageSlideShow,
+  E as UluList,
+  j as UluMain,
+  q as UluMenu,
+  G as UluMenuStack,
+  V as UluModal,
+  z as UluNavStrip,
+  H as UluOverflowPopover,
+  O as UluPlaceholderImage,
+  W as UluPlaceholderText,
+  J as UluProgressBar,
+  K as UluProgressDonut,
+  Q as UluRouteAnnouncer,
+  X as UluScrollAnchors,
+  Y as UluScrollAnchorsNav,
+  Z as UluScrollAnchorsNavAnimated,
+  _ as UluScrollAnchorsSection,
+  $ as UluSearchForm,
+  aa as UluSelectableMenu,
+  sa as UluShowSkeleton,
+  la as UluSkeletonContent,
+  ea as UluSkeletonMedia,
+  ua as UluSkeletonText,
+  oa as UluSkipLink,
+  ta as UluSlideShow,
+  Ua as UluSlideShowSlide,
+  ia as UluSpokeSpinner,
+  ra as UluTab,
+  na as UluTabGroup,
+  ca as UluTabList,
+  Sa as UluTabPanel,
+  da as UluTabPanels,
+  Fa as UluTableSticky,
+  pa as UluTableStickyRows,
+  ba as UluTableStickyTable,
+  ma as UluTag,
+  ga as UluTitleRail,
+  ka as breakpointsPlugin,
+  Ta as corePlugin,
+  Pa as modalsPlugin,
+  ha as popoversPlugin,
+  wa as toastPlugin,
+  ya as useBreakpointManager,
+  Aa as useDocumentTitle,
+  La as useFacets,
+  va as useIcon,
+  Ma as useModifiers,
+  xa as usePagination,
+  Ba as useRequiredInject,
+  Ra as useWindowResize,
+  Da as utils
 };