Adds Vue FlexGrid component

agnosticui-react/src/__snapshots__/storybook.test.js.snap

@@ -696,21 +696,29 @@ exports[`Storyshots Grid Usage Examples 1`] = `
 Array [
   <section>
     <h1>
-      Basic Grid
+      FlexGrid
     </h1>
     <p>
       <i>
         xs
       </i>
-       = Extra Small. 
+       = Extra Small.
       <i>
         sm
       </i>
-       = Small. 
+       = Small.
+      <i>
+        md
+      </i>
+       = Medium.
       <i>
         lg
       </i>
        = Large.
+      <i>
+        xl
+      </i>
+       = Extra Large.
     </p>
     <p>
       The following breakpoints can be overriden by redefining in your stylesheet and omitting the 

agnosticui-react/src/stories/FlexGrid.stories.js

@@ -14,8 +14,14 @@ export default {
 export const UsageExamples = () => (
   <>
     <section>
-      <h1>Basic Grid</h1>
-      <p><i>xs</i> = Extra Small. <i>sm</i> = Small. <i>lg</i> = Large.</p>
+      <h1>FlexGrid</h1>
+      <p>
+        <i>xs</i> = Extra Small.
+        <i>sm</i> = Small.
+        <i>md</i> = Medium.
+        <i>lg</i> = Large.
+        <i>xl</i> = Extra Large.
+      </p>
       <p>The following breakpoints can be overriden by redefining in your stylesheet and omitting the <i>-default</i> part:</p>
       <pre>
         --agnosticui-default-sm-min: 576px;

agnosticui-vue/src/stories/FlexGrid/FlexCol.vue

@@ -0,0 +1,102 @@
+<template>
+  <component :is="tagName" :class="classNames">
+    <slot />
+  </component>
+</template>
+
+<script>
+import getClass from "./classNames";
+import { ColumnSizeType, ViewportSizeTypeProp } from "./types";
+
+const isInteger = (value) => {
+  return (
+    typeof value === "number" && isFinite(value) && Math.floor(value) === value
+  );
+};
+
+const classMap = {
+  xs: "col-xs",
+  sm: "col-sm",
+  md: "col-md",
+  lg: "col-lg",
+  xl: "col-xl",
+  xsOffset: "col-xs-offset",
+  smOffset: "col-sm-offset",
+  mdOffset: "col-md-offset",
+  lgOffset: "col-lg-offset",
+  xlOffset: "col-xl-offset",
+};
+
+export default {
+  name: "agnostic-flexcol",
+  props: {
+    /** xs - number of units when viewport is "extra small" */
+    xs: { type: ColumnSizeType },
+    /** sm - number of units when viewport is "small" */
+    sm: { type: ColumnSizeType },
+    /** md - number of units when viewport is "medium" */
+    md: { type: ColumnSizeType },
+    /** lg - number of units when viewport is "large" */
+    lg: { type: ColumnSizeType },
+    /** xl - number of units when viewport is "extra large" */
+    xl: { type: ColumnSizeType },
+    /** xsOffset - number of units to offset when viewport is "extra small" */
+    xsOffset: { type: Number },
+    /** smOffset - number of units to offset when viewport is "small" */
+    smOffset: { type: Number },
+    /** mdOffset - number of units to offset when viewport is "medium" */
+    mdOffset: { type: Number },
+    /** lgOffset - number of units to offset when viewport is "large" */
+    lgOffset: { type: Number },
+    /** xlOffset - number of units to offset when viewport is "extra large" */
+    xlOffset: { type: Number },
+    /** first - Forces a column to appear first */
+    first: ViewportSizeTypeProp,
+    /** last - Forces a column to appear last */
+    last: ViewportSizeTypeProp,
+    /** className - additional custom class to use */
+    customClasses: { type: String, default: "" },
+    /** tagName - tag to use defaults to div */
+    tagName: { type: String, default: "div" },
+  },
+  computed: {
+    classNames() {
+      const props = this.$props;
+      const extraClasses = [];
+
+      if (this.customClasses) {
+        extraClasses.push(this.customClasses);
+      }
+
+      if (this.first) {
+        extraClasses.push(getClass("first-" + this.first));
+      }
+
+      if (this.last) {
+        extraClasses.push(getClass("last-" + this.last));
+      }
+
+      // Loop ALL props (so we reject if prop wasn't passed in)
+      const extraKlasses = Object.keys(props)
+        .filter((key) => classMap[key])
+        .map((key) => {
+          const propValue = props[key];
+          // Reject since prop wasn't passed in w/a truthy value
+          if (!propValue) {
+            return false;
+          }
+          return getClass(
+            isInteger(propValue)
+              ? classMap[key] + "-" + propValue
+              : classMap[key]
+          );
+        })
+        // filter back out falsy (rejected propValue's from above)
+        .filter((key) => key)
+        .concat(extraClasses);
+
+      return extraKlasses;
+    },
+  },
+};
+</script>

agnosticui-vue/src/stories/FlexGrid/FlexGridExample.module.css

@@ -0,0 +1,10 @@
+.DemoCol {
+  background: #f9f9f9;
+  border: 1px solid #eee;
+  padding: 2rem 0;
+}
+
+.Field {
+  border: 1px solid #cccccc;
+  padding: 1.5rem 3rem;
+}

agnosticui-vue/src/stories/FlexGrid/FlexRow.vue

@@ -25,9 +25,7 @@ export default {
 
       for (let i = 0; i < rowKeys.length; ++i) {
         const key = rowKeys[i];
-        console.log("key: ", key);
         const value = this[key];
-        console.log("value: ", value);
         if (value) {
           modifiers.push(getClass(`${key}-${value}`));
         }

agnosticui-vue/src/stories/FlexGrid/types.js

@@ -1,9 +1,3 @@
-import PropTypes from 'prop-types'
-
-// export const ColumnSizeType = PropTypes.oneOfType([
-//   PropTypes.number,
-//   PropTypes.bool,
-// ])
 export const ColumnSizeType = [Number, Boolean];
 
 export const ViewportSizeType = ['xs', 'sm', 'md', 'lg', 'xl'];
@@ -12,5 +6,3 @@ export const ViewportSizeTypeProp = {
   type: String,
   validator: (v) => ViewportSizeType.includes(v),
 }
-
-// export const ViewportSizeType = PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])