From 706a2cdaddb869bb97085da40b692d5de575872a Mon Sep 17 00:00:00 2001
From: "AzureAD\\OlaBarecka" <o.barecka@gmail.com>
Date: Sun, 13 Aug 2023 09:47:10 +0100
Subject: [PATCH] feat: structured list components in progress

---
 .../CvStructuredList/CvStructuredList.vue     | 48 ++++++++++++++--
 .../CvStructuredList/CvStructuredListData.vue | 20 +++++--
 .../CvStructuredListHeading.vue               | 12 ++--
 .../CvStructuredList/CvStructuredListItem.vue | 49 +++++++++++++++--
 .../CvStructuredListItemSelectable.vue        | 55 +++++++++++++++++--
 .../CvStructuredListItemStandard.vue          | 12 ++--
 6 files changed, 160 insertions(+), 36 deletions(-)

diff --git a/src/components/CvStructuredList/CvStructuredList.vue b/src/components/CvStructuredList/CvStructuredList.vue
index 97f9de962..10add8a8c 100644
--- a/src/components/CvStructuredList/CvStructuredList.vue
+++ b/src/components/CvStructuredList/CvStructuredList.vue
@@ -1,11 +1,47 @@
 <template>
-  <div class=""></div>
+  <div
+    :class="[
+      `${carbonPrefix}--structured-list`,
+      {
+        [`${carbonPrefix}--structured-list--selection`]: selectable,
+        [`${carbonPrefix}--structured-list--condensed`]: condensed,
+      },
+    ]"
+    :data-structured-list="selectable"
+  >
+    <div :class="`${carbonPrefix}--structured-list-thead`">
+      <div
+        :class="`${carbonPrefix}--structured-list-row ${carbonPrefix}--structured-list-row--header-row`"
+      >
+        <slot name="headings"></slot>
+        <div
+          v-if="selectable"
+          :class="`${carbonPrefix}--structured-list-th`"
+        ></div>
+      </div>
+    </div>
+    <div :class="`${carbonPrefix}--structured-list-tbody`">
+      <slot name="items"></slot>
+    </div>
+  </div>
 </template>
 
 <script setup>
-//
-</script>
+import { defineEmits, provide } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+const props = defineProps({
+  /**
+   * makes cv-structured-list-item selectable
+   */
+  selectable: Boolean,
+  condensed: Boolean,
+});
 
-<style lang="scss" scoped>
-//
-</style>
+const emit = defineEmits(['change']);
+
+provide('on', val => {
+  emit('change', val);
+});
+provide('selectable', props.selectable);
+</script>
diff --git a/src/components/CvStructuredList/CvStructuredListData.vue b/src/components/CvStructuredList/CvStructuredListData.vue
index 97f9de962..6dc54fe67 100644
--- a/src/components/CvStructuredList/CvStructuredListData.vue
+++ b/src/components/CvStructuredList/CvStructuredListData.vue
@@ -1,11 +1,19 @@
 <template>
-  <div class=""></div>
+  <div
+    :class="[
+      `cv-structured-list-data ${carbonPrefix}--structured-list-td`,
+      {
+        [`${carbonPrefix}--structured-list-content--nowrap`]: noWrap,
+      },
+    ]"
+  >
+    <slot></slot>
+  </div>
 </template>
 
 <script setup>
-//
+import { carbonPrefix } from '../../global/settings';
+defineProps({
+  noWrap: Boolean,
+});
 </script>
-
-<style lang="scss" scoped>
-//
-</style>
diff --git a/src/components/CvStructuredList/CvStructuredListHeading.vue b/src/components/CvStructuredList/CvStructuredListHeading.vue
index 97f9de962..578f0cdd4 100644
--- a/src/components/CvStructuredList/CvStructuredListHeading.vue
+++ b/src/components/CvStructuredList/CvStructuredListHeading.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class=""></div>
+  <div
+    :class="`cv-structured-list-heading ${carbonPrefix}--structured-list-th`"
+  >
+    <slot></slot>
+  </div>
 </template>
 
 <script setup>
