@bagelink/vue 0.0.978 → 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

@@ -1041,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%;
+.rich-text-editor[data-v-9f9e8600] {
+  background: var(--input-bg);
+  border: 1px solid var(--border-color);
+  transition: all 0.3s ease;
 }
-.editableContent[data-v-cca783dc]{
-	min-height: 100%;
-	white-space: pre-wrap;
-	outline: none;
-}
-.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] {

package/package.json

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

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>