@bagelink/vue 0.0.25 → 0.0.35

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

@@ -0,0 +1,57 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<input
+			:value="modelValue"
+			maxlength="140"
+			type="email"
+			@input="handleInput"
+			:placeholder="bagelApp.translate(placeholder, true)"
+			:class="{ 'no-edit': !editMode }"
+		>
+	</div>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore TODO: remove this Nati
+import { bagelApp } from '../../../index';
+
+const emits = defineEmits(['update:modelValue']);
+// @ts-ignore TODO: remove this Nati
+const props = withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+);
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.value);
+};
+</script>
+
+<style scoped>
+input[type='email'] {
+	direction: ltr;
+}
+
+[dir='rtl'] input[type='email'] {
+	text-align: end;
+}
+</style>

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

@@ -0,0 +1,52 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<input
+			:value="modelValue"
+			type="number"
+			@input="handleInput"
+			:placeholder="bagelApp.translate(placeholder, true)"
+			:class="{ 'no-edit': !editMode }"
+		>
+	</div>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore TODO: remove this Nati
+import { bagelApp } from '../../../index';
+
+const emits = defineEmits(['update:modelValue']);
+// @ts-ignore TODO: remove this Nati
+const props = withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+);
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	let value = parseFloat(el.value);
+	if (isNaN(value)) {
+		value = 0;
+	}
+	emits('update:modelValue', value);
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,53 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<input
+			:value="modelValue"
+			type="number"
+			@input="handleInput"
+			:placeholder="bagelApp.translate(placeholder, true)"
+			:class="{ 'no-edit': !editMode }"
+		>
+	</div>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore TODO: remove this Nati
+import { bagelApp } from '../../../index';
+
+// @ts-ignore TODO: remove this Nati
+const emits = defineEmits(['update:modelValue']);
+// @ts-ignore TODO: remove this Nati
+const props = withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+);
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	let value = parseInt(el.value);
+	if (isNaN(value)) {
+		value = 0;
+	}
+	emits('update:modelValue', value);
+};
+</script>
+
+<style scoped></style>

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

@@ -0,0 +1,55 @@
+<template>
+	<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)"
+			:class="{ 'no-edit': !editMode }"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+// @ts-ignore TODO: remove this Nati
+import { bagelApp } from '../../../index';
+
+const emits = defineEmits(['update:modelValue']);
+// @ts-ignore TODO: remove this Nati
+const props = withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+);
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.value);
+};
+</script>
+
+<style scoped>
+.bagel-input textarea {
+	font-family: monospace;
+}
+
+[dir='rtl'] .bagel-input textarea {
+	direction: ltr;
+}
+</style>

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

