@svar-ui/svelte-kanban 2.6.0

package/dist/components/Avatar.svelte

@@ -0,0 +1,87 @@
+<script lang="ts">let { value, size = 24, limit } = $props();
+const users = $derived(Array.isArray(value) ? value : value ? [value] : []);
+const safeLimit = $derived(typeof limit === "number" && Number.isFinite(limit) ? Math.max(0, Math.floor(limit)) : users.length);
+const visibleUsers = $derived(users.slice(0, safeLimit));
+const overflowCount = $derived(Math.max(0, users.length - visibleUsers.length));
+const fontSize = $derived(Math.max(10, Math.round(size * .42)));
+const stackStyle = $derived(`--wx-avatar-size:${size}px;--wx-avatar-font-size:${fontSize}px;`);
+function getLabel(user) {
+	return user.label ?? user.name ?? "";
+}
+function getInitials(user) {
+	const label = getLabel(user).trim();
+	if (!label) return "";
+	const words = label.split(/\s+/);
+	return (words[0][0] + (words[1]?.[0] ?? "")).toUpperCase().slice(0, 2);
+}
+function getImage(user) {
+	return user.img ?? user.avatar;
+}
+export {};
+</script>
+
+{#if users.length > 0}
+	<div class="wx-avatars" style={stackStyle}>
+		{#each visibleUsers as user (user.id)}
+			{@const label = getLabel(user)}
+			{@const image = getImage(user)}
+			<span
+				class="wx-avatar {user.css ?? ''}"
+				title={label || undefined}
+				aria-label={label || undefined}
+			>
+				{#if image}
+					<img class="wx-image" src={image} alt="" loading="lazy" />
+				{:else}
+					{getInitials(user)}
+				{/if}
+			</span>
+		{/each}
+		{#if overflowCount > 0}
+			<span class="wx-avatar wx-more">+{overflowCount}</span>
+		{/if}
+	</div>
+{/if}
+
+<style>
+	.wx-avatars {
+		display: inline-flex;
+		align-items: center;
+		min-width: 0;
+	}
+
+	.wx-avatar {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		width: var(--wx-avatar-size);
+		height: var(--wx-avatar-size);
+		margin-left: calc(var(--wx-avatar-size) * -0.25);
+		border: 2px solid var(--wx-kanban-card-bg);
+		border-radius: 50%;
+		background: var(--wx-kanban-avatar-bg);
+		color: var(--wx-color-font);
+		font-size: var(--wx-avatar-font-size);
+		font-weight: var(--wx-font-weight-md);
+		line-height: 1;
+		overflow: hidden;
+		text-transform: uppercase;
+		user-select: none;
+	}
+
+	.wx-avatar:first-child {
+		margin-left: 0;
+	}
+
+	.wx-image {
+		display: block;
+		width: 100%;
+		height: 100%;
+		object-fit: cover;
+	}
+
+	.wx-more {
+		font-size: calc(var(--wx-avatar-font-size) * 0.85);
+		text-transform: none;
+	}
+</style>

package/dist/components/Avatar.svelte.d.ts

@@ -0,0 +1,17 @@
+import type { CardID } from "@svar-ui/kanban-store";
+type AvatarUser = {
+    id: CardID;
+    label?: string;
+    name?: string;
+    img?: string;
+    avatar?: string;
+    css?: string;
+};
+type Props = {
+    value?: AvatarUser | AvatarUser[] | null;
+    size?: number;
+    limit?: number;
+};
+declare const Avatar: import("svelte").Component<Props, {}, "">;
+type Avatar = ReturnType<typeof Avatar>;
+export default Avatar;

package/dist/components/Card.svelte

@@ -0,0 +1,346 @@
+<script lang="ts">import { getContext } from "svelte";
+import Avatar from "./Avatar.svelte";
+import { getPriorityOptions } from "../defaults.js";
+let { card, cardShape } = $props();
+const _ = getContext("wx-i18n").getGroup("kanban");
+function countOf(v) {
+	if (typeof v === "number") return v;
+	if (Array.isArray(v)) return v.length;
+	return 0;
+}
+function configOf(shape) {
+	return typeof shape === "object" && shape !== null ? shape : undefined;
+}
+function itemID(value) {
+	if (typeof value === "string" || typeof value === "number") return value;
+	const id = value?.id;
+	if (typeof id === "string" || typeof id === "number") return id;
+	return null;
+}
+function fallbackLabel(value) {
+	const id = itemID(value);
+	if (id != null) return String(id);
+	return String(value?.label ?? value?.name ?? "");
+}
+function findItem(collection, id) {
+	return collection?.find((item) => item.id === id);
+}
+function resolveItem(value, collection) {
+	const id = itemID(value);
+	if (id == null) return null;
+	const match = findItem(collection, id);
+	if (match) return match;
+	return {
+		id,
+		label: fallbackLabel(value)
+	};
+}
+function resolveItems(values, collection, max) {
+	if (!Array.isArray(values)) return [];
+	const items = values.map((value) => resolveItem(value, collection)).filter((item) => item !== null);
+	return typeof max === "number" && Number.isFinite(max) ? items.slice(0, Math.max(0, max)) : items;
+}
+function toDate(value) {
+	if (value instanceof Date) return Number.isNaN(value.getTime()) ? null : value;
+	if (typeof value === "string" || typeof value === "number") {
+		const d = new Date(value);
+		return Number.isNaN(d.getTime()) ? null : d;
+	}
+	return null;
+}
+function pad2(n) {
+	return n < 10 ? "0" + n : String(n);
+}
+function formatDeadline(value, format) {
+	const d = toDate(value);
+	if (!d) return null;
+	if (!format) return d.toLocaleDateString();
+	return format.replace(/YYYY/g, String(d.getFullYear())).replace(/MM/g, pad2(d.getMonth() + 1)).replace(/DD/g, pad2(d.getDate())).replace(/HH/g, pad2(d.getHours())).replace(/mm/g, pad2(d.getMinutes()));
+}
+let priorityConfig = $derived(configOf(cardShape.priority));
+let tagConfig = $derived(configOf(cardShape.tags));
+let userConfig = $derived(configOf(cardShape.users));
+let deadlineConfig = $derived(configOf(cardShape.deadline));
+let progressConfig = $derived(configOf(cardShape.progress));
+let progressPercent = $derived(Math.round(Math.max(0, Math.min(1, card.progress ?? 0)) * 100));
+let priority = $derived(cardShape.priority ? resolveItem(card.priority, priorityConfig?.data ?? getPriorityOptions()) : null);
+let tags = $derived(cardShape.tags ? resolveItems(card.tags, tagConfig?.data, tagConfig?.max) : []);
+let users = $derived(cardShape.users ? resolveItems(card.users, userConfig?.data, userConfig?.max) : []);
+let avatarUsers = $derived(users.map((u) => ({
+	id: u.id,
+	name: u.label,
+	avatar: u.img
+})));
+let deadline = $derived(cardShape.deadline ? formatDeadline(card.deadline, deadlineConfig?.format) : null);
+</script>
+
+{#if card.cover && cardShape.cover}
+	<div
+		class="wx-cover"
+		style="background-image: url({card.cover});"
+	></div>
+{/if}
+
+
+{#if priority || deadline}
+	<div class="wx-header">
+		{#if priority}
+			<span class="wx-priority {priority.css ?? ''}"
+				>{_(priority.label)}</span
+			>
+		{/if}
+		{#if deadline}
+			<span class="wx-deadline">{deadline}</span>
+		{/if}
+		{#if cardShape.menu}
+			<button
+				type="button"
+				class="wx-menu"
+				data-action="menu"
+				aria-label={_("Card menu")}
+			>
+				<i class="wx-icon wxi-dots-h"></i>
+			</button>
+		{/if}
+	</div>
+{/if}
+
+
+<div class="wx-body">
+	<div class="wx-title-row">
+		{#if card.label}
+			<div class="wx-title">
+				{card.label}
+
+				{#if cardShape.menu && !priority && !deadline}
+					<button
+						type="button"
+						class="wx-menu"
+						data-action="menu"
+						aria-label={_("Card menu")}
+					>
+						<i class="wx-icon wxi-dots-h"></i>
+					</button>
+				{/if}
+			</div>
+		{/if}
+	</div>
+	{#if card.description && cardShape.description}
+		<p class="wx-description">{card.description}</p>
+	{/if}
+	{#if tags.length > 0}
+		<div class="wx-tags">
+			{#each tags as tag (tag.id)}
+				<span class="wx-tag {tag.css ?? ''}">{tag.label}</span>
+			{/each}
+		</div>
+	{/if}
+	{#if card.progress > 0 && cardShape.progress}
+		<div class="wx-progress-row">
+			<div class="wx-progress" aria-label={_("Progress")}>
+				<div
+					class="wx-progress-fill"
+					style="width: {progressPercent}%;"
+				></div>
+			</div>
+			{#if progressConfig?.showLabel}
+				<span class="wx-progress-label">{progressPercent}%</span>
+			{/if}
+		</div>
+	{/if}
+</div>
+
+
+{#if users.length > 0 || (countOf(card.attachments) > 0 && cardShape.attachments) || (countOf(card.comments) > 0 && cardShape.comments)}
+	<div class="wx-footer">
+		{#if avatarUsers.length > 0}
+			<Avatar value={avatarUsers} size={24} />
+		{/if}
+		<div class="wx-counters">
+			{#if countOf(card.attachments) > 0 && cardShape.attachments}
+				<span class="wx-counter" aria-label={_("Attachments")}>
+					<i class="wx-icon wxi-paperclip"></i>
+					{countOf(card.attachments)}
+				</span>
+			{/if}
+			{#if countOf(card.comments) > 0 && cardShape.comments}
+				<span class="wx-counter" aria-label={_("Comments")}>
+					<i class="wx-icon wxi-message"></i>
+					{countOf(card.comments)}
+				</span>
+			{/if}
+		</div>
+	</div>
+{/if}
+
+<style>
+	.wx-cover {
+		margin: -12px;
+		margin-bottom: 0;
+		height: 80px;
+		background-size: cover;
+		background-position: center;
+		border-top-left-radius: var(--wx-border-radius);
+		border-top-right-radius: var(--wx-border-radius);
+	}
+
+	.wx-header {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		gap: 6px;
+		font-size: var(--wx-font-size-sm);
+	}
+
+	.wx-priority {
+		background: var(--wx-kanban-tag-bg);
+		border-radius: var(--wx-border-radius);
+		padding: 1px 6px;
+		font-weight: var(--wx-font-weight-md);
+	}
+
+	.wx-header :global(.wx-card-priority-low) {
+		background: var(--wx-kanban-priority-low-bg);
+		color: var(--wx-kanban-priority-low-color);
+	}
+
+	.wx-header :global(.wx-card-priority-medium) {
+		background: var(--wx-kanban-priority-medium-bg);
+		color: var(--wx-kanban-priority-medium-color);
+	}
+
+	.wx-header :global(.wx-card-priority-high) {
+		background: var(--wx-kanban-priority-high-bg);
+		color: var(--wx-kanban-priority-high-color);
+	}
+
+	.wx-deadline {
+		margin-left: auto;
+		color: var(--wx-color-font-alt);
+	}
+
+	.wx-menu {
+		display: inline-flex;
+		align-items: center;
+		justify-content: center;
+		background: none;
+		border: none;
+		padding: 0;
+		width: 22px;
+		height: 22px;
+		border-radius: var(--wx-icon-border-radius);
+		cursor: pointer;
+		color: var(--wx-color-font-alt);
+		font-size: 16px;
+	}
+
+	.wx-title .wx-menu {
+		float: right;
+	}
+
+	.wx-menu:hover {
+		background: var(--wx-background-hover);
+		color: var(--wx-color-font);
+	}
+
+	.wx-menu:focus-visible {
+		outline: none;
+		border: 1px solid var(--wx-color-primary);
+	}
+
+	.wx-body {
+		display: flex;
+		flex-direction: column;
+		gap: 4px;
+	}
+
+	.wx-title {
+		font-weight: var(--wx-font-weight-md);
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+	}
+
+	.wx-description {
+		margin: 0;
+		color: var(--wx-color-font-alt);
+		font-size: 13px;
+		overflow: hidden;
+		display: -webkit-box;
+		-webkit-line-clamp: 2;
+		line-clamp: 2;
+		-webkit-box-orient: vertical;
+		margin-bottom: 4px;
+	}
+
+	.wx-tags {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 4px;
+		margin-bottom: 4px;
+	}
+
+	.wx-tag {
+		background: var(--wx-kanban-tag-bg);
+		border-radius: 10px;
+		padding: 1px 8px;
+		font-size: 11px;
+		color: var(--wx-color-font-alt);
+	}
+
+	.wx-progress-row {
+		display: flex;
+		align-items: center;
+		gap: 6px;
+	}
+
+	.wx-progress {
+		flex: 1;
+		height: 4px;
+		background: var(--wx-kanban-progress-bg);
+		border-radius: 2px;
+		overflow: hidden;
+	}
+
+	.wx-progress-label {
+		font-size: 11px;
+		color: var(--wx-color-font-alt);
+		min-width: 32px;
+		text-align: right;
+	}
+
+	.wx-progress-fill {
+		height: 100%;
+		background: var(--wx-kanban-progress-fill);
+	}
+
+	.wx-footer {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		margin-top: 2px;
+	}
+
+	.wx-counters {
+		display: flex;
+		gap: 12px;
+		font-size: var(--wx-font-size-sm);
+		color: var(--wx-color-font-alt);
+		margin-top: -5px;
+		margin-left: auto;
+	}
+
+	.wx-counter {
+		display: inline-flex;
+		align-items: center;
+		gap: 2px;
+	}
+
+	.wx-counter .wx-icon {
+		font-size: 16px;
+		margin-top: 7px;
+		margin-bottom: 5px;
+	}
+</style>

package/dist/components/Card.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { KanbanCard } from "@svar-ui/kanban-store";
+import type { CardShape } from "../types.js";
+type Props = {
+    card: KanbanCard;
+    cardShape: CardShape;
+};
+declare const Card: import("svelte").Component<Props, {}, "">;
+type Card = ReturnType<typeof Card>;
+export default Card;