@bagelink/vue 0.0.974 → 0.0.980

package/dist/plugins/bagel.d.ts

@@ -8,7 +8,7 @@ export interface BagelOptions {
     availableLangs?: string[];
     defaultLang?: string;
     language?: string;
-    host: string;
+    host?: string;
     onError?: (err: Error) => void;
     i18nT?: (key: string) => string;
 }

package/dist/plugins/bagel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQrC,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,KAAK,CAAC,CAAA;AACvE,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;AAEzF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,UAT+C,MAAM,KAAK,MAAM,CAcvF;AAED,MAAM,WAAW,YAAY;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,EAAE,MAAM,CAAA;IAEZ,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAE9B,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AACD,eAAO,MAAM,QAAQ,EAAE,MAyBtB,CAAA"}
+{"version":3,"file":"bagel.d.ts","sourceRoot":"","sources":["../../src/plugins/bagel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,KAAK,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAA;AAQrC,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,KAAK,CAAC,CAAA;AACvE,eAAO,MAAM,iBAAiB,EAAsB,YAAY,CAAC,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAC,CAAA;AAEzF,wBAAgB,QAAQ,UAKvB;AAED,wBAAgB,QAAQ,UAT+C,MAAM,KAAK,MAAM,CAcvF;AAED,MAAM,WAAW,YAAY;IAC5B,cAAc,CAAC,EAAE,MAAM,EAAE,CAAA;IACzB,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,IAAI,CAAC,EAAE,MAAM,CAAA;IAEb,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,KAAK,KAAK,IAAI,CAAA;IAE9B,KAAK,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,MAAM,CAAA;CAC/B;AACD,eAAO,MAAM,QAAQ,EAAE,MAyBtB,CAAA"}

package/dist/style.css

@@ -707,6 +707,13 @@ data[data-v-6c27f163] {
 }
 }
 
