@bagelink/vue 0.0.237 → 0.0.241

package/src/components/form/BglForm.vue

@@ -1,10 +1,36 @@
 <template>
-	<component :is="id?'div':'form'" 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" />
-		<Btn class="del-top" v-if="data?.id && onDelete" @click="runDelete" value="Delete" flat icon="delete" color="red"
-			thin />
-		<Btn v-if="!$slots.submit && onSubmit" value="Submit" type="submit" thin />
+	<component
+		:is="id?'div':'form'"
+		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"
+		/>
+		<Btn
+			class="del-top"
+			v-if="data?.id && onDelete"
+			@click="runDelete"
+			value="Delete"
+			flat
+			icon="delete"
+			color="red"
+			thin
+		/>
+		<Btn
+			v-if="!$slots.submit && onSubmit"
+			value="Submit"
+			type="submit"
+			thin
+		/>
 		<div v-else>
 			<slot name="submit" />
 		</div>

package/src/plugins/modal.ts

@@ -86,7 +86,7 @@ export const ModalPlugin: Plugin = {
 				return modalStack.map((modal, index) => {
 					const renderComponent = modal.modalType === 'modalForm' ? ModalForm : Modal;
 					return h(
-						renderComponent as any,
+						renderComponent,
 						{
 							...modal.modalOptions,
 							'onUpdate:isModalVisible': () => hideModal(index),

package/src/styles/modal.css

@@ -6,23 +6,28 @@
   bottom: 0;
   background-color: rgba(0, 0, 0, 0.7);
   z-index: 999;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   pointer-events: none;
   opacity: 0;
   transition: all ease-in-out 0.3s;
+  max-height: 100vh;
   overflow: auto;
+  margin: 0 auto;
+  width: 100%;
+  text-align: center;
+  display: grid;
+  align-items: center;
 }
 
+
 .modal {
   width: 96%;
   max-width: 680px;
   transform: scale(0.5);
   opacity: 0;
   transition: all ease-in-out 0.15s;
-  margin-top: 6rem;
-  margin-bottom: 4rem;
+  margin-left: auto;
+  margin-right: auto;
+  height: fit-content;
 }
 
 .small-modal .modal {
@@ -37,7 +42,7 @@
   position: -webkit-sticky;
   position: sticky;
   padding-top: 1rem;
-  top: -2rem;
+  top: 0rem;
   z-index: 3;
   background: var(--bgl-white);
 }
@@ -50,13 +55,17 @@
   inset-inline-end: -600px;
   transform: scale(1);
   opacity: 1;
-  position: fixed;
-  top: 20px;
-  bottom: 20px;
+  /* position: fixed; */
+  /* top: 20px; */
+  /* bottom: 20px; */
   max-width: 600px;
   width: 90%;
-  margin-top: 0;
-  margin-bottom: 0;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  margin-inline-start: auto;
+  margin-inline-end: 20px;
+  min-height: calc(100vh - 40px);
+
 }
 
 .is-active .modal {
@@ -76,6 +85,7 @@
 
 .is-side.bg-dark.is-active {
   opacity: 1;
+  align-items: stretch;
 }
 
 .is-side.is-active .modal {
@@ -84,11 +94,13 @@
 
 @media screen and (max-width: 910px) {
   .tool-bar {
-    margin: -2rem 0 1rem;
+    margin: -1rem 0rem 1rem;
+    padding-bottom: 1rem;
     align-items: center;
   }
 
   .is-active.is-side .modal {
-    inset-inline-end: 5%;
+    margin-inline-end: 5%;
+    margin-inline-start: 5%;
   }
-}
+}

package/src/styles/theme.css

@@ -87,10 +87,17 @@
   font-weight: 600;
   font-size: 20px;
   margin-top: 0.5rem;
-  margin-bottom: 20px;
+  margin-bottom: 0 !important;
   width: 100%;
   -webkit-padding-end: 40px;
   padding-inline-end: 40px;
+  line-height: 2;
+  display: -webkit-box;
+  max-width: 100%;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .modal-footer {
@@ -100,6 +107,14 @@
   align-items: center;
 }
 
+.modal-footer>div {
+  gap: 1rem;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 0;
+}
+
 * {
   box-sizing: border-box;
 }
@@ -468,7 +483,7 @@
 
 .list-view {
   grid-area: list-view;
-  grid-template-areas: "list-header" "list-content";
+  grid-template-areas: "list-header""list-content";
   grid-template-columns: 1fr;
   overflow-y: auto;
   grid-template-rows: -webkit-max-content 1fr;
@@ -498,7 +513,7 @@
   opacity: 0;
 }
 
-.grid > * {
+.grid>* {
   min-height: 0;
 }
 
@@ -606,4 +621,4 @@
     -webkit-margin-start: 0.5rem;
     margin-inline-start: 0.5rem;
   }
-}
+}

package/tsconfig.json

@@ -1,8 +1,9 @@
 {
+
 	"compilerOptions": {
 		"target": "ESNext",
 		"baseUrl": ".",
-		"rootDir": ".",
+		"rootDir": "..",
 		"module": "ESNext",
 		"strict": true,
 		"jsx": "preserve",
@@ -29,6 +30,9 @@
 			"@vue-macros/reactivity-transform/macros-global"
 		],
 		"paths": {
+			"@bagelink/sdk": [
+				"../sdk/src/index.ts"
+			],
 			"@bagelink/vue": [
 				"./src/index.ts"
 			],
@@ -41,6 +45,6 @@
 		"**/**/*.ts",
 		"**/**/*.vue",
 		"**/**/*.d.ts",
-		"./vite.config.ts",
-	]
+		"./vite.config.ts"
+	],
 }