@bagelink/vue 0.0.427 → 0.0.431

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

@@ -1,294 +1,302 @@
 <template>
-	<Dropdown
-		@click.stop
-		@hide="updateOpen(false)"
-		ref="dropdown"
-		placement="bottom-start"
-		class="bagel-input selectinput">
-		<label>
-			{{ label }}
-			<button
-				@keydown="openOptions"
-				@click="updateOpen(true)"
-				:disabled="disabled"
-				type="button"
-				class="selectinput-btn"
-				:class="{ isEmpty: selectedItems.length === 0 }">
-				<p>{{ selectedLabel }}</p>
-				<Icon
-					v-if="!disabled"
-					v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }" />
-			</button>
-			<input
-				tabindex="-1"
-				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
-				v-if="required"
-				@input="updateOpen(true)"
-				:value="selectedItems"
-				required />
-		</label>
-		<template #popper>
-			<Card
-				class="selectinput-options p-05"
-				:style="{ width: fullWidth ? '100%' : 'auto' }">
-				<TextInput
-					v-if="searchable"
-					ref="searchInput"
-					dense
-					:placeholder="'Search'"
-					icon="search"
-					v-model="search" />
-				<div
-					class="selectinput-option hover gap-1"
-					v-for="(option, i) in filteredOptions"
-					:key="`${option}${i}`"
-					@click="select(option)"
-					:class="{ selected: isSelected(option) }">
-					<Icon v-if="isSelected(option)" icon="check" />
-					<Icon
-						class="opacity-3"
-						v-if="!isSelected(option)"
-						icon="fiber_manual_record" />
-					<span>
-						{{ getLabel(option) }}
-					</span>
-				</div>
-				<slot name="last" />
-			</Card>
-		</template>
-	</Dropdown>
+  <Dropdown
+    @click.stop
+    @hide="updateOpen(false)"
+    ref="dropdown"
+    placement="bottom-start"
+    class="bagel-input selectinput"
+  >
+    <label>
+      {{ label }}
+      <button
+        @keydown="openOptions"
+        @click="updateOpen(true)"
+        :disabled="disabled"
+        type="button"
+        class="selectinput-btn"
+        :class="{ isEmpty: selectedItems.length === 0 }"
+      >
+        <p>{{ selectedLabel }}</p>
+        <Icon
+          v-if="!disabled"
+          v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }"
+        />
+      </button>
+      <input
+        tabindex="-1"
+        style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
+        v-if="required"
+        @input="updateOpen(true)"
+        :value="selectedItems"
+        required
+      />
+    </label>
+    <template #popper>
+      <Card
+        class="selectinput-options p-05"
+        :style="{ width: fullWidth ? '100%' : 'auto' }"
+      >
+        <TextInput
+          v-if="searchable"
+          ref="searchInput"
+          dense
+          :placeholder="'Search'"
+          icon="search"
+          v-model="search"
+        />
+        <div
+          class="selectinput-option hover gap-1"
+          v-for="(option, i) in filteredOptions"
+          :key="`${option}${i}`"
+          @click="select(option)"
+          :class="{ selected: isSelected(option) }"
+        >
+          <Icon v-if="isSelected(option)" icon="check" />
+          <Icon
+            class="opacity-3"
+            v-if="!isSelected(option)"
+            icon="fiber_manual_record"
+          />
+          <span>
+            {{ getLabel(option) }}
+          </span>
+        </div>
+        <slot name="last" />
+      </Card>
+    </template>
+  </Dropdown>
 </template>
 
 <script lang="ts" setup>
-import { watch } from 'vue';
-import { Dropdown } from 'floating-vue';
-import 'floating-vue/style.css';
-import { TextInput, Card, Icon } from '@bagelink/vue';
+import { watch } from "vue";
+import { Dropdown } from "floating-vue";
+import "floating-vue/style.css";
+import { TextInput, Card, Icon } from "@bagelink/vue";
 
 type Option =
