@bagelink/vue 1.15.176 → 1.15.178

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.15.176",
+  "version": "1.15.178",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/components/kanban/KanbanBoard.vue

@@ -112,20 +112,20 @@ function cardBadges(item: T) {
 </script>
 
 <template>
-	<div class="bgl-kanban">
+	<div class="bgl-kanban m_pt-075 gap-1 display-flex overflow-x min-h-0 min-w-0">
 		<div
 			v-for="col in resolvedColumns" :key="col.id"
-			class="bgl-kanban-col"
+			class="bgl-kanban-col column display-flex"
 			:class="{ 'is-dragover': dragOverCol === col.id }"
 			@dragover.prevent="draggable && (dragOverCol = col.id)"
 			@dragleave="dragOverCol === col.id && (dragOverCol = null)"
 			@drop="onDrop(col)"
 		>
 			<!-- header -->
-			<div class="bgl-kanban-head">
+			<div class="bgl-kanban-head gap-05 px-025 flex">
 				<slot name="column-header" :column="col" :count="col.items.length">
 					<Badge v-if="col.color" dot :color="col.color" :value="col.title" flat sm />
-					<span v-else class="bgl-kanban-title">
+					<span v-else class="bgl-kanban-title txt13 semi">
 						<Badge v-if="col.icon" :icon="col.icon" flat sm :value="col.title" />
 						<template v-else>{{ col.title }}</template>
 					</span>
@@ -134,7 +134,7 @@ function cardBadges(item: T) {
 			</div>
 
 			<!-- cards -->
-			<div class="bgl-kanban-list">
+			<div class="bgl-kanban-list column display-flex">
 				<div
 					v-for="(item, i) in col.items" :key="keyOf(item)"
 					class="bgl-kanban-card-wrap"
@@ -146,46 +146,40 @@ function cardBadges(item: T) {
 				>
 					<slot name="card" :item="item" :column="col">
 						<!-- default schema card -->
-						<div class="bgl-kanban-card">
-							<div v-if="cardTitle(item)" class="bgl-kanban-card-title">{{ cardTitle(item) }}</div>
-							<div v-if="cardSubtitle(item)" class="bgl-kanban-card-sub">{{ cardSubtitle(item) }}</div>
-							<div v-if="cardBadges(item).length" class="bgl-kanban-card-badges">
+						<div class="bgl-kanban-card display-flex column gap-05 border bg-box">
+							<div v-if="cardTitle(item)" class="bgl-kanban-card-title txt13 semi line-height-13">{{ cardTitle(item) }}</div>
+							<div v-if="cardSubtitle(item)" class="bgl-kanban-card-sub txt12 opacity-7">{{ cardSubtitle(item) }}</div>
+							<div v-if="cardBadges(item).length" class="bgl-kanban-card-badges gap-025 display-flex flex-wrap">
 								<Badge v-for="(b, bi) in cardBadges(item)" :key="bi" sm soft :color="b.color || 'gray'" :value="b.label" />
 							</div>
-							<div v-if="cardId(item)" class="bgl-kanban-card-foot">{{ cardId(item) }}</div>
+							<div v-if="cardId(item)" class="bgl-kanban-card-foot1 bg-red txt11 opacity-5 monospace">{{ cardId(item) }}</div>
 						</div>
 					</slot>
 				</div>
 
-				<EmptyState v-if="!col.items.length && !col.loading" compact icon="inbox" :title="emptyText" class="bgl-kanban-empty" />
-				<Loading v-if="col.loading" class="bgl-kanban-loading" />
+				<EmptyState v-if="!col.items.length && !col.loading" compact icon="inbox" :title="emptyText" class="bgl-kanban-empty py-075 opacity-5" />
+				<Loading v-if="col.loading" class="bgl-kanban-loading p-1 display-flex justify-content-center" />
+				<!-- footer / load more -->
+				<div v-if="canLoadMore(col) || slots['column-footer']" class="bgl-kanban-foot">
+					<slot name="column-footer" :column="col">
+						<Btn
+							v-if="canLoadMore(col)" flat thin sm full-width icon="expand_more"
+							:value="`Load more`" :disabled="col.loading" @click="onLoadMore(col)"
+						/>
+					</slot>
+				</div>
 			</div>
 
-			<!-- footer / load more -->
-			<div v-if="canLoadMore(col) || slots['column-footer']" class="bgl-kanban-foot">
-				<slot name="column-footer" :column="col">
-					<Btn
-						v-if="canLoadMore(col)" flat thin sm full-width icon="expand_more"
-						:value="`Load more`" :disabled="col.loading" @click="onLoadMore(col)"
-					/>
-				</slot>
-			</div>
 		</div>
 	</div>
 </template>
 
 <style scoped>
 .bgl-kanban {
-	display: flex;
 	align-items: stretch;
-	gap: 1rem;
 	overflow-x: auto;
-	min-height: 0;
-	min-width: 0;
 }
 .bgl-kanban-col {
-	display: flex;
-	flex-direction: column;
 	gap: .6rem;
 	width: 280px;
 	min-width: 280px;
@@ -198,34 +192,15 @@ function cardBadges(item: T) {
 	outline: 1px dashed color-mix(in srgb, var(--bgl-primary) 40%, transparent);
 	outline-offset: 2px;
 }
-.bgl-kanban-head {
-	display: flex;
-	align-items: center;
-	gap: .5rem;
-	padding: 0 .25rem;
-}
-.bgl-kanban-title { font-size: 13px; font-weight: 600; }
-/* flex:1 → list fills the column so empty columns stay full-height drop targets */
-.bgl-kanban-list { display: flex; flex-direction: column; gap: .6rem; flex: 1; min-height: 8px; }
+.bgl-kanban-list { gap: .6rem; flex: 1; min-height: 8px; }
 .bgl-kanban-card-wrap { cursor: pointer; }
 .bgl-kanban-card-wrap[draggable='true'] { cursor: grab; }
 .bgl-kanban-card-wrap[draggable='true']:active { cursor: grabbing; }
 .bgl-kanban-card {
-	display: flex;
-	flex-direction: column;
-	gap: .5rem;
 	padding: .75rem .85rem;
-	background: var(--bgl-box-bg);
-	border: 1px solid var(--bgl-border-color);
 	border-radius: var(--bgl-radius, 12px);
 	transition: border-color .12s, box-shadow .12s;
 }
 .bgl-kanban-card:hover { border-color: color-mix(in srgb, var(--bgl-primary) 50%, var(--bgl-border-color)); }
-.bgl-kanban-card-title { font-size: 13px; font-weight: 600; line-height: 1.3; }
-.bgl-kanban-card-sub { font-size: 12px; opacity: .7; }
-.bgl-kanban-card-badges { display: flex; gap: .25rem; flex-wrap: wrap; }
-.bgl-kanban-card-foot { font-size: 11px; font-family: ui-monospace, monospace; opacity: .5; }
-.bgl-kanban-empty { padding: .75rem 0; opacity: .5; }
-.bgl-kanban-loading { padding: 1rem; display: flex; justify-content: center; }
 .bgl-kanban-foot { padding-top: .1rem; }
 </style>