@bagelink/vue 0.0.190 → 0.0.196

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

@@ -10,13 +10,25 @@
 				:month-change-on-scroll="false"
 				v-bind="options"
 			>
-				<template #action-buttons/>
-				<template #action-preview/>
+				<template #action-buttons />
+				<template #action-preview />
 			</VDatepicker>
 		</div>
-		<div class="time-wrap" v-if="showTimeWrap">
-			<template v-for="hr in hours" :key="hr">
-				<input type="radio" :id="`${hr}_${name}`" :name="name" :value="hr" v-model="selectedHour" >
+		<div
+			class="time-wrap"
+			v-if="showTimeWrap"
+		>
+			<template
+				v-for="hr in hours"
+				:key="hr"
+			>
+				<input
+					type="radio"
+					:id="`${hr}_${name}`"
+					:name="name"
+					:value="hr"
+					v-model="selectedHour"
+				>
 				<label :for="`${hr}_${name}`">{{ hr }}</label>
 			</template>
 		</div>
@@ -27,7 +39,7 @@
 import VDatepicker from '@vuepic/vue-datepicker';
 import '@vuepic/vue-datepicker/dist/main.css';
 
-defineProps<{ name: string, options: Record<string, any>, showTimeWrap: boolean}>();
+defineProps<{ name: string, options?: Record<string, any>, showTimeWrap?: boolean }>();
 const selectedDate = $ref(null);
 const selectedHour = $ref();
 
@@ -39,115 +51,119 @@ const hours = Array.from({ length: 18 }, (_, index) => {
 </script>
 <style>
 .datetime-wrap {
-  display: flex;
-  gap: 3rem;
-  padding: 1rem;
+	display: flex;
+	gap: 3rem;
+	padding: 1rem;
 }
 
 .time-wrap {
-  display: grid;
-  gap: 0.5rem;
-  grid-template-columns: 1fr 1fr;
-  width: 100%;
+	display: grid;
+	gap: 0.5rem;
+	grid-template-columns: 1fr 1fr;
+	width: 100%;
 }
 
 .time-wrap input {
-  display: none;
+	display: none;
 }
 
 .time-wrap label {
-  background: var(--input-bg);
-  border-radius: var(--btn-border-radius);
-  line-height: calc(var(--btn-height) * 0.9);
-  display: block;
-  cursor: pointer;
-  transition: var(--bgl-transition);
-  text-align: center;
-  font-size: 16px;
-  color: var(--bgl-primary);
-  border: 1px solid var(--bgl-primary);
+	background: var(--input-bg);
+	border-radius: var(--btn-border-radius);
+	line-height: calc(var(--btn-height) * 0.9);
+	display: block;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	text-align: center;
+	font-size: 16px;
+	color: var(--bgl-primary);
+	border: 1px solid var(--bgl-primary);
 }
 
 .time-wrap input[type="radio"]:checked+label {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 
 .time-wrap label:hover {
-  filter: var(--bgl-hover-filter);
+	filter: var(--bgl-hover-filter);
 }
 
 .time-wrap label:active {
-  filter: var(--bgl-active-filter);
+	filter: var(--bgl-active-filter);
 }
 
 .dp__theme_light {
-  --dp-background-color: var(--bgl-white);
-  --dp-text-color: var(--bgl-black);
-  --dp-hover-color: var(--input-bg);
-  --dp-hover-text-color: var(--bgl-black);
-  --dp-hover-icon-color: var(--bgl-primary);
-  --dp-primary-color: var(--bgl-primary);
-  --dp-primary-disabled-color: var(--bgl-primary);
-  --dp-primary-text-color: var(--bgl-white);
-  --dp-secondary-color: var(--bgl-gray);
-  --dp-border-color: transparent;
-  --dp-menu-border-color: transparent;
-  --dp-scroll-bar-background: transparent;
-  --dp-scroll-bar-color: var(--bgl-gray);
-  --dp-icon-color: var(--bgl-gray);
-  --dp-highlight-color: var(--bgl-gray-light);
+	--dp-background-color: var(--bgl-white);
+	--dp-text-color: var(--bgl-black);
+	--dp-hover-color: var(--input-bg);
+	--dp-hover-text-color: var(--bgl-black);
+	--dp-hover-icon-color: var(--bgl-primary);
+	--dp-primary-color: var(--bgl-primary);
+	--dp-primary-disabled-color: var(--bgl-primary);
+	--dp-primary-text-color: var(--bgl-white);
+	--dp-secondary-color: var(--bgl-gray);
+	--dp-border-color: transparent;
+	--dp-menu-border-color: transparent;
+	--dp-scroll-bar-background: transparent;
+	--dp-scroll-bar-color: var(--bgl-gray);
+	--dp-icon-color: var(--bgl-gray);
+	--dp-highlight-color: var(--bgl-gray-light);
 }
 
 :root {
-  --dp-font-family: inherit;
-  --dp-cell-border-radius: 100%;
-  --dp-common-transition: all 200s ease-in;
-
-  --dp-cell-size: 40px;
-  /*Width and height of calendar cell*/
-  --dp-menu-min-width: 280px;
-  /*Adjust the min width of the menu*/
-  --dp-row-margin: 8px 0;
-  /*Adjust the spacing between rows in the calendar*/
+	--dp-font-family: inherit;
+	--dp-cell-border-radius: 100%;
+	--dp-common-transition: all 200s ease-in;
+
+	--dp-cell-size: 40px;
+	/*Width and height of calendar cell*/
+	--dp-menu-min-width: 280px;
+	/*Adjust the min width of the menu*/
+	--dp-row-margin: 8px 0;
+	/*Adjust the spacing between rows in the calendar*/
 }
 
 .dp__calendar_header {
-  font-weight: 400;
-  padding: 10px 0 0;
-  margin-bottom: -10px;
+	font-weight: 400;
+	padding: 10px 0 0;
+	margin-bottom: -10px;
 }
 
 .dp__calendar_row>div:last-child {
-  pointer-events: none;
+	pointer-events: none;
 }
-.dp__outer_menu_wrap.dp--menu-wrapper{
-filter: drop-shadow(0 0 20px var(--bgl-shadow));
+
+.dp__outer_menu_wrap.dp--menu-wrapper {
+	filter: drop-shadow(0 0 20px var(--bgl-shadow));
 }
-.dp__input{
-  background: var(--input-bg);
-    border: none;
-    padding: 0.7rem;
-    border-radius: var(--input-border-radius);
-    color: var(--input-color);
-    min-width: calc(var(--input-height) * 3);
-    width: 100%;
+
+.dp__input {
+	background: var(--input-bg);
+	border: none;
+	padding: 0.7rem;
+	border-radius: var(--input-border-radius);
+	color: var(--input-color);
+	min-width: calc(var(--input-height) * 3);
+	width: 100%;
 }
+
 .dp__input:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 10px #00000012;
+	outline: none;
+	box-shadow: inset 0 0 10px #00000012;
 }
+
 @media screen and (max-width: 767px) {
-  .datetime-wrap {
-    flex-wrap: wrap;
-    padding: 0rem;
-    gap: 1rem;
-    justify-content: center;
-  }
-
-  :root {
-    --dp-menu-min-width: 200px;
-    --dp-cell-size: 35px;
-  }
+	.datetime-wrap {
+		flex-wrap: wrap;
+		padding: 0rem;
+		gap: 1rem;
+		justify-content: center;
+	}
+
+	:root {
+		--dp-menu-min-width: 200px;
+		--dp-cell-size: 35px;
+	}
 }
 </style>

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,64 @@ 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;
+	bottom: 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';