@bagelink/vue 0.0.988 → 0.0.996

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

@@ -1,440 +1,133 @@
 <script setup lang="ts">
-import type { Directive } from 'vue'
-import { Btn, Dropdown, copyText } from '@bagelink/vue'
-import hljs from 'highlight.js'
-import { defineEmits, defineProps, nextTick, onMounted, watch } from 'vue'
-import { type CodeTheme, type Language, codeLanguages } from './CodeTypes'
-import { formatCode } from './format'
-import './themes/themes-base16.css'
-import './themes/themes.css'
-
-const {
-	showLineNumbers = false,
-	modelValue = '',
-	theme = 'github-dark',
-	tabSpaces = 2,
-	wrap = true,
-	readOnly = false,
-	autofocus = false,
-	header = true,
-	width = '400px',
-	height = '600px',
-	maxWidth,
-	minWidth,
-	maxHeight,
-	minHeight,
-	borderRadius = '12px',
-	languages = ['javascript'],
-	displayLanguage = true,
-	copyCode = true,
-	fontSize = '17px',
-	padding = '20px'
-} = defineProps<{
-	showLineNumbers?: boolean
+import hljsVuePlugin from '@highlightjs/vue-plugin'
+import { nextTick, watch } from 'vue'
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/atom-one-dark.css'
+
+const { readonly = false, language, modelValue = '' } = defineProps<{
+	language?: string
+	readonly?: boolean
 	modelValue?: string
-	theme?: CodeTheme
-	tabSpaces?: number
-	wrap?: boolean
-	readOnly?: boolean
-	autofocus?: boolean
-	header?: boolean
-	width?: string
-	height?: string
-	maxWidth?: string
-	minWidth?: string
-	maxHeight?: string
-	minHeight?: string
-	borderRadius?: string
-	languages?: Language[]
-	displayLanguage?: boolean
-	copyCode?: boolean
-	fontSize?: string
-	padding?: string
 }>()
 
-const emit = defineEmits(['update:modelValue', 'lang', 'content', 'textarea', 'search'])
-
-let scrollBarWidth = $ref(0)
-let scrollBarHeight = $ref(0)
-let top = $ref(0)
-let left = $ref(0)
-let currentLanguage = $ref(languages[0])
-let content = $ref(formatCode(modelValue, currentLanguage))
-let cursorPosition = $ref(0)
-let insertTab = $ref(false)
-let lineNum = $ref(0)
-let lineNumsWidth = $ref(0)
-let scrolling = $ref(false)
-let textareaHeight = $ref(0)
-const langListHeight = $ref('200px') // Define langListHeight with a default value
-
-const textarea = $ref<HTMLTextAreaElement>()
-const code = $ref<HTMLElement>()
-const lineNums = $ref<HTMLElement>()
-
-const languageClass = $computed(() => `hljs language-${currentLanguage}`)
-const languageTitle = $computed(() => codeLanguages[currentLanguage as Language])
-const tabWidth = $computed(() => ' '.repeat(tabSpaces))
-const scroll = $computed(() => height !== 'auto')
-
-const showLineNums = $computed(() => showLineNumbers || wrap)
+let code = $ref('')
 
-const autoClosePairs = {
-	'(': ')',
-	'[': ']',
-	'{': '}',
-	'"': '"',
-	'\'': '\'',
-	'`': '`'
-}
-
-function updateValue(e: Event) {
-	const target = e.target as HTMLTextAreaElement
-	const char = target.value[target.selectionStart - 1]
-
-	if (char && autoClosePairs[char as keyof typeof autoClosePairs]) {
-		const closingChar = autoClosePairs[char as keyof typeof autoClosePairs]
-		const cursorPos = target.selectionStart
-		target.value = target.value.slice(0, cursorPos) + closingChar + target.value.slice(cursorPos)
-		target.selectionStart = cursorPos
-		target.selectionEnd = cursorPos
-	}
-	const cursorPos = target.selectionStart
-	content = target.value
-	emit('update:modelValue', content)
+function tabKeyDown(event: KeyboardEvent) {
+	const target = event.target as HTMLTextAreaElement
+	const start = target.selectionStart
+	const end = target.selectionEnd
+	const tab = '  '
+	code = code.slice(0, start) + tab + code.slice(end)
 	nextTick(() => {
-		target.setSelectionRange(cursorPos, cursorPos)
+		target.selectionStart = target.selectionEnd = start + 2
 	})
 }
 
-function changeLang(lang: Language) {
-	currentLanguage = lang
-	emit('lang', lang)
-}
+const textarea = $ref<HTMLInputElement>()
+let height = $ref('300px')
 
-function tab() {
-	if (document.execCommand('insertText')) {
-		document.execCommand('insertText', false, tabWidth)
-	} else {
-		const cursorPos = textarea?.selectionStart ?? 0
-		content
-			= content.substring(0, cursorPos) + tabWidth + content.substring(cursorPos)
-		cursorPosition = cursorPos + tabWidth.length
-		insertTab = true
-	}
+function setHeight() {
+	if (!textarea) return
+	const { scrollHeight } = textarea
+	height = `${scrollHeight}px`
 }
 
-function calcScrollDistance(e: Event) {
-	const target = e.target as HTMLTextAreaElement
-	code?.setAttribute('scrolling', 'true')
-	scrolling = true
-	top = -target.scrollTop
-	left = -target.scrollLeft
-}
-
-function resizer() {
-	const textareaResizer = new ResizeObserver((entries) => {
-		const target = entries[0].target as HTMLElement
-		scrollBarWidth = target.offsetWidth - target.clientWidth
-		scrollBarHeight = target.offsetHeight - target.clientHeight
-		textareaHeight = target.offsetHeight
-	})
-	if (textarea) {
-		textareaResizer.observe(textarea)
-	}
-
-	const lineNumsResizer = new ResizeObserver((entries) => {
-		lineNumsWidth = (entries[0].target as HTMLElement).offsetWidth
-	})
-	if (lineNums) {
-		lineNumsResizer.observe(lineNums)
-	}
-}
-
-function getLineNum() {
-	const str = textarea!.value
-	let lineNumCount = 0
-	let position = str.indexOf('\n')
-	while (position !== -1) {
-		lineNumCount++
-		position = str.indexOf('\n', position + 1)
-	}
-	const firstChild = lineNums!.firstChild as HTMLElement
-	const singleLineHeight = firstChild!.offsetHeight
-	const heightNum = Math.floor(textareaHeight / singleLineHeight) - 1
-	lineNum = height === 'auto' ? lineNumCount : Math.max(lineNumCount, heightNum)
-}
-
-watch(() => modelValue, (newVal) => {
-	if (newVal !== undefined) {
-		content = newVal
-	}
-})
-
-onMounted(() => {
-	emit('lang', languages[0])
-	emit('content', content)
-	emit('textarea', textarea)
-	resizer()
-})
-
-watch(() => insertTab, (newVal) => {
-	if (newVal) {
-		textarea!.setSelectionRange(cursorPosition, cursorPosition)
-		insertTab = false
-	}
-})
-
-watch(() => showLineNumbers, (newVal) => {
-	if (newVal) {
-		if (scrolling) scrolling = false
-		else getLineNum()
-	}
-})
-
-const highlight: Directive = {
-	mounted(el, binding) {
-		el.textContent = binding
-		hljs.highlightElement(el)
-	},
-	updated(el, binding) {
-		if (el.getAttribute('data-scrolling') === 'true') {
-			el.setAttribute('data-scrolling', 'false')
-		} else {
-			el.textContent = binding
-			hljs.highlightElement(el)
-		}
-	},
-}
-
-defineExpose({ highlight })
+const Highlightjs = hljsVuePlugin.component
+watch(() => code, setHeight, { immediate: true })
+watch(() => modelValue, (value) => {
+	if (value !== code) code = value
+}, { immediate: true })
 </script>
 
 <template>
-	<div
-		:theme="theme" class="code-editor" :class="{
-			'hide-header': !header,
-			'scroll': scroll,
-			'read-only': readOnly,
-			'wrap': wrap,
-		}" :style="{
-			width,
-			height,
-			maxWidth,
-			minWidth,
-			maxHeight,
-			minHeight,
-		}"
-	>
-		<div class="hljs" :style="{ borderRadius }">
-			<div
-				v-if="header" class="p-025 flex space-between" :class="{ border: showLineNums }"
-				:style="{ borderRadius: `${borderRadius} ${borderRadius} 0 0` }"
-			>
-				<Dropdown v-if="displayLanguage" :value="languageTitle" flat thin :disabled="languages.length <= 1">
-					<ul class="lang-list hljs" :style="{ height: langListHeight }">
-						<li v-for="(lang, index) in languages" :key="index" @click="changeLang(lang)">
-							{{ codeLanguages[lang] }}
-						</li>
-					</ul>
-				</Dropdown>
-				<Btn v-if="copyCode" v-tooltip.left="'Copy'" class="color-white" flat thin icon="content_copy" @click="copyText(content)" />
-			</div>
-			<div class="code-area" :style="{ borderRadius: header ? `0 0 ${borderRadius} ${borderRadius}` : borderRadius }">
+	<div 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
-					v-if="showLineNums" ref="lineNums" class="line-nums hljs" :style="{
-						fontSize,
-						paddingTop: header ? '10px' : padding,
-						paddingBottom: padding,
-						top: `${top}px`,
-					}"
+					v-for="(_, index) in code.split('\n')"
+					:key="index"
+					class="number txt-end"
 				>
-					<div>1</div>
-					<div v-for="num in lineNum" :key="num">
-						{{ num + 1 }}
-					</div>
-					<div>&nbsp;</div>
+					{{ index + 1 }}
 				</div>
-				<textarea
-					ref="textarea" title="textarea" :readOnly="readOnly" :style="{
-						fontSize,
-						padding: !header ? padding : lineNums ? `10px ${padding} ${padding}` : `0 ${padding} ${padding}`,
-						marginLeft: showLineNums ? `${lineNumsWidth}px` : '0',
-						width: showLineNums ? `calc(100% - ${lineNumsWidth}px)` : '100%',
-					}" :autofocus="autofocus" spellcheck="false" :value="content"
-					@keydown.tab.prevent.stop="tab" @scroll="calcScrollDistance" @input="updateValue"
-				/>
-				<pre
-					:style="{
-						paddingRight: `${scrollBarWidth}px`,
-						paddingBottom: `${scrollBarHeight}px`,
-						marginLeft: showLineNums ? `${lineNumsWidth}px` : '0',
-						width: showLineNums ? `calc(100% - ${lineNumsWidth}px)` : '100%',
-					}"
-				>
-        <code
-          ref="code"
-          :innerHTML="hljs.highlight(content, { language: currentLanguage }).value"
-          :class="languageClass"
-          :style="{
-          	top: `${top}px`,
-          	left: `${left}px`,
-          	fontSize,
-          	padding: !header ? padding : lineNums ? `10px ${padding} ${padding}` : `0 ${padding} ${padding}`,
-          }"
-/>
-      </pre>
 			</div>
