@carbon/vue 3.0.4-alpha.0 → 3.0.6-alpha.0

package/src/components/CvTile/CvTileClickable.vue

@@ -0,0 +1,23 @@
+<template>
+  <component
+    :is="tagType"
+    ref="target"
+    data-tile="clickable"
+    :class="`cv-tile-clickable ${carbonPrefix}--tile--clickable`"
+    v-bind="{ ...$attrs, ...linkProps }"
+    tabindex="0"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsLink, useLinkProps, useTagType } from '../../use/cvLink';
+
+const props = defineProps({
+  ...propsLink,
+});
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+</script>

package/src/components/CvTile/CvTileExpandable.vue

@@ -0,0 +1,103 @@
+<template>
+  <button
+    type="button"
+    :style="data.styleObject"
+    @click="toggle"
+    :class="[
+      `cv-tile-expandable ${carbonPrefix}--tile--expandable`,
+      { [`${carbonPrefix}--tile--is-expanded`]: data.internalExpanded },
+    ]"
+    ref="el"
+  >
+    <div :class="`${carbonPrefix}--tile-content`">
+      <span
+        data-tile-atf
+        :class="`${carbonPrefix}--tile-content__above-the-fold`"
+        ref="aboveFold"
+      >
+        <slot>
+          <!-- Above the fold content here -->
+        </slot>
+      </span>
+      <div :class="`${carbonPrefix}--tile__chevron`">
+        <span>{{ chevronLabel }}</span>
+        <ChevronDown16 />
+      </div>
+      <span
+        :class="`${carbonPrefix}--tile-content__below-the-fold`"
+        ref="belowFold"
+        v-show="data.internalExpanded || data.initialized"
+      >
+        <slot name="below">
+          <!-- Rest of the content here -->
+        </slot>
+      </span>
+    </div>
+  </button>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import ChevronDown16 from '@carbon/icons-vue/es/chevron--down/16';
+import { computed, nextTick, reactive, ref, watch } from 'vue';
+
+const props = defineProps({
+  expanded: Boolean,
+  tileCollapsedLabel: String,
+  tileExpandedLabel: String,
+});
+const data = reactive({
+  styleObject: {
+    maxHeight: 'initial',
+  },
+  initialized: false,
+  internalExpanded: props.expanded,
+});
+
+watch(
+  () => props.expanded,
+  val => {
+    if (val !== data.internalExpanded) {
+      toggle(val);
+    }
+  }
+);
+
+const chevronLabel = computed(() => {
+  return data.internalExpanded
+    ? props.tileExpandedLabel
+    : props.tileCollapsedLabel;
+});
+
+const el = ref(null);
+const belowFold = ref(null);
+function toggle(force) {
+  let currentHeight = el?.value.getBoundingClientRect().height;
+  if (!data.initialized) {
+    data.styleObject.maxHeight = `${currentHeight}px`;
+    data.initialized = true;
+  }
+
+  nextTick(() => {
+    const forceType = typeof force;
+    data.internalExpanded =
+      forceType === 'boolean' ? force : !data.internalExpanded;
+
+    const belowFoldHeight = belowFold?.value.getBoundingClientRect().height;
+
+    if (data.internalExpanded) {
+      currentHeight += belowFoldHeight;
+    } else {
+      currentHeight -= belowFoldHeight;
+    }
+    data.styleObject.maxHeight = `${currentHeight}px`;
+  });
+}
+const emit = defineEmits(['expanded']);
+watch(
+  () => data.internalExpanded,
+  val => {
+    emit('expanded', val);
+  }
+);
+</script>

package/src/components/CvTile/CvTileSelectable.vue

@@ -0,0 +1,52 @@
+<template>
+  <label
+    :for="uid"
+    :aria-label="ariaLabel"
+    :class="[
+      `cv-tile-selectable ${carbonPrefix}--tile--selectable`,
+      { [`${carbonPrefix}--tile--is-selected`]: isChecked },
+    ]"
+    data-tile="selectable"
+    tabindex="0"
+    :data-contained-checkbox-state="isChecked"
+  >
+    <input
+      tabindex="-1"
+      data-tile-input
+      :id="uid"
+      type="checkbox"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
+      :class="`${carbonPrefix}--tile-input`"
+      v-bind="$attrs"
+      @change="onChange"
+    />
+    <div :class="`${carbonPrefix}--tile__checkmark`">
+      <CheckmarkFilled16 />
+    </div>
+    <div :class="`${carbonPrefix}--tile-content`">
+      <slot>
+        <!-- Tile content here -->
+      </slot>
+    </div>
+  </label>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { props as propsCvCheck, useCheck } from '../../use/cvCheck';
+import { props as propsCvId, useCvId } from '../../use/cvId';
+import CheckmarkFilled16 from '@carbon/icons-vue/es/checkmark--filled/16';
+import { toRefs } from 'vue';
+
+const props = defineProps({
+  ariaLabel: { type: String, default: 'tile' },
+  ...propsCvCheck,
+  ...propsCvId,
+});
+
+const uid = useCvId(props, true);
+
+const emit = defineEmits(['update:modelValue', 'change']);
+const { onChange, isChecked } = useCheck(toRefs(props), emit);
+</script>

package/src/components/CvTile/CvTileStandard.vue

@@ -0,0 +1,7 @@
+<template>
+  <div class="cv-tile-standard">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup></script>

package/src/components/CvTile/index.js

@@ -0,0 +1,4 @@
+import CvTile from './CvTile.vue';
+
+export { CvTile };
+export default CvTile;