@bagelink/vue 0.0.348 → 0.0.350

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

@@ -1,53 +1,89 @@
 <template>
-  <Dropdown @hide="updateOpen(false)" ref="dropdown" placement="bottom-start" class="bagel-input selectinput">
-    <label>
-      {{ label }}
-      <button @click="updateOpen(true)" :disabled="disabled" type="button" class="selectinput-btn">
-        {{ selecteLabel }}
-        <Icon v-bind="{ 'icon': open ? 'unfold_less' : 'unfold_more' }" />
-      </button>
-      <input style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1;" v-if="required"
-        v-model="selectedItems" required>
-    </label>
-    <template #popper="{ hide }">
-      <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
+		@hide="updateOpen(false)"
+		ref="dropdown"
+		placement="bottom-start"
+		class="bagel-input selectinput"
+	>
+		<label>
+			{{ label }}
+			<button
+				@click="updateOpen(true)"
+				:disabled="disabled"
+				type="button"
+				class="selectinput-btn"
+				:class="{isEmpty: selectedItems.length ===0}"
+			>
+				<p>{{ selectedLabel }}</p>
+				<Icon v-bind="{ icon: open ? 'unfold_less' : 'unfold_more' }" />
+			</button>
+			<input
+				style="width: 0; height: 0; position: absolute; opacity: 0; z-index: -1"
+				v-if="required"
+				v-model="selectedItems"
+				required
+			>
+		</label>
+		<template #popper="{ hide }">
+			<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 { TextInput, Card, Icon } from '@bagelink/vue';
 
-type Option = string | number | Record<string, any> | { label: string, value: string | number };
+type Option =
+	| 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;
 }>();
 
 const selectedItems = $ref<Option[]>([]);
@@ -58,150 +94,172 @@ const dropdown = $ref<InstanceType<typeof Dropdown> | null>(null);
 let open = $ref(false);
 
 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 selecteLabel = $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(', ');
+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(', ');
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const getLabel = (option: Option) => {
-  if (typeof option === 'string') return option;
-  if (typeof option === 'number') return `${option}`;
-  return option.label;
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
 };
 
 const getValue = (option: Option) => {
-  if (typeof option === 'string') return option;
-  if (typeof option === 'number') return option;
-  return option.value;
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return option;
+	return option.value;
 };
 
-const isSelected = (option: Option) => selectedItems.includes(getValue(option));
+const isSelected = (option: Option) => !!selectedItems.find((item) => getValue(option) === getValue(item));
 
 const filteredOptions = $computed(() => props.options.filter((option) => {
-  const searchTerm = new RegExp(search, 'gi');
-  if (typeof option === 'string') return option.match(searchTerm);
-  if (typeof option === 'number') return `${option}`.match(searchTerm);
-  return option.label.match(searchTerm);
+	const searchTerm = new RegExp(search, 'gi');
+	return (
+		Boolean(option) &&
+			(getLabel(option).match(searchTerm) || getValue(option).match(searchTerm))
+	);
 }));
 
 const select = (option: Option) => {
-  const existingIndex = selectedItems.findIndex((item) => {
-    if (typeof item === 'string' || typeof item === 'number') return item === option;
-    return item.value === option;
-  });
-  if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
-  else if (props.multiselect) {
-    selectedItems.push(getValue(option));
-  } else {
-    selectedItems.splice(0, selectedItems.length, getValue(option));
-    dropdown?.hide();
-  }
-  emitUpdate();
+	const existingIndex = selectedItems.findIndex((item) => getValue(item) === getValue(option));
+	if (existingIndex > -1) selectedItems.splice(existingIndex, 1);
+	else if (props.multiselect) {
+		selectedItems.push(option);
+	} else {
+		selectedItems.splice(0, selectedItems.length, option);
+	}
+	if (!props.multiselect) dropdown?.hide();
+	emitUpdate();
 };
 
 function emitUpdate() {
-  if (props.multiselect) {
-    emit('update:modelValue', selectedItems);
-  } else {
-    selectedItems.splice(1, selectedItems.length);
-    emit('update:modelValue', selectedItems[0]);
-  }
+	if (props.multiselect) {
+		emit('update:modelValue', selectedItems.map(getValue));
+	} else {
+		selectedItems.splice(1, selectedItems.length - 1);
+		const [item] = selectedItems;
+		emit('update:modelValue', item ? getValue(item) : null);
+	}
 }
 
 function compareArrays(arr1: Option[], arr2: Option[]) {
-  const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
-  return isSame;
+	const isSame = arr1.every((item: Option) => arr2.map((a) => getValue(a)).includes(getValue(item)));
+	return isSame;
 }
 
 watch(
-  () => props.modelValue,
-  (newVal: Option | Option[]) => {
-    if (!newVal) return;
-    if (!props.multiselect) {
-      if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
-    } else {
-      const isSame = compareArrays([newVal].flat(), selectedItems);
-      if (!isSame) selectedItems.splice(0, selectedItems.length, [newVal].flat());
-    }
-  },
-  { immediate: true },
+	() => props.modelValue,
+	(newVal: Option | Option[]) => {
+		if (!newVal) return;
+		if (!props.multiselect) {
+			if (!isSelected(newVal)) selectedItems.splice(0, selectedItems.length, newVal);
+		} else {
+			const isSame = compareArrays([newVal].flat(), selectedItems);
+			if (!isSame) selectedItems.splice(0, selectedItems.length, [newVal].flat());
+		}
+	},
+	{ immediate: true },
 );
