@bagelink/vue 0.0.211 → 0.0.216

package/src/components/NavBar.vue

@@ -1,51 +1,53 @@
 <template>
-  <div :class="{ open: isOpen, closed: !isOpen }">
-    <slot name="top" />
-    <div
-      class="nav-expend"
-      @click="isOpen = !isOpen"
-      @keypress.enter="isOpen = !isOpen"
-      role="button"
-      aria-label="Toggle Navigation"
-      tabindex="0"
-    >
-      <div class="icon-font top-arrow">chevron_right</div>
-    </div>
-
-    <div class="full-nav">
-      <div class="nav-scroll">
-        <div class="nav-links-wrapper">
-          <RouterLink
-            v-for="link in links?.()"
-            class="nav-button"
-            :to="link.to"
-            :key="link.label"
-          >
-            <div class="icon-font">
-              {{ link.materialIcon }}
-            </div>
-            <div class="tooltip">
-              {{ link.localized ? link.localized : link.label }}
-            </div>
-          </RouterLink>
-        </div>
-      </div>
-
-      <div class="bot-buttons-wrapper">
-        <slot name="floor" />
-      </div>
-    </div>
-  </div>
+	<div :class="{ open: isOpen, closed: !isOpen }">
+		<slot name="top" />
+		<div
+			class="nav-expend"
+			@click="isOpen = !isOpen"
+			@keypress.enter="isOpen = !isOpen"
+			role="button"
+			aria-label="Toggle Navigation"
+			tabindex="0"
+		>
+			<div class="icon-font top-arrow">
+				chevron_right
+			</div>
+		</div>
+
+		<div class="full-nav">
+			<div class="nav-scroll">
+				<div class="nav-links-wrapper">
+					<RouterLink
+						v-for="link in links?.()"
+						class="nav-button"
+						:to="link.to"
+						:key="link.label"
+					>
+						<div class="icon-font">
+							{{ link.materialIcon }}
+						</div>
+						<div class="tooltip">
+							{{ link.localized ? link.localized : link.label }}
+						</div>
+					</RouterLink>
+				</div>
+			</div>
+
+			<div class="bot-buttons-wrapper">
+				<slot name="floor" />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
 // import LangText from "../translation/LangText.vue"s
