feat: structured list components in progress

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>

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>

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>

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>

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>

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>