+
+watch(() => props.options, () => {
+	const original = JSON.stringify(selectedItems);
+	[...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 newSelection = JSON.stringify(selectedItems);
+	if (original !== newSelection) emitUpdate();
+});
 </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;
 }
 </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;
+	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 {
-  background: var(--input-disabled-bg);
-  color: var(--input-disabled-color);
+	color: var(--input-disabled-color);
 }
 
 .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;
-  border-radius: var(--card-border-radius);
+	border: none;
+	background: transparent;
+	border-radius: var(--card-border-radius);
+	color: var(--input-color);
 }
 </style>

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

@@ -11,3 +11,4 @@ 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 { Dropdown } from 'floating-vue';

package/src/styles/buttons.css

@@ -65,8 +65,16 @@
     filter: brightness(80%);
 }
 
+.border {
+    border: 1px solid var(--border-color);
+}
+
 @media screen and (max-width: 910px) {
     .bgl_btn {
         padding: 0 20px;
     }
+
+    .m_border {
+        border: 1px solid var(--border-color);
+    }
 }

package/src/styles/layout.css

@@ -1404,11 +1404,11 @@
 }
 
 .vh-100 {
-    height: 100vh;
+    height: 100vh !important;
 }
 
 .h-100px {
-    height: 100px;
+    height: 100px !important;
 }
 
 .hm-100px {
@@ -1517,6 +1517,42 @@
     overflow-y: hidden;
 }
 
+.grid-wrap-50 {
+    grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
+    height: max-content;
+    width: 100%
+}
+
+.grid-wrap-100 {
+    grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
+    height: max-content;
+    width: 100%
+}
+
+.grid-wrap-200 {
+    grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+    height: max-content;
+    width: 100%
+}
+
+.grid-wrap-300 {
+    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+    height: max-content;
+    width: 100%
+}
+
+.grid-wrap-400 {
+    grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
+    height: max-content;
+    width: 100%
+}
+
+.grid-wrap-500 {
+    grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
+    height: max-content;
+    width: 100%
+}
+
 .grid-wrap-1 {
     grid-template-columns: repeat(1, 1fr);
     height: max-content;

package/src/styles/mobilLayout.css

@@ -1423,6 +1423,43 @@
         overflow-y: hidden;
     }
 
+
+    .m_grid-wrap-50 {
+        grid-template-columns: repeat(auto-fit, minmax(min(50px, 100%), 1fr));
+        height: max-content;
+        width: 100%
+    }
+
+    .m_grid-wrap-100 {
+        grid-template-columns: repeat(auto-fit, minmax(min(100px, 100%), 1fr));
+        height: max-content;
+        width: 100%
+    }
+
+    .m_grid-wrap-200 {
+        grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+        height: max-content;
+        width: 100%
+    }
+
+    .m_grid-wrap-300 {
+        grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
+        height: max-content;
+        width: 100%
+    }
+
+    .m_grid-wrap-400 {
+        grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr));
+        height: max-content;
+        width: 100%
+    }
+
+    .m_grid-wrap-500 {
+        grid-template-columns: repeat(auto-fit, minmax(min(500px, 100%), 1fr));
+        height: max-content;
+        width: 100%
+    }
+
     .m_grid-wrap-1 {
         grid-template-columns: repeat(1, 1fr);
         height: max-content;