@bagelink/vue 0.0.1133 → 0.0.1137

package/src/styles/theme.css

@@ -1,379 +1,371 @@
-@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: var(--bgl-blue);
-    --bgl-primary-tint: #2e5bff80;
-    --bgl-primary-light: #eef6ff;
-    --bgl-black: #282929;
-    --bgl-black-tint: #28292980;
-    --bgl-white: #fff;
-    --bgl-gray: #b7b7b7;
-    --bgl-gray-light: #f5f8fa;
-    --bgl-gray-80: #e8ecef;
-    --bgl-gray-20: rgba(183, 183, 183, 0.2);
-    --bgl-gray-40: rgba(183, 183, 183, 0.4);
-    --bgl-accent-color: var(--bgl-primary);
-    --bgl-bg: #f4f6fa;
-    --bgl-shadow: #00000031;
-    --border-color: #00000020;
-    --placeholder-color: #00000040;
-    --label-color: #00000080;
-    --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(--bgl-gray);
-    --pill-btn-color: var(--bgl-white);
-    --pill-btn-bg: var(--placeholder-color);
-    --bgl-selected: var(--bgl-gray-light);
-    --skeleton-bg: #f0f0f0;
-    --skeleton-pulse: var(--bgl-bg);
-    --bgl-range-thumb-color: var(--bgl-white);
+	--bgl-primary: var(--bgl-blue);
+	--bgl-primary-tint: #2e5bff80;
+	--bgl-primary-light: #eef6ff;
+	--bgl-black: #282929;
+	--bgl-black-tint: #28292980;
+	--bgl-white: #fff;
+	--bgl-gray: #b7b7b7;
+	--bgl-gray-light: #f5f8fa;
+	--bgl-gray-80: #e8ecef;
+	--bgl-gray-20: rgba(183, 183, 183, 0.2);
+	--bgl-gray-40: rgba(183, 183, 183, 0.4);
+	--bgl-accent-color: var(--bgl-primary);
+	--bgl-bg: #f4f6fa;
+	--bgl-shadow: #00000031;
+	--border-color: #00000020;
+	--placeholder-color: #00000040;
+	--label-color: #00000080;
+	--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(--bgl-gray);
+	--pill-btn-color: var(--bgl-white);
+	--pill-btn-bg: var(--placeholder-color);
+	--bgl-selected: var(--bgl-gray-light);
+	--skeleton-bg: #f0f0f0;
+	--skeleton-pulse: var(--bgl-bg);
+	--bgl-range-thumb-color: var(--bgl-white);
 }
 
 /* TYPE */
 :root {
-    --bgl-font: 'Lexend', 'Ploni', sans-serif;
-    --input-font-size: 16px;
+	--bgl-font: 'Lexend', 'Ploni', sans-serif;
+	--input-font-size: 16px;
 }
 
 /* DIMENSIONS */
 :root {
-    --bgl-font-size: 16px;
-    --input-height: 40px;
-    --label-font-size: 12px;
-    --input-border-radius: 7px;
-    --card-border-radius: 12px;
-    --btn-border-radius: 10px;
-    --btn-padding: 30px;
-    --btn-height: 40px;
-    --pill-border-radius: 8px;
-    --pill-height: 30px;
-    --skeleton-radius: 0.25rem;
-    --skeleton-margin: 1rem;
-    --bgl-range-thumb-size: 20px;
-    --bgl-range-track-height: 8px;
+	--bgl-font-size: 16px;
+	--input-height: 40px;
+	--label-font-size: 12px;
+	--input-border-radius: 7px;
+	--card-border-radius: 12px;
+	--btn-border-radius: 10px;
+	--btn-padding: 30px;
+	--btn-height: 40px;
+	--pill-border-radius: 8px;
+	--pill-height: 30px;
+	--skeleton-radius: 0.25rem;
+	--skeleton-margin: 1rem;
+	--bgl-range-thumb-size: 20px;
+	--bgl-range-track-height: 8px;
 }
 
 /* MISC */
 :root {
-    --bgl-transition: all 200ms ease;
-    --bgl-transition-400: all 400ms ease;
-    --bgl-hover-filter: brightness(90%);
-    --bgl-active-filter: brightness(70%);
+	--bgl-transition: all 200ms ease;
+	--bgl-transition-400: all 400ms ease;
+	--bgl-hover-filter: brightness(90%);
+	--bgl-active-filter: brightness(70%);
 }
 
 /* OTHER COLORS */
 :root {
-    --bgl-blue: #2e5bff;
-    --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;
+	--bgl-blue: #2e5bff;
+	--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;
 }
 
 .testMe * {
-    outline: 1px dotted red;
+	outline: 1px dotted red;
 }
 
 .Vue-Toastification__toast {
-    border-radius: var(--card-border-radius);
-    box-shadow: none;
+	border-radius: var(--card-border-radius);
+	box-shadow: none;
 }
 
 .Vue-Toastification__toast--default {
-    background: var(--bgl-primary);
+	background: var(--bgl-primary);
 }
 
 .Vue-Toastification__close-button {
-    height: 1.5rem;
-    line-height: 1rem;
+	height: 1.5rem;
+	line-height: 1rem;
 }
 
 ::-moz-selection {
-    color: var(--bgl-selection-color);
-    background: var(--bgl-selection-bg);
+	color: var(--bgl-selection-color);
+	background: var(--bgl-selection-bg);
 }
 
 ::selection {
-    color: var(--bgl-selection-color);
-    background: var(--bgl-selection-bg);
+	color: var(--bgl-selection-color);
+	background: var(--bgl-selection-bg);
 }
 
 .popup {
-    border-radius: 15px;
-    background: var(--bgl-popup-bg);
-    box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-    padding: 2rem;
-    min-width: 300px;
-    text-align: center;
+	border-radius: 15px;
+	background: var(--bgl-popup-bg);
+	box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+	padding: 2rem;
+	min-width: 300px;
+	text-align: center;
 }
 
 .tabs {
-    -moz-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;
-    -webkit-padding-start: 2rem;
-    padding-inline-start: 2rem;
-    overflow: auto;
-    display: flex;
+	-moz-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;
+	-webkit-padding-start: 2rem;
+	padding-inline-start: 2rem;
+	overflow: auto;
+	display: flex;
 }
 
 .tab {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 2.5;
-    cursor: pointer;
-    transition: var(--bgl-transition);
-    border-bottom: 2px solid transparent;
-    padding: 0 5px;
-    white-space: nowrap;
-    text-decoration: none;
-    color: inherit;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 2.5;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	border-bottom: 2px solid transparent;
+	padding: 0 5px;
+	white-space: nowrap;
+	text-decoration: none;
+	color: inherit;
 }
 
 .tab.active {
-    color: var(--bgl-primary);
-    border-bottom: 2px solid var(--bgl-primary);
+	color: var(--bgl-primary);
+	border-bottom: 2px solid var(--bgl-primary);
 }
 
 .tab:hover {
-    color: var(--bgl-primary);
+	color: var(--bgl-primary);
 }
 
 .tab:active {
-    -webkit-filter: brightness(70%);
-    filter: brightness(70%);
+	-webkit-filter: brightness(70%);
+	filter: brightness(70%);
 }
 
 .router-tab {
-    font-size: 14px;
-    font-weight: 600;
-    line-height: 2.5;
-    cursor: pointer;
-    transition: var(--bgl-transition);
-    border-bottom: 2px solid transparent;
-    padding: 0 5px;
-    white-space: nowrap;
-    text-decoration: none;
-    color: inherit;
+	font-size: 14px;
+	font-weight: 600;
+	line-height: 2.5;
+	cursor: pointer;
+	transition: var(--bgl-transition);
+	border-bottom: 2px solid transparent;
+	padding: 0 5px;
+	white-space: nowrap;
+	text-decoration: none;
+	color: inherit;
 }
 
 .router-tab.router-link-active {
-    color: var(--bgl-primary);
-    border-bottom: 2px solid var(--bgl-primary);
+	color: var(--bgl-primary);
+	border-bottom: 2px solid var(--bgl-primary);
 }
 
 .router-tab:hover {
-    color: var(--bgl-primary);
+	color: var(--bgl-primary);
 }
 
 .router-tab:active {
-    -webkit-filter: brightness(70%);
-    filter: brightness(70%);
+	-webkit-filter: brightness(70%);
+	filter: brightness(70%);
 }
 
 .entity-container {
-    display: grid;
-    height: 100%;
-    grid-template-columns: minmax(300px, 1fr) 3fr;
-    grid-gap: 1rem;
-    -moz-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: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
+	display: grid;
+	height: 100%;
+	grid-template-columns: minmax(300px, 1fr) 3fr;
+	grid-gap: 1rem;
+	-moz-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: all 0.5s cubic-bezier(0.79, 0.01, 0.34, 0.99);
 }
 
 .detail-main {
-    overflow-y: auto;
+	overflow-y: auto;
 }
 
 .content-row p {
-    margin: 0 0 10px 0;
+	margin: 0 0 10px 0;
 }
 
 .id {
-    color: var(--bgl-gray);
-    font-size: 9px;
+	color: var(--bgl-gray);
+	font-size: 9px;
 }
 
 .field {
-    --field-count: 1;
-    --width: calc(100% / var(--field-count));
-    grid-auto-columns: minmax(var(--width), var(--width));
-    font-size: 10px;
-    text-align: z;
+	--field-count: 1;
+	--width: calc(100% / var(--field-count));
+	grid-auto-columns: minmax(var(--width), var(--width));
+	font-size: 10px;
+	text-align: z;
 }
 
 .detail-view-inner {
-    display: grid;
-    height: 100%;
-    overflow: hidden;
-    grid-template-rows: -webkit-max-content 1fr;
-    grid-template-rows: max-content 1fr;
-    gap: 1rem;
+	display: grid;
+	height: 100%;
+	overflow: hidden;
+	grid-template-rows: -webkit-max-content 1fr;
+	grid-template-rows: max-content 1fr;
+	gap: 1rem;
 }
 
 .detail-view-inner-wrap {
-    height: 100%;
-    overflow: hidden;
-    transition: var(--bgl-transition);
+	height: 100%;
+	overflow: hidden;
+	transition: var(--bgl-transition);
 }
 
 .table-list-wrap {
-    overflow: auto;
-}
-
-[dir='rtl'] .data-row .bgl_icon-font,
-[dir='rtl'] .embedded-field .bgl_icon-font,
-[dir='rtl'] .rich-text-editor .toolbar .bgl_icon-font {
-    transform: rotateY(180deg) !important;
-
+	overflow: auto;
 }
 
 .copy-url {
-    background-color: var(--bgl-gray-light);
-    border-radius: var(--btn-border-radius);
-    padding: 0.5rem 1rem;
-    align-items: center;
-    justify-content: flex-start;
-    margin-bottom: 1rem;
-    display: flex;
-    justify-content: space-between;
+	background-color: var(--bgl-gray-light);
+	border-radius: var(--btn-border-radius);
+	padding: 0.5rem 1rem;
+	align-items: center;
+	justify-content: flex-start;
+	margin-bottom: 1rem;
+	display: flex;
+	justify-content: space-between;
 }
 
 .copy-url a {
-    margin: 0;
-    font-size: 12px;
-    opacity: 0.8;
-    color: var(--bgl-text-color);
-    word-break: break-all;
+	margin: 0;
+	font-size: 12px;
+	opacity: 0.8;
+	color: var(--bgl-text-color);
+	word-break: break-all;
 }
 
 .list-view {
-    grid-area: list-view;
-    grid-template-areas: 'list-header''list-content';
-    grid-template-columns: 1fr;
-    overflow-y: auto;
-    grid-template-rows: -webkit-max-content 1fr;
-    grid-template-rows: max-content 1fr;
-    transition: var(--transition);
+	grid-area: list-view;
+	grid-template-areas: 'list-header' 'list-content';
+	grid-template-columns: 1fr;
+	overflow-y: auto;
+	grid-template-rows: -webkit-max-content 1fr;
+	grid-template-rows: max-content 1fr;
+	transition: var(--transition);
 }
 
 .shekel {
-    line-height: 0;
+	line-height: 0;
 }
 
 .view-wrapper {
-    height: 100%;
-    position: relative;
-    overflow: hidden;
+	height: 100%;
+	position: relative;
+	overflow: hidden;
 }
 
 @media screen and (max-width: 1000px) {
-    .entity-container {
-        grid-template-columns: minmax(22vw, 1fr) 2fr;
-    }
+	.entity-container {
+		grid-template-columns: minmax(22vw, 1fr) 2fr;
+	}
 }
 
 @media screen and (max-width: 910px) {
-    .tab {
-        font-size: 12px;
-    }
-
-    .entity-container {
-        grid-template-columns: 1fr;
-        gap: 0;
-    }
-
-    .detail-view-inner {
-        border-radius: var(--card-border-radius);
-        background: var(--bgl-box-bg);
-    }
-
-    .detail-view-inner-wrap {
-        position: absolute;
-        height: 100%;
-        width: 100%;
-        background: var(--bgl-bg);
-    }
-
-    .detail-view-inner-wrap.bgl_card {
-        background: var(--bgl-box-bg);
-    }
-
-    .bgl_card {
-        padding: 1rem 1rem;
-    }
-
-    .tabs {
-        -moz-column-gap: 10px;
-        column-gap: 10px;
-        margin-top: 10px;
-        margin-bottom: -15px;
-        box-sizing: border-box;
-        -webkit-margin-start: -1rem;
-        margin-inline-start: -1rem;
-        -webkit-padding-start: 1rem;
-        padding-inline-start: 1rem;
-        max-width: calc(100vw - 2rem);
-    }
-
-    .popup {
-        border-radius: 15px;
-        background: var(--bgl-popup-bg);
-        box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
-        padding: 2rem;
-        min-width: 0;
-        max-width: 90%;
-        max-height: 90vh;
-        overflow-x: auto;
-        text-align: center;
-    }
-
-    .detail-main {
-        overflow-y: unset;
-    }
-
-    .detail-section {
-        height: -webkit-fit-content;
-        height: -moz-fit-content;
-        height: fit-content;
-    }
-
-    .field {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 0.5rem;
-        align-items: center;
-    }
-}
+	.tab {
+		font-size: 12px;
+	}
+
+	.entity-container {
+		grid-template-columns: 1fr;
+		gap: 0;
+	}
+
+	.detail-view-inner {
+		border-radius: var(--card-border-radius);
+		background: var(--bgl-box-bg);
+	}
+
+	.detail-view-inner-wrap {
+		position: absolute;
+		height: 100%;
+		width: 100%;
+		background: var(--bgl-bg);
+	}
+
+	.detail-view-inner-wrap.bgl_card {
+		background: var(--bgl-box-bg);
+	}
+
+	.bgl_card {
+		padding: 1rem 1rem;
+	}
+
+	.tabs {
+		-moz-column-gap: 10px;
+		column-gap: 10px;
+		margin-top: 10px;
+		margin-bottom: -15px;
+		box-sizing: border-box;
+		-webkit-margin-start: -1rem;
+		margin-inline-start: -1rem;
+		-webkit-padding-start: 1rem;
+		padding-inline-start: 1rem;
+		max-width: calc(100vw - 2rem);
+	}
+
+	.popup {
+		border-radius: 15px;
+		background: var(--bgl-popup-bg);
+		box-shadow: 0 1px 2px 0 rgb(0 0 0 / 10%);
+		padding: 2rem;
+		min-width: 0;
+		max-width: 90%;
+		max-height: 90vh;
+		overflow-x: auto;
+		text-align: center;
+	}
+
+	.detail-main {
+		overflow-y: unset;
+	}
+
+	.detail-section {
+		height: -webkit-fit-content;
+		height: -moz-fit-content;
+		height: fit-content;
+	}
+
+	.field {
+		display: flex;
+		flex-wrap: wrap;
+		gap: 0.5rem;
+		align-items: center;
+	}
+}

package/src/types/BtnOptions.ts

@@ -1,11 +1,11 @@
-import type { MaterialIcons, ThemeType } from '.'
+import type { IconType, ThemeType } from '.'
 
 export interface BtnOptions {
 	onClick?: () => void
 	color?: ThemeType
 	theme?: ThemeType
 	disabled?: boolean
-	icon?: MaterialIcons
+	icon?: IconType
 	flat?: boolean
 	thin?: boolean
 	type?: 'button' | 'submit' | 'reset'

package/src/types/NavLink.ts

@@ -1,9 +1,9 @@
-import type { MaterialIcons } from './materialIcons'
+import type { IconType } from '@bagelink/vue'
 
 export interface NavLink {
 	label: string
 	to?: string
-	icon: MaterialIcons
+	icon: IconType
 	localized?: string
 	children?: NavLink[]
 	onClick?: () => void