@bagelink/vue 0.0.188 → 0.0.192

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

@@ -0,0 +1,169 @@
+<template>
+	<div class="datetime-wrap">
+		<div class="date-wrap">
+			<VDatepicker
+				inline
+				week-start="0"
+				v-model="selectedDate"
+				:highlight-week-days="[6]"
+				:enable-time-picker="false"
+				:month-change-on-scroll="false"
+				v-bind="options"
+			>
+				<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"
+				>
+				<label :for="`${hr}_${name}`">{{ hr }}</label>
+			</template>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import VDatepicker from '@vuepic/vue-datepicker';
+import '@vuepic/vue-datepicker/dist/main.css';
+
+defineProps<{ name: string, options?: Record<string, any>, showTimeWrap?: boolean }>();
+const selectedDate = $ref(null);
+const selectedHour = $ref();
+
+const hours = Array.from({ length: 18 }, (_, index) => {
+	const hour = Math.floor(index / 2) + 9;
+	const minute = index % 2 === 0 ? '00' : '30';
+	return `${hour}:${minute}`;
+});
+</script>
+<style>
+.datetime-wrap {
+	display: flex;
+	gap: 3rem;
+	padding: 1rem;
+}
+
+.time-wrap {
+	display: grid;
+	gap: 0.5rem;
+	grid-template-columns: 1fr 1fr;
+	width: 100%;
+}
+
+.time-wrap input {
+	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);
+}
+
+.time-wrap input[type="radio"]:checked+label {
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
+}
+
+.time-wrap label:hover {
+	filter: var(--bgl-hover-filter);
+}
+
+.time-wrap label:active {
+	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);
+}
+
+: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__calendar_header {
+	font-weight: 400;
+	padding: 10px 0 0;
+	margin-bottom: -10px;
+}
+
+.dp__calendar_row>div:last-child {
+	pointer-events: none;
+}
+
+.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:focus-visible {
+	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;
+	}
+}
+</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,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

@@ -20,3 +20,5 @@ export { default as Checkbox } from './Checkbox.vue';
 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';