@bagelink/vue 1.15.15 → 1.15.26

package/src/components/dataTable/DataTable.vue

@@ -203,281 +203,282 @@ const showLoading = computed(() => loading.value)
 </template>
 
 <style scoped>
+
 .col-drag {
-	width: 2.5rem;
-	padding: 0 0.25rem;
+width: 2.5rem;
+padding: 0 0.25rem;
 }
 
 .col-drag .bgl_icon-font {
-	color: var(--bgl-black-tint);
-	opacity: 0.5;
-	transition: opacity 0.15s;
+color: var(--bgl-black-tint);
+opacity: 0.5;
+transition: opacity 0.15s;
 }
 
 .row-item:hover .col-drag .bgl_icon-font {
-	opacity: 0.8;
+opacity: 0.8;
 }
 
 .grab {
-	cursor: grab;
+cursor: grab;
 }
 
 .table-list-wrap {
-	min-height: 150px;
+min-height: 150px;
 }
 
 .selected {
-	background: var(--bgl-primary-tint);
+background: var(--bgl-primary-tint);
 }
 
 tbody tr.selected:hover {
-	background: var(--bgl-primary-light);
+background: var(--bgl-primary-light);
 }
 
 .list-arrows {
-	opacity: 0;
+opacity: 0;
 }
 
 .list-arrows .bgl_icon-font {
-	transition: all ease-in-out 0.2s;
+transition: all ease-in-out 0.2s;
 }
 
 .list-arrows.sorted {
-	opacity: 1;
+opacity: 1;
 }
 
 .col img {
-	height: 35px;
-	margin-top: -14px;
-	margin-bottom: -14px;
-	border-radius: 5px;
-	object-fit: cover;
+height: 35px;
+margin-top: -14px;
+margin-bottom: -14px;
+border-radius: 5px;
+object-fit: cover;
 }
 
 .col:has(img) {
-	padding-inline-end: 0.5rem;
+padding-inline-end: 0.5rem;
 }
 
 .selecting .col {
-	user-select: none;
+user-select: none;
 }
 
 .overflowHiddenLoading {
-	overflow: hidden !important;
+overflow: hidden !important;
 }
 
 .list-arrows.sorted .desc {
-	transform: rotate(180deg);
-	display: inline-block;
+transform: rotate(180deg);
+display: inline-block;
 }
 
 table {
-	border-spacing: 0 15px;
-	border-collapse: collapse;
-	width: 100%;
+border-spacing: 0 15px;
+border-collapse: collapse;
+width: 100%;
 }
 
 th {
-	font-size: 0.8rem;
-	color: var(--bgl-black-tint);
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	background: var(--bgl-box-bg);
-	height: v-bind(computedItemHeight);
-	vertical-align: bottom;
-	font-weight: 400;
-	text-align: start;
+font-size: 0.8rem;
+color: var(--bgl-black-tint);
+position: sticky;
+top: 0;
+z-index: 2;
+background: var(--bgl-box-bg);
+height: v-bind(computedItemHeight);
+vertical-align: bottom;
+font-weight: 400;
+text-align: start;
 }
 
 .embedded-field {
-	margin-bottom: -0.2rem;
-	margin-top: -0.2rem;
+margin-bottom: -0.2rem;
+margin-top: -0.2rem;
 }
 
 .row {
-	border-bottom: 1px solid var(--bgl-border-color);
-	cursor: pointer;
+border-bottom: 1px solid var(--bgl-border-color);
+cursor: pointer;
 }
 
 .row.first-row {
-	font-size: 0.8rem;
-	color: var(--bgl-black-tint);
-	position: sticky;
-	top: 0;
-	z-index: 2;
-	background: var(--bgl-box-bg);
-	vertical-align: bottom;
+font-size: 0.8rem;
+color: var(--bgl-black-tint);
+position: sticky;
+top: 0;
+z-index: 2;
+background: var(--bgl-box-bg);
+vertical-align: bottom;
 }
 
 .row.first-row::after {
-	content: '';
-	border-bottom: 1px solid var(--bgl-border-color);
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: -1px;
+content: '';
+border-bottom: 1px solid var(--bgl-border-color);
+position: absolute;
+left: 0;
+right: 0;
+bottom: -1px;
 }
 
 .first-row .col {
-	cursor: pointer;
-	background: var(--bgl-box-bg);
+cursor: pointer;
+background: var(--bgl-box-bg);
 }
 
 .col {
-	white-space: nowrap;
-	padding: 0.75rem 1rem;
-	transition: var(--bgl-transition);
-	line-height: 1;
-	align-items: center;
-	text-overflow: ellipsis;
-	overflow: hidden;
-	max-width: 30vw;
+white-space: nowrap;
+padding: 0.75rem 1rem;
+transition: var(--bgl-transition);
+line-height: 1;
+align-items: center;
+text-overflow: ellipsis;
+overflow: hidden;
+max-width: 30vw;
 }
 
 .col:has(.bagel-input) {
-	padding: 0rem 0.25rem;
+padding: 0rem 0.25rem;
 }
 
 .col>div {
-	display: flex;
-	gap: 0.5rem;
+display: flex;
+gap: 0.5rem;
 }
 
 .max-col-width {
-	max-width: 30vw;
-	overflow: hidden;
-	text-overflow: ellipsis;
+max-width: 30vw;
+overflow: hidden;
+text-overflow: ellipsis;
 }
 
 .col.check .bgl_icon-font {
-	border-radius: 100%;
-	background: var(--bgl-blue-tint);
-	color: var(--bgl-primary);
-	width: 20px;
-	height: 20px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	margin-top: -2px;
+border-radius: 100%;
+background: var(--bgl-blue-tint);
+color: var(--bgl-primary);
+width: 20px;
+height: 20px;
+display: flex;
+align-items: center;
+justify-content: center;
+margin-top: -2px;
 }
 
 .rows {
-	font-size: 0.88em;
+font-size: 0.88em;
 }
 
 .table-list {
-	height: 100%;
-	position: relative;
-	padding-left: 0 !important;
-	padding-right: 0 !important;
-	overflow: auto;
+height: 100%;
+position: relative;
+padding-left: 0 !important;
+padding-right: 0 !important;
+overflow: auto;
 }
 
 .BagelTable .table-list {
-	overflow: unset;
+overflow: unset;
 }
 
 .row-item {
-	height: v-bind(computedItemHeight);
-	transition: all 200ms ease;
+height: v-bind(computedItemHeight);
+transition: all 200ms ease;
 }
 
 .row-item:hover {
-	background: var(--bgl-gray-light);
+background: var(--bgl-gray-light);
 }
 
 .row-item input[type='checkbox'] {
-	margin-top: 0.45rem !important;
-	accent-color: var(--bgl-accent-color);
+margin-top: 0.45rem !important;
+accent-color: var(--bgl-accent-color);
 }
 
 .infinite-wrapper {
-	overflow-y: auto;
-	width: 100%;
+overflow-y: auto;
+width: 100%;
 }
 
 input[type='checkbox'] {
-	margin-top: 0.3rem !important;
-	accent-color: var(--bgl-accent-color);
-	transform: scale(1.2);
-	position: relative;
-	cursor: pointer;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	height: 0.85rem;
-	width: 0.85rem;
+margin-top: 0.3rem !important;
+accent-color: var(--bgl-accent-color);
+transform: scale(1.2);
+position: relative;
+cursor: pointer;
+display: flex;
+justify-content: center;
+align-items: center;
+height: 0.85rem;
+width: 0.85rem;
 }
 
 input[type='checkbox']::before {
-	content: '';
-	height: 0.85rem;
-	width: 0.85rem;
-	background: var(--bgl-primary);
-	display: block;
-	text-align: center;
-	border-radius: 100%;
-	opacity: 0;
-	transition: all 200ms ease;
-	transform: scale(1);
-	position: absolute;
+content: '';
+height: 0.85rem;
+width: 0.85rem;
+background: var(--bgl-primary);
+display: block;
+text-align: center;
+border-radius: 100%;
+opacity: 0;
+transition: all 200ms ease;
+transform: scale(1);
+position: absolute;
 }
 
 input[type='checkbox']:hover::before {
-	opacity: 0.2;
-	transform: scale(2);
+opacity: 0.2;
+transform: scale(2);
 }
 
 [lang='he'] [dir='ltr'] {
-	text-align: right;
+text-align: right;
 }
 
 th input[type='checkbox'] {
-	transform: translateY(0.2rem) scale(1.2);
-	accent-color: var(--bgl-accent-color);
+transform: translateY(0.2rem) scale(1.2);
+accent-color: var(--bgl-accent-color);
 }
 
 th::after {
-	content: '';
-	border-bottom: 1px solid var(--bgl-border-color);
-	position: absolute;
-	left: 0;
-	right: 0;
-	bottom: -1px;
+content: '';
+border-bottom: 1px solid var(--bgl-border-color);
+position: absolute;
+left: 0;
+right: 0;
+bottom: -1px;
 }
 
 tr {
-	border-bottom: 1px solid var(--bgl-border-color);
-	cursor: pointer;
-	align-items: center;
+border-bottom: 1px solid var(--bgl-border-color);
+cursor: pointer;
+align-items: center;
 }
 
 td,
 th {
-	white-space: nowrap;
-	padding: 0.75rem 0.65rem;
-	transition: var(--bgl-transition);
-	line-height: 1;
+white-space: nowrap;
+padding: 0.75rem 0.65rem;
+transition: var(--bgl-transition);
+line-height: 1;
 }
 
 tbody tr {
-	font-size: 0.88em;
-	height: v-bind(computedItemHeight);
-	transition: all 200ms ease;
+font-size: 0.88em;
+height: v-bind(computedItemHeight);
+transition: all 200ms ease;
 }
 
 tbody tr:hover {
-	background: var(--bgl-gray-light);
+background: var(--bgl-gray-light);
 }
 
 @media (max-width: 910px) {
-	.col {
-		max-width: 60vw !important;
-	}
-	.max-col-width {
+.col {
 	max-width: 60vw !important;
 }
+.max-col-width {
+max-width: 60vw !important;
+}
 }
 
 </style>

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

@@ -218,62 +218,64 @@ function getItemRef(i: number) {
 </template>
 
 <style>
+
 :root {
-	--array-input-bg: var(--bgl-input-bg);
+--array-input-bg: var(--bgl-input-bg);
 }
 .array-input-row {
-	grid-template-columns: 1fr auto;
+grid-template-columns: 1fr auto;
 }
 
 .array-collapse-enter-active,
 .array-collapse-leave-active {
-	overflow: hidden;
-	transition: max-height 0.2s ease, opacity 0.2s ease;
-	max-height: 480px;
-	opacity: 1;
+overflow: hidden;
+transition: max-height 0.2s ease, opacity 0.2s ease;
+max-height: 480px;
+opacity: 1;
 }
 
 .array-collapse-enter-from,
 .array-collapse-leave-to {
-	max-height: 0;
-	opacity: 0;
+max-height: 0;
+opacity: 0;
 }
 
 .array-list-move {
-	transition: transform 0.25s ease;
+transition: transform 0.25s ease;
 }
 
 .array-list-enter-active,
 .array-list-leave-active {
-	transition: all 0.2s ease;
+transition: all 0.2s ease;
 }
 
 .array-list-enter-from,
 .array-list-leave-to {
-	opacity: 0;
-	transform: scale(0.98);
+opacity: 0;
+transform: scale(0.98);
 }
 
 .grid-array-line {
-	grid-template-columns: auto 1fr auto;
-	background: var(--array-input-bg) !important;
-	}
+grid-template-columns: auto 1fr auto;
+background: var(--array-input-bg) !important;
+}
 
-	.grid-array-line button:hover {
-		filter: brightness(90%);
-	}
+.grid-array-line button:hover {
+	filter: brightness(90%);
+}
 
-	.grid-array-line button:active {
-		filter: brightness(80%);
+.grid-array-line button:active {
+	filter: brightness(80%);
 }
 .simpleArray .label-text {
-	display: none;
+display: none;
 }
 .array-item-thumb {
-	width: 24px;
-	height: 24px;
-	border-radius: 50%;
-	object-fit: cover;
-	flex-shrink: 0;
+width: 24px;
+height: 24px;
+border-radius: 50%;
+object-fit: cover;
+flex-shrink: 0;
 }
+
 </style>

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

@@ -50,61 +50,63 @@ onMounted(() => {
 </template>
 
 <style scoped>
+
 .bgl-checkbox {
-	flex-direction: row;
-	cursor: pointer;
-	align-items: flex-start;
+flex-direction: row;
+cursor: pointer;
+align-items: flex-start;
 }
 
 .bgl-checkbox input[type='checkbox'] {
-	accent-color: var(--bgl-input-label-active-color, var(--bgl-accent-color));
-	height: calc(var(--bgl-input-height) / 2.75);
-	width: calc(var(--bgl-input-height) / 2.75);
-	min-width: 0;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-shrink: 0;
+accent-color: var(--bgl-input-label-active-color, var(--bgl-accent-color));
+height: calc(var(--bgl-input-height) / 2.75);
+width: calc(var(--bgl-input-height) / 2.75);
+min-width: 0;
+display: flex;
+justify-content: center;
+align-items: center;
+flex-shrink: 0;
 }
 
 .bgl-checkbox input[type='checkbox']::before {
-	content: '';
-	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;
-	transition: all 200ms ease;
-	position: absolute;
+content: '';
+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;
+transition: all 200ms ease;
+position: absolute;
 }
 
 .bgl-checkbox input[type='checkbox']:hover::before {
-	opacity: 0.2;
-	transform: scale(2);
+opacity: 0.2;
+transform: scale(2);
 }
 
 .bgl-checkbox label {
-	cursor: pointer;
-	user-select: none;
-	font-size: var(--bgl-input-font-size);
-	transition: var(--bgl-transition-400);
+cursor: pointer;
+user-select: none;
+font-size: var(--bgl-input-font-size);
+transition: var(--bgl-transition-400);
 }
 
 .bgl-checkbox:hover label {
-	color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
 }
 
 .bgl-checkbox input:checked+label {
-	color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
+color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
 }
 
 .bagel-input:focus-within.bgl-checkbox:not(:checked) label {
-	color: var(--bgl-label-color) !important;
+color: var(--bgl-label-color) !important;
 }
 
 .bgl-checkbox input:disabled+label,
 .bgl-checkbox:has(input:disabled):hover label {
-	color: var(--bgl-input-label-color) !important;
-	opacity: 0.5;
+color: var(--bgl-input-label-color) !important;
+opacity: 0.5;
 }
+
 </style>

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

@@ -11,11 +11,12 @@ const val = defineModel<boolean>('modelValue', { default: false })
 </template>
 
 <style scoped>
+
 .primary-checkbox input {
   appearance: none;
   accent-color: var(--bgl-accent-color);
-	height: calc(var(--bgl-input-height) / 1.75);
-	width: calc(var(--bgl-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;
@@ -48,4 +49,5 @@ const val = defineModel<boolean>('modelValue', { default: false })
   background: var(--bgl-primary);
   box-shadow: inset 0 0 0px 2px white;
 }
+
 </style>