changes from pr feedback - turn css vars into style binding, add more…

… css units, adjust regex, change code sample display
learningequality · Jan 17, 2023 · 31ba8ad · 31ba8ad
1 parent 7146ead
commit 31ba8ad
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 52 deletions.
diff --git a/docs/pages/kimg.vue b/docs/pages/kimg.vue
@@ -18,17 +18,20 @@
             <KImg
               :src="require('../assets/img_sample_for_kimg.png')"
               altText="Computers are run by bees"
-              :height="'250px'"
-              :width="225"
+              :height="'250.2px'"
+              :width="225.5"
+              :maxHeight="600"
+              :minWidth="25"
             />
           </DocsShow>
-
-          <pre><samp>
-            :src="require('../assets/img_sample_for_kimg.png')"
-            altText="Computers are run by bees"
-            :height="'250px'"
-            :width="225"
-          </samp></pre>
+          <DocsShowCode language="html">
+            <KImg
+              :src="require('../assets/img_sample_for_kimg.png')"
+              altText="Computers are run by bees"
+              :height="'250.2px'"
+              :width="225.5"
+            />
+          </DocsShowCode>
         </div>
       </div>
 
@@ -47,12 +50,14 @@
               />
             </DocsShow>
           </div>
-          <pre><samp>
-            :src="require('../assets/img_sample_for_kimg.png')"
-            isDecorative
-            :height="50"
-            :width="50"
-          </samp></pre>
+          <DocsShowCode language="html">
+            <KImg
+              :src="require('../assets/img_sample_for_kimg.png')"
+              isDecorative
+              :height="50"
+              :width="50"
+            />
+          </DocsShowCode>
         </div>
       </div>
 
@@ -65,10 +70,13 @@
             altText="Computers are run by bees"
           />
         </DocsShow>
-        <pre><samp>
-          :src="require('../assets/img_sample_for_kimg.png')"
-          altText="Computers are run by bees"
-        </samp></pre>
+        <DocsShowCode language="html">
+          <KImg
+            :src="require('../assets/img_sample_for_kimg.png')"
+            altText="Computers are run by bees"
+          />
+        </DocsShowCode>
+
       </div>
     </DocsPageSection>
   </DocsPageTemplate>
@@ -85,10 +93,6 @@
 
 <style lang="scss" scoped>
 
-  pre {
-    margin: 0;
-  }
-
   .img-example-1 {
     display: flex;
     margin-top: 20px;
@@ -111,3 +115,5 @@
 
 
 
+
+
diff --git a/docs/tableOfContents.js b/docs/tableOfContents.js
@@ -236,6 +236,7 @@ export default [
         path: '/kimg',
         title: 'KImg',
         isCode: true,
+        keywords: ['image', 'img'],
       }),
       new Page({
         path: '/klabeledicon',

diff --git a/lib/KImg.vue b/lib/KImg.vue
@@ -2,10 +2,9 @@
 
   <div>
     <img
-      id="kimg"
       :src="src"
       :alt="alternateText"
-      :style="cssVars"
+      :style="styleObject"
     >
     <slot></slot>
   </div>
@@ -82,6 +81,18 @@
         default: undefined,
       },
     },
+    data() {
+      return {
+        styleObject: {
+          height: this.imgHeight,
+          width: this.imgWidth,
+          maxHeight: this.imgMaxHeight,
+          minHeight: this.imgMinHeight,
+          maxWidth: this.imgMaxWidth,
+          minWidth: this.imgMinWidth,
+        },
+      };
+    },
     computed: {
       alternateText() {
         return this.isDecorative ? '' : this.altText;
@@ -104,16 +115,6 @@
       imgMinWidth() {
         return this.validateAndFormatUnits(this.minWidth);
       },
-      cssVars() {
-        return {
-          '--height': this.imgHeight,
-          '--width': this.imgWidth,
-          '--max-height': this.imgMaxHeight,
-          '--min-height': this.imgMinHeight,
-          '--max-width': this.imgMaxWidth,
-          '--min-width': this.imgMinWidth,
-        };
-      },
     },
     created() {
       if (!this.isDecorative && !this.altText) {
@@ -123,37 +124,38 @@
     methods: {
       validateAndFormatUnits(propValue) {
         if (propValue) {
-          if (Number.isInteger(propValue)) {
+          if (!isNaN(propValue)) {
             return `${propValue}px`;
           } else {
             // split numbers apart from units
-            const [, ...arr] = propValue.match(/(\d*)([\s\S]*)/);
-            const validUnits = ['px', 'em', 'rem', 'vh'];
+            const [, ...arr] = propValue.match(/(\d*\.?\d+)([a-zA-Z | %]*)/);
+            const validUnits = [
+              '%',
+              'cm',
+              'em',
+              'ex',
+              'ch',
+              'in',
+              'lh',
+              'mm',
+              'px',
+              'rem',
+              'rlh',
+              'vh',
+              'vw',
+            ];
 
             // if made up of valid numbers and valid units
             if (!isNaN(arr[0]) && validUnits.includes(arr[1])) {
               return propValue;
             }
           }
         }
-        return 'auto';
       },
     },
   };
 
 </script>
 
 
-<style scoped>
-
-  #kimg {
-    height: var(--height);
-    width: var(--width);
-    max-height: var(--max-height);
-    min-height: var(--min-height);
-    max-width: var(--max-width);
-    min-width: var(--min-width);
-  }
-
-</style>
-
+<style scoped></style>