@feedlog-ai/vue 0.0.3 → 0.0.5

package/README.md

@@ -0,0 +1,330 @@
+# @feedlog-ai/vue
+
+Vue bindings for Feedlog Toolkit web components. Auto-generated from Stencil components with full TypeScript support.
+
+## Features
+
+- **Vue Components**: Native Vue components with template syntax support
+- **TypeScript Support**: Full type safety with TypeScript definitions
+- **Auto-generated**: Generated from Stencil web components for consistency
+- **Vue 2 & 3 Support**: Compatible with Vue >=2.6.0 and >=3.0.0
+- **Event Handling**: Vue-friendly event handling with proper typing
+- **Tree Shakeable**: Only import the components you need
+
+## Installation
+
+```bash
+npm install @feedlog-ai/vue
+```
+
+## Components
+
+### FeedlogGithubIssuesClient
+
+The main component for displaying GitHub issues with built-in SDK integration.
+
+**Props:**
+
+- `apiKey`: API key for Feedlog authentication (required)
+- `type?`: Filter by issue type - `'bug'` or `'enhancement'`
+- `limit?`: Maximum issues to fetch (1-100, default: 10)
+- `endpoint?`: Custom API endpoint
+- `maxWidth?`: Container max width (default: `'42rem'`)
+- `theme?`: Theme variant - `'light'` or `'dark'` (default: `'light'`)
+- `showThemeToggle?`: Show theme toggle button (default: `true`)
+
+**Events:**
+
+- `@feedlog-upvote`: Emitted when an issue is upvoted
+- `@feedlog-theme-change`: Emitted when theme changes
+- `@feedlog-error`: Emitted on errors
+
+## Usage
+
+### Vue 3 (Composition API)
+
+```vue
+<template>
+  <div>
+    <FeedlogGithubIssuesClient
+      api-key="your-api-key"
+      type="bug"
+      :limit="10"
+      theme="light"
+      max-width="42rem"
+      @feedlog-upvote="handleUpvote"
+      @feedlog-theme-change="handleThemeChange"
+      @feedlog-error="handleError"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/vue';
+
+const handleUpvote = (event: CustomEvent) => {
+  console.log('Issue upvoted:', event.detail);
+  // event.detail: { issueId, upvoted, upvoteCount }
+};
+
+const handleThemeChange = (event: CustomEvent<'light' | 'dark'>) => {
+  console.log('Theme changed to:', event.detail);
+};
+
+const handleError = (event: CustomEvent) => {
+  console.error('Error:', event.detail);
+  // event.detail: { error, code? }
+};
+</script>
+```
+
+### Vue 3 (Options API)
+
+```vue
+<template>
+  <FeedlogGithubIssuesClient
+    api-key="your-api-key"
+    @feedlog-upvote="onUpvote"
+    @feedlog-error="onError"
+  />
+</template>
+
+<script lang="ts">
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/vue';
+
+export default {
+  components: {
+    FeedlogGithubIssuesClient,
+  },
+  methods: {
+    onUpvote(event: CustomEvent) {
+      console.log('Issue upvoted:', event.detail);
+    },
+    onError(event: CustomEvent) {
+      console.error('Error:', event.detail);
+    },
+  },
+};
+</script>
+```
+
+### Vue 2
+
+```vue
+<template>
+  <feedlog-github-issues-client api-key="your-api-key" @feedlog-upvote="handleUpvote" />
+</template>
+
+<script>
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/vue';
+
+export default {
+  components: {
+    FeedlogGithubIssuesClient,
+  },
+  methods: {
+    handleUpvote(event) {
+      console.log('Issue upvoted:', event.detail);
+    },
+  },
+};
+</script>
+```
+
+### With Reactive Data
+
+```vue
+<template>
+  <div>
+    <div class="controls">
+      <select v-model="issueType">
+        <option value="bug">Bugs</option>
+        <option value="enhancement">Enhancements</option>
+      </select>
+
+      <button @click="toggleTheme">
+        Switch to {{ theme === 'light' ? 'dark' : 'light' }} theme
+      </button>
+    </div>
+
+    <FeedlogGithubIssuesClient
+      api-key="your-api-key"
+      :type="issueType"
+      :theme="theme"
+      @feedlog-theme-change="updateTheme"
+    />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { FeedlogGithubIssuesClient } from '@feedlog-ai/vue';
+
+const issueType = ref<'bug' | 'enhancement'>('bug');
+const theme = ref<'light' | 'dark'>('light');
+
+const toggleTheme = () => {
+  theme.value = theme.value === 'light' ? 'dark' : 'light';
+};
+
+const updateTheme = (event: CustomEvent<'light' | 'dark'>) => {
+  theme.value = event.detail;
+};
+</script>
+```
+
+### Event Handling
+
+```vue
+<template>
+  <FeedlogGithubIssuesClient
+    api-key="your-api-key"
+    @feedlog-upvote="onUpvote"
+    @feedlog-error="onError"
+  />
+</template>
+
+<script setup lang="ts">
+const onUpvote = (
+  event: CustomEvent<{
+    issueId: string;
+    upvoted: boolean;
+    upvoteCount: number;
+  }>
+) => {
+  // Fully typed event detail
+  const { issueId, upvoted, upvoteCount } = event.detail;
+
+  if (upvoted) {
+    console.log(`User upvoted issue ${issueId}`);
+  } else {
+    console.log(`User removed upvote from issue ${issueId}`);
+  }
+
+  console.log(`Issue now has ${upvoteCount} upvotes`);
+};
+
+const onError = (
+  event: CustomEvent<{
+    error: string;
+    code?: number;
+  }>
+) => {
+  const { error, code } = event.detail;
+  console.error(`Feedlog error (${code || 'unknown'}):`, error);
+
+  // Handle error in your UI (show toast, etc.)
+};
+</script>
+```
+
+### Other Components
+
+The package also includes Vue bindings for additional UI components:
+
+```vue
+<template>
+  <div>
+    <!-- Badge component -->
+    <FeedlogBadge variant="primary">New</FeedlogBadge>
+
+    <!-- Button component -->
+    <FeedlogButton variant="primary" size="lg" @feedlog-click="handleClick">
+      Click me
+    </FeedlogButton>
+
+    <!-- Card component -->
+    <FeedlogCard>
+      <h3>Card Title</h3>
+      <p>Card content</p>
+    </FeedlogCard>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { FeedlogBadge, FeedlogButton, FeedlogCard } from '@feedlog-ai/vue';
+
+const handleClick = (event: CustomEvent<MouseEvent>) => {
+  console.log('Button clicked:', event.detail);
+};
+</script>
+```
+
+## Global Registration
+
+You can register components globally in your Vue app:
+
+```ts
+// main.ts
+import { createApp } from 'vue';
+import { FeedlogGithubIssuesClient, FeedlogBadge } from '@feedlog-ai/vue';
+
+const app = createApp(App);
+
+// Register specific components
+app.component('FeedlogGithubIssuesClient', FeedlogGithubIssuesClient);
+app.component('FeedlogBadge', FeedlogBadge);
+
+// Or use the install function (currently minimal but extensible)
+import { install } from '@feedlog-ai/vue';
+app.use(install);
+```
+
+## TypeScript Support
+
+All components are fully typed. Import types from the core package if needed:
+
+```vue
+<script setup lang="ts">
+import type { FeedlogIssue } from '@feedlog-ai/core';
+
+const handleUpvote = (
+  event: CustomEvent<{
+    issueId: string;
+    upvoted: boolean;
+    upvoteCount: number;
+  }>
+) => {
+  // Fully typed event detail
+  console.log(event.detail.issueId);
+  console.log(event.detail.upvoted);
+  console.log(event.detail.upvoteCount);
+};
+</script>
+```
+
+## Requirements
+
+- Vue >= 2.6.0 or >= 3.0.0
+- Modern browsers with Web Components support
+
+## Browser Support
+
+Same as the underlying web components:
+
+- Chrome 61+
+- Firefox 63+
+- Safari 11+
+- Edge 79+
+
+## Migration from Direct Web Components
+
+If you're migrating from using web components directly:
+
+```vue
+<!-- Before (direct web component) -->
+<feedlog-github-issues-client api-key="key" @feedlog-upvote="handleUpvote" />
+
+<!-- After (Vue component) -->
+<FeedlogGithubIssuesClient api-key="key" @feedlog-upvote="handleUpvote" />
+```
+
+**Key differences:**
+
+- Use PascalCase component names in templates
+- Event names remain the same (kebab-case)
+- All props and events are properly typed
+
+## License
+
+MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@feedlog-ai/vue",
-  "version": "0.0.3",
+  "version": "0.0.5",
   "description": "Vue bindings for Feedlog Toolkit Web Components",
   "main": "./dist/index.js",
   "module": "./dist/index.js",
