@bagelink/vue 0.0.996 → 0.0.998

package/dist/style.css

@@ -683,96 +683,7 @@ data[data-v-6c27f163] {
 .bagel-input:focus-within.bgl-checkbox:not(:checked) label[data-v-03ed2982] {
     color: var(--label-color) !important;
 }
-pre code.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 1em
-}
-code.hljs {
-  padding: 3px 5px
-}
-/*
-
-Atom One Dark by Daniel Gamage
-Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
-
-base:    #282c34
-mono-1:  #abb2bf
-mono-2:  #818896
-mono-3:  #5c6370
-hue-1:   #56b6c2
-hue-2:   #61aeee
-hue-3:   #c678dd
-hue-4:   #98c379
-hue-5:   #e06c75
-hue-5-2: #be5046
-hue-6:   #d19a66
-hue-6-2: #e6c07b
 
-*/
-.hljs {
-  color: #abb2bf;
-  background: #282c34
-}
-.hljs-comment,
-.hljs-quote {
-  color: #5c6370;
-  font-style: italic
-}
-.hljs-doctag,
-.hljs-keyword,
-.hljs-formula {
-  color: #c678dd
-}
-.hljs-section,
-.hljs-name,
-.hljs-selector-tag,
-.hljs-deletion,
-.hljs-subst {
-  color: #e06c75
-}
-.hljs-literal {
-  color: #56b6c2
-}
-.hljs-string,
-.hljs-regexp,
-.hljs-addition,
-.hljs-attribute,
-.hljs-meta .hljs-string {
-  color: #98c379
-}
-.hljs-attr,
-.hljs-variable,
-.hljs-template-variable,
-.hljs-type,
-.hljs-selector-class,
-.hljs-selector-attr,
-.hljs-selector-pseudo,
-.hljs-number {
-  color: #d19a66
-}
-.hljs-symbol,
-.hljs-bullet,
-.hljs-link,
-.hljs-meta,
-.hljs-selector-id,
-.hljs-title {
-  color: #61aeee
-}
-.hljs-built_in,
-.hljs-title.class_,
-.hljs-class .hljs-title {
-  color: #e6c07b
-}
-.hljs-emphasis {
-  font-style: italic
-}
-.hljs-strong {
-  font-weight: bold
-}
-.hljs-link {
-  text-decoration: underline
-}
 .code-editor-wrap{
 	background: #282c34;
 	overflow: scroll;
@@ -942,7 +853,7 @@ hue-6-2: #e6c07b
 }
 }
 
-.img-web-kit[data-v-e1f932a8] {
+.img-web-kit[data-v-3f8cf457] {
 	max-width: 100%;
     vertical-align: middle;
     border: 0;
@@ -14147,4 +14058,93 @@ input::-moz-focus-inner {
         height: -webkit-fill-available;
 
     }
+}pre code.hljs {
+  display: block;
+  overflow-x: auto;
+  padding: 1em
+}
+code.hljs {
+  padding: 3px 5px
+}
+/*
+
+Atom One Dark by Daniel Gamage
+Original One Dark Syntax theme from https://github.com/atom/one-dark-syntax
+
+base:    #282c34
+mono-1:  #abb2bf
+mono-2:  #818896
+mono-3:  #5c6370
+hue-1:   #56b6c2
+hue-2:   #61aeee
+hue-3:   #c678dd
+hue-4:   #98c379
+hue-5:   #e06c75
+hue-5-2: #be5046
+hue-6:   #d19a66
+hue-6-2: #e6c07b
+
+*/
+.hljs {
+  color: #abb2bf;
+  background: #282c34
+}
+.hljs-comment,
+.hljs-quote {
+  color: #5c6370;
+  font-style: italic
+}
+.hljs-doctag,
+.hljs-keyword,
+.hljs-formula {
+  color: #c678dd
+}
+.hljs-section,
+.hljs-name,
+.hljs-selector-tag,
+.hljs-deletion,
+.hljs-subst {
+  color: #e06c75
+}
+.hljs-literal {
+  color: #56b6c2
+}
+.hljs-string,
+.hljs-regexp,
+.hljs-addition,
+.hljs-attribute,
+.hljs-meta .hljs-string {
+  color: #98c379
+}
+.hljs-attr,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-type,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo,
+.hljs-number {
+  color: #d19a66
+}
+.hljs-symbol,
+.hljs-bullet,
+.hljs-link,
+.hljs-meta,
+.hljs-selector-id,
+.hljs-title {
+  color: #61aeee
+}
+.hljs-built_in,
+.hljs-title.class_,
+.hljs-class .hljs-title {
+  color: #e6c07b
+}
+.hljs-emphasis {
+  font-style: italic
+}
+.hljs-strong {
+  font-weight: bold
+}
+.hljs-link {
+  text-decoration: underline
 }

package/package.json

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

package/src/components/Image.vue

@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { Skeleton, normalizeURL, normalizeDimension } from '@bagelink/vue'
-import heic2any from 'heic2any'
 import { watch } from 'vue'
 
 const { height, width, alt = '', src } = defineProps<{
@@ -38,6 +37,7 @@ async function loadImage(src: string) {
 		try {
 			const response = await fetch(src)
 			const blob = await response.blob()
+			const { default: heic2any } = await import('heic2any')
 			const convertedBlob = await heic2any({ blob }) as Blob
 			imageSrc = URL.createObjectURL(convertedBlob)
 			// Only attempt to cache if the cache API is available

package/src/components/form/inputs/CodeEditor/Index.vue

@@ -1,8 +1,6 @@
 <script setup lang="ts">
 import hljsVuePlugin from '@highlightjs/vue-plugin'
-import { nextTick, watch } from 'vue'
-import 'highlight.js/lib/common'
-import 'highlight.js/styles/atom-one-dark.css'
+import { nextTick, onMounted, watch } from 'vue'
 
 const { readonly = false, language, modelValue = '' } = defineProps<{
 	language?: string
@@ -32,6 +30,14 @@ function setHeight() {
 	height = `${scrollHeight}px`
 }
 
+let loaded = $ref(false)
+
+onMounted(async () => {
+	await import('highlight.js/lib/common')
+	await import('highlight.js/styles/atom-one-dark.css')
+	loaded = true
+})
+
 const Highlightjs = hljsVuePlugin.component
 watch(() => code, setHeight, { immediate: true })
 watch(() => modelValue, (value) => {
@@ -40,7 +46,7 @@ watch(() => modelValue, (value) => {
 </script>
 
 <template>
-	<div class="code-editor-wrap ltr radius-1">
+	<div v-if="loaded" class="code-editor-wrap ltr radius-1">
 		<div class="relative block h-100" :style="{ height }">
 			<div class="numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-1 w50px txt-start opacity-3 color-gray">
 				<div