@bagelink/vue 0.0.287 → 0.0.296

package/src/components/Modal.vue

@@ -1,76 +1,61 @@
 <template>
-	<div
-		class="bg-dark"
-		:class="{ 'is-side': side, 'is-active': isActive, '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 } from 'vue';
+import { onUnmounted, watch } from 'vue';
 import {
-	type BtnOptions, Btn, useEscape, Title, Card,
+  type BtnOptions, Btn, useEscape, Title, Card,
 } from '@bagelink/vue';
 import '../styles/modal.css';
 
 const props = defineProps<{
-	side?: boolean;
-	title?: string;
-	dismissable?: boolean;
-	actions?: BtnOptions[];
+  side?: boolean;
+  title?: string;
+  dismissable?: boolean;
+  actions?: BtnOptions[];
+  visible?: boolean;
 }>();
 
-let isActive = $ref<boolean>(false);
+let isVisible = $ref<boolean>(false);
 
-const emit = defineEmits(['update:isModalVisible']);
+watch(() => props.visible, (val) => {
+  if (val === isVisible || val === undefined) return;
+  if (val) openModal();
+  else closeModal();
+}, { immediate: true });
+
+const emit = defineEmits(['update:visible']);
 
 const closeModal = () => {
-	isActive = false;
-	setTimeout(() => emit('update:isModalVisible', false), 200);
+  isVisible = false;
+  setTimeout(() => emit('update:visible', false), 200);
 };
 
 defineExpose({ closeModal });
 
 const escapeKeyClose = (e: KeyboardEvent) => props?.dismissable && useEscape(e, () => closeModal());
 
-onMounted(() => {
-	setTimeout(() => isActive = true, 1);
-	document.addEventListener('keydown', escapeKeyClose);
-});
+function openModal() {
+  setTimeout(() => isVisible = true, 1);
+  document.addEventListener('keydown', escapeKeyClose);
+}
+
 onUnmounted(() => {
-	document.removeEventListener('keydown', escapeKeyClose);
+  document.removeEventListener('keydown', escapeKeyClose);
 });
 </script>

package/src/components/index.ts

@@ -21,6 +21,8 @@ export { default as Avatar } from './Avatar.vue';
 export { default as Title } from './Title.vue';
 export { default as Accordion } from './Accordion.vue';
 export { default as ComboBox } from './ComboBox.vue';
+export { default as Alert } from './Alert.vue';
+export { default as Badge } from './Badge.vue';
 
 export * from './form';
 export * from './dashboard';

package/src/plugins/modal.ts

@@ -11,11 +11,13 @@ export interface ModalOptions {
   side?: boolean;
   actions?: BtnOptions[];
   class?: string;
+  visible?: boolean;
 }
 
 export interface ModalFormOptions {
   side?: boolean;
   title?: string;
+  visible?: boolean;
   dismissable?: boolean;
   schema: BglFormSchemaT<any> | (() => BglFormSchemaT) | BglFormSchemaT
   onSubmit?: (formData: any) => Promise<void>;
@@ -82,7 +84,7 @@ export const ModalPlugin: Plugin = {
 			data: () => ({ modalStack }),
 			render() {
 				return modalStack.map((modal, index) => {
-					const props = { ...modal.modalOptions, 'onUpdate:isModalVisible': () => hideModal(index) };
+					const props = { ...modal.modalOptions, visible: true, 'onUpdate:visible': () => hideModal(index) };
 					if (modal.modalType === 'modalForm') return h(ModalForm, props as ModalFormOptions, modal.componentSlots);
 					return h(Modal, props, modal.componentSlots);
 				});

package/src/types/index.ts

@@ -11,11 +11,11 @@ export * from './BtnOptions';
 export * from './BagelForm';
 
 export type ThemeType = |
-	'light'
-	| 'red'
-	| 'gray'
-	| 'gray-light'
-	| 'black'
-	| 'green'
-	| 'primary'
-	| 'blue' // ! blue does nothing
+  'light'
+  | 'red'
+  | 'gray'
+  | 'gray-light'
+  | 'black'
+  | 'green'
+  | 'primary'
+  | 'blue' // ! blue does nothing