-	| string
-	| number
-	| Record<string, any>
-	| { label: string; value: string | number };
+  | string
+  | number
+  | Record<string, any>
+  | { label: string; value: string | number };
 
 const searchInput = $ref<HTMLInputElement | null>(null);
 
 const props = defineProps<{
-	options: Option[];
-	placeholder?: string;
-	disabled?: boolean;
-	modelValue?: Option;
-	searchable?: boolean;
-	required?: boolean;
-	label?: string;
-	fullWidth?: boolean;
-	multiselect?: boolean;
+  options: Option[];
+  placeholder?: string;
+  disabled?: boolean;
+  modelValue?: Option;
+  searchable?: boolean;
+  required?: boolean;
+  label?: string;
+  fullWidth?: boolean;
+  multiselect?: boolean;
 }>();
 
 let selectedItems = $ref<Option[]>([]);
-let search = $ref('');
+let search = $ref("");
 
 const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
 
 let open = $ref(false);
 
 function openOptions() {
-	dropdown?.show();
-	// updateOpen(true);
+  dropdown?.show();
+  // updateOpen(true);
 }
 
 function updateOpen(visible: boolean) {
-	open = visible;
-	if (!open) search = '';
-	else {
-		setTimeout(
-			() => (searchInput as any)?.$el?.querySelector('input')?.focus(),
-			100
-		);
-	}
+  open = visible;
+  if (!open) search = "";
+  else {
+    setTimeout(
+      () => (searchInput as any)?.$el?.querySelector("input")?.focus(),
+      100
+    );
+  }
 }
 
 const selectedLabel = $computed(() => {
-	if (selectedItems.length === 0) return props.placeholder || 'Select';
-	if (selectedItems.length > 4) {
-		const str = selectedItems
-			.slice(0, 4)
-			.map((item) => getLabel(item))
-			.join(', ');
-		return `${str}... +${selectedItems.length - 4}`;
-	}
-	return selectedItems.map((item) => getLabel(item)).join(', ');
+  if (selectedItems.length === 0) return props.placeholder || "Select";
+  if (selectedItems.length > 4) {
+    const str = selectedItems
+      .slice(0, 4)
+      .map((item) => getLabel(item))
+      .join(", ");
+    return `${str}... +${selectedItems.length - 4}`;
+  }
+  return selectedItems.map((item) => getLabel(item)).join(", ");
 });
 
-const emit = defineEmits(['update:modelValue']);
+const emit = defineEmits(["update:modelValue"]);
 
 const getLabel = (option: Option) => {
-	if (!option) return '';
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return `${option}`;
-	return option.label;
+  if (!option) return "";
+  if (typeof option === "string") return option;
+  if (typeof option === "number") return `${option}`;
+  return option.label;
 };
 
 const getValue = (option: Option) => {
-	if (!option) return '';
-	if (typeof option === 'string') return option;
-	if (typeof option === 'number') return option;
-	return option.value;
+  if (!option) return "";
+  if (typeof option === "string") return option;
+  if (typeof option === "number") return option;
+  return option.value;
 };
 
 const isSelected = (option: Option) =>
