@bagelink/vue 0.0.32 → 0.0.35

package/src/components/form/PlainInputField.vue

@@ -46,10 +46,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-// @ts-ignore TODO: remove this
-import { formatString } from '../../composables';
-// @ts-ignore TODO: remove this
+
 import LangText from '../translation/LangText.vue';
+import { formatString } from '@/utils/strings';
 
 const props = defineProps<{
 	type: 'text' | 'number' | 'password' | 'email' | 'checkbox' | 'textarea';

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

@@ -83,7 +83,7 @@ onMounted(() => (inputVal.value = !!props.modelValue));
 	display: none;
 }
 
-.radio-wrap input:checked:checked + label {
+.radio-wrap input:checked:checked+label {
 	background: var(--bgl-blue);
 	color: var(--bgl-white);
 }
@@ -133,11 +133,11 @@ onMounted(() => (inputVal.value = !!props.modelValue));
 	transition: 0.4s;
 }
 
-input:checked + .slider {
+input:checked+.slider {
 	background: var(--bgl-blue);
 }
 
-input:checked + .slider:before {
+input:checked+.slider:before {
 	transform: translateX(calc(var(--input-height) / 2));
 }
 </style>

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

@@ -1,6 +1,9 @@
 <template>
 	<label class="primary-checkbox">
-		<input type="checkbox" v-model="val" >
+		<input
+			type="checkbox"
+			v-model="val"
+		>
 		<span>
 			<MaterialIcon icon="check" />
 		</span>
@@ -38,9 +41,11 @@ watch(
 .primary-checkbox input {
 	display: none;
 }
+
 .primary-checkbox {
 	margin-top: 8px;
 }
+
 .primary-checkbox span {
 	display: flex;
 	padding-top: 1px;
@@ -56,13 +61,16 @@ watch(
 	transition: var(--bgl-transition);
 	user-select: none;
 }
+
 .primary-checkbox span:hover {
 	filter: brightness(90%);
 }
+
 .primary-checkbox span:active {
 	filter: brightness(80%);
 }
-.primary-checkbox input:checked + span {
+
+.primary-checkbox input:checked+span {
 	background: var(--bgl-blue);
 	border: none;
 }

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

@@ -1,10 +1,20 @@
 <template>
-	<div class="bagel-input" :class="{ small }" :title="field.description" v-if="field.id">
+	<div
+		class="bagel-input"
+		:class="{ small }"
+		:title="field.description"
+		v-if="field.id"
+	>
 		<label :for="field.id">
 			{{ field.label }}
 			<input
-				:id="field.id" v-model="inputVal" type="color" :placeholder="field.placeholder || field.label"
-				:class="{ 'no-edit': !editMode }" :required="required" v-bind="nativeInputAttrs"
+				:id="field.id"
+				v-model="inputVal"
+				type="color"
+				:placeholder="field.placeholder || field.label"
+				:class="{ 'no-edit': !editMode }"
+				:required="required"
+				v-bind="nativeInputAttrs"
 			>
 		</label>
 	</div>

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="field.description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="field.description"
+		:class="{ small: small }"
+	>
 		<label v-if="field.label">
 			{{ field.label }}
 		</label>
@@ -13,8 +17,8 @@
 			>
 			<p class="currency">
 				{{
-					currencies.find((c) => c.symbol === field.currency)?.character ||
-						field.currency
+					currencies
+						.find((c) => c.symbol === field.currency)?.character || field.currency
 				}}
 			</p>
 		</div>

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="field.description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="field.description"
+		:class="{ small: small }"
+	>
 		<label v-if="field.label">
 			{{ field.label }}
 		</label>
@@ -43,7 +47,9 @@ const handleInput = () => {
 </script>
 
 <style scoped>
+/*
 .date-picker {
-	/* padding-inline-start: 10px; */
+	padding-inline-start: 10px;
 }
+*/
 </style>

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -15,11 +19,11 @@
 
 <script setup lang="ts">
 import { onMounted } from 'vue';
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
 
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const props = withDefaults(
 	defineProps<{
 		description?: string;
@@ -40,7 +44,7 @@ const handleInput = (e: Event) => {
 	const el = e.target as HTMLInputElement;
 	emits('update:modelValue', el.value);
 };
-onMounted(() => {});
+onMounted(() => { });
 </script>
 
 <style scoped></style>

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -15,13 +19,13 @@
 </template>
 
 <script setup lang="ts">
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { formatDuration } from '../../../composables';
 
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const props = withDefaults(
 	defineProps<{
 		description?: string;

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

@@ -1,5 +1,8 @@
 <template>
-	<div class="bagel-input" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -27,9 +30,8 @@
 					@click.stop="handleSelect(item)"
 				>
 					{{
-						useId || entity === 'Entity'
-							? item.value
-							: item.label || item.description || item.value
+						useId || entity === 'Entity' ? item.value
+						: item.label || item.description || item.value
 					}}
 				</div>
 			</div>
@@ -39,9 +41,9 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { formatString } from '../../../composables';
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
 
 const props = withDefaults(
@@ -96,7 +98,7 @@ interface ListItem {
 	description?: string;
 }
 
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const initialized = ref(false);
 
 async function initList(e: Event) {

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -15,11 +19,11 @@
 </template>
 
 <script setup lang="ts">
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
 
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const props = withDefaults(
 	defineProps<{
 		description?: string;

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -14,11 +18,11 @@
 </template>
 
 <script setup lang="ts">
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
 
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const props = withDefaults(
 	defineProps<{
 		description?: string;

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -14,12 +18,12 @@
 </template>
 
 <script setup lang="ts">
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
 
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const props = withDefaults(
 	defineProps<{
 		description?: string;

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -13,11 +17,11 @@
 </template>
 
 <script setup lang="ts">
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 import { bagelApp } from '../../../index';
 
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const props = withDefaults(
 	defineProps<{
 		description?: string;

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -32,10 +36,16 @@
 						:key="formatString(option.value, 'pascal')"
 						@click.stop="handleSelect(option)"
 					>
-						<div class="option-label" v-if="option.label">
+						<div
+							class="option-label"
+							v-if="option.label"
+						>
 							{{ option.label }}<span>ID: {{ option.value }}</span>
 						</div>
-						<div class="option-label" v-else>
+						<div
+							class="option-label"
+							v-else
+						>
 							ID: {{ option.value }}
 						</div>
 						<div class="option-description">
@@ -50,10 +60,7 @@
 
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-// @ts-ignore TODO: remove this
-import { formatString } from '../../../composables';
-// @ts-ignore TODO: remove this
-import { bagelApp as api } from '../../../index';
+import { formatString } from '@/utils/strings';
 
 const props = withDefaults(
 	defineProps<{
@@ -111,8 +118,8 @@ async function getLinkOptions(inputString: string) {
 }
 
 function hideDrop(e: WheelEvent) {
-	const dropRect =		dropdown.value?.getBoundingClientRect?.()
-		|| ({
+	const dropRect = dropdown.value?.getBoundingClientRect?.() ||
+		({
 			left: 0,
 			right: 0,
 		} as DOMRect);
@@ -126,10 +133,10 @@ function openList() {
 	showList.value = true;
 }
 
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 function setPosition(e?: WheelEvent) {
-	const elInfo =		selectEl.value?.getBoundingClientRect?.()
-		|| ({
+	const elInfo = selectEl.value?.getBoundingClientRect?.() ||
+		({
 			top: 0,
 			left: 0,
 			bottom: 0,
@@ -140,8 +147,8 @@ function setPosition(e?: WheelEvent) {
 
 	left.value = `${elInfo.left}px`;
 	width.value = `${elInfo.width}px`;
-	const dropRect =		dropdown.value?.getBoundingClientRect?.()
-		|| ({
+	const dropRect = dropdown.value?.getBoundingClientRect?.() ||
+		({
 			height: 0,
 		} as DOMRect);
 
@@ -156,7 +163,7 @@ interface ListItem {
 	description?: string;
 }
 
-// @ts-ignore TODO: remove this
+// @ts-ignore TODO: remove this Nati
 const initialized = ref(false);
 
 async function initList(e: Event) {
@@ -192,7 +199,7 @@ const handleInput = async (e: Event) => {
 	await getLinkOptions(el.value);
 };
 onMounted(() => {
-	bagel = props.bagelApp || api;
+	bagel = props.bagelApp;
 	setPosition();
 	window.addEventListener('wheel', hideDrop);
 	selectedItem.value = props.modelValue;
@@ -279,15 +286,15 @@ onMounted(() => {
 	pointer-events: all;
 }
 
-.custom-select-drop > * {
+.custom-select-drop>* {
 	padding: 0.5rem 0.75rem;
 }
 
-.custom-select-drop > *:hover {
+.custom-select-drop>*:hover {
 	background: var(--bgl-blue-light);
 }
 
-.custom-select-drop > *:active {
+.custom-select-drop>*:active {
 	filter: var(--bgl-hover-filter);
 }
 </style>

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

@@ -79,9 +79,11 @@ watch(inputVal, (newVal) => emits('update:modelValue', newVal));
 	align-items: center;
 	justify-content: center;
 }
+
 .icon-font:hover {
 	background: var(--bgl-white);
 }
+
 .icon-font:active {
 	background: var(--bgl-white);
 	filter: brightness(90%);

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
@@ -8,10 +12,13 @@
 				:value="modelValue"
 				:type="inputType"
 				@input="handleInput"
-				:placeholder="bagelApp.translate(placeholder, true)"
+				:placeholder="placeholder"
 				:class="{ 'no-edit': !editMode }"
 			>
-			<div class="icon-font password-icon" @mousedown="toggleInputType">
+			<div
+				class="icon-font password-icon"
+				@mousedown="toggleInputType"
+			>
 				visibility
 			</div>
 		</div>
@@ -19,10 +26,6 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-// @ts-ignore TODO: remove this
-import { bagelApp } from '../../../index';
-
 const emits = defineEmits(['update:modelValue']);
 withDefaults(
 	defineProps<{
@@ -41,18 +44,18 @@ withDefaults(
 	},
 );
 
-const inputType = ref('password');
+let inputType = $ref('password');
 const handleInput = (e: Event) => {
 	const el = e.target as HTMLInputElement;
 	emits('update:modelValue', el.value);
 };
 
 function toggleInputType() {
-	inputType.value = 'text';
+	inputType = 'text';
 	document.addEventListener(
 		'mouseup',
 		() => {
-			inputType.value = 'password';
+			inputType = 'password';
 		},
 		{ once: true },
 	);

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

@@ -1,10 +1,21 @@
 <template>
-	<div class="bagel-input" :class="{ small }" :title="field.description" v-if="field.id">
+	<div
+		class="bagel-input"
+		:class="{ small }"
+		:title="field.description"
+		v-if="field.id"
+	>
 		<label :for="field.id">
 			{{ field.label }}
 			<input
-				:id="field.id" v-model="inputVal" type="text" :placeholder="field.placeholder || field.label"
-				:class="{ 'no-edit': !editMode }" :required="required" :pattern="pattern" v-bind="nativeInputAttrs"
+				:id="field.id"
+				v-model="inputVal"
+				type="text"
+				:placeholder="field.placeholder || field.label"
+				:class="{ 'no-edit': !editMode }"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
 			>
 		</label>
 	</div>

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

@@ -1,5 +1,9 @@
 <template>
-	<div class="bagel-input" :title="field.description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="field.description"
+		:class="{ small: small }"
+	>
 		<label v-if="field.label">
 			{{ field.label }}
 		</label>

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

@@ -1,24 +1,26 @@
 <template>
-	<div class="bagel-input" :title="description" :class="{ small: small }">
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
 		<label v-if="label">
 			<LangText :input="label" />
 		</label>
 		<textarea
 			:value="modelValue"
 			@input="handleInput"
-			:placeholder="bagelApp.translate(placeholder, true)"
+			:placeholder="placeholder"
 			:class="{ 'no-edit': !editMode }"
 		/>
 	</div>
 </template>
 
 <script setup lang="ts">
-// @ts-ignore TODO: remove this
-import { bagelApp } from '../../../index';
-
 const emits = defineEmits(['update:modelValue']);
-// @ts-ignore TODO: remove this
-const props = withDefaults(
+
+// const props =
+withDefaults(
 	defineProps<{
 		description?: string;
 		label?: string;

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

@@ -4,7 +4,11 @@
 		:class="{ 'no-edit': !editMode, small: small }"
 		:title="description"
 	>
-		<label v-if="label" for="label" :class="{ active: showList }">
+		<label
+			v-if="label"
+			for="label"
+			:class="{ active: showList }"
+		>
 			<LangText :input="label" />
 		</label>
 
@@ -131,7 +135,7 @@ function hideDrop(e: WheelEvent) {
 watch(
 	() => props.modelValue,
 	() => {
-		if (selectedValue.value !== props.modelValue)		selectedValue.value = props.modelValue;
+		if (selectedValue.value !== props.modelValue) selectedValue.value = props.modelValue;
 	},
 	{ immediate: true },
 );
@@ -235,18 +239,19 @@ onUnmounted(() => {
 	/*transition: var(--bgl-transition);*/
 }
 
-.custom-select-drop > * {
+.custom-select-drop>* {
 	/*transition: var(--bgl-transition); */
 	padding: 0.5rem 0.75rem;
 }
 
-.custom-select-drop > *:hover {
+.custom-select-drop>*:hover {
 	background: var(--bgl-blue-light);
 }
 
-.custom-select-drop > *:active {
+.custom-select-drop>*:active {
 	filter: var(--bgl-hover-filter);
 }
+
 .bagel-input label {
 	margin-bottom: 0;
 }

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

@@ -47,9 +47,7 @@
 								no-label
 								:field-meta="field"
 								:bagel-app="bagel"
-								@update:modelValue="(value: any) =>
-									handleUpdateModelValue(value, index, field.fieldname)
-									"
+								@update:modelValue="(value: any) => handleUpdateModelValue(value, index, field.fieldname)"
 								:model-value="row[field.fieldname]"
 							/>
 						</div>