@bagelink/vue 0.0.316 → 0.0.322

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

@@ -1,107 +1,65 @@
 <template>
-	<div
-		class="bagel-input text-input"
-		:class="{
-			dense, small, shrink, toggleEdit, editMode, code,
-			textInputIconWrap: icon,
-			txtInputIconStart: iconStart,
-		}"
-		:title="title"
-	>
-		<label :for="id">
-			{{ label }}
-			<input
-				v-if="!multiline && !autoheight && !code"
-				:title="title"
-				:autocomplete="autocomplete"
-				:id="id"
-				v-model="inputVal"
-				:type="type"
-				:rows="1"
-				ref="input"
-				:placeholder="placeholder || label"
-				:disabled="!editMode"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
-			>
-			<textarea
-				v-else
-				:title="title"
-				:id="id"
-				v-model="inputVal"
-				:type="type"
-				:rows="rows"
-				ref="input"
-				:placeholder="placeholder || label"
-				:disabled="!editMode"
-				:required="required"
-				:pattern="pattern"
-				v-bind="nativeInputAttrs"
-				@dblclick="toggleEditAction"
-			/>
-			<p v-if="helptext">{{ helptext }}</p>
-		</label>
-
-		<MaterialIcon
-			class="iconStart"
-			v-if="iconStart"
-			:icon="iconStart"
-		/>
-		<MaterialIcon
-			v-if="icon"
-			:icon="icon"
-		/>
-		<Btn
-			class="toggleEditBtn"
-			v-if="toggleEdit"
-			thin
-			@click="toggleEditAction"
-			:icon="editMode ? 'check'
-				: 'edit'"
-			flat
-		/>
-	</div>
+  <div class="bagel-input text-input" :class="{
+      dense, small, shrink, toggleEdit, editMode, code,
+      textInputIconWrap: icon,
+      txtInputIconStart: iconStart,
+    }" :title="title">
+    <label :for="id">
+      {{ label }}
+      <input v-if="!multiline && !autoheight && !code" :title="title" :autocomplete="autocomplete" :id="id"
+        v-model="inputVal" :type="type" :rows="1" ref="input" :placeholder="placeholder || label" :disabled="!editMode"
+        :required="required" :pattern="pattern" v-bind="nativeInputAttrs" @dblclick="toggleEditAction">
+      <textarea v-else :title="title" :id="id" v-model="inputVal" :type="type" :rows="rows" ref="input"
+        :placeholder="placeholder || label" :disabled="!editMode" :required="required" :pattern="pattern"
+        v-bind="nativeInputAttrs" @dblclick="toggleEditAction" />
+      <p v-if="helptext">{{ helptext }}</p>
+    </label>
+
+    <MaterialIcon class="iconStart" v-if="iconStart" :icon="iconStart" />
+    <MaterialIcon v-if="icon" :icon="icon" />
+    <Btn class="toggleEditBtn" v-if="toggleEdit" thin @click="toggleEditAction" :icon="editMode ? 'check'
+      : 'edit'" flat />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { watch } from 'vue';
+import { onMounted, watch } from 'vue';
 import {
-	debounce, Btn, type MaterialIcons, MaterialIcon,
+  debounce, Btn, type MaterialIcons, MaterialIcon,
 } from '@bagelink/vue';
 
 const emit = defineEmits(['update:modelValue', 'debounce']);
 const props = withDefaults(
-	defineProps<{
-		id?: string;
-		title?: string;
-		helptext?: string;
-		placeholder?: string;
-		modelValue?: string | number;
-		label?: string;
-		small?: boolean;
-		dense?: boolean;
-		required?: boolean;
-		pattern?: string;
-		shrink?: boolean;
-		toggleEdit?: boolean;
-		type?: string;
-		nativeInputAttrs?: Record<string, any>;
-		icon?: MaterialIcons;
-		iconStart?: MaterialIcons;
-		multiline?: boolean;
-		autoheight?: boolean;
-		code?: boolean;
-		lines?: number;
-		autocomplete?: string;
-	}>(),
-	{
-		type: 'text',
-		toggleEdit: false,
-		modelValue: '',
-		autocomplete: 'off',
-	},
+  defineProps<{
+    id?: string;
+    title?: string;
+    helptext?: string;
+    placeholder?: string;
+    modelValue?: string | number;
+    label?: string;
+    small?: boolean;
+    dense?: boolean;
+    required?: boolean;
+    pattern?: string;
+    shrink?: boolean;
+    toggleEdit?: boolean;
+    type?: string;
+    nativeInputAttrs?: Record<string, any>;
+    icon?: MaterialIcons;
+    iconStart?: MaterialIcons;
+    multiline?: boolean;
+    autoheight?: boolean;
+    code?: boolean;
+    lines?: number;
+    autocomplete?: string;
+    autofocus?: boolean;
+  }>(),
+  {
+    type: 'text',
+    toggleEdit: false,
+    modelValue: '',
+    autocomplete: 'off',
+  },
 );
 let inputVal = $ref<string | number>();
 let editMode = $ref<boolean>(!props.toggleEdit);