-//
+import { carbonPrefix } from '../../global/settings';
 </script>
-
-<style lang="scss" scoped>
-//
-</style>
diff --git a/src/components/CvStructuredList/CvStructuredListItem.vue b/src/components/CvStructuredList/CvStructuredListItem.vue
index 97f9de962..ff7221af8 100644
--- a/src/components/CvStructuredList/CvStructuredListItem.vue
+++ b/src/components/CvStructuredList/CvStructuredListItem.vue
@@ -1,11 +1,48 @@
 <template>
-  <div class=""></div>
+  <component
+    :is="tagType"
+    v-bind="$attrs"
+    class="cv-structured-list-item"
+    :value="value"
+    :modelValue="modelValue"
+  >
+    <slot></slot>
+  </component>
 </template>
 
 <script setup>
-//
-</script>
+import { computed } from 'vue';
+import CvStructuredListItemStandard from './CvStructuredListItemStandard.vue';
+import CvStructuredListItemSelectable from './CvStructuredListItemSelectable.vue';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+defineProps({
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+});
+
+const selectable = inject('selectable');
+const change = inject('change');
 
-<style lang="scss" scoped>
-//
-</style>
+const tagType = computed(() => {
+  return selectable
+    ? CvStructuredListItemStandard
+    : CvStructuredListItemSelectable;
+});
+
+const emit = defineEmits(['change']);
+
+provide('on', val => {
+  emit('change', val);
+  change(val); //emit to parent
+});
+</script>
diff --git a/src/components/CvStructuredList/CvStructuredListItemSelectable.vue b/src/components/CvStructuredList/CvStructuredListItemSelectable.vue
index 97f9de962..d42ac325f 100644
--- a/src/components/CvStructuredList/CvStructuredListItemSelectable.vue
+++ b/src/components/CvStructuredList/CvStructuredListItemSelectable.vue
@@ -1,11 +1,54 @@
 <template>
-  <div class=""></div>
+  <label
+    :for="cvId"
+    :aria-label="label"
+    :class="[
+      `cv-structured-list-item--selectable ${carbonPrefix}--structured-list-row`,
+      { ' ${carbonPrefix}--structured-list-row--selected': isChecked },
+    ]"
+    tabindex="0"
+  >
+    <slot></slot>
+    <input
+      v-bind="$attrs"
+      tabindex="-1"
+      :id="cvId"
+      :class="`${carbonPrefix}--structured-list-input`"
+      :checked="isChecked"
+      :value="value"
+      type="radio"
+    />
+    <div :class="`${carbonPrefix}--structured-list-td`">
+      <CheckmarkFilled16 :class="`${carbonPrefix}--structured-list-svg`" />
+    </div>
+  </label>
 </template>
 
 <script setup>
-//
-</script>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId, useRadio } from '../../use';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+
+defineOptions({
+  inheritAttrs: false,
+});
 
-<style lang="scss" scoped>
-//
-</style>
+const props = defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+const { isChecked } = useRadio(props, emit);
+</script>
diff --git a/src/components/CvStructuredList/CvStructuredListItemStandard.vue b/src/components/CvStructuredList/CvStructuredListItemStandard.vue
index 97f9de962..acdf27f92 100644
--- a/src/components/CvStructuredList/CvStructuredListItemStandard.vue
+++ b/src/components/CvStructuredList/CvStructuredListItemStandard.vue
@@ -1,11 +1,11 @@
 <template>
-  <div class=""></div>
+  <div
+    :class="`cv-structured-list-item--standard ${carbonPrefix}--structured-list-row`"
+  >
+    <slot></slot>
+  </div>
 </template>
 
 <script setup>
-//
+import { carbonPrefix } from '../../global/settings';
 </script>
-
-<style lang="scss" scoped>
-//
-</style>