@bagelink/vue 0.0.435 → 0.0.439

package/dist/style.css

@@ -376,124 +376,122 @@ a[data-v-d09a83c5] {
   filter: brightness(80%);
 }
 .bg-dark {
-	position: fixed;
-	top: 0;
-	right: 0;
-	left: 0;
-	bottom: 0;
-	background-color: rgba(0, 0, 0, 0.7);
-	z-index: 999;
-	pointer-events: none;
-	opacity: 0;
-	transition: all ease-in-out 0.3s;
-	max-height: 100vh;
-	overflow: auto;
-	margin: 0 auto;
-	width: 100%;
-	display: grid;
-	align-items: center;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.7);
+    z-index: 999;
+    pointer-events: none;
+    opacity: 0;
+    transition: all ease-in-out 0.3s;
+    max-height: 100vh;
+    overflow: scroll;
+    margin: 0 auto;
+    width: 100%;
+    display: grid;
+    align-items: center;
+    overflow-x: hidden;
 }
 
+
 .bg-lignt {
-	background-color: var(--bgl-white);
+    background-color: var(--bgl-white);
 }
 
 .modal {
-	width: 96%;
-	max-width: 720px;
-	/* transform: scale(0.5); */
-	/* opacity: 0; */
-	transition: all ease-in-out 0.18s;
-	margin-left: auto;
-	margin-right: auto;
-	height: fit-content;
+    width: 96%;
+    max-width: 720px;
+    /* transform: scale(0.5); */
+    /* opacity: 0; */
+    transition: all ease-in-out 0.18s;
+    margin-left: auto;
+    margin-right: auto;
+    height: fit-content;
 }
 
 .small-modal .modal {
-	max-width: 300px;
-	text-align: center;
+    max-width: 300px;
+    text-align: center;
 }
 
 .tool-bar {
-	margin: -2rem -1rem 1rem;
-	display: flex;
-	justify-content: space-between;
-	position: -webkit-sticky;
-	position: sticky;
-	padding-top: 1rem;
-	top: 0rem;
-	z-index: 3;
-	background: var(--bgl-white);
+    margin: -2rem -1rem 1rem;
+    display: flex;
+    justify-content: space-between;
+    position: -webkit-sticky;
+    position: sticky;
+    padding-top: 1rem;
+    top: 0rem;
+    z-index: 3;
+    background: var(--bgl-white);
 }
 
 .modal-size {
-	cursor: pointer;
+    cursor: pointer;
 }
 
 .is-side .modal {
-	inset-inline-end: -1720px;
-	transform: scale(1);
-	opacity: 1;
-	/* position: fixed; */
-	/* top: 20px; */
-	/* bottom: 20px; */
-	max-width: 600px;
-	width: 90%;
-	margin-top: 20px;
-	margin-bottom: 20px;
-	margin-inline-start: auto;
-	margin-inline-end: 20px;
-	min-height: calc(100vh - 40px);
-	transform: translateX(100%);
+    inset-inline-end: -1720px;
+    transform: scale(1);
+    opacity: 1;
+    max-width: 600px;
+    width: 90%;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    margin-inline-start: auto;
+    margin-inline-end: 20px;
+    min-height: calc(100vh - 40px);
+    transform: translateX(100%);
 }
 
 .is-active .modal {
-	transform: scale(1);
-	opacity: 1;
-	box-shadow: 6px 6px 20px 20px #0000001c;
+    transform: scale(1);
+    opacity: 1;
+    box-shadow: 6px 6px 20px 20px #0000001c;
 }
 
 .bg-lignt .modal {
-	transform: scale(1);
-	border: 1px solid var(--border-color);
+    transform: scale(1);
+    border: 1px solid var(--border-color);
 }
 
 .bg-lignt.is-active .modal {
-	box-shadow: none;
+    box-shadow: none;
 }
 
 .is-active.is-side .modal {
-	inset-inline-end: 0px;
-	transform: translateX(0%);
+    inset-inline-end: 0px;
+    transform: translateX(0%);
 }
 
 .bg-dark.is-active {
-	opacity: 1;
-	pointer-events: all;
+    opacity: 1;
+    pointer-events: all;
 }
 
 .is-side.bg-dark.is-active {
-	opacity: 1;
-	align-items: stretch;
+    opacity: 1;
+    align-items: stretch;
 }
 
 .is-side.is-active .modal {
-	pointer-events: all;
+    pointer-events: all;
 }
 
 @media screen and (max-width: 910px) {
-	.tool-bar {
-		margin: -1rem 0rem 1rem;
-		padding-bottom: 1rem;
-		align-items: center;
-	}
+    .tool-bar {
+        margin: -1rem 0rem 1rem;
+        padding-bottom: 1rem;
+        align-items: center;
+    }
 
-	.is-active.is-side .modal {
-		margin-inline-end: 5%;
-		margin-inline-start: 5%;
-	}
+    .is-active.is-side .modal {
+        margin-inline-end: 5%;
+        margin-inline-start: 5%;
+    }
 }
