@bagelink/vue 0.0.160 → 0.0.164

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bagelink/vue",
   "type": "module",
-  "version": "0.0.160",
+  "version": "0.0.164",
   "description": "Bagel core sdk packages",
   "author": {
     "name": "Neveh Allon",
@@ -51,7 +51,7 @@
     "./vite.config.ts"
   ],
   "dependencies": {
-    "vue": "^3.3.10"
+    "vue": "^3.3.11"
   },
   "devDependencies": {
     "@vue-macros/reactivity-transform": "^0.4.0"

package/src/components/Btn.vue

@@ -1,238 +1,233 @@
 <template>
-	<component
-		:is="to?'router-link':is"
-		:to="to"
-		:type="type"
-		:role="role"
-		:disabled="disabled"
-		:class="{
-			[props.color]: true,
-			'btn-icon': icon && !slots['default'] && !value,
-			btn: !icon || slots['default'] || value,
-			thin: thin,
-			round: round,
-			'btn-txt': flat,
-		}"
-	>
-		<div
-			class="loading"
-			v-if="loading"
-		/>
-		<div
-			v-else
-			class="btn-flex"
-		>
-			<MaterialIcon
-				v-if="icon"
-				:icon="icon"
-			/>
-			<slot />
-			<template v-if="!slots['default'] && value">
-				{{ value }}
-			</template>
-			<MaterialIcon
-				v-if="props['icon.end']"
-				:icon="props['icon.end']"
-			/>
-		</div>
-	</component>
+  <component
+    :is="to ? 'router-link' : is"
+    :to="to"
+    :type="type"
+    :role="role"
+    :disabled="disabled"
+    :class="{
+      [props.color]: true,
+      'btn-icon': icon && !slots['default'] && !value,
+      btn: !icon || slots['default'] || value,
+      thin: thin,
+      round: round,
+      'btn-txt': flat,
+    }"
+  >
+    <div class="loading" v-if="loading" />
+    <div v-else class="btn-flex">
+      <MaterialIcon v-if="icon" :icon="icon" />
+      <slot />
+      <template v-if="!slots['default'] && value">
+        {{ value }}
+      </template>
+      <MaterialIcon v-if="props['icon.end']" :icon="props['icon.end']" />
+    </div>
+  </component>
 </template>
 
 <script setup lang="ts">
-import { useSlots } from 'vue';
+import { useSlots } from "vue";
 
 const slots = useSlots();
-import type { MaterialIcons } from '@bagelink/vue';
-import { MaterialIcon } from '@bagelink/vue';
+import type { MaterialIcons } from "@bagelink/vue";
+import { MaterialIcon } from "@bagelink/vue";
 
 const props = withDefaults(
-	defineProps<{
-		disabled?: boolean;
-		icon?: MaterialIcons;
-		'icon.end'?: MaterialIcons;
-		color?: 'light' | 'red' | 'gray' | 'gray-light' | 'black' | 'blue' | 'green';
-		flat?: boolean;
-		thin?: boolean;
-		type?: 'button' | 'submit' | 'reset';
-		loading?: boolean;
-		role?: string;
-		value?: string;
-		to?: string;
-		round?: boolean;
-		is?: string;
-	}>(),
-	{
-		loading: false,
-		round: false,
-		color: 'gray',
-		disabled: false,
-		type: 'button',
-		role: 'button',
-		is: 'button',
-	},
+  defineProps<{
+    disabled?: boolean;
+    icon?: MaterialIcons;
+    "icon.end"?: MaterialIcons;
+    color?:
+      | "light"
+      | "red"
+      | "gray"
+      | "gray-light"
+      | "black"
+      | "blue"
+      | "green";
+    flat?: boolean;
+    thin?: boolean;
+    type?: "button" | "submit" | "reset";
+    loading?: boolean;
+    role?: string;
+    value?: string;
+    to?: string;
+    round?: boolean;
+    is?: string;
+  }>(),
+  {
+    loading: false,
+    round: false,
+    color: "gray",
+    disabled: false,
+    type: "button",
+    role: "button",
+    is: "button",
+  }
 );
 </script>
 
 <style scoped>
 .loading {
-	border: 1px solid var(--bgl-white);
-	border-bottom: 2px solid var(--bgl-white);
-	animation: spin 1s linear infinite;
-	border-radius: 100px;
-	width: 1rem;
-	height: 1rem;
-	margin: auto;
+  border: 1px solid var(--bgl-white);
+  border-bottom: 2px solid var(--bgl-white);
+  animation: spin 1s linear infinite;
+  border-radius: 100px;
+  width: 1rem;
+  height: 1rem;
+  margin: auto;
 }
 
 @keyframes spin {
-	0% {
-		transform: rotate(0deg);
-	}
+  0% {
+    transform: rotate(0deg);
+  }
 
-	100% {
-		transform: rotate(360deg);
-	}
+  100% {
+    transform: rotate(360deg);
+  }
 }
 
 .btn-icon {
-	height: var(--btn-height);
-	width: var(--btn-height);
-	border-radius: 100%;
-	font-size: 1rem;
-	background: var(--bgl-blue);
-	color: var(--bgl-white);
-	flex-shrink: 0;
-	transition: var(--bgl-transition);
+  height: var(--btn-height);
+  width: var(--btn-height);
+  border-radius: 100%;
+  font-size: 1rem;
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+  flex-shrink: 0;
+  transition: var(--bgl-transition);
 }
 
 .btn {
-	background: var(--bgl-blue);
-	color: var(--bgl-white);
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
-	transition: var(--bgl-transition);
-	text-decoration: none;
+  background: var(--bgl-primary);
+  color: var(--bgl-white);
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  transition: var(--bgl-transition);
+  text-decoration: none;
 }
 
