add BIMDataColorSelector component (#181)

* add BIMDataColorSelector component

* don't declare validColors inside getRandomHexColor function

* add documentation for getRandomHexColor function

src/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue

@@ -0,0 +1,56 @@
+<template>
+  <BIMDataCard class="color-selector">
+    <template #content>
+      <div
+        class="color-selector__line"
+        v-for="(colorLine, i) of colorLines"
+        :key="`colorLine${i}`"
+      >
+        <div
+          class="color-selector__line__element"
+          v-for="([colorName, colorValue], j) of colorLine"
+          :class="{ selected: colorValue === modelValue }"
+          :key="`colorElement${j}ofColorLine${i}`"
+          :style="`background-color: #${colorValue}`"
+          :title="colorName"
+          @click="$emit('update:modelValue', colorValue)"
+        ></div>
+      </div>
+    </template>
+  </BIMDataCard>
+</template>
+
+<script>
+import { colors } from "./colors.js";
+import BIMDataCard from "../BIMDataCard/BIMDataCard.vue";
+
+const colorLines = Object.entries(colors).reduce((acc, cur, i) => {
+  if (i % 5 === 0) {
+    acc.push([cur]);
+  } else {
+    acc[acc.length - 1].push(cur);
+  }
+  return acc;
+}, []);
+
+export default {
+  components: {
+    BIMDataCard,
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: null,
+      validator: value => Object.values(colors).includes(value),
+    },
+  },
+  emits: ["update:modelValue"],
+  data() {
+    return {
+      colorLines,
+    };
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_BIMDataColorSelector.scss"></style>

src/BIMDataComponents/BIMDataColorSelector/_BIMDataColorSelector.scss

@@ -0,0 +1,15 @@
+.color-selector {
+  &__line {
+    display: flex;
+    &__element {
+      cursor: pointer;
+      height: 30px;
+      width: 30px;
+      margin: 4px;
+      border-radius: 3px;
+      &.selected {
+        border: solid 2px var(--color-primary);
+      }
+    }
+  }
+}

src/BIMDataComponents/BIMDataColorSelector/colors.js

@@ -0,0 +1,53 @@
+const colors = Object.freeze({
+  bisque: "ffe4c4",
+  orange: "ffa500",
+  coral: "ff7f50",
+  red: "ff3d1e",
+  maroon: "800000",
+  khaki: "f0e68c",
+  tan: "d2b48c",
+  peru: "cd853f",
+  sienna: "a0522d",
+  brown: "a52a2a",
+  greenyellow: "adff2f",
+  yellowgreen: "9acd32",
+  forestgreen: "00af50",
+  green: "008000",
+  darkgreen: "006400",
+  lightcyan: "e0ffff",
+  skyblue: "87ceeb",
+  steelblue: "4682b4",
+  blue: "0000ff",
+  darkblue: "00008b",
+  mistyrose: "ffe4e1",
+  hotpink: "ff69b4",
+  magenta: "ff00ff",
+  purple: "800080",
+  indigo: "4b0082",
+  whitesmoke: "f5f5f5",
+  silver: "c0c0c0",
+  darkgray: "a9a9a9",
+  grey: "7a7a7a",
+  black: "000000",
+});
+
+// Some colors are too bright to be selected randomnly, but in some cases user may want to have it.
+const tooBrightColors = [
+  "bisque",
+  "khaki",
+  "greenyellow",
+  "lightcyan",
+  "mistyrose",
+  "whitesmoke",
+];
+
+const validColors = Object.entries(colors).filter(
+  ([name]) => !tooBrightColors.includes(name)
+);
+function getRandomHexColor() {
+  const index = Math.floor(Math.random() * validColors.length);
+
+  return validColors[index][1];
+}
+
+export { colors, getRandomHexColor };

src/assets/scss/_BIMDataGlobal.scss

@@ -1,3 +1,5 @@
-*::after, *::before{
+*,
+*::after,
+*::before {
   box-sizing: border-box;
-}
+}

src/store.js

@@ -124,6 +124,14 @@ export default new Vuex.Store({
             "Checkboxes are used to enables users to pick multiple options from a group.",
           btn: "View checkbox",
         },
+        {
+          title: "ColorSelector",
+          img: require("./web/assets/img/icon-color_selector.svg"),
+          path: "colorselector",
+          text:
+            "Color Selector component allows the user to pick from a set of predefined swatches colors.",
+          btn: "View color selector",
+        },
         {
           title: "DropdownList",
           img: require("./web/assets/img/icon-dropdown.svg"),

src/web/router/router.js

@@ -23,6 +23,7 @@ import Variables from "../views/Guidelines/Variables/Variables.vue";
 import Buttons from "../views/Components/Buttons/Buttons.vue";
 import Card from "../views/Components/Card/Card.vue";
 import Checkbox from "../views/Components/Checkbox/Checkbox.vue";
+import ColorSelector from "../views/Components/ColorSelector/ColorSelector.vue";
 import DropdownMenu from "../views/Components/DropdownMenu/DropdownMenu.vue";
 import DropdownList from "../views/Components/DropdownList/DropdownList.vue";
 import FileIcon from "../views/Components/FileIcon/FileIcon.vue";
@@ -151,6 +152,11 @@ const routes = [
         name: "checkbox",
         component: Checkbox,
       },
+      {
+        path: "colorselector",
+        name: "colorselector",
+        component: ColorSelector,
+      },
       {
         path: "dropdownlist",
         name: "dropdownlist",

src/web/views/Components/ColorSelector/ColorSelector.vue

@@ -0,0 +1,119 @@
+<template>
+  <main class="article color-selector">
+    <div class="article-wrapper">
+      <BIMDataText component="h1" color="color-primary">
+        {{ $route.name }}
+      </BIMDataText>
+      <ComponentCode :componentTitle="$route.name" language="javascript">
+        <template #module>
+          <div class="setting-card-item">
+            <div
+              class="setting-card-item__color"
+              :style="{
+                'background-color': `#${color}`,
+              }"
+              @click="displayColorSelector = true"
+            ></div>
+            <BIMDataColorSelector
+              v-if="displayColorSelector"
+              v-clickaway="() => (displayColorSelector = false)"
+              class="setting-card-item__color-selector"
+              :modelValue="color"
+              @update:modelValue="updateColorSelector($event)"
+            />
+          </div>
+        </template>
+
+        <template #import>
+          import BIMDataColorSelector from
+          "@bimdata/design-system/dist/js/BIMDataComponents/BIMDataColorSelector.js"
+        </template>
+
+        <template #code>
+          <pre>
+            &lt;div class="setting-card-item"&gt;
+              &lt;div
+                class="setting-card-item__color"
+                :style="{
+                  'background-color': `#${color}`,
+                }"
+                @click="displayColorSelector = true"
+              &gt;&lt;/div&gt;
+              &lt;BIMDataColorSelector
+                v-if="displayColorSelector"
+                class="setting-card-item__color-selector"
+                :modelValue="color"
+                @update:modelValue="updateColorSelector($event)"
+              /&gt;
+            &lt;/div&gt;
+          </pre>
+        </template>
+      </ComponentCode>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Props:
+        </BIMDataText>
+        <BIMDataTable :columns="propsData[0]" :rows="propsData.slice(1)" />
+      </div>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Events:
+        </BIMDataText>
+        <BIMDataTable :columns="eventsData[0]" :rows="eventsData.slice(1)" />
+      </div>
+
+      <div class="m-t-12">
+        <BIMDataText component="h5" color="color-primary" margin="15px 0 10px">
+          Functions:
+        </BIMDataText>
+        <BIMDataTable
+          :columns="functionsData[0]"
+          :rows="functionsData.slice(1)"
+        />
+      </div>
+    </div>
+  </main>
+</template>
+
+<script>
+import eventsData from "./events-data.js";
+import functionsData from "./functions-data.js";
+import propsData from "./props-data.js";
+
+import clickaway from "../../../../BIMDataDirectives/click-away.js";
+
+import ComponentCode from "../../Elements/ComponentCode/ComponentCode.vue";
+
+import BIMDataTable from "../../../../BIMDataComponents/BIMDataTable/BIMDataTable.vue";
+import BIMDataText from "@/BIMDataComponents/BIMDataText/BIMDataText.vue";
+import BIMDataColorSelector from "@/BIMDataComponents/BIMDataColorSelector/BIMDataColorSelector.vue";
+
+export default {
+  components: {
+    BIMDataTable,
+    BIMDataText,
+    ComponentCode,
+    BIMDataColorSelector,
+  },
+  directives: { clickaway },
+  data() {
+    return {
+      displayColorSelector: false,
+      color: "c0c0c0",
+      propsData,
+      eventsData,
+      functionsData,
+    };
+  },
+  methods: {
+    updateColorSelector($event) {
+      console.log("update color", $event);
+      this.color = $event;
+    },
+  },
+};
+</script>
+
+<style scoped lang="scss" src="./_ColorSelector.scss"></style>

src/web/views/Components/ColorSelector/_ColorSelector.scss

@@ -0,0 +1,14 @@
+.setting-card-item {
+  position: relative;
+  &__color {
+    width: 20px;
+    height: 20px;
+    border-radius: 3px;
+    cursor: pointer;
+  }
+  &__color-selector {
+    position: absolute;
+    top: 26px;
+    z-index: 1;
+  }
+}

src/web/views/Components/ColorSelector/events-data.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+export default [
+  ["Event", "Payload"],
+  [
+    "update:modelValue",
+    "The value of the clicked color.",
+  ],
+];

src/web/views/Components/ColorSelector/functions-data.js

@@ -0,0 +1,8 @@
+/* eslint-disable */
+export default [
+  ["function name", "Description"],
+  [
+    "getRandomHexColor()",
+    "This function allows you to generate a random color from a list predefined by BIMData.",
+  ],
+];

src/web/views/Components/ColorSelector/props-data.js

@@ -0,0 +1,11 @@
+/* eslint-disable */
+export default [
+  ["Props", "Type", "Required", "Default value", "Description"],
+  [
+    "modelValue",
+    "String",
+    "",
+    "null",
+    "Use this prop to bind the clicked color value to the color preview div.",
+  ],
+];