@m2s2/vue-lib 1.0.0 → 2.0.0

package/README.md

@@ -0,0 +1,96 @@
+# @m2s2/vue-lib
+
+Vue 3 component library by M²S² Engineering Group. Built with Composition API and `<script setup>` throughout.
+
+For live component demos and prop documentation, see [Storybook](https://storybook.m2s2.io).
+
+## Installation
+
+```bash
+npm install @m2s2/vue-lib @m2s2/tokens
+```
+
+## Peer Dependencies
+
+| Package | Version |
+|---------|---------|
+| `vue` | >=3.0.0 |
+| `@m2s2/models` | >=0.1.0 |
+| `@m2s2/tokens` | >=1.0.0 |
+
+## Setup
+
+Import the stylesheet in your entry file:
+
+```typescript
+import { createApp } from 'vue';
+import App from './App.vue';
+import '@m2s2/vue-lib/styles';
+
+createApp(App).mount('#app');
+```
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Navbar, Footer } from '@m2s2/vue-lib';
+import type { NavbarConfig, FooterConfig } from '@m2s2/vue-lib';
+
+const navbar: NavbarConfig = { brand: 'My App', brandPath: '/', isFixed: true, buttons: [] };
+const footer: FooterConfig = { brandName: 'My App', links: [] };
+</script>
+
+<template>
+  <Navbar :config="navbar" />
+  <main>...</main>
+  <Footer :config="footer" />
+</template>
+```
+
+## Components
+
+| Component | Description |
+|-----------|-------------|
+| `Navbar` | Application navigation bar |
+| `Footer` | Application footer |
+| `BaseCard` | Foundational card with variant support |
+| `BlogCard` | Blog post card with cover image, tags, and reading time |
+| `FeatureCard` | Feature highlight card with icon and items |
+| `PageHeader` | Full-width page header with title and subtitle |
+| `SectionHeader` | Section title with optional label and subtitle |
+| `StatRow` | Horizontal row of key statistics |
+| `ProcessSteps` | Numbered step sequence |
+| `CtaSection` | Call-to-action banner |
+| `StatusBadge` | Status indicator in badge or pill variant |
+| `DataTable` | Sortable, resizable data table |
+| `SubscribeForm` | Email subscription form (anon and authenticated modes) |
+| `Dialog` | Modal dialog (use with `DialogProvider`) |
+| `Panel` | Side panel/drawer (use with `PanelProvider`) |
+
+## Dialog and Panel
+
+Dialog and Panel are provided via Vue's `provide`/`inject` system. Wrap your app (or the relevant subtree) with the providers and use the composables to open them imperatively:
+
+```vue
+<script setup lang="ts">
+import { DialogProvider, PanelProvider } from '@m2s2/vue-lib';
+</script>
+
+<template>
+  <DialogProvider>
+    <PanelProvider>
+      <RouterView />
+    </PanelProvider>
+  </DialogProvider>
+</template>
+```
+
+```vue
+<script setup lang="ts">
+import { useDialog, usePanel } from '@m2s2/vue-lib';
+
+const { dialog, confirm } = useDialog();
+const { panel } = usePanel();
+</script>
+```

package/dist/vue-lib/src/components/Dialog/DialogProvider.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=DialogProvider.vue.d.ts.map

package/dist/vue-lib/src/components/Dialog/DialogProvider.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogProvider.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/DialogProvider.vue"],"names":[],"mappings":"AAwHA,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe,+QAKnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAE1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/vue-lib/src/components/Dialog/useDialog.d.ts

@@ -0,0 +1,9 @@
+import { type InjectionKey } from 'vue';
+import type { M2S2DialogData } from '@m2s2/models';
+export interface DialogContext {
+    dialog: (data: M2S2DialogData) => Promise<unknown>;
+    confirm: (title: string, message?: string) => Promise<boolean>;
+}
+export declare const DIALOG_KEY: InjectionKey<DialogContext>;
+export declare function useDialog(): DialogContext;
+//# sourceMappingURL=useDialog.d.ts.map

package/dist/vue-lib/src/components/Dialog/useDialog.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"useDialog.d.ts","sourceRoot":"","sources":["../../../../../src/components/Dialog/useDialog.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,cAAc,CAAC;AAEnD,MAAM,WAAW,aAAa;IAC5B,MAAM,EAAG,CAAC,IAAI,EAAE,cAAc,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;IACpD,OAAO,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,CAAC,EAAE,MAAM,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAChE;AAED,eAAO,MAAM,UAAU,EAAE,YAAY,CAAC,aAAa,CAAoB,CAAC;AAExE,wBAAgB,SAAS,IAAI,aAAa,CAIzC"}

package/dist/vue-lib/src/components/Panel/PanelProvider.vue.d.ts

@@ -0,0 +1,13 @@
+declare var __VLS_1: {};
+type __VLS_Slots = {} & {
+    default?: (props: typeof __VLS_1) => any;
+};
+declare const __VLS_component: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+declare const _default: __VLS_WithSlots<typeof __VLS_component, __VLS_Slots>;
+export default _default;
+type __VLS_WithSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=PanelProvider.vue.d.ts.map

package/dist/vue-lib/src/components/Panel/PanelProvider.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PanelProvider.vue.d.ts","sourceRoot":"","sources":["../../../../../src/components/Panel/PanelProvider.vue"],"names":[],"mappings":"AAkGA,QAAA,IAAI,OAAO,IAAW,CAAE;AACxB,KAAK,WAAW,GAAG,EAAE,GACnB;IAAE,OAAO,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,OAAO,KAAK,GAAG,CAAA;CAAE,CAAC;AAoB/C,QAAA,MAAM,eAAe,+QAKnB,CAAC;wBACkB,eAAe,CAAC,OAAO,eAAe,EAAE,WAAW,CAAC;AAAzE,wBAA0E;AAE1E,KAAK,eAAe,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IAChC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/vue-lib/src/components/Panel/usePanel.d.ts

@@ -0,0 +1,8 @@
+import { type InjectionKey } from 'vue';
+import type { M2S2PanelData } from '@m2s2/models';
+export interface PanelContext {
+    panel: (data: M2S2PanelData) => Promise<unknown>;
+}
+export declare const PANEL_KEY: InjectionKey<PanelContext>;
+export declare function usePanel(): PanelContext;
+//# sourceMappingURL=usePanel.d.ts.map

package/dist/vue-lib/src/components/Panel/usePanel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"usePanel.d.ts","sourceRoot":"","sources":["../../../../../src/components/Panel/usePanel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAU,KAAK,YAAY,EAAE,MAAM,KAAK,CAAC;AAChD,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAElD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,CAAC,IAAI,EAAE,aAAa,KAAK,OAAO,CAAC,OAAO,CAAC,CAAC;CAClD;AAED,eAAO,MAAM,SAAS,EAAE,YAAY,CAAC,YAAY,CAAmB,CAAC;AAErE,wBAAgB,QAAQ,IAAI,YAAY,CAIvC"}

package/package.json

@@ -1,10 +1,16 @@
 {
   "name": "@m2s2/vue-lib",
-  "version": "1.0.0",
+  "version": "2.0.0",
   "description": "Vue 3 component library by M²S² Engineering Group.",
   "author": "M²S² Engineering Group <contact@m2s2.io>",
   "license": "MIT",
-  "keywords": ["vue", "vue3", "component-library", "ui", "m2s2"],
+  "keywords": [
+    "vue",
+    "vue3",
+    "component-library",
+    "ui",
+    "m2s2"
+  ],
   "repository": {
     "type": "git",
     "url": "https://github.com/M2S2-Engineering-Group/m2s2-design-system",
@@ -24,7 +30,9 @@
     },
     "./styles": "./dist/vue-lib.css"
   },
-  "files": ["dist"],
+  "files": [
+    "dist"
+  ],
   "scripts": {
     "build": "vite build && vue-tsc --emitDeclarationOnly --declarationDir dist",
     "build:prod": "vite build && vue-tsc --emitDeclarationOnly --declarationDir dist",