@bagelink/vue 0.0.270 → 0.0.280

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

@@ -1,24 +1,12 @@
 <template>
-	<div class="pb-1">
-		<label
-			class="txt-start"
-			:for="id"
-		>
-			{{ label }}
-			<Multiselect
-				ref="multiselect"
-				:id="id"
-				label="label"
-				trackBy="value"
-				:options="optionList"
-				:required
-				:placeholder
-				v-model="seletValue"
-				v-bind="extraProps"
-			/>
-			<!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
-		</label>
-	</div>
+  <div class="pb-1">
+    <label class="txt-start" :for="id">
+      {{ label }}
+      <Multiselect ref="multiselect" :id="id" label="label" trackBy="value" :options="optionList" :required="required"
+        :placeholder="placeholder" v-model="seletValue" :close-on-select="true" v-bind="extraProps" />
+      <!-- <input v-model="dataValue" type="hidden" :name="id" :required v-bind="extraProps"> -->
+    </label>
+  </div>
 </template>
 
 <script lang="ts" setup>
@@ -26,20 +14,20 @@ import { watch } from 'vue';
 import Multiselect from 'vue-multiselect';
 
 type Option = {
-	label: string;
-	value: string | number;
+  label: string;
+  value: string | number;
 };
 type RawOption = Option | string | number;
 
 const props = defineProps<{
-	required?: boolean,
-	label?: string,
-	id?: string,
-	modelValue?: string | number,
-	placeholder?: string,
-	defaultValue?: string | number,
-	options: RawOption[] | string
-	extraProps?: Record<string, any>
+  required?: boolean,
+  label?: string,
+  id?: string,
+  modelValue?: string | number,
+  placeholder?: string,
+  defaultValue?: string | number,
+  options: RawOption[] | string
+  extraProps?: Record<string, any>
 }>();
 
 let dataValue = $ref<string | number | undefined>(props.modelValue || props.defaultValue);
@@ -48,24 +36,24 @@ const emit = defineEmits(['update:modelValue']);
 const optionList = $ref<Option[]>([]);
 
 const seletValue = $computed({
-	get: () => optionList.find((opt) => opt.value === dataValue),
-	set: (val?: Option) => {
-		dataValue = val?.value;
-		emit('update:modelValue', dataValue);
-	},
+  get: () => optionList.find((opt) => opt.value === dataValue),
+  set: (val?: Option) => {
+    dataValue = val?.value;
+    emit('update:modelValue', dataValue);
+  },
 });
 
 function optnToValueLabel(option: RawOption): Option {
-	if (typeof option === 'string' || typeof option === 'number') {
-		return { label: `${option}`, value: option };
-	}
-	return option;
+  if (typeof option === 'string' || typeof option === 'number') {
+    return { label: `${option}`, value: option };
+  }
+  return option;
 }
 
 function updateOptionList() {
-	const { options } = props;
-	const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
-	optionList.push(...optnLst.map(optnToValueLabel));
+  const { options } = props;
+  const optnLst = typeof options === 'string' ? options.split('\n|,') : options || [];
+  optionList.push(...optnLst.map(optnToValueLabel));
 }
 
 watch(() => props.options, updateOptionList, { immediate: true });
