cssInjectedByJsPlugin added

Now the styles are built within the component itself so there is no need to worry.

Author: brimmann

codeglynuikit-0.0.1.tgz

@@ -1,8 +1,7 @@
 <template>
-  <h1>Demo App is running</h1>
-  <MyTest/>
+  <SketchyDiv>INsied</SketchyDiv>
 </template>
 
 <script setup>
-import { MyTest } from "codeglynuikit"
-</script>
+import { SketchyDiv } from "codeglynuikit";
+</script>

demo-app/src/App.vue

@@ -11,5 +11,3 @@ body {
   padding: 2rem;
   text-align: center;
 }
-
-

demo-app/src/style.css

@@ -19,10 +19,15 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "roughjs": "^4.6.6",
     "vue": "^3.4.31"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.0.5",
-    "vite": "^5.3.4"
+    "vite": "^5.3.4",
+    "vite-plugin-css-injected-by-js": "^3.5.1"
+  },
+  "peerDependencies": {
+    "roughjs": "^4.6.6"
   }
 }

lib/package-lock.json

@@ -0,0 +1,142 @@
+<script>
+import {
+  computed,
+  h,
+  nextTick,
+  onMounted,
+  onUpdated,
+  ref,
+  useCssModule,
+  watch,
+} from "vue";
+import rough from "roughjs";
+
+export default {
+  props: {
+    class: String,
+    options: {
+      type: Object,
+      default: () => ({
+        seed: 4,
+        strokeWidth: 2,
+        fill: null,
+        roughness: null,
+        hachureGap: null,
+        fillStyle: null,
+        hachureAngle: null,
+      }),
+    },
+  },
+
+  setup(props, { slots }) {
+    const containerRef = ref(null);
+    const canvasRef = ref(null);
+    const style = useCssModule();
+    const size = ref({
+      width: null,
+      height: null,
+    });
+    const nodeProps = computed(() => ({
+      ref: containerRef,
+      class: classes.value,
+    }));
+
+    const options = computed(() => {
+      const temp = {
+        seed: props.options.seed,
+        strokeWidth: props.options.strokeWidth,
+        fill: props.options.fill,
+        roughness: props.options.roughness,
+        hachureGap: props.options.hachureGap,
+        fillStyle: props.options.fillStyle,
+        hachureAngle: props.options.hachureAngle,
+      };
+      const filterTemp = Object.fromEntries(
+        Object.entries(temp).filter(
+          ([_, value]) => value !== undefined && value !== null
+        )
+      );
+      return filterTemp;
+    });
+    const classes = computed(() => {
+      let updatedClasses;
+      if (props.class) {
+        updatedClasses = `${style.container}` + " " + props.class;
+      } else {
+        updatedClasses = `${style.container}`;
+      }
+      return updatedClasses;
+    });
+    watch(props, () => {
+      clearCanvas();
+      drawDiv();
+    });
+
+    function drawDiv() {
+      const rc = rough.canvas(canvasRef.value);
+      rc.rectangle(0, 0, size.value.width, size.value.height, options.value);
+    }
+    function clearCanvas() {
+      canvasRef.value
+        .getContext("2d")
+        .clearRect(0, 0, size.value.width, size.value.height);
+    }
+
+    onMounted(() => {
+      nextTick(() => {
+        size.value.width = containerRef.value.clientWidth;
+        size.value.height = containerRef.value.clientHeight;
+        drawDiv();
+
+        // This part automatically update the convas as it's external parent's size is updated
+        // const contResizeObserver = new ResizeObserver(() => {
+        //   if (containerRef.value) {
+        //     size.value.width = containerRef.value.clientWidth;
+        //     size.value.height = containerRef.value.clientHeight;
+        //     clearCanvas();
+        //     drawDiv();
+        //   }
+        // });
+        // contResizeObserver.observe(containerRef.value);
+      });
+    });
+    onUpdated(() => {
+      nextTick(() => {
+        clearCanvas();
+        drawDiv();
+      });
+    });
+
+    return () => {
+      const child = [
+        h("canvas", {
+          ref: canvasRef,
+          width: size.value.width,
+          height: size.value.height,
+          class: style.boxCanvas,
+        }),
+        slots.default ? slots.default() : () => [],
+      ];
+
+      return h("div", nodeProps.value, { default: () => child });
+    };
+  },
+};
+</script>
+
+<style module>
+.container {
+  position: relative;
+  /* min-width: 100%;
+  min-height: 100%; */
+}
+
+.boxCanvas {
+  position: absolute;
+  z-index: -10;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+</style>

lib/package.json

@@ -1,3 +1,4 @@
-import MyTest from './components/test/MyTest.js'
+// import MyTest from './components/test/MyTest.js'
+import SketchyDiv from './components/sketchydiv/SketchyDiv.vue'
 
-export { MyTest }
+export { SketchyDiv }

lib/src/components/sketchydiv/SketchyDiv.vue

@@ -1,23 +1,26 @@
 import { defineConfig } from "vite";
 import vue from "@vitejs/plugin-vue";
 import { resolve } from "path";
+import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js";
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [vue()],
+  plugins: [vue(), cssInjectedByJsPlugin()],
   build: {
     lib: {
       entry: resolve(__dirname, "src/index.js"),
       name: "codeglynuikit",
       fileName: "codeglynuikit",
     },
     rollupOptions: {
-      external: ["vue"],
+      external: ["vue", 'roughjs'],
       output: {
         globals: {
           vue: "Vue",
+          roughjs: "roughtjs"
         },
       },
     },
+    cssCodeSplit: false
   },
 });