@bagelink/vue 0.0.823 → 0.0.825

package/dist/components/layout/Skeleton.vue.d.ts

@@ -10,11 +10,13 @@ declare const __VLS_component: import('vue').DefineComponent<{
     count?: number;
     height?: string;
     width?: string;
+    round?: boolean;
     borderRadius?: string;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{
     count?: number;
     height?: string;
     width?: string;
+    round?: boolean;
     borderRadius?: string;
 }> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;

package/dist/components/layout/Skeleton.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Skeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Skeleton.vue"],"names":[],"mappings":"AA6EA,iBAAS,cAAc;;yBAwCM,GAAG;;;WASlB,OAAO,IAA6B;EAEjD;AAaD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YArFZ,MAAM;aACL,MAAM;YACP,MAAM;mBACC,MAAM;;YAHb,MAAM;aACL,MAAM;YACP,MAAM;mBACC,MAAM;iGAwFpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
+{"version":3,"file":"Skeleton.vue.d.ts","sourceRoot":"","sources":["../../../src/components/layout/Skeleton.vue"],"names":[],"mappings":"AAmFA,iBAAS,cAAc;;yBA0CM,GAAG;;;WASlB,OAAO,IAA6B;EAEjD;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;YA1FZ,MAAM;aACL,MAAM;YACP,MAAM;YACN,OAAO;mBACA,MAAM;;YAJb,MAAM;aACL,MAAM;YACP,MAAM;YACN,OAAO;mBACA,MAAM;iGA4FpB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAWpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}

package/dist/index.cjs

@@ -52772,6 +52772,7 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
     count: { default: 1 },
     height: { default: "50px" },
     width: { default: "auto" },
+    round: { type: Boolean, default: false },
     borderRadius: { default: "var(--skeleton-radius)" }
   },
   setup(__props) {
@@ -52783,15 +52784,15 @@ const _sfc_main$k = /* @__PURE__ */ vue.defineComponent({
             vue.renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])) : (vue.openBlock(), vue.createElementBlock("div", {
             key: 1,
-            class: "skeleton",
+            class: vue.normalizeClass(["skeleton", { round: _ctx.round }]),
             style: vue.normalizeStyle({ height: _ctx.height, width: _ctx.width, borderRadius: _ctx.borderRadius })
-          }, null, 4))
+          }, null, 6))
         ], 64);
       }), 128);
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-a06bec19"]]);
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-34172009"]]);
 const _hoisted_1$e = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];

package/dist/index.mjs

@@ -52770,6 +52770,7 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
     count: { default: 1 },
     height: { default: "50px" },
     width: { default: "auto" },
+    round: { type: Boolean, default: false },
     borderRadius: { default: "var(--skeleton-radius)" }
   },
   setup(__props) {
@@ -52781,15 +52782,15 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
             renderSlot(_ctx.$slots, "default", {}, void 0, true)
           ])) : (openBlock(), createElementBlock("div", {
             key: 1,
-            class: "skeleton",
+            class: normalizeClass(["skeleton", { round: _ctx.round }]),
             style: normalizeStyle({ height: _ctx.height, width: _ctx.width, borderRadius: _ctx.borderRadius })
-          }, null, 4))
+          }, null, 6))
         ], 64);
       }), 128);
     };
   }
 });
-const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-a06bec19"]]);
+const Skeleton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-34172009"]]);
 const _hoisted_1$e = { class: "bgl_card tabs-top" };
 const _hoisted_2$8 = { class: "tabs grid auto-flow-columns fit-content" };
 const _hoisted_3$6 = ["onClick"];

package/dist/style.css

@@ -1814,27 +1814,27 @@ p {
   transform: translateX(-20px);
 }
 
