@ulu/frontend-vue 0.1.0-beta.4 → 0.1.0-beta.6

package/README.md

@@ -1,9 +1,113 @@
 # @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)
+
+
+## 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>
+```
+
 
 
 

package/dist/{breakpoints-BegXzJ94.js → breakpoints-SWofnYUx.js}

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

package/dist/frontend-vue.js

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