@bagelink/vue 0.0.542 → 0.0.546

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

@@ -0,0 +1,204 @@
+<script lang="ts" setup>
+import { onMounted, watch } from 'vue'
+import Toolbar from './Toolbar.vue'
+import type { ToolbarConfig } from './richtext-types'
+import { applyFormatting } from './formatting'
+
+const props = defineProps<{ modelValue: string, toolbarConfig?: ToolbarConfig }>()
+const emit = defineEmits(['update:modelValue'])
+
+const editableContent = $ref<HTMLElement | null>(null)
+const defaultConfig: ToolbarConfig = [
+	'bold',
+	'italic',
+	'underline',
+	'fontSize',
+	'fontFamily',
+	'textColor',
+	'backgroundColor',
+	'alignLeft',
+	'alignCenter',
+	'alignRight',
+	'alignJustify',
+	'orderedList',
+	'unorderedList',
+	'indent',
+	'outdent',
+	'link',
+	'image',
+	'table',
+	'blockquote',
+	'codeBlock',
+	'splitView',
+	'codeView'
+]
+const config = $ref<ToolbarConfig>(props.toolbarConfig || defaultConfig)
+let contentHtml = $ref(props.modelValue)
+let isCodeView = $ref(false)
+let isSplitView = $ref(false)
+
+function updateContent() {
+	if (!isCodeView) {
+		contentHtml = editableContent?.innerHTML ?? ''
+	}
+	emit('update:modelValue', contentHtml)
+}
+
+function handleToolbarAction(action: string, value?: string) {
+	if (!editableContent) return
+	if (['alignLeft', 'alignCenter', 'alignRight', 'alignJustify'].includes(action))
+		value = action.replace('align', '').toLowerCase()
+	switch (action) {
+		case 'orderedList':
+			applyFormatting('insertOrderedList')
+			break
+		case 'unorderedList':
+			applyFormatting('insertUnorderedList')
+			break
+		case 'blockquote':
+			applyFormatting('formatBlock', '<blockquote>')
+			break
+		case 'codeBlock':
+			applyFormatting('formatBlock', '<pre>')
+			break
+		case 'splitView':
+			isSplitView = !isSplitView
+			break
+		case 'codeView':
+			isCodeView = !isCodeView
+			break
+		default:
+			applyFormatting(action, value)
+			break
+	}
+	updateContent()
+}
+
+watch(() => props.modelValue, (newValue) => {
+	if (newValue !== contentHtml) {
+		contentHtml = newValue
+		if (editableContent) {
+			editableContent.innerHTML = newValue
+		}
+	}
+})
+
+onMounted(() => {
+	if (editableContent) {
+		editableContent.innerHTML = contentHtml
+	}
+})
+
+// Keyboard shortcuts
+function handleKeyDown(event: KeyboardEvent) {
+	if (event.ctrlKey || event.metaKey) {
+		switch (event.key.toLowerCase()) {
+			case 'b':
+				event.preventDefault()
+				handleToolbarAction('bold')
+				break
+			case 'i':
+				event.preventDefault()
+				handleToolbarAction('italic')
+				break
+			case 'u':
+				event.preventDefault()
+				handleToolbarAction('underline')
+				break
+			case 'k':
+				event.preventDefault()
+				handleToolbarAction('link')
+				break
+			case 'l':
+				event.preventDefault()
+				handleToolbarAction('orderedList')
+				break
+			default:
+				break
+		}
+	}
+}
+</script>
+
+<template>
+	<div class="rich-text-editor">
+		<Toolbar :config @action="handleToolbarAction" />
+		<div class="editor-container" :class="{ 'split-view': isSplitView }">
+			<div class="content-area" :class="{ 'code-view': isCodeView }">
+				<textarea v-if="isCodeView" v-model="contentHtml" @input="updateContent" />
+				<div
+					v-else
+					ref="editableContent"
+					contenteditable="true"
+					role="textbox"
+					aria-multiline="true"
+					tabindex="0"
+					@input="updateContent"
+					@keydown="handleKeyDown"
+				/>
+			</div>
+			<div v-if="isSplitView" class="preview-area" v-html="contentHtml" />
+		</div>
+	</div>
+</template>
+
+<style scoped>
+.rich-text-editor {
+  font-family: Arial, sans-serif;
+  max-width: 800px;
+  margin: 0 auto;
+}
+
+[contenteditable='true'] {
+  	white-space: pre-wrap;
+  	word-wrap: break-word;
+	outline: none;
+	border: none;
+	height: 100%;
+}
+
+.editor-container {
+  display: flex;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.content-area,
+.preview-area {
+  flex: 1;
+  min-height: 300px;
+  padding: 10px;
+  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;
+  }
+}
+</style>