@@ -0,0 +1,300 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+
+		<input
+			@keydown.enter="handleEnter"
+			autocomplete="off"
+			@click="openList"
+			name="link-input"
+			v-model="selectedItem"
+			@focus="initList"
+			@input="handleInput"
+			:disabled="!editMode"
+		>
+
+		<div
+			class="custom-select"
+			ref="selectEl"
+			name="link-input"
+			:class="{ 'open-select': showList && linkOptions.length > 0 }"
+		>
+			<Teleport to="#app">
+				<div
+					ref="dropdown"
+					:class="{ 'open-select': showList && linkOptions.length > 0 }"
+					class="custom-select-drop"
+				>
+					<div
+						v-for="option in linkOptions"
+						:key="formatString(option.value, 'pascal')"
+						@click.stop="handleSelect(option)"
+					>
+						<div
+							class="option-label"
+							v-if="option.label"
+						>
+							{{ option.label }}<span>ID: {{ option.value }}</span>
+						</div>
+						<div
+							class="option-label"
+							v-else
+						>
+							ID: {{ option.value }}
+						</div>
+						<div class="option-description">
+							{{ option.description }}
+						</div>
+					</div>
+				</div>
+			</Teleport>
+		</div>
+	</div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, ref } from 'vue';
+import { formatString } from '@/utils/strings';
+
+const props = withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		useId?: false;
+		bagelApp?: any;
+		entity: string;
+		editMode: boolean;
+		filters?: any;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		label: '',
+		useId: false,
+		filters: {},
+		bagelApp: null,
+	},
+);
+const showList = ref(false);
+
+const left = ref('0');
+const top = ref(0);
+const width = ref('0');
+const selectEl = ref<HTMLElement>();
+const dropdown = ref<HTMLElement>();
+const linkOptions = ref<any>([]);
+const item = ref<ListItem>();
+const emits = defineEmits(['update:modelValue', 'selected']);
+const selectedItem = ref<any>();
+let bagel: any;
+
+function handleSelect(item: ListItem) {
+	showList.value = false;
+	selectedItem.value = item;
+	if (props.useId || props.entity === 'Entity') {
+		selectedItem.value = item.value;
+	} else {
+		selectedItem.value = item.label || item.value;
+	}
+
+	emits('update:modelValue', item.value);
+	emits('selected', item.value);
+}
+
+async function getLinkOptions(inputString: string) {
+	linkOptions.value = await bagel.entity.getLinkedFieldList({
+		entity: props.entity,
+		txt: inputString,
+		reference_entity: '',
+		filters: props.filters,
+	});
+}
+
+function hideDrop(e: WheelEvent) {
+	const dropRect = dropdown.value?.getBoundingClientRect?.() ||
+		({
+			left: 0,
+			right: 0,
+		} as DOMRect);
+	if (e.clientX < dropRect.left || e.clientX > dropRect.right) {
+		showList.value = false;
+	}
+}
+
+function openList() {
+	setPosition();
+	showList.value = true;
+}
+
+// @ts-ignore TODO: remove this Nati
+function setPosition(e?: WheelEvent) {
+	const elInfo = selectEl.value?.getBoundingClientRect?.() ||
+		({
+			top: 0,
+			left: 0,
+			bottom: 0,
+			width: 0,
+		} as DOMRect);
+
+	top.value = elInfo.bottom;
+
+	left.value = `${elInfo.left}px`;
+	width.value = `${elInfo.width}px`;
+	const dropRect = dropdown.value?.getBoundingClientRect?.() ||
+		({
+			height: 0,
+		} as DOMRect);
+
+	if (window.innerHeight - elInfo.bottom < dropRect.height) {
+		top.value = elInfo.top - dropRect.height;
+	}
+}
+
+interface ListItem {
+	value: string;
+	label?: string;
+	description?: string;
+}
+
+// @ts-ignore TODO: remove this Nati
+const initialized = ref(false);
+
+async function initList(e: Event) {
+	await getLinkOptions(getElValue(e));
+	showList.value = true;
+}
+
+function getElValue(e: Event) {
+	const el = e.target as HTMLInputElement;
+	return el.value.trim();
+}
+
+function handleEnter(e: Event) {
+	emits('update:modelValue', getElValue(e));
+	emits('selected');
+	showList.value = false;
+}
+
+function handleClick(e: any) {
+	const { target } = e;
+	if (target.name != 'link-input' && showList.value == true) {
+		showList.value = false;
+		emits('update:modelValue', item.value);
+		emits('selected');
+	}
+	// showList.value = false
+}
+
+const handleInput = async (e: Event) => {
+	showList.value = true;
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.value);
+	await getLinkOptions(el.value);
+};
+onMounted(() => {
+	bagel = props.bagelApp;
+	setPosition();
+	window.addEventListener('wheel', hideDrop);
+	selectedItem.value = props.modelValue;
+	document.addEventListener('click', handleClick);
+});
+</script>
+
+<style scoped>
+.custom-select {
+	position: relative;
+	font-size: var(--input-font-size);
+}
+
+.custom-select .input {
+	width: 100%;
+	cursor: pointer;
+	background: var(--input-bg);
+	min-height: var(--input-height);
+	border: none;
+	border-radius: var(--input-border-radius);
+	color: var(--input-color);
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	text-align: start;
+	margin-inline-end: 20px;
+	justify-content: center;
+}
+
+.custom-select .input:after {
+	content: 'keyboard_arrow_down';
+	font-family: 'Material Symbols Outlined', serif;
+	position: absolute;
+	top: calc(var(--input-height) / 2 - 10px);
+	font-size: calc(var(--input-font-size) * 1.5);
+	right: calc(var(--input-height) / 4);
+	height: 100%;
+}
+
+.option-label {
+	font-size: var(--input-font-size);
+	/*color: var(--input-color);*/
+}
+
+.option-description {
+	font-size: var(--input-font-size);
+	color: var(--input-color);
+}
+
+[dir='rtl'] .custom-select .input:after {
+	right: unset;
+	left: calc(var(--input-font-size) / 2);
+}
+
+/*[dir='rtl'] .custom-select-drop {*/
+/*    right: v-bind(left);*/
+/*    left: unset;*/
+/*}*/
+[dir='rtl'] .custom-select-drop {
+	inset-inline-end: v-bind(left);
+	inset-inline-start: unset;
+}
+
+.custom-select-drop {
+	position: fixed;
+	cursor: pointer;
+	inset-inline-start: v-bind(left);
+	top: v-bind('`${top}px`');
+	box-sizing: border-box;
+	width: v-bind(width);
+	background: var(--bgl-white);
+	box-shadow: 0 0 10px 0 var(--bgl-shadow);
+	border-radius: 10px;
+	z-index: 10000;
+	overflow-y: auto;
+	opacity: 0;
+	pointer-events: none;
+	max-height: 0;
+}
+
+.open-select.custom-select-drop {
+	opacity: 1;
+	max-height: 150px;
+	pointer-events: all;
+}
+
+.custom-select-drop>* {
+	padding: 0.5rem 0.75rem;
+}
+
+.custom-select-drop>*:hover {
+	background: var(--bgl-blue-light);
+}
+
+.custom-select-drop>*:active {
+	filter: var(--bgl-hover-filter);
+}
+</style>

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

