@carbon/vue 2.45.1 → 3.0.5-alpha.0

package/src/components/CvTile/CvTile.stories.mdx

@@ -0,0 +1,156 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvTile from './CvTile.vue';
+import CvTileStandard from './CvTileStandard.vue';
+import CvTileClickable from './CvTileClickable.vue';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+
+<Meta title={`${sbCompPrefix}/CvTile`} component={CvTile} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvTile,
+    CvTileStandard,
+    CvTileClickable,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      args: {
+        light: args.light,
+        kind: args.kind,
+        disabled: args.disabled,
+        expanded: args.expanded,
+        tileCollapsedLabel: args.tileCollapsedLabel,
+        tileExpandedLabel: args.tileExpandedLabel,
+      },
+      onChange: action('change'),
+      onExpanded: action('expanded'),
+      onClick: action('click'),
+    };
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `<cv-tile v-bind='args'>Hello!</cv-tile>`;
+const defaultCode = defaultTemplate.replace("v-bind='args'", '');
+const expandableTemplate = `<cv-tile v-bind='args' kind="expandable" @expanded="onExpanded">Hello expandable!<template #below><h1>More Content</h1><p>Expanded</p></template></cv-tile>`;
+const expandableCode = expandableTemplate.replace("v-bind='args'", '');
+const clickableTemplate = `<cv-tile v-bind='args' kind="clickable" @click="onClick" to="{name: 'something'}">Hello clickable!</cv-tile>`;
+const clickableCode = clickableTemplate.replace("v-bind='args'", '');
+const selectableTemplate = `<cv-tile v-bind='args' kind="selectable" value="my-selection" @change="onChange">Hello selectable! </cv-tile>`;
+const selectableCode = selectableTemplate.replace("v-bind='args'", '');
+
+# CvTile
+
+**Migration notes:**
+
+- The `light` and '`theme` options continue to be supported but the boolean `light` is preferred.
+- The expandable tile now emits a `expanded` event with a Boolean value.
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: defaultCode } },
+    }}
+    args={{
+      kind: '',
+      light: false,
+      disabled: false,
+      template: defaultTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Expandable"
+    parameters={{
+      controls: {
+        exclude: ['default', 'selected', 'template', 'data', 'kind', 'slots'],
+      },
+      docs: { source: { code: expandableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: expandableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Clickable"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'slots',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: clickableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: clickableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<Canvas>
+  <Story
+    name="Selectable"
+    parameters={{
+      controls: {
+        exclude: [
+          'default',
+          'selected',
+          'template',
+          'data',
+          'kind',
+          'slots',
+          'expanded',
+          'tileExpandedLabel',
+          'tileCollapsedLabel',
+        ],
+      },
+      docs: { source: { code: selectableCode } },
+    }}
+    args={{
+      light: false,
+      disabled: false,
+      template: selectableTemplate,
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvTile/CvTile.vue

@@ -0,0 +1,67 @@
+<template>
+  <component
+    :is="tagType"
+    :checked="checkProp('checked', selected)"
+    :expanded="checkProp('expanded', expanded)"
+    :tileCollapsedLabel="checkProp('tileCollapsedLabel', tileCollapsedLabel)"
+    :tileExpandedLabel="checkProp('tileCollapsedLabel', tileExpandedLabel)"
+    :class="[
+      `cv-tile ${carbonPrefix}--tile`,
+      { [`${carbonPrefix}--tile--light`]: isLight },
+    ]"
+  >
+    <template v-for="(_, name) in $slots" v-slot:[name]="slotData"
+      ><slot :name="name" v-bind="slotData"
+    /></template>
+  </component>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { props as propsTheme, useIsLight } from '../../use/cvTheme';
+import CvTileStandard from './CvTileStandard.vue';
+import CvTileClickable from './CvTileClickable.vue';
+import CvTileSelectable from './CvTileSelectable.vue';
+import CvTileExpandable from './CvTileExpandable.vue';
+
+const props = defineProps({
+  expanded: Boolean,
+  selected: Boolean,
+  tileCollapsedLabel: { type: String, default: 'Tile collapsed' },
+  tileExpandedLabel: { type: String, default: 'Tile expanded' },
+  kind: {
+    type: String,
+    default: '',
+    validator: value =>
+      ['clickable', 'expandable', 'selectable', 'standard', ''].includes(value),
+  },
+  ...propsTheme,
+});
+
+const tagType = computed(() => {
+  switch (props.kind) {
+    case 'clickable':
+      return CvTileClickable;
+    case 'selectable':
+      return CvTileSelectable;
+    case 'expandable':
+      return CvTileExpandable;
+    default:
+      return CvTileStandard;
+  }
+});
+const isLight = useIsLight(props);
+
+/**
+ * If the prop is defined on the tagType pass it along otherwise, discard it.
+ * @param {string} prop
+ * @param {any} value
+ * @returns {*|undefined}
+ */
+function checkProp(prop, value) {
+  return prop in (tagType.value.props || {}) ? value : undefined;
+}
+</script>
+
+<style scoped></style>

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/{cv-tile/_cv-tile-selectable.vue → CvTile/CvTileSelectable.vue}

@@ -9,17 +9,17 @@
     data-tile="selectable"
     tabindex="0"
     :data-contained-checkbox-state="isChecked"
-    ref="target"
   >
     <input
       tabindex="-1"
       data-tile-input
       :id="uid"
       type="checkbox"
-      :checked="isChecked"
+      :checked="isChecked === true"
+      :aria-checked="`${isChecked}`"
       :class="`${carbonPrefix}--tile-input`"
       v-bind="$attrs"
-      v-on="inputListeners"
+      @change="onChange"
     />
     <div :class="`${carbonPrefix}--tile__checkmark`">
       <CheckmarkFilled16 />
@@ -32,17 +32,21 @@
   </label>
 </template>
 
-<script>
-import { uidMixin, checkMixin, carbonPrefixMixin, methodsMixin } from '../../mixins';
+<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';
 
-export default {
-  name: 'CvTileSelectable',
-  mixins: [uidMixin, checkMixin, carbonPrefixMixin, methodsMixin({ target: ['blur', 'focus'] })],
-  components: { CheckmarkFilled16 },
-  inheritAttrs: false,
-  props: {
-    ariaLabel: { type: String, default: 'tile' },
-  },
-};
+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/{cv-tile/_cv-tile-standard.vue → CvTile/CvTileStandard.vue}

@@ -4,8 +4,4 @@
   </div>
 </template>
 
-<script>
-export default {
-  name: 'CvTileStandard',
-};
-</script>
+<script setup></script>

package/src/components/CvTile/index.js

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

package/src/components/CvUIShell/CvHeader.vue

@@ -0,0 +1,203 @@
+<template>
+  <header :class="`cv-header ${carbonPrefix}--header`" data-header :id="uid">
+    <slot />
+    <div v-if="hasGlobalHeader" :class="`${carbonPrefix}--header__global`">
+      <slot name="header-global" />
+    </div>
+    <slot name="left-panels" />
+    <slot name="right-panels" />
+  </header>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import {
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onUpdated,
+  provide,
+  reactive,
+  readonly,
+  ref,
+  useAttrs,
+  useSlots,
+} from 'vue';
+import { getBus, removeBus } from '../../global/component-utils/event-bus';
+import { useCvId } from '../../use/cvId';
+
+const attrs = useAttrs();
+const uid = useCvId(attrs, true);
+provide('cv-header-id', readonly(uid));
+let bus = undefined;
+onBeforeMount(() => {
+  bus = getBus(uid.value);
+  bus.on('cv:panel-control-mounted', onCvPanelControlMounted);
+  bus.on('cv:panel-control-beforeDestroy', onCvPanelControlBeforeDestroy);
+
+  bus.on('cv:panel-control-toggle', onCvPanelControlToggle);
+  bus.on('cv:panel-control-focusout', onCvPanelControlFocusout);
+  bus.on('cv:panel-mounted', onCvPanelMounted);
+  bus.on('cv:panel-beforeDestroy', onCvPanelBeforeDestroy);
+  bus.on('cv:panel-focusout', onCvPanelFocusout);
+});
+onUnmounted(() => {
+  removeBus(uid.value);
+});
+
+const hasGlobalHeader = ref(false);
+const slots = useSlots();
+onMounted(() => {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  hasGlobalHeader.value = !!slots['header-global'];
+});
+onUpdated(() => {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  hasGlobalHeader.value = !!slots['header-global'];
+});
+
+/**
+ * Panel Data
+ * @typedef {Object} CvHeaderPanel
+ * @property {string} id - panel id
+ * @property {boolean?} rail - is this panel a rail
+ * @property {boolean?} headerEmbedded - true when the panel is added to a list
+ * @property {HTMLElement} el
+ * @property {WritableComputedRef<boolean>} panelExpanded
+ */
+
+/**
+ * Controller Data
+ * @typedef {Object} CvHeaderController
+ * @property {string} id - controller id
+ * @property {string} ariaControls - what is controlled
+ * @property {boolean} hasRail - controls a rail?
+ * @property {HTMLElement} el
+ * @property {WritableComputedRef<boolean>} panelExpanded
+ */
+
+/**
+ * @type {UnwrapNestedRefs<{panels: Array<CvHeaderPanel>, panelControllers:Array<CvHeaderController>}>}
+ */
+const data = reactive({
+  panels: [],
+  panelControllers: [],
+});
+
+/**
+ * Associate a rail controller with a panel
+ * @param {CvHeaderController} _ctrl
+ * @param {CvHeaderPanel?} _panel
+ */
+function hasRail(_ctrl, _panel) {
+  let panel = _panel;
+  let ctrl = _ctrl;
+  if (ctrl) {
+    panel = data.panels?.find(item => item.id === ctrl.ariaControls);
+  } else {
+    if (panel) {
+      ctrl = data.panelControllers?.find(
+        item => item.ariaControls === panel.id
+      );
+    }
+  }
+  if (ctrl) {
+    ctrl.hasRail = !!(panel && ctrl) && panel.rail;
+  }
+}
+
+/**
+ * Add controller to list
+ * @param {CvHeaderController} srcComponent
+ */
+function onCvPanelControlMounted(srcComponent) {
+  data.panelControllers.push(srcComponent);
+  hasRail(srcComponent);
+}
+function onCvPanelControlBeforeDestroy(srcComponent) {
+  const index = data.panelControllers.findIndex(
+    item => item.id === srcComponent.id
+  );
+  if (index > -1) {
+    data.panelControllers.splice(index, 1);
+  }
+}
+
+/**
+ * Toggle a panel
+ * @param {CvHeaderController} srcComponent
+ * @param force
+ */
+function onCvPanelControlToggle(srcComponent, force) {
+  const foundIndex = data.panels.findIndex(
+    item => item.id === srcComponent.ariaControls
+  );
+  if (foundIndex > -1) {
+    const newValue = force !== undefined ? force : !srcComponent.panelExpanded;
+    // close all panels
+    for (let index in data.panels) {
+      data.panels[index].panelExpanded = false;
+    }
+    for (let index in data.panelControllers) {
+      data.panelControllers[index].panelExpanded = false;
+    }
+
+    // open just this one panel
+    srcComponent.panelExpanded = newValue;
+    data.panels[foundIndex].panelExpanded = newValue;
+  }
+}
+
+function onCvPanelControlFocusout(payload) {
+  const srcComponent = payload.ctrl;
+  const srcEvent = payload.ev;
+  /**
+   * @type {CvHeaderPanel}
+   */
+  const found = data.panels.find(item => item.id === srcComponent.ariaControls);
+  if (
+    found &&
+    !found.rail &&
+    found.el !== srcEvent.relatedTarget &&
+    !found.el.contains(srcEvent.relatedTarget)
+  ) {
+    // close when not a rail
+    onCvPanelControlToggle(srcComponent, false);
+  }
+}
+
+/**
+ * Add panel to list
+ * @param {CvHeaderPanel} srcComponent
+ */
+function onCvPanelMounted(srcComponent) {
+  data.panels.push(srcComponent);
+  srcComponent.headerEmbedded = true;
+  hasRail(undefined, srcComponent);
+}
+function onCvPanelBeforeDestroy(srcComponent) {
+  const index = data.panels.findIndex(item => item.id === srcComponent.id);
+  if (index > -1) {
+    data.panels.splice(index, 1);
+  }
+}
+
+function onCvPanelFocusout(payload) {
+  const srcComponent = payload.panel;
+  const srcEvent = payload.ev;
+  /**
+   * @type {CvHeaderController}
+   */
+  const found = data.panelControllers.find(
+    item => item.ariaControls === srcComponent.id
+  );
+  if (
+    srcComponent.el !== srcEvent.relatedTarget &&
+    !srcComponent.el.contains(srcEvent.relatedTarget) &&
+    found &&
+    found.el !== srcEvent.relatedTarget
+  ) {
+    onCvPanelControlToggle(found, false);
+  }
+}
+</script>