package/src/components/form/inputs/RichText2/richtext-types.ts

@@ -0,0 +1,25 @@
+export type ToolbarConfigOption = 'bold'
+	| 'italic'
+	| 'underline'
+	| 'strikethrough'
+	| 'fontSize'
+	| 'fontFamily'
+	| 'textColor'
+	| 'backgroundColor'
+	| 'alignLeft'
+	| 'alignCenter'
+	| 'alignRight'
+	| 'alignJustify'
+	| 'orderedList'
+	| 'unorderedList'
+	| 'indent'
+	| 'outdent'
+	| 'link'
+	| 'image'
+	| 'table'
+	| 'blockquote'
+	| 'codeBlock'
+	| 'splitView'
+	| 'codeView'
+
+export type ToolbarConfig = ToolbarConfigOption[]

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

@@ -288,7 +288,7 @@ function reset() {
 }
 
 function handleInput(e: KeyboardEvent) {
-	const keyVal = e.key
+	const keyVal = (e.key as string | undefined) ?? ''
 	if (keyVal.length > 1 || e.metaKey) return
 
 	const hasBadChars = /[^+\d]/.test(keyVal)

package/src/components/form/inputs/index.ts

@@ -13,5 +13,6 @@ export { default as ToggleInput } from './ToggleInput.vue'
 export { default as RichText } from './RichText.vue'
 export { default as TelInput } from './TelInput.vue'
 export { default as SignaturePad } from './SignaturePad.vue'
+export { default as RichText2 } from './RichText2/index.vue'
 
 export { Dropdown } from 'floating-vue'

package/src/styles/layout.css

@@ -18,6 +18,13 @@
 .rounded {
     border-radius: calc(var(--btn-border-radius) / 2);
 }
+.round-extra {
+    border-radius: calc(var(--btn-border-radius) * 2);
+}
+
+.round-none {
+    border-radius: 0 ;
+}
 
 .flex-center {
     justify-content: center;
@@ -149,6 +156,55 @@
     inset-inline-end: 0;
 }
 
+.inset-inline-start, .start{
+    inset-inline-start: 0;
+}
+
+.inset-inline-end, .end{
+    inset-inline-end: 0;
+}
+.top, .top-0{
+    top: 0;
+}
+
+.top-1{
+    top: 1rem;
+}
+
+.top-2{
+    top: 2rem;
+}
+
+.top-3{
+    top: 3rem;
+}
+
+.top-4{
+    top: 4rem;
+}
+
+.bottom, .bottom-0{
+    bottom: 0;
+}
+
+.bottom-1{
+    bottom: 1rem;
+}
+
+.bottom-2{
+    bottom: 2rem;
+}
+
+.bottom-3{
+    bottom: 3rem;
+}
+
+.bottom-4{
+    bottom: 4rem;
+}
+
+
+
 .auto-flow-rows {
     grid-auto-flow: row;
 }
@@ -1368,11 +1424,40 @@
 }
 
 .sticky,
