@bagelink/vue 0.0.245 → 0.0.250

package/package.json

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

package/src/components/Avatar.vue

@@ -26,7 +26,7 @@ withDefaults(defineProps<{
 	overflow: hidden;
 	text-align: center;
 	padding: none;
-
+	flex: 0 0 40px;
 }
 
 .avatar p {

package/src/components/Btn.vue

@@ -1,15 +1,17 @@
 <template>
-	<component :is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
+	<component
+		:is="to ? 'router-link' : is" :to="to" @click.stop="onClick" :type="type" :role="role" :disabled="disabled"
 		:class="{
-			'btn-icon': icon && !slots['default'] && !value,
-			btn: !icon || slots['default'] || value,
+			'bgl_btn-icon': icon && !slots['default'] && !value,
+			bgl_btn: !icon || slots['default'] || value,
 			thin,
 			round,
-			'flatBtn': flat,
-			'btn-border': border
-		}">
+			'bgl_flatBtn': flat,
+			'bgl_btn-border': border
+		}"
+	>
 		<div class="loading" v-if="loading" />
-		<div v-else class="btn-flex">
+		<div v-else class="bgl_btn-flex">
 			<MaterialIcon v-if="icon" :icon="icon" />
 			<slot />
 			<template v-if="!slots['default'] && value">
@@ -123,7 +125,7 @@ const computedBackgroundColor = $computed(
 	}
 }
 
