@bagelink/vue 0.0.268 → 0.0.276

package/src/styles/text.css

@@ -1,4 +1,4 @@
-h1,
+/* h1,
 h2,
 h3,
 h4,
@@ -17,116 +17,113 @@ h4 {}
 
 h5 {}
 
-h6 {}
+h6 {} */
 
 .txt-center {
-    text-align: center;
+	text-align: center;
 }
 
 .txt-start {
-    text-align: start;
+	text-align: start;
 }
 
 .txt-end {
-    text-align: end;
+	text-align: end;
 }
 
-
 .smalltxt {
-    font-size: 12px;
+	font-size: 12px;
 }
 
-
 .txt20 {
-    font-size: 20px;
+	font-size: 20px;
 }
 
 .txt18 {
-    font-size: 18px;
+	font-size: 18px;
 }
 
 .txt16 {
-    font-size: 16px;
+	font-size: 16px;
 }
 
 .txt14 {
-    font-size: 14px;
+	font-size: 14px;
 }
 
 .txt12 {
-    font-size: 12px;
+	font-size: 12px;
 }
 
 .txt10 {
-    font-size: 10px;
+	font-size: 10px;
 }
 
 .txt9 {
-    font-size: 9px;
+	font-size: 9px;
 }
 
 .no-margin {
-    margin: 0;
+	margin: 0;
 }
 
 .txtgray {
-    color: var(--bgl-gray);
+	color: var(--bgl-gray);
 }
 
 .txtblue {
-    color: var(--bgl-primary);
+	color: var(--bgl-primary);
 }
 
 .txtblack {
-    color: var(--bgl-black);
+	color: var(--bgl-black);
 }
 
 .txtred {
-    color: var(--bgl-red);
+	color: var(--bgl-red);
 }
 
 .font-light {
-    font-weight: 100;
+	font-weight: 100;
 }
 
 .bold {
-    font-weight: 700;
+	font-weight: 700;
 }
 
 .line-height-1 {
-    line-height: 1;
+	line-height: 1;
 }
 
 .ellipsis {
-    overflow: hidden;
-    display: block;
-    width: 100%;
-    text-overflow: ellipsis;
+	overflow: hidden;
+	display: block;
+	width: 100%;
+	text-overflow: ellipsis;
 }
 
 .pointer {
-    cursor: pointer;
+	cursor: pointer;
 }
 
 .decoration-none {
-    text-decoration: none;
+	text-decoration: none;
 }
 
 .bgl_icon-font {
-    font-family: "Material Symbols Outlined", serif;
+	font-family: "Material Symbols Outlined", serif;
 }
 
-
 @media screen and (max-width: 910px) {
-    .txt20 {
-        font-size: 18px;
-    }
-
-    .txt16 {
-        font-size: 14px;
-    }
-
-    .txt14 {
-        font-size: 12px;
-    }
-}
+	.txt20 {
+		font-size: 18px;
+	}
+
+	.txt16 {
+		font-size: 14px;
+	}
+
+	.txt14 {
+		font-size: 12px;
+	}
+}

package/src/types/BagelForm.ts

