edvoyui-component-library-test-flight 0.0.21 → 0.0.23

package/src/components/loader/EUICubeLoader.vue

@@ -0,0 +1,237 @@
+<template>
+    <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
+        <div class="min-h-16 relative">
+            <div class="cube">
+                <div class="sides">
+                    <div class="top"></div>
+                    <div class="right"></div>
+                    <div class="bottom"></div>
+                    <div class="left"></div>
+                    <div class="front"></div>
+                    <div class="back"></div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+:root {
+  --cube-side: 2.75rem;
+  --cube-side-half: calc(var(--cube-side) / 2);
+}
+
+ @keyframes rotate {
+	 0% {
+		 transform: rotateX(-37.5deg) rotateY(45deg);
+	}
+	 50% {
+		 transform: rotateX(-37.5deg) rotateY(405deg);
+	}
+	 100% {
+		 transform: rotateX(-37.5deg) rotateY(405deg);
+	}
+}
+
+ .cube, .cube * {
+   @apply size-[2.75rem] absolute top-1 left-[-0.4rem];
+}
+ .sides {
+	 animation: rotate 3s ease infinite;
+	 animation-delay: 0.8s;
+	 transform-style: preserve-3d;
+	 transform: rotateX(-37.5deg) rotateY(45deg);
+}
+ .cube .sides * {
+     @apply box-border bg-violet-600 border border-solid border-white;
+}
+ .cube .sides .top {
+	 animation: top-animation 3s ease infinite;
+	 animation-delay: 0ms;
+	 transform: rotateX(90deg) translateZ(var(--cube-side));
+	 animation-fill-mode: forwards;
+	 transform-origin: 50% 50%;
+}
+
+ @keyframes top-animation {
+	 0% {
+		 opacity: 1;
+		 transform: rotateX(90deg) translateZ(var(--cube-side));
+	}
+	 20% {
+		 opacity: 1;
+		 transform: rotateX(90deg) translateZ(var(--cube-side-half));
+	}
+	 70% {
+		 opacity: 1;
+		 transform: rotateX(90deg) translateZ(var(--cube-side-half));
+	}
+	 90% {
+		 opacity: 1;
+		 transform: rotateX(90deg) translateZ(var(--cube-side));
+	}
+	 100% {
+		 opacity: 1;
+		 transform: rotateX(90deg) translateZ(var(--cube-side));
+	}
+}
+
+ .cube .sides .bottom {
+	 animation: bottom-animation 3s ease infinite;
+	 animation-delay: 0ms;
+	 transform: rotateX(-90deg) translateZ(var(--cube-side));
+	 animation-fill-mode: forwards;
+	 transform-origin: 50% 50%;
+}
+
+ @keyframes bottom-animation {
+	 0% {
+		 opacity: 1;
+		 transform: rotateX(-90deg) translateZ(var(--cube-side));
+	}
+	 20% {
+		 opacity: 1;
+		 transform: rotateX(-90deg) translateZ(var(--cube-side-half));
+	}
+	 70% {
+		 opacity: 1;
+		 transform: rotateX(-90deg) translateZ(var(--cube-side-half));
+	}
+	 90% {
+		 opacity: 1;
+		 transform: rotateX(-90deg) translateZ(var(--cube-side));
+	}
+	 100% {
+		 opacity: 1;
+		 transform: rotateX(-90deg) translateZ(var(--cube-side));
+	}
+}
+
+ .cube .sides .front {
+	 animation: front-animation 3s ease infinite;
+	 animation-delay: 100ms;
+	 transform: rotateY(0deg) translateZ(var(--cube-side));
+	 animation-fill-mode: forwards;
+	 transform-origin: 50% 50%;
+}
+
+ @keyframes front-animation {
+	 0% {
+		 opacity: 1;
+		 transform: rotateY(0deg) translateZ(var(--cube-side));
+	}
+	 20% {
+		 opacity: 1;
+		 transform: rotateY(0deg) translateZ(var(--cube-side-half));
+	}
+	 70% {
+		 opacity: 1;
+		 transform: rotateY(0deg) translateZ(var(--cube-side-half));
+	}
+	 90% {
+		 opacity: 1;
+		 transform: rotateY(0deg) translateZ(var(--cube-side));
+	}
+	 100% {
+		 opacity: 1;
+		 transform: rotateY(0deg) translateZ(var(--cube-side));
+	}
+}
+
+ .cube .sides .back {
+	 animation: back-animation 3s ease infinite;
+	 animation-delay: 100ms;
+	 transform: rotateY(-180deg) translateZ(var(--cube-side));
+	 animation-fill-mode: forwards;
+	 transform-origin: 50% 50%;
+}
+
+ @keyframes back-animation {
+	 0% {
+		 opacity: 1;
+		 transform: rotateY(-180deg) translateZ(var(--cube-side));
+	}
+	 20% {
+		 opacity: 1;
+		 transform: rotateY(-180deg) translateZ(var(--cube-side-half));
+	}
+	 70% {
+		 opacity: 1;
+		 transform: rotateY(-180deg) translateZ(var(--cube-side-half));
+	}
+	 90% {
+		 opacity: 1;
+		 transform: rotateY(-180deg) translateZ(var(--cube-side));
+	}
+	 100% {
+		 opacity: 1;
+		 transform: rotateY(-180deg) translateZ(var(--cube-side));
+	}
+}
+
+.cube .sides .left {
+  animation: left-animation 3s ease infinite;
+  animation-delay: 100ms;
+  transform: rotateY(-90deg) translateZ(var(--cube-side));
+  animation-fill-mode: forwards;
+  transform-origin: 50% 50%;
+}
+
+@keyframes left-animation {
+  0% {
+      opacity: 1;
+      transform: rotateY(-90deg) translateZ(var(--cube-side));
+  }
+  20% {
+      opacity: 1;
+      transform: rotateY(-90deg) translateZ(var(--cube-side-half));
+  }
+  70% {
+      opacity: 1;
+      transform: rotateY(-90deg) translateZ(var(--cube-side-half));
+  }
+  90% {
+      opacity: 1;
+      transform: rotateY(-90deg) translateZ(var(--cube-side));
+  }
+  100% {
+      opacity: 1;
+      transform: rotateY(-90deg) translateZ(var(--cube-side));
+  }
+}
+
+.cube .sides .right {
+  animation: right-animation 3s ease infinite;
+  animation-delay: 100ms;
+  transform: rotateY(90deg) translateZ(var(--cube-side));
+  animation-fill-mode: forwards;
+  transform-origin: 50% 50%;
+}
+
+@keyframes right-animation {
+  0% {
+      opacity: 1;
+      transform: rotateY(90deg) translateZ(var(--cube-side));
+  }
+  20% {
+      opacity: 1;
+      transform: rotateY(90deg) translateZ(var(--cube-side-half));
+  }
+  70% {
+      opacity: 1;
+      transform: rotateY(90deg) translateZ(var(--cube-side-half));
+  }
+  90% {
+      opacity: 1;
+      transform: rotateY(90deg) translateZ(var(--cube-side));
+  }
+  100% {
+      opacity: 1;
+      transform: rotateY(90deg) translateZ(var(--cube-side));
+  }
+}
+</style>

