@bagelink/vue 0.0.160 → 0.0.162

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

@@ -1,92 +1,85 @@
 <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>
+  <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']);
+const emits = defineEmits(["update:modelValue"]);
 withDefaults(
-	defineProps<{
-		description?: string;
-		label?: string;
-		modelValue: any;
-		placeholder?: string;
-		editMode?: boolean;
-		small?: boolean;
-	}>(),
-	{
-		description: '',
-		editMode: true,
-		placeholder: '',
-		label: '',
-	},
+  defineProps<{
+    description?: string;
+    label?: string;
+    modelValue: any;
+    placeholder?: string;
+    editMode?: boolean;
+    small?: boolean;
+  }>(),
+  {
+    description: "",
+    editMode: true,
+    placeholder: "",
+    label: "",
+  }
 );
 
-let inputType = $ref('password');
+let inputType = $ref("password");
 const handleInput = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.value);
+  const el = e.target as HTMLInputElement;
+  emits("update:modelValue", el.value);
 };
 
 function toggleInputType() {
-	inputType = 'text';
-	document.addEventListener(
-		'mouseup',
-		() => {
-			inputType = 'password';
-		},
-		{ once: true },
-	);
+  inputType = "text";
+  document.addEventListener(
+    "mouseup",
+    () => {
+      inputType = "password";
+    },
+    { once: true }
+  );
 }
 </script>
 
 <style scoped>
 .password-input-wrap {
-	position: relative;
+  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;
+  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);
+  filter: var(--bgl-hover-filter);
+  color: var(--bgl-primary);
 }
 
 .password-icon:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
-[dir='rtl'] .password-icon {
-	left: calc(var(--input-height) / 2 - 10px);
-	right: unset;
+[dir="rtl"] .password-icon {
+  left: calc(var(--input-height) / 2 - 10px);
+  right: unset;
 }
 </style>

package/src/components/formkit/AddressArray.vue

@@ -1,249 +1,226 @@
 <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"
-				color="blue"
-				flat
-				thin
-				@click="addNew"
-			>
-				{{ formPlaceholders?.add }}
-				{{ context?.label }}
-			</Btn>
-		</div>
-	</div>
+  <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" color="blue" flat thin @click="addNew">
+        {{ formPlaceholders?.add }}
+        {{ context?.label }}
+      </Btn>
+    </div>
+  </div>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { watch } from "vue";
 // import type { BagelField } from '@bagelink/vue';
 
-import { Btn, useBagel } from '@bagelink/vue';
-import Checkbox from '../form/inputs/Checkbox.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;
-		};
-	};
+  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
+  context: AddressArrContext;
 }>();
-const formPlaceholders = $computed(() => props.context?.attrs?.formPlaceholders);
+const formPlaceholders = $computed(
+  () => props.context?.attrs?.formPlaceholders
+);
 
 let val = $ref<any[]>([]);
 const addNew = () => {
-	if (!val) val = [{}];
-	else val.push({});
+  if (!val) val = [{}];
+  else val.push({});
 };
 
 let deleteCandidate = $ref<number>(-1);
 
 const del = (i: number) => {
-	val.splice(i, 1);
+  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);
+  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;
-	});
+  if (!isPrimary) return;
+  val?.forEach((contact, index) => {
+    if (index !== i) contact.primary = false;
+  });
 };
 
 watch(
-	() => props.context?.value,
-	() => {
-		val = props.context?.value;
-	},
-	{ immediate: true },
+  () => props.context?.value,
+  () => {
+    val = props.context?.value;
+  },
+  { immediate: true }
 );
 
 watch(
-	() => val,
-	() => {
-		props.context?.node.input(val);
-	},
+  () => 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);
+  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;
+  display: flex;
+  gap: 0.5rem;
+  max-width: 700px;
+  position: relative;
 }
 
 .bglform-contact-label {
-	flex-basis: 140px;
+  flex-basis: 140px;
 }
 
 .bglform-contact-address {
-	display: flex;
-	flex-direction: column;
-	gap: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
 }
 
-.bglform-contact input[type='checkbox'] {
-	width: 30px;
-	min-width: 0;
+.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);
+  padding-left: calc(var(--btn-padding) / 4);
+  padding-right: calc(var(--btn-padding) / 4);
 }
 
 .bglform-address-del {
-	margin-top: 6px;
+  margin-top: 6px;
 }
 
 .bglform-contact-address-flex {
-	display: flex;
-	gap: 0.5rem;
+  display: flex;
+  gap: 0.5rem;
 }
 
 .add-btn {
-	display: flex;
-	gap: 0.5rem;
-	align-items: center;
-	margin-inline-start: 1rem;
+  display: flex;
+  gap: 0.5rem;
+  align-items: center;
+  margin-inline-start: 1rem;
 }
 
 .add-btn:active {
-	background: none !important;
+  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);
+  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-blue);
-	color: var(--bgl-white);
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
 }
 
 @media screen and (max-width: 910px) {
-	.bglform-contact-address-flex {
-		flex-wrap: wrap;
-	}
+  .bglform-contact-address-flex {
+    flex-wrap: wrap;
+  }
 
-	.bglform-contact-label {
-		min-width: 0;
-	}
+  .bglform-contact-label {
+    min-width: 0;
+  }
 }
 </style>