@bagelink/vue 0.0.234-beta.0 → 0.0.236-beta.0

package/dist/style.css

@@ -521,11 +521,11 @@
   }
 }
 
-.modal-title[data-v-4c24e1e7] {
+.modal-title[data-v-d6a4af96] {
 	margin-top: 0.5rem;
 }
 @media screen and (max-width: 910px) {
-.modal-title[data-v-4c24e1e7] {
+.modal-title[data-v-d6a4af96] {
 		margin-top: 1rem;
 }
 }
@@ -2450,300 +2450,187 @@ label,
 input,
 textarea,
 select {
-    font-family: inherit;
-    width: 100%;
+  font-family: inherit;
+  width: 100%;
 }
 .bagel-input {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    text-align: start;
-    margin-bottom: 0.5rem;
-    width: 100%;
-    color: var(--bgl-black);
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  text-align: start;
+  margin-bottom: 0.5rem;
+  width: 100%;
+  color: var(--bgl-black);
 }
 .bagel-input::placeholder .bagel-input label {
-    display: block;
-    font-size: var(--label-font-size);
-    margin-bottom: 2px;
-    line-height: 1.3;
+  display: block;
+  font-size: var(--label-font-size);
+  margin-bottom: 2px;
+  line-height: 1.3;
 }
 .bagel-input::placeholder {
-    color: var(--placeholder-color);
+  color: var(--placeholder-color);
 }
 .bagel-input label {
-    color: var(--label-color);
+  color: var(--label-color);
 }
 .bagel-input input,
 .bagel-input select,
 .custom-select .input {
-    height: var(--input-height);
-    font-size: var(--input-font-size);
+  height: var(--input-height);
+  font-size: var(--input-font-size);
 }
 .bagel-input input,
 .bagel-input textarea,
 .bagel-input select,
 .custom-select .input {
-    background: var(--input-bg);
-    border: none;
-    padding: 0.7rem;
-    border-radius: var(--input-border-radius);
-    color: var(--input-color);
-    min-width: calc(var(--input-height) * 3);
-    width: 100%;
+  background: var(--input-bg);
+  border: none;
+  padding: 0.7rem;
+  border-radius: var(--input-border-radius);
+  color: var(--input-color);
+  min-width: calc(var(--input-height) * 3);
+  width: 100%;
 }
 .bagel-input input::placeholder,
 .bagel-input textarea::placeholder,
 .bagel-input select::placeholder,
 .custom-select .input::placeholder {
-    color: var(--placeholder-color);
+  color: var(--placeholder-color);
 }
 .bagel-input.search-wrap {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
 }
 .bagel-input.search-wrap input {
-    padding-inline-end: 2rem;
+  padding-inline-end: 2rem;
 }
 .bagel-input.search-wrap .icon-font {
-    margin-inline-start: -1.75rem;
+  margin-inline-start: -1.75rem;
 }
 .bagel-input select {
-    height: var(--input-height);
+  height: var(--input-height);
 }
 .bagel-input textarea {
-    resize: vertical;
-    min-height: calc(var(--input-height) * 3);
-    line-height: 1.5;
+  resize: vertical;
+  min-height: calc(var(--input-height) * 3);
+  line-height: 1.5;
 }
 .bagel-input.wider input {
-    min-width: 320px;
+  min-width: 320px;
 }
-.bagel-input input[type='radio'] {
-    padding: 0;
-    width: fit-content;
+.bagel-input input[type="radio"] {
+  padding: 0;
+  width: fit-content;
 }
 .bagel-input:focus-within label {
-    color: var(--bgl-primary);
+  color: var(--bgl-primary);
 }
 .bagel-input select.no-edit,
 .bagel-input input.no-edit,
 .bagel-input textarea.no-edit,
 .bagel-input .switch.no-edit {
-    pointer-events: none;
-    outline: none;
+  pointer-events: none;
+  outline: none;
 }
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
 }
 label.active {
-    color: var(--bgl-primary);
+  color: var(--bgl-primary);
 }
 .inline-80 {
-    display: inline-block;
-    width: 80%;
+  display: inline-block;
+  width: 80%;
 }
 .inline-20 {
-    display: inline-block;
-    width: 20%;
+  display: inline-block;
+  width: 20%;
 }
 .inline-10 {
-    display: inline-block;
-    width: 20%;
+  display: inline-block;
+  width: 20%;
 }
 .inline-50 {
-    display: inline-block;
-    width: 49%;
-    margin: 0 0.5%;
-}
-button.formkit-input {
-    background: var(--bgl-primary);
-    color: var(--bgl-white);
-    border: none;
-    padding: 0 1.5rem;
-    border-radius: var(--input-border-radius);
-    font-size: var(--input-font-size);
-    font-weight: 500;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-    margin-top: 0.5rem;
-}
-button.formkit-input:hover {
-    filter: var(--bgl-hover-filter);
-}
-button.formkit-input:active {
-    filter: var(--bgl-active-filter);
-}
-.formkit-messages {
-    list-style-type: none;
-    padding: 0;
-    color: var(--bgl-red);
-    margin: none;
-    font-size: 0.7rem;
-    position: absolute;
-    right: 0;
-    top: -10px;
-}
-.formkit-outer {
-    position: relative;
-    display: flex;
-    flex-direction: column;
-    text-align: start;
-    margin-bottom: 0.5rem;
-    width: 100%;
-}
-.formkit-outer .formkit-help {
-    font-size: 0.8rem;
-    color: var(--input-color);
-    margin-top: 0.5rem;
-    font-weight: 300;
-}
-.formkit-outer label {
-    display: block;
-    font-size: var(--label-font-size);
-    margin-bottom: 2px;
-    line-height: 1.3;
-    color: var(--label-color);
+  display: inline-block;
+  width: 49%;
+  margin: 0 0.5%;
 }
-.formkit-outer input,
-.formkit-outer select,
 .custom-select .input {
-    height: var(--input-height);
-    font-size: var(--input-font-size);
+  height: var(--input-height);
+  font-size: var(--input-font-size);
 }
-.formkit-outer input,
-.formkit-outer textarea,
-.formkit-outer select,
 .custom-select .input {
-    background: var(--input-bg);
-    border: none;
-    padding: 0.7rem;
-    border-radius: var(--input-border-radius);
-    color: var(--input-color);
-    min-width: calc(var(--input-height) * 3);
-    width: 100%;
-}
-.formkit-outer.search-wrap {
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-}
-.formkit-outer.search-wrap input {
-    padding-inline-end: 2rem;
-}
-.formkit-outer.search-wrap .icon-font {
-    margin-inline-start: -1.75rem;
-}
-.formkit-outer select {
-    height: var(--input-height);
-    appearance: none;
-    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-    background-repeat: no-repeat;
-    background-position: right 1rem center;
-    background-size: 1.2em;
-}
-[dir=rtl] .formkit-outer select {
-    background-position: left 1rem center;
-}
-.formkit-outer textarea {
-    resize: vertical;
-    min-height: calc(var(--input-height) * 3);
-    line-height: 1.5;
-}
-.formkit-outer.wider input {
-    min-width: 320px;
-}
-.formkit-outer input[type='radio'] {
-    padding: 0;
-    width: fit-content;
+  background: var(--input-bg);
+  border: none;
+  padding: 0.7rem;
+  border-radius: var(--input-border-radius);
+  color: var(--input-color);
+  min-width: calc(var(--input-height) * 3);
+  width: 100%;
 }
-.formkit-outer input:focus-visible,
-.formkit-outer select:focus-visible,
-.formkit-outer textarea:focus-visible,
 .input.active,
 .bagel-input input:focus-visible,
 .bagel-input select:focus-visible,
 .bagel-input textarea:focus-visible {
-    outline: none;
-    box-shadow: inset 0 0 10px #00000012;
-}
-.formkit-outer:focus-within label {
-    color: var(--bgl-primary);
-}
-.formkit-outer:focus-within label {
-    color: var(--bgl-primary);
-}
-.formkit-outer select.no-edit,
-.formkit-outer input.no-edit,
-.formkit-outer textarea.no-edit,
-.formkit-outer .switch.no-edit {
-    pointer-events: none;
-    outline: none;
+  outline: none;
+  box-shadow: inset 0 0 10px #00000012;
 }
-input[type='number']::-webkit-inner-spin-button,
-input[type='number']::-webkit-outer-spin-button {
-    -webkit-appearance: none;
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+  -webkit-appearance: none;
 }
 label.active {
-    color: var(--bgl-primary);
+  color: var(--bgl-primary);
 }
 .label-count-0 label {
-    display: none;
+  display: none;
 }
 .label-count-0 button.btn.flatBtn {
-    /* background: var(--bgl-blue-light); */
-    margin-right: 5px;
+  /* background: var(--bgl-blue-light); */
+  margin-right: 5px;
 }
 .label-count-0 button.btn.flatBtn:hover {
-    background: var(--bgl-hover-filter);
-}
-.formkit-outer.label-count-0 {
-    display: none;
+  background: var(--bgl-hover-filter);
 }
 input[type="color"] {
-    padding: 0.025rem 0.05rem;
-    display: block;
-    width: var(--input-height);
-    height: var(--input-height);
-    border: none;
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    cursor: pointer;
+  padding: 0.025rem 0.05rem;
+  display: block;
+  width: var(--input-height);
+  height: var(--input-height);
+  border: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  cursor: pointer;
 }
 input[type="color"]::-webkit-color-swatch {
-    border-radius: var(--input-border-radius);
-    border: none;
-    transition: box-shadow 200ms ease;
+  border-radius: var(--input-border-radius);
+  border: none;
+  transition: box-shadow 200ms ease;
 }
 input[type="color"]::-moz-color-swatch {
-    border-radius: var(--input-border-radius);
-    border: none;
-    transition: box-shadow 200ms ease;
+  border-radius: var(--input-border-radius);
+  border: none;
+  transition: box-shadow 200ms ease;
 }
 input[type="color"]::-webkit-color-swatch:hover {
-    box-shadow: inset 0 0 10px #00000050;
+  box-shadow: inset 0 0 10px #00000050;
 }
 input[type="color"]::-moz-color-swatch:hover {
-    box-shadow: inset 0 0 10px #00000050;
+  box-shadow: inset 0 0 10px #00000050;
 }
 @media screen and (max-width: 910px) {
-    .bagel-input.wider input {
-        min-width: 120px;
-    }
-
-    .formkit-outer.wider input {
-        min-width: 120px;
-    }
-
-    .bagel-input label,
-    .formkit-outer label {
-        font-size: calc(var(--input-font-size) / 1.1);
-        line-height: 1.2;
+  .bagel-input.wider input {
+    min-width: 120px;
+  }
 
-    }
+  .bagel-input label {
+    font-size: calc(var(--input-font-size) / 1.1);
+    line-height: 1.2;
+  }
 }
 button,
 .btn,
@@ -2898,8 +2785,8 @@ h6 {}
 /* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
 /*noinspection CssUnknownTarget*/
 :root {
-  --bgl-primary: #2E5BFF;
-  --bgl-primary-tint: #2E5BFF80;
+  --bgl-primary: #2e5bff;
+  --bgl-primary-tint: #2e5bff80;
   --bgl-primary-light: #eef6ff;
   --bgl-blue-20: rgba(46, 91, 255, 20%);
   --bgl-blue-dark: #191c30;
@@ -2976,18 +2863,13 @@ h6 {}
   margin-bottom: 20px;
   width: 100%;
   -webkit-padding-end: 40px;
-          padding-inline-end: 40px;
+  padding-inline-end: 40px;
 }
 .modal-footer {
   gap: 1rem;
   display: flex;
   justify-content: space-between;
 }
-.formkit-actions .formkit-wrapper {
-  gap: 1rem;
-  display: flex;
-  justify-content: flex-end;
-}
 * {
   box-sizing: border-box;
 }
@@ -3040,7 +2922,7 @@ h6 {}
 }
 .login-card .forgot-password:active {
   -webkit-filter: brightness(70%);
-          filter: brightness(70%);
+  filter: brightness(70%);
   color: var(--bgl-primary);
 }
 .login-card .error {
@@ -3059,15 +2941,15 @@ h6 {}
 }
 .tabs {
   -moz-column-gap: 1rem;
-       column-gap: 1rem;
+  column-gap: 1rem;
   margin-top: 20px;
   margin-bottom: -2rem;
   border-top: 1px solid var(--border-color);
   width: calc(100% + 4rem);
   -webkit-margin-start: -2rem;
-          margin-inline-start: -2rem;
+  margin-inline-start: -2rem;
   -webkit-padding-start: 2rem;
-          padding-inline-start: 2rem;
+  padding-inline-start: 2rem;
   overflow: auto;
   display: flex;
 }
@@ -3098,7 +2980,7 @@ h6 {}
 }
 .tab:active {
   -webkit-filter: brightness(70%);
-          filter: brightness(70%);
+  filter: brightness(70%);
 }
 .router-tab {
   font-size: 14px;
@@ -3121,7 +3003,7 @@ h6 {}
 }
 .router-tab:active {
   -webkit-filter: brightness(70%);
-          filter: brightness(70%);
+  filter: brightness(70%);
 }
 .pill {
   border-radius: 10px;
@@ -3193,7 +3075,7 @@ h6 {}
 }
 .list-item:active {
   -webkit-filter: var(--bgl-hover-filter);
-          filter: var(--bgl-hover-filter);
+  filter: var(--bgl-hover-filter);
 }
 .entity-container {
   display: grid;
@@ -3202,11 +3084,12 @@ h6 {}
   grid-template-columns: minmax(300px, 1fr) 3fr;
   grid-gap: 1rem;
   -moz-column-gap: 1rem;
-       column-gap: 1rem;
+  column-gap: 1rem;
   grid-template-rows: 1fr;
   grid-template-areas: "list-view detail-view";
   transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
-  transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99), -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+  transition: grid-template-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99),
+    -ms-grid-columns 0.4s cubic-bezier(0.79, 0.01, 0.34, 0.99);
   transition: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 .detail-main {
@@ -3254,7 +3137,7 @@ h6 {}
   width: 50px;
   aspect-ratio: 1;
   -o-object-fit: contain;
-     object-fit: contain;
+  object-fit: contain;
   line-height: 1;
 }
 .list-content {
@@ -3297,7 +3180,7 @@ h6 {}
 }
 .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;
