Merge branch 'develop'

Author: brimmann

demo-app/package.json

@@ -9,7 +9,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "codeglynuikit": "^0.0.1",
+    "codeglynuikit": "file:../codeglynuikit-0.0.1.tgz",
     "vue": "^3.4.31"
   },
   "devDependencies": {

demo-app/src/App.vue

@@ -1,8 +1,29 @@
 <template>
-  <h1>Demo App is running</h1>
-  <MyTest/>
+  <SketchyDiv class="pd" style="margin-bottom: 10px">INsied</SketchyDiv>
+  <SketchyBtn
+    label="Click"
+    style="padding: 10px 5px; font-size: 18px; margin-bottom: 100px"
+  />
+  <SketchyHLine />
+  <div>NEXT</div>
+  <br />
+  <SketchyTabs v-model="tab">
+    <SketchyTab name="focuz" label="Focuz Time" />
+    <SketchyTab name="short" label="Short Break" />
+    <SketchyTab name="long" label="Long Break" />
+  </SketchyTabs>
 </template>
 
 <script setup>
-import { MyTest } from "codeglynuikit"
-</script>
+import { SketchyDiv, SketchyBtn, SketchyHLine, SketchyTab, SketchyTabs } from "codeglynuikit";
+import { ref } from "vue";
+
+const tab = ref("focuz")
+
+</script>
+
+<style>
+.pd {
+  padding: 80px;
+}
+</style>

demo-app/src/style.css

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

lib/.gitignore

@@ -7,6 +7,8 @@ yarn-error.log*
 pnpm-debug.log*
 lerna-debug.log*
 
+package-lock.json
+
 node_modules
 dist
 dist-ssr

lib/package-lock.json

@@ -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.json

@@ -0,0 +1,69 @@
+<script>
+import { computed, h, ref, useCssModule } from "vue";
+import SketchyDiv from "../sketchydiv/SketchyDiv.vue";
+
+export default {
+  props: {
+    label: String,
+    width: {
+      type: Number,
+      default: 150,
+    },
+    height: {
+      type: Number,
+      default: 40,
+    },
+    fontSize: {
+      type: Number,
+      default: 19,
+    },
+  },
+
+  setup(props) {
+    const style = useCssModule();
+    const classes = computed(() => {
+      let updatedClasses;
+      if (props.class) {
+        updatedClasses = `${style.container}` + " " + props.class;
+      } else {
+        updatedClasses = `${style.container}`;
+      }
+
+      return updatedClasses;
+    });
+    const finalClasses = ref(classes.value);
+    const nodeProps = ref({
+      options: {
+        seed: 9,
+        strokeWidth: 2,
+        hachureGap: 2,
+        hachureAngle: 0,
+      },
+      class: finalClasses,
+      onmouseenter: hoverCallback,
+      onmouseleave: unhoverCallback,
+    });
+
+    function hoverCallback() {
+      nodeProps.value.options.strokeWidth = 6;
+    }
+    function unhoverCallback() {
+      nodeProps.value.options.strokeWidth = 2;
+    }
+
+    return () => h(SketchyDiv, nodeProps.value, { default: () => props.label });
+  },
+};
+</script>
+
+<style module>
+.container {
+  text-align: center;
+  cursor: pointer;
+  user-select: none;
+}
+
+.btnhovered {
+  color: white;
+}
+</style>

lib/src/components/sketchybtn/SketchyBtn.vue

@@ -0,0 +1,137 @@
+<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();
+      });
+    });
+    onUpdated(() => {
+      nextTick(() => {
+        size.value.width = containerRef.value.clientWidth;
+        size.value.height = containerRef.value.clientHeight;
+        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>