@bagelink/vue 0.0.431 → 0.0.437

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

@@ -1,302 +1,299 @@
 <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;
+const getValue = (option?: Option) => {
+	if (!option) return undefined;
+	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));
-
-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)
-    );
-  })
-);
+const isSelected = (option: Option) => !!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)
+	);
+}));
 
 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', getValue(item));
+	}
 }
 
 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/styles/bagel.css

@@ -16,13 +16,6 @@
     --transition-ease: cubic-bezier(0.1, 0.5, 0.33, 1);
 }
 
-body {
-    max-width: 100vw;
-    height: 100vh;
-    padding: 0;
-    margin: 0;
-}
-
 .grid>* {
     min-height: 0;
 }
@@ -31,7 +24,66 @@ body {
     box-sizing: border-box;
 }
 
-@media (min-width: 992px) {}
+
+html {
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+    background-attachment: scroll;
+}
+
+body {
+    margin: 0;
+    min-height: 100%;
+    background-color: var(--bgl-bg);
+    font-family: var(--bgl-font);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 1.65;
+    width: auto;
+    height: auto;
+}
+
+a {
+    background-color: transparent;
+    cursor: pointer;
+    display: inline-block;
+    color: inherit;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+hr {
+    box-sizing: content-box;
+}
+
+img,
+video,
+canvas,
+audio,
+iframe,
+embed,
+object {
+    max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+}
+
+input,
+button,
+textarea,
+select {
+    font: inherit;
+}
+
 
 @media screen and (max-width: 910px) {