@bagelink/vue 0.0.318 → 0.0.331

package/src/components/ComboBox.vue

@@ -1,26 +1,34 @@
 <template>
-  <Dropdown placement="auto-start" class="bagel-input combobox">
-    <button type="button" class="combobox-btn" @click="toggle">
-      {{ valueToLabel(selectedItem) || placeholder || 'Select' }}
-      <MaterialIcon 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="selectedItem" required>
-    <template #popper="{ hide }">
-      <Card thin class="combobox-options">
-        <TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
-        <div class="combobox-option" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
-          select(option)
-          hide();
-        }" :class="{ selected: option === selectedItem }">
-          <span>
-            {{ label(option) }}
-          </span>
-          <Icon v-if="isSelected(option)" icon="check" />
-        </div>
-      </Card>
-    </template>
-  </Dropdown>
+	<Dropdown placement="bottom-start" class="bagel-input combobox">
+		<label>
+			{{ label  }}
+			<button type="button" class="combobox-btn" @click="toggle">
+				{{ valueToLabel(selectedItem) || placeholder || 'Select' }}
+				<MaterialIcon 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="selectedItem" required
+			>
+		</label>
+		<template #popper="{ hide }">
+			<Card class="combobox-options p-05" :style="{width: fullWidth?'100%':'auto'}">
+				<TextInput v-if="searchable" ref="searchInput" dense :placeholder="'Search'" icon="search" v-model="search" />
+				<div
+					class="combobox-option hover  gap-1" v-for="(option, i) in filteredOptions" :key="`${option}${i}`" @click="() => {
+						select(option); hide();
+					}" :class="{ selected: option === selectedItem }"
+				>
+					<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>
@@ -28,7 +36,7 @@ import { watch } from 'vue';
 import { Dropdown } from 'floating-vue';
 import 'floating-vue/style.css';
 import {
-  TextInput, Card, Icon, MaterialIcon,
+	TextInput, Card, Icon, MaterialIcon,
 } from '@bagelink/vue';
 
 type Option = string | number | Record<string, any> | { label: string, value: string | number };
@@ -43,56 +51,58 @@ const props = defineProps<{
   modelValue?: Option;
   searchable?: boolean;
   required?: boolean;
+	label?: string;
+	fullWidth?: boolean;
 }>();
 let selectedItem = $ref<Option>();
 let search = $ref('');
 
 const toggle = () => {
-  open = !open;
-  if (!open) search = '';
-  if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
+	open = !open;
+	if (!open) search = '';
+	if (open) setTimeout(() => (searchInput as any)?.$el?.querySelector('input')?.focus(), 100);
 };
 
 const valueToLabel = (value?: Option) => {
-  if (!value) return '';
-  const option = props.options.find((option) => {
-    if (typeof option === 'string' || typeof option === 'number') return option === value;
-    return option.value === value;
-  });
-  if (!option) return value;
-  return label(option);
+	if (!value) return '';
+	const option = props.options.find((option) => {
+		if (typeof option === 'string' || typeof option === 'number') return option === value;
+		return option.value === value;
+	});
+	if (!option) return value;
+	return getLabel(option);
 };
 
 const emit = defineEmits(['update:modelValue']);
 
-const label = (option: Option) => {
-  if (typeof option === 'string') return option;
-  if (typeof option === 'number') return `${option}`;
-  return option.label;
+const getLabel = (option: Option) => {
+	if (typeof option === 'string') return option;
+	if (typeof option === 'number') return `${option}`;
+	return option.label;
 };
 
 const isSelected = (option: Option) => {
-  if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
-  return option.value === selectedItem;
+	if (typeof option === 'string' || typeof option === 'number') return option === selectedItem;
+	return option.value === selectedItem;
 };
 
 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');
+	if (typeof option === 'string') return option.match(searchTerm);
+	if (typeof option === 'number') return `${option}`.match(searchTerm);
+	return option.label.match(searchTerm);
 }));
 
 const select = (option: Option) => {
-  if (typeof option === 'string') selectedItem = option;
-  else if (typeof option === 'number') selectedItem = option;
-  else selectedItem = option.value;
-  emit('update:modelValue', selectedItem);
-  open = false;
+	if (typeof option === 'string') selectedItem = option;
+	else if (typeof option === 'number') selectedItem = option;
+	else selectedItem = option.value;
+	emit('update:modelValue', selectedItem);
+	open = false;
 };
 
 watch(() => props.modelValue, (value) => {
-  if (value !== selectedItem) selectedItem = value;
+	if (value !== selectedItem) selectedItem = value;
 }, { immediate: true });
 </script>
 
