added custom scrollbar and extended default props

DanielTerletzkiy · Dec 4, 2021 · ef1e54e · ef1e54e
1 parent 893419a
commit ef1e54e
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 30 deletions.
diff --git a/src/components/FunctionWrapper.vue b/src/components/FunctionWrapper.vue
@@ -1,5 +1,5 @@
 <template>
-  <component :is="root" :to="link" :class="[...this.classes, themeClass, ...classAttributes]" :style="stylesObject" @click="()=>$emit('click')"
+  <component :is="root" :to="link" :disabled="disabled" :class="[...this.classes, themeClass, ...classAttributes]" :style="stylesObject" @click="()=>$emit('click')"
        @mouseenter="$emit('mouseenter')" @mouseleave="$emit('mouseleave')">
     <slot></slot>
   </component>
@@ -18,6 +18,7 @@ export default {
         outlined: this.outlined,
         inlined: this.inlined,
         depressed: this.depressed,
+        disabled: this.disabled,
       }
     },
     root(){

diff --git a/src/components/code/CodeLine.vue b/src/components/code/CodeLine.vue
@@ -1,7 +1,7 @@
 <template>
   <d-function-wrapper :classes="['d-code-line']" v-bind="{...$props, ...$attrs}">
     <d-card block max-width="600px" depressed class="d-code-line__card">
-      <d-row :elevation="this.$vuelize.theme.dark ? 'n1' : ''">
+      <d-row class="d-code-line__title" :elevation="this.$vuelize.theme.dark ? 'n1' : ''">
         <d-column>
           <d-card-subtitle color="primary">
             {{ label }}

diff --git a/src/components/code/CodeSnippet.vue b/src/components/code/CodeSnippet.vue
@@ -1,7 +1,7 @@
 <template>
   <d-function-wrapper :classes="['d-code-snippet']" v-bind="{...$props, ...$attrs}">
     <d-card block max-width="600px" depressed class="d-code-snippet__card">
-      <d-row :elevation="this.$vuelize.theme.dark ? 'n1' : ''">
+      <d-row class="d-code-snippet__title" :elevation="this.$vuelize.theme.dark ? 'n1' : ''">
         <d-column>
           <d-card-subtitle color="primary">
             {{ label }}
@@ -17,14 +17,16 @@
         </d-column>
       </d-row>
 
-      <d-row v-for="(line, l) in parsedCode" :key="l" class="d-code-snippet__row">
-        <d-column>
-          <d-card-subtitle class="d-code-snippet__row__number">{{ l + 1 }}</d-card-subtitle>
-        </d-column>
-        <d-column>
-          <d-card-subtitle class="d-code-snippet__row__code">{{ line }}</d-card-subtitle>
-        </d-column>
-      </d-row>
+      <d-card-content class="d-code-snippet__code">
+        <d-row v-for="(line, l) in parsedCode" :key="l" class="d-code-snippet__code__row">
+          <d-column>
+            <d-card-subtitle class="d-code-snippet__code__row__number">{{ l + 1 }}</d-card-subtitle>
+          </d-column>
+          <d-column>
+            <d-card-title class="d-code-snippet__code__row__code font-size-small">{{ line }}</d-card-title>
+          </d-column>
+        </d-row>
+      </d-card-content>
 
     </d-card>
   </d-function-wrapper>
@@ -45,12 +47,23 @@ export default {
 
   methods: {
     copy() {
-      navigator.clipboard.writeText(this.parsedCode.map((line)=> {return line + '\n' }).join(''));
+      navigator.clipboard.writeText(this.parsedCode.map((line) => {
+        return line + '\n'
+      }).join(''));
     },
     process() {
       const div = document.createElement('div');
       div.innerHTML = this.code.trim();
-      this.format(div, 0);
+      const html = this.format(div, 0);
+
+      let code = html.innerHTML.split('\n')
+      for (let i = 0; i < code.length; i++) {
+        if (!code[i].replace(/\s/g, '').length) {
+          console.log("white", i)
+          code.splice(i, 1)
+        }
+      }
+      this.parsedCode = code;
     },
     format(node, level) {
       let indentBefore = new Array(level++ + 1).join('  '),
@@ -65,7 +78,6 @@ export default {
           node.appendChild(textNode);
         }
       }
-      this.parsedCode = node.outerHTML.split('\n')
       return node;
     }
   },
@@ -82,30 +94,41 @@ export default {
 .d-code-snippet {
   max-width: inherit;
 
+  &__title {
+    position: sticky;
+    left: 0;
+  }
+
   &__card {
+    max-width: inherit;
     overflow: hidden;
   }
 
   &__code {
     max-width: inherit;
     overflow: auto;
-  }
+    padding: 0 !important;
 
-  &__row {
-    width: 100%;
+    &__row {
+      width: 100%;
 
-    &__number {
-      user-select: none;
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-      padding-left: 16px !important;
-      width: 40px !important;
-    }
+      &__number {
+        user-select: none;
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        margin-left: -6px !important;
+        width: 40px !important;
+        display: block !important;
+        text-align: right;
+      }
 
-    &__code {
-      padding-top: 0 !important;
-      padding-bottom: 0 !important;
-      font-family: monospace;
+      &__code {
+        padding-top: 0 !important;
+        padding-bottom: 0 !important;
+        min-height: auto !important;
+        font-family: monospace;
+        white-space: pre;
+      }
     }
   }
 }

diff --git a/src/index.js b/src/index.js
@@ -89,6 +89,7 @@ export default Vue => {
             rootDiv: {type: String, default: 'div'},
             classes: Array,
             color: String,
+            disabled: Boolean,
 
             rounded: {type: String, default: 'lg'},
             elevation: [String, Number, undefined],

diff --git a/src/styles/index.scss b/src/styles/index.scss
@@ -8,7 +8,7 @@
 body, html {
   width: 100%;
   min-height: 100%;
-  overflow: auto;
+  overflow: hidden;
   margin: 0;
 }
 
@@ -29,12 +29,17 @@ a {
   text-decoration: inherit;
   display: inherit;
 
-  &.d-btn{
+  &.d-btn {
     display: flex;
     width: min-content;
   }
 }
 
+.disabled {
+  pointer-events: none;
+  color: grey !important;
+}
+
 @import url('https://fonts.googleapis.com/css?family=Source%20Sans%20Pro:200,300,400,600,700');
 
 #app {
@@ -53,3 +58,47 @@ a {
     background: $dark_background;
   }
 }
+
+.theme--light {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: $gap * 2;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: $gap * 2;
+    transition-duration: 2s;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(0, 0, 0, 0.2);
+  }
+}
+
+.theme--dark {
+  &::-webkit-scrollbar {
+    width: 4px;
+    height: 4px;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.086);
+    border-radius: $gap * 2;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-color: rgba(82, 82, 87, 0.4);
+    border-radius: $gap * 2;
+    transition-duration: 2s;
+  }
+
+  &::-webkit-scrollbar-thumb:hover {
+    background: rgba(154, 154, 163, 0.35);
+  }
+}