@ulu/frontend-vue 0.1.0-beta.2 → 0.1.0-beta.21

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-ClT9bfZm.js → breakpoints-DOXmgVoG.js}

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