@bagelink/vue 1.2.20 → 1.2.22

package/dist/style.css

@@ -1108,10 +1108,11 @@ fieldset[data-v-f7e758e5] {
 .fi[data-v-f99f1900]:before{ content:" "
 }
 
-.bgl-multi-step-form[data-v-4ead8342] {
+.bgl-multi-step-form[data-v-06c34cf2] {
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
+	width: 100%;
 	/* Default transition duration */
 	--transition-duration: 200ms;
 	--move-distance: 35%;
@@ -1120,19 +1121,19 @@ fieldset[data-v-f7e758e5] {
 	/* --ease-in: cubic-bezier(0.42, 0, 0.58, 1); */
 	/* --ease-out: cubic-bezier(0.5, 0, 0.75, 0); */
 }
-.bgl-steps-indicator[data-v-4ead8342] {
+.bgl-steps-indicator[data-v-06c34cf2] {
 	display: flex;
 	justify-content: space-between;
 	align-items: center;
 	margin-bottom: 1rem;
 }
-.bgl-step-indicator[data-v-4ead8342] {
+.bgl-step-indicator[data-v-06c34cf2] {
 	display: flex;
 	flex-direction: column;
 	align-items: center;
 	position: relative;
 }
-.bgl-step-indicator[data-v-4ead8342]::before {
+.bgl-step-indicator[data-v-06c34cf2]::before {
 	content: '';
 	position: absolute;
 	top: 50%;
@@ -1142,10 +1143,10 @@ fieldset[data-v-f7e758e5] {
 	background: #e0e0e0;
 	z-index: -1;
 }
-.bgl-step-indicator[data-v-4ead8342]:first-child::before {
+.bgl-step-indicator[data-v-06c34cf2]:first-child::before {
 	display: none;
 }
-.bgl-step-indicator > span[data-v-4ead8342]:first-child {
+.bgl-step-indicator > span[data-v-06c34cf2]:first-child {
 	width: 30px;
 	height: 30px;
 	border-radius: 50%;
@@ -1156,23 +1157,23 @@ fieldset[data-v-f7e758e5] {
 	justify-content: center;
 	margin-bottom: 0.5rem;
 }
-.bgl-step-indicator.active > span[data-v-4ead8342]:first-child {
+.bgl-step-indicator.active > span[data-v-06c34cf2]:first-child {
 	background: var(--primary-color, #4CAF50);
 	color: white;
 }
-.bgl-step-indicator.completed > span[data-v-4ead8342]:first-child {
+.bgl-step-indicator.completed > span[data-v-06c34cf2]:first-child {
 	background: var(--success-color, #8BC34A);
 	color: white;
 }
-.bgl-step-indicator.clickable[data-v-4ead8342] {
+.bgl-step-indicator.clickable[data-v-06c34cf2] {
 	cursor: pointer;
 }
-.bgl-step-label[data-v-4ead8342] {
+.bgl-step-label[data-v-06c34cf2] {
 	font-size: 0.8rem;
 	max-width: 100px;
 	text-align: center;
 }
-.bgl-form-wrapper[data-v-4ead8342] {
+.bgl-form-wrapper[data-v-06c34cf2] {
 	display: grid;
 	overflow: clip;
 	height: auto;
@@ -1180,15 +1181,15 @@ fieldset[data-v-f7e758e5] {
 	transition: height var(--transition-duration) ease;
 	interpolate-size: allow-keywords;
 }
-.bgl-form-wrapper > div[data-v-4ead8342] {
+.bgl-form-wrapper > div[data-v-06c34cf2] {
 	grid-area: 1 / 1;
 }
-.bgl-form-container[data-v-4ead8342] {
+.bgl-form-container[data-v-06c34cf2] {
 	width: 100%;
 	display: flex;
 	flex-direction: column;
 }
-.bgl-step-controls[data-v-4ead8342] {
+.bgl-step-controls[data-v-06c34cf2] {
 	display: flex;
 	justify-content: center;
 	gap: 1rem;
@@ -1196,34 +1197,34 @@ fieldset[data-v-f7e758e5] {
 }
 
 /* Slide Left Animation (going forward) */
-.slide-left-enter-active[data-v-4ead8342] {
+.slide-left-enter-active[data-v-06c34cf2] {
 	transition: opacity, transform calc(var(--transition-duration) * 1.2) var(--ease-in);
 }
-.slide-left-leave-active[data-v-4ead8342] {
+.slide-left-leave-active[data-v-06c34cf2] {
 	transition: opacity, transform var(--transition-duration) var(--ease-out);
 }
-.slide-left-enter-from[data-v-4ead8342] {
+.slide-left-enter-from[data-v-06c34cf2] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
-.slide-left-leave-to[data-v-4ead8342] {
+.slide-left-leave-to[data-v-06c34cf2] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
 
 /* Slide Right Animation (going back) */
-.slide-right-enter-active[data-v-4ead8342] {
+.slide-right-enter-active[data-v-06c34cf2] {
 	transition: all calc(var(--transition-duration) * 1.2) var(--ease-in);
 }
-.slide-right-leave-active[data-v-4ead8342] {
+.slide-right-leave-active[data-v-06c34cf2] {
 	transition: all var(--transition-duration) var(--ease-out);
 	transition-property: opacity, transform;
 }
-.slide-right-enter-from[data-v-4ead8342] {
+.slide-right-enter-from[data-v-06c34cf2] {
 	opacity: 0;
 	transform: translateX(-30%);
 }
-.slide-right-leave-to[data-v-4ead8342] {
+.slide-right-leave-to[data-v-06c34cf2] {
 	opacity: 0;
 	transform: translateX(var(--move-distance));
 }
@@ -2280,58 +2281,58 @@ input[type="range"][data-v-46e22f3e]:active::-webkit-slider-thumb {
 	font-size: var(--label-font-size);
 }
 
-.bagel-input textarea[data-v-6dfc73c3] {
+.bagel-input textarea[data-v-da1189c6] {
 	min-height: unset;
 	font-size: var(--input-font-size);
 }
-.bagel-input.text-input textarea[data-v-6dfc73c3] {
+.bagel-input.text-input textarea[data-v-da1189c6] {
 	resize: none;
 }
-.code textarea[data-v-6dfc73c3] {
+.code textarea[data-v-da1189c6] {
 	font-family: 'Inconsolata', monospace;
 	background: var(--bgl-code-bg) !important;
 	color: var(--bgl-light-text) !important;
 }
-.code textarea[data-v-6dfc73c3]::placeholder {
+.code textarea[data-v-da1189c6]::placeholder {
 	color: var(--bgl-light-text) !important;
 	opacity: 0.3;
 }
-.bagel-input.small[data-v-6dfc73c3] {
+.bagel-input.small[data-v-da1189c6] {
 	margin-bottom: 0;
 	height: 30px;
 }
-.bagel-input.dense label[data-v-6dfc73c3] {
+.bagel-input.dense label[data-v-da1189c6] {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 }
-.bagel-input input[data-v-6dfc73c3]:disabled {
+.bagel-input input[data-v-da1189c6]:disabled {
 	background: #f5f5f5;
 }
-.bagel-input label[data-v-6dfc73c3] {
+.bagel-input label[data-v-da1189c6] {
 	font-size: var(--label-font-size);
 }
-.textInputIconWrap .bgl_icon-font[data-v-6dfc73c3] {
+.textInputIconWrap .bgl_icon-font[data-v-da1189c6] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-end:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 + 0.1rem);
 	line-height: 0;
 }
-.textInputIconWrap input[data-v-6dfc73c3]{
+.textInputIconWrap input[data-v-da1189c6]{
 	padding-inline-end: calc(var(--input-height) / 3 + 1.5rem);
 }
-.txtInputIconStart .iconStart[data-v-6dfc73c3] {
+.txtInputIconStart .iconStart[data-v-da1189c6] {
 	color: var(--input-color);
 	position: absolute;
     inset-inline-start:calc(var(--input-height) / 3 - 0.25rem);
 	margin-top: calc(var(--input-height) / 2 );
 	line-height: 0;
 }
-.txtInputIconStart input[data-v-6dfc73c3], .txtInputIconStart textarea[data-v-6dfc73c3]{
+.txtInputIconStart input[data-v-da1189c6], .txtInputIconStart textarea[data-v-da1189c6]{
 	padding-inline-start: calc(var(--input-height) / 3 + 1.5rem);
 }
-.bagel-input.small textarea[data-v-6dfc73c3] {
+.bagel-input.small textarea[data-v-da1189c6] {
 	height: 30px;
 }
 
@@ -4284,20 +4285,25 @@ body:has(.bg-dark.is-active) {
   background: transparent;
 }
 
-.fixed-columns[data-v-ad70b6cd] {
+.stickyTop[data-v-857ccb8b]{
+	position: sticky;
+	top: -0.125rem;
+	z-index: 1;
+}
+.fixed-columns[data-v-857ccb8b] {
 	border-right: 2px solid var(--border-color);
 }
-table[data-v-ad70b6cd] {
+table[data-v-857ccb8b] {
 	border-collapse: collapse;
 }
-th[data-v-ad70b6cd], td[data-v-ad70b6cd] {
+th[data-v-857ccb8b], td[data-v-857ccb8b] {
 	border: 1px solid var(--border-color);
 	padding: 0.1rem 0.5rem;
 	min-width: 80px;
 	background: var(--bgl-white);
 	user-select: none;
 }
-th[data-v-ad70b6cd] {
+th[data-v-857ccb8b] {
 	background: var(--input-bg);
 	white-space: nowrap;
 	position: relative;
@@ -4305,27 +4311,27 @@ th[data-v-ad70b6cd] {
 	font-weight: 500;
 	text-align: start;
 }
-th .bgl_icon-font[data-v-ad70b6cd]{
+th .bgl_icon-font[data-v-857ccb8b]{
 	vertical-align: middle;
 }
-td.selected[data-v-ad70b6cd] {
+td.selected[data-v-857ccb8b] {
 	background: var(--bgl-primary-light);
 }
-td.locked[data-v-ad70b6cd] {
+td.locked[data-v-857ccb8b] {
 	background: var(--bgl-gray-light);
 	cursor: default;
 }
-td.locked.selected[data-v-ad70b6cd] {
+td.locked.selected[data-v-857ccb8b] {
 	background: var(--bgl-primary-light);
 }
-td[data-v-ad70b6cd] {
+td[data-v-857ccb8b] {
 	height: 40px;
 	vertical-align: middle;
 }
-td[data-v-ad70b6cd]:has(img){
+td[data-v-857ccb8b]:has(img){
 	padding: 0;
 }
-td span[data-v-ad70b6cd]{
+td span[data-v-857ccb8b]{
 	display: block;
     display: -webkit-box;
     max-width: 100%;
@@ -4335,7 +4341,16 @@ td span[data-v-ad70b6cd]{
     -webkit-line-clamp: 1;
 	word-break: break-all;
 }
-input[data-v-ad70b6cd] {
+td.wrap-text[data-v-857ccb8b] {
+	height: auto;
+	min-height: 40px;
+}
+td.wrap-text span[data-v-857ccb8b] {
+	white-space: normal;
+	-webkit-line-clamp: unset;
+	word-break: break-word;
+}
+input[data-v-857ccb8b] {
 	width: 100%;
 	border: none;
 	background: transparent;
@@ -4344,45 +4359,45 @@ input[data-v-ad70b6cd] {
 	min-height: 0;
 	min-width: 0;
 }
-input[data-v-ad70b6cd]:focus {
+input[data-v-857ccb8b]:focus {
 	outline: 2px solid var(--bgl-primary);
 	outline-offset: 6px;
 }
-th.sortable[data-v-ad70b6cd] {
+th.sortable[data-v-857ccb8b] {
 	cursor: pointer;
 }
-.row-number-header[data-v-ad70b6cd], .row-number[data-v-ad70b6cd] {
+.row-number-header[data-v-857ccb8b], .row-number[data-v-857ccb8b] {
 	width: fit-content;
 	min-width: fit-content !important;
 	padding: 0.1rem 0.7rem !important;
 }
-td .bgl-checkbox[data-v-ad70b6cd]{
+td .bgl-checkbox[data-v-857ccb8b]{
 	margin: 0;
 	text-align: center;
 	justify-content: center;
 }
-td[data-v-ad70b6cd]:has(.bgl-checkbox){
+td[data-v-857ccb8b]:has(.bgl-checkbox){
 	text-align: center;
 	background: var(--input-bg);
 }
-td[data-v-ad70b6cd]:has(:checked){
+td[data-v-857ccb8b]:has(:checked){
 	background: var(--bgl-primary-light);
 }
-.spreadsheetCellPlaceHolder[data-v-ad70b6cd]{
+.spreadsheetCellPlaceHolder[data-v-857ccb8b]{
 	height: 0px;
 	overflow: hidden;
 	opacity: 0;
 	pointer-events: none;
 	user-select: none;
 }
-.th-content[data-v-ad70b6cd] {
+.th-content[data-v-857ccb8b] {
 	position: relative;
 	display: flex;
 	align-items: center;
 	width: 100%;
 	height: 100%;
 }
-.resize-handle[data-v-ad70b6cd] {
+.resize-handle[data-v-857ccb8b] {
 	position: absolute;
 	right: -8px;
 	top: 0;
@@ -4393,12 +4408,12 @@ td[data-v-ad70b6cd]:has(:checked){
 	background: transparent;
 	transition: background 0.2s;
 }
-.resize-handle[data-v-ad70b6cd]:hover {
+.resize-handle[data-v-857ccb8b]:hover {
 	background: var(--bgl-primary);
 }
 
 /* Spreadsheet container styles */
-.spreadsheet[data-v-1e744d43] {
+.spreadsheet[data-v-a7d01d6e] {
 	user-select: none;
 }
 
@@ -4513,6 +4528,8 @@ to {
     border-radius: var(--btn-border-radius) !important;
 }.rounded-thin {
     border-radius: calc(var(--btn-border-radius) / 1.5) !important;
+}.radius-025 {
+    border-radius: calc(var(--btn-border-radius) / 4) !important;
 }.radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }.radius-2 {
@@ -4571,6 +4588,10 @@ to {
 }.fit-content {
     width: fit-content;
     height: fit-content;
+}.w-fit-content,
+.w-fit,
+.wfit {
+    width: fit-content;
 }.auto-flow-columns {
     grid-auto-flow: column;
 }.grid-2-col {
@@ -6921,7 +6942,8 @@ to {
 }.flex-grow,
 .flex-grow-1 {
     flex-grow: 1;
-}.flex-shrink, .flex-shrink-1 {
+}.flex-shrink,
+.flex-shrink-1 {
     flex-shrink: 1;
 }.flex-no-grow,
 .flex-grow-0 {
@@ -8542,6 +8564,10 @@ to {
         border-radius: calc(var(--btn-border-radius) / 1.5) !important;
     }
 
+    .m_radius-025 {
+        border-radius: calc(var(--btn-border-radius) / 4) !important;
+    }
+
     .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
@@ -8649,6 +8675,13 @@ to {
         height: fit-content;
     }
 
+    .m_w-fit-content,
+    .m_w-fit,
+    .m_wfit {
+        width: fit-content;
+    }
+
+
     .m_auto-flow-columns {
         grid-auto-flow: column;
     }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.2.20",
+  "version": "1.2.22",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Spreadsheet/Index.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
-import { Btn, CheckInput, TextInput } from '@bagelink/vue'
+import { Btn, CheckInput, TextInput, ToggleInput, localRef, ListItem, Dropdown } from '@bagelink/vue'
 import { computed, ref, watch, nextTick, onUnmounted } from 'vue'
-import Dropdown from '../Dropdown.vue'
 import SpreadsheetTable from './SpreadsheetTable.vue'
 
 // Define column configuration types
@@ -227,6 +226,7 @@ interface CellPosition {
 const isSelecting = ref(false)
 const selectionStart = ref<CellPosition | null>(null)
 const selectionEnd = ref<CellPosition | null>(null)
+const wrapText = localRef('wrapText', false)
 
 // Reactive variable to track the currently editing cell
 const editingCell = ref<CellPosition | null>(null)
@@ -688,7 +688,7 @@ const columnOptions = computed(() => {
 </script>
 
 <template>
-	<div class="w-100p overflow-hidden" tabindex="-1" @keydown="handleSpreadsheetKeyDown">
+	<div class="w-100p" tabindex="-1" @keydown="handleSpreadsheetKeyDown">
 		<div class="flex gap-05 py-05 justify-content-end m_flex-wrap">
 			<label v-if="label" class="label me-auto">{{ label }}</label>
 			<div class="flex gap-075">
@@ -709,10 +709,13 @@ const columnOptions = computed(() => {
 					</div>
 				</Dropdown>
 				<TextInput ref="searchInputRef" v-model="search" icon="search" placeholder="Search" class="m-0 max-w200px" />
-				<Btn v-tooltip="'Paste'" flat thin round icon="paste" @click="pasteSelection" />
-				<Btn v-tooltip="'copy'" flat thin round icon="copy" @click="copySelection" />
-				<Btn v-tooltip="'Undo'" flat thin round icon="undo" :disabled="!canUndo" @click="undo" />
-				<Btn v-tooltip="'Redo'" flat thin round icon="redo" :disabled="!canRedo" @click="redo" />
+				<Dropdown flat thin icon="more_vert">
+					<ListItem title="Paste" icon="paste" @click="pasteSelection" />
+					<ListItem title="copy" icon="copy" @click="copySelection" />
+					<ListItem title="Undo" icon="undo" :disabled="!canUndo" @click="undo" />
+					<ListItem title="Redo" icon="redo" :disabled="!canRedo" @click="redo" />
+					<ToggleInput v-model="wrapText" label="Wrap Text" />
+				</Dropdown>
 			</div>
 		</div>
 		<div class="spreadsheet" @mouseup="handleMouseUp">
@@ -731,6 +734,7 @@ const columnOptions = computed(() => {
 					:selection-end="selectionEnd"
 					:editing-cell="editingCell"
 					:base-column-index="0"
+					:wrap-text="wrapText"
 					class="sticky z-2 start-0 bg-white"
 					@sortColumn="sortByColumn"
 					@resizeStart="handleResizeStart"
@@ -745,7 +749,7 @@ const columnOptions = computed(() => {
 				/>
 
 				<!-- Scrollable Columns -->
-				<div class="flex-shrink flex-grow overflow-x">
+				<div class="flex-shrink flex-grow">
 					<SpreadsheetTable
 						:columns="scrollableColumns"
 						:rows="filteredRows"
@@ -758,6 +762,7 @@ const columnOptions = computed(() => {
 						:selection-end="selectionEnd"
 						:editing-cell="editingCell"
 						:base-column-index="fixedColumns.length"
+						:wrap-text="wrapText"
 						@sortColumn="sortByColumn"
 						@resizeStart="handleResizeStart"
 						@selectRow="selectEntireRow"

package/src/components/Spreadsheet/SpreadsheetTable.vue

@@ -31,6 +31,7 @@ interface Props {
 	selectionEnd: CellPosition | null
 	editingCell: CellPosition | null
 	baseColumnIndex: number
+	wrapText?: boolean
 }
 
 const props = defineProps<Props>()
@@ -108,7 +109,7 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 
 <template>
 	<table :class="{ 'fixed-columns': isFixed, 'w-100p': !isFixed }">
-		<thead>
+		<thead class=" stickyTop">
 			<tr>
 				<th v-if="showRowNumbers" class="row-number-header bg-white" />
 				<th
@@ -147,8 +148,9 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 					v-for="(col, colIndex) in columns"
 					:key="col.key"
 					:class="{
-						selected: isCellSelected(rowIndex, colIndex),
-						locked: !isCellEditable(col.key),
+						'selected': isCellSelected(rowIndex, colIndex),
+						'locked': !isCellEditable(col.key),
+						'wrap-text': wrapText,
 					}"
 					:style="{ width: columnWidths.get(col.key) ? `${columnWidths.get(col.key)}px` : col.width }"
 					:tabindex="col.hidden ? undefined : 0"
@@ -197,6 +199,11 @@ function formatCellValue(value: any, format?: ColumnConfig['format']): string {
 </template>
 
 <style scoped>
+.stickyTop{
+	position: sticky;
+	top: -0.125rem;
+	z-index: 1;
+}
 .fixed-columns {
 	border-right: 2px solid var(--border-color);
 }
@@ -248,6 +255,15 @@ td span{
     -webkit-line-clamp: 1;
 	word-break: break-all;
 }
+td.wrap-text {
+	height: auto;
+	min-height: 40px;
+}
+td.wrap-text span {
+	white-space: normal;
+	-webkit-line-clamp: unset;
+	word-break: break-word;
+}
 input {
 	width: 100%;
 	border: none;

package/src/components/form/BglMultiStepForm.vue

@@ -303,6 +303,7 @@ defineExpose({
 	display: flex;
 	flex-direction: column;
 	gap: 1rem;
+	width: 100%;
 	/* Default transition duration */
 	--transition-duration: 200ms;
 	--move-distance: 35%;

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

@@ -102,7 +102,7 @@ onMounted(() => {
 			{{ label }}
 
 			<input
-				v-if="!multiline && !autoheight && !code"
+				v-if="!multiline && !autoheight && !code && inputRows < 2"
 				:id
 				ref="input"
 				v-model.trim="inputVal"

package/src/styles/layout.css

@@ -26,6 +26,10 @@
     border-radius: calc(var(--btn-border-radius) / 1.5) !important;
 }
 
+.radius-025 {
+    border-radius: calc(var(--btn-border-radius) / 4) !important;
+}
+
 .radius-05 {
     border-radius: calc(var(--btn-border-radius) / 2) !important;
 }
@@ -134,6 +138,13 @@
     height: fit-content;
 }
 
+.w-fit-content,
+.w-fit,
+.wfit {
+    width: fit-content;
+}
+
+
 .auto-flow-columns {
     grid-auto-flow: column;
 }
@@ -3657,7 +3668,8 @@
     flex-grow: 1;
 }
 
-.flex-shrink, .flex-shrink-1 {
+.flex-shrink,
+.flex-shrink-1 {
     flex-shrink: 1;
 }
 

package/src/styles/mobilLayout.css

@@ -56,6 +56,10 @@
         border-radius: calc(var(--btn-border-radius) / 1.5) !important;
     }
 
+    .m_radius-025 {
+        border-radius: calc(var(--btn-border-radius) / 4) !important;
+    }
+
     .m_radius-05 {
         border-radius: calc(var(--btn-border-radius) / 2) !important;
     }
@@ -163,6 +167,13 @@
         height: fit-content;
     }
 
+    .m_w-fit-content,
+    .m_w-fit,
+    .m_wfit {
+        width: fit-content;
+    }
+
+
     .m_auto-flow-columns {
         grid-auto-flow: column;
     }