@@ -109,118 +67,130 @@ let editMode = $ref<boolean>(!props.toggleEdit);
 const input = $ref<HTMLInputElement>();
 
 const toggleEditAction = () => {
-	if (!props.toggleEdit) return;
-	if (editMode) {
-		editMode = false;
-		emit('debounce', inputVal);
-		emit('update:modelValue', inputVal as string);
-	} else {
-		editMode = true;
-		setTimeout(() => input?.focus(), 10);
-	}
+  if (!props.toggleEdit) return;
+  if (editMode) {
+    editMode = false;
+    emit('debounce', inputVal);
+    emit('update:modelValue', inputVal as string);
+  } else {
+    editMode = true;
+    setTimeout(() => input?.focus(), 10);
+  }
 };
 
 const rows = $computed(() => {
-	if (props.lines) return props.lines;
-	if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
-	if (props.multiline || props.code) return 4;
-	return 1;
+  if (props.lines) return props.lines;
+  if (props.autoheight) return `${inputVal}`?.split('\n').length || 1;
+  if (props.multiline || props.code) return 4;
+  return 1;
 });
 
 watch(
-	() => inputVal,
-	(newVal) => {
-		if (props.toggleEdit) return;
-		if (newVal === props.modelValue) return;
-		emit('update:modelValue', newVal as string);
-		debounce(() => emit('debounce', newVal));
-	},
+  () => inputVal,
+  (newVal) => {
+    if (props.toggleEdit) return;
+    if (newVal === props.modelValue) return;
+    emit('update:modelValue', newVal as string);
+    debounce(() => emit('debounce', newVal));
+  },
 );
 
 watch(
-	() => props.modelValue,
-	(newVal) => {
-		if (newVal !== inputVal) inputVal = newVal;
-	},
-	{ immediate: true },
+  () => props.modelValue,
+  (newVal) => {
+    if (newVal !== inputVal) inputVal = newVal;
+  },
+  { immediate: true },
 );
