@bagelink/vue 1.9.47 → 1.9.51

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "1.9.47",
+  "version": "1.9.51",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Bagel Studio",

package/src/plugins/useToast.ts

@@ -1,15 +1,15 @@
 import type { App, InjectionKey, Plugin } from 'vue'
 import type { PluginOptions as ToastOptions } from 'vue-toastification'
 import { inject } from 'vue'
-import Toast, {
-
-	POSITION,
-	useToast as useVueToast
-} from 'vue-toastification'
+import * as VueToastification from 'vue-toastification'
 import CustomToast from '../components/Toast.vue'
 import 'vue-toastification/dist/index.css'
 import '../styles/toast-overrides.css'
 
+const Toast = (VueToastification as any).default || VueToastification
+const { POSITION } = VueToastification as any
+const useVueToast = (VueToastification as any).useToast
+
 export interface ToastApi {
 	success: (message: string, options?: any) => void
 	error: (message: string, options?: any) => void

package/src/styles/inputs.css

@@ -318,10 +318,71 @@ select {
     box-shadow: inset 0 0 10px #00000050;
 }
 
-@media screen and (max-width: 910px) {
-    .bagel-input.wider input {
-        min-width: 120px;
-    }
+
+.grid-form {
+    display: grid;
+    column-gap: 1rem;
+    grid-template-columns: repeat(12, 1fr);
+}
+
+.grid-form>* {
+    grid-column: 1 / -1;
+}
+
+.col-1\/12 {
+    grid-column: span 1 !important;
+}
+
+.col-1\/6,
+.col-2\/12 {
+    grid-column: span 2 !important;
+}
+
+.col-1\/4,
+.col-3\/12 {
+    grid-column: span 3 !important;
+}
+
+.col-1\/3,
+.col-4\/12 {
+    grid-column: span 4 !important;
+}
+
+.col-5\/12 {
+    grid-column: span 5 !important;
+}
+
+.col-1\/2,
+.col-6\/12 {
+    grid-column: span 6 !important;
+}
+
+.col-7\/12 {
+    grid-column: span 7 !important;
+}
+
+.col-2\/3,
+.col-8\/12 {
+    grid-column: span 8 !important;
+}
+
+.col-3\/4,
+.col-9\/12 {
+    grid-column: span 9 !important;
+}
+
+.col-5\/6,
+.col-10\/12 {
+    grid-column: span 10 !important;
+}
+
+.col-11\/12 {
+    grid-column: span 11 !important;
+}
+
+.col-full,
+.col-12\/12 {
+    grid-column: span 12 !important;
 }
 
 .pixel {
@@ -333,4 +394,90 @@ select {
     bottom: 0 !important;
     left: 50% !important;
     min-width: 0 !important;
+}
+
+
+@media screen and (max-width: 910px) {
+    .bagel-input.wider input {
+        min-width: 120px;
+    }
+
+    .col-1\/12,
+    .col-1\/6,
+    .col-2\/12,
+    .col-1\/4,
+    .col-3\/12,
+    .col-1\/3,
+    .col-4\/12,
+    .col-5\/12,
+    .col-1\/2,
+    .col-6\/12,
+    .col-7\/12,
+    .col-2\/3,
+    .col-8\/12,
+    .col-3\/4,
+    .col-9\/12,
+    .col-5\/6,
+    .col-10\/12,
+    .col-11\/12,
+    .col-full,
+    .col-12\/12 {
+        grid-column: 1 / -1 !important;
+    }
+
+    .m_col-1\/12 {
+        grid-column: span 1 !important;
+    }
+
+    .m_col-1\/6,
+    .m_col-2\/12 {
+        grid-column: span 2 !important;
+    }
+
+    .m_col-1\/4,
+    .m_col-3\/12 {
+        grid-column: span 3 !important;
+    }
+
+    .m_col-1\/3,
+    .m_col-4\/12 {
+        grid-column: span 4 !important;
+    }
+
+    .m_col-5\/12 {
+        grid-column: span 5 !important;
+    }
+
+    .m_col-1\/2,
+    .m_col-6\/12 {
+        grid-column: span 6 !important;
+    }
+
+    .m_col-7\/12 {
+        grid-column: span 7 !important;
+    }
+
+    .m_col-2\/3,
+    .m_col-8\/12 {
+        grid-column: span 8 !important;
+    }
+
+    .m_col-3\/4,
+    .m_col-9\/12 {
+        grid-column: span 9 !important;
+    }
+
+    .m_col-5\/6,
+    .m_col-10\/12 {
+        grid-column: span 10 !important;
+    }
+
+    .m_col-11\/12 {
+        grid-column: span 11 !important;
+    }
+
+    .m_col-full,
+    .m_col-12\/12 {
+        grid-column: span 12 !important;
+    }
 }