vueless 0.0.58 → 0.0.59

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vueless",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "license": "MIT",
   "description": "Vue Styleless Component Framework.",
   "homepage": "https://vueless.com",

package/ui.container-page/index.vue

@@ -244,9 +244,6 @@ onMounted(() => {
       &:deep(.vueless-dropdown-tag, .vueless-dropdown-link, .vueless-dropdown-button) {
         @apply w-full md:w-auto;
 
-        .dropdown-list {
-        }
-
         .dropdown-wrapper-list {
           @apply mb-2 md:mb-0;
         }

package/ui.loader/index.vue

@@ -48,40 +48,40 @@ const ellipseClasses = computed(() => [
 <style scoped lang="postcss">
 .vueless-internal-loader-ellipse {
   &:nth-child(1) {
-    @apply animate-[lds-ellipsis1_0.6s_infinite];
+    animation: lds-ellipsis1 0.6s infinite;
   }
 
   &:nth-child(4) {
-    @apply animate-[lds-ellipsis3_0.6s_infinite];
+    animation: lds-ellipsis3 0.6s infinite;
   }
 
   &-sm {
     &:nth-child(2) {
-      @apply animate-[lds-ellipsis2-sm_0.6s_infinite];
+      animation: lds-ellipsis2-sm 0.6s infinite;
     }
 
     &:nth-child(3) {
-      @apply animate-[lds-ellipsis2-sm_0.6s_infinite];
+      animation: lds-ellipsis2-sm 0.6s infinite;
     }
   }
 
   &-md {
     &:nth-child(2) {
-      @apply animate-[lds-ellipsis2-md_0.6s_infinite];
+      animation: lds-ellipsis2-md 0.6s infinite;
     }
 
     &:nth-child(3) {
-      @apply animate-[lds-ellipsis2-md_0.6s_infinite];
+      animation: lds-ellipsis2-md 0.6s infinite;
     }
   }
 
   &-lg {
     &:nth-child(2) {
-      @apply animate-[lds-ellipsis2-lg_0.6s_infinite];
+      animation: lds-ellipsis2-lg 0.6s infinite;
     }
 
     &:nth-child(3) {
-      @apply animate-[lds-ellipsis2-lg_0.6s_infinite];
+      animation: lds-ellipsis2-lg 0.6s infinite;
     }
   }
 }

package/ui.loader-rendering/composables/attrs.composable.js

@@ -0,0 +1,20 @@
+import useUI from "../../composable.ui";
+
+import defaultConfig from "../configs/default.config";
+
+export function useAttrs(props) {
+  const { getAttrs, config } = useUI(defaultConfig, () => props.config);
+
+  const wrapperAttrs = getAttrs("wrapper");
+  const loaderAttrs = getAttrs("loader");
+  const rippleAttrs = getAttrs("ripple");
+  const rippleElementAttrs = getAttrs("rippleElement");
+
+  return {
+    wrapperAttrs,
+    loaderAttrs,
+    rippleAttrs,
+    rippleElementAttrs,
+    config,
+  };
+}

package/ui.loader-rendering/configs/default.config.js

@@ -0,0 +1,13 @@
+export default /*tw*/ {
+  wrapper: "",
+  loader: `
+    flex justify-center items-center fixed left-0 top-0 z-[9999] h-screen w-screen bg-gray-800 
+    transition-all duration-300"
+  `,
+  ripple: "relative h-40 w-40 ml-auto mr-auto",
+  rippleElement: "absolute opacity-100 rounded-full border-4 border-solid border-white",
+  transition: {
+    enterFromClass: "scale-110 transform",
+    leaveActiveClass: "scale-110 transform",
+  },
+};

package/ui.loader-rendering/constants/index.js

@@ -0,0 +1,5 @@
+/*
+  This const is needed to prevent the issue in script setup:
+ `defineProps` is referencing locally declared variables. (vue/valid-define-props)
+ */
+export const ULoaderRendering = "ULoaderRendering";

package/ui.loader-rendering/index.vue

@@ -1,21 +1,22 @@
 <template>
-  <transition name="loader">
-    <div v-if="showLoader" class="app-loader">
-      <div class="lds-ripple">
-        <div></div>
-        <div></div>
+  <Transition name="loader" v-bind="{ ...config.transition, ...wrapperAttrs }">
+    <div v-if="showLoader" v-bind="loaderAttrs">
+      <div v-bind="rippleAttrs">
+        <div v-bind="rippleElementAttrs" class="ripple-element" />
+        <div v-bind="rippleElementAttrs" class="ripple-element" />
       </div>
     </div>
-  </transition>
+  </Transition>
 </template>
 
 <script setup>
 import { computed } from "vue";
 
+import { useAttrs } from "./composables/attrs.composable";
 import useLoaderRendering from "./composables/useLoaderRendering";
 
 /* Should be a string for correct web-types gen */
-defineOptions({ name: "ULoaderRendering" });
+defineOptions({ name: "ULoaderRendering", inheritAttrs: false });
 
 const props = defineProps({
   loading: {
@@ -24,6 +25,7 @@ const props = defineProps({
   },
 });
 
+const { wrapperAttrs, loaderAttrs, rippleAttrs, rippleElementAttrs, config } = useAttrs(props);
 const { isRenderingPage } = useLoaderRendering();
 
 const showLoader = computed(() => {
@@ -32,40 +34,29 @@ const showLoader = computed(() => {
 </script>
 
 <style lang="postcss" scoped>
-.app-loader {
-  @apply flex justify-center items-center;
-  @apply fixed left-0 top-0 z-[9999] h-screen w-screen;
-  @apply bg-gray-800;
-  @apply transition-all duration-300;
+.ripple-element {
+  animation: ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
 
-  .lds-ripple {
-    @apply relative h-40 w-40;
-    @apply ml-auto mr-auto;
-
-    div {
-      @apply absolute opacity-100;
-      @apply rounded-full border-4 border-solid border-white;
-      animation: lds-ripple 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
-
-      &:nth-child(2) {
-        animation-delay: -0.5s;
-      }
-    }
+  &:nth-child(2) {
+    animation-delay: -0.5s;
   }
+}
 
-  @keyframes lds-ripple {
-    0% {
-      @apply left-20 top-20 h-0 w-0 opacity-100;
-    }
-
-    100% {
-      @apply left-0 top-0 h-40 w-40 opacity-0;
-    }
+@keyframes ripple {
+  0% {
+    left: 5rem;
+    top: 5rem;
+    height: 0px;
+    width: 0px;
+    opacity: 1;
   }
-}
 
-.loader-enter-from .loader-container-loader,
-.loader-leave-active .loader-container-loader {
-  @apply scale-110 transform;
+  100% {
+    left: 0px;
+    top: 0px;
+    height: 10rem;
+    width: 10rem;
+    opacity: 0;
+  }
 }
 </style>

package/web-types.json

@@ -1,7 +1,7 @@
 {
   "framework": "vue",
   "name": "vueless",
-  "version": "0.0.58",
+  "version": "0.0.59",
   "contributions": {
     "html": {
       "description-markup": "markdown",