-
 .modal-title {
 	text-align: center;
 	font-weight: 600;
@@ -625,41 +623,41 @@ a[data-v-d09a83c5] {
   gap: 1rem;
 }
 
-.list-arrows[data-v-1d169811] {
+.list-arrows[data-v-a99caac1] {
 	opacity: 0;
 }
-.list-arrows .bgl_icon-font[data-v-1d169811] {
+.list-arrows .bgl_icon-font[data-v-a99caac1] {
 	transition: all ease-in-out 0.2s;
 }
-.list-arrows.sorted[data-v-1d169811] {
+.list-arrows.sorted[data-v-a99caac1] {
 	opacity: 1;
 }
-.col img[data-v-1d169811] {
+.col img[data-v-a99caac1] {
 	height: 35px;
 	margin-top: -14px;
 	margin-bottom: -14px;
 	border-radius: 5px;
 }
-.list-arrows.sorted .desc[data-v-1d169811] {
+.list-arrows.sorted .desc[data-v-a99caac1] {
 	transform: rotate(180deg);
 }
-table[data-v-1d169811] {
+table[data-v-a99caac1] {
 	border-collapse: separate;
 	border-spacing: 0 15px;
 	border-collapse: collapse;
 }
-th[data-v-1d169811] {
+th[data-v-a99caac1] {
 	font-weight: 400;
 }
-.embedded-field[data-v-1d169811] {
+.embedded-field[data-v-a99caac1] {
 	margin-bottom: -0.2rem;
 	margin-top: -0.2rem;
 }
-.row[data-v-1d169811] {
+.row[data-v-a99caac1] {
 	border-bottom: 1px solid var(--border-color);
 	cursor: pointer;
 }
-.row.first-row[data-v-1d169811] {
+.row.first-row[data-v-a99caac1] {
 	font-size: 0.8rem;
 	color: var(--bgl-black-tint);
 	position: sticky;
@@ -669,7 +667,7 @@ th[data-v-1d169811] {
 	height: 50px;
 	vertical-align: bottom;
 }
-.row.first-row[data-v-1d169811]::after {
+.row.first-row[data-v-a99caac1]::after {
 	content: '';
 	border-bottom: 1px solid var(--border-color);
 	position: absolute;
@@ -677,27 +675,27 @@ th[data-v-1d169811] {
 	right: 0;
 	bottom: -1px;
 }
-.first-row .col[data-v-1d169811] {
+.first-row .col[data-v-a99caac1] {
 	cursor: pointer;
 	background: var(--bgl-white);
 }
-.col[data-v-1d169811] {
+.col[data-v-a99caac1] {
 	white-space: nowrap;
 	padding: 0.75rem 0.5rem;
 	transition: var(--bgl-transition);
 	line-height: 1;
 	align-items: center;
 }
-.col > div[data-v-1d169811] {
+.col > div[data-v-a99caac1] {
 	display: flex;
 	gap: 0.5rem;
 }
-.max-col-width[data-v-1d169811] {
+.max-col-width[data-v-a99caac1] {
 	max-width: 30vw;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
-.col.check .bgl_icon-font[data-v-1d169811] {
+.col.check .bgl_icon-font[data-v-a99caac1] {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);
@@ -708,27 +706,27 @@ th[data-v-1d169811] {
 	justify-content: center;
 	margin-top: -2px;
 }
-.rows[data-v-1d169811] {
+.rows[data-v-a99caac1] {
 	font-size: 0.8125em;
 }
-.table-list[data-v-1d169811] {
+.table-list[data-v-a99caac1] {
 	height: 100%;
 	position: relative;
 	padding-left: 0 !important;
 	padding-right: 0 !important;
 	overflow: auto;
 }
-.BagelTable .table-list[data-v-1d169811] {
+.BagelTable .table-list[data-v-a99caac1] {
 	overflow: unset;
 }
-.row-item[data-v-1d169811] {
+.row-item[data-v-a99caac1] {
 	height: 50px;
 	transition: all 200ms ease;
 }
-.row-item[data-v-1d169811]:hover {
+.row-item[data-v-a99caac1]:hover {
 	background: var(--bgl-gray-light);
 }
-.infinite-wrapper[data-v-1d169811] {
+.infinite-wrapper[data-v-a99caac1] {
 	overflow-y: auto;
 	width: 100%;
 }
@@ -1072,10 +1070,10 @@ display: block;
 }
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
-.selectinput[data-v-39ae2ac8] {
+.selectinput[data-v-49c80f47] {
 	width: 100%;
 }
-.selectinput-option[data-v-39ae2ac8] {
+.selectinput-option[data-v-49c80f47] {
 	padding: 6px 12px;
 	cursor: pointer;
 	border-radius: 5px;
@@ -1086,14 +1084,14 @@ display: block;
 	width: 100%;
 	font-size: var(--input-font-size);
 }
-.selectinput-options[data-v-39ae2ac8] {
+.selectinput-options[data-v-49c80f47] {
 	max-height: 300px;
 	overflow-y: auto;
 }
-.selectinput-option[data-v-39ae2ac8]:hover {
+.selectinput-option[data-v-49c80f47]:hover {
 	background: var(--bgl-gray-20);
 }
-.isEmpty p[data-v-39ae2ac8] {
+.isEmpty p[data-v-49c80f47] {
 	opacity: 0.3;
 }
 
@@ -5589,8 +5587,7 @@ select {
     height: 0.5rem;
 }
 ::-webkit-scrollbar-track {
-    /* border-left: 1px solid var(--bgl-gray-light); */
-    /*-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);*/
+    /* -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3); */
 }
 ::-webkit-scrollbar-thumb {
     background-color: var(--bgl-gray);
@@ -6295,19 +6292,63 @@ select {
     --transition: all 0.2s cubic-bezier(0.1, 0.5, 0.33, 1);
     --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
 }
-body {
-    max-width: 100vw;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-}
 .grid>* {
     min-height: 0;
 }
 * {
     box-sizing: border-box;
 }
-@media (min-width: 992px) {}
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+    background-attachment: scroll;
+}
+body {
+    margin: 0;
+    min-height: 100%;
+    background-color: var(--bgl-bg);
+    font-family: var(--bgl-font);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.65;
+    width: auto;
+    height: auto;
+}
+a {
+    background-color: transparent;
+    cursor: pointer;
+    display: inline-block;
+    color: inherit;
+}
+a:active,
+a:hover {
+    outline: 0;
+}
+b,
+strong {
+    font-weight: bold;
+}
+hr {
+    box-sizing: content-box;
+}
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+}
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
 @media screen and (max-width: 910px) {
 
     body {

package/package.json

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

package/src/components/TableSchema.vue

@@ -73,16 +73,28 @@ const loading = $ref(true);
 const props = defineProps<{
 	data: any[];
 	schema?: BglFormSchemaT | (() => BglFormSchemaT);
+	showFields?: string[];
 }>();
 
 const computedSchema = $computed(() => {
 	if (typeof props.schema === 'function') {
 		return props.schema();
 	}
-	if (props.schema) return props.schema;
-	const keys = [...new Set((props.data || []).map(Object.keys).flat())] as string[];
-	const schema: BglFormSchemaT = keys.map((id) => ({ id, label: keyToLabel(id) }));
-	return schema;
+	if (props.schema) {
+		return props.showFields
+			? props.schema.filter((f) => props.showFields?.includes(f.id as string))
+			: props.schema;
+	}
+	const keys = [
+		...new Set((props.data || []).map(Object.keys).flat()),
+	] as string[];
+	const schema: BglFormSchemaT = keys.map((id) => ({
+		id,
+		label: keyToLabel(id),
+	}));
+	return props.showFields
+		? schema.filter((f) => props.showFields?.includes(f.id as string) || !f.id)
+		: schema;
 });
 
 const emit = defineEmits(['select', 'orderBy']);

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

@@ -16,9 +16,13 @@
 				class="selectinput-btn"
 				:class="{ isEmpty: selectedItems.length === 0 }"
 			>
-				<p>{{ selectedLabel }}</p>
+				<Icon v-if="icon" :icon="icon" />
+				<p v-if="!hideLabel">
+					{{ selectedLabel }}
+				</p>
 				<Icon
 					v-if="!disabled"
+					thin
 					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
 				/>
 			</button>
@@ -29,7 +33,7 @@
 				@input="updateOpen(true)"
 				:value="selectedItems"
 				required
-			>
+			/>
 		</label>
 		<template #popper>
 			<Card
@@ -71,7 +75,7 @@
 import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
-import { TextInput, Card, Icon } from '@bagelink/vue';
+import { TextInput, Card, Icon, type MaterialIcons } from '@bagelink/vue';
 
 type Option =
 	| string
@@ -91,6 +95,8 @@ const props = defineProps<{
 	label?: string;
 	fullWidth?: boolean;
 	multiselect?: boolean;
+	icon?: MaterialIcons;
+	hideLabel?: boolean;
 }>();
 
 let selectedItems = $ref<Option[]>([]);
@@ -144,19 +150,22 @@ const getValue = (option?: Option) => {
 	return option.value;
 };
 
-const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
-
-const filteredOptions = $computed(() => props.options.filter((option) => {
-	const searchTerm = search
-		.split(/\s+/)
-		.filter(Boolean)
-		.map((t) => new RegExp(t, 'gi'));
-	return (
-		Boolean(option) &&
+const isSelected = (option: Option) =>
+	!!selectedItems.find((item) => getValue(option) === getValue(item));
+
+const filteredOptions = $computed(() =>
+	props.options.filter((option) => {
+		const searchTerm = search
+			.split(/\s+/)
+			.filter(Boolean)
+			.map((t) => new RegExp(t, 'gi'));
+		return (
+			Boolean(option) &&
 			(searchTerm.every((s) => getLabel(option).match(s)) ||
 				searchTerm.length === 0)
-	);
-}));
+		);
+	}),
+);
 
 const select = (option: Option) => {
 	const existingIndex = selectedItems.findIndex(

package/src/styles/bagel.css

@@ -16,13 +16,6 @@
     --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
 }
 
-body {
-    max-width: 100vw;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-}
-
 .grid>* {
     min-height: 0;
 }
@@ -31,7 +24,66 @@ body {
     box-sizing: border-box;
 }
 
-@media (min-width: 992px) {}
+
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+    background-attachment: scroll;
+}
+
+body {
+    margin: 0;
+    min-height: 100%;
+    background-color: var(--bgl-bg);
+    font-family: var(--bgl-font);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.65;
+    width: auto;
+    height: auto;
+}
+
+a {
+    background-color: transparent;
+    cursor: pointer;
+    display: inline-block;
+    color: inherit;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+hr {
+    box-sizing: content-box;
+}
+
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
 
 @media screen and (max-width: 910px) {