@@ -106,9 +116,11 @@ watch(() => props.modelValue, (value) => {
   cursor: pointer;
   border-radius: 5px;
   transition: all 0.2s;
-  display: flex;
+  display: grid;
+  grid-template-columns: 10px 1fr;
   justify-content: space-between;
   width: 100%;
+  font-size: var(--input-font-size);
 }
 
 .combobox-options {
@@ -122,12 +134,29 @@ watch(() => props.modelValue, (value) => {
 </style>
 
 <style>
+[data-popper-shown]{
+	color: var(--bgl-primary) !important;
+}
+.bagel-input label {
+  font-size: var(--label-font-size);
+}
 .combobox-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;
+}
+
+.combobox-btn:focus {
+  outline: none;
+  box-shadow: inset 0 0 10px #00000012;
 }
 
 .v-popper__arrow-container {

package/src/components/ListView.vue

@@ -1,8 +1,9 @@
 <template>
 	<div class="list-wrap bgl_card thin grid overflow-hidden h-100 p-0">
 		<div class="p-1">
-			<slot  name="header" />
-		</div>		<div class="list-content auto-flow-rows align-items-start overflow-y h-100">
+			<slot name="header" />
+		</div>
+		<div class="list-content auto-flow-rows align-items-start overflow-y h-100">
 			<slot />
 		</div>
 	</div>
@@ -14,46 +15,46 @@ import Card from './Card.vue';
 </script>
 
 <style>
-.list-wrap{
-    grid-template-rows: auto 1fr;
+.list-wrap {
+  grid-template-rows: auto 1fr;
 }
 
 .list-item {
-    padding: 0.5rem 1rem;
-    min-height: -webkit-fit-content;
-    min-height: -moz-fit-content;
-    min-height: fit-content;
-    margin: 0.25rem 0;
-    border-radius: 10px;
-    cursor: pointer;
-    transition: var(--bgl-transition);
-    color: var(--bgl-black);
-    text-decoration: none;
-    position: relative;
+  padding: 0.5rem 1rem;
+  min-height: -webkit-fit-content;
+  min-height: -moz-fit-content;
+  min-height: fit-content;
+  margin: 0.25rem 0;
+  cursor: pointer;
+  transition: var(--bgl-transition);
+  color: var(--bgl-black);
+  text-decoration: none;
+  position: relative;
 }
 
 .list-item::after {
-    content: "";
-    position: absolute;
-    left: 0;
-    right: 0;
-    bottom: -0.15rem;
-    border-bottom: 1px solid var(--border-color);
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: -0.15rem;
+  border-bottom: 1px solid var(--border-color);
 }
 
 .list-item:hover,
 .list-item.router-link-active {
-    background-color: var(--bgl-blue-light);
+  background-color: var(--bgl-blue-light);
 }
 
 .list-item:active {
-    -webkit-filter: var(--bgl-hover-filter);
-    filter: var(--bgl-hover-filter);
+  -webkit-filter: var(--bgl-hover-filter);
+  filter: var(--bgl-hover-filter);
 }
+
 @media screen and (max-width: 910px) {
 
-.list-item {
-        padding: 0.5rem;
-    }
+  .list-item {
+    padding: 0.5rem;
+  }
 }
 </style>

package/src/components/Modal.vue

@@ -1,25 +1,27 @@
 <template>
-  <div class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
-    @click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-    <Card class="modal" @click.stop>
-      <header class="tool-bar">
-        <slot name="toolbar" />
-        <Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
-        <Title class="modal-title" tag="h3" v-if="title" :label="title" />
-      </header>
-      <slot />
-      <footer class="modal-footer mt-3">
-        <Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
-        <slot name="footer" />
-      </footer>
-    </Card>
-  </div>
+	<div
+		class="bg-dark" :class="{ 'is-side': side, 'is-active': isVisible, 'bg-lignt': false }"
+		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal"
+	>
+		<Card class="modal" @click.stop>
+			<header class="tool-bar">
+				<slot name="toolbar" />
+				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
+				<Title class="modal-title" tag="h3" v-if="title" :label="title" />
+			</header>
+			<slot />
+			<footer class="modal-footer mt-3">
+				<Btn v-for="(action, i) in actions" :key="i" @click="closeModal" color="gray" v-bind="action" />
+				<slot name="footer" />
+			</footer>
+		</Card>
+	</div>
 </template>
 
 <script lang="ts" setup>
 import { onMounted, onUnmounted, watch } from 'vue';
 import {
-  type BtnOptions, Btn, useEscape, Title, Card,
+	type BtnOptions, Btn, useEscape, Title, Card,
 } from '@bagelink/vue';
 import '../styles/modal.css';
 
@@ -34,16 +36,16 @@ const props = defineProps<{
 let isVisible = $ref<boolean>(false);
 
 watch(() => props.visible, (val) => {
-  if (val === isVisible || val === undefined) return;
-  if (val) openModal();
-  else closeModal();
+	if (val === isVisible || val === undefined) return;
+	if (val) openModal();
+	else closeModal();
 }, { immediate: true });
 
 const emit = defineEmits(['update:visible']);
 
 const closeModal = () => {
-  isVisible = false;
-  setTimeout(() => emit('update:visible', false), 200);
+	isVisible = false;
+	setTimeout(() => emit('update:visible', false), 200);
 };
 
 defineExpose({ closeModal });
@@ -51,13 +53,13 @@ defineExpose({ closeModal });
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
 function openModal() {
-  setTimeout(() => isVisible = true, 1);
+	setTimeout(() => isVisible = true, 1);
 }
 
 onMounted(() => document.addEventListener('keydown', escapeKeyClose));
 
 onUnmounted(() => {
-  document.removeEventListener('keydown', escapeKeyClose);
+	document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>
 

package/src/components/form/BglField.vue

@@ -1,73 +1,58 @@
 <template>
-	<component
-		:required="field.required"
-		v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
-		:class="classify(fieldData, modelValue, field.class, field.attrs?.class)"
-		v-if="vIf"
-		:is="is"
-		:label="field.label"
-		:id="field.id"
-		:placeholder="field.placeholder || field.label"
-		v-model="fieldData"
-		:defaultValue="field.defaultValue"
-		:options="field.options"
-		:helptext="field.helptext"
-		@update:modelValue="($event: any) => field?.onUpdate?.($event, formData)"
-	>
-		{{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
-		<BglField
-			v-model="formData"
-			v-for="(child, ii) in field.children"
-			:key="child.id || ii"
-			:field="child"
-		/>
-	</component>
+  <component :required="field.required" v-bind="bindAttrs(field?.attrs || {}, fieldData, modelValue)"
+    :class="classify(fieldData, modelValue, field.class, field.attrs?.class)" v-if="vIf" :is="is" :label="field.label"
+    :id="field.id" :placeholder="field.placeholder || field.label" v-model="fieldData"
+    :defaultValue="field.defaultValue" :options="bindAttrs({ options: field.options }, fieldData, modelValue).options"
+    :helptext="field.helptext" @update:modelValue="($event: any) => field?.onUpdate?.($event, formData)">
+    {{ field.transform?.(fieldData, modelValue) || fieldData || '' }}
+    <BglField v-model="formData" v-for="(child, ii) in field.children" :key="child.id || ii" :field="child" />
+  </component>
 </template>
 
 <script lang="ts" setup>
 import {
-	type Field, bindAttrs, classify, SelectInput, TextInput, ToggleInput, CheckInput,
+  type Field, bindAttrs, classify, ComboBox, TextInput, ToggleInput, CheckInput,
 } from '@bagelink/vue';
 
 const props = withDefaults(defineProps<{
-	field: Field
-	modelValue: Record<string, any>
+  field: Field
+  modelValue: Record<string, any>
 }>(), {
-	modelValue: () => ({}),
+  modelValue: () => ({}),
 });
 
 const is = $computed(() => {
-	if (props.field.$el === 'text') return TextInput;
-	if (props.field.$el === 'select') return SelectInput;
-	if (props.field.$el === 'toggle') return ToggleInput;
-	if (props.field.$el === 'check') return CheckInput;
-	return props.field.$el || 'div';
+  if (props.field.$el === 'text') return TextInput;
+  if (props.field.$el === 'select') return ComboBox;
+  if (props.field.$el === 'toggle') return ToggleInput;
+  if (props.field.$el === 'check') return CheckInput;
+  return props.field.$el || 'div';
 });
 
 const emit = defineEmits(['update:modelValue']);
 
 const formData = $computed({
-	get: () => props.modelValue,
-	set: (val: any) => emit('update:modelValue', val),
+  get: () => props.modelValue,
+  set: (val: any) => emit('update:modelValue', val),
 });
 
 const fieldData = $computed({
-	set: (val: any) => {
-		if (!props.field.id) return;
-		const data = { ...props.modelValue } || {};
-		data[props.field.id] = val;
-		emit('update:modelValue', data);
-	},
-	get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
+  set: (val: any) => {
+    if (!props.field.id) return;
+    const data = { ...props.modelValue } || {};
+    data[props.field.id] = val;
+    emit('update:modelValue', data);
+  },
+  get: () => (props.field.id ? props.modelValue[props.field.id] : props.field.defaultValue || ''),
 });
 
 const vIf = $computed(() => {
-	if (props.field['v-if'] === undefined) return true;
-	if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
-	if (typeof props.field['v-if'] === 'string') return true;
-	if (typeof props.field['v-if'] === 'function') {
-		return props.field['v-if']?.(fieldData, formData);
-	}
-	return true;
+  if (props.field['v-if'] === undefined) return true;
+  if (typeof props.field['v-if'] === 'boolean') return props.field['v-if'];
+  if (typeof props.field['v-if'] === 'string') return true;
+  if (typeof props.field['v-if'] === 'function') {
+    return props.field['v-if']?.(fieldData, formData);
+  }
+  return true;
 });
 </script>

package/src/components/form/BglForm.vue

@@ -1,52 +1,57 @@
 <template>
-	<template v-if="id">
-		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-	</template>
-	<form v-else ref="form" @submit.prevent="runSubmit">
-		<Title tag="h4" :label="label" v-if="label" />
-		<BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
-		<slot name="submit" />
-		<input type="submit" hidden v-if="onSubmit" />
-	</form>
+  <template v-if="id">
+    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
+  </template>
+  <form v-else-if="(!slots.success || formStatus !== 'success')" ref="form" @submit.prevent="runSubmit">
+    <Title tag="h4" :label="label" v-if="label" />
+    <BglField v-for="(field, i) in schema" :key="field.id || `${i}p`" :field="field" v-model="data" />
+    <slot name="submit" />
+  </form>
+  <slot v-if="formStatus === 'success'" name="success" />
+  <slot v-if="formStatus === 'error'" name="error" />
 </template>
 
 <script lang="ts" setup>
+import { useSlots } from 'vue';
 import {
-	useModal, BglField, Title,
+  useModal, BglField, Title,
 } from '@bagelink/vue';
 
 import { type BglFormSchemaT } from '@bagelink/vue';
 
+const slots = useSlots();
+
 const { showModal } = useModal();
 
 const props = withDefaults(
-	defineProps<{
-		label?: string;
-		id?: string;
-		schema: BglFormSchemaT<any>;
-		modelValue?: Record<string, any>;
-		onDelete?: ((id: string) => void);
-		onSubmit?: ((data: any) => void);
-	}>(),
-	{
-		modelValue: () => ({}),
-	},
+  defineProps<{
+    label?: string;
+    id?: string;
+    schema: BglFormSchemaT<any>;
+    modelValue?: Record<string, any>;
+    onDelete?: ((id: string) => void);
+    onSubmit?: ((data: any) => void);
+  }>(),
+  {
+    modelValue: () => ({}),
+  },
 );
 
 const instAt = new Date();
 const timeSinceInst = () => new Date().getTime() - instAt.getTime();
-
+let formData = $ref(props.modelValue);
 const emit = defineEmits(['update:modelValue', 'submit', 'dirty']);
 let isDirty = $ref(false);
 const data = $computed({
-	set: (val: any) => {
-		if (timeSinceInst() > 100) {
-			emit('dirty');
-			isDirty = true;
-		}
-		emit('update:modelValue', val);
-	},
-	get: () => props.modelValue || {},
+  set: (val: any) => {
+    if (timeSinceInst() > 100) {
+      emit('dirty');
+      isDirty = true;
+    }
+    formData = val;
+    emit('update:modelValue', val);
+  },
+  get: () => props.modelValue || formData,
 });
 const form = $ref<HTMLFormElement>();
 
@@ -54,30 +59,41 @@ const validateForm = () => form?.reportValidity?.();
 
 const clearForm = () => Object.assign(data, {});
 
+type FormStatus = 'idle' | 'loading' | 'success' | 'error';
+
+let formStatus = $ref<FormStatus>('idle');
+
 const runSubmit = () => {
-	validateForm();
-	emit('submit', data);
-	clearForm();
+  console.log('runSubmit');
+  try {
+    validateForm();
+    props.onSubmit?.(data);
+    // emit('submit', data);
+    clearForm();
+    formStatus = 'success';
+  } catch (e) {
+    formStatus = 'error';
+  }
 };
 
 const i18nT = (val: string) => val;
 
 const deleteItem = () => {
-	showModal(
-		{
-			class: 'small-modal',
-			title: i18nT('Are you sure?'),
-			actions: [
-				{
-					value: 'Confirm',
-					color: 'red',
-					onClick: () => props.onDelete?.(data.value.id),
-				},
-				{ value: 'Cancel', color: 'gray' },
-			],
-		},
-		{ default: i18nT('form.deleteMessage') },
-	);
+  showModal(
+    {
+      class: 'small-modal',
+      title: i18nT('Are you sure?'),
+      actions: [
+        {
+          value: 'Confirm',
+          color: 'red',
+          onClick: () => props.onDelete?.(data.value.id),
+        },
+        { value: 'Cancel', color: 'gray' },
+      ],
+    },
+    { default: i18nT('form.deleteMessage') },
+  );
 };
 
 defineExpose({ validateForm, deleteItem, isDirty });
@@ -85,6 +101,6 @@ defineExpose({ validateForm, deleteItem, isDirty });
 
 <style>
 .del-top {
-	transform: translateY(-2.6rem);
+  transform: translateY(-2.6rem);
 }
 </style>