@bagelink/vue 0.0.190 → 0.0.192

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

@@ -0,0 +1,89 @@
+<template>
+	<div class="flex gap-2 flex-wrap">
+		<div class="radio-pill" v-for="({id,label,value}, index) in cumputedOptions" :key="index">
+			<input
+				type="radio"
+				:id="id"
+				:name="name"
+				:value="value"
+				:checked="selectedValue === value"
+				@change="handleSelect"
+			>
+			<label :for="id">{{ label }}</label>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { onMounted, watch } from 'vue';
+
+interface RadioOption {
+	id: string;
+	label: string;
+	value: any;
+}
+const emits = defineEmits(['update:modelValue']);
+
+const props = defineProps<{
+	options?: RadioOption[],
+	stringOptions: string[],
+	modelValue: any,
+	name: string,
+}>();
+
+const cumputedOptions = $computed(() => props.options || props.stringOptions.map((v) => ({
+	id: v,
+	label: v,
+	value: v,
+})));
+
+let selectedValue = $ref('');
+
+function handleSelect(e: Event) {
+	const newVal = (e.target as any)?.value;
+	emits('update:modelValue', newVal);
+	selectedValue = newVal;
+}
+watch(
+	() => props.modelValue,
+	(newVal, oldVal) => {
+		if (newVal === oldVal || oldVal === undefined) return;
+		if (selectedValue !== newVal) selectedValue = newVal;
+	},
+	{ immediate: true },
+);
+
+onMounted(() => {
+	selectedValue = props.modelValue;
+});
+</script>
+
+<style scoped>
+.radio-pill label {
+  color: var(--bgl-primary);
+  white-space: nowrap;
+  border-radius: calc(var(--btn-border-radius) * 2);
+  outline: 1px solid var(--bgl-primary);
+  padding-left: calc(var(--btn-padding) / 2);
+  padding-right: calc(var(--btn-padding) / 2);
+  padding-top: calc(var(--btn-padding) / 6);
+  padding-bottom: calc(var(--btn-padding) / 6);
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  background: var(--bgl-white);
+  user-select: none;
+}
+
+.radio-pill label:hover {
+  filter: var(--bgl-hover-filter);
+}
+
+.radio-pill input {
+  display: none;
+}
+
+.radio-pill input:checked~label {
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+}
+</style>

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

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="bagel-input"
-		:class="{ small, shrink, toggleEdit, editMode }"
+		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap:icon, txtInputIconStart:iconStart}"
 		:title="title"
 	>
 		<label :for="id">
@@ -20,9 +20,22 @@
 				@keydown.enter="toggleEditAction"
 			>
 		</label>
+
+		<MaterialIcon
+			class="iconStart"
+			v-if="iconStart"
+			:icon="iconStart"
+		/>
+		<MaterialIcon
+			v-if="icon"
+			:icon="icon"
+		/>
 		<Btn
 			class="toggleEditBtn"
-			v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode?'check':'edit'"
+			v-if="toggleEdit"
+			thin
+			@click="toggleEditAction"
+			:icon="editMode ? 'check' : 'edit'"
 			flat
 		/>
 	</div>
@@ -30,7 +43,9 @@
 
 <script setup lang="ts">
 import { watch } from 'vue';
-import { debounce, Btn } from '@bagelink/vue';
+import {
+	debounce, Btn, type MaterialIcons, MaterialIcon,
+} from '@bagelink/vue';
 
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
@@ -47,6 +62,8 @@ const props = withDefaults(
 		toggleEdit?: boolean;
 		type?: string;
 		nativeInputAttrs?: Record<string, any>;
+		icon?: MaterialIcons;
+		iconStart?: MaterialIcons;
 	}>(),
 	{
 		type: 'text',
@@ -54,7 +71,7 @@ const props = withDefaults(
 		modelValue: '',
 	},
 );
-let inputVal = $ref<string|number>();
+let inputVal = $ref<string | number>();
 let editMode = $ref<boolean>(!props.toggleEdit);
 
 const input = $ref<HTMLInputElement>();
@@ -90,36 +107,61 @@ watch(
 </script>
 
 <style>
-.bagel-input.shrink, .bagel-input.shrink input{
+.bagel-input.shrink,
+.bagel-input.shrink input {
 	min-width: unset !important;
 	/* width: auto; */
 }
 </style>
 
 <style scoped>
-.bagel-input input[disabled]{
+.bagel-input input[disabled] {
 	background: none;
 }
 
 .bagel-input.toggleEdit:hover {
 	background-color: var(--input-bg);
 }
-.bagel-input.small{
-	margin-bottom:0;
+
+.bagel-input.small {
+	margin-bottom: 0;
 	height: 30px;
 }
 
-.toggleEditBtn{
+.toggleEditBtn {
 	position: absolute;
 	right: -24px;
 	top: 4;
 	opacity: 0;
 }
-.bagel-input:hover .toggleEditBtn, .bagel-input.editMode .toggleEditBtn{
+
+.textInputIconWrap {
+	position: relative;
+}
+.textInputIconWrap .icon-font {
+	position: absolute;
+	inset-inline-end: 0.7rem;
+	top:50%;
+	line-height: 0;
+    color: var(--bgl-gray);
+}
+.txtInputIconStart .iconStart{
+	position: absolute;
+	inset-inline-start: 0.7rem;
+	top:50%;
+	line-height: 0;
+    color: var(--bgl-gray);
+}
+.txtInputIconStart input{
+	padding-inline-start: 2rem;
+}
+
+.bagel-input:hover .toggleEditBtn,
+.bagel-input.editMode .toggleEditBtn {
 	opacity: 1;
 }
 
-.bagel-input.small input{
+.bagel-input.small input {
 	height: 30px;
 }
 </style>

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

@@ -21,3 +21,4 @@ export { default as ColorPicker } from './ColorPicker.vue';
 export { default as DynamicLinkField } from './DynamicLinkField.vue';
 export { default as PlainText } from './PlainText.vue';
 export { default as DatePicker } from './DatePicker.vue';
+export { default as RadioPillsInput } from './RadioPillsInput.vue';

package/src/components/formkit/AddressArray.vue

@@ -1,226 +1,249 @@
 <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"
+				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
+	() => 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;
+	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-primary);
+	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);
+	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>
+	.bglform-contact-address-flex {
+		flex-wrap: wrap;
+	}
+
+	.bglform-contact-label {
+		min-width: 0;
+	}
+}</style>