-	!!selectedItems.find((item) => getValue(option) === getValue(item));
+  !!selectedItems.find((item) => getValue(option) === getValue(item));
 
 const filteredOptions = $computed(() =>
-	props.options.filter((option) => {
-		const searchTerm = search
-			.split(/\s+/)
-			.filter(Boolean)
-			.map((t) => new RegExp(t, 'gi'));
-		return (
-			Boolean(option) &&
-			(searchTerm.every((s) => getLabel(option).match(s)) ||
-				searchTerm.length === 0)
-		);
-	})
+  props.options.filter((option) => {
+    const searchTerm = search
+      .split(/\s+/)
+      .filter(Boolean)
+      .map((t) => new RegExp(t, "gi"));
+    return (
+      Boolean(option) &&
+      (searchTerm.every((s) => getLabel(option).match(s)) ||
+        searchTerm.length === 0)
+    );
+  })
 );
 
 const select = (option: Option) => {
-	const existingIndex = selectedItems.findIndex(
-		(item) => getValue(item) === getValue(option)
-	);
-	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
-	else if (props.multiselect) {
-		const current = [...selectedItems];
-		current.push(option);
-
-		selectedItems = current;
-	} else selectedItems.splice(0, selectedItems.length, option);
-
-	if (!props.multiselect) dropdown?.hide();
-	emitUpdate();
+  const existingIndex = selectedItems.findIndex(
+    (item) => getValue(item) === getValue(option)
+  );
+  if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
+  else if (props.multiselect) {
+    const current = [...selectedItems];
+    current.push(option);
+
+    selectedItems = current;
+  } else selectedItems.splice(0, selectedItems.length, option);
+
+  if (!props.multiselect) dropdown?.hide();
+  emitUpdate();
 };
 
 function emitUpdate() {
-	if (props.multiselect) {
-		emit('update:modelValue', selectedItems.map(getValue).filter(Boolean));
-	} else {
-		selectedItems.splice(1, selectedItems.length - 1);
-		const [item] = selectedItems;
-		emit('update:modelValue', item ? getValue(item) : null);
-	}
+  if (props.multiselect) {
+    emit("update:modelValue", selectedItems.map(getValue).filter(Boolean));
+  } else {
+    selectedItems.splice(1, selectedItems.length - 1);
+    const [item] = selectedItems;
+    emit("update:modelValue", item ? getValue(item) : null);
+  }
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-	const arr1Values = [...arr1].map((a) => getValue(a)).filter(Boolean);
-	const arr2Values = [...arr2].map((a) => getValue(a)).filter(Boolean);
-	const isSame = arr1Values.every((item: Option) => arr2Values.includes(item));
-	return isSame;
+  const arr1Values = [...arr1].map((a) => getValue(a)).filter(Boolean);
+  const arr2Values = [...arr2].map((a) => getValue(a)).filter(Boolean);
+  const isSame = arr1Values.every((item: Option) => arr2Values.includes(item));
+  return isSame;
 }
 
 watch(
-	() => props.modelValue,
-	(newVal: Option | Option[]) => {
-		if (!props.multiselect) {
-			const newOption =
-				props.options.find((o) => getValue(o) === newVal) || newVal;
-			if (newOption && !isSelected(newOption)) selectedItems = [newOption];
-		} else {
-			const isSame = compareArrays([newVal].flat(), selectedItems);
-			if (!isSame) {
-				selectedItems.splice(0, selectedItems.length, ...[newVal].flat());
-			}
-		}
-	},
-	{ immediate: true }
+  () => props.modelValue,
+  (newVal: Option | Option[]) => {
+    if (!props.multiselect) {
+      const newOption =
+        props.options.find((o) => getValue(o) === newVal) || newVal;
+      if (newOption && !isSelected(newOption)) selectedItems = [newOption];
+    } else {
+      const isSame = compareArrays([newVal].flat(), selectedItems);
+      if (!isSame) {
+        selectedItems.splice(0, selectedItems.length, ...[newVal].flat());
+      }
+    }
+  },
+  { immediate: true }
 );
 
 watch(
-	() => props.options,
-	() => {
-		selectedItems.forEach((option, i) => {
-			const exists = props.options.find(
-				(o) => getValue(o) === getValue(option)
-			);
-			if (!exists) selectedItems.splice(i, 1);
-			else selectedItems.splice(i, 1, exists);
-		});
-		// const original = JSON.stringify(props.options.map(getValue));
-		// const newSelection = JSON.stringify(selectedItems.map(getValue));
-		// if (original !== newSelection) emitUpdate();
-	},
-	{ deep: true, immediate: true }
+  () => props.options,
+  () => {
+    selectedItems.forEach((option, i) => {
+      const exists = props.options.find(
+        (o) => getValue(o) === getValue(option)
+      );
+      if (!exists) selectedItems.splice(i, 1);
+      else selectedItems.splice(i, 1, exists);
+    });
+    // const original = JSON.stringify(props.options.map(getValue));
+    // const newSelection = JSON.stringify(selectedItems.map(getValue));
+    // if (original !== newSelection) emitUpdate();
+  },
+  { deep: true, immediate: true }
 );
 </script>
 
 <style scoped>
 .selectinput {
-	width: 100%;
+  width: 100%;
 }
 
 .selectinput-option {
-	padding: 6px 12px;
-	cursor: pointer;
-	border-radius: 5px;
-	transition: all 0.2s;
-	display: grid;
-	grid-template-columns: 10px 1fr;
-	justify-content: space-between;
-	width: 100%;
-	font-size: var(--input-font-size);
+  padding: 6px 12px;
+  cursor: pointer;
+  border-radius: 5px;
+  transition: all 0.2s;
+  display: grid;
+  grid-template-columns: 10px 1fr;
+  justify-content: space-between;
+  width: 100%;
+  font-size: var(--input-font-size);
 }
 
 .selectinput-options {
-	max-height: 300px;
-	overflow-y: auto;
+  max-height: 300px;
+  overflow-y: auto;
 }
 
 .selectinput-option:hover {
-	background: var(--bgl-gray-20);
+  background: var(--bgl-gray-20);
 }
 .isEmpty p {
-	opacity: 0.3;
+  opacity: 0.3;
 }
 </style>
 
 <style>
 .bagel-input label {
-	font-size: var(--label-font-size);
+  font-size: var(--label-font-size);
 }
 
 .selectinput-btn {
-	display: flex;
-	justify-content: space-between;
-	align-items: center;
-	height: var(--input-height);
-	border-radius: var(--input-border-radius);
-	border: none;
-	background: var(--input-bg);
-	padding: 0.7rem;
-	color: var(--input-color);
-	width: 100%;
-	font-family: inherit;
-	font-size: var(--input-font-size);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: var(--input-height);
+  border-radius: var(--input-border-radius);
+  border: none;
+  background: var(--input-bg);
+  padding: 0.7rem;
+  color: var(--input-color);
+  width: 100%;
+  font-family: inherit;
+  font-size: var(--input-font-size);
 }
 
 .selectinput-btn:disabled {
-	color: var(--input-disabled-color);
-	background-color: transparent;
+  color: var(--input-disabled-color);
+  background-color: transparent;
 }
 
 .selectinput-btn:focus {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
+  outline: none;
+  box-shadow: inset 0 0 10px #00000012;
 }
 
 .v-popper__arrow-container {
-	display: none;
+  display: none;
 }
 
 .v-popper--theme-dropdown .v-popper__inner {
-	border: none;
-	/* background: transparent; if anyone is changing this please talk to me first*/
-	border-radius: var(--card-border-radius);
-	color: var(--input-color);
+  border: none;
+  /* background: transparent; if anyone is changing this please talk to me first*/
+  border-radius: var(--card-border-radius);
+  color: var(--input-color);
 }
 </style>

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