@@ -27,7 +27,7 @@
     "vue": ">=3.0.0 || >=2.6.0"
   },
   "dependencies": {
-    "@feedlog-ai/webcomponents": "*"
+    "@feedlog-ai/webcomponents": "workspace:*"
   },
   "devDependencies": {
     "@jest/test-sequencer": "^29.7.0",
@@ -47,5 +47,8 @@
     "components",
     "data-visualization"
   ],
-  "license": "MIT"
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
 }

package/dist/components.d.ts

@@ -1,8 +0,0 @@
-import type { JSX } from '@feedlog-ai/webcomponents';
-export declare const FeedlogBadge: import("vue").DefineSetupFnComponent<JSX.FeedlogBadge & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.FeedlogBadge & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
-export declare const FeedlogButton: import("vue").DefineSetupFnComponent<JSX.FeedlogButton & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.FeedlogButton & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
-export declare const FeedlogCard: import("vue").DefineSetupFnComponent<JSX.FeedlogCard & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.FeedlogCard & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
-export declare const FeedlogGithubIssues: import("vue").DefineSetupFnComponent<JSX.FeedlogGithubIssues & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.FeedlogGithubIssues & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
-export declare const FeedlogGithubIssuesClient: import("vue").DefineSetupFnComponent<JSX.FeedlogGithubIssuesClient & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.FeedlogGithubIssuesClient & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
-export declare const FeedlogIssuesList: import("vue").DefineSetupFnComponent<JSX.FeedlogIssuesList & import("./vue-component-lib/utils").InputProps<string | number | boolean>, {}, {}, JSX.FeedlogIssuesList & import("./vue-component-lib/utils").InputProps<string | number | boolean> & {}, import("vue").PublicProps>;
-//# sourceMappingURL=components.d.ts.map

