@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvSelect/CvSelectOptgroup.vue

@@ -0,0 +1,9 @@
+<template>
+  <optgroup :class="`cv-select-optgroup ${carbonPrefix}--select-optgroup`">
+    <slot></slot>
+  </optgroup>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvSelect/CvSelectOption.vue

@@ -0,0 +1,22 @@
+<template>
+  <option
+    :data-initial-selected="isSelected"
+    :class="`cv-select-option ${carbonPrefix}--select-option`"
+  >
+    <slot></slot>
+  </option>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { computed, useAttrs } from 'vue';
+const attrs = useAttrs();
+const isSelected = computed(() => {
+  const selected = attrs['selected'];
+  if (typeof selected === 'string')
+    return selected !== 'false' ? true : undefined;
+  if (typeof selected === 'boolean') return selected ? true : undefined;
+
+  return selected ? true : undefined;
+});
+</script>

package/src/components/CvSelect/index.js

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

package/src/components/CvSkeletonText/CvSkeletonText.stories.js

@@ -0,0 +1,56 @@
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+import { CvSkeletonText } from '.';
+
+export default {
+  title: `${sbCompPrefix}/CvSkeletonText`,
+  component: CvSkeletonText,
+  argTypes: {
+    heading: { control: { type: 'boolean' } },
+    lineCount: { control: { type: 'number', min: 1 } },
+    width: {
+      control: { type: 'text' },
+      defaultValue: CvSkeletonText.props.width.default,
+      table: {
+        defaultValue: { summary: `"${CvSkeletonText.props.width.default}"` },
+      },
+    },
+  },
+};
+
+const template = `<cv-skeleton-text v-bind="args" />`;
+const Template = args => {
+  return {
+    components: { CvSkeletonText },
+    setup: () => ({ args }),
+    template,
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  width: '100%',
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Minimal = Template.bind({});
+Minimal.args = {
+  width: '100%',
+};
+Minimal.argTypes = {
+  heading: { table: { disable: true } },
+  lineCount: { table: { disable: true } },
+  width: { table: { disable: true } },
+};
+Minimal.parameters = storyParametersObject(
+  Minimal.parameters,
+  template,
+  Minimal.args
+);

package/src/components/CvSkeletonText/CvSkeletonText.vue

@@ -0,0 +1,63 @@
+<template>
+  <p
+    v-if="lineCount === 1"
+    :class="[
+      `${carbonPrefix}--skeleton__text`,
+      { [`${carbonPrefix}--skeleton__heading`]: heading },
+    ]"
+    :style="{ width }"
+  />
+  <div v-else>
+    <p
+      v-for="i in lineCount"
+      :key="i"
+      :class="[
+        `${carbonPrefix}--skeleton__text`,
+        { [`${carbonPrefix}--skeleton__heading`]: heading },
+      ]"
+      :style="{ width: widths[i - 1] }"
+    />
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+
+const LENGTH_MODIFIERS = [`64px`, `2px`, `32px`];
+
+export default {
+  name: 'CvSkeletonText',
+  props: {
+    /** Make skeleton text larger (like heading) */
+    heading: {
+      type: Boolean,
+      default: false,
+    },
+    /** Number of skeleton text lines shown */
+    lineCount: {
+      type: Number,
+      default: 1,
+      validator: value => value > 0,
+    },
+    /** Width (with CSS unit, e.g. px or %) of single line of text, or max-width of paragraph lines */
+    width: {
+      type: String,
+      default: '100%',
+    },
+  },
+  setup(props) {
+    const widths = computed(() =>
+      Array.from(
+        { length: props.lineCount },
+        (_, i) =>
+          `calc(${props.width} - ${
+            LENGTH_MODIFIERS[i % LENGTH_MODIFIERS.length]
+          })`
+      )
+    );
+
+    return { carbonPrefix, widths };
+  },
+};
+</script>

package/src/components/CvSkeletonText/index.js

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

package/src/components/CvSvg/_CvSvg.vue

@@ -0,0 +1,48 @@
+<script>
+import { computed, h } from 'vue';
+
+export default {
+  name: 'CvSvg',
+  props: {
+    svg: {
+      type: [String, Object],
+      default: undefined,
+      validator(val) {
+        if (!val || typeof val === 'string') {
+          return true;
+        }
+        const result = !!(val.render || val.setup);
+        if (!result) {
+          console.error(
+            'Expected a Vue icon component, SVG, SVG Symbol or SVG file'
+          );
+        }
+        return result;
+      },
+    },
+  },
+  setup(props) {
+    const isSvg = computed(() => props.svg && props.svg.indexOf('<svg') >= 0);
+    const isSymbol = computed(
+      () => props.svg && !props.isSvg && props.svg.indexOf('#') >= 0
+    );
+
+    return () => {
+      if (typeof props.svg === 'object') {
+        // assume an @carbon/icons-vue icon
+        return h(props.svg);
+      } else if (isSvg.value) {
+        // an SVG document
+        return h('svg', { domProps: { innerHTML: props.svg } });
+      } else {
+        if (isSymbol.value) {
+          return h('svg', {}, [h('use', { attrs: { href: props.svg } })]);
+        } else {
+          // an image of some description.
+          return h('img', { attrs: { src: props.svg } });
+        }
+      }
+    };
+  },
+};
+</script>

package/src/components/CvSvg/__tests__/_TestIcon.vue

