@bagelink/vue 0.0.192 → 0.0.198

package/dist/types/BtnOptions.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAErD,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,MAAM,CAAC;IACpD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CACf"}
+{"version":3,"file":"BtnOptions.d.ts","sourceRoot":"","sources":["../../src/types/BtnOptions.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,GAAG,CAAC;AAElD,MAAM,WAAW,UAAU;IAC1B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,KAAK,CAAC,EAAC,SAAS,CAAC;IACjB,KAAK,CAAC,EAAC,SAAS,CAAC;IACjB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,IAAI,CAAC,EAAE,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAEf"}

package/dist/types/index.d.ts

@@ -4,4 +4,5 @@ export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
 export * from './BagelField';
 export * from './BtnOptions';
+export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/types/index.ts"],"names":[],"mappings":"AAAA,YAAY,EAAE,aAAa,EAAE,MAAM,iBAAiB,CAAC;AACrD,YAAY,EAAE,oBAAoB,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AACxE,YAAY,EAAE,MAAM,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AAChE,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAC1C,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC;AAE7B,MAAM,MAAM,SAAS,GAAG,OAAO,GAAG,KAAK,GAAG,MAAM,GAAG,YAAY,GAAG,OAAO,GAAG,OAAO,CAAC"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.192",
+  "version": "0.0.198",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",

package/src/components/Btn.vue

@@ -10,7 +10,7 @@
 			btn: !icon || slots['default'] || value,
 			thin,
 			round,
-			'btn-txt': flat,
+			'flatBtn': flat,
 			'btn-border': border
 		}"
 	>
@@ -42,18 +42,16 @@
 import { useSlots } from 'vue';
 
 const slots = useSlots();
-import type { MaterialIcons } from '@bagelink/vue';
+import type { MaterialIcons, ThemeType } from '@bagelink/vue';
 import { MaterialIcon } from '@bagelink/vue';
 
