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

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

@@ -1,90 +0,0 @@
-<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 { MaterialIcon, BagelField } from '@bagelink/vue';
-
-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

@@ -1,85 +0,0 @@
-<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-primary);
-}
-
-.password-icon:active {
-  filter: var(--bgl-active-filter);
-}
-
-[dir="rtl"] .password-icon {
-  left: calc(var(--input-height) / 2 - 10px);
-  right: unset;
-}
-</style>

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

@@ -1,63 +0,0 @@
-<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="text"
-				:placeholder="field.placeholder || field.label"
-				:class="{ 'no-edit': !editMode }"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-			>
-		</label>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { watch } from 'vue';
-import { BagelField } from '@bagelink/vue';
-
-const emit = defineEmits(['update:modelValue']);
-const props = withDefaults(
-	defineProps<{
-		field: BagelField;
-		modelValue: any;
-		editMode?: boolean;
-		small?: boolean;
-		required?: boolean;
-		pattern?: string;
-		nativeInputAttrs?: Record<string, any>;
-	}>(),
-	{
-		editMode: true,
-	},
-);
-let inputVal = $ref<string>();
-
-watch(
-	() => inputVal,
-	(newVal) => emit('update:modelValue', newVal),
-);
-
-watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (newVal !== inputVal) inputVal = newVal;
-	},
-	{ immediate: true },
-);
-</script>
-
-<style scoped>
-.no-edit {
-	cursor: not-allowed;
-}
-</style>

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

@@ -1,28 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="field.description"
-		:class="{ small: small }"
-	>
-		<label v-if="field.label">
-			{{ field.label }}
-		</label>
-		{{ modelValue }}
-	</div>
-</template>
-
-<script setup lang="ts">
-import { BagelField } from '@bagelink/vue';
-
-defineProps<{
-	field: BagelField;
-	modelValue: any;
-	small?: boolean;
-}>();
-</script>
-
-<style scoped>
-.no-edit {
-	margin-bottom: 2px;
-}
-</style>

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

@@ -1,202 +0,0 @@
-<template>
-	<div ref="selectInput" class="bagel-input" :title="label">
-		<label v-if="label" for="label" :class="{ active: showList }">{{ label }}</label>
-		<div class="custom-select" ref="selectEl" :class="{ 'open-select': showList }">
-			<TextInput @keydown.capture="handleKeydown" @click.stop="toggleShowList" :modelValue="displayValue"
-				:required="required" />
-			<Teleport to="#app">
-				<div ref="dropdown" class="custom-select-drop" :class="{ 'open-select': showList }">
-					<div v-for="option in optionList" :key="option.value" @click="handleSelect(option)">
-						{{ option.label }}
-					</div>
-				</div>
-			</Teleport>
-		</div>
-	</div>
-</template>
-
-<script lang="ts" setup>
-import {
-	onMounted, onUnmounted,
-} from 'vue';
-import { TextInput } from '.';
-
-type Option = {
-	label: string;
-	value: string | number;
-};
-
-type RawOption = Option | string | number;
-
-const selectEl = $ref<HTMLElement>();
-const dropdown = $ref<HTMLElement>();
-const selectInput = $ref<HTMLElement>();
-let focusedIndex = $ref(-1);
-
-let showList = $ref(false);
-const selectedValue = defineModel<string | number>();
-const props = withDefaults(
-	defineProps<{
-		options: RawOption[] | string;
-		label?: string;
-		placeholder?: string;
-		required?: boolean;
-		helptext?: string;
-	}
-	>(),
-	{
-		helptext: '',
-		label: '',
-		placeholder: '',
-	},
-);
-
-function handleKeydown(event: KeyboardEvent) {
-	if (event.key === 'Escape') {
-		showList = false;
-	}
-	// arrow down
-	if (event.key === 'ArrowDown') {
-		event.preventDefault();
-		focusedIndex++;
-	}
-}
-
-function optnToValueLabel(option: RawOption): Option {
-	if (typeof option === 'string' || typeof option === 'number') {
-		return { label: `${option}`, value: option };
-	}
-	return option;
-}
-
-const optionList = $computed<Option[]>(() => {
-	const optns = typeof props.options === 'string' ? props.options.split('\n|,') : props.options;
-	return optns.map(optnToValueLabel);
-});
-const displayValue = $computed(() => optionList.find((optn) => optn.value === selectedValue.value)?.label || '');
-
-function handleSelect(option: Option) {
-	selectedValue.value = option.value;
-	showList = false;
-}
-
-function closestScrollableParent(element?: HTMLElement | null) {
-	if (!element) return null;
-	while (element) {
-		const style = window.getComputedStyle(element);
-		if ((style.overflowY !== 'visible' && element.scrollHeight > element.clientHeight) ||
-			(style.overflowX !== 'visible' && element.scrollWidth > element.clientWidth)) {
-			return element;
-		}
-		element = element.parentElement;
-	}
-	return null;
-}
-
-function positionDropdown() {
-	if (!selectEl || !dropdown) return;
-	const { top, left, width } = selectEl.getBoundingClientRect();
-	dropdown.style.top = `${top + 40}px`;
-	dropdown.style.left = `${left}px`;
-	dropdown.style.width = `${width}px`;
-}
-
-function toggleShowList() {
-	showList = !showList;
-	positionDropdown();
-}
-
-onMounted(() => {
-	const scrollable = closestScrollableParent(selectInput);
-	scrollable?.addEventListener('scroll', positionDropdown);
-});
-
-onUnmounted(() => {
-	closestScrollableParent(selectInput)?.removeEventListener('scroll', positionDropdown);
-});
-</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;
-	margin-bottom: 2px;
-}
-
-.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%;
-}
-
-[dir='rtl'] .custom-select .input:after {
-	right: unset;
-	left: calc(var(--input-font-size) / 2);
-}
-
-[dir='rtl'] .custom-select-drop {
-	inset-inline-start: unset;
-}
-
-.custom-select-drop {
-	position: absolute;
-	cursor: pointer;
-	font-size: 12px;
-	box-sizing: border-box;
-	min-width: 220px;
-	width: 100%;
-	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; */
-	/*transition: var(--bgl-transition);*/
-}
-
-.open-select.custom-select-drop {
-	opacity: 1;
-	max-height: 150px;
-	pointer-events: all;
-	/*transition: var(--bgl-transition);*/
-}
-
-.custom-select-drop>* {
-	/*transition: var(--bgl-transition); */
-	padding: 0.5rem 0.75rem;
-}
-
-.custom-select-drop>*:hover {
-	background: var(--bgl-blue-light);
-}
-
-.custom-select-drop>*:active {
-	filter: var(--bgl-hover-filter);
-}
-
-.bagel-input label {
-	margin-bottom: 0;
-}
-</style>

