@bagelink/vue 0.0.738 → 0.0.740

package/src/styles/inputs.css

@@ -19,7 +19,7 @@ select {
     text-align: start;
     margin-bottom: 0.5rem;
     width: 100%;
-    color: var(--bgl-black);
+    color: var(--bgl-text-color);
 }
 
 .bagel-input::-webkit-input-placeholder .bagel-input label {
@@ -252,7 +252,7 @@ select {
 .bagel-input.light-input textarea,
 .bagel-input.light-input select,
 .custom-select.light-input .input {
-    background: var(--bgl-white) !important;
+    background: var(--bgl-popup-bg) !important;
     box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1) !important;
     outline: 1px solid var(--border-color) !important;
 }
@@ -261,7 +261,7 @@ select {
 .bagel-input.light-input input:focus-visible,
 .bagel-input.light-input select:focus-visible,
 .bagel-input.light-input textarea:focus-visible {
-    box-shadow: inset 0 0 2px var(--bgl-black) !important;
+    box-shadow: inset 0 0 2px var(--bgl-popup-text) !important;
 }
 
 .bagel-input input[type="number"]-webkit-inner-spin-button,

package/src/styles/loginCard.css

@@ -19,7 +19,7 @@
 
 .login-card .forgot-password {
   margin: -5px 0 10px;
-  color: var(--bgl-black);
+  color: var(--bgl-text-color);
   text-decoration: none;
 }
 

package/src/styles/modal.css

@@ -4,7 +4,7 @@
     right: 0;
     left: 0;
     bottom: 0;
-    background-color: rgba(0, 0, 0, 0.7);
+    background-color: var(--bgl-dark-bg);
     z-index: 999;
     pointer-events: none;
     opacity: 0;
@@ -66,7 +66,7 @@
     padding-top: 0rem;
     top: 0rem;
     z-index: 3;
-    background: var(--bgl-white);
+    background: var(--bgl-popup-bg);
     border-radius: var(--card-border-radius);
 }
 

package/src/styles/scrollbar.css

@@ -6,7 +6,7 @@
 ::-webkit-scrollbar-track {}
 
 ::-webkit-scrollbar-thumb {
-    background-color: var(--bgl-gray);
+    background-color: var(--bgl-scrollbar-thumb);
     border-radius: 1rem;
 }
 

package/src/styles/theme.css

@@ -1,17 +1,11 @@
-/* @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+Hebrew:wght@300;400;500;600;700&display=swap"); */
-/*noinspection CssUnknownTarget*/
-/* @import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined&display=swap"); */
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200");
-@import url("https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap");
+@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200');
+@import url('https://fonts.googleapis.com/css2?family=Lexend:wght@100;200;300;400;500;600;700;800;900&display=swap');
 
+/* TEHEME */
 :root {
     --bgl-primary: #2e5bff;
     --bgl-primary-tint: #2e5bff80;
     --bgl-primary-light: #eef6ff;
-    --bgl-accent-color:var(--bgl-primary);
-    --bgl-blue-20: rgba(46, 91, 255, 20%);
-    --bgl-blue-dark: #191c30;
-    --bgl-blue-light: #eef6ff;
     --bgl-black: #282929;
     --bgl-black-tint: #28292980;
     --bgl-white: #fff;
@@ -20,35 +14,68 @@
     --bgl-gray-80: #e8ecef;
     --bgl-gray-20: rgba(183, 183, 183, 0.2);
     --bgl-gray-40: rgba(183, 183, 183, 0.4);
-    --bgl-pink: #f1416c;
-    --bgl-red: #ed6c6f;
-    --bgl-red-tint: #fbe2e2;
-    --bgl-yellow: #ffbb00;
-    --bgl-yellow-light: #fff6d5;
-    --bgl-green: #75c98f;
-    --border-color: #00000020;
+    --bgl-accent-color: var(--bgl-primary);
     --bgl-bg: #f4f6fa;
     --bgl-shadow: #4c577d26;
-    --whatsapp-gray: #89959f;
-    --whatsapp-green: #e0fcd6;
-    --whatsapp-blue: #71bce6;
-    --input-border-radius: 7px;
-    --card-border-radius: 12px;
+    --border-color: #00000020;
     --placeholder-color: #00000040;
     --label-color: #00000080;
-    --label-font-size: 12px;
     --input-bg: #f5f8fa;
     --input-color: #000000;
+    --bgl-box-bg: var(--bgl-white);
+    --bgl-popup-bg: var(--bgl-white);
+    --bgl-popup-text: var(--bgl-black);
+    --bgl-text-color: var(--bgl-black);
+    --bgl-light-text: var(--bgl-white);
+    --bgl-richtext-color: var(--bgl-white);
+    --bgl-code-bg: var(--bgl-black);
+    --bgl-code-color: var(--bgl-white);
+    --bgl-dark-bg: rgba(0, 0, 0, 0.7);
+    --bgl-selection-bg: var(--bgl-blue-dark);
+    --bgl-selection-color: var(--bgl-white);
+    --bgl-scrollbar-thumb: var(var(--bgl-gray));
+}
+
+/* TYPE */
+:root {
+    --bgl-font: 'Lexend', 'Ploni', sans-serif;
+    --input-font-size: 16px;
+}
+
+/* DIMENSIONS */
+:root {
+    --bgl-font-size: 16px;
     --input-height: 40px;
-    --input-font-size: 14px;
+    --label-font-size: 12px;
+    --input-border-radius: 7px;
+    --card-border-radius: 12px;
     --btn-border-radius: 10px;
     --btn-padding: 30px;
     --btn-height: 40px;
+}
+
+/* MISC */
+:root {
     --bgl-transition: all 200ms ease;
     --bgl-transition-400: all 400ms ease;
     --bgl-hover-filter: brightness(90%);
     --bgl-active-filter: brightness(70%);
-    --bgl-font: "Lexend", "Ploni", sans-serif;
+}
+
+/* OTHER COLORS */
+:root {
+    --bgl-blue-20: rgba(46, 91, 255, 20%);
+    --bgl-blue-dark: #191c30;
+    --bgl-blue-light: #eef6ff;
+    --bgl-pink: #f1416c;
+    --bgl-red: #ed6c6f;
+    --bgl-red-tint: #fbe2e2;
+    --bgl-yellow: #ffbb00;
+    --bgl-yellow-light: #fff6d5;
+    --bgl-green: #75c98f;
+    --whatsapp-gray: #89959f;
+    --whatsapp-green: #e0fcd6;
+    --whatsapp-blue: #71bce6;
 }
 
 .Vue-Toastification__toast {
@@ -66,20 +93,18 @@
 }
 
 ::-moz-selection {
-    color: var(--bgl-white);
-    background: var(--bgl-blue-dark);
+    color: var(--bgl-selection-color);
+    background: var(--bgl-selection-bg);
 }
 
 ::selection {
-    color: var(--bgl-white);
-    background: var(--bgl-blue-dark);
+    color: var(--bgl-selection-color);
+    background: var(--bgl-selection-bg);
 }
 
-
-
 .popup {
     border-radius: 15px;
-    background: var(--bgl-white);
+    background: var(--bgl-popup-bg);
     box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
     padding: 2rem;
     min-width: 300px;
@@ -163,9 +188,10 @@
     -moz-column-gap: 1rem;
     column-gap: 1rem;
     grid-template-rows: 1fr;
-    grid-template-areas: "list-view detail-view";
+    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),
+    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);
 }
