@bagelink/vue 0.0.232-beta.0 → 0.0.233-beta.0

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

@@ -1,137 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="field.description"
-		:class="{ small: small }"
-	>
-		<label v-if="field.label">
-			{{ field.label }}
-		</label>
-		<div class="flex gap-3">
-			<input
-				:value="modelValue"
-				type="number"
-				@input="handleInput"
-				:placeholder="placeholder"
-				:class="{ 'no-edit': !editMode }"
-			>
-			<p class="currency">
-				{{
-					currencies
-						.find((c) => c.symbol === field.currency)?.character || field.currency
-				}}
-			</p>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { BagelField } from '@bagelink/vue';
-
-const emits = defineEmits(['update:modelValue']);
-withDefaults(
-	defineProps<{
-		field: BagelField;
-		modelValue: any;
-
-		placeholder?: string;
-		editMode?: boolean;
-		small?: boolean;
-	}>(),
-	{
-		editMode: true,
-	},
-);
-const handleInput = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	let value = parseFloat(el.value);
-	if (Number.isNaN(value)) {
-		value = 0;
-	}
-	emits('update:modelValue', value);
-};
-
-const currencies = [
-	{ name: 'United Arab Emirates Dirham', symbol: 'AED', character: 'د.إ' },
-	{ name: 'Afghan Afghani', symbol: 'AFN', character: '؋' },
-	{ name: 'Albanian Lek', symbol: 'ALL', character: 'L' },
-	{ name: 'Armenian Dram', symbol: 'AMD', character: '֏' },
-	{ name: 'Netherlands Antillean Guilder', symbol: 'ANG', character: 'ƒ' },
-	{ name: 'Angolan Kwanza', symbol: 'AOA', character: 'Kz' },
-	{ name: 'Argentine Peso', symbol: 'ARS', character: '$' },
-	{ name: 'Australian Dollar', symbol: 'AUD', character: '$' },
-	{ name: 'Aruban Florin', symbol: 'AWG', character: 'ƒ' },
-	{ name: 'Azerbaijani Manat', symbol: 'AZN', character: '₼' },
-	{
-		name: 'Bosnia-Herzegovina Convertible Mark',
-		symbol: 'BAM',
-		character: 'KM',
-	},
-	{ name: 'Barbadian Dollar', symbol: 'BBD', character: '$' },
-	{ name: 'Bangladeshi Taka', symbol: 'BDT', character: '৳' },
-	{ name: 'Bulgarian Lev', symbol: 'BGN', character: 'лв' },
-	{ name: 'Bahraini Dinar', symbol: 'BHD', character: 'ب.د' },
-	{ name: 'Burundian Franc', symbol: 'BIF', character: 'FBu' },
-	{ name: 'Bermudan Dollar', symbol: 'BMD', character: '$' },
-	{ name: 'Brunei Dollar', symbol: 'BND', character: '$' },
-	{ name: 'Bolivian Boliviano', symbol: 'BOB', character: 'Bs.' },
-	{ name: 'Brazilian Real', symbol: 'BRL', character: 'R$' },
-	{ name: 'Bahamian Dollar', symbol: 'BSD', character: '$' },
-	{ name: 'Bitcoin', symbol: '₿', character: '₿' },
-	{ name: 'Bhutanese Ngultrum', symbol: 'BTN', character: 'Nu.' },
-	{ name: 'Botswanan Pula', symbol: 'BWP', character: 'P' },
-	{ name: 'Belarusian Ruble', symbol: 'BYN', character: 'Br' },
-	{ name: 'Belize Dollar', symbol: 'BZD', character: '$' },
-	{ name: 'Canadian Dollar', symbol: 'CAD', character: '$' },
-	{ name: 'Congolese Franc', symbol: 'CDF', character: 'FC' },
-	{ name: 'Swiss Franc', symbol: 'CHF', character: 'Fr' },
-	{ name: 'Chilean Peso', symbol: 'CLP', character: '$' },
-	{ name: 'Chinese Yuan', symbol: 'CNY', character: '¥' },
-	{ name: 'Colombian Peso', symbol: 'COP', character: '$' },
-	{ name: 'Costa Rican Colón', symbol: 'CRC', character: '₡' },
-	{ name: 'Cuban Convertible Peso', symbol: 'CUC', character: '$' },
-	{ name: 'Cuban Peso', symbol: 'CUP', character: '$' },
-	{ name: 'Cape Verdean Escudo', symbol: 'CVE', character: '$' },
-	{ name: 'Czech Republic Koruna', symbol: 'CZK', character: 'Kč' },
-	{ name: 'Djiboutian Franc', symbol: 'DJF', character: 'Fdj' },
-	{ name: 'Danish Krone', symbol: 'DKK', character: 'kr' },
-	{ name: 'Dominican Peso', symbol: 'DOP', character: '$' },
-	{ name: 'Algerian Dinar', symbol: 'DZD', character: 'د.ج' },
-	{ name: 'Egyptian Pound', symbol: 'EGP', character: '£' },
-	{ name: 'Eritrean Nakfa', symbol: 'ERN', character: 'Nfk' },
-	{ name: 'Ethiopian Birr', symbol: 'ETB', character: 'Br' },
-	{ name: 'Euro', symbol: 'EUR', character: '€' },
-	{ name: 'Fijian Dollar', symbol: 'FJD', character: '$' },
-	{ name: 'Falkland Islands Pound', symbol: 'FKP', character: '£' },
-	{ name: 'British Pound Sterling', symbol: 'GBP', character: '£' },
-	{ name: 'Georgian Lari', symbol: 'GEL', character: 'ლ' },
-	{ name: 'Guernsey Pound', symbol: 'GGP', character: '£' },
-	{ name: 'Ghanaian Cedi', symbol: 'GHS', character: '₵' },
-	{ name: 'Gibraltar Pound', symbol: 'GIP', character: '£' },
-	{ name: 'Gambian Dalasi', symbol: 'GMD', character: 'D' },
-	{ name: 'Guinean Franc', symbol: 'GNF', character: 'FG' },
-	{ name: 'Guatemalan Quetzal', symbol: 'GTQ', character: 'Q' },
-	{ name: 'Guyanaese Dollar', symbol: 'GYD', character: '$' },
-	{ name: 'Hong Kong Dollar', symbol: 'HKD', character: '$' },
-	{ name: 'Honduran Lempira', symbol: 'HNL', character: 'L' },
-	{ name: 'Croatian Kuna', symbol: 'HRK', character: 'kn' },
-	{ name: 'Haitian Gourde', symbol: 'HTG', character: 'G' },
-	{ name: 'Hungarian Forint', symbol: 'HUF', character: 'Ft' },
-	{ name: 'Indonesian Rupiah', symbol: 'IDR', character: 'Rp' },
-	{ name: 'Israeli New Shekel', symbol: 'ILS', character: '₪' },
-	{ name: 'Manx pound', symbol: 'IMP', character: '£' },
-	{ name: 'Indian Rupee', symbol: 'INR', character: '₹' },
-	{ name: 'Iraqi Dinar', symbol: 'IQD', character: 'ع.د' },
-	{ name: 'Iranian Rial', symbol: 'IRR', character: '﷼' },
-	{ name: 'Icelandic Króna', symbol: 'ISK', character: 'kr' },
-	{ name: 'Jersey Pound', symbol: 'JEP', character: '£' },
-];
-</script>
-
-<style scoped>
-.currency {
-	font-size: calc(var(--input-font-size) * 1.4);
-	margin-inline-start: -50px;
-	line-height: 0px;
-}
-</style>

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