@@ -0,0 +1,19 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+    <g fill-rule="evenodd" id="g">
+      <path
+        id="path"
+        d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z"
+      />
+    </g>
+  </svg>
+</template>
+
+<script>
+export default {
+  name: 'TestIcon',
+  // setup() {
+  //   // empty setup
+  // },
+};
+</script>

package/src/components/CvSvg/__tests__/test-svg.svg

@@ -0,0 +1,5 @@
+<?xml version="1.0" encoding="utf-8"?> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" id="root">
+  <g fill-rule="evenodd" id="test=symbol">
+    <path id="path" d="M7 7H4v2h3v3h2V9h3V7H9V4H7v3zm1 9A8 8 0 1 1 8 0a8 8 0 0 1 0 16z" />
+  </g>
+</svg>

package/src/components/CvTag/CvTag.stories.js

@@ -0,0 +1,64 @@
+import CvTag from './CvTag.vue';
+import { tagKinds } from './consts.js';
+import { action } from '@storybook/addon-actions';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+
+export default {
+  title: `${sbCompPrefix}/CvTag`,
+  component: CvTag,
+  argTypes: {
+    kind: { control: { type: 'select', options: tagKinds } },
+  },
+};
+
+const template = `<CvTag @remove="onRemove" v-bind="args" />`;
+const Template = (args, { argTypes }) => {
+  return {
+    props: Object.keys(argTypes),
+    components: { CvTag },
+    template,
+    setup() {
+      return {
+        args,
+        onRemove: action('remove'),
+      };
+    },
+  };
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  kind: 'red',
+  label: 'This is a tag',
+  filter: false,
+};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);
+
+export const Filter = Template.bind({});
+Filter.args = {
+  kind: 'teal',
+  label: 'This is a tag',
+  filter: true,
+};
+Filter.parameters = storyParametersObject(
+  Filter.parameters,
+  template,
+  Filter.args
+);
+
+export const Skeleton = Template.bind({});
+Skeleton.args = {
+  skeleton: true,
+};
+Skeleton.parameters = storyParametersObject(
+  Skeleton.parameters,
+  template,
+  Skeleton.args
+);

package/src/components/CvTag/CvTag.vue

@@ -0,0 +1,105 @@
+<template>
+  <div v-if="skeleton" :class="tagClasses" />
+  <div v-else :class="tagClasses" role="listitem" :title="title">
+    <span :class="`${carbonPrefix}--tag__label`">
+      {{ label }}
+    </span>
+    <button
+      v-if="filter"
+      :class="`${carbonPrefix}--tag__close-icon`"
+      :aria-label="clearAriaLabel"
+      @click.stop.prevent="onRemove"
+      :disabled="disabled"
+    >
+      <Close16 />
+    </button>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { tagKinds } from './consts';
+import Close16 from '@carbon/icons-vue/es/close/16';
+
+export default {
+  name: 'CvTag',
+  components: { Close16 },
+  props: {
+    clearAriaLabel: { type: String, default: 'Clear filter' },
+    /**
+     * disabled by property or if skeleton
+     */
+    disabled: Boolean,
+    /**
+     * label to be used in the CvTag component
+     */
+    label: { type: String, required: true },
+    /**
+     * kind of the CvTag
+     */
+    kind: {
+      type: String,
+      default: 'red',
+      validator(val) {
+        return tagKinds.includes(val);
+      },
+    },
+    /**
+     * If filter is true, the CvTag will include a remove button on the right side, which on a click, will emit the 'remove' event.
+     */
+    filter: {
+      type: Boolean,
+      default: false,
+    },
+    /**
+     * skeleton used when loading
+     */
+    skeleton: Boolean,
+  },
+  emits: [
+    /**
+     * Triggers when the clear button is pressed on a filter CvTag
+     */
+    'remove',
+  ],
+  setup(props, { emit }) {
+    const title = computed(() => {
+      return props.filter ? props.clearAriaLabel : null;
+    });
+
+    const tagClasses = computed(() => {
+      const classes = [
+        `${carbonPrefix}--tag`,
+        `${carbonPrefix}--tag--${props.kind}`,
+      ];
+
+      if (props.skeleton) {
+        classes.push(`${carbonPrefix}--skeleton`);
+      } else {
+        if (props.filter) {
+          classes.push(`${carbonPrefix}--tag--filter`);
+        }
+
+        if (props.disabled) {
+          classes.push(`${carbonPrefix}--tag--disabled`);
+        }
+      }
+      return classes;
+    });
+
+    const onRemove = () => {
+      if (!props.disabled) {
+        emit('remove');
+      }
+    };
+
+    return {
+      carbonPrefix,
+      title,
+      tagClasses,
+      onRemove,
+    };
+  },
+};
+</script>

package/src/components/CvTag/consts.js

@@ -0,0 +1,15 @@
+export const tagKinds = [
+  'red',
+  'magenta',
+  'purple',
+  'blue',
+  'cyan',
+  'teal',
+  'green',
+  'gray',
+  'cool-gray',
+  'warm-gray',
+  'high-contrast',
+];
+const CvTagConsts = { tagKinds };
+export default CvTagConsts;

package/src/components/CvTag/index.js

@@ -0,0 +1,5 @@
+import CvTag from './CvTag.vue';
+import CvTagConsts from './consts';
+
+export { CvTag, CvTagConsts };
+export default CvTag;

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>