@bagelink/vue 1.15.577 → 1.15.581

package/package.json

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

package/src/components/dataTable/DataTable.vue

@@ -183,7 +183,7 @@ const headerFontSize = computed(() => {
 </script>
 
 <template>
-	<div class="table-list-wrap h-100p relative" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
+	<div class="table-list-wrap h-100p relative scrollbar-border scrollbar-border-bottom" v-bind="containerProps" :class="{ overflowHiddenLoading: showLoading }">
 		<Loading v-if="showLoading" class="absolute inset-1" />
 		<div v-if="!isEmpty" v-bind="wrapperProps" :class="{ 'pointer-events-none': showLoading }">
 			<table class="infinite-wrapper" :class="{ selecting: computedSelectedItems.length }">

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

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { ModeType } from '../../../utils/calendar/typings'
-import { TextInput, Dropdown, formatDate, useI18n, resolveI18n, local } from '@bagelink/vue'
+import { Btn, TextInput, Dropdown, formatDate, useI18n, resolveI18n, local } from '@bagelink/vue'
 import { onClickOutside } from '@vueuse/core'
 import { ref, computed, onMounted, watch } from 'vue'
 import { WEEK_START_DAY } from '../../../utils/calendar/time'
@@ -38,6 +38,8 @@ export interface DateInputProps extends BagelInputShellProps {
 	underlined?: boolean
 	/** When true, input is not editable (same as `edit-mode="false"`). */
 	disabled?: boolean
+	/** Show a button that clears the selected date or date range. */
+	clearable?: boolean
 }
 
 const props = withDefaults(
@@ -46,6 +48,7 @@ const props = withDefaults(
 		enableTime: false,
 		editMode: true,
 		disabled: false,
+		clearable: false,
 		small: false,
 		range: false,
 		mode: () => ({ mode: 'day' }),
@@ -275,6 +278,14 @@ function handleIconClick() {
 	isOpen.value = !isOpen.value
 }
 
+function clearValue() {
+	selectedDate.value = undefined
+	inputValue.value = ''
+	isTyping.value = false
+	isValid.value = true
+	isOpen.value = false
+}
+
 function confirmSelection() {
 	isTyping.value = false
 	syncInputValue()
@@ -327,12 +338,20 @@ onMounted(() => {
 							v-model="inputValue" iconStart="calendar"
 							:placeholder="underlined ? ' ' : (resolveI18n(placeholder) || defaultPlaceholder)"
 							:required="underlined ? false : required" :disabled="!isEditable"
-							:error="!isValid ? $t('date.invalidFormat') : error" :class="{ 'txt-center': center }"
+							:error="!isValid ? $t('date.invalidFormat') : error"
+							:class="{ 'txt-center': center, 'date-input-clearable': clearable && hasValue }"
 							:underlined="underlined" :frame="frame" :outline="outline" :min-width="minWidth"
 							:max-width="maxWidth" :label-color="labelColor" :label-active-color="labelActiveColor"
 							class="date-input m-0" @input="handleInput" @focus="handleFocus"
 							@blur="handleBlur" @click.stop @keydown="handleKeydown" @iconClick="handleIconClick"
 						/>
+						<Btn
+							v-if="clearable && hasValue && isEditable"
+							flat thin round icon="clear" class="date-input-clear absolute center-y end me-05"
+							:aria-label="range ? 'Clear date range' : 'Clear date'"
+							@mousedown.prevent
+							@click.stop="clearValue"
+						/>
 					</div>
 				</template>
 
@@ -353,6 +372,15 @@ onMounted(() => {
 
 .date-picker-container {
 width: 100%;
+position: relative;
+}
+
+.date-input-clearable input {
+padding-inline-end: calc(var(--bgl-input-height) / 3 + 1.5rem);
+}
+
+.date-input-clear {
+z-index: 1;
 }
 
 </style>

package/src/form-flow/FormFlow.vue

@@ -71,6 +71,8 @@ const props = defineProps<Props<T>>()
 
 const emit = defineEmits<{
 	'update:modelValue': [value: T]
+	/** Emitted only for user-driven field updates, not model initialization/defaults. */
+	'change': [value: T, previousValue: T]
 }>()
 
 defineSlots<FormFlowSlots<T>>()
@@ -255,7 +257,9 @@ function fieldLayoutStyle(field: FieldBuilder): Record<string, string> | undefin
 }
 
 function updateField(key: string, value: any, field: FieldBuilder) {
+	const previousValue = cloneDefault(formData.value)
 	setNestedValue(formData.value, key, value)
+	emit('change', cloneDefault(formData.value), previousValue)
 	if (formState.value === 'success' || formState.value === 'error') {
 		formState.value = 'idle'
 	}

package/src/styles/inputs.css

@@ -510,16 +510,16 @@ select {
 }
 
 .grid-form.free-grid {
-    grid-auto-rows: 72px;
+    grid-auto-rows: calc(var(--bgl-input-height) * 1.9);
 }
 
-.grid-form.free-grid > * {
+.grid-form.free-grid>* {
     grid-row-start: var(--bgl-grid-row-start, auto);
     grid-row-end: span var(--bgl-grid-row-span, 1);
     min-height: 0;
 }
 
-.grid-form.free-grid > * > .bagel-input {
+.grid-form.free-grid>*>.bagel-input {
     height: 100%;
     min-height: 0;
     margin-bottom: 0;
@@ -602,18 +602,53 @@ select {
     grid-column-end: span 12 !important;
 }
 
-.start-col-1 { grid-column-start: 1 !important; }
-.start-col-2 { grid-column-start: 2 !important; }
-.start-col-3 { grid-column-start: 3 !important; }
-.start-col-4 { grid-column-start: 4 !important; }
-.start-col-5 { grid-column-start: 5 !important; }
-.start-col-6 { grid-column-start: 6 !important; }
-.start-col-7 { grid-column-start: 7 !important; }
-.start-col-8 { grid-column-start: 8 !important; }
-.start-col-9 { grid-column-start: 9 !important; }
-.start-col-10 { grid-column-start: 10 !important; }
-.start-col-11 { grid-column-start: 11 !important; }
-.start-col-12 { grid-column-start: 12 !important; }
+.start-col-1 {
+    grid-column-start: 1 !important;
+}
+
+.start-col-2 {
+    grid-column-start: 2 !important;
+}
+
+.start-col-3 {
+    grid-column-start: 3 !important;
+}
+
+.start-col-4 {
+    grid-column-start: 4 !important;
+}
+
+.start-col-5 {
+    grid-column-start: 5 !important;
+}
+
+.start-col-6 {
+    grid-column-start: 6 !important;
+}
+
+.start-col-7 {
+    grid-column-start: 7 !important;
+}
+
+.start-col-8 {
+    grid-column-start: 8 !important;
+}
+
+.start-col-9 {
+    grid-column-start: 9 !important;
+}
+
+.start-col-10 {
+    grid-column-start: 10 !important;
+}
+
+.start-col-11 {
+    grid-column-start: 11 !important;
+}
+
+.start-col-12 {
+    grid-column-start: 12 !important;
+}
 
 .pixel {
     width: 0 !important;
@@ -636,8 +671,12 @@ select {
 }
 
 @media screen and (max-width: 910px) {
-    .grid-form.free-grid > * {
-        grid-row-start: var(--bgl-mobile-grid-row-start, var(--bgl-grid-row-start, auto));
+    .grid-form.free-grid {
+        grid-auto-rows: calc(var(--bgl-input-height) * 1.5);
+    }
+
+    .grid-form.free-grid>* {
+        grid-row-start: var(--bgl-mobile-grid-row-start, auto);
         grid-row-end: span var(--bgl-mobile-grid-row-span, var(--bgl-grid-row-span, 1));
     }
 
@@ -739,16 +778,51 @@ select {
         grid-column: span 12 !important;
     }
 
-    .grid-form.free-grid .m_start-col-1 { grid-column-start: 1 !important; }
-    .grid-form.free-grid .m_start-col-2 { grid-column-start: 2 !important; }
-    .grid-form.free-grid .m_start-col-3 { grid-column-start: 3 !important; }
-    .grid-form.free-grid .m_start-col-4 { grid-column-start: 4 !important; }
-    .grid-form.free-grid .m_start-col-5 { grid-column-start: 5 !important; }
-    .grid-form.free-grid .m_start-col-6 { grid-column-start: 6 !important; }
-    .grid-form.free-grid .m_start-col-7 { grid-column-start: 7 !important; }
-    .grid-form.free-grid .m_start-col-8 { grid-column-start: 8 !important; }
-    .grid-form.free-grid .m_start-col-9 { grid-column-start: 9 !important; }
-    .grid-form.free-grid .m_start-col-10 { grid-column-start: 10 !important; }
-    .grid-form.free-grid .m_start-col-11 { grid-column-start: 11 !important; }
-    .grid-form.free-grid .m_start-col-12 { grid-column-start: 12 !important; }
+    .grid-form.free-grid .m_start-col-1 {
+        grid-column-start: 1 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-2 {
+        grid-column-start: 2 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-3 {
+        grid-column-start: 3 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-4 {
+        grid-column-start: 4 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-5 {
+        grid-column-start: 5 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-6 {
+        grid-column-start: 6 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-7 {
+        grid-column-start: 7 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-8 {
+        grid-column-start: 8 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-9 {
+        grid-column-start: 9 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-10 {
+        grid-column-start: 10 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-11 {
+        grid-column-start: 11 !important;
+    }
+
+    .grid-form.free-grid .m_start-col-12 {
+        grid-column-start: 12 !important;
+    }
 }

package/src/styles/layout.css

@@ -2993,7 +2993,7 @@
 
 .min-h-60px,
 .min-h60px {
-    min-height: 60px;
+    min-height: 60px !important;
 }
 
 .h-70,

package/src/styles/scrollbar.css

@@ -28,4 +28,16 @@ body>div ::-webkit-scrollbar-corner {
 
 .hide-scrollbar::-webkit-scrollbar {
     display: none;
+}
+
+
+.bgl-scrollbar-bordered-bottom::-webkit-scrollbar-track,
+.scrollbar-border-bottom::-webkit-scrollbar-track {
+    border-top: 1px solid rgba(0, 0, 0, .08) !important;
+}
+
+.bgl-scrollbar-bordered-bottom::-webkit-scrollbar-corner,
+.scrollbar-border-bottom::-webkit-scrollbar-corner {
+    border-top: 1px solid rgba(0, 0, 0, .08) !important;
+    border-inline-start: 1px solid rgba(0, 0, 0, .08) !important;
 }

package/vite.config.ts

@@ -9,6 +9,19 @@ import tsconfigPaths from 'vite-tsconfig-paths'
 const indexDir = resolve(import.meta.dirname, 'src')
 
 function composeCssEntries(): Plugin {
+	const composeCss = (...parts: string[]) => {
+		const imports = new Set<string>()
+		const importPattern = /@import\s+(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|url\(\s*(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|[^)]*)\s*\))(?:\s+[^;]+)?;/g
+		const body = parts
+			.map(part => part.replace(importPattern, (statement) => {
+				imports.add(statement)
+				return ''
+			}))
+			.join('\n')
+
+		return `${[...imports].join('\n')}\n${body}`
+	}
+
 	return {
 		name: 'bagelink-compose-css-entries',
 		enforce: 'post',
@@ -34,8 +47,9 @@ function composeCssEntries(): Plugin {
 				throw new Error('Missing public CSS entry artifacts')
 
 			// Component styles load first; core utilities intentionally load last.
-			coreAsset.source = `${components}\n${core}`
-			styleAsset.source = `${components}\n${core}\n${adminFonts}`
+			// External imports must be deduplicated and hoisted before all rules.
+			coreAsset.source = composeCss(components, core)
+			styleAsset.source = composeCss(components, core, adminFonts)
 		},
 	}
 }