@@ -1,49 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="description"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-		<!-- :placeholder="bagelApp.translate(placeholder, true)" -->
-		<input
-			:value="modelValue?.split('.')[0] || ''"
-			type="datetime-local"
-			@input="handleInput"
-			:placeholder="placeholder"
-			:class="{ 'no-edit': !editMode }"
-		>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-
-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);
-};
-onMounted(() => { });
-</script>
-
-<style scoped></style>

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

@@ -1,55 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="description"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-		<!-- :title="formatDuration(modelValue)" -->
-		<!-- :placeholder="bagelApp.translate(placeholder, true)" -->
-		<input
-			:value="modelValue"
-			:title="modelValue"
-			type="number"
-			@input="handleInput"
-			:placeholder="placeholder"
-			:class="{ 'no-edit': !editMode }"
-		>
-	</div>
-</template>
-
-<script setup lang="ts">
-// TODO: remove this Nati ?
-
-const emits = defineEmits(['update:modelValue']);
-
-// 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/FloatInput.vue

@@ -1,53 +0,0 @@
-<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"
-			:class="{ 'no-edit': !editMode }"
-			:placeholder="placeholder"
-		>
-		<!-- :placeholder="bagelApp.translate(placeholder, true)" -->
-	</div>
-</template>
-
-<script setup lang="ts">
-// TODO: remove this Nati ?
-
-const emits = defineEmits(['update:modelValue']);
-
-// 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

@@ -1,52 +0,0 @@
-<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"
-			:class="{ 'no-edit': !editMode }"
-			:placeholder="placeholder"
-		>
-	</div>
-</template>
-
-<script setup lang="ts">
-// TODO: remove this Nati ?
-
-const emits = defineEmits(['update:modelValue']);
-
-// 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/LinkField.vue

@@ -1,300 +0,0 @@
-<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 '@bagelink/vue';
-
-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>