package/src/components/loader/EUILoader.stories.ts

@@ -0,0 +1,99 @@
+import type { Meta, StoryObj } from "@storybook/vue3";
+import EUILoader from "./EUILoader.vue";
+import EUICubeLoader from "./EUICubeLoader.vue";
+import EUISquareLoader from "./EUISquareLoader.vue";
+import EUICircleLoader from "./EUICircleLoader.vue";
+
+const meta: Meta<typeof EUILoader> = {
+  title: "Example/Loaders",
+  component: EUILoader,
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof EUILoader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {},
+  render: (args) => ({
+    components: { EUILoader },
+    setup() {
+      return { args };
+    },
+    template: `<EUILoader />`,
+  }),
+  parameters: {
+    docs: {
+      description: {
+        story:
+          "Displaying three types of loaders: one component to use at a time <strong>&lt;EUICubeLoader/&gt;</strong>,  <strong>&lt;EUICircleLoader/&gt;</strong>,  <strong>&lt;EUISquareLoader/&gt;</strong>.",
+      },
+      source: {
+        code: `<template>
+  <EUICircleLoader />
+  <EUISquareLoader />
+  <EUICubeLoader />
+</template>`,
+      },
+    },
+  },
+};
+
+// Render functions are a framework specific feature
+export const CircleLoader: Story = {
+  render: (args) => ({
+    components: { EUICircleLoader },
+    setup() {
+      return { args };
+    },
+    template: "<EUICircleLoader />",
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+  <EUICircleLoader />
+</template>`,
+      },
+    },
+  },
+};
+
+export const SquareLoader: Story = {
+  render: (args) => ({
+    components: { EUISquareLoader },
+    setup() {
+      return { args };
+    },
+    template: `<EUISquareLoader />`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+  <EUISquareLoader />
+</template>`,
+      },
+    },
+  },
+};
+
+export const CubeLoader: Story = {
+  render: (args) => ({
+    components: { EUICubeLoader },
+    setup() {
+      return { args };
+    },
+    template: `<EUICubeLoader/>`,
+  }),
+  parameters: {
+    docs: {
+      source: {
+        code: `<template>
+  <EUICubeLoader />
+</template>`,
+      },
+    },
+  },
+};

package/src/components/loader/EUILoader.vue

@@ -0,0 +1,17 @@
+<<template>
+    <div class="grid grid-cols-3">
+        <EUISquareLoader />
+        <EUICircleLoader />
+        <EUICubeLoader />
+    </div>
+</template>
+
+<script setup lang="ts">
+import EUICircleLoader from './EUICircleLoader.vue';
+import EUICubeLoader from './EUICubeLoader.vue';
+import EUISquareLoader from './EUISquareLoader.vue';
+</script>
+
+<style scoped>
+
+</style>

package/src/components/loader/EUISquareLoader.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="flex flex-col items-center justify-center gap-4 size-72 mx-auto">
+        <div class="min-h-16 relative">
+            <div class="square-loader">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style lang="scss">
+:root {
+  --primary: #705CFF;
+  --primary-2: #705CFF60;
+  --primary-3: #705CFF30;
+}
+.square-loader {
+  --s: 20px;
+  --_d: calc(0.353*var(--s));
+  width: calc(var(--s) + var(--_d));
+  aspect-ratio: 1;
+  display: grid;
+    &:before,
+    &:after {
+        content: "";
+        grid-area: 1/1;
+        clip-path: polygon(var(--_d) 0,100% 0,100% calc(100% - var(--_d)),calc(100% - var(--_d)) 100%,0 100%,0 var(--_d));
+        background: conic-gradient(from -90deg at calc(100% - var(--_d)) var(--_d), var(--primary-3) 135deg, var(--primary) 0 270deg, var(--primary-2) 0);
+        animation: l6 2s infinite;
+    }
+
+    &:after {
+    animation-delay:-1s;
+    }
+}
+
+@keyframes l6{
+  0%  {transform:translate(0,0)}
+  25% {transform:translate(30px,0)}
+  50% {transform:translate(30px,30px)}
+  75% {transform:translate(0,30px)}
+  100%{transform:translate(0,0)}
+}
+</style>