@bagelink/vue 0.0.988 → 0.0.992

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.988",
+  "version": "0.0.992",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -62,7 +62,8 @@
     "vue": "*",
     "vue-draggable-next": "^2.2.1",
     "vue-router": "*",
-    "vue3-charts": "^1.1.33"
+    "vue3-charts": "^1.1.33",
+    "@vuepic/vue-datepicker": "^8.8.1"
   },
   "peerDependenciesMeta": {
     "@vuepic/vue-datepicker": {
@@ -71,50 +72,21 @@
     "vue3-charts": {
       "optional": true
     },
-    "@formkit/vue": {
-      "optional": true
-    },
-    "@formkit/core": {
-      "optional": true
-    },
     "vue-draggable-next": {
       "optional": true
-    },
-    "prosemirror-commands": {
-      "optional": true
-    },
-    "prosemirror-history": {
-      "optional": true
-    },
-    "prosemirror-keymap": {
-      "optional": true
-    },
-    "prosemirror-model": {
-      "optional": true
-    },
-    "prosemirror-schema-basic": {
-      "optional": true
-    },
-    "prosemirror-state": {
-      "optional": true
-    },
-    "prosemirror-view": {
-      "optional": true
     }
   },
   "publishConfig": {
     "access": "public"
   },
   "dependencies": {
-    "highlight.js": "^11.11.0",
-    "@vuepic/vue-datepicker": "^8.8.1",
+    "@highlightjs/vue-plugin": "^2.1.0",
+    "heic2any": "^0.0.4",
     "@vueuse/core": "^12.0.0",
     "axios": "^1.7.9",
-    "heic2any": "^0.0.4",
     "floating-vue": "^5.2.2",
     "libphonenumber-js": "1.11.16",
-    "signature_pad": "^5.0.4",
-    "type-fest": "^4.30.0"
+    "signature_pad": "^5.0.4"
   },
   "scripts": {
     "dev": "tsx watch src/index.ts",

package/src/components/Btn.vue

@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import type { MaterialIcons, ThemeType } from '@bagelink/vue'
-import { MaterialIcon } from '@bagelink/vue'
+import { MaterialIcon, Loading } from '@bagelink/vue'
 import { useSlots } from 'vue'
+import { RouterLink } from 'vue-router'
 
 const props = withDefaults(
 	defineProps<{
@@ -38,77 +39,44 @@ const props = withDefaults(
 )
 
 const isComponent = $computed(() => {
-	if (props.to) return 'router-link'
+	if (props.to) return RouterLink
 	if (props.href) return 'a'
 	return props.is
 })
 
+const bind = $computed(() => {
+	const obj: Record<string, any> = {}
+	if (props.to) obj.to = props.to
+	else if (props.href) obj.href = props.href
+	if (!props.to && !props.href) {
+		obj.role = props.role
+		obj.type = props.type
+	}
+	return obj
+})
 const slots = useSlots()
-
-const computedTheme = $computed(
-	() => {
-		if (props.disabled) return 'gray-light'
-		return (props.color || props.theme)
-	},
-)
-
-const computedDefaultColors = $computed(
-	() => ({
-		backgroundColor: 'var(--bgl-primary)',
-		color: props.flat ? 'var(--bgl-text-color)' : 'var(--bgl-light-text)',
-	}),
-)
-
-function getThemeColors(theme: Partial<typeof computedDefaultColors>): typeof computedDefaultColors {
-	return ({
-		...computedDefaultColors,
-		...theme,
-		color: props.flat
-			? theme.backgroundColor as string
-			: theme.color as string,
-	})
-}
-
-const themes: Partial<Record<ThemeType, typeof computedDefaultColors>> = {
-	'red': getThemeColors({ backgroundColor: 'var(--bgl-red)' }),
-	'white': getThemeColors({ backgroundColor: 'var(--bgl-white)', color: 'var(--bgl-black)' }),
-	'black': getThemeColors({ backgroundColor: 'var(--bgl-black)', color: 'var(--bgl-white)' }),
-	'green': getThemeColors({ backgroundColor: 'var(--bgl-green)', color: 'var(--bgl-white)' }),
-	'primary': getThemeColors({ backgroundColor: 'var(--bgl-primary)', color: 'var(--bgl-white)' }),
-	'yellow': getThemeColors({ backgroundColor: 'var(--bgl-yellow)', color: 'var(--bgl-black)' }),
-	'gray': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-black)' }),
-	'light': getThemeColors({ backgroundColor: 'var(--bgl-primary-light)', color: 'var(--bgl-primary)' }),
-	'gray-light': getThemeColors({ backgroundColor: 'var(--bgl-gray-light)', color: 'var(--bgl-gray)' }),
-	'blue': getThemeColors({}),
-}
-
-const cumputedTextColor = $computed(
-	() => (themes[computedTheme as ThemeType]?.color ?? computedDefaultColors.color),
-)
-
-const computedBackgroundColor = $computed(
-	() => (themes[computedTheme as ThemeType]?.backgroundColor ?? computedDefaultColors.backgroundColor),
-)
 </script>
 
 <template>
 	<component
 		:is="isComponent"
-		v-ripple :href="href" :to="to" :type="type" :role="role" :disabled="disabled"
+		v-ripple v-bind="bind" :disabled="disabled"
+		class="bgl_btn"
 		:class="{
 			'bgl_btn-icon': icon && !slots.default && !value,
-			'bgl_btn': !icon || slots.default || value,
 			thin,
 			round,
-			'bgl_flatBtn': flat,
+			'bgl_btn_flat': flat,
 			'bgl_btn-border': border || outline,
+			[`bgl_btn-${color}`]: color,
+			[`bgl_btn-${theme}`]: theme,
 		}"
 		:tabindex="disabled ? -1 : 0"
 		@click.stop="onClick"
 		@keydown.enter="onClick"
 		@keydown.space="onClick"
 	>
-		<div v-if="loading" class="loading" />
+		<Loading v-if="loading" size="15" />
 		<div v-else class="bgl_btn-flex">
 			<MaterialIcon v-if="icon" :icon="icon" />
 			<slot />
@@ -121,51 +89,93 @@ const computedBackgroundColor = $computed(
 </template>
 
 <style scoped>
-a {
-  text-decoration: none;
+.bgl_btn {
+  --btn-bg: var(--bgl-primary);
+  --btn-color: var(--bgl-light-text);
+  --btn-flat-color: var(--bgl-text-color);
 }
 
-.loading {
-  border: 1px solid var(--bgl-light-text);
-  border-bottom: 2px solid var(--bgl-light-text);
-  animation: spin 1s linear infinite;
-  border-radius: 100px;
-  width: 1rem;
-  height: 1rem;
-  margin: auto;
+.bgl_btn-green {
+  --btn-bg: var(--bgl-green);
+  --btn-color: var(--bgl-light-text);
+  --btn-flat-color: var(--bgl-green);
 }
 
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
+.bgl_btn-yellow {
+  --btn-bg: var(--bgl-yellow);
+  --btn-color: var(--bgl-black);
+  --btn-flat-color: var(--bgl-yellow);
+}
 
-  100% {
-    transform: rotate(360deg);
-  }
+.bgl_btn-blue {
+  --btn-bg: var(--bgl-blue);
+  --btn-color: var(--bgl-light-text);
+  --btn-flat-color: var(--bgl-blue);
 }
 
-.bgl_btn-icon {
-  height: var(--btn-height);
-  width: var(--btn-height);
-  border-radius: 100%;
-  font-size: 1rem;
-  background: var(--bgl-primary);
-  color: var(--bgl-light-text);
-  flex-shrink: 0;
-  transition: var(--bgl-transition);
+.bgl_btn-primary {
+  --btn-bg: var(--bgl-primary);
+  --btn-color: var(--bgl-light-text);
+  --btn-flat-color: var(--bgl-primary);
+}
+
+.bgl_btn-red {
+  --btn-bg: var(--bgl-red);
+  --btn-color: var(--bgl-light-text);
+  --btn-flat-color: var(--bgl-red);
+}
+
+.bgl_btn-white {
+  --btn-bg: var(--bgl-white);
+  --btn-color: var(--bgl-black);
+  --btn-flat-color: var(--bgl-white);
+}
+
+.bgl_btn-black {
+  --btn-bg: var(--bgl-black);
+  --btn-color: var(--bgl-light-text);
+  --btn-flat-color: var(--bgl-black);
+}
+
+.bgl_btn-gray {
+  --btn-bg: var(--bgl-gray-light);
+  --btn-color: var(--bgl-black);
+  --btn-flat-color: var(--bgl-gray);
+}
+
+.bgl_btn-light {
+  --btn-bg: var(--bgl-primary-light);
+  --btn-color: var(--bgl-primary);
+  --btn-flat-color: var(--bgl-primary-light);
+}
+
+.bgl_btn-gray-light {
+  --btn-bg: var(--bgl-gray-light);
+  --btn-color: var(--bgl-gray);
+  --btn-flat-color: var(--bgl-gray-light);
 }
 
 .bgl_btn {
   padding-left: var(--btn-padding);
   padding-right: var(--btn-padding);
   transition: var(--bgl-transition);
+  background: var(--btn-bg);
+  color: var(--btn-color);
   text-decoration: none;
 }
 
-.bgl_btn[disabled="true"] {
-  opacity: 0.5;
-  cursor: not-allowed;
+.bgl_btn.bgl_btn-icon {
+  padding-left: 0;
+  padding-right: 0;
+  height: var(--btn-height);
+  width: var(--btn-height);
+  border-radius: 100%;
+  font-size: 1rem;
+  flex-shrink: 0;
+}
+
+a {
+  text-decoration: none;
 }
 
 .bgl_btn-flex {
@@ -180,74 +190,34 @@ a {
   font-size: calc(var(--input-font-size) * 1.3);
 }
 
-.bgl_btn,
-.bgl_btn-icon {
-  background-color: v-bind(computedBackgroundColor);
-  color: v-bind(cumputedTextColor);
-}
-
 .bgl_btn:hover,
 .bgl_btn-icon:hover {
   filter: var(--bgl-hover-filter);
 }
 
-.bgl_btn:active,
-.bgl_btn-icon:active {
+.bgl_btn:active:not(:disabled),
+.bgl_btn-icon:active:not(:disabled) {
   filter: var(--bgl-active-filter);
 }
 
-.bgl_btn.bgl_flatBtn {
-  padding-left: var(--btn-padding);
-  padding-right: var(--btn-padding);
-  background: transparent;
-}
-
-.bgl_btn-icon.bgl_flatBtn {
+.bgl_btn.bgl_btn_flat {
   background: transparent;
+  color: var(--btn-flat-color);
 }
 
-.bgl_btn.bgl_flatBtn:hover,
-.bgl_btn-icon.bgl_flatBtn:hover {
-  filter: var(--bgl-hover-filter);
+.bgl_btn_flat:hover:not(:disabled),
+.bgl_btn-icon.bgl_btn_flat:hover:not(:disabled) {
   background: var(--bgl-gray-20);
-  color: var(--bgl-primary);
 }
 
-.bgl_btn.bgl_flatBtn:active,
-.bgl_btn-icon.bgl_flatBtn:active {
+.bgl_btn.bgl_btn_flat:active:not(:disabled),
+.bgl_btn-icon.bgl_btn_flat:active:not(:disabled) {
   background: var(--bgl-gray-40);
-  filter: var(--bgl-active-filter);
-  color: var(--bgl-primary);
-}
-
-.bgl_btn.bgl_flatBtn.red,
-.bgl_btn-icon.bgl_flatBtn.red {
-  color: var(--bgl-red);
-}
-.bgl_btn.bgl_flatBtn.white,
-.bgl_btn-icon.bgl_flatBtn.white {
-  color: var(--bgl-light-text);
-}
-
-.bgl_btn.bgl_flatBtn.light,
-.bgl_btn-icon.bgl_flatBtn.light {
-  color: var(--bgl-primary-tint);
-}
-
-.bgl_btn.bgl_flatBtn.black,
-.bgl_btn-icon.bgl_flatBtn.black {
-  color: var(--bgl-text-color);
-}
-
-.bgl_btn.bgl_flatBtn.gray,
-.bgl_btn-icon.bgl_flatBtn.gray {
-  color: var(--bgl-gray);
 }
 
 .bgl_btn.thin {
   padding-inline: calc(var(--btn-padding) / 3);
   border-radius: calc(var(--btn-border-radius) / 1.5);
-
 }
 
 .bgl_btn.round {
@@ -267,19 +237,23 @@ a {
   transform: rotateY(180deg);
 }
 
-.bgl_btn-border {
-  outline: 1px solid v-bind(computedBackgroundColor);
-  color: v-bind(computedBackgroundColor);
-  background: transparent;
+.bgl_btn-border, .bgl_btn-icon.bgl_btn_flat.bgl_btn-border {
+	  border: 1px solid var(--btn-flat-color);
+	  background: transparent;
+	  color: var(--btn-flat-color);
 }
 
 .bgl_btn-border:hover {
-  color: var(--bgl-light-text);
-  background: v-bind(computedBackgroundColor);
-  filter: brightness(100%);
+	  color: var(--btn-flat-color);
 }
 
-.bgl_btn-border:active {
+.bgl_btn-border:active:not(:disabled) {
   filter: brightness(80%);
 }
+
+.bgl_btn:disabled {
+  opacity: 0.6;
+  filter: grayscale(0.3);
+  cursor: not-allowed;
+}
 </style>

package/src/components/Loading.vue

@@ -0,0 +1,177 @@
+<script setup lang="ts">
+type LoadingType = 'ring' | 'ellipsis' | 'bar'
+
+const { type: theme = 'ring', size = 64, thickness, duration = 1.2, color } = defineProps<{
+	size?: number | string
+	thickness?: number | string
+	duration?: number | string
+	type?: LoadingType
+	color?: string
+}>()
+
+// Ensure size and units are correctly formatted
+function standardSize(value: number | string | undefined, unit = 'px') {
+	if (!value) return `${size}${unit}`
+	return typeof value === 'number' ? `${value}${unit}` : value.endsWith(unit) ? value : `${value}${unit}`
+}
+
+// Computed Values
+const computedSize = $computed(() => standardSize(size))
+const animationDuration = $computed(() => `${duration}s`)
+
+// Border size for ring theme (defaults to 1/8th of the size)
+const computedBorder = $computed(() => {
+	const borderValue = thickness ?? Number.parseInt(computedSize) / 7
+	return standardSize(borderValue)
+})
+</script>
+
+<template>
+	<div class="flex-center">
+		<!-- Bar Theme -->
+		<div v-if="theme === 'bar'" class="lds-bar" :style="{ animationDuration, color }" />
+
+		<!-- Ellipsis Theme -->
+		<div v-if="theme === 'ellipsis'" class="lds-ellipsis" :style="{ '--size': computedSize }">
+			<div v-for="n in 4" :key="n" :style="{ color, '--size': computedSize }" />
+		</div>
+
+		<!-- Ring Theme -->
+		<div v-if="theme === 'ring'" class="lds-ring" :style="{ '--size': computedSize, '--thickness': computedBorder }">
+			<div
+				v-for="n in 4" :key="n"
+				:style="{
+					color,
+					'width':
+						computedSize,
+					'height': computedSize,
+					'borderWidth': computedBorder,
+					'--animation-duration': animationDuration,
+					'--size': computedSize,
+					'--thickness': computedBorder,
+				}"
+			/>
+		</div>
+	</div>
+</template>
+
+<style scoped>
+/* Bar Theme */
+.lds-bar {
+  height: 4px;
+  width: 100%;
+  max-width: 130px;
+  --c: no-repeat linear-gradient(currentColor 0 0);
+  background: var(--c), var(--c), #ddd;
+  background-size: 60% 100%;
+  animation: bar-animation 3s infinite ease-in-out;
+}
+
+@keyframes bar-animation {
+  0% { background-position: -150% 0, -150% 0 }
+  66% { background-position: 250% 0, -150% 0 }
+  100% { background-position: 250% 0, 250% 0 }
+}
+
+.lds-ring,
+.lds-ring div {
+  box-sizing: border-box;
+}
+.lds-ring {
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+  transform: translate(calc(var(--thickness) * -1), calc(var(--thickness) * -1));
+}
+.lds-ring div {
+  box-sizing: border-box;
+  display: block;
+  position: absolute;
+  width: calc(var(--size) / 1.25);
+  height: calc(var(--size) / 1.25);
+  margin: var(--thickness);
+  border: var(--thickness) solid currentColor;
+  border-radius: 50%;
+  animation: lds-ring var(--animation-duration) cubic-bezier(0.5, 0, 0.5, 1) infinite;
+  border-color: currentColor transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+  animation-delay: calc(var(--animation-duration) * -0.38);
+}
+.lds-ring div:nth-child(2) {
+  animation-delay: calc(var(--animation-duration) / -4);
+}
+.lds-ring div:nth-child(3) {
+  animation-delay: calc(var(--animation-duration) / -8);
+}
+
+@keyframes lds-ring {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.lds-ellipsis,
+.lds-ellipsis div {
+  box-sizing: border-box;
+}
+.lds-ellipsis {
+  display: inline-block;
+  position: relative;
+  width: var(--size);
+  height: var(--size);
+}
+.lds-ellipsis div {
+  position: absolute;
+  top: calc(var(--size) - 40%);
+  width: calc(var(--size) / 5);
+  height:calc(var(--size) / 5);
+  border-radius: 50%;
+  background: currentColor;
+  animation-timing-function: cubic-bezier(0, 1, 1, 0);
+}
+.lds-ellipsis div:nth-child(1) {
+  left: calc(var(--size) / 10);
+  animation: lds-ellipsis1 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(2) {
+  left: calc(var(--size) / 10);
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(3) {
+  left: calc(var(--size) / 2.5);
+  animation: lds-ellipsis2 0.6s infinite;
+}
+.lds-ellipsis div:nth-child(4) {
+  left: calc(var(--size) / 1.42);
+  animation: lds-ellipsis3 0.6s infinite;
+}
+@keyframes lds-ellipsis1 {
+  0% {
+    transform: scale(0);
+  }
+  100% {
+    transform: scale(1);
+  }
+}
+@keyframes lds-ellipsis3 {
+  0% {
+    transform: scale(1);
+  }
+  100% {
+    transform: scale(0);
+  }
+}
+@keyframes lds-ellipsis2 {
+  0% {
+    transform: translate(0, 0);
+  }
+  100% {
+    transform: translate(calc(var(--size) / 3.33), 0);
+  }
+}
+</style>

package/src/components/form/BglField.vue

@@ -11,6 +11,7 @@ import {
 	bindAttrs,
 	classify,
 } from '@bagelink/vue'
+import TabsNav from '../layout/TabsNav.vue'
 
 const props = withDefaults(
 	defineProps<{
@@ -38,6 +39,7 @@ const is = $computed(() => {
 	if (props.field.$el === 'richtext') return RichText
 	if (props.field.$el === 'file') return FileUpload
 	if (props.field.$el === 'date') return DateInput
+	if (props.field.$el === 'tabs') return TabsNav
 	return props.field.$el ?? 'div'
 })