package/dist/components.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.d.ts","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,2BAA2B,CAAC;AAMrD,eAAO,MAAM,YAAY,0QAEvB,CAAC;AAGH,eAAO,MAAM,aAAa,4QAMxB,CAAC;AAGH,eAAO,MAAM,WAAW,wQAA4E,CAAC;AAGrG,eAAO,MAAM,mBAAmB,wRAY9B,CAAC;AAGH,eAAO,MAAM,yBAAyB,oSAWpC,CAAC;AAGH,eAAO,MAAM,iBAAiB,oRAI5B,CAAC"}

package/dist/components.js

@@ -1,48 +0,0 @@
-/* eslint-disable */
-/* tslint:disable */
-/* auto-generated vue proxies */
-import { defineContainer } from './vue-component-lib/utils';
-import { defineCustomElements } from '@feedlog-ai/webcomponents/loader';
-defineCustomElements();
-export const FeedlogBadge = /*@__PURE__*/ defineContainer('feedlog-badge', undefined, [
-    'variant'
-]);
-export const FeedlogButton = /*@__PURE__*/ defineContainer('feedlog-button', undefined, [
-    'variant',
-    'size',
-    'disabled',
-    'type',
-    'feedlogClick'
-]);
-export const FeedlogCard = /*@__PURE__*/ defineContainer('feedlog-card', undefined);
-export const FeedlogGithubIssues = /*@__PURE__*/ defineContainer('feedlog-github-issues', undefined, [
-    'issues',
-    'maxWidth',
-    'theme',
-    'loading',
-    'error',
-    'showThemeToggle',
-    'hasMore',
-    'isLoadingMore',
-    'feedlogUpvote',
-    'feedlogThemeChange',
-    'feedlogLoadMore'
-]);
-export const FeedlogGithubIssuesClient = /*@__PURE__*/ defineContainer('feedlog-github-issues-client', undefined, [
-    'repos',
-    'type',
-    'limit',
-    'endpoint',
-    'maxWidth',
-    'theme',
-    'showThemeToggle',
-    'feedlogUpvote',
-    'feedlogThemeChange',
-    'feedlogError'
-]);
-export const FeedlogIssuesList = /*@__PURE__*/ defineContainer('feedlog-issues-list', undefined, [
-    'issues',
-    'theme',
-    'feedlogUpvote'
-]);
-//# sourceMappingURL=components.js.map

