sketchybtn component added

Author: brimmann

codeglynuikit-0.0.1.tgz

@@ -1,10 +1,13 @@
 <template>
-  <SketchyDiv class="pd">INsied</SketchyDiv>
+  <SketchyDiv class="pd" style="margin-bottom: 10px;">INsied</SketchyDiv>
+  <SketchyBtn label="Click" style="padding: 10px 5px; font-size: 18px;"/>
 </template>
 
 <script setup>
 import { SketchyDiv } from "codeglynuikit";
 // import { SketchyDiv } from '../../lib/src';
+import { SketchyBtn } from "codeglynuikit";
+// import SketchyBtn from "../../lib/src/components/sketchybtn/SketchyBtn.vue";
 </script>
 
 <style>

demo-app/src/App.vue

@@ -0,0 +1,69 @@
+<script>
+import { computed, h, onMounted, 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

@@ -7,6 +7,7 @@ import {
   onUpdated,
   ref,
   useCssModule,
+  watch,
 } from "vue";
 import rough from "roughjs";
 
@@ -66,6 +67,10 @@ export default {
       }
       return updatedClasses;
     });
+    watch(props, () => {
+      clearCanvas()
+      drawDiv()
+    })
 
     function drawDiv() {
       const rc = rough.canvas(canvasRef.value);

lib/src/components/sketchydiv/SketchyDiv.vue

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

lib/src/index.js

@@ -13,11 +13,12 @@ export default defineConfig({
       fileName: "codeglynuikit",
     },
     rollupOptions: {
-      external: ["vue", 'roughjs'],
+      external: ["vue", 'roughjs', 'codeglynuikit'],
       output: {
         globals: {
           vue: "Vue",
-          roughjs: "roughtjs"
+          roughjs: "roughtjs",
+          codeglynuikit: "codeglynuikit"
         },
       },
     },