@bagelink/vue 0.0.986 → 0.0.992

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

@@ -0,0 +1,446 @@
+export const codeLanguages = {
+	'1c': '1C',
+	'abnf': 'ABNF',
+	'accesslog': 'Access Log',
+	'actionscript': 'ActionScript',
+	'ada': 'Ada',
+	'angelscript': 'AngelScript',
+	'apache': 'Apache',
+	'applescript': 'AppleScript',
+	'arcade': 'Arcade',
+	'arduino': 'Arduino',
+	'armasm': 'ARM Assembly',
+	'asciidoc': 'AsciiDoc',
+	'aspectj': 'AspectJ',
+	'autohotkey': 'AutoHotkey',
+	'autoit': 'AutoIt',
+	'avrasm': 'AVR Assembly',
+	'awk': 'AWK',
+	'axapta': 'Axapta',
+	'bash': 'Bash',
+	'basic': 'Basic',
+	'bnf': 'BNF',
+	'brainfuck': 'Brainfuck',
+	'c': 'C',
+	'cal': 'C/AL',
+	'capnproto': 'Cap’n Proto',
+	'ceylon': 'Ceylon',
+	'clean': 'Clean',
+	'clojure': 'Clojure',
+	'clojure-repl': 'Clojure REPL',
+	'cmake': 'CMake',
+	'coffeescript': 'CoffeeScript',
+	'coq': 'Coq',
+	'cos': 'Caché ObjectScript',
+	'cpp': 'C++',
+	'crmsh': 'crmsh',
+	'crystal': 'Crystal',
+	'csharp': 'C#',
+	'csp': 'CSP',
+	'css': 'CSS',
+	'd': 'D',
+	'markdown': 'Markdown',
+	'dart': 'Dart',
+	'delphi': 'Delphi',
+	'diff': 'Diff',
+	'django': 'Django',
+	'dns': 'DNS Zone',
+	'dockerfile': 'Dockerfile',
+	'dos': 'DOS',
+	'dsconfig': 'dsconfig',
+	'dts': 'DTS',
+	'dust': 'Dust',
+	'ebnf': 'EBNF',
+	'elixir': 'Elixir',
+	'elm': 'Elm',
+	'ruby': 'Ruby',
+	'erb': 'ERB',
+	'erlang-repl': 'Erlang REPL',
+	'erlang': 'Erlang',
+	'excel': 'Excel',
+	'fix': 'FIX',
+	'flix': 'Flix',
+	'fortran': 'Fortran',
+	'fsharp': 'F#',
+	'gams': 'GAMS',
+	'gauss': 'GAUSS',
+	'gcode': 'G-code',
+	'gherkin': 'Gherkin',
+	'glsl': 'GLSL',
+	'gml': 'GameMaker Language',
+	'go': 'GoLang',
+	'golo': 'Golo',
+	'gradle': 'Gradle',
+	'graphql': 'GraphQL',
+	'groovy': 'Groovy',
+	'haml': 'HAML',
+	'handlebars': 'Handlebars',
+	'haskell': 'Haskell',
+	'haxe': 'Haxe',
+	'hsp': 'HSP',
+	'http': 'HTTP',
+	'hy': 'Hy',
+	'inform7': 'Inform 7',
+	'ini': 'INI',
+	'irpf90': 'IRPF90',
+	'isbl': 'ISBL',
+	'java': 'Java',
+	'javascript': 'JS',
+	'jboss-cli': 'JBoss CLI',
+	'json': 'JSON',
+	'julia': 'Julia',
+	'julia-repl': 'Julia REPL',
+	'kotlin': 'Kotlin',
+	'lasso': 'Lasso',
+	'latex': 'LaTeX',
+	'ldif': 'LDIF',
+	'leaf': 'Leaf',
+	'less': 'Less',
+	'lisp': 'Lisp',
+	'livecodeserver': 'LiveCode Server',
+	'livescript': 'LiveScript',
+	'llvm': 'LLVM',
+	'lsl': 'LSL',
+	'lua': 'Lua',
+	'makefile': 'Makefile',
+	'mathematica': 'Mathematica',
+	'matlab': 'MATLAB',
+	'maxima': 'Maxima',
+	'mel': 'MEL',
+	'mercury': 'Mercury',
+	'mipsasm': 'MIPS Assembly',
+	'mizar': 'Mizar',
+	'mojolicious': 'Mojolicious',
+	'monkey': 'Monkey',
+	'moonscript': 'MoonScript',
+	'n1ql': 'N1QL',
+	'nestedtext': 'NestedText',
+	'nginx': 'Nginx',
+	'nim': 'Nim',
+	'nix': 'Nix',
+	'node-repl': 'Node REPL',
+	'nsis': 'NSIS',
+	'objectivec': 'Objective-C',
+	'ocaml': 'OCaml',
+	'openscad': 'OpenSCAD',
+	'oxygene': 'Oxygene',
+	'parser3': 'Parser3',
+	'pf': 'PF',
+	'pgsql': 'PostgreSQL',
+	'php': 'PHP',
+	'php-template': 'PHP Template',
+	'plaintext': 'Plain Text',
+	'pony': 'Pony',
+	'powershell': 'PowerShell',
+	'processing': 'Processing',
+	'profile': 'Profile',
+	'prolog': 'Prolog',
+	'properties': 'Properties',
+	'protobuf': 'Protocol Buffers',
+	'puppet': 'Puppet',
+	'purebasic': 'PureBasic',
+	'python': 'Python',
+	'python-repl': 'Python REPL',
+	'q': 'Q',
+	'qml': 'QML',
+	'r': 'R',
+	'reasonml': 'ReasonML',
+	'rib': 'RenderMan RIB',
+	'roboconf': 'Roboconf',
+	'routeros': 'RouterOS',
+	'rsl': 'RSL',
+	'ruleslanguage': 'RulesLanguage',
+	'rust': 'Rust',
+	'sas': 'SAS',
+	'scala': 'Scala',
+	'scheme': 'Scheme',
+	'scilab': 'Scilab',
+	'scss': 'SCSS',
+	'shell': 'Shell',
+	'smali': 'Smali',
+	'smalltalk': 'Smalltalk',
+	'sml': 'SML',
+	'sqf': 'SQF',
+	'sql': 'SQL',
+	'stan': 'Stan',
+	'stata': 'Stata',
+	'step21': 'STEP Part 21',
+	'stylus': 'Stylus',
+	'subunit': 'SubUnit',
+	'swift': 'Swift',
+	'taggerscript': 'TaggerScript',
+	'yaml': 'YAML',
+	'tap': 'TAP',
+	'tcl': 'Tcl',
+	'thrift': 'Thrift',
+	'tp': 'TP',
+	'twig': 'Twig',
+	'typescript': 'TS',
+	'vala': 'Vala',
+	'vbnet': 'VB.NET',
+	'vbscript': 'VBScript',
+	'vbscript-html': 'VBScript in HTML',
+	'verilog': 'Verilog',
+	'vhdl': 'VHDL',
+	'vim': 'Vim',
+	'wasm': 'WebAssembly',
+	'wren': 'Wren',
+	'x86asm': 'x86 Assembly',
+	'xl': 'XL',
+	'xquery': 'XQuery',
+	'xml': 'XML',
+	'zephir': 'Zephir',
+	'html': 'HTML',
+}
+
+export type Language = keyof typeof codeLanguages
+
+export type CodeTheme =
+	| 'a11y-dark'
+	| 'a11y-light'
+	| 'agate'
+	| 'an-old-hope'
+	| 'androidstudio'
+	| 'arduino-light'
+	| 'arta'
+	| 'ascetic'
+	| 'atom-one-dark-reasonable'
+	| 'atom-one-dark'
+	| 'atom-one-light'
+	| 'brown-paper'
+	| 'codepen-embed'
+	| 'color-brewer'
+	| 'dark'
+	| 'default'
+	| 'devibeans'
+	| 'docco'
+	| 'far'
+	| 'felipec'
+	| 'foundation'
+	| 'github-dark-dimmed'
+	| 'github-dark'
+	| 'github'
+	| 'gml'
+	| 'googlecode'
+	| 'gradient-dark'
+	| 'gradient-light'
+	| 'grayscale'
+	| 'hybrid'
+	| 'idea'
+	| 'intellij-light'
+	| 'ir-black'
+	| 'isbl-editor-dark'
+	| 'isbl-editor-light'
+	| 'kimbie-dark'
+	| 'kimbie-light'
+	| 'lightfair'
+	| 'lioshi'
+	| 'magula'
+	| 'mono-blue'
+	| 'monokai-sublime'
+	| 'monokai'
+	| 'night-owl'
+	| 'nnfx-dark'
+	| 'nnfx-light'
+	| 'nord'
+	| 'obsidian'
+	| 'panda-syntax-dark'
+	| 'panda-syntax-light'
+	| 'paraiso-dark'
+	| 'paraiso-light'
+	| 'pojoaque'
+	| 'purebasic'
+	| 'qtcreator-dark'
+	| 'qtcreator-light'
+	| 'rainbow'
+	| 'routeros'
+	| 'school-book'
+	| 'shades-of-purple'
+	| 'srcery'
+	| 'stackoverflow-dark'
+	| 'stackoverflow-light'
+	| 'sunburst'
+	| 'tokyo-night-dark'
+	| 'tokyo-night-light'
+	| 'tomorrow-night-blue'
+	| 'tomorrow-night-bright'
+	| 'vs'
+	| 'vs2015'
+	| 'xcode'
+	| 'xt256'
+	| 'base16-3024'
+	| 'base16-apathy'
+	| 'base16-apprentice'
+	| 'base16-ashes'
+	| 'base16-atelier-cave-light'
+	| 'base16-atelier-cave'
+	| 'base16-atelier-dune-light'
+	| 'base16-atelier-dune'
+	| 'base16-atelier-estuary-light'
+	| 'base16-atelier-estuary'
+	| 'base16-atelier-forest-light'
+	| 'base16-atelier-forest'
+	| 'base16-atelier-heath-light'
+	| 'base16-atelier-heath'
+	| 'base16-atelier-lakeside-light'
+	| 'base16-atelier-lakeside'
+	| 'base16-atelier-plateau-light'
+	| 'base16-atelier-plateau'
+	| 'base16-atelier-savanna-light'
+	| 'base16-atelier-savanna'
+	| 'base16-atelier-seaside-light'
+	| 'base16-atelier-seaside'
+	| 'base16-atelier-sulphurpool-light'
+	| 'base16-atelier-sulphurpool'
+	| 'base16-atlas'
+	| 'base16-bespin'
+	| 'base16-black-metal-bathory'
+	| 'base16-black-metal-burzum'
+	| 'base16-black-metal-dark-funeral'
+	| 'base16-black-metal-gorgoroth'
+	| 'base16-black-metal-immortal'
+	| 'base16-black-metal-khold'
+	| 'base16-black-metal-marduk'
+	| 'base16-black-metal-mayhem'
+	| 'base16-black-metal-nile'
+	| 'base16-black-metal-venom'
+	| 'base16-black-metal'
+	| 'base16-brewer'
+	| 'base16-bright'
+	| 'base16-brogrammer'
+	| 'base16-brush-trees-dark'
+	| 'base16-brush-trees'
+	| 'base16-chalk'
+	| 'base16-circus'
+	| 'base16-classic-dark'
+	| 'base16-classic-light'
+	| 'base16-codeschool'
+	| 'base16-colors'
+	| 'base16-cupcake'
+	| 'base16-cupertino'
+	| 'base16-danqing'
+	| 'base16-darcula'
+	| 'base16-dark-violet'
+	| 'base16-darkmoss'
+	| 'base16-darktooth'
+	| 'base16-decaf'
+	| 'base16-default-dark'
+	| 'base16-default-light'
+	| 'base16-dirtysea'
+	| 'base16-dracula'
+	| 'base16-edge-dark'
+	| 'base16-edge-light'
+	| 'base16-eighties'
+	| 'base16-embers'
+	| 'base16-equilibrium-dark'
+	| 'base16-equilibrium-gray-dark'
+	| 'base16-equilibrium-gray-light'
+	| 'base16-equilibrium-light'
+	| 'base16-espresso'
+	| 'base16-eva-dim'
+	| 'base16-eva'
+	| 'base16-flat'
+	| 'base16-framer'
+	| 'base16-fruit-soda'
+	| 'base16-gigavolt'
+	| 'base16-github'
+	| 'base16-google-dark'
+	| 'base16-google-light'
+	| 'base16-grayscale-dark'
+	| 'base16-grayscale-light'
+	| 'base16-green-screen'
+	| 'base16-gruvbox-dark-hard'
+	| 'base16-gruvbox-dark-medium'
+	| 'base16-gruvbox-dark-pale'
+	| 'base16-gruvbox-dark-soft'
+	| 'base16-gruvbox-light-hard'
+	| 'base16-gruvbox-light-medium'
+	| 'base16-gruvbox-light-soft'
+	| 'base16-hardcore'
+	| 'base16-harmonic16-dark'
+	| 'base16-harmonic16-light'
+	| 'base16-heetch-dark'
+	| 'base16-heetch-light'
+	| 'base16-helios'
+	| 'base16-hopscotch'
+	| 'base16-horizon-dark'
+	| 'base16-horizon-light'
+	| 'base16-humanoid-dark'
+	| 'base16-humanoid-light'
+	| 'base16-ia-dark'
+	| 'base16-ia-light'
+	| 'base16-icy-dark'
+	| 'base16-ir-black'
+	| 'base16-isotope'
+	| 'base16-kimber'
+	| 'base16-london-tube'
+	| 'base16-macintosh'
+	| 'base16-marrakesh'
+	| 'base16-materia'
+	| 'base16-material-darker'
+	| 'base16-material-lighter'
+	| 'base16-material-palenight'
+	| 'base16-material-vivid'
+	| 'base16-material'
+	| 'base16-mellow-purple'
+	| 'base16-mexico-light'
+	| 'base16-mocha'
+	| 'base16-monokai'
+	| 'base16-nebula'
+	| 'base16-nord'
+	| 'base16-nova'
+	| 'base16-ocean'
+	| 'base16-oceanicnext'
+	| 'base16-one-light'
+	| 'base16-onedark'
+	| 'base16-outrun-dark'
+	| 'base16-papercolor-dark'
+	| 'base16-papercolor-light'
+	| 'base16-paraiso'
+	| 'base16-pasque'
+	| 'base16-phd'
+	| 'base16-pico'
+	| 'base16-pop'
+	| 'base16-porple'
+	| 'base16-qualia'
+	| 'base16-railscasts'
+	| 'base16-rebecca'
+	| 'base16-ros-pine-dawn'
+	| 'base16-ros-pine-moon'
+	| 'base16-ros-pine'
+	| 'base16-sagelight'
+	| 'base16-sandcastle'
+	| 'base16-seti-ui'
+	| 'base16-shapeshifter'
+	| 'base16-silk-dark'
+	| 'base16-silk-light'
+	| 'base16-snazzy'
+	| 'base16-solar-flare-light'
+	| 'base16-solar-flare'
+	| 'base16-solarized-dark'
+	| 'base16-solarized-light'
+	| 'base16-spacemacs'
+	| 'base16-summercamp'
+	| 'base16-summerfruit-dark'
+	| 'base16-summerfruit-light'
+	| 'base16-synth-midnight-terminal-dark'
+	| 'base16-synth-midnight-terminal-light'
+	| 'base16-tango'
+	| 'base16-tender'
+	| 'base16-tomorrow-night'
+	| 'base16-tomorrow'
+	| 'base16-twilight'
+	| 'base16-unikitty-dark'
+	| 'base16-unikitty-light'
+	| 'base16-vulcan'
+	| 'base16-windows-10-light'
+	| 'base16-windows-10'
+	| 'base16-windows-95-light'
+	| 'base16-windows-95'
+	| 'base16-windows-high-contrast-light'
+	| 'base16-windows-high-contrast'
+	| 'base16-windows-nt-light'
+	| 'base16-windows-nt'
+	| 'base16-woodland'
+	| 'base16-xcode-dusk'
+	| 'base16-zenburn'

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

