@carbon/vue 3.0.8-alpha.0 → 3.0.9-alpha.0

package/src/components/CvStructuredList/CvStructuredListItemSelectable.vue

@@ -0,0 +1,56 @@
+<template>
+  <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"
+      @change="onChange"
+    />
+    <div :class="`${carbonPrefix}--structured-list-td`">
+      <CheckmarkFilled16 :class="`${carbonPrefix}--structured-list-svg`" />
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, propsCvId, useRadio } from '../../use';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+
+defineOptions({
+  inheritAttrs: false,
+});
+
+const props = defineProps({
+  label: {
+    type: String,
+    default: undefined,
+  },
+  modelValue: {
+    type: String,
+    default: undefined,
+  },
+  value: {
+    type: String,
+    default: undefined,
+  },
+  ...propsCvId,
+});
+
+const cvId = useCvId(props);
+const emit = defineEmits(['update:modelValue', 'change']);
+const { isChecked, onChange } = useRadio(props, emit);
+</script>

package/src/components/CvStructuredList/CvStructuredListItemStandard.vue

@@ -0,0 +1,11 @@
+<template>
+  <div
+    :class="`cv-structured-list-item--standard ${carbonPrefix}--structured-list-row`"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredList.spec.js.snap

@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredList should render \`headings\` slot correctly 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="headings-slot-test">Headings slot test</div>
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render \`items\` slot correctly 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody">
+    <ul class="items-slot-test">
+      <li>Test 1.1</li>
+      <li>Test 1.2</li>
+    </ul>
+  </div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when condensed 1`] = `
+<div class="bx--structured-list bx--structured-list--condensed" data-structured-list="false" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when not selectable and not condensed 1`] = `
+<div class="bx--structured-list" data-structured-list="false" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <!--v-if-->
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when selectable 1`] = `
+<div class="bx--structured-list bx--structured-list--selection" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;
+
+exports[`CvStructuredList should render correctly when selectable and condensed 1`] = `
+<div class="bx--structured-list bx--structured-list--selection bx--structured-list--condensed" data-structured-list="true" defaultid="test-1">
+  <div class="bx--structured-list-thead">
+    <div class="bx--structured-list-row bx--structured-list-row--header-row">
+      <div class="bx--structured-list-th"></div>
+    </div>
+  </div>
+  <div class="bx--structured-list-tbody"></div>
+</div>
+`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListData.spec.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListData should render correctly when not wrapping text 1`] = `<div class="cv-structured-list-data bx--structured-list-td bx--structured-list-content--nowrap" id="test-3"></div>`;
+
+exports[`CvStructuredListData should render correctly when wrapping text 1`] = `<div class="cv-structured-list-data bx--structured-list-td" id="test-3"></div>`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListHeading.spec.js.snap

@@ -0,0 +1,9 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListHeading should render correctly 1`] = `<div class="cv-structured-list-heading bx--structured-list-th"></div>`;
+
+exports[`CvStructuredListHeading should render with slot correctly 1`] = `
+<div class="cv-structured-list-heading bx--structured-list-th">
+  <div class="headings-slot-default-test">Headings slot default test</div>
+</div>
+`;

package/src/components/CvStructuredList/__tests__/__snapshots__/CvStructuredListItem.spec.js.snap

@@ -0,0 +1,7 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`CvStructuredListItem should render correctly when \`value\` is default 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;
+
+exports[`CvStructuredListItem should render correctly when \`value\` is set 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test" value="strictured list item value test"></cv-structured-list-item-standard-stub>`;
+
+exports[`CvStructuredListItem should render correctly when slot is specified 1`] = `<cv-structured-list-item-standard-stub id="test-2" class="cv-structured-list-item" modelvalue="test"></cv-structured-list-item-standard-stub>`;

package/src/components/CvStructuredList/index.js

@@ -0,0 +1,12 @@
+import CvStructuredListData from './CvStructuredListData.vue';
+import CvStructuredListHeading from './CvStructuredListHeading.vue';
+import CvStructuredListItem from './CvStructuredListItem.vue';
+import CvStructuredList from './CvStructuredList.vue';
+export {
+  CvStructuredList,
+  CvStructuredListItem,
+  CvStructuredListHeading,
+  CvStructuredListData,
+};
+
+export default CvStructuredList;

package/src/use/useRadio.js

@@ -13,7 +13,6 @@ export const useRadio = (props, emit) => {
 
   const onChange = () => {
     onRadioItemChange(props.value); // emit to parent
-
     emit('update:modelValue', props.value); // emit for v-model
     emit('change', props.value);
   };