New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

kanbancast-components

Package Overview
Dependencies
Maintainers
1
Versions
26
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

kanbancast-components - npm Package Compare versions

Comparing version

1.0.7
to
1.0.8

BoardView.d.ts
BoardView.ts
dist/BoardView.d.ts
dist/BoardView.js
tsconfig.json

236

BoardView.js

@@ -0,30 +1,222 @@

// src/BoardView.ts
import { LitElement, html, css } from 'lit';
class BoardView extends LitElement {
static styles = css`
:host {
display: block;
border: 1px solid #ccc;
import { property, customElement } from 'lit/decorators.js';
@customElement('board-view')
export class BoardView extends LitElement {
// @ts-ignore
@property({ type: Array })
statuses = [
{
"id": 1,
"title": "Pending",
"slug": "pending",
"order": 3,
"tasks": []
},
{
"id": 2,
"title": "To Do",
"slug": "to-do",
"order": 1,
"tasks": [
{
"id": 1,
"title": "Task 1",
"description": "Description of Task 1",
"order": 1,
"votes": 1,
"status_id": 1
},
{
"id": 2,
"title": "Task 2",
"description": "Description of Task 2",
"order": 2,
"votes": 1,
"status_id": 1
}
]
},
{
"id": 3,
"title": "In Progress",
"slug": "in-progress",
"order": 2,
"tasks": [
{
"id": 3,
"title": "Task 3",
"description": "Description of Task 3",
"order": 1,
"votes": 1,
"status_id": 2
}
]
},
{
"id": 4,
"title": "Review",
"slug": "review",
"order": 3,
"tasks": []
},
{
"id": 5,
"title": "Done",
"slug": "done",
"order": 4,
"tasks": []
},
{
"id": 6,
"title": "Published",
"slug": "published",
"order": 4,
"tasks": []
}
];
// @ts-ignore
@property({ type: Number })
projectId = 0;
// @ts-ignore
@property({ type: Object })
project;
// @ts-ignore
@property({ type: String })
selectedTab = 'Active';
static styles = css `
.container {
background-color: #5a67d8;
border-radius: 8px;
padding: 16px;
max-width: 300px;
margin: 0 auto;
text-align: center;
background-color: #f9f9f9;
margin: 16px;
}
.header {
display: flex;
justify-content: space-between;
margin-left: 16px;
}
.tabs {
display: flex;
justify-content: start;
}
.tab {
padding: 8px 16px;
margin-right: 8px;
border-radius: 8px;
border: none;
background: transparent;
cursor: pointer;
}
.active-tab {
background-color: white;
}
.tasks-list {
list-style-type: none;
}
.task-item {
display: flex;
align-items: center;
background-color: white;
border-radius: 8px;
padding: 16px;
margin: 16px;
gap: 16px;
}
.upvote-button {
display: flex;
flex-direction: column;
align-items: center;
padding: 8px;
border: 2px solid #cbd5e0;
background-color: white;
border-radius: 8px;
}
.votes-count {
font-size: small;
}
.task-details {
flex-grow: 1;
display: flex;
justify-content: space-between;
align-items: start;
}
.task-title {
font-size: large;
font-weight: bold;
}
.task-description {
font-size: small;
}
`;
static properties = {
title: { type: String }
};
constructor() {
super();
this.title = 'Default Title';
updated(changedProperties) {
super.updated(changedProperties);
if (changedProperties.has('statuses')) {
console.log('Statuses updated:', this.statuses);
}
}
get tasksForSelectedTab() {
const activeStatuses = ['To Do', 'In Progress', 'Pending', 'Review'];
const doneStatuses = ['Done', 'Published'];
const relevantStatuses = this.selectedTab === 'Active' ? activeStatuses : doneStatuses;
return this.statuses
.filter(status => relevantStatuses.includes(status.title))
.flatMap(status => status.tasks.map(task => ({ ...task, status: status })));
}
async upvoteTask(task) {
console.log('Task upvoted!');
if (this.projectId) {
try {
// const response = await axios.post(
// `/api/tasks/upvote`,
// { taskId: task.id, projectId: this.projectId }
// );
// if (response.data && response.status === 200) {
// task.votes = response.data.votes;
// console.log('Vote incremented successfully');
// } else {
// console.error('Failed to increment votes');
// }
}
catch (error) {
console.error('Error incrementing votes:', error);
}
}
}
render() {
return html `
<div class="container">
<div class="header">
<div class="tabs">
<button
@click=${() => this.selectedTab = 'Active'}
class="tab ${this.selectedTab === 'Active' ? 'active-tab' : ''}"
>
Active
</button>
<button
@click=${() => this.selectedTab = 'Done'}
class="tab ${this.selectedTab === 'Done' ? 'active-tab' : ''}"
>
Done
</button>
</div>
</div>
render() {
return html`<h2>${this.title}</h2><slot></slot>`;
<ul class="tasks-list">
${this.tasksForSelectedTab.map(task => html `
<li class="task-item">
<button @click=${() => this.upvoteTask(task)} class="upvote-button">
<span class="votes-count">${task.votes ?? 1}</span>
</button>
<div class="task-details">
<p class="task-title">${task.title}</p>
<p class="task-description">${task.description}</p>
</div>
</li>
`)}
</ul>
</div>
`;
}
}
customElements.define('board-view', BoardView);

9

package.json
{
"name": "kanbancast-components",
"version": "1.0.7",
"version": "1.0.8",
"description": "",
"main": "BoardView.js",
"main": "dist/BoardView.js",
"scripts": {
"build": "tsc",
"test": "echo \"Error: no test specified\" && exit 1"

@@ -14,3 +15,7 @@ },

"lit": "^3.1.3"
},
"devDependencies": {
"@types/node": "^20.12.11",
"typescript": "^5.4.5"
}
}