@@ -0,0 +1,117 @@
+<script setup lang="ts">
+import hljsVuePlugin from '@highlightjs/vue-plugin'
+import { nextTick } from 'vue'
+import 'highlight.js/lib/common'
+import 'highlight.js/styles/atom-one-dark.css'
+
+const { readonly = false, language } = defineProps<{
+	language?: string
+	readonly?: boolean
+}>()
+
+const code = defineModel('modelValue', {
+	type: String,
+	default: ''
+})
+
+function tabKeyDown(event: KeyboardEvent) {
+	const target = event.target as HTMLTextAreaElement
+	const start = target.selectionStart
+	const end = target.selectionEnd
+	const tab = '  '
+	code.value = code.value.slice(0, start) + tab + code.value.slice(end)
+	nextTick(() => {
+		target.selectionStart = target.selectionEnd = start + 2
+	})
+}
+
+const Highlightjs = hljsVuePlugin.component
+</script>
+
+<template>
+	<div style="max-height: 900px; height: 100vh; overflow: scroll;">
+		<div class="relative block h-100 ltr code-editor-wrap" style="height: 800px;">
+			<div class="numbers absolute inset-0 py-1 px-05 txt16 line-height-15 overflow-hidden z-999 w50px txt-start opacity-3 color-gray">
+				<div
+					v-for="(_, index) in code.split('\n')"
+					:key="index"
+					class="number txt-end"
+				>
+					{{ index + 1 }}
+				</div>
+			</div>
+			<Highlightjs
+				class="highlighted-code absolute inset-0"
+				:autodetect="!language"
+				:code="code"
+				:wrap="true"
+				:language="language"
+			/>
+			<textarea
+				v-if="!readonly"
+				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"
+				@keydown.tab.prevent="tabKeyDown"
+			/>
+		</div>
+	</div>
+</template>
+
+<style>
+.code-editor-wrap{
+	background: #282c34;
+	overflow: scroll;
+}
+.numbers {
+	font-family: monospace;
+	border-inline-end: 1px solid var(--bgl-gray);
+}
+.number{
+	scale: 0.9;
+}
+/* Highlight.js styles */
+.highlighted-code {
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	overflow: hidden;
+	margin: 0;
+	padding: 0;
+}
+
+.highlighted-code code {
+	padding-left: 70px !important;
+	overflow: hidden !important;
+}
+
+/* Textarea aligned with Highlight.js */
+.code-editor {
+	font-family: monospace;
+	color: transparent;
+	resize: none;
+	white-space: pre-wrap;
+	word-wrap: break-word;
+	caret-color: var(--bgl-white);
+	font-size: 16px;
+	padding: 1rem;
+	padding-left: 70px !important;
+
+}
+
+.code-editor::-moz-selection {
+	background: #2466bc30;
+	color: inherit;
+}
+
+.code-editor::selection {
+	background: #2466bc30;
+	color: inherit;
+}
+
+.code-editor:focus {
+	outline: none;
+}
+</style>

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

