@bagelink/vue 0.0.439 → 0.0.441

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

@@ -2,7 +2,7 @@
 	<div
 		class="bagel-input text-input"
 		:class="{
-			dense, small, shrink, toggleEdit, editMode, code,
+			dense, small, shrink, code,
 			textInputIconWrap: icon,
 			txtInputIconStart: iconStart,
 		}"
@@ -20,11 +20,11 @@
 				:rows="1"
 				ref="input"
 				:placeholder="placeholder || label"
-				:disabled="!editMode"
+				:disabled
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
+				@input="updateInputVal"
 			>
 			<textarea
 				v-else
@@ -35,11 +35,10 @@
 				:rows="rows"
 				ref="input"
 				:placeholder="placeholder || label"
-				:disabled="!editMode"
+				:disabled
 				:required="required"
 				:pattern="pattern"
 				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
 			/>
 			<p v-if="helptext">{{ helptext }}</p>
 		</label>
@@ -53,14 +52,6 @@
 			v-if="icon"
 			:icon="icon"
 		/>
-		<Btn
-			class="toggleEditBtn"
-			v-if="toggleEdit"
-			thin
-			@click="toggleEditAction"
-			:icon="editMode ? 'check' : 'edit'"
-			flat
-		/>
 	</div>
 </template>
 
@@ -87,7 +78,7 @@ const props = withDefaults(
 		required?: boolean;
 		pattern?: string;
 		shrink?: boolean;
-		toggleEdit?: boolean;
+		disabled?: boolean;
 		type?: string;
 		nativeInputAttrs?: Record<string, any>;
 		icon?: MaterialIcons;
@@ -102,27 +93,13 @@ const props = withDefaults(
 	}>(),
 	{
 		type: 'text',
-		toggleEdit: false,
 		modelValue: '',
 	},
 );
 let inputVal = $ref<string | number>();
-let editMode = $ref<boolean>(!props.toggleEdit);
 
 const input = $ref<HTMLInputElement>();
 
-const toggleEditAction = () => {
-	if (!props.toggleEdit) return;
-	if (editMode) {
-		editMode = false;
-		emit('debounce', inputVal);
-		emit('update:modelValue', inputVal as string);
-	} else {
-		editMode = true;
-		setTimeout(() => input?.focus(), 10);
-	}
-};
-
 const rows = $computed(() => {
 	if (props.lines) return props.lines;
 	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
@@ -130,15 +107,11 @@ const rows = $computed(() => {
 	return 1;
 });
 
-watch(
-	() => inputVal,
-	(newVal) => {
-		if (props.toggleEdit) return;
-		if (newVal === props.modelValue) return;
-		emit('update:modelValue', newVal as string);
-		debounce(() => emit('debounce', newVal));
-	},
-);
+function updateInputVal() {
+	if (props.disabled) return;
+	emit('update:modelValue', inputVal as string);
+	debounce(() => emit('debounce', inputVal), 300);
+}
 
 watch(
 	() => props.modelValue,
@@ -185,10 +158,6 @@ onMounted(() => {
 	opacity: 0.3;
 }
 
-.bagel-input.toggleEdit:hover {
-	background-color: var(--input-bg);
-}
-
 .bagel-input.small {
 	margin-bottom: 0;
 	height: 30px;
@@ -200,15 +169,13 @@ onMounted(() => {
 	gap: 0.5rem;
 }
 
-.bagel-input label {
-	font-size: var(--label-font-size);
+.bagel-input input:disabled {
+	background: #f5f5f5;
+
 }
 
-.toggleEditBtn {
-	position: absolute;
-	right: -24px;
-	top: 4;
-	opacity: 0;
+.bagel-input label {
+	font-size: var(--label-font-size);
 }
 
 .textInputIconWrap {
@@ -235,11 +202,6 @@ onMounted(() => {
 	padding-inline-start: 2rem;
 }
 
-.bagel-input:hover .toggleEditBtn,
-.bagel-input.editMode .toggleEditBtn {
-	opacity: 1;
-}
-
 .bagel-input.small textarea {
 	height: 30px;
 }

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

@@ -11,4 +11,5 @@ export { default as RadioPillsInput } from './RadioPillsInput.vue';
 export { default as FileUpload } from './FileUpload.vue';
 export { default as ToggleInput } from './ToggleInput.vue';
 export { default as RichText } from './RichText.vue';
+export { default as TelInput } from './TelInput.vue';
 export { Dropdown } from 'floating-vue';

package/src/components/index.ts

@@ -21,6 +21,7 @@ export { default as Badge } from './Badge.vue';
 export { default as BglVideo } from './BglVideo.vue';
 export { default as Carousel } from './Carousel.vue';
 export { default as ModalConfirm } from './ModalConfirm.vue';
+export { default as Flag } from './Flag.vue';
 
 export * from './form';
 export * from './dashboard';

package/src/components/layout/Tabs.vue

@@ -39,6 +39,7 @@ const tabComponent = defineComponent({
 		const currentTabIndex = props.tabs.findIndex(
 			(tab) => tabValue(tab) === currentTab.value,
 		);
+		if (currentTabIndex === -1) return null;
 		const slotChildren = slots?.default?.()?.[1]?.children;
 
 		return h('div', (slotChildren as VNode[])[currentTabIndex]);

package/src/index.ts

@@ -5,4 +5,5 @@ export { ModalPlugin, useModal } from './plugins/modal';
 export * from './utils';
 export * from './types';
 export * from './components';
+export * from './utils/allCountries';
 import './styles/bagel.css';