@@ -0,0 +1,91 @@
+<template>
+	<div
+		class="bagel-input"
+		:class="{ small: small }"
+		:title="field.description"
+		v-if="field.id"
+	>
+		<label :for="field.id">
+			{{ field.label }}
+			<input
+				:id="field.id"
+				v-model="inputVal"
+				:type="inputType"
+				:placeholder="field.placeholder || field.label"
+				:class="{ 'no-edit': !editMode }"
+				:required="required"
+				:pattern="pattern"
+				v-bind="nativeInputAttrs"
+			>
+		</label>
+		<MaterialIcon
+			@click="showPassword()"
+			:icon="seePassword ? 'visibility' : 'visibility_off'"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, computed } from 'vue';
+import { BagelField } from '@/types/BagelField';
+import { MaterialIcon } from '@/components';
+
+const emits = defineEmits(['update:modelValue']);
+let seePassword = $ref<boolean>(false);
+const inputType = computed(() => (seePassword ? 'text' : 'password'));
+
+function showPassword() {
+	seePassword = !seePassword;
+}
+const props = withDefaults(
+	defineProps<{
+		field: BagelField;
+		modelValue: any;
+		editMode?: boolean;
+		small?: boolean;
+		required?: boolean;
+		pattern?: string;
+		nativeInputAttrs?: Record<string, any>;
+	}>(),
+	{
+		editMode: true,
+	},
+);
+const inputVal = ref<string>(props.modelValue);
+// watch(
+// 	() => props.modelValue,
+// 	(newVal) => {
+// 		if (inputVal.value !== newVal) inputVal.value = newVal;
+// 	},
+// );
+watch(inputVal, (newVal) => emits('update:modelValue', newVal));
+// onMounted(() => (inputVal.value = props.modelValue));
+</script>
+
+<style scoped>
+.icon-font {
+	position: absolute;
+	cursor: pointer;
+	z-index: 2;
+	color: var(--bgl-gray);
+	inset-inline-end: 0.75rem;
+	inset-block-start: calc(var(--input-height) / 2 + 3px);
+	transition: var(--bgl-transition);
+	user-select: none;
+	border-radius: 100%;
+	height: 24px;
+	width: 24px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+}
+
+.icon-font:hover {
+	background: var(--bgl-white);
+}
+
+.icon-font:active {
+	background: var(--bgl-white);
+	filter: brightness(90%);
+}
+</style>

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

@@ -0,0 +1,92 @@
+<template>
+	<div
+		class="bagel-input"
+		:title="description"
+		:class="{ small: small }"
+	>
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<div class="password-input-wrap">
+			<input
+				:value="modelValue"
+				:type="inputType"
+				@input="handleInput"
+				:placeholder="placeholder"
+				:class="{ 'no-edit': !editMode }"
+			>
+			<div
+				class="icon-font password-icon"
+				@mousedown="toggleInputType"
+			>
+				visibility
+			</div>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(['update:modelValue']);
+withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		description: '',
+		editMode: true,
+		placeholder: '',
+		label: '',
+	},
+);
+
+let inputType = $ref('password');
+const handleInput = (e: Event) => {
+	const el = e.target as HTMLInputElement;
+	emits('update:modelValue', el.value);
+};
+
+function toggleInputType() {
+	inputType = 'text';
+	document.addEventListener(
+		'mouseup',
+		() => {
+			inputType = 'password';
+		},
+		{ once: true },
+	);
+}
+</script>
+
+<style scoped>
+.password-input-wrap {
+	position: relative;
+}
+
+.password-icon {
+	position: absolute;
+	top: calc(var(--input-height) / 2 - 10px);
+	right: calc(var(--input-height) / 2 - 10px);
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	user-select: none;
+}
+
+.password-icon:hover {
+	filter: var(--bgl-hover-filter);
+	color: var(--bgl-blue);
+}
+
+.password-icon:active {
+	filter: var(--bgl-active-filter);
+}
+
+[dir='rtl'] .password-icon {
+	left: calc(var(--input-height) / 2 - 10px);
+	right: unset;
+}
+</style>