@changebot/widgets-vue 0.1.22 → 0.2.1

package/README.md

@@ -28,14 +28,15 @@ import {
 </script>
 
 <template>
-  <ChangebotProvider slug="your-team-slug">
-    <header>
-      <h1>My App</h1>
-      <ChangebotBadge />
-    </header>
+  <!-- Provider can be placed anywhere - components don't need to be nested -->
+  <ChangebotProvider slug="your-team-slug" />
 
-    <ChangebotPanel mode="drawer-right" />
-  </ChangebotProvider>
+  <header>
+    <h1>My App</h1>
+    <ChangebotBadge />
+  </header>
+
+  <ChangebotPanel mode="drawer-right" />
 </template>
 ```
 
@@ -43,7 +44,7 @@ import {
 
 ### ChangebotProvider
 
-The provider component manages state and data fetching for all child Changebot components. Wrap your components with this provider to enable automatic updates and state synchronization.
+The provider component manages state and data fetching for all Changebot components. It listens at the document level, so components do **not** need to be nested inside it—they can be placed anywhere on the page.
 
 #### Props
 
@@ -56,9 +57,10 @@ The provider component manages state and data fetching for all child Changebot c
 
 ```vue
 <template>
-  <ChangebotProvider slug="acme-corp">
-    <!-- Your components -->
-  </ChangebotProvider>
+  <!-- Components can be siblings - no nesting required -->
+  <ChangebotProvider slug="acme-corp" />
+  <ChangebotBadge />
+  <ChangebotPanel />
 </template>
 ```
 
@@ -93,10 +95,10 @@ A badge component that displays the count of new, unread updates. Clicking the b
 | Prop | Type | Default | Description |
 |------|------|---------|-------------|
 | `scope` | `string` | `"default"` | Scope to connect to (must match provider scope) |
-| `show-count` | `boolean` | `true` | Whether to display the numeric count |
 | `theme` | `Theme` | - | Fixed theme (see Theming section) |
 | `light` | `Theme` | - | Theme for light mode (auto-switches based on system preference) |
 | `dark` | `Theme` | - | Theme for dark mode (auto-switches based on system preference) |
+| `indicator` | `"count"` \| `"dot"` | `"count"` | Display style: show count number or dot only |
 
 #### Example
 
@@ -108,14 +110,14 @@ A badge component that displays the count of new, unread updates. Clicking the b
   <!-- With theme -->
   <ChangebotBadge theme="catppuccin-mocha" />
 
+  <!-- Show dot instead of count -->
+  <ChangebotBadge indicator="dot" />
+
   <!-- Auto-switching theme -->
   <ChangebotBadge
     light="catppuccin-latte"
     dark="catppuccin-mocha"
   />
-
-  <!-- Hidden count (shows dot only) -->
-  <ChangebotBadge :show-count="false" />
 </template>
 ```
 
@@ -413,21 +415,6 @@ Displays as a centered modal dialog with backdrop overlay. Best for focused, imp
 
 Components can work independently without a provider for simple use cases:
 
-#### Standalone Badge
-
-```vue
-<script setup>
-import { ref } from 'vue';
-import { ChangebotBadge } from '@changebot/widgets-vue';
-
-const count = ref(3);
-</script>
-
-<template>
-  <ChangebotBadge :count="count" :show-count="true" />
-</template>
-```
-
 #### Standalone Panel
 
 ```vue
@@ -479,33 +466,34 @@ import {
 </script>
 
 <template>
-  <ChangebotProvider slug="acme-corp">
-    <!-- Banner appears automatically for banner-highlighted updates -->
-    <ChangebotBanner theme="catppuccin-mocha" />
+  <!-- Provider can be placed anywhere -->
+  <ChangebotProvider slug="acme-corp" />
 
-    <header>
-      <h1>ACME Corp</h1>
-      <!-- Badge shows count of new updates -->
-      <ChangebotBadge theme="catppuccin-mocha" />
-    </header>
+  <!-- Banner appears automatically for banner-highlighted updates -->
+  <ChangebotBanner theme="catppuccin-mocha" />
 
-    <main>
-      <!-- Your app content -->
-    </main>
+  <header>
+    <h1>ACME Corp</h1>
+    <!-- Badge shows count of new updates -->
+    <ChangebotBadge theme="catppuccin-mocha" />
+  </header>
 
-    <!-- Panel opens when badge is clicked -->
-    <ChangebotPanel
-      mode="drawer-right"
-      theme="catppuccin-mocha"
-    />
+  <main>
+    <!-- Your app content -->
+  </main>
 
-    <!-- Toast appears for toast-highlighted updates -->
-    <ChangebotToast
-      position="bottom-right"
-      :auto-dismiss="5"
-      theme="catppuccin-mocha"
-    />
-  </ChangebotProvider>
+  <!-- Panel opens when badge is clicked -->
+  <ChangebotPanel
+    mode="drawer-right"
+    theme="catppuccin-mocha"
+  />
+
+  <!-- Toast appears for toast-highlighted updates -->
+  <ChangebotToast
+    position="bottom-right"
+    :auto-dismiss="5"
+    theme="catppuccin-mocha"
+  />
 </template>
 ```
 

package/dist/components/stencil-generated/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stencil-generated/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE/F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAK3C,eAAO,MAAM,cAAc,EAAE,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAOjE,CAAC;AAGH,eAAO,MAAM,eAAe,EAAE,mBAAmB,CAAC,GAAG,CAAC,eAAe,CAMnE,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAMjE,CAAC;AAGH,eAAO,MAAM,iBAAiB,EAAE,mBAAmB,CAAC,GAAG,CAAC,iBAAiB,CAOvE,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAQjE,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/stencil-generated/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAmB,KAAK,mBAAmB,EAAE,MAAM,oCAAoC,CAAC;AAE/F,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,iBAAiB,CAAC;AAK3C,eAAO,MAAM,cAAc,EAAE,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAOjE,CAAC;AAGH,eAAO,MAAM,eAAe,EAAE,mBAAmB,CAAC,GAAG,CAAC,eAAe,CAKnE,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAMjE,CAAC;AAGH,eAAO,MAAM,iBAAiB,EAAE,mBAAmB,CAAC,GAAG,CAAC,iBAAiB,CAQvE,CAAC;AAGH,eAAO,MAAM,cAAc,EAAE,mBAAmB,CAAC,GAAG,CAAC,cAAc,CAOjE,CAAC"}

package/dist/components/stencil-generated/index.js

@@ -3,41 +3,40 @@
 /* auto-generated vue proxies */
 import { defineContainer } from '@stencil/vue-output-target/runtime';
 export const ChangebotBadge = /*@__PURE__*/ defineContainer('changebot-badge', undefined, [
-    'scope',
     'theme',
+    'scope',
     'light',
     'dark',
-    'showCount',
+    'indicator',
     'count'
 ]);
 export const ChangebotBanner = /*@__PURE__*/ defineContainer('changebot-banner', undefined, [
-    'scope',
     'theme',
+    'scope',
     'light',
-    'dark',
-    'preview'
+    'dark'
 ]);
 export const ChangebotPanel = /*@__PURE__*/ defineContainer('changebot-panel', undefined, [
-    'scope',
     'theme',
+    'scope',
     'light',
     'dark',
     'mode'
 ]);
 export const ChangebotProvider = /*@__PURE__*/ defineContainer('changebot-provider', undefined, [
-    'baseUrl',
     'slug',
+    'userId',
+    'userData',
     'scope',
+    'baseUrl',
     'mockData',
-    'userId',
-    'userData'
+    'preview'
 ]);
 export const ChangebotToast = /*@__PURE__*/ defineContainer('changebot-toast', undefined, [
-    'scope',
     'theme',
+    'scope',
     'light',
     'dark',
     'position',
-    'autoDismiss',
-    'preview'
+    'autoDismiss'
 ]);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@changebot/widgets-vue",
-  "version": "0.1.22",
+  "version": "0.2.1",
   "description": "Vue wrapper components for Changebot widgets",
   "main": "dist/index.js",
   "module": "dist/index.js",
@@ -13,7 +13,7 @@
   },
   "dependencies": {
     "@stencil/vue-output-target": "^0.11.8",
-    "@changebot/core": "^0.1.22"
+    "@changebot/core": "^0.2.1"
   },
   "devDependencies": {
     "vue": "^3.3.0",