+
+onMounted(() => {
+  if (props.autofocus) setTimeout(() => input?.focus(), 10);
+});
 </script>
 
 <style>
 .bagel-input.shrink,
 .bagel-input.shrink input {
-	min-width: unset !important;
-	/* width: auto; */
+  min-width: unset !important;
+  /* width: auto; */
+}
+.bagel-input label {
+	font-size: var(--label-font-size);
 }
 </style>
 
 <style scoped>
 .bagel-input textarea {
-	min-height: unset;
+  min-height: unset;
+  font-size: var(--input-font-size);
 }
 
 .bagel-input.text-input textarea {
-	resize: none;
+  resize: none;
 }
 
 .code textarea {
-	font-family: 'Inconsolata', monospace;
-	background: var(--bgl-black) !important;
-	color: var(--bgl-white) !important;
+  font-family: 'Inconsolata', monospace;
+  background: var(--bgl-black) !important;
+  color: var(--bgl-white) !important;
 }
 
 .bagel-input.toggleEdit:hover {
-	background-color: var(--input-bg);
+  background-color: var(--input-bg);
 }
 
 .bagel-input.small {
-	margin-bottom: 0;
-	height: 30px;
+  margin-bottom: 0;
+  height: 30px;
 }
 
 .bagel-input.dense label {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.bagel-input label {
+  font-size: var(--label-font-size);
 }
 
 .toggleEditBtn {
-	position: absolute;
-	right: -24px;
-	top: 4;
-	opacity: 0;
+  position: absolute;
+  right: -24px;
+  top: 4;
+  opacity: 0;
 }
 
 .textInputIconWrap {
-	position: relative;
+  position: relative;
 }
 
 .textInputIconWrap .bgl_icon-font {
-	position: absolute;
-	inset-inline-end: 0.7rem;
-	bottom: 50%;
-	line-height: 0;
-	color: var(--bgl-gray);
+  position: absolute;
+  inset-inline-end: 0.7rem;
+  bottom: 50%;
+  line-height: 0;
+  color: var(--bgl-gray);
 }
 
 .txtInputIconStart .iconStart {
-	position: absolute;
-	inset-inline-start: 0.7rem;
-	top: 50%;
-	line-height: 0;
-	color: var(--bgl-gray);
+  position: absolute;
+  inset-inline-start: 0.7rem;
+  top: 50%;
+  line-height: 0;
+  color: var(--bgl-gray);
 }
 
 .txtInputIconStart textarea {
-	padding-inline-start: 2rem;
+  padding-inline-start: 2rem;
 }
 
 .bagel-input:hover .toggleEditBtn,
 .bagel-input.editMode .toggleEditBtn {
-	opacity: 1;
+  opacity: 1;
 }
 
 .bagel-input.small textarea {
-	height: 30px;
+  height: 30px;
 }
 </style>

package/src/components/index.ts

@@ -27,5 +27,5 @@ export { default as Carousel } from './Carousel.vue';
 
 export * from './form';
 export * from './dashboard';
-export * from './whatsapp';
+// export * from './whatsapp';
 export * from './layout';

package/src/components/layout/Layout.vue

@@ -5,13 +5,14 @@
 </template>
 
 <script lang="ts" setup>
-type Props = {
+type LayoutProrps = {
   gap?: number,
   h100?: boolean,
   columns?: string[]
   rows?: string[],
 }
-const props = withDefaults(defineProps<Props>(), {
+
+const props = withDefaults(defineProps<LayoutProrps>(), {
 	gap: 1,
 	h100: false,
 	columns: () => [],

package/src/components/layout/SidebarMenu.vue

@@ -6,7 +6,7 @@
 		<slot v-if="isOpen" name="brand-open" />
 		<slot v-if="!navLinks" />
 		<Btn
-			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button"
+			v-for="(nav, i) in navLinks" :key="i" :to="nav.to" class="nav-button px-075"
 			v-tooltip.right="{ content: nav.label, disabled: open, class: ['nav-tooltip'] }"
 		>
 			<template #default >
@@ -23,16 +23,10 @@
 <script lang="ts" setup>
 import { useSlots } from 'vue';
 import { Btn, Icon } from '@bagelink/vue';
-import type { MaterialIcons } from '@bagelink/vue';
+import type { NavLink } from '@bagelink/vue';
 
 const slots = useSlots();
 
-type NavLink = {
-  to?: string;
-  icon: MaterialIcons;
-  label: string;
-  children?: NavLink[];
-};
 const props = defineProps<{ navLinks?: NavLink[], expandable?: boolean, open: boolean }>();
 
 let isOpen = $ref(props.open);
@@ -56,13 +50,12 @@ function toggleMenu() {
 .wideNav .nav-button .bgl_btn-flex {
   justify-content: flex-start !important;
 }
-</style>
-
-<style scoped>
 .nav-button.router-link-active {
-  background-color: #40b884 !important;
+  background-color: var(--bgl-primary-tint) !important;
 }
+</style>
 
+<style scoped>
 .bgl_sidebar {
   background-color: var(--bgl-primary);
   color: var(--bgl-white);

package/src/components/whatsapp/index.ts

@@ -1,2 +1,2 @@
-export { default as MsgTemplate } from './form/MsgTemplate.vue';
-export { default as TextVariableExamples } from './form/TextVariableExamples.vue';
+// export { default as MsgTemplate } from './form/MsgTemplate.vue';
+// export { default as TextVariableExamples } from './form/TextVariableExamples.vue';

package/src/styles/layout.css

@@ -150,6 +150,14 @@
     width: 98%;
 }
 
+.w100 {
+    max-width: 100px;
+}
+
+.w200 {
+    max-width: 200px;
+}
+
 .w300 {
     max-width: 300px;
 }
@@ -1034,7 +1042,7 @@
 }
 
 .absolute {
-    position: absolute;
+    position: absolute !important;
 }
 
 .flex {
@@ -1061,6 +1069,14 @@
     width: 100%;
 }
 
+.inline {
+    display: inline;
+}
+
+.inline-block {
+    display: inline-block;
+}
+
 .flex-wrap {
     flex-wrap: wrap;
 }
@@ -1406,6 +1422,13 @@
     overflow-y: hidden;
 }
 
+.line {
+    background: var(--border-color);
+    height: 1px;
+    width: 100%;
+}
+
+
 @media screen and (max-width: 910px) {
     .grid-wrap-2 {
         grid-template-columns: repeat(1, 1fr);

package/src/styles/text.css

@@ -147,6 +147,10 @@
     font-family: "Material Symbols Outlined", serif;
 }
 
+.nowrap {
+    white-space: nowrap;
+}
+
 @media screen and (max-width: 910px) {
 
     .txt20,

package/src/types/BagelForm.ts

@@ -5,7 +5,7 @@ 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>> = {
@@ -18,7 +18,7 @@ export type BaseBagelField<T = Record<string, any>> = {
 	attrs?: Attributes<T>;
 	required?: boolean;
 	helptext?: string;
-	options?: string | ({ label?: string; value: string | number } | string | number | Record<string, any>)[],
+	options?: string | ({ label?: string; value: string | number } | string | number | Record<string, any>)[] | ((val: any, rowData?: Record<string, any>) => void);
 	defaultValue?: any;
 	transform?: (val?: any, rowData?: Record<string, any>) => any;
 	onUpdate?: (val: any, rowData?: Record<string, any>) => void;
@@ -26,14 +26,14 @@ export type BaseBagelField<T = Record<string, any>> = {
 }
 
 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/types/NavLink.ts

@@ -3,7 +3,8 @@ import { MaterialIcons } from './materialIcons';
 export type NavLink = {
   label: string;
   to?: string;
-  materialIcon: MaterialIcons;
+  icon: MaterialIcons;
   localized?: string;
+  children?: NavLink[];
   onClick?: () => void;
 }