@@ -209,9 +235,10 @@
 .table-list-wrap {
     overflow: auto;
 }
-[dir="rtl"] .data-row .bgl_icon-font, 
-[dir="rtl"] .embedded-field .bgl_icon-font {
-	transform: rotateY(180deg) !important;
+
+[dir='rtl'] .data-row .bgl_icon-font,
+[dir='rtl'] .embedded-field .bgl_icon-font {
+    transform: rotateY(180deg) !important;
 }
 
 .copy-url {
@@ -229,13 +256,13 @@
     margin: 0;
     font-size: 12px;
     opacity: 0.8;
-    color: var(--bgl-black);
+    color: var(--bgl-text-color);
     word-break: break-all;
 }
 
 .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;
@@ -271,7 +298,7 @@
 
     .detail-view-inner {
         border-radius: var(--card-border-radius);
-        background: var(--bgl-white);
+        background: var(--bgl-box-bg);
     }
 
     .detail-view-inner-wrap {
@@ -282,7 +309,7 @@
     }
 
     .detail-view-inner-wrap.bgl_card {
-        background: var(--bgl-white);
+        background: var(--bgl-box-bg);
     }
 
     .bgl_card {
@@ -304,7 +331,7 @@
 
     .popup {
         border-radius: 15px;
-        background: var(--bgl-white);
+        background: var(--bgl-popup-bg);
         box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
         padding: 2rem;
         min-width: 0;

package/src/utils/index.ts

@@ -83,3 +83,19 @@ export function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFo
 		? schema.filter(f => showFields.includes(f.id as string) || !f.id)
 		: schema
 }
+
+export const sleep = (ms: number = 100) => new Promise(resolve => setTimeout(resolve, ms))
+
+export function appendScript(src: string): Promise<void> {
+	return new Promise((resolve, reject) => {
+		if (document.querySelector(`script[src="${src}"]`)) {
+			resolve()
+			return
+		}
+		const script = document.createElement('script')
+		script.src = src
+		script.onload = () => { resolve() }
+		script.onerror = reject
+		document.head.appendChild(script)
+	})
+}