Feature/FOUR-18114:STORY Record List from Collections UI Update)

src/components/accordions.js

@@ -58,7 +58,7 @@ export default [
   },
   {
     name: 'Design',
-    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width'],
+    fields: ['color', 'bgcolor', 'variant', 'toggle', 'height', 'width', 'designerMode', 'bgcolormodern'],
     open: false,
   },
   {

src/components/inspector/collection-data-source.vue

@@ -73,7 +73,6 @@
     "variableStore",
     "dataSelectionOptions",
     "singleField"
-
   ];
   export default {
     components: {

src/components/inspector/collection-designer-mode.vue

@@ -0,0 +1,65 @@
+<template>
+    <div>
+      <div>
+        <label for="collectiondesigner">{{ $t("Table Style") }}</label>
+        <b-form-select
+          id="collectiondesigner"
+          v-model="designerOptions"
+          :options="designerListOptions"
+          data-cy="inspector-collection-designer-model"
+        />
+      </div>
+    </div>
+  </template>
+  <script>
+
+  import { cloneDeep } from "lodash";
+
+  const CONFIG_FIELDS = [
+    "designerOptions"
+  ];
+  export default {
+    props: ["value", "screenType"],
+    data() {
+      return {
+        fields: [],
+        designerOptions: "Classic",
+        designerListOptions: [
+        {
+          text: this.$t('Classic'),
+          value: 'Classic',
+        },
+        {
+          text: this.$t('Modern'),
+          value: 'Modern',
+        },
+      ],
+      };
+    },
+    computed: {
+      options() {
+        return Object.fromEntries(
+          CONFIG_FIELDS.map((field) => [field, this[field]])
+        );
+      }
+    },
+    watch: {
+      value: {
+        handler(value) {
+          if (!value) {
+            return;
+          }
+          CONFIG_FIELDS.forEach((field) => (this[field] = value[field]));
+        },
+        immediate: true
+      },
+      options: {
+        handler() {
+          this.$emit("input", this.options);
+          this.$root.$emit("style-mode", this.options.designerOptions);
+        },
+        deep: true
+      },
+    },
+  };
+  </script>

src/components/inspector/color-select-modern.vue

@@ -0,0 +1,101 @@
+<template>
+  <div class="form-group">
+    <div>
+      <b-button-toolbar>
+        <b-button-group size="lg">
+          <b-button
+            v-for="option in options"
+            :key="option.value"
+            size="sm"
+            variant="outline-light"
+            class="color-option"
+            :class="['bg-' + parsedColor(option.value)]"
+            :title="option.content"
+          >
+            <i
+              class="fas fa-check"
+              :class="[
+                option.value === value
+                  ? 'text-light'
+                  : 'text-' + parsedColor(option.value)
+              ]"
+              @click="selectColor(option.value)"
+            />
+          </b-button>
+        </b-button-group>
+      </b-button-toolbar>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  components: {},
+  props: {
+    /**
+     * The label for the color select
+     */
+    label: {},
+    /**
+     * The value of the color select. eg. `alert alert-success`
+     */
+    value: {},
+    /**
+     * The helper text for the color select (not visible yet)
+     */
+     helper: {},
+    /**
+     * The options for the color select
+     */
+    options: {},
+  },
+  data() {
+    return {
+      newColor: ""
+    };
+  },
+  computed: {
+    hasColor() {
+      return Boolean(this.value);
+    }
+  },
+  methods: {
+    emitChanges(value) {
+      this.$emit("input", value);
+      this.$emit("update-state");
+    },
+    checkColor() {
+      if (this.hasColor) {
+        this.emitChanges("");
+      }
+    },
+    selectColor(color) {
+      this.emitChanges(color);
+    },
+    parsedColor(color) {
+      return color.split("-")[1];
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.image-preview {
+  border: 1px solid #ced4da;
+  border-radius: 4px;
+  height: 4em;
+  text-align: center;
+  overflow: hidden;
+}
+.color-option {
+  left: -8px;
+  border-radius: 4px;
+  width: 48px;
+  height: 48px;
+  margin-right: 15px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  position: relative;
+  }
+</style>

src/components/inspector/index.js

@@ -2,7 +2,10 @@ export { default as CollectionSelectList } from "./collection-select-list.vue";
 export { default as CollectionRecordsList } from "./collection-records-list.vue";
 export { default as collectionDataSource } from "./collection-data-source.vue";
 export { default as CollectionDisplayMode } from "./collection-display-mode.vue";
+export { default as CollectionDesignerMode } from "./collection-designer-mode.vue";
 export { default as ColorSelect } from "./color-select.vue";
+export { default as ColorSelectRecord } from "./color-select.vue";
+export { default as ColorSelectModern } from "./color-select-modern.vue";
 export { default as ColumnSetup } from "./column-setup.vue";
 export { default as ContainerColumns } from "./container-columns.vue";
 export { default as DataMapping } from "./data-mapping.vue";