+			<Highlightjs
+				class="highlighted-code absolute inset-0"
+				:autodetect="!language"
+				:code="code"
+				:wrap="true"
+				:language="language"
+			/>
+			<textarea
+				v-if="!readonly"
+				ref="textarea"
+				v-model="code"
+				:spellcheck="false"
+				class="code-editor absolute inset-0 overflow-hidden bg-transparent line-height-15 border-none m-0"
+				placeholder="Write your code here"
+				aria-label="Code Editor"
+				data-gramm="false"
+				@input="$emit('update:modelValue', code)"
+				@keydown.tab.prevent="tabKeyDown"
+			/>
 		</div>
 	</div>
 </template>
 
 <style>
-.code-editor {
-	position: relative;
+.code-editor-wrap{
+	background: #282c34;
+	overflow: scroll;
+	display: grid;
+	max-height: 300px;
 }
 
-.code-editor>div {
-	width: 100%;
-	height: 100%;
+.numbers {
+	font-family: monospace;
+	border-inline-end: 1px solid var(--bgl-gray);
 }
-
-.code-editor .code-area {
-	position: relative;
-	z-index: 0;
-	text-align: left;
-	overflow: hidden;
+.number{
+	scale: 0.9;
 }
-
-/* Common styles for text elements */
-.code-editor .code-area>textarea,
-.code-editor .code-area>pre>code,
-.code-editor .line-nums>div {
-	font-family: Consolas, Monaco, monospace;
-	line-height: 1.5;
+/* Highlight.js styles */
+.highlighted-code {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
 }
 
-.code-editor .code-area>textarea:focus-within {
-	background: rgba(255, 255, 255, 0.05);
+.highlighted-code code {
+	padding-left: 70px !important;
+	overflow: hidden !important;
 }
 
-/* Textarea styles */
-.code-editor .code-area>textarea {
-	position: absolute;
-	z-index: 1;
-	inset: 0;
-	box-sizing: border-box;
-	caret-color: rgb(127, 127, 127);
+/* Textarea aligned with Highlight.js */
+.code-editor {
+	font-family: monospace;
 	color: transparent;
-	white-space: pre;
-	word-wrap: normal;
-	border: 0;
-	width: 100%;
-	height: 100%;
-	background: none;
 	resize: none;
-	outline: none;
-}
-
-/* Pre and code styles */
-.code-editor .code-area>pre {
-	box-sizing: border-box;
-	position: relative;
-	margin: 0;
-	font-size: 0;
-}
-
-.code-editor .code-area>pre>code {
-	display: block;
-	position: relative;
-	overflow-x: visible !important;
-	background: none;
-	margin: 0;
-	box-sizing: border-box;
-}
-
-/* Wrap styles */
-.code-editor.wrap .code-area>textarea,
-.code-editor.wrap .code-area>pre>code {
 	white-space: pre-wrap;
 	word-wrap: break-word;
-	word-break: break-all;
-}
+	caret-color: var(--bgl-white);
+	font-size: 16px;
+	padding: 1rem;
+	padding-left: 70px !important;
 
-/* Scroll styles */
-.code-editor.scroll .code-area {
-	height: calc(100% - 34px);
 }
 
-.code-editor.hide-header.scroll .code-area {
-	height: 100%;
+.code-editor::-moz-selection {
+	background: #2466bc30;
+	color: inherit;
 }
 
-.code-editor.scroll .code-area>textarea {
-	overflow: auto;
+.code-editor::selection {
+	background: #2466bc30;
+	color: inherit;
 }
 
-/* Language list styles */
-.code-editor .list {
-	user-select: none;
-	height: 100%;
-	font-family: sans-serif;
-}
-
-.code-editor .list>.lang-list {
-	border-radius: 5px;
-	padding: 0;
-	margin: 0;
-	list-style: none;
-	font-size: 13px;
-	overflow: auto;
-}
-
-.code-editor .list>.lang-list>li {
-	padding: 0 12px;
-	line-height: 30px;
-	white-space: nowrap;
-	overflow: hidden;
-	text-overflow: ellipsis;
-	transition: background 0.16s ease;
-}
-
-.code-editor .list>.lang-list>li:first-child {
-	padding-top: 5px;
-}
-
-.code-editor .list>.lang-list>li:last-child {
-	padding-bottom: 5px;
-}
-
-.code-editor .list>.lang-list>li:hover {
-	background: rgba(160, 160, 160, 0.4);
-}
-
-/* Line numbers */
-.code-editor .line-nums {
-	min-width: 36px;
-	position: absolute;
-	left: 0;
-	padding: 0 8px;
-	text-align: right;
-	opacity: 0.3;
-}
-
-.code-editor .line-nums::after {
-	content: "";
-	position: absolute;
-	inset: 0;
-	border-right: 1px solid currentColor;
-	opacity: 0.5;
-}
-
-.code-editor .header.border::after {
-	content: "";
-	position: absolute;
-	inset: auto 0 0;
-	height: 1px;
-	background: currentColor;
-	opacity: 0.15;
+.code-editor:focus {
+	outline: none;
 }
 </style>

package/src/components/form/inputs/CodeEditor/format.ts

@@ -68,8 +68,8 @@ const format = {
 					continue
 				}
 				if (
-					(char === ')' && nextChar === '{') ||
-					(char === ')' && nextChar === ' ')
+					(char === ')' && nextChar === '{')
+					|| (char === ')' && nextChar === ' ')
 				) {
 					formatted += `${char}\n${tab.repeat(level)}`
 					continue

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

@@ -405,7 +405,7 @@ function drop(e: DragEvent) {
 						class="single-image-item-preview"
 						:class="{ 'bgl_fill-image': fill }"
 					>
-						<div class="position-start m-05 flex opacity-7 z-99">
+						<div class="position-start m-05 flex opacity-7 z-99 gap-025">
 							<Btn
 								v-tooltip="'Delete'"
 								color="gray"
@@ -588,6 +588,7 @@ function drop(e: DragEvent) {
 	height: calc(100% - 2rem);
 	object-fit: cover;
 	background: var(--bgl-gray-light);
+	width: 90%;
 }
 .single-image-item-preview:hover::after {
 	content: 'zoom_in';

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

@@ -32,7 +32,7 @@ function runAction(name: ToolbarConfigOption, value?: string) {
 				</template>
 			</Dropdown>
 			<Btn
-				v-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
+				v-else-if="action.name !== 'separator'" v-tooltip="action.label" :icon="action.icon" thin flat
 				:aria-label="action.name" :class="[action.class, { active: selectedStyles.has(action.name) }]"
 				@click="runAction(action.name)"
 			/>

package/src/components/form/inputs/RichText/components/gridBox.vue

@@ -1,22 +1,51 @@
 <script setup lang="ts">
-defineProps<{ gridSize: number }>()
 const emit = defineEmits(['select'])
-const hoveredRow = $ref(-1)
-const hoveredCol = $ref(-1)
+const fb = 1
+const base = 5
+const hoveredRow = $ref(fb)
+const hoveredCol = $ref(fb)
+
+const rowSize = $computed(() => {
+	const enlarge = Math.min(hoveredRow + 1, 20)
+	return hoveredRow > (base - 1) ? enlarge : base
+})
+const colSize = $computed(() => {
+	const enlarge = Math.min(hoveredCol + 1, 20)
+	return hoveredCol > (base - 1) ? enlarge : base
+})
 </script>
 
 <template>
 	<div class="grid grid-wrap p-05">
 		<div
-			v-for="row in gridSize" :key="`row-${row}`" class="flex" @mouseout="hoveredRow = -1; hoveredCol = -1"
-			@focusout="hoveredRow = -1; hoveredCol = -1"
+			v-for="row in rowSize" :key="`row-${row}`" class="flex" @mouseout="hoveredRow = fb; hoveredCol = fb"
+			@focusout="hoveredRow = fb; hoveredCol = fb"
 		>
 			<div
-				v-for="col in 6" :key="`col-${col}`" role="button" tabindex="0" aria-label="Insert Table"
-				:style="{ width: '20px', height: '20px' }" class="border flex pointer"
-				:class="{ 'bg-gray-80': hoveredRow >= row && hoveredCol >= col }"
+				v-for="col in colSize" :key="`col-${col}`" role="button" tabindex="0" aria-label="Insert Table"
+				:style="{ width: '20px', height: '20px' }" class="flex pointer gap-025 tableBoxSelect"
+				:class="{ borderSelect: hoveredRow >= row && hoveredCol >= col }"
 				@mousemove="hoveredRow = row; hoveredCol = col" @click="emit('select', `${row}x${col}`)"
 			/>
 		</div>
+		<p class="txt-center txt-12 color-gray">
+			{{ hoveredRow }}x{{ hoveredCol }}
+		</p>
 	</div>
 </template>
+
+<style scoped>
+.tableBoxSelect::after {
+	content: '';
+	display: block;
+	width: calc(100% - 4px);
+	height:	calc(100% - 4px);
+	border: 1px solid var(--bgl-gray);
+	background: var(--bgl-gray-light);
+
+}
+.borderSelect::after {
+	border-color: var(--bgl-primary-tint);
+	background: var(--bgl-primary-light);
+}
+</style>