@@ -96,6 +96,7 @@ const props = withDefaults(
 		autoheight?: boolean;
 		code?: boolean;
 		lines?: number;
+		// eslint-disable-next-line max-len
 		autocomplete?: string;
 		autofocus?: boolean;
 	}>(),
@@ -103,7 +104,6 @@ const props = withDefaults(
 		type: 'text',
 		toggleEdit: false,
 		modelValue: '',
-		autocomplete: 'off',
 	},
 );
 let inputVal = $ref<string | number>();

package/src/components/layout/Tabs.vue

@@ -1,5 +1,5 @@
 <template>
-	<TabsNav :tabs="tabs" :group="group" class="mb-05" />
+	<TabsNav v-model="slctTab" :tabs="tabs" :group="group" class="mb-05" />
 	<div v-if="currentTab">
 		<template v-if="slots[currentTab]">
 			<slot :name="currentTab" />
@@ -9,10 +9,11 @@
 		</template>
 	</div>
 </template>
-
+z
 <script setup lang="ts">
 import { TabsNav, type Tab } from '@bagelink/vue';
-import { defineProps, useSlots, h, defineComponent } from 'vue';
+import { defineProps, useSlots, h, type VNode, defineComponent } from 'vue';
+
 import { useTabs } from './tabsManager';
 
 const props = defineProps<{
@@ -26,13 +27,21 @@ const { currentTab } = useTabs(group);
 
 const tabValue = (tab: Tab) => (typeof tab === 'string' ? tab : tab.id);
 
+const emit = defineEmits(['update:modelValue']);
+
+const slctTab = $computed({
+	get: () => props.modelValue || tabValue(props.tabs[0]),
+	set: (value) => emit('update:modelValue', value),
+});
+
 const tabComponent = defineComponent({
 	render() {
 		const currentTabIndex = props.tabs.findIndex(
-			(tab) => tabValue(tab) === currentTab.value
+			(tab) => tabValue(tab) === currentTab.value,
 		);
 		const slotChildren = slots?.default?.()?.[1]?.children;
-		return h('div', slotChildren?.[currentTabIndex]);
+
+		return h('div', (slotChildren as VNode[])[currentTabIndex]);
 	},
 });
 </script>

package/src/components/layout/TabsNav.vue

@@ -6,7 +6,8 @@
 			@click="selectTab(tab)"
 			class="bgl_tab"
 			v-for="(tab, i) in tabs"
-			:key="i">
+			:key="i"
+		>
 			<Icon v-if="typeof tab !== 'string' && tab.icon" :icon="tab.icon" />
 			{{ tabLabel(tab) }}
 		</button>
@@ -15,6 +16,7 @@
 
 <script setup lang="ts">
 import { type Tab, Icon } from '@bagelink/vue';
+import { watch } from 'vue';
 import { useTabs } from './tabsManager';
 
 const props = defineProps<{
@@ -41,39 +43,57 @@ const isActive = (tab: Tab) => {
 	if (typeof tab === 'string') return currentTab.value === tab;
 	return currentTab.value === tab.id;
 };
+
 const tabLabel = (tab: Tab) => {
 	if (typeof tab === 'string') return tab;
 	return tab.label;
 };
+
+watch(
+	() => props.modelValue,
+	(value) => {
+		if (value && !isActive(value)) currentTab.value = value;
+	},
+	{ immediate: true },
+);
 </script>
 
 <style scoped>
 .bgl_tabs_wrap {
+	background: var(--input-bg);
+	border-radius: calc(var(--input-border-radius) * 1.4);
+	padding-inline: calc(var(--btn-padding) / 8);
+	padding-block: calc(var(--btn-padding) / 8);
+	box-shadow: inset 0 0 10px #00000012;
+	gap: 0.25rem;
 }
 .bgl_tab {
 	border: none;
-	border-bottom: 2px solid var(--border-color);
 	background: transparent;
+	cursor: pointer;
 	font-size: var(--input-font-size);
 	font-family: inherit;
-	cursor: pointer;
 	transition: var(--bgl-transition);
-	padding-inline-start: calc(var(--btn-padding) / 2);
-	padding-inline-end: calc(var(--btn-padding) / 2);
-	padding-bottom: calc(var(--btn-padding) / 4);
+	padding-inline: calc(var(--btn-padding) / 2);
+	padding-block: calc(var(--btn-padding) / 8);
+	border-radius: var(--input-border-radius);
 }
-
-.bgl_tab.currentTab {
-	border-bottom: 2px solid var(--primary-color);
-}
-
+.bgl_tab.currentTab,
 .bgl_tab.active {
-	color: var(--bgl-primary);
-	border-bottom: 2px solid var(--bgl-primary);
+	background: var(--bgl-white);
+	box-shadow: 0 0 10px #00000011;
+	position: relative;
 }
 
 .bgl_tab:hover {
-	color: var(--bgl-primary);
+	background: var(--input-bg);
+	filter: brightness(95%);
+}
+.bgl_tab.currentTab:hover,
+.bgl_tab.active:hover {
+	background: var(--bgl-white);
+	filter: brightness(100%);
+	box-shadow: 0 0 10px #00000022;
 }
 
 .bgl_tab:active {