@@ -3321,7 +3204,7 @@ h6 {}
   transform: translateX(-20px);
   opacity: 0;
 }
-.grid>* {
+.grid > * {
   min-height: 0;
 }
 .view-wrapper {
@@ -3370,14 +3253,14 @@ h6 {}
 
   .tabs {
     -moz-column-gap: 10px;
-         column-gap: 10px;
+    column-gap: 10px;
     margin-top: 10px;
     margin-bottom: -15px;
     box-sizing: border-box;
     -webkit-margin-start: -1rem;
-            margin-inline-start: -1rem;
+    margin-inline-start: -1rem;
     -webkit-padding-start: 1rem;
-            padding-inline-start: 1rem;
+    padding-inline-start: 1rem;
     max-width: calc(100vw - 2rem);
   }
 
@@ -3424,7 +3307,7 @@ h6 {}
     margin-bottom: 1rem;
     font-weight: 400;
     -webkit-margin-start: 0.5rem;
-            margin-inline-start: 0.5rem;
+    margin-inline-start: 0.5rem;
   }
 }
 [theme="dark"] {
@@ -3458,9 +3341,6 @@ h6 {}
   --bgl-hover-filter: brightness(130%);
   --bgl-active-filter: brightness(110%);
 }
-[theme="dark"] .formkit-outer input:focus-visible,
-[theme="dark"] .formkit-outer select:focus-visible,
-[theme="dark"] .formkit-outer textarea:focus-visible,
 [theme="dark"] .input.active,
 [theme="dark"] .bagel-input input:focus-visible,
 [theme="dark"] .bagel-input select:focus-visible,