-type ThemeTypes = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';
-
 const props = withDefaults(
 	defineProps<{
 		disabled?: boolean;
 		icon?: MaterialIcons;
 		'icon.end'?: MaterialIcons;
-		color?: ThemeTypes;
-		theme?: ThemeTypes;
+		color?: ThemeType;
+		theme?: ThemeType;
 		flat?: boolean;
 		border?: boolean;
 		thin?: boolean;
@@ -64,7 +62,6 @@ const props = withDefaults(
 		to?: string;
 		round?: boolean;
 		is?: string;
-		borderColor?: string
 	}>(),
 	{
 		loading: false,
@@ -76,25 +73,32 @@ const props = withDefaults(
 	},
 );
 
-const computedTheme = $computed(() => (props?.color || props?.theme));
-
-const defaultColors = { backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' };
+const computedTheme = $computed(
+	() => (props?.color || props?.theme)
+);
 
-const themes: { [key in ThemeTypes]: typeof defaultColors } = {
-	red: { ...defaultColors, backgroundColor: 'var(--bgl-red)', },
-	black: { ...defaultColors, backgroundColor: 'var(--bgl-black)' },
-	green: { ...defaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
-	gray: { ...defaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
-	light: { ...defaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
-	'gray-light': { ...defaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
+const computedDefaultColors = $computed(
+	() => ({
+		backgroundColor: 'var(--bgl-primary)',
+		color: props.flat ? 'var(--bgl-black)' : 'var(--bgl-white)'
+	})
+)
+
+const themes: { [key in ThemeType]: typeof computedDefaultColors } = {
+	red: { ...computedDefaultColors, backgroundColor: 'var(--bgl-red)', },
+	black: { ...computedDefaultColors, backgroundColor: 'var(--bgl-black)' },
+	green: { ...computedDefaultColors, backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' },
+	gray: { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' },
+	light: { ...computedDefaultColors, backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' },
+	'gray-light': { ...computedDefaultColors, backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' },
 };
 
 const cumputedTextColor = $computed(
-	() => (themes?.[computedTheme as ThemeTypes]?.color || defaultColors.color),
+	() => (themes?.[computedTheme as ThemeType]?.color || computedDefaultColors.color),
 );
 
 const computedBackgroundColor = $computed(
-	() => (themes?.[computedTheme as ThemeTypes]?.backgroundColor || defaultColors.backgroundColor),
+	() => (themes?.[computedTheme as ThemeType]?.backgroundColor || computedDefaultColors.backgroundColor),
 );
 </script>
 
@@ -131,8 +135,6 @@ const computedBackgroundColor = $computed(
 }
 
 .btn {
-	background: var(--bgl-primary);
-	color: var(--bgl-white);
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	transition: var(--bgl-transition);
@@ -155,6 +157,12 @@ const computedBackgroundColor = $computed(
 	font-size: calc(var(--input-font-size) * 1.3);
 }
 
+.btn,
+.btn-icon {
+	background-color: v-bind(computedBackgroundColor);
+	color: v-bind(cumputedTextColor);
+}
+
 .btn:hover,
 .btn-icon:hover {
 	filter: var(--bgl-hover-filter);
@@ -165,53 +173,45 @@ const computedBackgroundColor = $computed(
 	filter: var(--bgl-active-filter);
 }
 
-.btn,
-.btn-icon {
-	background-color: v-bind(computedBackgroundColor);
-	color: v-bind(cumputedTextColor);
-
-}
 
-.btn.btn-txt {
-	color: var(--bgl-primary);
+.btn.flatBtn {
 	padding-left: var(--btn-padding);
 	padding-right: var(--btn-padding);
 	background: transparent;
 }
 
-.btn-icon.btn-txt {
-	color: var(--bgl-primary);
+.btn-icon.flatBtn {
 	background: transparent;
 }
 
-.btn.btn-txt:hover,
-.btn-icon.btn-txt:hover {
+.btn.flatBtn:hover,
+.btn-icon.flatBtn:hover {
 	filter: var(--bgl-active-filter);
 }
 
-.btn.btn-txt:active,
-.btn-icon.btn-txt:active {
+.btn.flatBtn:active,
+.btn-icon.flatBtn:active {
 	background: var(--bgl-white);
 	filter: var(--bgl-hover-filter);
 }
 
-.btn.btn-txt.red,
-.btn-icon.btn-txt.red {
+.btn.flatBtn.red,
+.btn-icon.flatBtn.red {
 	color: var(--bgl-red);
 }
 
-.btn.btn-txt.light,
-.btn-icon.btn-txt.light {
+.btn.flatBtn.light,
+.btn-icon.flatBtn.light {
 	color: var(--bgl-primary-tint);
 }
 
-.btn.btn-txt.black,
-.btn-icon.btn-txt.black {
+.btn.flatBtn.black,
+.btn-icon.flatBtn.black {
 	color: var(--bgl-black);
 }
 
-.btn.btn-txt.gray,
-.btn-icon.btn-txt.gray {
+.btn.flatBtn.gray,
+.btn-icon.flatBtn.gray {
 	color: var(--bgl-gray);
 }
 
@@ -237,11 +237,11 @@ const computedBackgroundColor = $computed(
 .btn-border {
 	outline: 1px solid v-bind(computedBackgroundColor);
 	color: v-bind(computedBackgroundColor);
-	background: var(--bgl-white);
+	background: transparent;
 }
 
 .btn-border:hover {
-	color: v-bind(cumputedTextColor);
+	color: var(--bgl-white);
 	background: v-bind(computedBackgroundColor);
 	filter: brightness(100%);
 }

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

@@ -193,7 +193,7 @@ onMounted(() => {
 	cursor: grab;
 }
 
-.btn.thin.btn-txt {
+.btn.thin.flatBtn {
 	margin-inline-start: -1rem;
 	margin-top: 1rem;
 }

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

@@ -1,7 +1,7 @@
 <template>
 	<div
 		class="bagel-input"
-		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap:icon, txtInputIconStart:iconStart}"
+		:class="{ small, shrink, toggleEdit, editMode, textInputIconWrap: icon, txtInputIconStart: iconStart }"
 		:title="title"
 	>
 		<label :for="id">
@@ -138,21 +138,24 @@ watch(
 .textInputIconWrap {
 	position: relative;
 }
+
 .textInputIconWrap .icon-font {
 	position: absolute;
 	inset-inline-end: 0.7rem;
-	top:50%;
+	bottom: 50%;
 	line-height: 0;
-    color: var(--bgl-gray);
+	color: var(--bgl-gray);
 }
-.txtInputIconStart .iconStart{
+
+.txtInputIconStart .iconStart {
 	position: absolute;
 	inset-inline-start: 0.7rem;
-	top:50%;
+	top: 50%;
 	line-height: 0;
-    color: var(--bgl-gray);
+	color: var(--bgl-gray);
 }
-.txtInputIconStart input{
+
+.txtInputIconStart input {
 	padding-inline-start: 2rem;
 }
 

package/src/components/formkit/AddressArray.vue

@@ -195,7 +195,7 @@ watch(
 	min-width: 0;
 }
 
-.light.thin.btn-txt.btn {
+.light.thin.flatBtn.btn {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
@@ -246,4 +246,5 @@ watch(
 	.bglform-contact-label {
 		min-width: 0;
 	}
-}</style>
+}
+</style>

package/src/components/formkit/BankDetailsArray.vue

@@ -219,7 +219,7 @@ watch(
 	min-width: 0;
 }
 
-.light.thin.btn-txt.btn {
+.light.thin.flatBtn.btn {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
@@ -270,4 +270,5 @@ watch(
 	.bglform-contact-label {
 		min-width: 0;
 	}
-}</style>
+}
+</style>

package/src/components/formkit/ContactArrayFormKit.vue

@@ -161,7 +161,7 @@ watch(
 	min-width: 0;
 }
 
-.light.thin.btn-txt.btn {
+.light.thin.flatBtn.btn {
 	padding-left: calc(var(--btn-padding) / 4);
 	padding-right: calc(var(--btn-padding) / 4);
 }
@@ -199,4 +199,5 @@ watch(
 	.bglform-contact-label {
 		min-width: 0;
 	}
-}</style>
+}
+</style>

package/src/components/formkit/MiscFields.vue

@@ -1,74 +1,74 @@
 <template>
-  <div class="misc-wrap">
-    <Btn
-      class="add-btn"
-      color="gray"
-      flat
-      @click="addToField(field)"
-      v-for="(field, i) in fields.filter(
+	<div class="misc-wrap">
+		<Btn
+			class="add-btn"
+			color="gray"
+			flat
+			@click="addToField(field)"
+			v-for="(field, i) in fields.filter(
 				(field: any) => field.value?.length === 0,
 			)"
-      :key="i"
-      thin
-    >
-      {{ addBtnLabel }} {{ field.context?.label }}
-    </Btn>
-  </div>
+			:key="i"
+			thin
+		>
+			{{ addBtnLabel }} {{ field.context?.label }}
+		</Btn>
+	</div>
 </template>
 
 <script lang="ts" setup>
 import { Btn } from "@bagelink/vue";
 
 const props = defineProps<{
-  context: Record<string, any>;
-  addBtnLabel: string;
+	context: Record<string, any>;
+	addBtnLabel: string;
 }>();
 
 const fields = $computed(() => props.context?.node?.parent?.children || []);
 
 const addToField = (field: any) => {
-  field.input([{}]);
-  console.log(fields);
+	field.input([{}]);
+	console.log(fields);
 };
 </script>
 
 <style scoped>
 .misc-wrap {
-  display: flex;
-  gap: 1rem;
-  border-top: 1px solid var(--border-color);
-  padding-top: 0.5rem;
-  margin-bottom: auto;
+	display: flex;
+	gap: 1rem;
+	border-top: 1px solid var(--border-color);
+	padding-top: 0.5rem;
+	margin-bottom: auto;
 }
 
-.gray.thin.btn-txt.btn.add-btn {
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  padding-left: 0;
-  padding-right: 0;
-  transition: var(--bgl-transition);
+.gray.thin.flatBtn.btn.add-btn {
+	display: flex;
+	gap: 0.5rem;
+	align-items: center;
+	padding-left: 0;
+	padding-right: 0;
+	transition: var(--bgl-transition);
 }
 
 .add-btn:active {
-  background: none !important;
+	background: none !important;
 }
 
 .add-btn::before {
-  content: "+";
-  font-size: 10px;
-  background: var(--bgl-gray-light);
-  border-radius: 100%;
-  height: 14px;
-  width: 14px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: var(--bgl-gray);
+	content: "+";
+	font-size: 10px;
+	background: var(--bgl-gray-light);
+	border-radius: 100%;
+	height: 14px;
+	width: 14px;
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	color: var(--bgl-gray);
 }
 
 .add-btn:hover::before {
-  background: var(--bgl-primary);
-  color: var(--bgl-white);
+	background: var(--bgl-primary);
+	color: var(--bgl-white);
 }
 </style>

package/src/styles/buttons.css

@@ -1,6 +1,6 @@
 button,
 .btn,
-.btn-txt,
+.flatBtn,
 .btn-icon {
     font-family: inherit;
     white-space: nowrap;

package/src/styles/inputs.css

@@ -291,12 +291,12 @@ label.active {
     display: none;
 }
 
-.label-count-0 button.btn.btn-txt {
+.label-count-0 button.btn.flatBtn {
     /* background: var(--bgl-blue-light); */
     margin-right: 5px;
 }
 
-.label-count-0 button.btn.btn-txt:hover {
+.label-count-0 button.btn.flatBtn:hover {
     background: var(--bgl-hover-filter);
 }
 

package/src/styles/layout.css

@@ -48,7 +48,7 @@
 }
 
 .align-items-end {
-    align-items: end;
+    align-items: end !important;
 }
 
 .fit-content {

package/src/types/BtnOptions.ts

@@ -1,8 +1,9 @@
-import type { MaterialIcons } from './materialIcons';
+import type { ThemeType, MaterialIcons } from '.';
 
 export interface BtnOptions {
 	onClick?: () => void;
-	color?: 'light' | 'red' | 'gray' | 'black' | 'blue';
+	color?:ThemeType;
+	theme?:ThemeType;
 	disabled?: boolean;
 	icon?: MaterialIcons;
 	flat?: boolean;
@@ -11,4 +12,5 @@ export interface BtnOptions {
 	loading?: boolean;
 	role?: string;
 	value?: string;
+
 }

package/src/types/index.ts

@@ -4,3 +4,5 @@ export type { Tables, TableToTypeMapping } from '@bagelink/sdk';
 export type { StorageFile } from './file';
 export * from './BagelField';
 export * from './BtnOptions';
+
+export type ThemeType = 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'green';