@bagelink/vue 0.0.25 → 0.0.32

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

@@ -0,0 +1,70 @@
+<template>
+	<div class="bagel-input" :title="description" :class="{ small: small }">
+		<label v-if="label">
+			<LangText :input="label" />
+		</label>
+		<span class="character-limit" v-if="showCharacterLimit">
+			{{ modelValue?.length }}
+			{{ nativeInputAttrs?.maxlength ? `/${nativeInputAttrs.maxlength}` : '' }}
+		</span>
+		<textarea
+			:value="modelValue"
+			@input="handleInput"
+			:class="{ 'no-edit': !editMode }"
+			v-bind="nativeInputAttrs"
+		/>
+	</div>
+</template>
+
+<script setup lang="ts">
+import LangText from '@/components/LangText.vue';
+
+const emits = defineEmits(['update:modelValue']);
+
+withDefaults(
+	defineProps<{
+		description?: string;
+		label?: string;
+		modelValue: any;
+		placeholder?: string;
+		editMode?: boolean;
+		small?: boolean;
+		nativeInputAttrs?: Record<string, any>;
+		showCharacterLimit?: 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 {
+	height: 100%;
+	margin: 0;
+}
+
+.bagel-input label {
+	margin-bottom: 0;
+}
+.bagel-input textarea {
+	height: 100%;
+	resize: none;
+	background: var(--input-bg);
+	margin-bottom: 0.5rem;
+}
+.character-limit {
+	font-size: 0.6rem;
+	color: var(--input-color);
+	position: absolute;
+	top: 0.25rem;
+	inset-inline-end: 0;
+}
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+	<div class="bagel-input" :class="{ small }" :title="title">
+		<label :for="id">
+			{{ label }}
+			<input
+				:id="id" v-model="inputVal" type="text" :placeholder="placeholder || label"
+				:class="{ 'no-edit': !editMode }" :required="required" :pattern="pattern" v-bind="nativeInputAttrs"
+			>
+		</label>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+import { debounce } from '@/utils';
+
+const emit = defineEmits(['update:modelValue', 'debounce']);
+const props = withDefaults(
+	defineProps<{
+		id?: string;
+		title?: string;
+		placeholder?: string;
+		modelValue?: string;
+		label?: string;
+		editMode?: boolean;
+		small?: boolean;
+		required?: boolean;
+		pattern?: string;
+		nativeInputAttrs?: Record<string, any>;
+	}>(),
+	{
+		editMode: true,
+		modelValue: '',
+	},
+);
+let inputVal = $ref<string>();
+
+watch(
+	() => inputVal,
+	(newVal) => {
+		emit('update:modelValue', newVal as string);
+		debounce(() => emit('debounce', newVal));
+	},
+);
+
+watch(
+	() => props.modelValue,
+	(newVal) => {
+		if (newVal !== inputVal) inputVal = newVal;
+	},
+	{ immediate: true },
+);
+</script>

package/src/components/form/inputs/index.ts

@@ -0,0 +1,17 @@
+export * from './CheckInput.vue';
+export * from './CurrencyInput.vue';
+export * from './DateInput.vue';
+export * from './DatetimeInput.vue';
+export * from './EmailInput.vue';
+export * from './FloatInput.vue';
+export * from './IntInput.vue';
+export * from './JSONInput.vue';
+export * from './LinkField.vue';
+export * from './PasswordInput.vue';
+export * from './ReadOnlyInput.vue';
+export * from './SelectField.vue';
+export * from './TextInput.vue';
+export * from './ImageField.vue';
+export * from './RichTextEditor.vue';
+export * from './TableField.vue';
+export * from './DurationInput.vue';

package/src/components/formkit/AddressArray.vue

@@ -0,0 +1,240 @@
+<template>
+	<div class="bagel-input">
+		<div class="mt-1">
+			<div
+				class="bglform-contact mb-3"
+				v-for="(address, i) in val"
+				:key="i"
+			>
+				<div
+					class="bglform-contact-confirm"
+					v-if="deleteCandidate === i"
+				>
+					<p class="txt14">
+						{{ form.sure }}
+					</p>
+					<Btn
+						thin
+						color="red"
+						@click="deleteContact(address.id)"
+					>
+						{{ form.delete }}
+					</Btn>
+					<Btn
+						thin
+						@click="deleteCandidate = -1"
+					>
+						{{ form.cancel }}
+					</Btn>
+				</div>
+				<Checkbox
+					v-model="address.primary"
+					@update:model-value="($event) => primaryHandler(i, $event)"
+				/>
+				<input
+					class="bglform-contact-label"
+					v-model="address.label"
+					type="text"
+					:placeholder="form.label"
+				>
+				<div class="bglform-contact-address">
+					<input
+						v-model="address.street"
+						:placeholder="form.street"
+						type="text"
+					>
+					<div class="bglform-contact-address-flex">
+						<input
+							v-model="address.city"
+							:placeholder="form.city"
+							type="text"
+						>
+						<input
+							v-model="address.postal_code"
+							:placeholder="form.zip"
+							type="text"
+						>
+					</div>
+					<input
+						v-model="address.country"
+						:placeholder="form.country"
+						type="text"
+					>
+				</div>
+				<div class="bglform-address-del">
+					<Btn
+						thin
+						@click="deleteCandidate = i"
+						icon="delete"
+						color="gray"
+					/>
+				</div>
+			</div>
+			<Btn
+				class="add-btn"
+				color="blue"
+				flat
+				thin
+				@click="addNew"
+			>
+				{{ form.add }}
+				{{ context?.label }}
+			</Btn>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+// import type { BagelField } from '@/types/BagelField';
+import { Btn } from '@/components';
+import Checkbox from '../form/inputs/Checkbox.vue';
+import { useBagel } from 'src/plugins/bagel';
+
+const bagel = useBagel();
+const props = defineProps<{
+	context: Record<string, any>;
+	form: {
+		add: string;
+		cancel: string;
+		city: string;
+		country: string;
+		delete: string;
+		label: string;
+		sure: string;
+		zip: string;
+		street: string;
+	};
+}>();
+
+let val = $ref<any[]>([]);
+const addNew = () => {
+	if (!val) val = [{}];
+	else val.push({});
+};
+
+let deleteCandidate = $ref<number>(-1);
+
+const del = (i: number) => {
+	val.splice(i, 1);
+};
+
+const deleteContact = async (id: string) => {
+	await bagel.delete(`/person/contact/${id}`);
+	const index = val.findIndex((v) => v.id === id);
+	deleteCandidate = -1;
+	del(index);
+};
+
+const primaryHandler = (i: number, isPrimary: boolean) => {
+	if (!isPrimary) return;
+	val?.forEach((contact, index) => {
+		if (index !== i) contact.primary = false;
+	});
+};
+
+watch(
+	() => props.context?.value,
+	() => {
+		val = props.context?.value;
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => val,
+	() => {
+		props.context?.node.input(val);
+	},
+);
+</script>
+
+<style>
+.bglform-contact-confirm {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.5);
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	backdrop-filter: blur(1px);
+}
+</style>
+<style scoped>
+.bglform-contact {
+	display: flex;
+	gap: 0.5rem;
+	max-width: 700px;
+	position: relative;
+}
+
+.bglform-contact-label {
+	flex-basis: 140px;
+}
+
+.bglform-contact-address {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.bglform-contact input[type='checkbox'] {
+	width: 30px;
+	min-width: 0;
+}
+
+.light.thin.btn-txt.btn {
+	padding-left: calc(var(--btn-padding) / 4);
+	padding-right: calc(var(--btn-padding) / 4);
+}
+
+.bglform-address-del {
+	margin-top: 6px;
+}
+
+.bglform-contact-address-flex {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.add-btn {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	margin-inline-start: 1rem;
+}
+
+.add-btn:active {
+	background: none !important;
+}
+
+.add-btn::before {
+	content: '+';
+	font-size: 10px;
+	background: var(--bgl-blue-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-blue);
+}
+
+.add-btn:hover::before {
+	background: var(--bgl-blue);
+	color: var(--bgl-white);
+}
+
+@media screen and (max-width: 910px) {
+	.bglform-contact-address-flex {
+		flex-wrap: wrap;
+	}
+
+	.bglform-contact-label {
+		min-width: 0;
+	}
+}
+</style>

package/src/components/formkit/BankDetailsArray.vue

@@ -0,0 +1,265 @@
+<template>
+	<div class="bagel-input">
+		<div class="mt-1">
+			<div
+				class="bglform-contact mb-3"
+				v-for="(bank_account, i) in val"
+				:key="i"
+			>
+				<div
+					class="bglform-contact-confirm"
+					v-if="deleteCandidate === i"
+				>
+					<p class="txt14">
+						{{ form.sure }}
+					</p>
+					<Btn
+						thin
+						color="red"
+						@click="deleteContact(bank_account.id)"
+					>
+						{{ form.delete }}
+					</Btn>
+					<Btn
+						thin
+						@click="deleteCandidate = -1"
+					>
+						{{ form.cancel }}
+					</Btn>
+				</div>
+				<Checkbox
+					v-model="bank_account.primary"
+					@update:model-value="($event) => primaryHandler(i, $event)"
+				/>
+				<input
+					class="bglform-contact-label"
+					v-model="bank_account.label"
+					type="text"
+					:placeholder="form.label"
+				/>
+				<div class="bglform-contact-address">
+					<input
+						v-model="bank_account.bank_name"
+						:placeholder="form.bankName"
+						type="text"
+						required
+					/>
+					<div class="bglform-contact-address-flex">
+						<input
+							v-model="bank_account.branch"
+							:placeholder="form.bankBranch"
+							type="text"
+							required
+						/>
+						<input
+							v-model="bank_account.account_number"
+							:placeholder="form.bankAccount"
+							type="text"
+							required
+						/>
+					</div>
+					<div class="grid gap-2">
+						<input
+							v-model="bank_account.bank_account_holder"
+							:placeholder="form.bankAccountHolder"
+							type="text"
+							required
+						/>
+						<input
+							v-model="bank_account.bank_account_holder_id"
+							:placeholder="form.bankAccountHolderID"
+							type="text"
+						/>
+						<input
+							v-model="bank_account.iban"
+							placeholder="IBAN"
+							type="text"
+						/>
+						<input
+							v-model="bank_account.swift"
+							placeholder="SWIFT"
+							type="text"
+						/>
+						<input
+							v-model="bank_account.bank_address"
+							:placeholder="form.bankAddress"
+							type="text"
+						/>
+					</div>
+				</div>
+				<div class="bglform-address-del">
+					<Btn
+						thin
+						@click="deleteCandidate = i"
+						icon="delete"
+						color="gray"
+					/>
+				</div>
+			</div>
+			<Btn
+				class="add-btn"
+				color="blue"
+				flat
+				thin
+				@click="val.push({})"
+			>
+				{{ form.add }} {{ context?.label }}
+			</Btn>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { watch } from 'vue';
+// import type { BagelField } from '@/types/BagelField';
+
+import { Btn } from '@/components';
+import Checkbox from '../form/inputs/Checkbox.vue';
+import { useBagel } from 'src/plugins/bagel';
+
+const bagel = useBagel();
+
+const props = defineProps<{
+	context: Record<string, any>;
+	form: {
+		sure: string
+		delete: string
+		cancel: string
+		label: string
+		bankName: string
+		bankBranch: string
+		bankAccount: string
+		bankAccountHolder: string
+		bankAccountHolderID: string
+		bankAddress: string
+		add: string
+	}
+}>();
+
+let val = $ref<any[]>([]);
+
+let deleteCandidate = $ref<number>(-1);
+
+const del = (i: number) => {
+	val.splice(i, 1);
+};
+
+const deleteContact = async (id: string) => {
+	await bagel.delete(`/person/contact/${id}`);
+	const index = val.findIndex((v) => v.id === id);
+	deleteCandidate = -1;
+	del(index);
+};
+
+const primaryHandler = (i: number, isPrimary: boolean) => {
+	if (!isPrimary) return;
+	val?.forEach((contact, index) => {
+		if (index !== i) contact.primary = false;
+	});
+};
+
+watch(
+	() => props.context?.value,
+	() => {
+		val = props.context?.value;
+	},
+	{ immediate: true },
+);
+
+watch(
+	() => val,
+	() => {
+		props.context?.node.input(val);
+	},
+);
+</script>
+
+<style>
+.bglform-contact-confirm {
+	position: absolute;
+	background: rgba(255, 255, 255, 0.5);
+	height: 100%;
+	width: 100%;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 0.5rem;
+	backdrop-filter: blur(1px);
+}
+</style>
+<style scoped>
+.bglform-contact {
+	display: flex;
+	gap: 0.5rem;
+	max-width: 700px;
+	position: relative;
+}
+
+.bglform-contact-label {
+	flex-basis: 140px;
+}
+
+.bglform-contact-address {
+	display: flex;
+	flex-direction: column;
+	gap: 0.5rem;
+}
+
+.bglform-contact input[type='checkbox'] {
+	width: 30px;
+	min-width: 0;
+}
+
+.light.thin.btn-txt.btn {
+	padding-left: calc(var(--btn-padding) / 4);
+	padding-right: calc(var(--btn-padding) / 4);
+}
+
+.bglform-address-del {
+	margin-top: 6px;
+}
+
+.bglform-contact-address-flex {
+	display: flex;
+	gap: 0.5rem;
+}
+
+.add-btn {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	margin-inline-start: 1rem;
+}
+
+.add-btn:active {
+	background: none !important;
+}
+
+.add-btn::before {
+	content: '+';
+	font-size: 10px;
+	background: var(--bgl-blue-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-blue);
+}
+
+.add-btn:hover::before {
+	background: var(--bgl-blue);
+	color: var(--bgl-white);
+}
+
+@media screen and (max-width: 910px) {
+	.bglform-contact-address-flex {
+		flex-wrap: wrap;
+	}
+
+	.bglform-contact-label {
+		min-width: 0;
+	}
+}
+</style>