-.skeleton-wrap[data-v-a06bec19] {
-	--skeleton-radius: 0.25rem;
-	--skeleton-bg: #f0f0f0;
-	--skeleton-margin: 1rem;
+.skeleton-wrap[data-v-34172009] {
 	margin-bottom: var(--skeleton-margin);
 }
-.skeleton[data-v-a06bec19] {
-	animation: skeleton-a06bec19 2s infinite;
+.skeleton[data-v-34172009] {
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
+    position: relative;
+    overflow: hidden;
 }
-@keyframes skeleton-a06bec19 {
-0% {
-		opacity: 0.5;
-}
-50% {
-		opacity: 1;
+.skeleton[data-v-34172009]::before {
+    content: "";
+    background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
+    animation: loadingAnimation-34172009 1s ease-in-out infinite;
+    position: absolute;
+    inset: 0px;
+    transform: translateX(-100%);
 }
-100% {
-		opacity: 0.5;
+@keyframes loadingAnimation-34172009 {
+to {
+        transform: translateX(100%);
 }
 }
 
@@ -13225,7 +13225,9 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --pill-btn-color: var(--bgl-white);
     --pill-btn-bg: var(--placeholder-color);
-    --bgl-selected: var(--bgl-gray-light)
+    --bgl-selected: var(--bgl-gray-light);
+    --skeleton-bg: #f0f0f0;
+    --skeleton-pulse: var(--bgl-bg);
 }
 /* TYPE */
 :root {
@@ -13244,6 +13246,8 @@ body:has([class*="slide-fade"])::-webkit-scrollbar {
     --btn-height: 40px;
     --pill-border-radius: 8px;
     --pill-height: 30px;
+    --skeleton-radius: 0.25rem;
+    --skeleton-margin: 1rem;
 }
 /* MISC */
 :root {

package/package.json

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

package/src/components/layout/Skeleton.vue

@@ -4,10 +4,12 @@ const {
 	height = '50px',
 	width = 'auto',
 	borderRadius = 'var(--skeleton-radius)',
+	round = false
 } = defineProps<{
 	count?: number
 	height?: string
 	width?: string
+	round?: boolean
 	borderRadius?: string
 }>()
 import { useSlots } from 'vue'
@@ -20,33 +22,35 @@ const slots = useSlots()
 		<div v-if="slots.default" class="skeleton-wrap">
 			<slot />
 		</div>
-		<div v-else class="skeleton" :style="{ height, width, borderRadius }" />
+		<div v-else class="skeleton" :style="{ height, width, borderRadius }" :class="{ round }" />
 	</template>
 </template>
 
 <style scoped>
 .skeleton-wrap {
-	--skeleton-radius: 0.25rem;
-	--skeleton-bg: #f0f0f0;
-	--skeleton-margin: 1rem;
 	margin-bottom: var(--skeleton-margin);
 }
+
 .skeleton {
-	animation: skeleton 2s infinite;
 	background-color: var(--skeleton-bg);
 	border-radius: var(--bg-card-radius);
 	margin-bottom: 0.25em;
+    position: relative;
+    overflow: hidden;
+}
+
+.skeleton::before {
+    content: "";
+    background: linear-gradient(90deg, transparent 20%, var(--skeleton-pulse) 50%, transparent 80%);
+    animation: loadingAnimation 1s ease-in-out infinite;
+    position: absolute;
+    inset: 0px;
+    transform: translateX(-100%);
 }
 
-@keyframes skeleton {
-	0% {
-		opacity: 0.5;
-	}
-	50% {
-		opacity: 1;
-	}
-	100% {
-		opacity: 0.5;
-	}
+@keyframes loadingAnimation {
+    to {
+        transform: translateX(100%);
+    }
 }
 </style>

package/src/styles/theme.css

@@ -36,7 +36,9 @@
     --bgl-scrollbar-thumb: var(--bgl-gray);
     --pill-btn-color: var(--bgl-white);
     --pill-btn-bg: var(--placeholder-color);
-    --bgl-selected: var(--bgl-gray-light)
+    --bgl-selected: var(--bgl-gray-light);
+    --skeleton-bg: #f0f0f0;
+    --skeleton-pulse: var(--bgl-bg);
 }
 
 /* TYPE */
@@ -57,6 +59,8 @@
     --btn-height: 40px;
     --pill-border-radius: 8px;
     --pill-height: 30px;
+    --skeleton-radius: 0.25rem;
+    --skeleton-margin: 1rem;
 }
 
 /* MISC */