@@ -5,35 +5,35 @@ export type AttributeValue = string | number | boolean | null | undefined | Reco
 export type AttributeFn<T = Record<string, any>> = (field: any, row: T) => AttributeValue;
 
 export interface Attributes<T = any> {
-  [key: string]: AttributeValue | AttributeFn<T>
+	[key: string]: AttributeValue | AttributeFn<T>
 }
 
 export type BaseBagelField<T = Record<string, any>> = {
-  $el?: any;
-  id?: string;
-  label?: string;
-  placeholder?: string;
-  children?: Field<T>[];
-  class?: AttributeValue | AttributeFn<T>,
-  attrs?: Attributes<T>;
-  required?: boolean;
-  helptext?: string;
-  options?: string | ({ label?: string; value: string | number } | string | number | Record<string, any>)[],
-  defaultValue?: any;
-  transform?: (val?: any, rowData?: Record<string, any>) => any;
-  onUpdate?: (val: any, fieldData?: any, rowData?: Record<string, any>) => void;
-  'v-if'?: string | boolean | ((val: any, row: T) => boolean);
+	$el?: any;
+	id?: string;
+	label?: string;
+	placeholder?: string;
+	children?: Field<T>[];
+	class?: AttributeValue | AttributeFn<T>,
+	attrs?: Attributes<T>;
+	required?: boolean;
+	helptext?: string;
+	options?: string | ({ label?: string; value: string | number } | string | number | Record<string, any>)[],
+	defaultValue?: any;
+	transform?: (val?: any, rowData?: Record<string, any>) => any;
+	onUpdate?: (val: any, rowData?: Record<string, any>) => void;
+	'v-if'?: string | boolean | ((val: any, row: T) => boolean);
 }
 
 export interface InputBagelField<T> extends BaseBagelField<T> {
-  $el: 'text' | typeof TextInput;
-  id: string;
-  type?: string;
+	$el: 'text' | typeof TextInput;
+	id: string;
+	type?: string;
 }
 
 export interface SelectBagelField<T> extends BaseBagelField<T> {
-  $el: 'select' | typeof SelectInput;
-  id: string;
+	$el: 'select' | typeof SelectInput;
+	id: string;
 }
 
 export type Field<T = Record<string, any>> = BaseBagelField<T> | InputBagelField<T> | SelectBagelField<T>;

package/src/utils/clickOutside.ts

@@ -0,0 +1,15 @@
+import type { DirectiveBinding } from 'vue';
+
+export default {
+	beforeMount(el: any, binding: DirectiveBinding) {
+		el.clickOutsideEvent = (event: MouseEvent) => {
+			if (!(el === event.target || el.contains(event.target))) {
+				binding.value(event);
+			}
+		};
+		document.addEventListener('click', el.clickOutsideEvent);
+	},
+	unmounted(el: any) {
+		document.removeEventListener('click', el.clickOutsideEvent);
+	},
+};

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

@@ -1,81 +0,0 @@
-<template>
-	<div
-		class="bagel-input"
-		:title="description"
-		:class="{ small: small }"
-	>
-		<label v-if="label">
-			<LangText :input="label" />
-		</label>
-		<span
-			class="character-limit"
-			v-if="showCharacterLimit"
-		>
-			{{ modelValue?.length }}
-			{{ nativeInputAttrs?.maxlength ? `/${nativeInputAttrs.maxlength}` : '' }}
-		</span>
-		<textarea
-			:value="modelValue"
-			@input="handleInput"
-			:class="{ 'no-edit': !editMode }"
-			v-bind="nativeInputAttrs"
-			:required
-		/>
-	</div>
-</template>
-
-<script setup lang="ts">
-import { LangText } from '@bagelink/vue';
-
-const emits = defineEmits(['update:modelValue']);
-
-withDefaults(
-	defineProps<{
-		description?: string;
-		label?: string;
-		modelValue: any;
-		placeholder?: string;
-		editMode?: boolean;
-		small?: boolean;
-		nativeInputAttrs?: Record<string, any>;
-		showCharacterLimit?: boolean;
-		required?: boolean;
-	}>(),
-	{
-		description: '',
-		editMode: true,
-		placeholder: '',
-		label: '',
-	},
-);
-const handleInput = (e: Event) => {
-	const el = e.target as HTMLInputElement;
-	emits('update:modelValue', el.value);
-};
-</script>
-
-<style scoped>
-.bagel-input {
-	height: 100%;
-	margin: 0;
-}
-
-.bagel-input label {
-	margin-bottom: 0;
-}
-
-.bagel-input textarea {
-	height: 100%;
-	resize: none;
-	background: var(--input-bg);
-	margin-bottom: 0.5rem;
-}
-
-.character-limit {
-	font-size: 0.6rem;
-	color: var(--input-color);
-	position: absolute;
-	top: 0.25rem;
-	inset-inline-end: 0;
-}
-</style>