@@ -73,211 +61,211 @@ watch(() => props.options, updateOptionList, { immediate: true });
 
 <style>
 fieldset[disabled] .multiselect {
-	pointer-events: none;
+  pointer-events: none;
 }
 
 .multiselect__spinner {
-	position: absolute;
-	right: 1px;
-	top: 1px;
-	width: 40px;
-	height: 38px;
-	background: #fff;
-	display: block;
+  position: absolute;
+  right: 1px;
+  top: 1px;
+  width: 40px;
+  height: 38px;
+  background: #fff;
+  display: block;
 }
 
 .multiselect__spinner::before,
 .multiselect__spinner::after {
-	position: absolute;
-	content: "";
-	top: 50%;
-	left: 50%;
-	margin: -8px 0 0 -8px;
-	width: 16px;
-	height: 16px;
-	border-radius: 100%;
-	border-color: var(--bgl-primary-tint) transparent transparent;
-	border-style: solid;
-	border-width: 2px;
-	box-shadow: 0 0 0 1px transparent;
+  position: absolute;
+  content: "";
+  top: 50%;
+  left: 50%;
+  margin: -8px 0 0 -8px;
+  width: 16px;
+  height: 16px;
+  border-radius: 100%;
+  border-color: var(--bgl-primary-tint) transparent transparent;
+  border-style: solid;
+  border-width: 2px;
+  box-shadow: 0 0 0 1px transparent;
 }
 
 .multiselect__spinner::before {
-	animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
-	animation-iteration-count: infinite;
+  animation: spinning 2.4s cubic-bezier(0.41, 0.26, 0.2, 0.62);
+  animation-iteration-count: infinite;
 }
 
 .multiselect__spinner::after {
-	animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
-	animation-iteration-count: infinite;
+  animation: spinning 2.4s cubic-bezier(0.51, 0.09, 0.21, 0.8);
+  animation-iteration-count: infinite;
 }
 
 .multiselect__loading-enter-active,
 .multiselect__loading-leave-active {
-	transition: opacity 0.4s ease-in-out;
-	opacity: 1;
+  transition: opacity 0.4s ease-in-out;
+  opacity: 1;
 }
 
 .multiselect__loading-enter,
 .multiselect__loading-leave-active {
-	opacity: 0;
+  opacity: 0;
 }
 
 .multiselect,
 .multiselect__input,
 .multiselect__single {
-	font-family: inherit;
-	font-size: var(--input-font-size);
-	touch-action: manipulation;
+  font-family: inherit;
+  font-size: var(--input-font-size);
+  touch-action: manipulation;
 }
 
 .multiselect {
-	box-sizing: content-box;
-	display: block;
-	position: relative;
-	width: 100%;
-	min-height: var(--input-height);
-	text-align: left;
-	color: var(--input-color);
+  box-sizing: content-box;
+  display: block;
+  position: relative;
+  width: 100%;
+  min-height: var(--input-height);
+  text-align: left;
+  color: var(--input-color);
 }
 
 .multiselect * {
-	box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 .multiselect:focus {
-	outline: none;
+  outline: none;
 }
 
 .multiselect--disabled {
-	background: #ededed;
-	pointer-events: none;
-	opacity: 0.6;
+  background: #ededed;
+  pointer-events: none;
+  opacity: 0.6;
 }
 
 .multiselect--active {
-	z-index: 50;
+  z-index: 50;
 }
 
 .multiselect--active:not(.multiselect--above) .multiselect__current,
 .multiselect--active:not(.multiselect--above) .multiselect__input,
 .multiselect--active:not(.multiselect--above) .multiselect__tags {
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
 }
 
 .multiselect--active:not(.multiselect--above) .multiselect__tags {
-	box-shadow: inset 0 0 10px #00000012;
+  box-shadow: inset 0 0 10px #00000012;
 }
 
 .multiselect--active .multiselect__select {
-	transform: rotateZ(180deg);
+  transform: rotateZ(180deg);
 }
 
 .multiselect--above.multiselect--active .multiselect__current,
 .multiselect--above.multiselect--active .multiselect__input,
 .multiselect--above.multiselect--active .multiselect__tags {
-	border-top-left-radius: 0;
-	border-top-right-radius: 0;
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
 }
 
 .multiselect__input,
 .multiselect__single {
-	position: relative;
-	display: inline-block;
-	border: none;
-	background: var(--input-bg);
-	width: calc(100%);
-	transition: border 0.1s ease;
-	box-sizing: border-box;
-	vertical-align: top;
-	font-size: var(--input-font-size);
-	padding-inline-start: 0rem;
+  position: relative;
+  display: inline-block;
+  border: none;
+  background: var(--input-bg);
+  width: calc(100%);
+  transition: border 0.1s ease;
+  box-sizing: border-box;
+  vertical-align: top;
+  font-size: var(--input-font-size);
+  padding-inline-start: 0rem;
 }
 
 .multiselect--active .multiselect__input {
-	margin-top: -0.6rem;
+  margin-top: -0.6rem;
 }
 
 .multiselect__input::placeholder {
-	color: var(--input-color);
+  color: var(--input-color);
 }
 
 .multiselect__tag~.multiselect__input,
 .multiselect__tag~.multiselect__single {
-	width: auto;
+  width: auto;
 }
 
 .multiselect__input:hover,
 .multiselect__single:hover {
-	border-color: #cfcfcf;
+  border-color: #cfcfcf;
 }
 
 .multiselect__input:focus,
 .multiselect__single:focus {
-	border-color: #a8a8a8;
-	outline: none;
+  border-color: #a8a8a8;
+  outline: none;
 }
 
 .multiselect__single {
-	/* padding-left: 5px; */
-	margin-bottom: 8px;
+  /* padding-left: 5px; */
+  margin-bottom: 8px;
 }
 
 .multiselect__tags-wrap {
-	display: inline;
+  display: inline;
 }
 
 .multiselect__tags {
-	/* min-height: 40px; */
-	display: block;
-	/* padding: 0.7rem 40px 0.7rem 8px; */
-	border-radius: var(--input-border-radius);
-	background: var(--input-bg);
-	font-size: var(--input-font-size);
-	height: var(--input-height);
-	line-height: 0;
-	padding: calc(var(--input-height) / 2);
-	padding-inline-end: 40px;
-	padding-inline-start: 0.7rem;
+  /* min-height: 40px; */
+  display: block;
+  /* padding: 0.7rem 40px 0.7rem 8px; */
+  border-radius: var(--input-border-radius);
+  background: var(--input-bg);
+  font-size: var(--input-font-size);
+  height: var(--input-height);
+  line-height: 0;
+  padding: calc(var(--input-height) / 2);
+  padding-inline-end: 40px;
+  padding-inline-start: 0.7rem;
 }
 
 .multiselect__tag {
-	position: relative;
-	display: inline-block;
-	padding: 4px 26px 4px 10px;
-	border-radius: 5px;
-	margin-right: 10px;
-	color: #fff;
-	line-height: 1;
-	background: var(--bgl-primary-tint);
-	margin-bottom: 5px;
-	white-space: nowrap;
-	overflow: hidden;
-	max-width: 100%;
-	text-overflow: ellipsis;
+  position: relative;
+  display: inline-block;
+  padding: 4px 26px 4px 10px;
+  border-radius: 5px;
+  margin-right: 10px;
+  color: #fff;
+  line-height: 1;
+  background: var(--bgl-primary-tint);
+  margin-bottom: 5px;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+  text-overflow: ellipsis;
 }
 
 .multiselect__tag-icon {
-	cursor: pointer;
-	margin-left: 7px;
-	position: absolute;
-	right: 0;
-	top: 0;
-	bottom: 0;
-	font-weight: 700;
-	font-style: initial;
-	width: 22px;
-	text-align: center;
-	line-height: 22px;
-	transition: all 0.2s ease;
-	border-radius: 5px;
+  cursor: pointer;
+  margin-left: 7px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  font-weight: 700;
+  font-style: initial;
+  width: 22px;
+  text-align: center;
+  line-height: 22px;
+  transition: all 0.2s ease;
+  border-radius: 5px;
 }
 
 .multiselect__tag-icon::after {
-	content: "×";
-	color: #266d4d;
-	font-size: 14px;
+  content: "×";
+  color: #266d4d;
+  font-size: 14px;
 }
 
 /* // Remove these lines to avoid green closing button
@@ -288,250 +276,250 @@ fieldset[disabled] .multiselect {
 
 .multiselect__tag-icon:focus::after,
 .multiselect__tag-icon:hover::after {
-	color: white;
+  color: white;
 }
 
 .multiselect__current {
-	line-height: 16px;
-	min-height: 40px;
-	box-sizing: border-box;
-	display: block;
-	overflow: hidden;
-	padding: 8px 12px 0;
-	padding-right: 30px;
-	white-space: nowrap;
-	margin: 0;
-	text-decoration: none;
-	border-radius: 5px;
-	/* border: 1px solid #e8e8e8; */
-	cursor: pointer;
+  line-height: 16px;
+  min-height: 40px;
+  box-sizing: border-box;
+  display: block;
+  overflow: hidden;
+  padding: 8px 12px 0;
+  padding-right: 30px;
+  white-space: nowrap;
+  margin: 0;
+  text-decoration: none;
+  border-radius: 5px;
+  /* border: 1px solid #e8e8e8; */
+  cursor: pointer;
 }
 
 .multiselect__select {
-	line-height: 16px;
-	display: block;
-	position: absolute;
-	box-sizing: border-box;
-	/* width: 40px; */
-	/* height: 38px; */
-	right: 1px;
-	top: 1px;
-	padding: 4px 8px;
-	margin: 0;
-	text-decoration: none;
-	text-align: center;
-	cursor: pointer;
-	transition: transform 0.2s ease;
-	padding-top: calc(var(--input-height) / 2 - 0.7rem);
+  line-height: 16px;
+  display: block;
+  position: absolute;
+  box-sizing: border-box;
+  /* width: 40px; */
+  /* height: 38px; */
+  right: 1px;
+  top: 1px;
+  padding: 4px 8px;
+  margin: 0;
+  text-decoration: none;
+  text-align: center;
+  cursor: pointer;
+  transition: transform 0.2s ease;
+  padding-top: calc(var(--input-height) / 2 - 0.7rem);
 
 }
 
 .multiselect__select::before {
-	position: relative;
-	background-size: contain;
-	transform: scale(0.5);
-	color: var(--bgl-black);
-	content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
+  position: relative;
+  background-size: contain;
+  transform: scale(0.5);
+  color: var(--bgl-black);
+  content: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' fill='%23b7b7b7' height='24' viewBox='0 -960 960 960' width='24'><path d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z'/></svg>");
 }
 
 .multiselect__placeholder {
-	color: var(--placeholder-color);
-	display: inline-block;
-	margin-bottom: 10px;
+  color: var(--placeholder-color);
+  display: inline-block;
+  margin-bottom: 10px;
 
 }
 
 .multiselect--active .multiselect__placeholder {
-	display: none;
+  display: none;
 }
 
 .multiselect__content-wrapper {
-	position: absolute;
-	display: block;
-	background: #fff;
-	width: 100%;
-	max-height: 240px;
-	overflow: auto;
-	box-shadow: 0 0 10px #00000012;
-	border-top: none;
-	border-bottom-left-radius: 5px;
-	border-bottom-right-radius: 5px;
-	z-index: 50;
-	-webkit-overflow-scrolling: touch;
+  position: absolute;
+  display: block;
+  background: #fff;
+  width: 100%;
+  max-height: 240px;
+  overflow: auto;
+  box-shadow: 0 0 10px #00000012;
+  border-top: none;
+  border-bottom-left-radius: 5px;
+  border-bottom-right-radius: 5px;
+  z-index: 50;
+  -webkit-overflow-scrolling: touch;
 }
 
 .multiselect__content {
-	list-style: none;
-	display: inline-block;
-	padding: 0;
-	margin: 0;
-	min-width: 100%;
-	vertical-align: top;
+  list-style: none;
+  display: inline-block;
+  padding: 0;
+  margin: 0;
+  min-width: 100%;
+  vertical-align: top;
 }
 
 .multiselect--above .multiselect__content-wrapper {
-	bottom: 100%;
-	border-bottom-left-radius: 0;
-	border-bottom-right-radius: 0;
-	border-top-left-radius: 5px;
-	border-top-right-radius: 5px;
-	border-bottom: none;
-	border-top: 1px solid #e8e8e8;
+  bottom: 100%;
+  border-bottom-left-radius: 0;
+  border-bottom-right-radius: 0;
+  border-top-left-radius: 5px;
+  border-top-right-radius: 5px;
+  border-bottom: none;
+  border-top: 1px solid #e8e8e8;
 }
 
 .multiselect__content::-webkit-scrollbar {
-	display: none;
+  display: none;
 }
 
 .multiselect__element {
-	display: block;
+  display: block;
 }
 
 .multiselect__option {
-	display: block;
-	padding-inline-start: 12px;
-	min-height: calc(var(--input-height) * 0.8);
-	line-height: calc(var(--input-height) * 0.8);
-	text-decoration: none;
-	text-transform: none;
-	position: relative;
-	cursor: pointer;
-	white-space: nowrap;
+  display: block;
+  padding-inline-start: 12px;
+  min-height: calc(var(--input-height) * 0.8);
+  line-height: calc(var(--input-height) * 0.8);
+  text-decoration: none;
+  text-transform: none;
+  position: relative;
+  cursor: pointer;
+  white-space: nowrap;
 }
 
 .multiselect__option::after {
-	top: 0;
-	right: 0;
-	position: absolute;
-	width: calc(var(--input-height) * 0.8);
-	height: calc(var(--input-height) * 0.8);
-	;
-	text-align: center;
-	font-size: 13px;
+  top: 0;
+  right: 0;
+  position: absolute;
+  width: calc(var(--input-height) * 0.8);
+  height: calc(var(--input-height) * 0.8);
+  ;
+  text-align: center;
+  font-size: 13px;
 }
 
 .multiselect__option--highlight {
-	background: var(--bgl-primary-light);
-	outline: none;
-	color: var(--bgl-primary);
+  background: var(--bgl-primary-light);
+  outline: none;
+  color: var(--bgl-primary);
 }
 
 .multiselect__option--selected {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
-	font-weight: bold;
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+  font-weight: bold;
 }
 
 .multiselect__option--selected.multiselect__option--highlight {
-	filter: brightness(0.9);
-	color: #fff;
+  filter: brightness(0.9);
+  color: #fff;
 }
 
 .multiselect__option--selected.multiselect__option--highlight::after {
-	content: "✕";
-	color: var(--bgl-white);
+  content: "✕";
+  color: var(--bgl-white);
 }
 
 .multiselect--disabled .multiselect__current,
 .multiselect--disabled .multiselect__select {
-	background: #ededed;
-	color: #a6a6a6;
+  background: #ededed;
+  color: #a6a6a6;
 }
 
 .multiselect__option--disabled {
-	background: #ededed !important;
-	color: #a6a6a6 !important;
-	cursor: text;
-	pointer-events: none;
+  background: #ededed !important;
+  color: #a6a6a6 !important;
+  cursor: text;
+  pointer-events: none;
 }
 
 .multiselect__option--group {
-	background: #ededed;
-	color: var(--input-color);
+  background: #ededed;
+  color: var(--input-color);
 }
 
 .multiselect__option--group.multiselect__option--highlight {
-	background: var(--input-color);
-	color: #fff;
+  background: var(--input-color);
+  color: #fff;
 }
 
 .multiselect__option--group.multiselect__option--highlight::after {
-	background: var(--input-color);
+  background: var(--input-color);
 }
 
 .multiselect__option--disabled.multiselect__option--highlight {
-	background: #dedede;
+  background: #dedede;
 }
 
 .multiselect__option--group-selected.multiselect__option--highlight {
-	background: var(--bgl-red);
-	color: #fff;
+  background: var(--bgl-red);
+  color: #fff;
 }
 
 .multiselect__option--group-selected.multiselect__option--highlight::after {
-	background: var(--bgl-red);
-	content: attr(data-deselect);
-	color: #fff;
+  background: var(--bgl-red);
+  content: attr(data-deselect);
+  color: #fff;
 }
 
 .multiselect-enter-active,
 .multiselect-leave-active {
-	transition: all 0.15s ease;
+  transition: all 0.15s ease;
 }
 
 .multiselect-enter,
 .multiselect-leave-active {
-	opacity: 0;
+  opacity: 0;
 }
 
 .multiselect__strong {
-	margin-bottom: 8px;
-	line-height: 20px;
-	display: inline-block;
-	vertical-align: top;
+  margin-bottom: 8px;
+  line-height: 20px;
+  display: inline-block;
+  vertical-align: top;
 }
 
 *[dir="rtl"] .multiselect {
-	text-align: right;
+  text-align: right;
 }
 
 *[dir="rtl"] .multiselect__select {
-	right: auto;
-	left: 1px;
+  right: auto;
+  left: 1px;
 }
 
 *[dir="rtl"] .multiselect__tags {
-	padding: calc(var(--input-height) / 2);
-	padding-inline-end: 40px;
-	padding-inline-start: 0.7rem;
+  padding: calc(var(--input-height) / 2);
+  padding-inline-end: 40px;
+  padding-inline-start: 0.7rem;
 }
 
 *[dir="rtl"] .multiselect__content {
-	text-align: right;
+  text-align: right;
 }
 
 *[dir="rtl"] .multiselect__option::after {
-	right: auto;
-	left: 0;
+  right: auto;
+  left: 0;
 }
 
 *[dir="rtl"] .multiselect__clear {
-	right: auto;
-	left: 12px;
+  right: auto;
+  left: 12px;
 }
 
 *[dir="rtl"] .multiselect__spinner {
-	right: auto;
-	left: 1px;
+  right: auto;
+  left: 1px;
 }
 
 @keyframes spinning {
-	from {
-		transform: rotate(0);
-	}
+  from {
+    transform: rotate(0);
+  }
 
-	to {
-		transform: rotate(2turn);
-	}
+  to {
+    transform: rotate(2turn);
+  }
 }
 </style>