@maropost-ui/liquidsky-ui 0.1.41 → 0.1.45

package/README.md

@@ -40,6 +40,102 @@ import { AppBreadcrumb } from '@maropost-ui/liquidsky-ui'
 
 ------------------------------------------------------------------------
 
+------------------------------------------------------------------------
+### Liquidsky UI in Nuxt (Vue 3 + Vuetify)
+
+Use these steps with **Nuxt 4** (`srcDir` defaults to the [`app/` directory](https://nuxt.com/docs/4.x/directory-structure)).
+
+#### 1. Install packages
+
+```bash
+npm install @maropost-ui/liquidsky-ui
+```
+
+Liquidsky ships Maropost’s Vuetify setup (themes, defaults, registration) and lists **Vuetify** and other runtime libraries as **dependencies** of the package, so they are installed automatically with **`@maropost-ui/liquidsky-ui`**. You do not add **`vuetify`** (or similar) as a separate install step in your app.
+
+Nuxt already provides **Vue** and **Vue Router** for a normal app shell.
+ 
+
+#### 2. Import Liquidsky global styles (`nuxt.config.ts`)
+
+Liquidsky’s CSS entry wires up Vuetify and library styles:
+
+```ts
+export default defineNuxtConfig({
+  css: ['@maropost-ui/liquidsky-ui/styles'],
+})
+```
+
+#### 3. Register the Liquidsky / Vuetify plugin (`app/plugins/**`)
+
+Liquidsky’s default export installs **Vuetify** (defaults, directives, aliases). Plugins must live under **`app/plugins/`**, not project-root `plugins/`, so Nuxt 4 discovers them automatically.
+
+Example `app/plugins/liquidsky-ui.ts`:
+
+```ts
+import LiquidskyUI from '@maropost-ui/liquidsky-ui'
+
+export default defineNuxtPlugin({
+  name: 'liquidsky-ui',
+  enforce: 'post',
+  async setup(nuxtApp) {
+    // Liquidsky’s install() is async; Vue does not await app.use(). Awaiting avoids
+    // SSR rendering before Vuetify is registered.
+    await Promise.resolve(LiquidskyUI.install(nuxtApp.vueApp))
+  },
+})
+```
+
+Notes:
+
+- Prefer **`LiquidskyUI.install`** + **`await`** as above rather than **`vueApp.use(LiquidskyUI)`**, so SSR waits for registration.
+- To adjust Vuetify (themes, **`defaults`**, component overrides, etc.), pass a second argument to **`install`**. It is merged with Liquidsky’s built-in config (the same options shape as **`createLiquidSkyVuetify`** from **`@maropost-ui/liquidsky-ui`**):
+
+```ts
+await Promise.resolve(
+  LiquidskyUI.install(nuxtApp.vueApp, {
+    defaults: {
+      // e.g. change overlay attach away from ".maropost-app"
+      global: { attach: '#app' },
+    },
+  }),
+)
+```
+
+#### 4. Wrap the shell with **`v-app`** (*`maropost-app` optional*)
+
+Put a root **`v-app`** around your UI **[`app/app.vue`](https://nuxt.com/docs/4.x/directory-structure/app/app)** (often with **`v-main`** for page content)—that matches normal Vuetify usage for layout and app-wide behavior.
+
+Adding **`class="maropost-app"`** is **optional**:
+
+- With **Liquidsky’s defaults**, Vuetify uses **`defaults.global.attach: '.maropost-app'`**, so floated layers (menus, tooltips, dialogs) expect an element with that class. For example `<v-app class="maropost-app">` is an easy match.
+- If you prefer not to use that class, override **`defaults.global.attach`** when you create/customize Liquidsky’s Vuetify instance so it points at your own wrapper—or another attach target—as long as it exists in the DOM.
+
+```vue
+<template>
+  <v-app class="maropost-app">
+    <!-- Nuxt replaces this with layouts/pages -->
+    <NuxtLayout />
+  </v-app>
+</template>
+```
+
+#### 5. Use components
+
+Import from the package wherever you need them:
+
+```vue
+<script setup lang="ts">
+import { AppBreadcrumb, TheNotificationIcon } from '@maropost-ui/liquidsky-ui'
+</script>
+```
+
+You may also keep using **`v-btn`**, **`v-tooltip`**, etc., after Liquidsky is installed—they are registered on the Vue app globally.
+
+-------------------------------------------------------------------------
+
+-------------------------------------------------------------------------
+
 
 ## @maropost-ui/liquidsky-ui Local Development Guide
 Use these methods to test @maropost-ui/liquidsky-ui changes in your consuming project (e.g., commerce-frontend or commerce-backoffice) without publishing to npm. Both leverage npm's linking and packaging features for rapid iteration in your app workflow.
@@ -188,59 +284,5 @@ stories/
 ├── utils/               # Utility stories
 ```
 
-## Best Practices for Auto-Documentation
-
-### 1. Use JSDoc Comments
-
-```typescript
-/**
- * @description Search functionality composable with route integration
- * @example
- * ```typescript
- * const { keyword, submitSearch } = useSearch()
- * submitSearch()
- * ```
- */
-export function useSearch(): SearchInterface
-```
-
-### 2. Document Component Props
-
-```typescript
-export interface SearchBarProps {
-  /** Search placeholder text */
-  placeholder?: string
-  /** Enable automatic route integration */
-  useRouteIntegration?: boolean
-}
-```
-
-### 3. Provide Usage Examples
-
-```vue
-<!--
-Usage Example:
-<TheSearchBar 
-  placeholder="Search products..."
-  @search="handleSearch"
-/>
--->
-```
-
-### 4. Use TypeScript Types
-
-```typescript
-// Explicit return types help documentation
-export function useValidation(): ValidationInterface {
-  // ...
-}
-```
-
-## Contributing
-
-1. Follow the existing code style and patterns
-2. Add JSDoc comments for new functions and components
-3. Update this README when adding new features
-4. Ensure all components are properly typed with TypeScript
 
 

package/dist/components/AppDropdown/useDropdownData.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDropdownData.d.ts","sourceRoot":"","sources":["../../../src/components/AppDropdown/useDropdownData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAGV,kBAAkB,EAClB,WAAW,EACZ,MAAM,8BAA8B,CAAC;AAEtC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,CAAC,GAAG,GAAG,EAC7C,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAC/B,YAAY,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACtC,OAAO,GAAE,MAAM,EAAO,EACtB,WAAW,GAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAe,EACzC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EAC/B,MAAM,GAAE,GAAG,CAAC,MAAM,CAAW,EAC7B,YAAY,GAAE,GAAG,CAAC,CAAC,EAAE,CAAW,EAChC,KAAK,GAAE,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,CAAkB,EAChD,iBAAiB,GAAE,MAAM,IAAe;;;;;;;;;;;;kCA2MH,OAAO;gCAST,OAAO;;EAgC3C"}
+{"version":3,"file":"useDropdownData.d.ts","sourceRoot":"","sources":["../../../src/components/AppDropdown/useDropdownData.ts"],"names":[],"mappings":"AAAA,OAAO,EAAwB,KAAK,GAAG,EAAE,MAAM,KAAK,CAAC;AAErD,OAAO,KAAK,EAGV,kBAAkB,EAClB,WAAW,EACZ,MAAM,8BAA8B,CAAC;AAGtC;;GAEG;AACH,MAAM,CAAC,OAAO,UAAU,eAAe,CAAC,CAAC,GAAG,GAAG,EAC7C,WAAW,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EAC5B,OAAO,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,EAC/B,YAAY,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EACtC,OAAO,GAAE,MAAM,EAAO,EACtB,WAAW,GAAE,CAAC,IAAI,EAAE,CAAC,KAAK,CAAe,EACzC,KAAK,GAAE,MAAM,CAAC,MAAM,EAAE,GAAG,CAAM,EAC/B,MAAM,GAAE,GAAG,CAAC,MAAM,CAAW,EAC7B,YAAY,GAAE,GAAG,CAAC,CAAC,EAAE,CAAW,EAChC,KAAK,GAAE,GAAG,CAAC,CAAC,GAAG,CAAC,EAAE,GAAG,SAAS,CAAkB,EAChD,iBAAiB,GAAE,MAAM,IAAe;;;;;;;;;;;;kCA2MH,OAAO;gCAST,OAAO;;EAgC3C"}

package/dist/components/index.d.ts

@@ -34,5 +34,6 @@ export { default as AlertModal } from "./AlertModal.vue";
 export { default as TheOnboardingBanner } from "./TheOnboardingBanner.vue";
 export { default as TheOnboardingScreenChecklists } from "./TheOnboardingScreenChecklists.vue";
 export { default as AppButton } from "./AppButton.vue";
+export { default as SlVueTreeNext } from "./SlVueTreeNext.vue";
 export { default as timezoneList } from './TheTimezone/timezone.json';
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAE/E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,iCAAiC,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,oCAAoC,CAAC;AAChF,OAAO,EAAE,OAAO,IAAI,oBAAoB,EAAE,MAAM,yCAAyC,CAAC;AAC1F,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,sCAAsC,CAAC;AAEpF,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,wBAAwB,CAAC;AACrE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,yBAAyB,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,sBAAsB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAG7D,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AACzE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAC/D,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8BAA8B,CAAC;AACjF,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACnE,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,2BAA2B,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,6BAA6B,EAAE,MAAM,qCAAqC,CAAC;AAC/F,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAGvD,OAAO,EAAC,OAAO,IAAI,YAAY,EAAE,MAAM,6BAA6B,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"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"}