-.position-sticky {
+.position-sticky,
+.sticky-0,
+.position-sticky-0  {
     position: sticky !important;
     top: 0;
     align-self: start;
+}
+
+.sticky-1,
+.position-sticky-1 {
+    position: sticky !important;
+    top: 1rem;
+    align-self: start;
+}
+
+.sticky-2,
+.position-sticky-2 {
+    position: sticky !important;
+    top: 2rem;
+    align-self: start;
+}
+
+.sticky-3,
+.position-sticky-3 {
+    position: sticky !important;
+    top: 3rem;
+    align-self: start;
+}
 
+.sticky-4,
+.position-sticky-4 {
+    position: sticky !important;
+    top: 4rem;
+    align-self: start;
 }
 
 .flex {
@@ -1388,24 +1473,24 @@
 .hide,
 .none,
 .display-none {
-    display: none;
+    display: none !important;
 }
 
 .display-block {
-    display: block;
+    display: block !important;
 }
 
 .block {
     display: block;
-    width: 100%;
+    width: 100% !important;
 }
 
 .inline {
-    display: inline;
+    display: inline !important;
 }
 
 .inline-block {
-    display: inline-block;
+    display: inline-block !important;
 }
 
 .flex-end {

package/src/styles/mobilLayout.css

@@ -38,6 +38,18 @@
         border-radius: var(--btn-border-radius);
     }
 
+    .m_rounded {
+        border-radius: calc(var(--btn-border-radius) / 2);
+    }
+
+    .m_round-extra {
+        border-radius: calc(var(--btn-border-radius) * 2);
+    }
+
+    .m_round-none {
+        border-radius: 0 !important;
+    }
+
     .m_flex-center {
         justify-items: center;
         align-items: center;
@@ -160,13 +172,6 @@
         inset-inline-end: 0px;
     }
 
-    .m_positioned-full {
-        top: 0;
-        bottom: 0;
-        inset-inline-start: 0;
-        inset-inline-end: 0;
-    }
-
 
     .m_auto-flow-rows {
         grid-auto-flow: row;
@@ -1300,10 +1305,42 @@
         position: static !important;
     }
 
+
     .m_sticky,
-    .m_position-sticky {
+    .m_position-sticky,
+    .m_sticky-0,
+    .m_position-sticky-0 {
         position: sticky !important;
         top: 0;
+        align-self: start;
+    }
+
+    .m_sticky-1,
+    .m_position-sticky-1 {
+        position: sticky !important;
+        top: 1rem;
+        align-self: start;
+    }
+
+    .m_sticky-2,
+    .m_position-sticky-2 {
+        position: sticky !important;
+        top: 2rem;
+        align-self: start;
+    }
+
+    .m_sticky-3,
+    .m_position-sticky-3 {
+        position: sticky !important;
+        top: 3rem;
+        align-self: start;
+    }
+
+    .m_sticky-4,
+    .m_position-sticky-4 {
+        position: sticky !important;
+        top: 4rem;
+        align-self: start;
     }
 
     .m_flex-stretch {
@@ -1750,4 +1787,56 @@
         inset-inline-start: 0;
         inset-inline-end: 0;
     }
+
+    .m_inset-inline-start,
+    .m_start {
+        inset-inline-start: 0;
+    }
+
+    .m_inset-inline-end,
+    .m_end {
+        inset-inline-end: 0;
+    }
+
+    .m_top,
+    .m_top-0 {
+        top: 0;
+    }
+
+    .m_top-1 {
+        top: 1rem;
+    }
+
+    .m_top-2 {
+        top: 2rem;
+    }
+
+    .m_top-3 {
+        top: 3rem;
+    }
+
+    .m_top-4 {
+        top: 4rem;
+    }
+
+    .m_bottom,
+    .m_bottom-0 {
+        bottom: 0;
+    }
+
+    .m_bottom-1 {
+        bottom: 1rem;
+    }
+
+    .m_bottom-2 {
+        bottom: 2rem;
+    }
+
+    .m_bottom-3 {
+        bottom: 3rem;
+    }
+
+    .m_bottom-4 {
+        bottom: 4rem;
+    }
 }

package/src/styles/text.css

@@ -159,8 +159,8 @@
     color: var(--bgl-white);
 }
 
-.font-light,
-.txt-light {
+.font-thin,
+.txt-thin {
     font-weight: 100;
 }
 
@@ -186,6 +186,19 @@
     font-weight: 600;
 }
 
+.light,
+.txt-light,
+.font-light {
+    font-weight: 300;
+}
+
+.medium,
+.txt-medium,
+.font-medium {
+    font-weight: 500;
+}
+
+
 .line-height-1 {
     line-height: 1;
 }
@@ -503,8 +516,8 @@
         color: var(--bgl-white);
     }
 
-    .m_font-light,
-    .m_txt-light {
+    .m_font-thin,
+    .m_txt-thin {
         font-weight: 100;
     }
 
@@ -530,6 +543,17 @@
         font-weight: 600;
     }
 
+    .light,
+    .txt-light,
+    .font-light {
+        font-weight: 300;
+    }
+
+    .medium,
+    .txt-medium,
+    .font-medium {
+        font-weight: 500;
+    }
 
 
     .m_line-height-1 {

package/src/styles/theme.css

@@ -17,6 +17,7 @@
     --bgl-gray-light: #f5f8fa;
     --bgl-gray-80: #e8ecef;
     --bgl-gray-20: rgba(183, 183, 183, 0.2);
+    --bgl-gray-40: rgba(183, 183, 183, 0.4);
     --bgl-pink: #f1416c;
     --bgl-red: #ed6c6f;
     --bgl-red-tint: #fbe2e2;

package/dist/components/Drop.vue.d.ts

@@ -1,34 +0,0 @@
-type Option = {
-    label: string;
-    value: string;
-} | string | number;
-declare const _default: import("vue").DefineComponent<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    "update:modelValue": (...args: any[]) => void;
-}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
-    modelValue: string | number;
-    options: Option[];
-    placeholder?: string | undefined;
-    label?: string | undefined;
-    id: string;
-    required: boolean;
-}>>> & {
-    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
-}, {}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-//# sourceMappingURL=Drop.vue.d.ts.map