-import type { MaterialIcons } from "@bagelink/vue";
+import type { MaterialIcons } from '@bagelink/vue';
 
 const isOpen = $ref(true);
 
 withDefaults(
-  defineProps<{
+	defineProps<{
     links?: () => {
       label: string;
       to: string;
@@ -56,15 +58,15 @@ withDefaults(
     homeLabel?: string;
     homeTo?: string;
   }>(),
-  {
-    homeIcon: "home",
-    homeLabel: "Home",
-    homeTo: "/",
-  }
+	{
+		homeIcon: 'home',
+		homeLabel: 'Home',
+		homeTo: '/',
+	},
 );
 </script>
 
-<style>
+<style scoped>
 [dir="rtl"] .top-arrow {
   transform: rotate(180deg);
 }

package/src/components/form/BglField.vue

@@ -2,6 +2,7 @@
 	<component
 		:required="field.required"
 		v-bind="bindAttrs(field?.attrs||{}, props.modelValue[field.id || ''], props.modelValue,)"
+		v-if="vIf"
 		:is="field.$el || 'div'"
 		:label="field.label"
 		:id="field.id"
@@ -26,5 +27,13 @@ const props = defineProps<{
     field: Field
   }>();
 
+const vIf = $computed(() => {
+	if (props.field['v-if'] === undefined) return true;
+	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+	if (typeof props.field['v-if'] === 'string') return !!props.modelValue[props.field['v-if']];
+	if (typeof props.field['v-if'] === 'function') return props.field['v-if']!(props.modelValue[props.field.id || ''], props.modelValue);
+	return true;
+});
+
 const emits = defineEmits(['update:modelValue']);
 </script>

package/src/components/form/BglForm.vue

@@ -1,11 +1,11 @@
 <template>
-	<form @submit.prevent="runSubmit">
+	<form ref="form" @submit.prevent="runSubmit">
 		<BglField
 			v-for="(field, i) in schema" :key="field.id || `${i  }p`" :field="field" :modelValue="data"
-			@update:modelValue="($event: any) => field.id ? data[field.id] = $event : ''"
+			@update:modelValue="($event)=>updateModelValue($event, field?.id || '')"
 		/>
 		<Btn
-			class="del-top" v-if="modelValue?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
+			class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete"
 			color="red" thin
 		/>
 		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
@@ -16,39 +16,41 @@
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
 import { Btn, useModal, BglField } from '@bagelink/vue';
 import { type BglFormSchemaT } from '@bagelink/vue';
 
 const { showModal } = useModal();
 
+const data = defineModel<Record<string, any>>('modelValue', { default: {} });
+
 const props = defineProps<{
-	modelValue?: any;
 	schema: BglFormSchemaT;
 	onDelete?: ((id: string) => void);
 	onSubmit?: ((data: any) => void);
 }>();
 
-const emits = defineEmits(['update:modelValue', 'submit']);
-const handleEmit = (val: any) => emits('update:modelValue', val);
-let data = $ref({
-	...props.modelValue,
-});
+const form = $ref<HTMLFormElement>();
+
+const validateForm = () => form?.reportValidity?.();
+
+const updateModelValue = (val: any, fieldID: string) => {
+	if (!fieldID || !data.value) return;
+	data.value[fieldID] = val;
+};
+
+defineExpose({ validateForm });
+
+const clearForm = () => Object.assign(data, {});
+const emits = defineEmits(['submit']);
+
 const runSubmit = () => {
+	validateForm();
 	emits('submit', data);
 	clearForm();
 };
 
-const clearForm = () => data = {};
-
 const i18nT = (val: string) => val;
 
-watch(
-	() => data,
-	() => handleEmit,
-	{ immediate: true },
-);
-
 const runDelete = () => {
 	showModal(
 		{
@@ -58,7 +60,7 @@ const runDelete = () => {
 				{
 					value: 'Confirm',
 					color: 'red',
-					onClick: () => props.onDelete?.(data.id),
+					onClick: () => props.onDelete?.(data.value.id),
 				},
 				{ value: 'Cancel', color: 'gray' },
 			],

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

@@ -1,143 +1,101 @@
 <template>
-  <div
-    class="bagel-input checkbox"
-    :title="field.description"
-    :class="{ small: small, 'no-edit': !editMode }"
-  >
-    <label :for="field.id">
-      {{ field.label }}
-    </label>
-    <label class="switch">
-      <input
-        :id="field.id"
-        type="checkbox"
-        v-model="inputVal"
-        :class="{ 'no-edit': !editMode }"
-      />
-      <span class="slider round" />
-    </label>
-  </div>
+	<div
+		class="bagel-input bgl-checkbox"
+		:title="title"
+		:class="{ small: small, 'no-edit': !editMode }"
+	>
+		<input
+			:id="id"
+			type="checkbox"
+			v-model="inputVal"
+			:class="{ 'no-edit': !editMode }"
+		>
+		<svg
+			xmlns="http://www.w3.org/2000/svg"
+			height="24" viewBox="0 -960 960 960"
+			width="24"
+		>
+			<path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>
+		<label :for="id">
+			{{ label }}
+		</label>
+	</div>
 </template>
 
 <script setup lang="ts">
-import { watch, ref, onMounted } from "vue";
-import { BagelField } from "@bagelink/vue";
-
-const emits = defineEmits(["update:modelValue"]);
-const props = withDefaults(
-  defineProps<{
-    field: BagelField;
-    modelValue: any;
+withDefaults(
+	defineProps<{
+    label: string;
+    id?: string;
+    title?: string;
     editMode?: boolean;
     small?: boolean;
   }>(),
-  {
-    editMode: true,
-  }
+	{
+		editMode: true,
+		id: Math.random().toString(36).substring(7),
+	},
 );
 
-const inputVal = ref(false);
-watch(inputVal, (newVal) => {
-  if (newVal === undefined) return;
-  emits("update:modelValue", newVal);
-});
-watch(
-  () => props.modelValue,
-  (newVal) => {
-    if (inputVal.value !== newVal) inputVal.value = newVal;
-  }
-);
-onMounted(() => (inputVal.value = !!props.modelValue));
+const inputVal = defineModel<boolean>('modelValue', { default: false });
 </script>
+<style>
+:root {
+  --bgl-white: #fff;
+  --input-height: 40px;
+  --input-border-radius: 7px;
+  --bgl-transition: all 200ms ease;
+  --bgl-primary: #19b8ea;
 
+}
+</style>
 <style scoped>
-.no-edit {
-  pointer-events: none;
+.bgl-checkbox{
+position: relative;
 }
-
-.radio-wrap p {
-  display: inline-block;
-  color: var(--input-bg);
-  font-size: var(--input-font-size);
-  margin-inline-end: 10px;
+.bgl-checkbox input[type=checkbox]{
+  display: none;
 }
-
-.radio-wrap label {
-  padding: 3px 5px;
-  display: inline-block;
-  border-radius: var(--input-border-radius);
-  font-size: var(--input-font-size);
-  background: var(--input-bg);
-  color: var(--bgl-black);
-  text-align: center;
-  margin: 8px 5px;
+.bgl-checkbox label{
+  padding-inline-start: calc(var(--input-height) / 2 + 0.25rem);
+  transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
 }
-
-.bagel-input .radio-wrap label::after {
-  background: transparent;
+.bgl-checkbox:hover{
+  filter: brightness(90%);
 }
-
-.radio-wrap input {
-  display: none;
+.bgl-checkbox:active{
+  filter: var(--bgl-active-filter);
 }
-
-.radio-wrap input:checked:checked + label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
-}
-
-.checkbox {
-  position: relative;
-}
-
-.switch {
-  position: relative;
-  display: inline-block;
-  height: calc(var(--input-height) / 2);
-  width: var(--input-height);
-  border-radius: var(--input-height);
-}
-
-.switch input {
-  opacity: 0;
-  width: 0;
-  height: 0;
-}
-
-.slider {
-  position: absolute;
-  cursor: pointer;
-  top: 0;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: var(--input-bg);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
-  border-radius: calc(var(--input-height) / 2);
-  box-shadow: inset 0 0 10px #00000020;
-}
-
-.slider:before {
-  position: absolute;
+.bgl-checkbox label::before{
   content: "";
-  height: calc(var(--input-height) / 2 - 4px);
-  width: calc(var(--input-height) / 2 - 4px);
-  left: 2px;
-  bottom: 2px;
-  border-radius: 50%;
+  width: calc(var(--input-height) / 2.5);
+  height: calc(var(--input-height) / 2.5);
   background: var(--bgl-white);
-  -webkit-transition: 0.4s;
-  transition: 0.4s;
+  display: inline-block;
+  position: absolute;
+  margin-top: 0.25rem;
+  inset-inline-start: 0;
+  border-radius: calc(var(--input-border-radius) / 2) ;
+  border: var(--bgl-primary) 1px solid;
 }
 
-input:checked + .slider {
+input:checked ~ label::before{
   background: var(--bgl-primary);
 }
-
-input:checked + .slider:before {
-  transform: translateX(calc(var(--input-height) / 2));
+.bgl-checkbox svg{
+  width: calc(var(--input-height) / 2.5);
+  height: calc(var(--input-height) / 2.5);
+  position: absolute;
+  inset-inline-start: 0.05rem;
+  margin-top: 0.3rem;
+  z-index: 2;
+  fill: var(--bgl-white);
+  opacity: 0;
+  pointer-events: none;
+}
+input:checked ~ svg{
+  opacity: 1;
 }
 </style>

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

@@ -3,16 +3,17 @@
 		<label>
 			{{ label }}
 		</label>
-		<div @click="browse" @dragover="dragenter" @drop="drop" @dragleave="dragleave" class="fileUploadWrap" :class="{fileDropZone: !files.length, dragover: isDragOver}">
+		<div @click="browse" @dragover="dragover" @drop="drop" @dragleave="dragleave" class="fileUploadWrap"
+			:class="{ fileDropZone: !files.length, dragover: isDragOver }">
 			<div v-if="files.length && !multiple">
 				<div class="imagePreviewWrap">
-					<img class="preview" :src="fileToUrl(files[0])" alt="" >
+					<img class="preview" :src="fileToUrl(files[0])" alt="">
 				</div>
 				<div class="previewName">
 					<p class="no-margin">
-						{{files[0].name}}
+						{{ files[0].name }}
 					</p>
-					<Btn thin @click.stop="removeFile(files[0])" flat icon="delete" color="red"/>
+					<Btn thin @click.stop="removeFile(files[0])" flat icon="delete" color="red" />
 				</div>
 			</div>
 		</div>
@@ -22,7 +23,7 @@
 <script setup lang="ts">
 import { Btn } from '@bagelink/vue';
 
-const props = defineProps<{label:string, multiple?: boolean}>();
+const props = defineProps<{ label: string, multiple?: boolean }>();
 const files = $ref<File[]>([]);
 const fileQueue = $ref<File[]>([]);
 let isDragOver = $ref(false);
@@ -33,14 +34,13 @@ const preventDefault = (e: Event) => {
 };
 
 const fileToUrl = (file: File) => URL.createObjectURL(file);
-const removeFile = (file:File) => {
+const removeFile = (file: File) => {
 	const index = files.indexOf(file);
 	files.splice(index, 1);
 };
 const flushQueue = () => {
-	fileQueue.forEach((file:File, i) => {
+	fileQueue.forEach((file: File, i) => {
 		if (props.multiple) { if (!files.includes(file)) files.push(file); } else files.splice(0, 1, file);
-		console.log(files);
 		fileQueue.splice(i, 1);
 	});
 };
@@ -63,7 +63,7 @@ const dragleave = (e: DragEvent) => {
 	else isDragOver = false;
 };
 
-const dragenter = (e: DragEvent) => {
+const dragover = (e: DragEvent) => {
 	preventDefault(e);
 	if (e.dataTransfer) isDragOver = true;
 	else isDragOver = false;
@@ -79,52 +79,59 @@ const drop = (e: DragEvent) => {
 
 <style scoped>
 .bagel-input .fileUploadWrap {
-  outline: 1px solid var(--border-color);
-  border-radius: var(--input-border-radius);
-  text-align: center;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  position: relative;
-  height: 132px;
-  font-size: var(--input-font-size);
+	outline: 1px solid var(--border-color);
+	border-radius: var(--input-border-radius);
+	text-align: center;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	position: relative;
+	height: 132px;
+	font-size: var(--input-font-size);
 }
-.previewName{
-  padding: 0.5rem;
-  text-align: start;
-  color: var(--input-color);
-  display: grid;
-  grid-template-columns: 1fr 22px;
-  align-items: center;
+
+.previewName {
+	padding: 0.5rem;
+	text-align: start;
+	color: var(--input-color);
+	display: grid;
+	grid-template-columns: 1fr 22px;
+	align-items: center;
 
 }
-.previewName p{
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+
+.previewName p {
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
 }
-.imagePreviewWrap{
-  background: var(--input-bg);
-  border-radius: var(--input-border-radius);
-  height: 90px;
-  padding: 5px;
+
+.imagePreviewWrap {
+	background: var(--input-bg);
+	border-radius: var(--input-border-radius);
+	height: 90px;
+	padding: 5px;
 }
 
 img.preview {
-  height: 80px;
-  border-radius: var(--input-border-radius);
-  object-fit: contain;
+	height: 80px;
+	border-radius: var(--input-border-radius);
+	object-fit: contain;
 }
-.fileUploadWrap.dragover, .fileUploadWrap:hover{
-  box-shadow: inset 0 0 10px #00000012;
+
+.fileUploadWrap.dragover,
+.fileUploadWrap:hover {
+	box-shadow: inset 0 0 10px #00000012;
 }
-.bagel-input .fileUploadWrap.fileDropZone{
-  background: var(--input-bg);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color:var(--bgl-gray);
+
+.bagel-input .fileUploadWrap.fileDropZone {
+	background: var(--input-bg);
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
 }
+
 .bagel-input .fileUploadWrap.fileDropZone:after {
-  content: "Drop files here or click to upload";
+	content: "Drop files here or click to upload";
 }
 </style>