+.img-web-kit[data-v-e1f932a8] {
+	max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+	width: 100%;
+}
+
 .fileUploadWrap[data-v-e057bb0f] {
 	outline: 1px solid var(--border-color);
 	border-radius: var(--input-border-radius);
@@ -1034,281 +1041,70 @@ data[data-v-6c27f163] {
   border-radius: 5px;
 }
 
-/* Basic editor styles */
-.tiptap > * + * {
-	margin-top: 0.75em;
-}
-.tiptap ul,
-.tiptap ol {
-	padding: 0 1rem;
-}
-.tiptap h1,
-.tiptap h2 {
-	line-height: 1;
-}
-.tiptap h3,
-.tiptap h4,
-.tiptap h5,
-.tiptap h6 {
-	line-height: 1.1;
-}
-.tiptap pre {
-	background: #0d0d0d;
-	color: var(--bgl-light-text);
-	font-family: 'JetBrainsMono', monospace;
-	padding: 0.75rem 1rem;
-	border-radius: 0.5rem;
-	margin: 0;
-}
-.tiptap pre code {
-	color: inherit;
-	padding: 0;
-	background: none;
-	font-size: 0.8rem;
-}
-.tiptap img {
-	max-width: 100%;
-	height: auto;
-}
-.tiptap blockquote {
-	padding-inline-start: 0.5rem;
-	border-inline-start: 2px solid var(--border-color);
-	margin: 0.5rem
-}
-.tiptap hr {
-	border: none;
-	border-top: 2px solid var(--border-color);
-	margin: 1rem 0;
-}
-.tiptap {
-	min-height: 200px;
-	background: var(--input-bg);
-	overflow: auto;
-	max-height: 500px;
-	padding: 0.7rem;
-	color: var(--input-color);
-	border-radius: var(--input-border-radius);
-	font-size: var(--input-font-size);
-	line-height: 1.5;
-}
-.tiptap.ProseMirror-focused {
-	outline: none;
-	box-shadow: inset 0 0 10px #00000012;
-}
-.RichText {
-	margin-bottom: 0.5rem;
-}
-.RichText-tools {
-	background: var(--input-bg);
-	margin-bottom: 0.125rem;
-	border-radius: var(--input-border-radius);
-}
-.tiptap {
-table {
-		border-collapse: collapse;
-		table-layout: fixed;
-		width: 100%;
-		margin: 0;
-		overflow: hidden;
-td,
-		th {
-			min-width: 1em;
-			border: 2px solid var(--border-color);
-			padding: 3px 5px;
-			vertical-align: top;
-			box-sizing: border-box;
-			position: relative;
-> * {
-				margin-bottom: 0;
-				margin-top: 0;
-}
-}
-th {
-			font-weight: bold;
-			text-align: start;
-			background-color: var(--bgl-gray-80);
-}
-.selectedCell:after {
-			z-index: 2;
-			position: absolute;
-			content: '';
-			left: 0;
-			right: 0;
-			top: 0;
-			bottom: 0;
-			background: var(--bgl-gray-20);
-			pointer-events: none;
-}
-.selectedCell p::selection{
-			color: var(--bgl-popup-text)
-}
-.column-resize-handle {
-			position: absolute;
-			inset-inline-start: -2px;
-			top: 0;
-			bottom: -2px;
-			width: 4px;
-			background-color: #adf;
-			pointer-events: none;
-}
-p {
-			margin: 0;
-}
-}
-}
-.tableWrapper {
-	padding: 1rem 0;
-	overflow-x: auto;
-}
-.resize-cursor {
-	cursor: ew-resize;
-	cursor: col-resize;
-}
-.RichText-tools [disabled]{
-	color: var(--bgl-popup-text) !important;
-	opacity: 0.3;
-}
-.RichText iframe{
-	width: 100%;
-	max-width: 700px;
-	margin: 0 auto;
-	height: auto;
-	display: block;
-	border-radius: var(--input-border-radius);
-	border: none;
-	aspect-ratio: 16/9;
-}
-.RichText img{
-	width: 100%;
-	max-width: 700px;
-	margin: 0 auto;
-	height: auto;
-	display: block;
-	border-radius: var(--input-border-radius);
+.toolbar[data-v-6868ce1f] .active {
+  background: var(--primary-color);
+  color: white;
 }
 
-@font-face {
-    font-family: 'FontWithASyntaxHighlighter';
-    font-style: normal;
-    font-weight: 400;
-    font-stretch: 100%;
-    font-display: swap;
-    src: url(https://bagel.sfo2.cdn.digitaloceanspaces.com/Fonts/FontWithASyntaxHighlighter-Regular.woff2) format('woff2')
-}
-@font-palette-values --myCustomPalette {
-  font-family: 'FontWithASyntaxHighlighter';
-  override-colors:
-    0 #6191c2, /* keywords, {} */
-    1 #75975d, /* comments */
-    2 yellow, /* literals */
-    3 #a3c19a, /* numbers */
-    4 lightblue, /* functions, [] */
-    5 orange, /* js others */
-    6 black, /* not in use */
-    7 #bc8abd, /* inside quotes, css properties, few chars */
-    8 #818181 /* few chars */
-  ;
-}
-.preview-area[data-v-cca783dc]{
-	font-family: "FontWithASyntaxHighlighter", monospace;
-  	font-palette: --myCustomPalette;
-	background: var(--bgl-code-bg);
-	color: var(--bgl-code-color)
-}
-.rich-text-editor[data-v-cca783dc] {
-	background: var(--input-bg);
-	margin-bottom: 0.5rem;
-	width: 100%;
-}
-.editableContent[data-v-cca783dc]{
-	min-height: 100%;
-	white-space: pre-wrap;
-	outline: none;
+.rich-text-editor[data-v-9f9e8600] {
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
 }
-.content-area[data-v-cca783dc]{
-	background: var(--bgl-richtext-color);
+.editor-container[data-v-9f9e8600] {
+  display: flex;
+  gap: 1rem;
 }
-.content-area[data-v-cca783dc], .preview-area[data-v-cca783dc]{
-	min-height: 200px;
+.content-area[data-v-9f9e8600], .preview-area[data-v-9f9e8600] {
+  flex: 1;
+  min-height: 200px;
+  background: var(--bgl-richtext-color);
 }
-.fullscreen-mode[data-v-cca783dc] {
-    position: fixed;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    z-index: 9999;
-    background: var(--input-bg);
-    padding: 2rem;
-    overflow: auto;
-	border-radius: 0;
+.split-view .content-area[data-v-9f9e8600],
+.split-view .preview-area[data-v-9f9e8600] {
+  width: 50%;
 }
-.fullscreen-mode .content-area[data-v-cca783dc]{
-	height: calc(100vh - 5rem);
-	padding: 4rem !important;
-	max-width: 900px;
-	margin-inline: auto ;
-	overflow-y: auto;
+.editableContent[data-v-9f9e8600] {
+  min-height: 100%;
+  white-space: pre-wrap;
+  outline: none;
 }
-.fullscreen-mode .toolbar[data-v-cca783dc]{
-	max-width: 900px;
-	margin-inline: auto ;
-	/* border-bottom: 1px solid var(--border-color); */
-	/* margin-bottom: 2rem; */
+.html-editor[data-v-9f9e8600] {
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  font-family: monospace;
+  background: transparent;
+  border: none;
+  outline: none;
+  resize: none;
 }
-
-/* [contenteditable='true'] {
-	  white-space: pre-wrap;
-	  word-wrap: break-word;
-	outline: none;
-	height: 100%;
-} */
-/*
-
-.editor-container {
-  display: flex;
-  border: 1px solid #ccc;
-  border-radius: 4px;
-  overflow: hidden;
+.preview-area[data-v-9f9e8600] {
+  font-family: monospace;
+  white-space: pre-wrap;
+  overflow-x: auto;
 }
-
-.content-area,
-.preview-area {
-  flex: 1;
-  min-height: 300px;
-  padding: 10px;
+.preview-area code[data-v-9f9e8600] {
+  display: block;
+  padding: 1rem;
+}
+.fullscreen-mode[data-v-9f9e8600] {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 9999;
+  padding: 2rem;
+}
+.fullscreen-mode .editor-container[data-v-9f9e8600] {
+  height: calc(100vh - 8rem);
+}
+.fullscreen-mode .content-area[data-v-9f9e8600],
+.fullscreen-mode .preview-area[data-v-9f9e8600] {
+  height: 100%;
   overflow-y: auto;
 }
-
-.content-area:focus {
-  outline: none;
-}
-
-.split-view .content-area,
-.split-view .preview-area {
-  width: 50%;
-}
-
-.preview-area {
-  background-color: #f9f9f9;
-  border-left: 1px solid #ccc;
-} */
-
-/* @media (max-width: 768px) {
-  .split-view {
-    flex-direction: column;
-  }
-
-  .split-view .content-area,
-  .split-view .preview-area {
-    width: 100%;
-  }
-
-  .preview-area {
-    border-left: none;
-    border-top: 1px solid #ccc;
-  }
-} */
 .resize-observer[data-v-b329ee4c]{position:absolute;top:0;left:0;z-index:-1;width:100%;height:100%;border:none;background-color:transparent;pointer-events:none;display:block;overflow:hidden;opacity:0}.resize-observer[data-v-b329ee4c] object{display:block;position:absolute;top:0;left:0;height:100%;width:100%;overflow:hidden;pointer-events:none;z-index:-1}.v-popper__popper{z-index:10000;top:0;left:0;outline:none}.v-popper__popper.v-popper__popper--hidden{visibility:hidden;opacity:0;transition:opacity .15s,visibility .15s;pointer-events:none}.v-popper__popper.v-popper__popper--shown{visibility:visible;opacity:1;transition:opacity .15s}.v-popper__popper.v-popper__popper--skip-transition,.v-popper__popper.v-popper__popper--skip-transition>.v-popper__wrapper{transition:none!important}.v-popper__backdrop{position:absolute;top:0;left:0;width:100%;height:100%;display:none}.v-popper__inner{position:relative;box-sizing:border-box;overflow-y:auto}.v-popper__inner>div{position:relative;z-index:1;max-width:inherit;max-height:inherit}.v-popper__arrow-container{position:absolute;width:10px;height:10px}.v-popper__popper--arrow-overflow .v-popper__arrow-container,.v-popper__popper--no-positioning .v-popper__arrow-container{display:none}.v-popper__arrow-inner,.v-popper__arrow-outer{border-style:solid;position:absolute;top:0;left:0;width:0;height:0}.v-popper__arrow-inner{visibility:hidden;border-width:7px}.v-popper__arrow-outer{border-width:6px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{left:-2px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{left:-1px}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-outer{border-bottom-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=top] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-container{top:0}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{border-top-width:0;border-left-color:transparent!important;border-right-color:transparent!important;border-top-color:transparent!important}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-inner{top:-4px}.v-popper__popper[data-popper-placement^=bottom] .v-popper__arrow-outer{top:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{top:-2px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{top:-1px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{border-left-width:0;border-left-color:transparent!important;border-top-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-inner{left:-4px}.v-popper__popper[data-popper-placement^=right] .v-popper__arrow-outer{left:-6px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-container{right:-10px}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner,.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-outer{border-right-width:0;border-top-color:transparent!important;border-right-color:transparent!important;border-bottom-color:transparent!important}.v-popper__popper[data-popper-placement^=left] .v-popper__arrow-inner{left:-2px}.v-popper--theme-tooltip .v-popper__inner{background:rgba(0,0,0,.8);color:#fff;border-radius:6px;padding:7px 12px 6px}.v-popper--theme-tooltip .v-popper__arrow-outer{border-color:#000c}.v-popper--theme-dropdown .v-popper__inner{background:#fff;color:#000;border-radius:6px;border:1px solid #ddd;box-shadow:0 6px 30px #0000001a}.v-popper--theme-dropdown .v-popper__arrow-inner{visibility:visible;border-color:#fff}.v-popper--theme-dropdown .v-popper__arrow-outer{border-color:#ddd}
 
 .selectinput[data-v-982f5078] {
@@ -1805,25 +1601,25 @@ p {
   transform: translateX(-20px);
 }
 
-.skeleton-wrap[data-v-9a44f23a] {
+.skeleton-wrap[data-v-4da8c0d1] {
 	margin-bottom: var(--skeleton-margin);
 }
-.skeleton[data-v-9a44f23a] {
+.skeleton[data-v-4da8c0d1] {
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
     position: relative;
     overflow: hidden;
 }
-.skeleton[data-v-9a44f23a]::before {
+.skeleton[data-v-4da8c0d1]::before {
     content: "";
     background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
-    animation: loadingAnimation-9a44f23a 1s ease-in-out infinite;
+    animation: loadingAnimation-4da8c0d1 1s ease-in-out infinite;
     position: absolute;
     inset: 0px;
     transform: translateX(-100%);
 }
-@keyframes loadingAnimation-9a44f23a {
+@keyframes loadingAnimation-4da8c0d1 {
 to {
         transform: translateX(100%);
 }
@@ -3474,19 +3270,19 @@ tbody tr[data-v-fae54756]:hover {
   -moz-user-drag: none;
 }
 
-.lightbox-image[data-v-0a882f27]{
+.lightbox-image[data-v-d5e5a1db]{
 	object-fit: contain;
 }
-.bgl-lightbox-overlay[data-v-0a882f27] {
+.bgl-lightbox-overlay[data-v-d5e5a1db] {
 	background: rgba(0, 0, 0, 0.8);
 }
-.bgl-lightbox[data-v-0a882f27] {
+.bgl-lightbox[data-v-d5e5a1db] {
 	max-height: 90%;
 }
-.bgl-lightbox-item[data-v-0a882f27]{
-	animation: 500ms ease bgl-lightbox-load-0a882f27;
+.bgl-lightbox-item[data-v-d5e5a1db]{
+	animation: 500ms ease bgl-lightbox-load-d5e5a1db;
 }
-@keyframes bgl-lightbox-load-0a882f27 {
+@keyframes bgl-lightbox-load-d5e5a1db {
 from {
     scale:0.7;
 }
@@ -3494,44 +3290,44 @@ to {
 	scale:1;
 }
 }
-.bgl-lightbox-item[data-v-0a882f27] * {
+.bgl-lightbox-item[data-v-d5e5a1db] * {
 	max-width: 90%;
 	max-height: calc(80vh - 90px);
 	border-radius: 3px;
 	margin: auto;
-	animation: 200ms ease bgl-lightbox-load-0a882f27;
+	animation: 200ms ease bgl-lightbox-load-d5e5a1db;
 }
-.navigation[data-v-0a882f27] {
+.navigation[data-v-d5e5a1db] {
 	top: 50%;
 	transform: translateY(-50%);
 }
-.navigation-btn[data-v-0a882f27] {
+.navigation-btn[data-v-d5e5a1db] {
 	width: var(--input-height);
 	height: var(--input-height);
 }
-.thumbnail[data-v-0a882f27] {
+.thumbnail[data-v-d5e5a1db] {
 	height: 50px;
 	width: 50px;
 }
-.thumbnail[data-v-0a882f27]:hover {
+.thumbnail[data-v-d5e5a1db]:hover {
 	opacity: 1;
 }
-.thumbnail[data-v-0a882f27]:active {
+.thumbnail[data-v-d5e5a1db]:active {
 	opacity: 0.8;
 }
-.thumbnail.active[data-v-0a882f27] {
+.thumbnail.active[data-v-d5e5a1db] {
 	opacity: 1;
 	outline: 2px solid white;
 }
-.file-info[data-v-0a882f27]{
+.file-info[data-v-d5e5a1db]{
 	max-width: 420px
 }
 @media screen and (max-width: 910px) {
-.file-info[data-v-0a882f27]{
+.file-info[data-v-d5e5a1db]{
 	max-width: 220px;
 	text-align: center !important;
 }
-.file-info[data-v-0a882f27] *{
+.file-info[data-v-d5e5a1db] *{
 	text-align: center !important;
 	margin-inline: 0 !important;;
 	max-width: 100% !important;

package/dist/utils/index.d.ts

@@ -16,6 +16,8 @@ export declare const isDate: (dateToTest: any) => boolean;
 export declare function getFallbackSchema<T>(data?: any[], showFields?: string[]): BglFormSchemaT<T>;
 export declare function sleep(ms?: number): Promise<unknown>;
 export declare function appendScript(src: string): Promise<void>;
+export declare function normalizeURL(url: string): string;
+export declare function normalizeDimension(value: string | number | undefined, defaultMetric?: string): string | undefined;
 export * as bagelFormUtils from './BagelFormUtils';
 export { useLang } from './lang';
 export { formatString } from './strings';

package/dist/utils/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/utils/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,cAAc,EAAE,MAAM,eAAe,CAAA;AAE/D,wBAAgB,QAAQ,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,UAAU,CAAC,CAAC,CAAC,EAC3E,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,MAAM,EACZ,SAAS,CAAC,EAAE,OAAO,GACjB,CAAC,GAAG,IAAI,EAAE,UAAU,CAAC,CAAC,CAAC,KAAK,IAAI,CAelC;AAED,wBAAgB,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,CAQ3D;AAED,wBAAsB,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,EAAE,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,iBAGtE;AAED,wBAAgB,QAAQ,CAAC,GAAG,MAAM,EAAE,MAAM,EAAE,UAG3C;AAED,wBAAgB,SAAS,CAAC,KAAK,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,IAAI,QAIrE;AAED,wBAAgB,QAAQ,CAAC,QAAQ,CAAC,EAAE,GAAG,EAAE,GAAG,CAAC,EAAE,GAAG,EAAE,GAAG,OAAO,EAAE,GAAG,EAAE,UAOpE;AAED,wBAAgB,SAAS,CAAC,CAAC,GAAG;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EACnD,KAAK,CAAC,EAAE,UAAU,EAClB,QAAQ,CAAC,EAAE,GAAG,EACd,GAAG,CAAC,EAAE,CAAC,OAcP;AAED,wBAAgB,KAAK,CAAC,KAAK,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,OAO9C;AAED,wBAAgB,SAAS,CAAC,QAAQ,CAAC,EAAE;IAAE,CAAC,GAAG,EAAE,MAAM,GAAG,GAAG,CAAA;CAAE,EAAE,OAAO,CAAC,EAAE,MAAM,OAG5E;AAED,eAAO,MAAM,MAAM,eAAgB,GAAG,YAA0C,CAAA;AAEhF,wBAAgB,iBAAiB,CAAC,CAAC,EAClC,IAAI,CAAC,EAAE,GAAG,EAAE,EACZ,UAAU,CAAC,EAAE,MAAM,EAAE,GACnB,cAAc,CAAC,CAAC,CAAC,CAWnB;AAED,wBAAgB,KAAK,CAAC,EAAE,GAAE,MAAY,oBAErC;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC,IAAI,CAAC,CAcvD;AAED,wBAAgB,YAAY,CAAC,GAAG,EAAE,MAAM,UAIvC;AAED,wBAAgB,kBAAkB,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,GAAG,SAAS,EAAE,aAAa,SAAO,GAAG,MAAM,GAAG,SAAS,CAG/G;AAED,OAAO,KAAK,cAAc,MAAM,kBAAkB,CAAA;AAElD,OAAO,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAA;AAEhC,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.974",
+  "version": "0.0.980",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Image.vue

@@ -1,8 +1,9 @@
 <script setup lang="ts">
+import { Skeleton, normalizeURL, normalizeDimension } from '@bagelink/vue'
 import heic2any from 'heic2any'
 import { watch } from 'vue'
 
-const { src, alt, width, height } = defineProps<{
+const { height, width, alt = '', src } = defineProps<{
 	src: string
 	alt?: string
 	width?: string | number
@@ -12,12 +13,42 @@ const { src, alt, width, height } = defineProps<{
 let imageSrc = $ref<string | null>(null)
 
 async function loadImage(src: string) {
-	if (src.endsWith('.heic')) {
+	if (!src) {
+		imageSrc = null
+		return
+	}
+	src = normalizeURL(src)
+	const ext = src.split('.').pop()?.toLowerCase().split('?').shift()
+
+	if (ext === 'heic') {
+		if (!('caches' in window)) {
+			console.warn('Caching is not available. Proceeding without cache.')
+		} else {
+			try {
+				const imgCache = await window.caches.open('img-cache')
+				const cachedResponse = await imgCache.match(src)
+				if (cachedResponse) {
+					imageSrc = URL.createObjectURL(await cachedResponse.blob())
+					return
+				}
+			} catch (error) {
+				console.warn('Error accessing cache:', error)
+			}
+		}
 		try {
 			const response = await fetch(src)
 			const blob = await response.blob()
 			const convertedBlob = await heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
+			// Only attempt to cache if the cache API is available
+			if ('caches' in window) {
+				try {
+					const imgCache = await window.caches.open('img-cache')
+					imgCache.put(src, new Response(convertedBlob))
+				} catch (cacheError) {
+					console.warn('Failed to cache the image:', cacheError)
+				}
+			}
 		} catch (error) {
 			console.error('Error converting HEIC file:', error)
 		}
@@ -25,12 +56,25 @@ async function loadImage(src: string) {
 		imageSrc = src
 	}
 }
-
 watch(() => src, loadImage, { immediate: true })
 </script>
 
 <template>
-	<div>
-		<img v-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="width" :height="height">
-	</div>
+	<img v-if="imageSrc" :src="imageSrc" v-bind="$attrs" :alt="alt" :width="normalizeDimension(width)" :height="normalizeDimension(height)">
+	<Skeleton
+		v-else
+		class="img-web-kit"
+		:width="normalizeDimension(width)"
+		:height="normalizeDimension(height)"
+	/>
 </template>
+
+<style scoped>
+.img-web-kit {
+	max-width: 100%;
+    vertical-align: middle;
+    border: 0;
+	width: 100%;
+
+}
+</style>

package/src/components/form/inputs/RichText2/Toolbar.vue

@@ -53,28 +53,35 @@ const toolbarOptions: toolbarOption[] = [
 </script>
 
 <template>
-	<div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
-		<template v-for="(action, index) in toolbarOptions" :key="index">
-			<Btn
-				v-if="action.name !== 'separator' && config.includes(action.name)"
-				v-tooltip="action.label"
-				:icon="action.icon"
-				thin
-				flat
-				:aria-label="action.name"
-				:class="action.class"
-				class="radius-05"
-				@click="emit('action', action.name, action.label)"
-			/>
-			<span
-				v-else-if="action.name === 'separator'"
-				:key="`separator-${index}`"
-				class=" opacity-2 mb-025"
-			>|</span>
-		</template>
-	</div>
+  <div class="toolbar flex gap-025 pb-05 flex-wrap" role="toolbar">
+    <template v-for="(action, index) in toolbarOptions" :key="index">
+      <Btn
+        v-if="action.name !== 'separator' && config.includes(action.name)"
+        v-tooltip="action.label"
+        :icon="action.icon"
+        thin
+        flat
+        :aria-label="action.name"
+        :class="[action.class, { active: selectedStyles?.has(action.name) }]"
+        class="radius-05"
+        @click="emit('action', action.name, action.label)"
+      />
+      <span
+        v-else-if="action.name === 'separator'"
+        :key="`separator-${index}`"
+        class="opacity-2 mb-025"
+      >|</span>
+    </template>
+  </div>
 </template>
 
+<style scoped>
+.toolbar :deep(.active) {
+  background: var(--primary-color);
+  color: white;
+}
+</style>
+
 <style scoped>
 
 </style>