@bagelink/vue 0.0.25 → 0.0.32

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

@@ -0,0 +1,143 @@
+<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>
+</template>
+
+<script setup lang="ts">
+import { watch, ref, onMounted } from 'vue';
+import { BagelField } from '@/types';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(
+	defineProps<{
+		field: BagelField;
+		modelValue: any;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		editMode: true,
+	},
+);
+
+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));
+</script>
+
+<style scoped>
+.no-edit {
+	pointer-events: none;
+}
+
+.radio-wrap p {
+	display: inline-block;
+	color: var(--input-bg);
+	font-size: var(--input-font-size);
+	margin-inline-end: 10px;
+}
+
+.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;
+	cursor: pointer;
+	user-select: none;
+}
+
+.bagel-input .radio-wrap label::after {
+	background: transparent;
+}
+
+.radio-wrap input {
+	display: none;
+}
+
+.radio-wrap input:checked:checked + label {
+	background: var(--bgl-blue);
+	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;
+	content: '';
+	height: calc(var(--input-height) / 2 - 4px);
+	width: calc(var(--input-height) / 2 - 4px);
+	left: 2px;
+	bottom: 2px;
+	border-radius: 50%;
+	background: var(--bgl-white);
+	-webkit-transition: 0.4s;
+	transition: 0.4s;
+}
+
+input:checked + .slider {
+	background: var(--bgl-blue);
+}
+
+input:checked + .slider:before {
+	transform: translateX(calc(var(--input-height) / 2));
+}
+</style>

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

@@ -0,0 +1,69 @@
+<template>
+	<label class="primary-checkbox">
+		<input type="checkbox" v-model="val" >
+		<span>
+			<MaterialIcon icon="check" />
+		</span>
+	</label>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { MaterialIcon } from '@/components';
+
+const props = defineProps({
+	modelValue: Boolean,
+});
+
+const emits = defineEmits(['update:modelValue']);
+
+let val = $ref<boolean>();
+
+watch(
+	() => props.modelValue,
+	(v: boolean) => {
+		if (v === undefined || v === val) return;
+		val = v;
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => val,
+	(v) => emits('update:modelValue', v),
+);
+</script>
+
+<style scoped>
+.primary-checkbox input {
+	display: none;
+}
+.primary-checkbox {
+	margin-top: 8px;
+}
+.primary-checkbox span {
+	display: flex;
+	padding-top: 1px;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-white);
+	border-radius: 100%;
+	width: 26px;
+	height: 26px;
+	background: white;
+	border: 4px solid var(--bgl-gray-light);
+	cursor: pointer;
+	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 {
+	background: var(--bgl-blue);
+	border: none;
+}
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+	<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"
+			>
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { type BagelField } from '@/types';
+
+const emits = defineEmits(['update:modelValue']);
+const props = withDefaults(
+	defineProps<{
+		field: BagelField;
+		modelValue: any;
+		editMode?: boolean;
+		small?: boolean;
+		required?: boolean;
+		nativeInputAttrs?: Record<string, any>;
+	}>(),
+	{
+		editMode: true,
+	},
+);
+const inputVal = $ref<string>(props.modelValue);
+
+watch(
+	() => inputVal,
+	(newVal) => emits('update:modelValue', newVal),
+);
+</script>

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

@@ -0,0 +1,133 @@
+<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 '@/types';
+
+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/DateInput.vue

@@ -0,0 +1,49 @@
+<template>
+	<div class="bagel-input" :title="field.description" :class="{ small: small }">
+		<label v-if="field.label">
+			{{ field.label }}
+		</label>
+		<input
+			type="date"
+			v-model="date"
+			@update:modelValue="handleInput"
+			:placeholder="field.placeholder || field.label"
+			class="date-picker"
+			:disabled="!editMode"
+			:enableTimePicker="false"
+			:textInputOptions="{ format: 'yyyy-MM-dd' }"
+		>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import type { BagelField } from '@/types/BagelField';
+
+const props = withDefaults(
+	defineProps<{
+		field: BagelField;
+		modelValue: any;
+		editMode?: boolean;
+		small?: boolean;
+	}>(),
+	{
+		editMode: true,
+		small: false,
+	},
+);
+
+const date = ref(props.modelValue);
+
+const emit = defineEmits(['update:modelValue']);
+
+const handleInput = () => {
+	emit('update:modelValue', date.value.toISOString().split('T').shift());
+};
+</script>
+
+<style scoped>
+.date-picker {
+	/* padding-inline-start: 10px; */
+}
+</style>

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

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

@@ -0,0 +1,51 @@
+<template>
+	<div class="bagel-input" :title="description" :class="{ small: small }">
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<input
+			:value="modelValue"
+			:title="formatDuration(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
+import { bagelApp } from '../../../index';
+// @ts-ignore TODO: remove this
+import { formatDuration } from '../../../composables';
+
+const emits = defineEmits(['update:modelValue']);
+// @ts-ignore TODO: remove this
+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/DynamicLinkField.vue

@@ -0,0 +1,140 @@
+<template>
+	<div class="bagel-input" :class="{ small: small }">
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+
+		<input
+			@keydown.enter="handleEnter"
+			autocomplete="off"
+			@click="showList = true"
+			name="link-input"
+			v-model="selectedItem"
+			@focus="initList"
+			@input="handleInput"
+			:disabled="!editMode"
+		>
+
+		<div
+			class="custom-select"
+			name="link-input"
+			:class="{ 'open-select': showList && linkOptions.length > 0 }"
+		>
+			<div class="custom-select-drop">
+				<div
+					v-for="item in linkOptions"
+					:key="formatString(item.value, 'pascal')"
+					@click.stop="handleSelect(item)"
+				>
+					{{
+						useId || entity === 'Entity'
+							? item.value
+							: item.label || item.description || item.value
+					}}
+				</div>
+			</div>
+		</div>
+	</div>
+</template>
+
+<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 } from '../../../index';
+
+const props = withDefaults(
+	defineProps<{
+		label?: string;
+		modelValue: any;
+		useId?: false;
+		bagelApp?: any;
+		entity: string;
+		editMode: boolean;
+		filters?: any;
+		small?: boolean;
+	}>(),
+	{
+		label: '',
+		useId: false,
+		filters: {},
+		bagelApp,
+	},
+);
+const showList = ref(false);
+const linkOptions = ref<any>([]);
+const item = ref<ListItem>();
+const emits = defineEmits(['update:modelValue', 'selected']);
+const selectedItem = ref<any>();
+
+function handleSelect(item: ListItem) {
+	showList.value = false;
+	selectedItem.value = item;
+	if (props.useId) {
+		selectedItem.value = item.value;
+	} else {
+		selectedItem.value = item.label || item.description || item.value;
+	}
+
+	emits('update:modelValue', item.value);
+	emits('selected');
+}
+
+async function getLinkOptions(inputString: string) {
+	linkOptions.value = await props.bagelApp.entity.getLinkedFieldList({
+		entity: props.entity,
+		txt: inputString,
+		reference_entity: '',
+		filters: props.filters,
+	});
+}
+
+interface ListItem {
+	value: string;
+	label?: string;
+	description?: string;
+}
+
+// @ts-ignore TODO: remove this
+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(() => {
+	selectedItem.value = props.modelValue;
+	document.addEventListener('click', handleClick);
+});
+</script>
+
+<style scoped></style>