package/dist/components/Drop.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"Drop.vue.d.ts","sourceRoot":"","sources":["../../src/components/Drop.vue"],"names":[],"mappings":"AAcA;AAMA,KAAK,MAAM,GAAG;IACZ,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,MAAM,GAAG,MAAM,CAAC;;gBA8KN,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;gBALL,MAAM,GAAG,MAAM;aAClB,MAAM,EAAE;;;QAGb,MAAM;cACA,OAAO;;;;AAXnB,wBAcG;AACH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC"}

package/dist/components/FileUploader.vue.d.ts

@@ -1,60 +0,0 @@
-declare const _default: import("vue").DefineComponent<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
-    done: (...args: any[]) => void;
-    complete: (...args: any[]) => void;
-}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<__VLS_WithDefaults<__VLS_TypePropsToRuntimeProps<{
-    id?: string | undefined;
-    private?: 0 | 1 | undefined;
-    singleFile?: boolean | undefined;
-    beforeUpload?: (() => Promise<any>) | undefined;
-    dragDropLabel?: string | undefined;
-    browseLabel?: string | undefined;
-}>, {
-    private: number;
-    entity: string;
-    id: string;
-    beforeUpload: () => Promise<void>;
-    dragDropLabel: string;
-    browseLabel: string;
-}>>> & {
-    onDone?: ((...args: any[]) => any) | undefined;
-    onComplete?: ((...args: any[]) => any) | undefined;
-}, {
-    id: string;
-    private: 1 | 0;
-    beforeUpload: () => Promise<any>;
-    dragDropLabel: string;
-    browseLabel: string;
-}, {}>;
-export default _default;
-type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
-type __VLS_TypePropsToRuntimeProps<T> = {
-    [K in keyof T]-?: {} extends Pick<T, K> ? {
-        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
-    } : {
-        type: import('vue').PropType<T[K]>;
-        required: true;
-    };
-};
-type __VLS_WithDefaults<P, D> = {
-    [K in keyof Pick<P, keyof P>]: K extends keyof D ? __VLS_Prettify<P[K] & {
-        default: D[K];
-    }> : P[K];
-};
-type __VLS_Prettify<T> = {
-    [K in keyof T]: T[K];
-} & {};
-//# sourceMappingURL=FileUploader.vue.d.ts.map

package/dist/components/FileUploader.vue.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"FileUploader.vue.d.ts","sourceRoot":"","sources":["../../src/components/FileUploader.vue"],"names":[],"mappings":"AAiDA;;;;;0BA6YuB,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;;;;0BAAZ,QAAQ,GAAG,CAAC;;;;;;;;;;;;;;QAJ5B,MAAM;aAED,CAAC,GAAG,CAAC;kBAEA,MAAM,QAAQ,GAAG,CAAC;mBACjB,MAAM;iBACR,MAAM;;AARtB,wBAeG;AAGH,KAAK,sBAAsB,CAAC,CAAC,IAAI,CAAC,SAAS,SAAS,GAAG,KAAK,GAAG,CAAC,CAAC;AACjE,KAAK,6BAA6B,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,sBAAsB,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAA;KAAE,GAAG;QAAE,IAAI,EAAE,OAAO,KAAK,EAAE,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;QAAC,QAAQ,EAAE,IAAI,CAAA;KAAE;CAAE,CAAC;AAC9M,KAAK,kBAAkB,CAAC,CAAC,EAAE,CAAC,IAAI;KAE1B,CAAC,IAAI,MAAM,IAAI,CAAC,CAAC,EAAE,MAAM,CAAC,CAAC,GAAG,CAAC,SAAS,MAAM,CAAC,GAAG,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG;QACxE,OAAO,EAAE,CAAC,CAAC,CAAC,CAAC,CAAA;KACb,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CACT,CAAC;AACN,KAAK,cAAc,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}