@feedlog-ai/webcomponents 0.0.3 → 0.0.5
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +246 -0
- package/dist/cjs/feedlog-badge_3.cjs.entry.js +1 -1
- package/dist/cjs/feedlog-github-issues-client.cjs.entry.js +18 -47
- package/dist/cjs/feedlog-github-issues.cjs.entry.js +1 -19
- package/dist/cjs/feedlog-toolkit.cjs.js +1 -1
- package/dist/cjs/loader.cjs.js +1 -1
- package/dist/collection/components/feedlog-badge/feedlog-badge.stories.js +1 -2
- package/dist/collection/components/feedlog-button/feedlog-button.stories.js +1 -2
- package/dist/collection/components/feedlog-card/feedlog-card.stories.js +1 -2
- package/dist/collection/components/feedlog-github-issues/feedlog-github-issues.js +38 -52
- package/dist/collection/components/feedlog-github-issues/feedlog-github-issues.stories.js +1 -2
- package/dist/collection/components/feedlog-github-issues-client/feedlog-github-issues-client.js +41 -74
- package/dist/collection/components/feedlog-issues-list/feedlog-issues-list.js +1 -1
- package/dist/components/feedlog-github-issues-client.js +1 -1
- package/dist/components/feedlog-github-issues.js +1 -1
- package/dist/components/feedlog-issues-list.js +1 -1
- package/dist/components/{p-DMcNh5Ys.js → p-BVUX_uVS.js} +1 -1
- package/dist/components/p-Dhl83qnK.js +1 -0
- package/dist/esm/feedlog-badge_3.entry.js +1 -1
- package/dist/esm/feedlog-github-issues-client.entry.js +18 -47
- package/dist/esm/feedlog-github-issues.entry.js +1 -19
- package/dist/esm/feedlog-toolkit.js +1 -1
- package/dist/esm/loader.js +1 -1
- package/dist/feedlog-toolkit/feedlog-toolkit.esm.js +1 -1
- package/dist/feedlog-toolkit/{p-2f7954f7.entry.js → p-125595a1.entry.js} +1 -1
- package/dist/feedlog-toolkit/p-352778fa.entry.js +1 -0
- package/dist/feedlog-toolkit/p-5fc3d243.entry.js +1 -0
- package/dist/types/components/feedlog-badge/feedlog-badge.stories.d.ts +2 -3
- package/dist/types/components/feedlog-button/feedlog-button.stories.d.ts +2 -3
- package/dist/types/components/feedlog-card/feedlog-card.stories.d.ts +2 -3
- package/dist/types/components/feedlog-github-issues/feedlog-github-issues.d.ts +8 -9
- package/dist/types/components/feedlog-github-issues/feedlog-github-issues.stories.d.ts +2 -3
- package/dist/types/components/feedlog-github-issues-client/feedlog-github-issues-client.d.ts +9 -12
- package/dist/types/components.d.ts +32 -30
- package/package.json +8 -5
- package/dist/components/p-CPOiBAxu.js +0 -1
- package/dist/feedlog-toolkit/p-399e0281.entry.js +0 -1
- package/dist/feedlog-toolkit/p-b3d26272.entry.js +0 -1
package/README.md
ADDED
|
@@ -0,0 +1,246 @@
|
|
|
1
|
+
# @feedlog-ai/webcomponents
|
|
2
|
+
|
|
3
|
+
Stencil-based web components for GitHub issue management. These are framework-agnostic web components that can be used in any JavaScript framework or vanilla HTML.
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- **Framework Agnostic**: Built with [Stencil](https://stenciljs.com/) - works with any JavaScript framework or vanilla HTML
|
|
8
|
+
- **Web Components Standard**: Uses Custom Elements, Shadow DOM for true encapsulation
|
|
9
|
+
- **GitHub Issue Management**: Complete solution for displaying and interacting with GitHub issues
|
|
10
|
+
- **Auto-generated Framework Bindings**: React and Vue wrappers generated automatically
|
|
11
|
+
- **Tree-shakeable**: Multiple output formats for optimal bundle sizes
|
|
12
|
+
- **TypeScript Support**: Full type safety with generated TypeScript definitions
|
|
13
|
+
- **Theme Support**: Built-in light/dark theme switching
|
|
14
|
+
- **Event System**: Custom events for upvoting, theme changes, and errors
|
|
15
|
+
|
|
16
|
+
## Installation
|
|
17
|
+
|
|
18
|
+
```bash
|
|
19
|
+
npm install @feedlog-ai/webcomponents
|
|
20
|
+
```
|
|
21
|
+
|
|
22
|
+
## Components
|
|
23
|
+
|
|
24
|
+
### FeedlogGithubIssuesClient
|
|
25
|
+
|
|
26
|
+
The main component for displaying GitHub issues with built-in SDK integration.
|
|
27
|
+
|
|
28
|
+
**Props:**
|
|
29
|
+
|
|
30
|
+
- `apiKey` (required): API key for Feedlog authentication
|
|
31
|
+
- `type` (optional): Filter by issue type - `'bug'` or `'enhancement'`
|
|
32
|
+
- `limit` (optional): Maximum issues to fetch (1-100, default: 10)
|
|
33
|
+
- `endpoint` (optional): Custom API endpoint
|
|
34
|
+
- `maxWidth` (optional): Container max width (default: `'42rem'`)
|
|
35
|
+
- `theme` (optional): Theme variant - `'light'` or `'dark'` (default: `'light'`)
|
|
36
|
+
- `showThemeToggle` (optional): Show theme toggle button (default: `true`)
|
|
37
|
+
|
|
38
|
+
**Events:**
|
|
39
|
+
|
|
40
|
+
- `feedlogUpvote`: Emitted when an issue is upvoted
|
|
41
|
+
- `feedlogThemeChange`: Emitted when theme changes
|
|
42
|
+
- `feedlogError`: Emitted on errors
|
|
43
|
+
|
|
44
|
+
## Usage
|
|
45
|
+
|
|
46
|
+
### Vanilla HTML
|
|
47
|
+
|
|
48
|
+
```html
|
|
49
|
+
<!DOCTYPE html>
|
|
50
|
+
<html>
|
|
51
|
+
<head>
|
|
52
|
+
<script
|
|
53
|
+
type="module"
|
|
54
|
+
src="/node_modules/@feedlog-ai/webcomponents/dist/feedlog-toolkit/feedlog-toolkit.esm.js"
|
|
55
|
+
></script>
|
|
56
|
+
</head>
|
|
57
|
+
<body>
|
|
58
|
+
<feedlog-github-issues-client
|
|
59
|
+
api-key="your-api-key"
|
|
60
|
+
type="bug"
|
|
61
|
+
limit="10"
|
|
62
|
+
theme="light"
|
|
63
|
+
max-width="42rem"
|
|
64
|
+
>
|
|
65
|
+
</feedlog-github-issues-client>
|
|
66
|
+
|
|
67
|
+
<script>
|
|
68
|
+
// Listen for events
|
|
69
|
+
const client = document.querySelector('feedlog-github-issues-client');
|
|
70
|
+
|
|
71
|
+
client.addEventListener('feedlogUpvote', event => {
|
|
72
|
+
console.log('Issue upvoted:', event.detail);
|
|
73
|
+
});
|
|
74
|
+
|
|
75
|
+
client.addEventListener('feedlogError', event => {
|
|
76
|
+
console.error('Error:', event.detail);
|
|
77
|
+
});
|
|
78
|
+
</script>
|
|
79
|
+
</body>
|
|
80
|
+
</html>
|
|
81
|
+
```
|
|
82
|
+
|
|
83
|
+
### React (with generated bindings)
|
|
84
|
+
|
|
85
|
+
```tsx
|
|
86
|
+
import React from 'react';
|
|
87
|
+
import { FeedlogGithubIssuesClient } from '@feedlog-ai/webcomponents/dist/components';
|
|
88
|
+
|
|
89
|
+
function App() {
|
|
90
|
+
return (
|
|
91
|
+
<div>
|
|
92
|
+
<feedlog-github-issues-client
|
|
93
|
+
api-key="your-api-key"
|
|
94
|
+
type="bug"
|
|
95
|
+
limit={10}
|
|
96
|
+
theme="light"
|
|
97
|
+
max-width="42rem"
|
|
98
|
+
onFeedlogUpvote={event => {
|
|
99
|
+
console.log('Issue upvoted:', event.detail);
|
|
100
|
+
}}
|
|
101
|
+
onFeedlogError={event => {
|
|
102
|
+
console.error('Error:', event.detail);
|
|
103
|
+
}}
|
|
104
|
+
/>
|
|
105
|
+
</div>
|
|
106
|
+
);
|
|
107
|
+
}
|
|
108
|
+
```
|
|
109
|
+
|
|
110
|
+
### Vue (with generated bindings)
|
|
111
|
+
|
|
112
|
+
```vue
|
|
113
|
+
<template>
|
|
114
|
+
<feedlog-github-issues-client
|
|
115
|
+
api-key="your-api-key"
|
|
116
|
+
type="bug"
|
|
117
|
+
:limit="10"
|
|
118
|
+
theme="light"
|
|
119
|
+
max-width="42rem"
|
|
120
|
+
@feedlog-upvote="handleUpvote"
|
|
121
|
+
@feedlog-error="handleError"
|
|
122
|
+
>
|
|
123
|
+
</feedlog-github-issues-client>
|
|
124
|
+
</template>
|
|
125
|
+
|
|
126
|
+
<script setup lang="ts">
|
|
127
|
+
const handleUpvote = (event: CustomEvent) => {
|
|
128
|
+
console.log('Issue upvoted:', event.detail);
|
|
129
|
+
};
|
|
130
|
+
|
|
131
|
+
const handleError = (event: CustomEvent) => {
|
|
132
|
+
console.error('Error:', event.detail);
|
|
133
|
+
};
|
|
134
|
+
</script>
|
|
135
|
+
```
|
|
136
|
+
|
|
137
|
+
### Angular
|
|
138
|
+
|
|
139
|
+
```typescript
|
|
140
|
+
import { Component } from '@angular/core';
|
|
141
|
+
|
|
142
|
+
@Component({
|
|
143
|
+
selector: 'app-root',
|
|
144
|
+
template: `
|
|
145
|
+
<feedlog-github-issues-client
|
|
146
|
+
api-key="your-api-key"
|
|
147
|
+
type="bug"
|
|
148
|
+
limit="10"
|
|
149
|
+
theme="light"
|
|
150
|
+
max-width="42rem"
|
|
151
|
+
(feedlogUpvote)="onUpvote($event)"
|
|
152
|
+
(feedlogError)="onError($event)"
|
|
153
|
+
>
|
|
154
|
+
</feedlog-github-issues-client>
|
|
155
|
+
`,
|
|
156
|
+
})
|
|
157
|
+
export class AppComponent {
|
|
158
|
+
onUpvote(event: CustomEvent) {
|
|
159
|
+
console.log('Issue upvoted:', event.detail);
|
|
160
|
+
}
|
|
161
|
+
|
|
162
|
+
onError(event: CustomEvent) {
|
|
163
|
+
console.error('Error:', event.detail);
|
|
164
|
+
}
|
|
165
|
+
}
|
|
166
|
+
```
|
|
167
|
+
|
|
168
|
+
## Other Components
|
|
169
|
+
|
|
170
|
+
The package also includes additional UI components:
|
|
171
|
+
|
|
172
|
+
- `feedlog-badge`: Label component with variant support
|
|
173
|
+
- `feedlog-button`: Button component with variants and sizes
|
|
174
|
+
- `feedlog-card`: Reusable card container component
|
|
175
|
+
- `feedlog-github-issues`: Issues display component (used internally by client)
|
|
176
|
+
- `feedlog-issues-list`: Issues list component (used internally)
|
|
177
|
+
|
|
178
|
+
## Build Outputs
|
|
179
|
+
|
|
180
|
+
The package provides multiple build formats:
|
|
181
|
+
|
|
182
|
+
- **ESM**: `dist/feedlog-toolkit/feedlog-toolkit.esm.js` - Modern ES modules
|
|
183
|
+
- **CommonJS**: `dist/index.cjs.js` - Node.js compatible
|
|
184
|
+
- **Loader**: `loader/` - Dynamic loader for different environments
|
|
185
|
+
|
|
186
|
+
## Events
|
|
187
|
+
|
|
188
|
+
### feedlogUpvote
|
|
189
|
+
|
|
190
|
+
Emitted when a user upvotes or removes an upvote from an issue.
|
|
191
|
+
|
|
192
|
+
```typescript
|
|
193
|
+
interface UpvoteEventDetail {
|
|
194
|
+
issueId: string;
|
|
195
|
+
upvoted: boolean; // true if added, false if removed
|
|
196
|
+
upvoteCount: number; // Updated total count
|
|
197
|
+
}
|
|
198
|
+
```
|
|
199
|
+
|
|
200
|
+
### feedlogThemeChange
|
|
201
|
+
|
|
202
|
+
Emitted when the theme is changed via the theme toggle.
|
|
203
|
+
|
|
204
|
+
```typescript
|
|
205
|
+
type ThemeEventDetail = 'light' | 'dark';
|
|
206
|
+
```
|
|
207
|
+
|
|
208
|
+
### feedlogError
|
|
209
|
+
|
|
210
|
+
Emitted when an error occurs during API calls or other operations.
|
|
211
|
+
|
|
212
|
+
```typescript
|
|
213
|
+
interface ErrorEventDetail {
|
|
214
|
+
error: string; // Error message
|
|
215
|
+
code?: number; // HTTP status code (if applicable)
|
|
216
|
+
}
|
|
217
|
+
```
|
|
218
|
+
|
|
219
|
+
## Styling
|
|
220
|
+
|
|
221
|
+
Components use Shadow DOM for encapsulation. You can style them using CSS custom properties:
|
|
222
|
+
|
|
223
|
+
```css
|
|
224
|
+
feedlog-github-issues-client {
|
|
225
|
+
--feedlog-primary-color: #007acc;
|
|
226
|
+
--feedlog-border-radius: 8px;
|
|
227
|
+
--feedlog-font-family: 'Inter', sans-serif;
|
|
228
|
+
}
|
|
229
|
+
```
|
|
230
|
+
|
|
231
|
+
## Requirements
|
|
232
|
+
|
|
233
|
+
- Modern browsers with Web Components support
|
|
234
|
+
- ES2017+ for modern builds
|
|
235
|
+
- For older browsers, use the loader build
|
|
236
|
+
|
|
237
|
+
## Browser Support
|
|
238
|
+
|
|
239
|
+
- Chrome 61+
|
|
240
|
+
- Firefox 63+
|
|
241
|
+
- Safari 11+
|
|
242
|
+
- Edge 79+
|
|
243
|
+
|
|
244
|
+
## License
|
|
245
|
+
|
|
246
|
+
MIT
|
|
@@ -85,7 +85,7 @@ const FeedlogIssuesList = class {
|
|
|
85
85
|
};
|
|
86
86
|
}
|
|
87
87
|
render() {
|
|
88
|
-
return (index.h(index.Host, { key: '
|
|
88
|
+
return (index.h(index.Host, { key: '81b2b973309388f09d20629da416b92545567618', class: this.theme === 'dark' ? 'dark' : '' }, index.h("div", { key: 'ed22c88736ee13621f39b3095f71c361b0d04b44', class: "issues-list" }, this.issues.length === 0 ? (index.h("div", { class: "empty-state" }, index.h("p", null, "No issues found"))) : (this.issues.map(issue => (index.h("div", { key: issue.id, class: "issue-card" }, index.h("div", { class: "issue-content" }, index.h("div", { class: "issue-header" }, index.h("div", { class: "issue-type-badge" }, issue.type === 'bug' ? (index.h("feedlog-badge", { variant: "destructive" }, "Bug")) : (index.h("feedlog-badge", { variant: "enhancement" }, "Enhancement"))), issue.pinnedAt && (index.h("div", { class: "pinned-indicator", title: "Pinned issue" }, "\uD83D\uDCCC"))), index.h("div", { class: "issue-main" }, index.h("div", { class: "issue-details" }, index.h("h3", { class: "issue-title" }, issue.title), index.h("p", { class: "issue-body" }, issue.body), index.h("div", { class: "issue-repository" }, index.h("span", { class: "repo-name" }, issue.repository.owner, "/", issue.repository.name))), index.h("button", { class: `upvote-button ${issue.hasUpvoted ? 'upvoted' : ''}`, onClick: (e) => this.handleUpvote(e, issue), title: issue.hasUpvoted ? 'Remove upvote' : 'Upvote this issue' }, issue.hasUpvoted ? index.h(HeartFilledIcon, null) : index.h(HeartOutlineIcon, null), index.h("span", { class: "upvote-count" }, issue.upvoteCount))), index.h("div", { class: "issue-footer" }, index.h("span", { class: "issue-date", title: `Updated: ${issue.updatedAt}` }, "Updated ", this.formatDate(issue.updatedAt)), index.h("span", { class: "issue-date", title: `Created: ${issue.createdAt}` }, "Created ", this.formatDate(issue.createdAt)))))))))));
|
|
89
89
|
}
|
|
90
90
|
/**
|
|
91
91
|
* Format an ISO date string to a relative time string
|
|
@@ -80,11 +80,15 @@ class FeedlogTimeoutError extends FeedlogError {
|
|
|
80
80
|
* Provides methods to interact with the Feedlog API
|
|
81
81
|
*/
|
|
82
82
|
class FeedlogSDK {
|
|
83
|
-
constructor(config
|
|
83
|
+
constructor(config) {
|
|
84
84
|
this.config = {
|
|
85
85
|
credentials: 'include',
|
|
86
86
|
...config,
|
|
87
87
|
};
|
|
88
|
+
this.apiKey = this.config.apiKey;
|
|
89
|
+
if (!this.apiKey) {
|
|
90
|
+
throw new FeedlogValidationError('apiKey is required in FeedlogSDKConfig');
|
|
91
|
+
}
|
|
88
92
|
this.endpoint = this.config.endpoint || 'https://api.feedlog.app';
|
|
89
93
|
this.timeout = this.config.timeout || 30000;
|
|
90
94
|
// Ensure endpoint doesn't have trailing slash
|
|
@@ -187,9 +191,13 @@ class FeedlogSDK {
|
|
|
187
191
|
* Get request headers
|
|
188
192
|
*/
|
|
189
193
|
getAuthHeaders() {
|
|
190
|
-
|
|
194
|
+
const headers = {
|
|
191
195
|
'Content-Type': 'application/json',
|
|
192
196
|
};
|
|
197
|
+
if (this.apiKey) {
|
|
198
|
+
headers['x-api-key'] = this.apiKey;
|
|
199
|
+
}
|
|
200
|
+
return headers;
|
|
193
201
|
}
|
|
194
202
|
/**
|
|
195
203
|
* Fetch with timeout support using AbortController
|
|
@@ -329,7 +337,6 @@ const FeedlogGithubIssuesClient = class {
|
|
|
329
337
|
constructor(hostRef) {
|
|
330
338
|
index.registerInstance(this, hostRef);
|
|
331
339
|
this.feedlogUpvote = index.createEvent(this, "feedlogUpvote");
|
|
332
|
-
this.feedlogThemeChange = index.createEvent(this, "feedlogThemeChange");
|
|
333
340
|
this.feedlogError = index.createEvent(this, "feedlogError");
|
|
334
341
|
/**
|
|
335
342
|
* Maximum width of the container
|
|
@@ -339,10 +346,6 @@ const FeedlogGithubIssuesClient = class {
|
|
|
339
346
|
* Theme variant: 'light' or 'dark'
|
|
340
347
|
*/
|
|
341
348
|
this.theme = 'light';
|
|
342
|
-
/**
|
|
343
|
-
* Whether to show the theme toggle button
|
|
344
|
-
*/
|
|
345
|
-
this.showThemeToggle = true;
|
|
346
349
|
this.issues = [];
|
|
347
350
|
this.loading = true;
|
|
348
351
|
this.error = null;
|
|
@@ -377,13 +380,8 @@ const FeedlogGithubIssuesClient = class {
|
|
|
377
380
|
this.feedlogError.emit({ error: errorMsg });
|
|
378
381
|
}
|
|
379
382
|
};
|
|
380
|
-
this.handleThemeChange = (event) => {
|
|
381
|
-
this.theme = event.detail;
|
|
382
|
-
this.feedlogThemeChange.emit(event.detail);
|
|
383
|
-
};
|
|
384
383
|
}
|
|
385
384
|
componentWillLoad() {
|
|
386
|
-
this.previousRepos = this.repos;
|
|
387
385
|
this.previousType = this.type;
|
|
388
386
|
this.previousLimit = this.limit;
|
|
389
387
|
this.initializeSDK();
|
|
@@ -391,23 +389,24 @@ const FeedlogGithubIssuesClient = class {
|
|
|
391
389
|
}
|
|
392
390
|
componentDidUpdate() {
|
|
393
391
|
// Re-fetch if any props changed
|
|
394
|
-
const reposChanged = JSON.stringify(this.previousRepos) !== JSON.stringify(this.repos);
|
|
395
392
|
const typeChanged = this.previousType !== this.type;
|
|
396
393
|
const limitChanged = this.previousLimit !== this.limit;
|
|
397
|
-
if (
|
|
394
|
+
if (typeChanged || limitChanged) {
|
|
398
395
|
// Reset pagination when filters change
|
|
399
396
|
this.cursor = null;
|
|
400
397
|
this.hasMore = false;
|
|
401
398
|
this.issues = [];
|
|
402
399
|
this.fetchIssues();
|
|
403
|
-
this.previousRepos = this.repos;
|
|
404
400
|
this.previousType = this.type;
|
|
405
401
|
this.previousLimit = this.limit;
|
|
406
402
|
}
|
|
407
403
|
}
|
|
408
404
|
initializeSDK() {
|
|
409
405
|
try {
|
|
410
|
-
|
|
406
|
+
if (!this.apiKey) {
|
|
407
|
+
throw new Error('API key is required for the Feedlog SDK');
|
|
408
|
+
}
|
|
409
|
+
this.sdk = new FeedlogSDK(Object.assign({ apiKey: this.apiKey }, (this.endpoint && { endpoint: this.endpoint })));
|
|
411
410
|
this.error = null;
|
|
412
411
|
}
|
|
413
412
|
catch (err) {
|
|
@@ -416,39 +415,14 @@ const FeedlogGithubIssuesClient = class {
|
|
|
416
415
|
this.feedlogError.emit({ error: errorMsg });
|
|
417
416
|
}
|
|
418
417
|
}
|
|
419
|
-
parseRepos() {
|
|
420
|
-
if (!this.repos) {
|
|
421
|
-
return [];
|
|
422
|
-
}
|
|
423
|
-
if (typeof this.repos === 'string') {
|
|
424
|
-
try {
|
|
425
|
-
const parsed = JSON.parse(this.repos);
|
|
426
|
-
return Array.isArray(parsed) ? parsed : [this.repos];
|
|
427
|
-
}
|
|
428
|
-
catch (_a) {
|
|
429
|
-
// If not valid JSON, treat as single repo ID
|
|
430
|
-
return [this.repos];
|
|
431
|
-
}
|
|
432
|
-
}
|
|
433
|
-
return Array.isArray(this.repos) ? this.repos : [];
|
|
434
|
-
}
|
|
435
418
|
async fetchIssues() {
|
|
436
419
|
if (!this.sdk) {
|
|
437
420
|
return;
|
|
438
421
|
}
|
|
439
|
-
const repos = this.parseRepos();
|
|
440
|
-
if (repos.length === 0) {
|
|
441
|
-
this.error = 'At least one repository is required';
|
|
442
|
-
this.loading = false;
|
|
443
|
-
this.feedlogError.emit({ error: 'At least one repository is required' });
|
|
444
|
-
return;
|
|
445
|
-
}
|
|
446
422
|
try {
|
|
447
423
|
this.loading = true;
|
|
448
424
|
this.error = null;
|
|
449
|
-
const params = {
|
|
450
|
-
repositoryIds: repos,
|
|
451
|
-
};
|
|
425
|
+
const params = {};
|
|
452
426
|
if (this.type) {
|
|
453
427
|
params.type = this.type;
|
|
454
428
|
}
|
|
@@ -483,10 +457,7 @@ const FeedlogGithubIssuesClient = class {
|
|
|
483
457
|
}
|
|
484
458
|
this.isLoadingMore = true;
|
|
485
459
|
try {
|
|
486
|
-
const
|
|
487
|
-
const params = {
|
|
488
|
-
repositoryIds: repos,
|
|
489
|
-
};
|
|
460
|
+
const params = {};
|
|
490
461
|
if (this.type) {
|
|
491
462
|
params.type = this.type;
|
|
492
463
|
}
|
|
@@ -513,7 +484,7 @@ const FeedlogGithubIssuesClient = class {
|
|
|
513
484
|
}
|
|
514
485
|
}
|
|
515
486
|
render() {
|
|
516
|
-
return (index.h("feedlog-github-issues", { key: '
|
|
487
|
+
return (index.h("feedlog-github-issues", { key: '39ee74bee86db7ff47d921cd771e5ce7c7468bb5', issues: this.issues, maxWidth: this.maxWidth, theme: this.theme, heading: this.heading, subtitle: this.subtitle, loading: this.loading, error: this.error, hasMore: this.hasMore, isLoadingMore: this.isLoadingMore, onFeedlogUpvote: this.handleUpvote, onFeedlogLoadMore: async () => this.loadMore() }));
|
|
517
488
|
}
|
|
518
489
|
};
|
|
519
490
|
|
|
@@ -4,19 +4,10 @@ var index = require('./index-5lluu_3h.js');
|
|
|
4
4
|
|
|
5
5
|
const feedlogGithubIssuesCss = () => `:host{display:block;font-family:ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;--feedlog-background:#ffffff;--feedlog-foreground:oklch(0.145 0 0);--feedlog-muted-foreground:#717182;--feedlog-destructive:#d4183d;--feedlog-padding:2rem}:host(.dark){--feedlog-background:oklch(0.145 0 0);--feedlog-foreground:oklch(0.985 0 0);--feedlog-muted-foreground:oklch(0.708 0 0);--feedlog-destructive:oklch(0.637 0.237 25.331)}.github-issues-container{min-height:100vh;background-color:var(--feedlog-background);padding:var(--feedlog-padding);margin:0 auto}.issues-header{margin-bottom:1.5rem;display:flex;align-items:flex-start;justify-content:space-between}.header-content{flex:1}.issues-title{color:var(--feedlog-foreground);margin:0 0 0.25rem 0;font-size:1.5rem;font-weight:500;line-height:1.5}.issues-subtitle{color:var(--feedlog-muted-foreground);font-size:0.875rem;margin:0}.loading-state,.error-state{padding:2rem;text-align:center;color:var(--feedlog-muted-foreground)}.error-state{color:var(--feedlog-destructive)}.load-more-container{display:flex;justify-content:center;padding:2rem 0;gap:1rem}`;
|
|
6
6
|
|
|
7
|
-
/**
|
|
8
|
-
* Sun icon SVG component
|
|
9
|
-
*/
|
|
10
|
-
const SunIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("circle", { cx: "12", cy: "12", r: "4" }), index.h("path", { d: "M12 2v2" }), index.h("path", { d: "M12 20v2" }), index.h("path", { d: "m4.93 4.93 1.41 1.41" }), index.h("path", { d: "m17.66 17.66 1.41 1.41" }), index.h("path", { d: "M2 12h2" }), index.h("path", { d: "M20 12h2" }), index.h("path", { d: "m6.34 17.66-1.41 1.41" }), index.h("path", { d: "m19.07 4.93-1.41 1.41" })));
|
|
11
|
-
/**
|
|
12
|
-
* Moon icon SVG component
|
|
13
|
-
*/
|
|
14
|
-
const MoonIcon = () => (index.h("svg", { xmlns: "http://www.w3.org/2000/svg", width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })));
|
|
15
7
|
const FeedlogGithubIssues = class {
|
|
16
8
|
constructor(hostRef) {
|
|
17
9
|
index.registerInstance(this, hostRef);
|
|
18
10
|
this.feedlogUpvote = index.createEvent(this, "feedlogUpvote");
|
|
19
|
-
this.feedlogThemeChange = index.createEvent(this, "feedlogThemeChange");
|
|
20
11
|
this.feedlogLoadMore = index.createEvent(this, "feedlogLoadMore");
|
|
21
12
|
/**
|
|
22
13
|
* Array of issues to display
|
|
@@ -38,10 +29,6 @@ const FeedlogGithubIssues = class {
|
|
|
38
29
|
* Error message - shows error state when set
|
|
39
30
|
*/
|
|
40
31
|
this.error = null;
|
|
41
|
-
/**
|
|
42
|
-
* Whether to show the theme toggle button
|
|
43
|
-
*/
|
|
44
|
-
this.showThemeToggle = true;
|
|
45
32
|
/**
|
|
46
33
|
* Whether there are more issues to load
|
|
47
34
|
*/
|
|
@@ -57,11 +44,6 @@ const FeedlogGithubIssues = class {
|
|
|
57
44
|
this.handleUpvote = (event) => {
|
|
58
45
|
this.feedlogUpvote.emit(event.detail);
|
|
59
46
|
};
|
|
60
|
-
this.toggleTheme = () => {
|
|
61
|
-
this.currentTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
|
|
62
|
-
this.theme = this.currentTheme;
|
|
63
|
-
this.feedlogThemeChange.emit(this.currentTheme);
|
|
64
|
-
};
|
|
65
47
|
this.handleLoadMore = () => {
|
|
66
48
|
this.feedlogLoadMore.emit();
|
|
67
49
|
};
|
|
@@ -73,7 +55,7 @@ const FeedlogGithubIssues = class {
|
|
|
73
55
|
const containerStyle = {
|
|
74
56
|
maxWidth: this.maxWidth,
|
|
75
57
|
};
|
|
76
|
-
return (index.h(index.Host, { key: '
|
|
58
|
+
return (index.h(index.Host, { key: '473e30453d8b3a719bd977a361b7f669fdd88e48', class: this.currentTheme === 'dark' ? 'dark' : '' }, index.h("div", { key: 'ab91126edb301a1da6136f14441ec33833b6cd74', class: "github-issues-container", style: containerStyle }, (this.heading || this.subtitle) && (index.h("header", { key: '17494da495d2b2910e6f024f1c3971a945e0a1cc', class: "issues-header" }, index.h("div", { key: '95d5ac1c25ccfc864a863cafe1fa89d4ce04fce2', class: "header-content" }, this.heading && index.h("h1", { key: 'b37f9b9372e1b99da76c0fb9ee50d0a6cdbb0549', class: "issues-title" }, this.heading), this.subtitle && index.h("p", { key: '5edc92ca86f2dfd1afe640d77d65782e5ec27a8e', class: "issues-subtitle" }, this.subtitle)))), this.loading && (index.h("div", { key: 'f786656d24c8b88a57c7fa48f0d1877ac3565767', class: "loading-state" }, index.h("p", { key: 'fa97c2a05f52c2c1fbe0e907ac797cd6570d0a82' }, "Loading issues..."))), this.error && (index.h("div", { key: '798f3dc1ba004b2889aee6490b74240900ba3812', class: "error-state" }, index.h("p", { key: '03b996ab514027fce2e88a93901f3fe17d8da3e1' }, "Error: ", this.error))), !this.loading && !this.error && (index.h("div", { key: '67501ae1866122df2db6f97752d632013dbcd8a1' }, index.h("feedlog-issues-list", { key: 'c668c631f6ba6008df0a411bda7824bcce7318cd', issues: this.issues, theme: this.currentTheme, onFeedlogUpvote: this.handleUpvote }), this.hasMore && (index.h("div", { key: '28e1ea0600436f3ca8bf12e57e9764bf8899fa53', class: "load-more-container" }, index.h("feedlog-button", { key: 'f19576026d152e1b7f7957c83ccfee3c44727dd0', onFeedlogClick: this.handleLoadMore, disabled: this.isLoadingMore, variant: "outline" }, this.isLoadingMore ? 'Loading...' : 'Load More Issues'))))))));
|
|
77
59
|
}
|
|
78
60
|
};
|
|
79
61
|
FeedlogGithubIssues.style = feedlogGithubIssuesCss();
|
|
@@ -18,7 +18,7 @@ var patchBrowser = () => {
|
|
|
18
18
|
|
|
19
19
|
patchBrowser().then(async (options) => {
|
|
20
20
|
await index.globalScripts();
|
|
21
|
-
return index.bootstrapLazy([["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge_3.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1]}],[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-github-issues.cjs",[[1,"feedlog-github-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"
|
|
21
|
+
return index.bootstrapLazy([["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge_3.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1]}],[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-github-issues.cjs",[[1,"feedlog-github-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"heading":[1],"subtitle":[1],"loading":[4],"error":[1],"hasMore":[4,"has-more"],"isLoadingMore":[4,"is-loading-more"],"currentTheme":[32]}]]],["feedlog-github-issues-client.cjs",[[1,"feedlog-github-issues-client",{"apiKey":[1,"api-key"],"type":[1],"limit":[2],"endpoint":[1],"maxWidth":[1,"max-width"],"theme":[1],"heading":[1],"subtitle":[1],"issues":[32],"loading":[32],"error":[32],"cursor":[32],"hasMore":[32],"isLoadingMore":[32]}]]]], options);
|
|
22
22
|
});
|
|
23
23
|
|
|
24
24
|
exports.setNonce = index.setNonce;
|
package/dist/cjs/loader.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ var index = require('./index-5lluu_3h.js');
|
|
|
5
5
|
const defineCustomElements = async (win, options) => {
|
|
6
6
|
if (typeof window === 'undefined') return undefined;
|
|
7
7
|
await index.globalScripts();
|
|
8
|
-
return index.bootstrapLazy([["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge_3.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1]}],[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-github-issues.cjs",[[1,"feedlog-github-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"
|
|
8
|
+
return index.bootstrapLazy([["feedlog-card.cjs",[[257,"feedlog-card"]]],["feedlog-badge_3.cjs",[[1,"feedlog-issues-list",{"issues":[16],"theme":[1]}],[257,"feedlog-button",{"variant":[1],"size":[1],"disabled":[4],"type":[1]}],[257,"feedlog-badge",{"variant":[1]}]]],["feedlog-github-issues.cjs",[[1,"feedlog-github-issues",{"issues":[16],"maxWidth":[1,"max-width"],"theme":[1025],"heading":[1],"subtitle":[1],"loading":[4],"error":[1],"hasMore":[4,"has-more"],"isLoadingMore":[4,"is-loading-more"],"currentTheme":[32]}]]],["feedlog-github-issues-client.cjs",[[1,"feedlog-github-issues-client",{"apiKey":[1,"api-key"],"type":[1],"limit":[2],"endpoint":[1],"maxWidth":[1,"max-width"],"theme":[1],"heading":[1],"subtitle":[1],"issues":[32],"loading":[32],"error":[32],"cursor":[32],"hasMore":[32],"isLoadingMore":[32]}]]]], options);
|
|
9
9
|
};
|
|
10
10
|
|
|
11
11
|
exports.setNonce = index.setNonce;
|