@@ -3468,9 +3348,6 @@ h6 {}
   outline: none;
   box-shadow: inset 0 0 10px var(--bgl-bg);
 }
-[theme="dark"] .formkit-outer select {
-  background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
-}
 /* use this is to override the nav color */
 [theme="dark"] .nav {
   color: var(--bgl-black) !important;
@@ -3483,7 +3360,6 @@ h6 {}
 }
 [theme="dark"] .nav * {
   color: var(--bgl-black) !important;
-
 }
 [theme="dark"] .dropdown-project-head {
   background: var(--bgl-bg) !important;
@@ -3503,10 +3379,9 @@ h6 {}
 [theme="dark"] .whatsapp-msg {
   color: var(--bgl-gray-light);
 }
-[theme="dark"] button.formkit-input,
 [theme="dark"] .btn,
 [theme="dark"] .btn-icon,
-[theme="dark"] .primary-checkbox input:checked+span,
+[theme="dark"] .primary-checkbox input:checked + span,
 [theme="dark"] .btn.light {
   color: var(--bgl-black);
 }

package/dist/utils/index.d.ts

@@ -2,7 +2,6 @@ import { Attributes } from '../types';
 export declare const debounce: (fn: () => void, delay?: number) => void;
 export declare const keyToLabel: (key?: string) => string | undefined;
 export declare const copyText: (text: string, cb?: ((msg: string) => void) | undefined) => Promise<void>;
-export declare const useFormkit: () => unknown;
 export declare const initials: (...strArr: string[]) => string;
 export declare function useEscape(event: KeyboardEvent, closeModel: () => void): void;
 export declare function classify(fieldVal?: any, row?: any, ...classes: any[]): string;

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,UAAU,eAGtB,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAK9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAGtC,eAAO,MAAM,QAAQ,OAAQ,MAAM,IAAI,yBAGtC,CAAC;AAEF,eAAO,MAAM,UAAU,SAAU,MAAM,KAAG,MAAM,GAAG,SAEjC,CAAC;AAEnB,eAAO,MAAM,QAAQ,SACd,MAAM,cAED,MAAM,KAAK,IAAI,+BAI1B,CAAC;AAEF,eAAO,MAAM,QAAQ,cAAe,MAAM,EAAE,WAG3C,CAAC;AAEF,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAKpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,EAAE,KAAK,CAAC,EAAE,UAAU,EAAE,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,CAAC,OAS7F;AAED,eAAO,MAAM,KAAK,UAAW,GAAG,YAAY,GAAG,QAK9C,CAAC;AAEF,eAAO,MAAM,SAAS,cAAe,OAAO,MAAM,EAAE,GAAG,CAAC,YAAY,MAAM,QAAqD,CAAC;AAEhI,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.234-beta.0",
+  "version": "0.0.236-beta.0",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/ModalBglForm.vue

@@ -1,16 +1,32 @@
 <template>
-	<div class="bg-dark" :class="{ 'is-side': side, 'is-active': isActive }"
-		@click="() => (dismissable ? closeModal() : '')" @keydown.esc="closeModal">
-		<div class="card modal" @click.stop>
+	<div
+		class="bg-dark"
+		:class="{ 'is-side': side, 'is-active': isActive }"
+		@click="() => (dismissable ? closeModal() : '')"
+		@keydown.esc="closeModal"
+	>
+		<div
+			class="card modal"
+			@click.stop
+		>
 			<header class="tool-bar">
 				<slot name="toolbar" />
-				<Btn :style="{ float: side ? 'left' : 'right' }" flat icon="close" @click="closeModal" />
+				<Btn
+					:style="{ float: side ? 'left' : 'right' }"
+					flat
+					icon="close"
+					@click="closeModal"
+				/>
 				<h3 class="modal-title">
 					{{ title }}
 				</h3>
 			</header>
-			<BagelForm :onDelete="onDelete ? runDelete : undefined" v-model="formData" @submit="runSubmit"
-				:schema="computedFormSchema" />
+			<BagelForm
+				:onDelete="onDelete ? runDelete : undefined"
+				v-model="formData"
+				@submit="runSubmit"
+				:schema="computedFormSchema"
+			/>
 		</div>
 	</div>
 </template>