@@ -0,0 +1,98 @@
+const format = {
+	html: (html: string) => {
+		const formatted = []
+		const reg = /(>)(<)(\/*)/g
+		const tab = '  '
+		let level = 0
+
+		html = html.replace(reg, '$1\n$2$3')
+
+		const lines = html.split('\n')
+
+		for (const line of lines) {
+			if (line.match(/<\/\w+/) && !line.match(/\/>/)) {
+				level--
+			}
+			formatted.push(tab.repeat(Math.max(level, 0)) + line)
+			if (line.match(/<\w[^>]*[^/]>/)) {
+				level++
+			}
+		}
+		return formatted.join('\n')
+	},
+	json: (jsonString: string, indent = 4) => {
+		try {
+			const jsonObject = JSON.parse(jsonString)
+			return JSON.stringify(jsonObject, null, indent)
+		} catch (error) {
+			return `Invalid JSON: ${(error as Error).message}`
+		}
+	},
+	javascript: (jsCode: string, indent = 4) => {
+		try {
+			const tab = ' '.repeat(indent)
+			let formatted = ''
+			let level = 0
+			let inString = ''
+
+			for (let i = 0; i < jsCode.length; i++) {
+				const char = jsCode[i]
+				const nextChar = jsCode[i + 1]
+				if (char === '"' || char === '\'' || char === '`') {
+					formatted += char
+					if (inString.length && inString === char) {
+						inString = ''
+					} else if (!inString.length) {
+						inString = char
+					}
+					continue
+				}
+				if (inString) {
+					formatted += char
+					continue
+				}
+				if (char === '{' || char === '[') {
+					formatted += `${char}\n${tab.repeat(++level)}`
+					continue
+				}
+				if (char === '}' || char === ']') {
+					formatted += `\n${tab.repeat(--level)}${char}`
+					continue
+				}
+				if (char === ';' || char === ',') {
+					formatted += `${char}\n${tab.repeat(level)}`
+					continue
+				}
+				if (char === '\n') {
+					formatted += `\n${tab.repeat(level)}`
+					continue
+				}
+				if (
+					(char === ')' && nextChar === '{')
+					|| (char === ')' && nextChar === ' ')
+				) {
+					formatted += `${char}\n${tab.repeat(level)}`
+					continue
+				}
+				formatted += char
+			}
+
+			return formatted
+		} catch (error) {
+			return `Error formatting JavaScript: ${(error as Error).message}`
+		}
+	}
+}
+
+export function formatCode(code: string, language: string) {
+	switch (language) {
+		case 'html':
+			return format.html(code)
+		case 'json':
+			return format.json(code)
+		case 'javascript':
+			return format.javascript(code)
+		default:
+			return code
+	}
+}

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';