nuxt-glorious 2.0.0-develop-43 → 2.0.0-develop-45

package/dist/module.json

@@ -1,5 +1,5 @@
 {
   "name": "nuxt-glorious",
   "configKey": "glorious",
-  "version": "2.0.0-develop-43"
+  "version": "2.0.0-develop-45"
 }

package/dist/module.mjs

@@ -76,6 +76,11 @@ const module = defineNuxtModule({
       name: "g-auth",
       path: resolver.resolve("./runtime/middlewares/Auth")
     });
+    addRouteMiddleware({
+      name: "g-load-color",
+      path: resolver.resolve("./runtime/middlewares/LoadColor"),
+      global: true
+    });
   }
 });
 

package/dist/runtime/components/Icon.vue

@@ -9,11 +9,14 @@ interface iconPropInterface {
   strokeWidth?: number
 }
 
-const props: any = withDefaults(defineProps<iconPropInterface>(), {
-  size: 20,
-  color: '#000',
-  strokeWidth: 3,
-})
+const props: iconPropInterface = withDefaults(
+  defineProps<iconPropInterface>(),
+  {
+    size: 20,
+    color: '#000',
+    strokeWidth: 3,
+  }
+)
 
 const isHover = ref(false)
 const icon = ref('')
@@ -38,11 +41,10 @@ const computeSize = (size: number | string): number => {
   return result
 }
 const computeProps = (icon: any) => {
-  const size = computeSize(props.size)
+  const size = computeSize(<number>props.size)
   const color = props.color
-  const strokeWidth = props.stroke
+  const strokeWidth = props.strokeWidth
   const stroke = props.color
-
   return icon
     .replace(
       /(?<!stroke-)width="(\d+)"/g,
@@ -72,7 +74,7 @@ const mouseover = () => {
 const mouseleave = () => {
   isHover.value = false
   const color = props.color
-  changeColorIcon(color)
+  changeColorIcon(<string>color)
 }
 const getIcon = async () => {
   try {
@@ -115,10 +117,12 @@ watch(
 </script>
 
 <template>
-  <div
-    class="w-max h-max g-icon"
-    @mouseover="mouseover"
-    @mouseleave="mouseleave"
-    v-html="icon"
-  />
+  <ClientOnly>
+    <div
+      class="w-max h-max g-icon"
+      @mouseover="mouseover"
+      @mouseleave="mouseleave"
+      v-html="icon"
+    />
+  </ClientOnly>
 </template>

package/dist/runtime/middlewares/LoadColor.mjs

@@ -1,6 +1,22 @@
 import { defineNuxtRouteMiddleware, useNuxtApp } from "#imports";
 import { GloriousStore } from "../stores/GloriousStore.mjs";
+import colors from "tailwindcss/colors";
 export default defineNuxtRouteMiddleware(() => {
   const nuxtApp = useNuxtApp();
   const gs = GloriousStore();
+  nuxtApp.hook("app:mounted", () => {
+    const styles = getComputedStyle(document.documentElement);
+    let colorVars = {};
+    for (let i = 0; i < styles.length; i++) {
+      const name = styles[i];
+      if (name.startsWith("--color-")) {
+        colorVars[name] = styles.getPropertyValue(name).trim();
+      }
+    }
+    gs.ui.colors = {
+      tailwind: colors,
+      dom: colorVars
+    };
+    console.log(gs.ui.colors);
+  });
 });

package/package.json

@@ -1,8 +1,11 @@
 {
-  "version": "2.0.0-develop-43",
+  "version": "2.0.0-develop-45",
   "name": "nuxt-glorious",
   "description": "This package provides many things needed by a project, including server requests and authentication, SEO and other requirements of a project.",
-  "repository": "sajadhzj/nuxt-glorious",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sajadhzj/nuxt-glorious.git"
+  },
   "author": "sajad hossein zadeh (https://github.com/sajadhzj)",
   "license": "MIT",
   "type": "module",