-.btn[disabled='true'] {
-	opacity: 0.5;
-	cursor: not-allowed;
+.btn[disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
 }
 
 .btn-flex {
-	display: flex;
-	align-items: center;
-	gap: 0.5rem;
-	justify-content: center;
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  justify-content: center;
 }
 
 .btn .icon-font {
-	font-size: calc(var(--input-font-size) * 1.3);
+  font-size: calc(var(--input-font-size) * 1.3);
 }
 
 .btn:hover,
 .btn-icon:hover {
-	filter: var(--bgl-hover-filter);
+  filter: var(--bgl-hover-filter);
 }
 
 .btn:active,
 .btn-icon:active {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .btn.red,
 .btn-icon.red {
-	background: var(--bgl-red);
+  background: var(--bgl-red);
 }
 
 .btn.light,
 .btn-icon.light {
-	background: var(--bgl-blue-light);
-	color: var(--bgl-blue);
+  background: var(--bgl-blue-light);
+  color: var(--bgl-primary);
 }
 
 .btn.gray,
 .btn-icon.gray {
-	background: var(--bgl-gray-light);
-	color: var(--bgl-black);
+  background: var(--bgl-gray-light);
+  color: var(--bgl-black);
 }
 
 .btn.green,
 .btn-icon.green {
-	background: var(--bgl-green);
-	color: var(--bgl-white)
+  background: var(--bgl-green);
+  color: var(--bgl-white);
 }
 
 .btn.gray-light,
 .btn-icon.gray-light {
-	background: var(--bgl-gray-light);
-	color: var(--bgl-gray);
+  background: var(--bgl-gray-light);
+  color: var(--bgl-gray);
 }
 
 .btn.black,
 .btn-icon.black {
-	background: var(--bgl-black);
+  background: var(--bgl-black);
 }
 
 .btn.btn-txt {
-	color: var(--bgl-blue);
-	padding-left: var(--btn-padding);
-	padding-right: var(--btn-padding);
-	background: transparent;
+  color: var(--bgl-primary);
+  padding-left: var(--btn-padding);
+  padding-right: var(--btn-padding);
+  background: transparent;
 }
 
 .btn-icon.btn-txt {
-	color: var(--bgl-blue);
-	background: transparent;
+  color: var(--bgl-primary);
+  background: transparent;
 }
 
 .btn.btn-txt:hover,
 .btn-icon.btn-txt:hover {
-	filter: var(--bgl-active-filter);
+  filter: var(--bgl-active-filter);
 }
 
 .btn.btn-txt:active,
 .btn-icon.btn-txt:active {
-	background: var(--bgl-white);
-	filter: var(--bgl-hover-filter);
+  background: var(--bgl-white);
+  filter: var(--bgl-hover-filter);
 }
 
 .btn.btn-txt.red,
 .btn-icon.btn-txt.red {
-	color: var(--bgl-red);
+  color: var(--bgl-red);
 }
 
 .btn.btn-txt.light,
 .btn-icon.btn-txt.light {
-	color: var(--bgl-blue-tint);
+  color: var(--bgl-primary-tint);
 }
 
 .btn.btn-txt.black,
 .btn-icon.btn-txt.black {
-	color: var(--bgl-black);
+  color: var(--bgl-black);
 }
 
 .btn.btn-txt.gray,
 .btn-icon.btn-txt.gray {
-	color: var(--bgl-gray);
+  color: var(--bgl-gray);
 }
 
 .btn.thin {
-	padding-left: calc(var(--btn-padding) / 2);
-	padding-right: calc(var(--btn-padding) / 2);
+  padding-left: calc(var(--btn-padding) / 2);
+  padding-right: calc(var(--btn-padding) / 2);
 }
 
 .btn.round {
-	border-radius: calc(var(--btn-border-radius) * 2);
+  border-radius: calc(var(--btn-border-radius) * 2);
 }
 
 .btn-icon.thin {
-	height: calc(var(--btn-height) / 1.5);
-	width: calc(var(--btn-height) / 1.5);
-	line-height: 1;
+  height: calc(var(--btn-height) / 1.5);
+  width: calc(var(--btn-height) / 1.5);
+  line-height: 1;
 }
 
-[dir='rtl'] .icon-font {
-	transform: rotateY(180deg);
+[dir="rtl"] .icon-font {
+  transform: rotateY(180deg);
 }
 </style>