-.btn-icon {
+.bgl_btn-icon {
 	height: var(--btn-height);
 	width: var(--btn-height);
 	border-radius: 100%;
@@ -134,118 +136,118 @@ const computedBackgroundColor = $computed(
 	transition: var(--bgl-transition);
 }
 
-.btn {
+.bgl_btn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
 	text-decoration: none;
 }
 
-.btn[disabled="true"] {
+.bgl_btn[disabled="true"] {
 	opacity: 0.5;
 	cursor: not-allowed;
 }
 
-.btn-flex {
+.bgl_btn-flex {
 	display: flex;
 	align-items: center;
 	gap: 0.5rem;
 	justify-content: center;
 }
 
-.btn .icon-font {
+.bgl_btn .bgl_.bgl_icon-font {
 	font-size: calc(var(--input-font-size) * 1.3);
 }
 
-.btn,
-.btn-icon {
+.bgl_btn,
+.bgl_btn-icon {
 	background-color: v-bind(computedBackgroundColor);
 	color: v-bind(cumputedTextColor);
 }
 
-.btn:hover,
-.btn-icon:hover {
+.bgl_btn:hover,
+.bgl_btn-icon:hover {
 	filter: var(--bgl-hover-filter);
 }
 
-.btn:active,
-.btn-icon:active {
+.bgl_btn:active,
+.bgl_btn-icon:active {
 	filter: var(--bgl-active-filter);
 }
 
-.btn.flatBtn {
+.bgl_btn.bgl_flatBtn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
 
-.btn-icon.flatBtn {
+.bgl_btn-icon.bgl_flatBtn {
 	background: transparent;
 }
 
-.btn.flatBtn:hover,
-.btn-icon.flatBtn:hover {
+.bgl_btn.bgl_flatBtn:hover,
+.bgl_btn-icon.bgl_flatBtn:hover {
 	filter: var(--bgl-active-filter);
 }
 
-.btn.flatBtn:active,
-.btn-icon.flatBtn:active {
+.bgl_btn.bgl_flatBtn:active,
+.bgl_btn-icon.bgl_flatBtn:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
 
-.btn.flatBtn.red,
-.btn-icon.flatBtn.red {
+.bgl_btn.bgl_flatBtn.red,
+.bgl_btn-icon.bgl_flatBtn.red {
 	color: var(--bgl-red);
 }
 
-.btn.flatBtn.light,
-.btn-icon.flatBtn.light {
+.bgl_btn.bgl_flatBtn.light,
+.bgl_btn-icon.bgl_flatBtn.light {
 	color: var(--bgl-primary-tint);
 }
 
-.btn.flatBtn.black,
-.btn-icon.flatBtn.black {
+.bgl_btn.bgl_flatBtn.black,
+.bgl_btn-icon.bgl_flatBtn.black {
 	color: var(--bgl-black);
 }
 
-.btn.flatBtn.gray,
-.btn-icon.flatBtn.gray {
+.bgl_btn.bgl_flatBtn.gray,
+.bgl_btn-icon.bgl_flatBtn.gray {
 	color: var(--bgl-gray);
 }
 
-.btn.thin {
+.bgl_btn.thin {
 	padding-left: calc(var(--btn-padding) / 2);
 	padding-right: calc(var(--btn-padding) / 2);
 }
 
-.btn.round {
+.bgl_btn.round {
 	border-radius: calc(var(--btn-border-radius) * 2);
 }
 
-.btn-icon.thin {
+.bgl_btn-icon.thin {
 	height: calc(var(--btn-height) / 1.5);
 	width: calc(var(--btn-height) / 1.5);
 	line-height: 1;
 }
 
-[dir="rtl"] .icon-font {
+[dir="rtl"] .bgl_.bgl_icon-font {
 	transform: rotateY(180deg);
 }
 
-.btn-border {
+.bgl_btn-border {
 	outline: 1px solid v-bind(computedBackgroundColor);
 	color: v-bind(computedBackgroundColor);
 	background: transparent;
 }
 
-.btn-border:hover {
+.bgl_btn-border:hover {
 	color: var(--bgl-white);
 	background: v-bind(computedBackgroundColor);
 	filter: brightness(100%);
 }
 
-.btn-border:active {
+.bgl_btn-border:active {
 	filter: brightness(80%);
 }
 </style>

package/src/components/Comments.vue

@@ -225,13 +225,13 @@ const newComment = async () => {
   filter: brightness(70%);
 }
 
-.icon-font.delete,
-.icon-font.save {
+.bgl_icon-font.delete,
+.bgl_icon-font.save {
   display: none;
 }
 
-.editable .icon-font.delete,
-.editable .icon-font.save {
+.editable .bgl_icon-font.delete,
+.editable .bgl_icon-font.save {
   display: block;
 }
 

package/src/components/MaterialIcon.vue

@@ -1,6 +1,6 @@
 <template>
 	<div
-		class="icon-font"
+		class="bgl_icon-font"
 		:style="{ fontSize: `${size}rem` }"
 	>
 		{{ icon }}

package/src/components/NavBar.vue

@@ -158,7 +158,7 @@ withDefaults(
   pointer-events: all;
 }
 
-.nav-button .icon-font {
+.nav-button .bgl_icon-font {
   font-size: 22px;
   margin: 0.25rem 10px;
   padding: 10px;
@@ -172,8 +172,8 @@ withDefaults(
   pointer-events: all;
 }
 
-.nav-button:hover .icon-font,
-.nav-button.router-link-active .icon-font {
+.nav-button:hover .bgl_icon-font,
+.nav-button.router-link-active .bgl_icon-font {
   background: var(--bgl-white);
   color: var(--bgl-primary);
 }
@@ -269,7 +269,7 @@ withDefaults(
     margin-inline-start: 0rem;
   }
 
-  .nav.open .nav-button .icon-font {
+  .nav.open .nav-button .bgl_icon-font {
     margin: 0;
     background: transparent;
   }
@@ -334,7 +334,7 @@ withDefaults(
     margin: 12px 0.25rem;
   }
 
-  .nav-button .icon-font {
+  .nav-button .bgl_icon-font {
     padding: 2px 0 0 0;
     margin: 0;
     height: 30px;

package/src/components/TableSchema.vue

@@ -73,7 +73,7 @@ const sort = (fieldname: string) => {
 	opacity: 0;
 }
 
-.list-arrows .icon-font {
+.list-arrows .bgl_icon-font {
 	transition: all ease-in-out 0.2s;
 }
 
@@ -153,7 +153,7 @@ th {
 	text-overflow: ellipsis;
 }
 
-.col.check .icon-font {
+.col.check .bgl_icon-font {
 	border-radius: 100%;
 	background: var(--bgl-blue-20);
 	color: var(--bgl-primary);

package/src/components/form/BglField.vue

@@ -1,11 +1,26 @@
 <template>
-	<component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
-		:id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
-		:defaultValue="field.defaultValue" :options="field.options" :helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)">
+	<component
+		:required="field.required"
+		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
+		v-if="vIf"
+		:is="is"
+		:label="field.label"
+		:id="field.id"
+		:placeholder="field.placeholder || field.label"
+		v-model="fieldData"
+		:defaultValue="field.defaultValue"
+		:options="field.options"
+		:helptext="field.helptext"
+		@update:modelValue="($event: any) => field?.onUpdate?.($event, denullify(fieldData, field.id), formData)"
+	>
 		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
+		<BglField
+			v-model="formData"
+			v-for="(child, ii) in field.children"
+			:key="child.id || ii"
+			:field="child"
+		/>
 	</component>
 </template>
 

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

@@ -1,14 +1,24 @@
 <template>
-	<div class="bagel-input" :title="label" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="label"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			{{ label }}
 		</label>
-		<VDatepicker ref="datePicker" :auto-apply="true" v-model="date" :enable-time-picker="enableTime" />
+		<VDatepicker
+			ref="datePicker"
+			:auto-apply="true"
+			v-model="date"
+			:enable-time-picker="enableTime"
+			v-bind="extraProps"
+		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-import VDatepicker, { DatePickerInstance } from '@vuepic/vue-datepicker';
+import VDatepicker, { type DatePickerInstance, type VueDatePickerProps } from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 import { onMounted } from 'vue';
 
@@ -22,6 +32,7 @@ const props = withDefaults(
 		enableTime?: boolean;
 		modelValue?: string | Date;
 		defaultValue?: string | Date;
+		extraProps?: VueDatePickerProps;
 	}>(),
 	{
 		enableTime: false,

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

@@ -3,35 +3,89 @@
 		<label>
 			{{ label }}
 		</label>
-		<div @click="browse" @dragover="dragover" @drop="drop" @dragleave="dragleave" class="fileUploadWrap"
-			:class="{ fileDropZone: !storageFiles.length && !fileQueue.length, dragover: isDragOver }">
-			<template v-for="file in storageFiles" :key="file.id">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="file.url" alt="">
+		<div
+			@click="browse"
+			@dragover="dragover"
+			@drop="drop"
+			@dragleave="dragleave"
+			class="fileUploadWrap"
+			:class="{ fileDropZone: !storageFiles.length && !fileQueue.length, dragover: isDragOver }"
+		>
+			<template
+				v-for="file in storageFiles"
+				:key="file.id"
+			>
+				<div
+					class="imagePreviewWrap"
+					v-if="!multiple"
+				>
+					<img
+						class="preview"
+						:src="file.url"
+						alt=""
+					>
 				</div>
 				<div class="previewName">
-					<img height="60" v-if="multiple" class="preview" :src="file.url" alt="">
+					<img
+						height="60"
+						v-if="multiple"
+						class="preview"
+						:src="file.url"
+						alt=""
+					>
 					<p class="no-margin">
 						{{ file.name }}
 					</p>
-					<Btn thin @click.stop="removeFile(file)" flat icon="delete" color="red" />
+					<Btn
+						thin
+						@click.stop="removeFile(file)"
+						flat
+						icon="delete"
+						color="red"
+					/>
 				</div>
 			</template>
-			<template v-for="fileQ in fileQueue" :key="fileQ.file">
-				<div class="imagePreviewWrap" v-if="!multiple">
-					<img class="preview" :src="fileToUrl(fileQ.file)" alt="">
+			<template
+				v-for="fileQ in fileQueue"
+				:key="fileQ.file"
+			>
+				<div
+					class="imagePreviewWrap"
+					v-if="!multiple"
+				>
+					<img
+						class="preview"
+						:src="fileToUrl(fileQ.file)"
+						alt=""
+					>
 				</div>
 				<div class="previewName">
-					<img height="60" v-if="multiple" class="preview" :src="fileToUrl(fileQ.file)" alt="">
+					<img
+						height="60"
+						v-if="multiple"
+						class="preview"
+						:src="fileToUrl(fileQ.file)"
+						alt=""
+					>
 					<p class="no-margin">
 						{{ fileQ.name }}
 					</p>
-					<div class="pie" :style="`--p:${fileQ.progress}`" style="--b: 2px"
-						:class="{ complete: fileQ.progress === 100 }">
-						<span class="progress" v-if="fileQ.progress < 100">
+					<div
+						class="pie"
+						:style="`--p:${fileQ.progress}`"
+						style="--b: 2px"
+						:class="{ complete: fileQ.progress === 100 }"
+					>
+						<span
+							class="progress"
+							v-if="fileQ.progress < 100"
+						>
 							{{ `${fileQ.progress.toFixed(0)}` }}
 						</span>
-						<MaterialIcon class="success" icon="check" />
+						<MaterialIcon
+							class="success"
+							icon="check"
+						/>
 					</div>
 				</div>
 			</template>

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

@@ -2,8 +2,10 @@
 	<div class="pb-1">
 		<label :for="id">
 			{{ label }}
-			<Multiselect ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
-				:placeholder="placeholder" v-model="seletValue" />
+			<Multiselect
+				ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
+				:placeholder="placeholder" v-model="seletValue"
+			/>
 		</label>
 	</div>
 </template>
@@ -125,7 +127,7 @@ fieldset[disabled] .multiselect {
 	width: 100%;
 	min-height: var(--input-height);
 	text-align: left;
-	color: #35495e;
+	color: var(--input-color);
 }
 
 .multiselect * {
@@ -172,21 +174,21 @@ fieldset[disabled] .multiselect {
 .multiselect__single {
 	position: relative;
 	display: inline-block;
-	min-height: 20px;
-	line-height: 20px;
 	border: none;
-	border-radius: var(--input-border-radius);
 	background: var(--input-bg);
-	padding: 0 0 0 5px;
 	width: calc(100%);
 	transition: border 0.1s ease;
 	box-sizing: border-box;
-	margin-bottom: 8px;
 	vertical-align: top;
+	font-size: var(--input-font-size);
+	padding-inline-start: 0rem;
+}
+.multiselect--active .multiselect__input {
+		margin-top: -0.5rem;
 }
 
 .multiselect__input::placeholder {
-	color: #35495e;
+	color: var(--input-color);
 }
 
 .multiselect__tag~.multiselect__input,
@@ -206,7 +208,7 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect__single {
-	padding-left: 5px;
+	/* padding-left: 5px; */
 	margin-bottom: 8px;
 }
 
@@ -215,12 +217,17 @@ fieldset[disabled] .multiselect {
 }
 
 .multiselect__tags {
-	min-height: 40px;
+	/* min-height: 40px; */
 	display: block;
-	padding: 8px 40px 0 8px;
+	/* padding: 0.7rem 40px 0.7rem 8px; */
 	border-radius: var(--input-border-radius);
 	background: var(--input-bg);
 	font-size: var(--input-font-size);
+	height: var(--input-height);
+	line-height: 0;
+	padding: calc(var(--input-height) / 2);
+	padding-inline-end: 40px;
+	padding-inline-start: 0.7rem;
 }
 
 .multiselect__tag {
@@ -293,8 +300,8 @@ fieldset[disabled] .multiselect {
 	display: block;
 	position: absolute;
 	box-sizing: border-box;
-	width: 40px;
-	height: 38px;
+	/* width: 40px; */
+	/* height: 38px; */
 	right: 1px;
 	top: 1px;
 	padding: 4px 8px;
@@ -303,22 +310,23 @@ fieldset[disabled] .multiselect {
 	text-align: center;
 	cursor: pointer;
 	transition: transform 0.2s ease;
+	padding-top: calc(var(--input-height) / 2 - 0.7rem);
+
 }
 
 .multiselect__select::before {
 	position: relative;
 	background-size: contain;
 	transform: scale(0.5);
-	top: 4px;
 	color: var(--bgl-black);
-	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>")
+	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
 }
 
 .multiselect__placeholder {
-	color: #adadad;
+	color: var(--placeholder-color);
 	display: inline-block;
 	margin-bottom: 10px;
-	padding-top: 2px;
+
 }
 
 .multiselect--active .multiselect__placeholder {
@@ -427,16 +435,16 @@ fieldset[disabled] .multiselect {
 
 .multiselect__option--group {
 	background: #ededed;
-	color: #35495e;
+	color: var(--input-color);
 }
 
 .multiselect__option--group.multiselect__option--highlight {
-	background: #35495e;
+	background: var(--input-color);
 	color: #fff;
 }
 
 .multiselect__option--group.multiselect__option--highlight::after {
-	background: #35495e;
+	background: var(--input-color);
 }
 
 .multiselect__option--disabled.multiselect__option--highlight {
@@ -481,7 +489,9 @@ fieldset[disabled] .multiselect {
 }
 
 *[dir="rtl"] .multiselect__tags {
-	padding: 8px 8px 0 40px;
+	padding: calc(var(--input-height) / 2);
+	padding-inline-end: 40px;
+	padding-inline-start: 0.7rem;
 }
 
 *[dir="rtl"] .multiselect__content {

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

@@ -189,7 +189,7 @@ onMounted(() => {
 	cursor: grab;
 }
 
-.btn.thin.flatBtn {
+.bgl_btn.thin.bgl_flatBtn {
 	margin-inline-start: -1rem;
 	margin-top: 1rem;
 }
@@ -252,18 +252,18 @@ onMounted(() => {
 	background: var(--border-color);
 }
 
-.table-action>.icon-font {
+.table-action>.bgl_icon-font {
 	padding: 11.4px;
 	cursor: pointer;
 	transition: var(--bgl-transition);
 }
 
-.table-action:hover>.icon-font {
+.table-action:hover>.bgl_icon-font {
 	background: var(--bgl-red);
 	color: var(--bgl-white);
 }
 
-.table-action:active>.icon-font {
+.table-action:active>.bgl_icon-font {
 	filter: brightness(90%);
 }