@bagelink/vue 1.14.10 → 1.14.15

package/src/components/dataTable/DataTable.vue

@@ -2,13 +2,15 @@
 import type { BaseBagelField, Field, Path } from '@bagelink/vue'
 import type { SetupContext } from 'vue'
 import type { TableSchemaProps } from '../../types/TableSchema'
+import type { DraggableEvent } from '../draggable/useDraggable'
 import {
 	Icon,
 	keyToLabel,
 	Loading
 } from '@bagelink/vue'
-import { useSlots, watch, computed, toValue } from 'vue'
+import { useSlots, watch, computed, toValue, ref, nextTick, onMounted } from 'vue'
 import { useSchemaField } from '../../composables/useSchemaField'
+import { useDraggable } from '../draggable/useDraggable'
 import { useTableData } from './useTableData'
 import { useTableSelection } from './useTableSelection'
 import { useTableVirtualization } from './useTableVirtualization'
@@ -21,6 +23,7 @@ const props = defineProps<TableSchemaProps<T>>()
 const emit = defineEmits<{
 	orderBy: [EmitOrderT]
 	select: [T]
+	reorder: [{ oldIndex: number, newIndex: number, item: T }]
 	lastItemVisible: []
 }>()
 
@@ -78,6 +81,38 @@ const {
 	}
 })
 
