tab component added

Author: brimmann

demo-app/src/App.vue

@@ -1,13 +1,25 @@
 <template>
-  <SketchyDiv class="pd" style="margin-bottom: 10px;">INsied</SketchyDiv>
-  <SketchyBtn label="Click" style="padding: 10px 5px; font-size: 18px; margin-bottom: 100px;"/>
+  <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 { SketchyDiv } from "codeglynuikit";
-import { SketchyBtn } from "codeglynuikit";
-import { SketchyHLine } from "codeglynuikit";
+import { SketchyDiv, SketchyBtn, SketchyHLine, SketchyTab, SketchyTabs } from "codeglynuikit";
+import { ref } from "vue";
+
+const tab = ref("focuz")
+
 </script>
 
 <style>

lib/src/components/sketchybtn/SketchyBtn.vue

@@ -1,5 +1,5 @@
 <script>
-import { computed, h, onMounted, ref, useCssModule } from "vue";
+import { computed, h, ref, useCssModule } from "vue";
 import SketchyDiv from "../sketchydiv/SketchyDiv.vue";
 
 export default {

lib/src/components/sketchytab/SketchyTab.vue

@@ -0,0 +1,90 @@
+<script>
+import { computed, h, inject, onMounted, onUpdated, ref, useCssModule, watch } from 'vue'
+import SketchyDiv from "../sketchydiv/SketchyDiv.vue";
+
+export default {
+  name: 'SketchyTab',
+
+  props: {
+    label: String,
+    name: String
+  },
+
+  setup(props, {}) {
+    const $tabs = inject('_sketchy_tabs_')
+    const defaultWdith = 2
+    const hoverDist = 6
+    const activationDist = 10
+    const style = useCssModule()
+    const classes = computed(() => {
+      let updatedClasses
+      if (props.class) {
+        updatedClasses = `${style.container}` + ' ' + props.class
+      } else {
+        updatedClasses = `${style.container}`
+      }
+      return updatedClasses
+    })
+    const isActive = ref($tabs.currentModel.value === props.name)
+
+    watch($tabs.currentModel, () => {
+      isActive.value = $tabs.currentModel.value === props.name
+      calculateWidthNormal()
+    })
+    const nodeProps = ref({
+      options: {
+        seed: 9,
+        strokeWidth: defaultWdith
+      },
+      class: classes.value,
+      onmouseenter: hoverCallback,
+      onmouseleave: unhoverCallback,
+      onClick
+    })
+
+    function calculateWidthHover() {
+      if (isActive.value) {
+        nodeProps.value.options.strokeWidth = hoverDist + activationDist
+      } else {
+        nodeProps.value.options.strokeWidth = hoverDist
+      }
+    }
+
+    function calculateWidthNormal() {
+      if (isActive.value) {
+        nodeProps.value.options.strokeWidth = activationDist
+      } else {
+        nodeProps.value.options.strokeWidth = defaultWdith
+      }
+    }
+    function onClick(e) {
+      $tabs.updateModel(props.name)
+    }
+    function hoverCallback() {
+
+      calculateWidthHover()
+    }
+    function unhoverCallback() {
+      calculateWidthNormal()
+    }
+
+    onMounted(() => {
+      isActive.value = $tabs.currentModel.value === props.name
+      calculateWidthNormal()
+    })
+
+    onUpdated(() => {})
+
+    return () => h(SketchyDiv, nodeProps.value, { default: () => props.label })
+  }
+}
+</script>
+
+<style module>
+.container {
+  text-align: center;
+  padding: 10px 30px;
+  cursor: pointer;
+  user-select: none;
+}
+</style>

lib/src/components/sketchytab/SketchyTabs.vue

@@ -0,0 +1,69 @@
+<script>
+import {
+  computed,
+  h,
+  onMounted,
+  onUpdated,
+  provide,
+  ref,
+  useCssModule,
+} from "vue";
+import SketchyDiv from "../sketchydiv/SketchyDiv.vue";
+
+export default {
+  name: "SketchyTabs",
+
+  props: {
+    modelValue: String,
+  },
+
+  setup(props, { slots, emit }) {
+    const currentModel = computed(() => props.modelValue);
+    const $tabs = {
+      currentModel,
+      updateModel,
+    };
+    provide("_sketchy_tabs_", $tabs);
+    const divRef = ref(null);
+    const style = useCssModule();
+    const classes = computed(() => {
+      let updatedClasses;
+      if (props.class) {
+        updatedClasses = `${style.container}` + " " + props.class;
+      } else {
+        updatedClasses = `${style.container}`;
+      }
+      return updatedClasses;
+    });
+
+    function updateModel(name) {
+      emit("update:modelValue", name);
+    }
+
+    onMounted(() => {});
+
+    onUpdated(() => {});
+
+    return () => {
+      return h(
+        SketchyDiv,
+        {
+          class: classes.value,
+          ref: divRef,
+        },
+        {
+          default: () => (slots.default ? slots.default() : []),
+        }
+      );
+    };
+  },
+};
+</script>
+
+<style module>
+.container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>

lib/src/index.js

@@ -1,5 +1,7 @@
 import SketchyDiv from "./components/sketchydiv/SketchyDiv.vue";
 import SketchyBtn from "./components/sketchybtn/SketchyBtn.vue";
 import SketchyHLine from "./components/sketchyhline/SketchyHLine.vue";
+import SketchyTabs from "./components/sketchytab/SketchyTabs.vue"
+import SketchyTab from "./components/sketchytab/SketchyTab.vue"
 
-export { SketchyDiv, SketchyBtn, SketchyHLine };
+export { SketchyDiv, SketchyBtn, SketchyHLine, SketchyTabs, SketchyTab };