package/dist/components.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"components.js","sourceRoot":"","sources":["../src/components.ts"],"names":[],"mappings":"AAAA,oBAAoB;AACpB,oBAAoB;AACpB,gCAAgC;AAChC,OAAO,EAAE,eAAe,EAAE,MAAM,2BAA2B,CAAC;AAI5D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,oBAAoB,EAAE,CAAC;AAEvB,MAAM,CAAC,MAAM,YAAY,GAAG,aAAa,CAAC,eAAe,CAAmB,eAAe,EAAE,SAAS,EAAE;IACtG,SAAS;CACV,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,aAAa,GAAG,aAAa,CAAC,eAAe,CAAoB,gBAAgB,EAAE,SAAS,EAAE;IACzG,SAAS;IACT,MAAM;IACN,UAAU;IACV,MAAM;IACN,cAAc;CACf,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,WAAW,GAAG,aAAa,CAAC,eAAe,CAAkB,cAAc,EAAE,SAAS,CAAC,CAAC;AAGrG,MAAM,CAAC,MAAM,mBAAmB,GAAG,aAAa,CAAC,eAAe,CAA0B,uBAAuB,EAAE,SAAS,EAAE;IAC5H,QAAQ;IACR,UAAU;IACV,OAAO;IACP,SAAS;IACT,OAAO;IACP,iBAAiB;IACjB,SAAS;IACT,eAAe;IACf,eAAe;IACf,oBAAoB;IACpB,iBAAiB;CAClB,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,yBAAyB,GAAG,aAAa,CAAC,eAAe,CAAgC,8BAA8B,EAAE,SAAS,EAAE;IAC/I,OAAO;IACP,MAAM;IACN,OAAO;IACP,UAAU;IACV,UAAU;IACV,OAAO;IACP,iBAAiB;IACjB,eAAe;IACf,oBAAoB;IACpB,cAAc;CACf,CAAC,CAAC;AAGH,MAAM,CAAC,MAAM,iBAAiB,GAAG,aAAa,CAAC,eAAe,CAAwB,qBAAqB,EAAE,SAAS,EAAE;IACtH,QAAQ;IACR,OAAO;IACP,eAAe;CAChB,CAAC,CAAC"}

package/dist/index.d.ts

@@ -1,10 +0,0 @@
-/**
- * Vue bindings for Feedlog Toolkit Web Components
- *
- * This package provides Vue components that wrap the Stencil web components.
- * Components are auto-generated from the Stencil build process.
- */
-export * from './components';
-import type { App } from 'vue';
-export declare function install(_app: App): void;
-//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,cAAc,cAAc,CAAC;AAW7B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAG/B,wBAAgB,OAAO,CAAC,IAAI,EAAE,GAAG,GAAG,IAAI,CAGvC"}

package/dist/index.js

@@ -1,20 +0,0 @@
-/**
- * Vue bindings for Feedlog Toolkit Web Components
- *
- * This package provides Vue components that wrap the Stencil web components.
- * Components are auto-generated from the Stencil build process.
- */
-// Re-export all Vue components generated by Stencil
-export * from './components';
-// Define custom elements (required for web components to work)
-import { defineCustomElements } from '@feedlog-ai/webcomponents/loader';
-// Auto-define custom elements when this module is imported
-if (typeof window !== 'undefined') {
-    defineCustomElements();
-}
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-export function install(_app) {
-    // Custom elements are automatically registered via defineCustomElements
-    // Additional Vue-specific setup can be added here if needed
-}
-//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,oDAAoD;AACpD,cAAc,cAAc,CAAC;AAE7B,+DAA+D;AAC/D,OAAO,EAAE,oBAAoB,EAAE,MAAM,kCAAkC,CAAC;AAExE,2DAA2D;AAC3D,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,CAAC;IAClC,oBAAoB,EAAE,CAAC;AACzB,CAAC;AAKD,6DAA6D;AAC7D,MAAM,UAAU,OAAO,CAAC,IAAS;IAC/B,wEAAwE;IACxE,4DAA4D;AAC9D,CAAC"}

package/dist/vue-component-lib/utils.d.ts

@@ -1,17 +0,0 @@
-export interface InputProps<T> {
-    modelValue?: T;
-}
-/**
- * Create a callback to define a Vue component wrapper around a Web Component.
- *
- * @prop name - The component tag name (i.e. `ion-button`)
- * @prop componentProps - An array of properties on the
- * component. These usually match up with the @Prop definitions
- * in each component's TSX file.
- * @prop customElement - An option custom element instance to pass
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
- * @prop modelProp - The prop that v-model binds to (i.e. value)
- * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
- */
-export declare const defineContainer: <Props, VModelType = string | number | boolean>(name: string, defineCustomElement: any, componentProps?: string[], modelProp?: string, modelUpdateEvent?: string) => import("vue").DefineSetupFnComponent<Props & InputProps<VModelType>, {}, {}, Props & InputProps<VModelType> & {}, import("vue").PublicProps>;
-//# sourceMappingURL=utils.d.ts.map