+const isSortable = computed(() => !!props.sortable)
+const dragHandle = computed(() => {
+	if (typeof props.sortable === 'object' && props.sortable?.handle) return props.sortable.handle
+	return '.drag-handle-col'
+})
+
+// Drag-to-reorder
+const tbodyRef = ref<HTMLTableSectionElement>()
+
+const { initDraggableContainer } = useDraggable({
+	handle: dragHandle.value,
+	mode: 'line',
+	items: props.data,
+	onEnd: (event: DraggableEvent) => {
+		if (event.oldIndex === event.newIndex) return
+		const item = computedData.value[event.oldIndex]
+		const cleanItem = cleanTransformedData(item)
+		emit('reorder', { oldIndex: event.oldIndex, newIndex: event.newIndex, item: cleanItem })
+	}
+})
+
+function reinitDrag() {
+	if (!isSortable.value || !tbodyRef.value) return
+	nextTick(() => {
+		if (tbodyRef.value) initDraggableContainer(tbodyRef.value)
+	})
+}
+
+watch(() => props.data, reinitDrag, { deep: true })
+watch(isSortable, (val) => { if (val) nextTick(reinitDrag) })
+onMounted(reinitDrag)
+
 function renderFieldForRow(field: Field<T>, row: T) {
 	const { renderField } = useSchemaField<T>({
 		mode: 'table',
@@ -119,29 +154,33 @@ const showLoading = computed(() => loading.value)
 		<div v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
 			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">
 				<thead class="row first-row">
-					<th v-if="isSelectable">
+					<th v-if="isSortable" class="col-drag" />
+					<th v-if="isSelectable && !isSortable">
 						<input ref="allSelectorEl" type="checkbox" @click.stop @change="(e) => toggleSelectAll(e)">
 					</th>
 					<th
 						v-for="field in computedSchema" :key="field.id" class="col"
-						@click="toggleSort(field?.id || '')"
+						@click="!isSortable && toggleSort(field?.id || '')"
 					>
 						<div class="flex">
 							{{ field.label || field.attrs?.label || keyToLabel(field?.id) }}
-							<div class="list-arrows" :class="{ sorted: sortField === field?.id }">
+							<div v-if="!isSortable" class="list-arrows" :class="{ sorted: sortField === field?.id }">
 								<Icon :class="{ desc: sortDirection === 'DESC' }" icon="keyboard_arrow_up" />
 							</div>
 						</div>
 					</th>
 				</thead>
-				<tbody>
+				<tbody ref="tbodyRef">
 					<tr
 						v-for="{ data: row } in list" :key="row?.id || `row-${Math.random()}`"
 						class="row row-item position-relative"
 						:class="{ selected: row?.id && computedSelectedItems.includes(row.id) }"
 						@click="(event) => toggleSelectItem(row, event)"
 					>
-						<td v-if="isSelectable">
+						<td v-if="isSortable" class="col-drag">
+							<Icon icon="drag_indicator" :size="1.2" class="drag-handle-col grab" />
+						</td>
+						<td v-if="isSelectable && !isSortable">
 							<div @click.stop>
 								<input v-model="selectedItems" type="checkbox" :value="row?.id || ''">
 							</div>
@@ -164,6 +203,25 @@ const showLoading = computed(() => loading.value)
 </template>
 
 <style scoped>
+.col-drag {
+	width: 2.5rem;
+	padding: 0 0.25rem;
+}
+
+.col-drag .bgl_icon-font {
+	color: var(--bgl-black-tint);
+	opacity: 0.5;
+	transition: opacity 0.15s;
+}
+
+.row-item:hover .col-drag .bgl_icon-font {
+	opacity: 0.8;
+}
+
+.grab {
+	cursor: grab;
+}
+
 .table-list-wrap {
 	min-height: 150px;
 }
@@ -238,7 +296,7 @@ th {
 }
 
 .row {
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	cursor: pointer;
 }
 
@@ -254,7 +312,7 @@ th {
 
 .row.first-row::after {
 	content: '';
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -382,7 +440,7 @@ th input[type='checkbox'] {
 
 th::after {
 	content: '';
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	position: absolute;
 	left: 0;
 	right: 0;
@@ -390,7 +448,7 @@ th::after {
 }
 
 tr {
-	border-bottom: 1px solid var(--border-color);
+	border-bottom: 1px solid var(--bgl-border-color);
 	cursor: pointer;
 	align-items: center;
 }

package/src/components/form/FieldArray.vue

@@ -307,7 +307,7 @@ const showMinimizeButton = computed(() => {
 				<div
 					v-for="(item, i) in internalData" :key="i" outline thin
 					class="mb-05 itemBox transition radius-05 overflow-hidden txt12 border"
-					style="--input-font-size: 12px" :class="{ minimized: minimizedItems[i] }"
+					style="--bgl-input-font-size: 12px" :class="{ minimized: minimizedItems[i] }"
 				>
 					<div>
 						<!-- Minimized View -->
@@ -366,13 +366,13 @@ const showMinimizeButton = computed(() => {
 
 .itemBox {
 	background: var(--btn-bg);
-	--label-font-size: 0.6rem;
-	--input-height: 30px;
-	--input-font-size: 7px;
+	--bgl-label-font-size: 0.6rem;
+	--bgl-input-height: 30px;
+	--bgl-input-font-size: 7px;
 }
 
 .bginputbg {
-	background: var(--input-bg);
+	background: var(--bgl-input-bg);
 }
 
 .pt-065 {

package/src/components/form/inputs/ArrayInput.vue

@@ -219,7 +219,7 @@ function getItemRef(i: number) {
 
 <style>
 :root {
-	--array-input-bg: var(--input-bg);
+	--array-input-bg: var(--bgl-input-bg);
 }
 .array-input-row {
 	grid-template-columns: 1fr auto;

package/src/components/form/inputs/CheckInput.vue

@@ -58,8 +58,8 @@ onMounted(() => {
 
 .bgl-checkbox input[type='checkbox'] {
 	accent-color: var(--bgl-input-label-active-color, var(--bgl-accent-color));
-	height: calc(var(--input-height) / 2.75);
-	width: calc(var(--input-height) / 2.75);
+	height: calc(var(--bgl-input-height) / 2.75);
+	width: calc(var(--bgl-input-height) / 2.75);
 	min-width: 0;
 	display: flex;
 	justify-content: center;
@@ -69,8 +69,8 @@ onMounted(() => {
 
 .bgl-checkbox input[type='checkbox']::before {
 	content: '';
-	height: calc(var(--input-height) / 2.75);
-	width: calc(var(--input-height) / 2.75);
+	height: calc(var(--bgl-input-height) / 2.75);
+	width: calc(var(--bgl-input-height) / 2.75);
 	background: var(--bgl-input-label-active-color, var(--bgl-primary));
 	border-radius: 100%;
 	opacity: 0;
@@ -86,7 +86,7 @@ onMounted(() => {
 .bgl-checkbox label {
 	cursor: pointer;
 	user-select: none;
-	font-size: var(--input-font-size);
+	font-size: var(--bgl-input-font-size);
 	transition: var(--bgl-transition-400);
 }
 
@@ -99,7 +99,7 @@ onMounted(() => {
 }
 
 .bagel-input:focus-within.bgl-checkbox:not(:checked) label {
-	color: var(--label-color) !important;
+	color: var(--bgl-label-color) !important;
 }
 
 .bgl-checkbox input:disabled+label,

package/src/components/form/inputs/Checkbox.vue

@@ -1,4 +1,5 @@
 <script setup lang="ts">
+defineOptions({ name: 'BglCheckbox' })
 const val = defineModel<boolean>('modelValue', { default: false })
 </script>
 
@@ -13,8 +14,8 @@ const val = defineModel<boolean>('modelValue', { default: false })
 .primary-checkbox input {
   appearance: none;
   accent-color: var(--bgl-accent-color);
-	height: calc(var(--input-height) / 1.75);
-	width: calc(var(--input-height) / 1.75);
+	height: calc(var(--bgl-input-height) / 1.75);
+	width: calc(var(--bgl-input-height) / 1.75);
   min-width: 0;
   display: flex;
   justify-content: center;
@@ -26,8 +27,8 @@ const val = defineModel<boolean>('modelValue', { default: false })
 }
 
 .primary-checkbox {
-  height:var(--input-height);
-  width:var(--input-height);
+  height:var(--bgl-input-height);
+  width:var(--bgl-input-height);
   display: flex;
   justify-content: center;
   align-items: center;

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -180,7 +180,7 @@ watch(() => props.modelValue, () => {
 }
 
 .code-editor-grandpa:focus-within {
-	outline: solid 1px var(--border-color, #4f575f);
+	outline: solid 1px var(--bgl-border-color, #4f575f);
 	box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.13);
 }
 

package/src/components/form/inputs/ColorInput.vue

@@ -70,9 +70,9 @@ watch(
 
 <style>
 .colorInputPick {
-	--input-font-size: 12px;
+	--bgl-input-font-size: 12px;
 	background: transparent !important;
-	height: var(--input-height) !important;
+	height: var(--bgl-input-height) !important;
 	min-width: 50px !important;
 	outline: none !important;
 }
@@ -90,7 +90,7 @@ watch(
 /* ── frame: transparent bg, outline that highlights on focus ── */
 .bagel-input.frame .colorInputPickWrap {
 	background: transparent !important;
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
@@ -101,7 +101,7 @@ watch(
 
 /* ── bgl-outline: border only ── */
 .bagel-input.bgl-outline .colorInputPickWrap {
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 }
 
@@ -117,7 +117,7 @@ watch(
 	background: transparent !important;
 	border-radius: 0 !important;
 	outline: none !important;
-	border-bottom: 1.5px solid var(--border-color);
+	border-bottom: 1.5px solid var(--bgl-border-color);
 	transition: border-color 0.25s ease;
 	position: relative;
 }

package/src/components/form/inputs/DatePicker.vue

@@ -449,7 +449,7 @@ function selectDate(date: Date | null) {
 <style scoped>
 .calendar-container {
 	max-width: 90vw;
-	border-radius: var(--card-border-radius);
+	border-radius: var(--bgl-card-border-radius);
 	background: var(--bgl-box-bg);
 }
 
@@ -508,9 +508,9 @@ function selectDate(date: Date | null) {
 }
 
 .day:hover:not(.disabled) {
-	background-color: var(--input-bg);
+	background-color: var(--bgl-input-bg);
 	color: var(--bgl-text-color);
-	outline: 1px solid var(--border-color);
+	outline: 1px solid var(--bgl-border-color);
 }
 
 .day:hover:not(.disabled).selected {

package/src/components/form/inputs/EmailInput.vue

@@ -382,7 +382,7 @@ onMounted(() => {
 }
 
 .bagel-input label {
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 }
 
 .bagel-input.format-invalid,
@@ -399,14 +399,14 @@ onMounted(() => {
 	border-radius: 50%;
 	background: var(--bgl-orange);
 	right: 0.6rem;
-	bottom: calc(var(--input-height) / 2 - 3.5px);
+	bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
 	pointer-events: none;
 }
 
 .bagel-input.format-invalid.textInputIconWrap::after,
 .bagel-input.format-valid.textInputIconWrap::after,
 .bagel-input.format-empty.textInputIconWrap::after {
-	right: calc(var(--input-height) / 3 + 1.8rem);
+	right: calc(var(--bgl-input-height) / 3 + 1.8rem);
 }
 
 .bagel-input.format-empty::after {
@@ -417,7 +417,7 @@ onMounted(() => {
 	border-radius: 50%;
 	background: var(--bgl-gray, #aaa);
 	right: 0.6rem;
-	bottom: calc(var(--input-height) / 2 - 3.5px);
+	bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
 	pointer-events: none;
 }
 
@@ -433,7 +433,7 @@ onMounted(() => {
 	border-radius: 50%;
 	background: var(--bgl-green);
 	right: 0.6rem;
-	bottom: calc(var(--input-height) / 2 - 3.5px);
+	bottom: calc(var(--bgl-input-height) / 2 - 3.5px);
 	pointer-events: none;
 }
 </style>
@@ -455,33 +455,33 @@ onMounted(() => {
 }
 
 .bagel-input label {
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 }
 
 /* email input is always LTR — use physical properties so icons stay in the correct
    visual position regardless of the document's text direction */
 .textInputIconWrap .bgl_icon-font {
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	position: absolute;
-	right: calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2 + 0.1rem);
+	right: calc(var(--bgl-input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--bgl-input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
 
 .textInputIconWrap input {
-	padding-right: calc(var(--input-height) / 3 + 1.5rem);
+	padding-right: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .txtInputIconStart .iconStart {
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	position: absolute;
-	left: calc(var(--input-height) / 3 - 0.25rem);
-	margin-top: calc(var(--input-height) / 2);
+	left: calc(var(--bgl-input-height) / 3 - 0.25rem);
+	margin-top: calc(var(--bgl-input-height) / 2);
 	line-height: 0;
 }
 
 .txtInputIconStart input {
-	padding-left: calc(var(--input-height) / 3 + 1.5rem);
+	padding-left: calc(var(--bgl-input-height) / 3 + 1.5rem);
 }
 
 .bagel-input.small textarea {

package/src/components/form/inputs/NumberInput.vue

@@ -220,9 +220,9 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 .input-icon-wrap {
 	display: flex;
 	align-items: center;
-	background: var(--input-bg);
-	border-radius: var(--input-border-radius);
-	height: var(--input-height);
+	background: var(--bgl-input-bg);
+	border-radius: var(--bgl-input-border-radius);
+	height: var(--bgl-input-height);
 	transition: box-shadow 0.2s ease, outline-color 0.2s ease;
 }
 
@@ -235,14 +235,14 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 }
 
 .input-icon-wrap:focus-within {
-	outline-color: var(--input-bg);
+	outline-color: var(--bgl-input-bg);
 	box-shadow: inset 0 0 8px #00000018;
 }
 
 .input-icon-wrap .iconStart,
 .input-icon-wrap > .bgl_icon-font {
 	flex-shrink: 0;
-	color: var(--input-color);
+	color: var(--bgl-input-color);
 	line-height: 0;
 	padding-inline: 0.35rem;
 }
@@ -250,7 +250,7 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 /* ── frame variant ─────────────────────────────────────────────── */
 .bagel-input.frame .input-icon-wrap {
 	background: transparent;
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 }
 
@@ -261,7 +261,7 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 
 /* ── outline variant ───────────────────────────────────────────── */
 .bagel-input.bgl-outline .input-icon-wrap {
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 }
 
@@ -271,7 +271,7 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 	background: transparent;
 	border-radius: 0;
 	height: auto;
-	border-bottom: 1.5px solid var(--border-color);
+	border-bottom: 1.5px solid var(--bgl-border-color);
 }
 
 .bagel-input.underlined .input-icon-wrap::after {
@@ -306,11 +306,11 @@ const hasValue = computed(() => formattedValue.value.length > 0)
 }
 
 .top-bgl-ctrl-num-btn {
-	margin-top: calc(var(--input-height) / 10) !important;
+	margin-top: calc(var(--bgl-input-height) / 10) !important;
 }
 
 .bgl-ctrl-num-btn {
-	height: calc(var(--input-height) / 2.5) !important;
+	height: calc(var(--bgl-input-height) / 2.5) !important;
 	isolation: isolate;
 }
 

package/src/components/form/inputs/OTP.vue

@@ -167,7 +167,7 @@ function isDigitsFull() {
 
 .otp-input.frame .digit-box {
 	background: transparent;
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 	transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
@@ -184,7 +184,7 @@ function isDigitsFull() {
 /* ── bgl-outline variant ────────────────────────────────────────────────── */
 
 .otp-input.bgl-outline .digit-box {
-	outline: 1.5px solid var(--border-color);
+	outline: 1.5px solid var(--bgl-border-color);
 	outline-offset: -1px;
 }
 

package/src/components/form/inputs/PasswordInput.vue

@@ -77,7 +77,7 @@ const strengthScore = computed(() => {
 
 const strengthColor = computed(() => {
 	const score = strengthScore.value
-	if (score == null) return 'var(--input-bg)' // gray - no password
+	if (score == null) return 'var(--bgl-input-bg)' // gray - no password
 	if (score <= 1) return 'var(--bgl-red)' // red
 	if (score === 2) return 'var(--bgl-orange)' // orange
 	if (score === 3) return 'var(--bgl-yellow)' // amber
@@ -134,7 +134,7 @@ const feedbackMessage = computed(() => {
 
 <style>
 .m-password {
-	height: var(--input-height) !important;
+	height: var(--bgl-input-height) !important;
 }
 
 [dir='rtl'] .passwordInput input {
@@ -149,7 +149,7 @@ const feedbackMessage = computed(() => {
 .password-strength-bar {
 	flex: 1;
 	height: 6px;
-	background-color: var(--input-bg);
+	background-color: var(--bgl-input-bg);
 }
 
 .password-strength-fill {

package/src/components/form/inputs/RadioGroup.vue

@@ -141,7 +141,7 @@ function handleChange() {
 
 <style scoped>
 .group-label {
-	font-size: var(--label-font-size);
+	font-size: var(--bgl-label-font-size);
 	margin: 0 0 0.25rem 0;
 }
 

package/src/components/form/inputs/RichText/editor.css

@@ -67,7 +67,7 @@ th {
 /* Add styles for embedded content */
 .richtext-editor-content iframe {
     max-width: 100%;
-    border: 1px solid var(--border-color, #ddd);
+    border: 1px solid var(--bgl-border-color, #ddd);
     border-radius: 8px;
     display: block;
     margin: 1em auto;
@@ -148,7 +148,7 @@ th {
 .richtext-editor-content .embed-iframe {
     width: 100%;
     height: 315px;
-    border: 1px solid var(--border-color, #ddd);
+    border: 1px solid var(--bgl-border-color, #ddd);
     border-radius: 8px;
     background: white;
 }
@@ -214,7 +214,7 @@ th {
 
 /* Add a subtle border to distinguish embedded content */
 .richtext-editor-content iframe:not([class*='editableContent']) {
-    border: 1px solid var(--border-color);
+    border: 1px solid var(--bgl-border-color);
     border-radius: 4px;
     background: white;
 }
@@ -304,7 +304,7 @@ th {
     max-width: 100%;
     width: 100%;
     margin: 0 auto;
-    border: 1px solid var(--border-color, #ddd);
+    border: 1px solid var(--bgl-border-color, #ddd);
     border-radius: 8px;
     background: white;
     transition: all 0.3s ease;