package/src/components/formkit/AddressArray.vue

@@ -1,250 +0,0 @@
-<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">
-						{{ formPlaceholders?.sure }}
-					</p>
-					<Btn
-						thin
-						color="red"
-						@click="deleteContact(address.id)"
-					>
-						{{ formPlaceholders?.delete }}
-					</Btn>
-					<Btn
-						thin
-						@click="deleteCandidate = -1"
-					>
-						{{ formPlaceholders?.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="formPlaceholders?.label"
-				>
-				<div class="bglform-contact-address">
-					<input
-						v-model="address.street"
-						:placeholder="formPlaceholders?.street"
-						type="text"
-					>
-					<div class="bglform-contact-address-flex">
-						<input
-							v-model="address.city"
-							:placeholder="formPlaceholders?.city"
-							type="text"
-						>
-						<input
-							v-model="address.postal_code"
-							:placeholder="formPlaceholders?.zip"
-							type="text"
-						>
-					</div>
-					<input
-						v-model="address.country"
-						:placeholder="formPlaceholders?.country"
-						type="text"
-					>
-				</div>
-				<div class="bglform-address-del">
-					<Btn
-						thin
-						@click="deleteCandidate = i"
-						icon="delete"
-						color="gray"
-					/>
-				</div>
-			</div>
-			<Btn
-				class="add-btn"
-				flat
-				thin
-				@click="addNew"
-			>
-				{{ formPlaceholders?.add }}
-				{{ context?.label }}
-			</Btn>
-		</div>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { watch } from 'vue';
-// import type { BagelField } from '@bagelink/vue';
-
-import { Btn, useBagel } from '@bagelink/vue';
-import Checkbox from '../form/inputs/Checkbox.vue';
-
-export interface AddressArrContext {
-	label?: string;
-	id?: string;
-	value: any[];
-	node: Record<string, any>;
-	attrs: {
-		formPlaceholders?: {
-			add?: string;
-			cancel?: string;
-			city?: string;
-			country?: string;
-			delete?: string;
-			label?: string;
-			sure?: string;
-			zip?: string;
-			street?: string;
-		};
-	};
-}
-const bagel = useBagel();
-const props = defineProps<{
-	context: AddressArrContext;
-}>();
-const formPlaceholders = $computed(
-	() => props.context?.attrs?.formPlaceholders,
-);
-
-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.flatBtn.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-primary);
-}
-
-.add-btn:hover::before {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-}
-
-@media screen and (max-width: 910px) {
-	.bglform-contact-address-flex {
-		flex-wrap: wrap;
-	}
-
-	.bglform-contact-label {
-		min-width: 0;
-	}
-}
-</style>