package/dist/vue-component-lib/utils.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.d.ts","sourceRoot":"","sources":["../../src/vue-component-lib/utils.ts"],"names":[],"mappings":"AAIA,MAAM,WAAW,UAAU,CAAC,CAAC;IAC3B,UAAU,CAAC,EAAE,CAAC,CAAC;CAChB;AAsCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,eAAe,GAAI,KAAK,EAAE,UAAU,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,EAC3E,MAAM,MAAM,EACZ,qBAAqB,GAAG,EACxB,iBAAgB,MAAM,EAAO,EAC7B,YAAY,MAAM,EAClB,mBAAmB,MAAM,iJA8K1B,CAAC"}

package/dist/vue-component-lib/utils.js

@@ -1,196 +0,0 @@
-// @ts-nocheck
-// It's easier and safer for Volar to disable typechecking and let the return type inference do its job.
-import { defineComponent, getCurrentInstance, h, inject, ref, withDirectives } from 'vue';
-const UPDATE_VALUE_EVENT = 'update:modelValue';
-const MODEL_VALUE = 'modelValue';
-const ROUTER_LINK_VALUE = 'routerLink';
-const NAV_MANAGER = 'navManager';
-const ROUTER_PROP_PREFIX = 'router';
-const ARIA_PROP_PREFIX = 'aria';
-/**
- * Starting in Vue 3.1.0, all properties are
- * added as keys to the props object, even if
- * they are not being used. In order to correctly
- * account for both value props and v-model props,
- * we need to check if the key exists for Vue <3.1.0
- * and then check if it is not undefined for Vue >= 3.1.0.
- * See https://github.com/vuejs/vue-next/issues/3889
- */
-const EMPTY_PROP = Symbol();
-const DEFAULT_EMPTY_PROP = { default: EMPTY_PROP };
-const getComponentClasses = (classes) => {
-    return classes?.split(' ') || [];
-};
-const getElementClasses = (ref, componentClasses, defaultClasses = []) => {
-    return [...Array.from(ref.value?.classList || []), ...defaultClasses].filter((c, i, self) => !componentClasses.has(c) && self.indexOf(c) === i);
-};
-/**
- * Create a callback to define a Vue component wrapper around a Web Component.
- *
- * @prop name - The component tag name (i.e. `ion-button`)
- * @prop componentProps - An array of properties on the
- * component. These usually match up with the @Prop definitions
- * in each component's TSX file.
- * @prop customElement - An option custom element instance to pass
- * to customElements.define. Only set if `includeImportCustomElements: true` in your config.
- * @prop modelProp - The prop that v-model binds to (i.e. value)
- * @prop modelUpdateEvent - The event that is fired from your Web Component when the value changes (i.e. ionChange)
- */
-export const defineContainer = (name, defineCustomElement, componentProps = [], modelProp, modelUpdateEvent) => {
-    /**
-     * Create a Vue component wrapper around a Web Component.
-     * Note: The `props` here are not all properties on a component.
-     * They refer to whatever properties are set on an instance of a component.
-     */
-    if (defineCustomElement !== undefined) {
-        defineCustomElement();
-    }
-    const Container = defineComponent((props, { attrs, slots, emit }) => {
-        let modelPropValue = props[modelProp];
-        const containerRef = ref();
-        const classes = new Set(getComponentClasses(attrs.class));
-        /**
-         * This directive is responsible for updating any reactive
-         * reference associated with v-model on the component.
-         * This code must be run inside of the "created" callback.
-         * Since the following listener callbacks as well as any potential
-         * event callback defined in the developer's app are set on
-         * the same element, we need to make sure the following callbacks
-         * are set first so they fire first. If the developer's callback fires first
-         * then the reactive reference will not have been updated yet.
-         */
-        const vModelDirective = {
-            created: (el) => {
-                const eventsNames = Array.isArray(modelUpdateEvent) ? modelUpdateEvent : [modelUpdateEvent];
-                eventsNames.forEach((eventName) => {
-                    el.addEventListener(eventName.toLowerCase(), (e) => {
-                        /**
-                         * Only update the v-model binding if the event's target is the element we are
-                         * listening on. For example, Component A could emit ionChange, but it could also
-                         * have a descendant Component B that also emits ionChange. We only want to update
-                         * the v-model for Component A when ionChange originates from that element and not
-                         * when ionChange bubbles up from Component B.
-                         */
-                        if (e.target.tagName === el.tagName) {
-                            modelPropValue = (e?.target)[modelProp];
-                            emit(UPDATE_VALUE_EVENT, modelPropValue);
-                        }
-                    });
-                });
-            },
-        };
-        const currentInstance = getCurrentInstance();
-        const hasRouter = currentInstance?.appContext?.provides[NAV_MANAGER];
-        const navManager = hasRouter ? inject(NAV_MANAGER) : undefined;
-        const handleRouterLink = (ev) => {
-            const { routerLink } = props;
-            if (routerLink === EMPTY_PROP)
-                return;
-            if (navManager !== undefined) {
-                /**
-                 * This prevents the browser from
-                 * performing a page reload when pressing
-                 * an Ionic component with routerLink.
-                 * The page reload interferes with routing
-                 * and causes ion-back-button to disappear
-                 * since the local history is wiped on reload.
-                 */
-                ev.preventDefault();
-                let navigationPayload = { event: ev };
-                for (const key in props) {
-                    const value = props[key];
-                    if (props.hasOwnProperty(key) && key.startsWith(ROUTER_PROP_PREFIX) && value !== EMPTY_PROP) {
-                        navigationPayload[key] = value;
-                    }
-                }
-                navManager.navigate(navigationPayload);
-            }
-            else {
-                console.warn('Tried to navigate, but no router was found. Make sure you have mounted Vue Router.');
-            }
-        };
-        return () => {
-            modelPropValue = props[modelProp];
-            getComponentClasses(attrs.class).forEach((value) => {
-                classes.add(value);
-            });
-            const oldClick = props.onClick;
-            const handleClick = (ev) => {
-                if (oldClick !== undefined) {
-                    oldClick(ev);
-                }
-                if (!ev.defaultPrevented) {
-                    handleRouterLink(ev);
-                }
-            };
-            let propsToAdd = {
-                ref: containerRef,
-                class: getElementClasses(containerRef, classes),
-                onClick: handleClick,
-            };
-            /**
-             * We can use Object.entries here
-             * to avoid the hasOwnProperty check,
-             * but that would require 2 iterations
-             * where as this only requires 1.
-             */
-            for (const key in props) {
-                const value = props[key];
-                if ((props.hasOwnProperty(key) && value !== EMPTY_PROP) || key.startsWith(ARIA_PROP_PREFIX)) {
-                    propsToAdd[key] = value;
-                }
-            }
-            if (modelProp) {
-                /**
-                 * If form value property was set using v-model
-                 * then we should use that value.
-                 * Otherwise, check to see if form value property
-                 * was set as a static value (i.e. no v-model).
-                 */
-                if (props[MODEL_VALUE] !== EMPTY_PROP) {
-                    propsToAdd = {
-                        ...propsToAdd,
-                        [modelProp]: props[MODEL_VALUE],
-                    };
-                }
-                else if (modelPropValue !== EMPTY_PROP) {
-                    propsToAdd = {
-                        ...propsToAdd,
-                        [modelProp]: modelPropValue,
-                    };
-                }
-            }
-            // If router link is defined, add href to props
-            // in order to properly render an anchor tag inside
-            // of components that should become activatable and
-            // focusable with router link.
-            if (props[ROUTER_LINK_VALUE] !== EMPTY_PROP) {
-                propsToAdd = {
-                    ...propsToAdd,
-                    href: props[ROUTER_LINK_VALUE],
-                };
-            }
-            /**
-             * vModelDirective is only needed on components that support v-model.
-             * As a result, we conditionally call withDirectives with v-model components.
-             */
-            const node = h(name, propsToAdd, slots.default && slots.default());
-            return modelProp === undefined ? node : withDirectives(node, [[vModelDirective]]);
-        };
-    });
-    if (typeof Container !== 'function') {
-        Container.name = name;
-        Container.props = {
-            [ROUTER_LINK_VALUE]: DEFAULT_EMPTY_PROP,
-        };
-        componentProps.forEach((componentProp) => {
-            Container.props[componentProp] = DEFAULT_EMPTY_PROP;
-        });
-        if (modelProp) {
-            Container.props[MODEL_VALUE] = DEFAULT_EMPTY_PROP;
-            Container.emits = [UPDATE_VALUE_EVENT];
-        }
-    }
-    return Container;
-};
-//# sourceMappingURL=utils.js.map

package/dist/vue-component-lib/utils.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils.js","sourceRoot":"","sources":["../../src/vue-component-lib/utils.ts"],"names":[],"mappings":"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"}