@bagelink/vue 1.14.13 → 1.14.15

package/src/components/form/inputs/ToggleInput.vue

@@ -66,21 +66,21 @@ onMounted(() => {
     appearance: none;
     position: relative;
     display: inline-block;
-    background: var(--input-bg);
-    height: calc(var(--input-height) / 2);
-    width: calc(var(--input-height) - 2px);
+    background: var(--bgl-input-bg);
+    height: calc(var(--bgl-input-height) / 2);
+    width: calc(var(--bgl-input-height) - 2px);
     vertical-align: middle;
     border-radius: 2rem;
     box-shadow: 0px 1px 3px #0003 inset;
     transition: 0.25s linear all;
-    outline: 1px solid var(--border-color);
+    outline: 1px solid var(--bgl-border-color);
 
 }
 .bgl-toggle input::before {
   position: absolute;
   content: "";
-  height: calc(var(--input-height) / 2 - 2px);
-  width: calc(var(--input-height) / 2 - 2px);
+  height: calc(var(--bgl-input-height) / 2 - 2px);
+  width: calc(var(--bgl-input-height) / 2 - 2px);
   inset-inline-start: 1px;
   bottom: 1px;
   border-radius: 50%;
@@ -95,8 +95,8 @@ onMounted(() => {
   transition: var(--bgl-transition);
   cursor: pointer;
   user-select: none;
-  line-height: var(--input-height);
-  font-size: var(--input-font-size);
+  line-height: var(--bgl-input-height);
+  font-size: var(--bgl-input-font-size);
   vertical-align: middle;
 }
 
@@ -123,7 +123,7 @@ onMounted(() => {
   background: var(--bgl-input-label-active-color, var(--bgl-primary));
 }
 .bgl-toggle :checked::before{
-  margin-inline-start:calc(var(--input-height) / 2 - 2px) ;
+  margin-inline-start:calc(var(--bgl-input-height) / 2 - 2px) ;
 }
 .bgl-toggle input:checked + label {
     color: var(--bgl-input-label-active-color, var(--bgl-primary)) !important;
@@ -131,13 +131,13 @@ onMounted(() => {
 
 /* ── bgl-outline variant ── */
 .bgl-outline input {
-    outline: 1.5px solid var(--border-color) !important;
+    outline: 1.5px solid var(--bgl-border-color) !important;
     outline-offset: 2px;
 }
 
 /* ── frame variant ── */
 .frame input {
-    outline: 1.5px solid var(--border-color) !important;
+    outline: 1.5px solid var(--bgl-border-color) !important;
     outline-offset: 2px;
     transition: outline-color 0.2s ease, box-shadow 0.2s ease;
     background: transparent;

package/src/components/form/inputs/Upload/upload.css

@@ -1,19 +1,19 @@
 .fileUploadWrap {
-    outline: 1px solid var(--border-color);
-    border-radius: var(--input-border-radius);
+    outline: 1px solid var(--bgl-border-color);
+    border-radius: var(--bgl-input-border-radius);
     text-align: center;
     cursor: pointer;
     transition: var(--bgl-transition);
     position: relative;
-    font-size: var(--input-font-size);
+    font-size: var(--bgl-input-font-size);
     overflow-y: auto;
-    background: var(--input-bg);
+    background: var(--bgl-input-bg);
     height: 215px;
     outline-offset: -1px;
 }
 
 .bagel-input .fileUploadWrap.fileDropZone {
-    background: var(--input-bg);
+    background: var(--bgl-input-bg);
     display: flex;
     align-items: center;
     justify-content: center;
@@ -31,21 +31,21 @@
 }
 
 .multi-image-item-preview {
-    border: 1px solid var(--border-color) !important;
-    border-radius: var(--input-border-radius);
+    border: 1px solid var(--bgl-border-color) !important;
+    border-radius: var(--bgl-input-border-radius);
     margin: 0.5rem !important;
     background: var(--bgl-popup-bg);
     padding: 0;
     padding-inline-end: 1rem;
     padding-inline-start: 0.25rem;
     text-align: start;
-    color: var(--input-color);
+    color: var(--bgl-input-color);
     display: grid;
     grid-template-columns: auto 1fr 22px;
     gap: 0.5rem;
     align-items: center;
-    height: var(--btn-height);
-    font-size: var(--label-font-size);
+    height: var(--bgl-btn-height);
+    font-size: var(--bgl-label-font-size);
 }
 
 .multi-image-item-preview p {
@@ -56,9 +56,9 @@
 
 .multi-preview {
     /* width: 40px; */
-    height: calc(var(--btn-height) - 0.5rem);
-    max-width: calc(var(--btn-height) - 0.5rem);
-    border-radius: calc(var(--input-border-radius) / 2);
+    height: calc(var(--bgl-btn-height) - 0.5rem);
+    max-width: calc(var(--bgl-btn-height) - 0.5rem);
+    border-radius: calc(var(--bgl-input-border-radius) / 2);
     object-fit: cover;
     background: var(--bgl-gray-light);
     text-align: center !important;
@@ -274,7 +274,7 @@
 .bagel-input.frame .fileUploadWrap,
 .bagel-input.frame .fileUploadWrap.fileDropZone {
     background: transparent;
-    outline-color: var(--border-color);
+    outline-color: var(--bgl-border-color);
     transition: outline-color 0.2s ease, box-shadow 0.2s ease;
 }
 

package/src/components/index.ts

@@ -34,9 +34,6 @@ export { default as ListView } from './ListView.vue'
 export { default as Loading } from './Loading.vue'
 export { default as MapEmbed } from './MapEmbed/Index.vue'
 export { default as Menu } from './Menu.vue'
-export { default as Modal } from './Modal.vue'
-export { default as ModalConfirm } from './ModalConfirm.vue'
-export { default as ModalForm } from './ModalForm.vue'
 export { default as NavBar } from './NavBar.vue'
 export { default as PageTitle } from './PageTitle.vue'
 export { default as Pagination } from './Pagination.vue'

package/src/components/layout/AppSidebar.vue

@@ -160,7 +160,7 @@ const sidebarStyles = computed(() => {
 			:style="{
 				backgroundColor: props.bgColor,
 				color: props.textColor,
-				...(props.card && { borderRadius: 'var(--card-border-radius)' }),
+				...(props.card && { borderRadius: 'var(--bgl-card-border-radius)' }),
 			}" :class="{
 				'card cardWrapSide': props.card,
 				'px-05': !isVisuallyOpen,
@@ -227,7 +227,7 @@ const sidebarStyles = computed(() => {
 
 <style>
 .aside_frame {
-	outline: 1px solid var(--border-color);
+	outline: 1px solid var(--bgl-border-color);
 }
 
 .card .aside_frame {
@@ -236,7 +236,7 @@ const sidebarStyles = computed(() => {
 
 .app-sidebar {
 	transition: width 0.4s ease;
-	--input-font-size: 0.875rem;
+	--bgl-input-font-size: 0.875rem;
 	/* 14px */
 }
 

package/src/components/layout/BottomMenu.vue

@@ -59,7 +59,7 @@ defineProps<{
 }
 
 .bgl_bottombar .nav-button {
-  border-radius: var(--card-border-radius);
+  border-radius: var(--bgl-card-border-radius);
 
 }
 

package/src/components/layout/Skeleton.vue

@@ -1,9 +1,10 @@
 <script lang="ts" setup>
+defineOptions({ name: 'BglSkeleton' })
 const {
 	count = 1,
 	height,
 	width,
-	borderRadius = 'var(--skeleton-radius)',
+	borderRadius = 'var(--bgl-skeleton-radius)',
 	round = false,
 	class: className = '',
 } = defineProps<{
@@ -31,11 +32,11 @@ const slots: SetupContext['slots'] = useSlots()
 
 <style scoped>
 .skeleton-wrap {
-	margin-bottom: var(--skeleton-margin);
+	margin-bottom: var(--bgl-skeleton-margin);
 }
 
 .skeleton {
-	background-color: var(--skeleton-bg);
+	background-color: var(--bgl-skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
     position: relative;
@@ -44,7 +45,7 @@ const slots: SetupContext['slots'] = useSlots()
 
 .skeleton::before {
     content: "";
-    background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
+    background: linear-gradient(90deg, transparent 20%, var(--bgl-skeleton-pulse) 50%, transparent 80%);
     animation: loadingAnimation 1s ease-in-out infinite;
     position: absolute;
     inset: 0px;

package/src/components/layout/TabsNav.vue

@@ -171,17 +171,17 @@ onBeforeUnmount(() => {
 
 <style>
 :root {
-	--bgl_tabs-background: var(--input-bg);
-	--bgl_tabs-border-radius: var(--input-border-radius);
-	--bgl_tabs-inline-padding: calc(var(--btn-padding) / 8);
-	--bgl_tabs-block-padding: calc(var(--btn-padding) / 8);
+	--bgl_tabs-background: var(--bgl-input-bg);
+	--bgl_tabs-border-radius: var(--bgl-input-border-radius);
+	--bgl_tabs-inline-padding: calc(var(--bgl-btn-padding) / 8);
+	--bgl_tabs-block-padding: calc(var(--bgl-btn-padding) / 8);
 	--bgl_tabs-shadow: inset 0 0 10px #00000012;
 	--bgl_tabs-gap: 0.25rem;
-	--bgl_tabs-font-size: var(--input-font-size);
-	--bgl_tab-inline-padding: calc(var(--btn-padding) / 2);
-	--bgl_tab-block-padding: calc(var(--btn-padding) / 8);
+	--bgl_tabs-font-size: var(--bgl-input-font-size);
+	--bgl_tab-inline-padding: calc(var(--bgl-btn-padding) / 2);
+	--bgl_tab-block-padding: calc(var(--bgl-btn-padding) / 8);
 	--bgl_tab-gap: 0.5rem;
-	--bgl_tabs-border-radius: var(--input-border-radius);
+	--bgl_tabs-border-radius: var(--bgl-input-border-radius);
 	--bgl-tab-hover-bg: rgba(255, 255, 255, .4);
 	--bgl_tabs-indicator-color: var(--bgl-popup-bg);
 	--bgl-tabs-flat-indicator-color: var(--bgl-primary);
@@ -204,7 +204,7 @@ onBeforeUnmount(() => {
 	cursor: pointer;
 	font-size: inherit;
 	font-family: inherit;
-	height: calc(var(--btn-height) - var(--bgl_tabs-block-padding) * 2);
+	height: calc(var(--bgl-btn-height) - var(--bgl_tabs-block-padding) * 2);
 	padding-inline: var(--bgl_tab-inline-padding);
 	padding-block: 0;
 		border-radius: var(--bgl_tab-border-radius);
@@ -242,7 +242,7 @@ onBeforeUnmount(() => {
 	background: transparent;
 	border-bottom: 1px solid var(--bgl-tabs-flat-indicator-color);
 	border-radius: 0;
-	top: calc(var(--btn-padding) * 1.25);
+	top: calc(var(--bgl-btn-padding) * 1.25);
 	bottom: unset;
 
 }
@@ -255,30 +255,30 @@ onBeforeUnmount(() => {
 }
 .bgl_tab-thin {
 	padding-inline: calc(var(--bgl_tab-inline-padding) / 2);
-	height: calc(var(--btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
+	height: calc(var(--bgl-btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-xs {
 	padding-inline: calc(var(--bgl_tab-inline-padding) / 3);
-	font-size: calc(var(--input-font-size) * 0.6);
-	height: calc(var(--btn-height) * 0.5 - var(--bgl_tabs-block-padding) * 2);
+	font-size: calc(var(--bgl-input-font-size) * 0.6);
+	height: calc(var(--bgl-btn-height) * 0.5 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-s {
 	padding-inline: calc(var(--bgl_tab-inline-padding) / 1.5);
-	height: calc(var(--btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
+	height: calc(var(--bgl-btn-height) * 0.7 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-l {
 	padding-inline: calc(var(--bgl_tab-inline-padding) * 1.3);
-	font-size: calc(var(--input-font-size) * 1.1);
-	height: calc(var(--btn-height) * 1.2 - var(--bgl_tabs-block-padding) * 2);
+	font-size: calc(var(--bgl-input-font-size) * 1.1);
+	height: calc(var(--bgl-btn-height) * 1.2 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-xl {
 	padding-inline: calc(var(--bgl_tab-inline-padding) * 1.6);
-	font-size: calc(var(--input-font-size) * 1.3);
-	height: calc(var(--btn-height) * 1.5 - var(--bgl_tabs-block-padding) * 2);
+	font-size: calc(var(--bgl-input-font-size) * 1.3);
+	height: calc(var(--bgl-btn-height) * 1.5 - var(--bgl_tabs-block-padding) * 2);
 }
 
 .bgl_tab-align-start {

package/src/index.ts

@@ -23,7 +23,6 @@ export {
 	useI18n,
 } from './i18n'
 export { type BagelOptions, BagelVue, getI18n } from './plugins/bagel'
-export { ModalPlugin, useModal } from './plugins/useModal'
 
 export { type BagelToastOptions, type ToastApi, ToastPlugin, useToast } from './plugins/useToast'
 

package/src/plugins/bagel.ts

@@ -2,14 +2,12 @@ import type { Plugin } from 'vue'
 import type { CreateBagelI18nOptions } from '../i18n'
 
 import type { BagelToastOptions } from './useToast'
-import { configure } from '@bagelink/utils'
 import FloatingVue from 'floating-vue'
 import lightboxPlugin from '../components/lightbox/index'
 import { DialogPlugin } from '../dialog/useDialog'
 import { ripple, pattern } from '../directives'
 import { createI18n, getI18n } from '../i18n'
 import clickOutside from '../utils/clickOutside'
-import { ModalPlugin } from './useModal'
 import { ToastPlugin } from './useToast'
 import '@oddbird/popover-polyfill'
 
@@ -29,7 +27,6 @@ export const BagelVue: Plugin<BagelOptions> = {
 		// Install UI plugins
 		app.use(lightboxPlugin)
 		app.use(DialogPlugin)
-		app.use(ModalPlugin)
 		app.use(ToastPlugin, options.toast || {})
 
 		// Install FloatingVue for tooltips/popovers
@@ -46,18 +43,6 @@ export const BagelVue: Plugin<BagelOptions> = {
 		// Setup i18n
 		const i18n = createI18n(options.i18n || {})
 		app.use(i18n as any)
-
-		// Bridge locale into @bagelink/utils
-		configure({
-			locale: () => {
-				try {
-					const { locale } = getI18n().global
-					return typeof locale === 'string' ? locale : locale.value
-				} catch {
-					return 'en'
-				}
-			},
-		})
 	},
 }
 

package/src/styles/app-layout.css

@@ -0,0 +1,231 @@
+/* App-level layout patterns — extracted from theme.css (June 2026)
+ * These are application-specific rules, not design tokens or reusable utilities.
+ */
+
+.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;
+}
+
+.tabs {
+    column-gap: 1rem;
+    margin-top: 20px;
+    margin-bottom: -2rem;
+    border-top: 1px solid var(--bgl-border-color);
+    width: calc(100% + 4rem);
+    margin-inline-start: -2rem;
+    padding-inline-start: 2rem;
+    overflow: auto;
+    display: flex;
+}
+
+.tab,
+.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;
+}
+
+.tab.active,
+.router-tab.router-link-active {
+    color: var(--bgl-primary);
+    border-bottom: 2px solid var(--bgl-primary);
+}
+
+.tab:hover,
+.router-tab:hover {
+    color: var(--bgl-primary);
+}
+
+.tab:active,
+.router-tab:active {
+    filter: brightness(70%);
+}
+
+.entity-container {
+    display: grid;
+    height: 100%;
+    grid-template-columns: minmax(300px, 1fr) 3fr;
+    grid-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;
+}
+
+.content-row p {
+    margin: 0 0 10px 0;
+}
+
+.id {
+    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: start;
+}
+
+.detail-view-inner {
+    display: grid;
+    height: 100%;
+    overflow: hidden;
+    grid-template-rows: max-content 1fr;
+    gap: 1rem;
+}
+
+.detail-view-inner-wrap {
+    height: 100%;
+    overflow: hidden;
+    transition: var(--bgl-transition);
+}
+
+.table-list-wrap {
+    overflow: auto;
+}
+
+.copy-url {
+    background-color: var(--bgl-gray-light);
+    border-radius: var(--bgl-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;
+}
+
+.list-view {
+    grid-area: list-view;
+    grid-template-areas: 'list-header''list-content';
+    grid-template-columns: 1fr;
+    overflow-y: auto;
+    grid-template-rows: max-content 1fr;
+    transition: var(--bgl-transition-ease);
+}
+
+.shekel {
+    line-height: 0;
+}
+
+.view-wrapper {
+    height: 100%;
+    position: relative;
+    overflow: hidden;
+}
+
+.extraOptions {
+    max-height: 30px;
+    overflow: hidden;
+    transition: all 0.2s 30s ease;
+}
+
+.extraOptions:hover {
+    max-height: 200vh;
+    transition: 0.2s all 0.2s ease;
+}
+
+@media screen and (max-width: 1000px) {
+    .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(--bgl-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 {
+        column-gap: 10px;
+        margin-top: 10px;
+        margin-bottom: -15px;
+        box-sizing: border-box;
+        margin-inline-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: fit-content;
+    }
+
+    .field {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+        align-items: center;
+    }
+}