@bagelink/vue 0.0.331 → 0.0.335

package/src/styles/text.css

@@ -152,7 +152,6 @@
 }
 
 @media screen and (max-width: 910px) {
-
     .txt20,
     .txt-20 {
         font-size: 18px;
@@ -167,4 +166,157 @@
     .txt-14 {
         font-size: 12px;
     }
+
+    .m_txt-center {
+        text-align: center;
+    }
+
+    .m_txt-start {
+        text-align: start;
+    }
+
+    .m_txt-end {
+        text-align: end;
+    }
+
+    .m_txt-small {
+        font-size: 12px;
+    }
+
+    .m_txt20,
+    .m_txt-20 {
+        font-size: 20px;
+    }
+
+    .m_txt18,
+    .m_txt-18 {
+        font-size: 18px;
+    }
+
+    .m_txt16,
+    .m_txt-16 {
+        font-size: 16px;
+    }
+
+    .m_txt14,
+    .m_txt-14 {
+        font-size: 14px;
+    }
+
+    .m_txt12,
+    .m_txt-12 {
+        font-size: 12px;
+    }
+
+    .m_txt10,
+    .m_txt-10 {
+        font-size: 10px;
+    }
+
+    .m_txt9,
+    .m_txt-9 {
+        font-size: 9px;
+    }
+
+    .m_no-margin {
+        margin: 0;
+    }
+
+    .m_txt-gray,
+    .m_txtgray {
+        color: var(--bgl-gray);
+    }
+
+    .m_txt-blue,
+    .m_txtblue {
+        color: var(--bgl-primary);
+    }
+
+    .m_txt-black,
+    .m_txtblack {
+        color: var(--bgl-black);
+    }
+
+    .m_txt-red,
+    .m_txtred {
+        color: var(--bgl-red);
+    }
+
+    .m_txt-white,
+    .m_txtwhite {
+        color: var(--bgl-white);
+    }
+
+    .m_font-light {
+        font-weight: 100;
+    }
+
+    .m_bold {
+        font-weight: 700;
+    }
+
+    .m_line-height-1 {
+        line-height: 1;
+    }
+
+    .m_ellipsis {
+        overflow: hidden;
+        display: block;
+        width: 100%;
+        text-overflow: ellipsis;
+    }
+
+    .m_ellipsis-1,
+    .m_ellipsis-2,
+    .m_ellipsis-3,
+    .m_ellipsis-4,
+    .m_ellipsis-5,
+    .m_ellipsis-6 {
+        display: block;
+        display: -webkit-box;
+        max-width: 100%;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .m_ellipsis-1 {
+        -webkit-line-clamp: 1;
+    }
+
+    .m_ellipsis-2 {
+        -webkit-line-clamp: 2;
+    }
+
+    .m_ellipsis-3 {
+        -webkit-line-clamp: 3;
+    }
+
+    .m_ellipsis-4 {
+        -webkit-line-clamp: 4;
+    }
+
+    .m_ellipsis-5 {
+        -webkit-line-clamp: 5;
+    }
+
+    .m_ellipsis-6 {
+        -webkit-line-clamp: 6;
+    }
+
+    .m_pointer {
+        cursor: pointer;
+    }
+
+    .m_decoration-none {
+        text-decoration: none;
+    }
+
+    .m_bgl_icon-font {
+        font-family: "Material Symbols Outlined", serif;
+    }
+
+    .m_nowrap {
+        white-space: nowrap;
+    }
 }

package/src/types/index.ts

@@ -2,7 +2,9 @@ export type {
 	ModalFormComponentProps, ModalApi, ModalComponentProps, ModalFormOptions, ModalOptions,
 } from '../plugins/modal';
 
-export type { MaterialIcons } from './materialIcons';
+import type { MaterialIcons } from './materialIcons';
+
+export type { MaterialIcons };
 export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
 export type { NavLink } from './NavLink';
@@ -10,6 +12,12 @@ export type { NavLink } from './NavLink';
 export * from './BtnOptions';
 export * from './BagelForm';
 
+export type Tab = {
+  label: string;
+  id: string;
+  icon?: MaterialIcons;
+} | string
+
 export type ThemeType = |
   'light'
   | 'red'