@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvUIShell/CvSideNavLink.vue

@@ -0,0 +1,47 @@
+<template>
+  <li :class="`${carbonPrefix}--side-nav__item`">
+    <component
+      :is="tagType"
+      :class="[
+        'cv-side-nav-item-link',
+        `${carbonPrefix}--side-nav__link`,
+        { [`${carbonPrefix}--side-nav__link--current`]: active },
+      ]"
+      v-bind="{ ...$attrs, ...linkProps }"
+    >
+      <cv-side-nav-icon v-if="data.hasNavIcon" small>
+        <slot name="nav-icon" />
+      </cv-side-nav-icon>
+      <cv-side-nav-link-text>
+        <slot />
+      </cv-side-nav-link-text>
+    </component>
+  </li>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
+import CvSideNavIcon from './CvSideNavIcon.vue';
+import CvSideNavLinkText from './_CvSideNavLinkText.vue';
+import { onMounted, onUpdated, reactive, useSlots } from 'vue';
+
+const props = defineProps({
+  active: Boolean,
+  icon: Object,
+  ...propsLink,
+});
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+
+const data = reactive({
+  hasNavIcon: false,
+});
+
+const slots = useSlots();
+onMounted(checkSlots);
+onUpdated(checkSlots);
+function checkSlots() {
+  data.hasNavIcon = !!slots['nav-icon'];
+}
+</script>

package/src/components/CvUIShell/CvSideNavMenu.vue

@@ -0,0 +1,85 @@
+<template>
+  <li
+    :class="[
+      `cv-side-nav-menu`,
+      `${carbonPrefix}--side-nav__item`,
+      {
+        [`${carbonPrefix}--side-nav__item--active`]: active,
+        [`${carbonPrefix}--side-nav__item--icon`]: hasIcon,
+      },
+    ]"
+  >
+    <button
+      aria-haspopup="true"
+      :aria-expanded="isExpanded ? 'true' : 'false'"
+      :class="`${carbonPrefix}--side-nav__submenu`"
+      role="menuitem"
+      type="button"
+      @click="doToggle"
+      @keydown.space.prevent
+      @keyup.space.prevent="doToggle"
+      @keydown.enter.prevent="doToggle"
+    >
+      <cv-side-nav-icon v-if="hasIcon">
+        <slot name="nav-icon" />
+      </cv-side-nav-icon>
+      <span :class="`${carbonPrefix}--side-nav__submenu-title`">{{
+        title
+      }}</span>
+      <cv-side-nav-icon
+        :class="`${carbonPrefix}--side-nav__submenu-chevron`"
+        small
+        :aria-label="isExpanded ? 'collapse nav menu' : 'expand nav menu'"
+      >
+        <chevron-down20 class="cv-side-nav-menu__chevron-svg" />
+      </cv-side-nav-icon>
+    </button>
+    <ul :class="`${carbonPrefix}--side-nav__menu`">
+      <slot></slot>
+    </ul>
+  </li>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import ChevronDown20 from '@carbon/icons-vue/es/chevron--down/20';
+import CvSideNavIcon from './CvSideNavIcon.vue';
+import { computed, onMounted, onUpdated, reactive, useSlots, watch } from 'vue';
+
+const props = defineProps({
+  active: Boolean,
+  title: { type: String, required: true },
+  expanded: { type: Boolean, default: false },
+});
+
+const data = reactive({
+  isExpanded: false,
+  hasNavIcon: false,
+});
+const isExpanded = computed(() => data.isExpanded);
+
+const slots = useSlots();
+onMounted(() => {
+  // NOTE: slots is not reactive so needs to be managed on updated
+  data.hasNavIcon = !!slots['nav-icon'];
+});
+onUpdated(() => {
+  data.hasNavIcon = !!slots['nav-icon'];
+});
+
+const hasIcon = computed(() => {
+  return slots['nav-icon'];
+});
+
+function doToggle() {
+  data.isExpanded = !data.isExpanded;
+}
+
+watch(
+  () => props.expanded,
+  value => {
+    data.isExpanded = value;
+  },
+  { immediate: true }
+);
+</script>

package/src/components/CvUIShell/CvSideNavMenuDivider.vue

@@ -0,0 +1,7 @@
+<template>
+  <li :class="`${carbonPrefix}--side-nav__divider`" />
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvUIShell/CvSideNavMenuItem.vue

@@ -0,0 +1,31 @@
+<template>
+  <li :class="`${carbonPrefix}--side-nav__menu-item`">
+    <component
+      :is="tagType"
+      :class="[
+        `${carbonPrefix}--side-nav__link`,
+        { [`${carbonPrefix}--side-nav__link--current`]: active },
+      ]"
+      v-bind="{ ...$attrs, ...linkProps }"
+      role="menuitem"
+    >
+      <cv-side-nav-link-text>
+        <slot />
+      </cv-side-nav-link-text>
+    </component>
+  </li>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
+import CvSideNavLinkText from './_CvSideNavLinkText.vue';
+
+const props = defineProps({
+  active: Boolean,
+  ...propsLink,
+});
+
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+</script>

package/src/components/CvUIShell/CvSkipToContent.vue

@@ -0,0 +1,20 @@
+<template>
+  <component
+    :is="tagType"
+    v-bind="linkProps"
+    :class="`cv-skip-to-content ${carbonPrefix}--skip-to-content`"
+  >
+    <slot>Skip to main content</slot>
+  </component>
+</template>
+
+<script setup>
+import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
+import { carbonPrefix } from '../../global/settings';
+
+const props = defineProps({
+  ...propsLink,
+});
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+</script>

package/src/components/CvUIShell/CvSwitcher.vue

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

package/src/components/CvUIShell/CvSwitcherItem.vue

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

package/src/components/CvUIShell/CvSwitcherItemLink.vue

@@ -0,0 +1,26 @@
+<template>
+  <component
+    :is="tagType"
+    v-bind="linkProps"
+    :class="[
+      `cv-switcher-item-link`,
+      `${carbonPrefix}--switcher__item-link`,
+      { [`${carbonPrefix}--switcher__item-link--selected`]: selected },
+    ]"
+  >
+    <slot />
+  </component>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+import { useTagType, useLinkProps, props as propsLink } from '../../use/cvLink';
+
+const props = defineProps({
+  selected: Boolean,
+  ...propsLink,
+});
+
+const tagType = useTagType(props);
+const linkProps = useLinkProps(props);
+</script>

package/src/components/CvUIShell/CvUIShell.stories.mdx

@@ -0,0 +1,454 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import { action } from '@storybook/addon-actions';
+import CvHeader from './CvHeader.vue'
+import CvSkipToContent from "./CvSkipToContent.vue";
+import CvHeaderName from "./CvHeaderName.vue";
+import CvHeaderNav from "./CvHeaderNav.vue";
+import CvHeaderMenuItem from "./CvHeaderMenuItem.vue";
+import CvHeaderMenuButton from "./CvHeaderMenuButton.vue";
+import CvHeaderMenu from "./CvHeaderMenu.vue";
+import CvHeaderGlobalAction from "./CvHeaderGlobalAction.vue";
+import CvHeaderPanel from "./CvHeaderPanel.vue";
+import CvSwitcher from "./CvSwitcher.vue";
+import CvSwitcherItem from "./CvSwitcherItem.vue";
+import CvSwitcherItemLink from "./CvSwitcherItemLink.vue";
+import CvSideNav from "./CvSideNav.vue";
+import CvSideNavItems from "./CvSideNavItems.vue";
+import CvSideNavLink from "./CvSideNavLink.vue";
+import CvSideNavMenu from "./CvSideNavMenu.vue";
+import CvSideNavMenuDivider from "./CvSideNavMenuDivider.vue";
+import CvSideNavMenuItem from "./CvSideNavMenuItem.vue";
+import { Notification20, UserAvatar20, Login20, Switcher20, Home16, ChatBot16, ConnectionTwoWay16, MachineLearningModel16 } from '@carbon/icons-vue'
+import { ref } from "vue";
+const loggedIn = ref(false)
+
+<Meta title={`${sbCompPrefix}/ui-select/CvHeader`} component={CvHeader} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvHeader,
+    CvSkipToContent,
+    CvHeaderName,
+    CvHeaderNav,
+    CvHeaderMenuItem,
+    CvHeaderMenuButton,
+    CvHeaderMenu,
+    CvHeaderGlobalAction,
+    CvHeaderPanel,
+    CvSwitcher,
+    CvSwitcherItem,
+    CvSwitcherItemLink,
+    CvSideNav,
+    CvSideNavItems,
+    CvSideNavLink,
+    CvSideNavMenu,
+    CvSideNavMenuDivider,
+    CvSideNavMenuItem,
+    Notification20,
+    UserAvatar20,
+    Login20,
+    Switcher20,
+    Home16,
+    ChatBot16,
+    ConnectionTwoWay16,
+    MachineLearningModel16
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+        ...args,
+      actionNotifications: () => {},
+      actionUserAvatar: () => { loggedIn.value = !loggedIn.value},
+      actionAppSwitcher: () => {},
+      onPanelResize: action('panel-resize'),
+      loggedIn
+    }
+  },
+  // And then the `args` are bound to your component with `v-bind="args"`
+  template: args.template,
+});
+const defaultTemplate = `
+<cv-header aria-label="Carbon header">
+  <cv-skip-to-content href="#main-content">
+    Skip to content
+  </cv-skip-to-content>
+  <cv-header-name href="javascript:void(0)" prefix="IBM">
+    [Platform]
+  </cv-header-name>
+  <cv-header-nav aria-label="Carbon nav">
+    <cv-header-menu-item href="javascript:void(0)">
+      Link 1
+    </cv-header-menu-item>
+    <cv-header-menu-item href="javascript:void(0)">
+      Link 2
+    </cv-header-menu-item>
+    <cv-header-menu aria-label="Link 3" title="Link 3">
+      <cv-header-menu-item href="javascript:void(0)">
+        Submenu Link 1
+      </cv-header-menu-item>
+      <cv-header-menu-item href="javascript:void(0)">
+        Submenu Link 2
+      </cv-header-menu-item>
+      <cv-header-menu-item href="javascript:void(0)">
+        Submenu Link 3
+      </cv-header-menu-item>
+    </cv-header-menu>
+  </cv-header-nav>
+  <template v-slot:header-global>
+    <cv-header-global-action
+      aria-label="Notifications"
+      aria-controls="notifications-panel"
+      @click="actionNotifications"
+      label="Notifications"
+      tipPosition="bottom"
+      tipAlignment="start"
+      >
+      <notification20/>
+    </cv-header-global-action>
+    <cv-header-global-action
+      aria-label="User avatar"
+      @click="actionUserAvatar"
+      aria-controls="user-panel"
+      label="Log in"
+      tipPosition="bottom"
+      tipAlignment="center"
+      >
+      <user-avatar20 v-if="loggedIn"/>
+      <login20 v-else />
+    </cv-header-global-action>
+    <cv-header-global-action
+      aria-label="App switcher"
+      aria-controls="switcher-panel"
+      @click="actionAppSwitcher"
+      label="App switcher"
+      tipPosition="bottom"
+      tipAlignment="end"
+      >
+      <switcher20 />
+    </cv-header-global-action>
+  </template>
+  <template v-slot:right-panels>
+    <cv-header-panel  id="user-panel" @panel-resize="onPanelResize">
+      An empty user panel
+    </cv-header-panel>
+    <cv-header-panel  id="notifications-panel" @panel-resize="onPanelResize">
+      An empty panel
+    </cv-header-panel>
+    <cv-header-panel id="switcher-panel" @panel-resize="onPanelResize">
+      <cv-switcher>
+        <cv-switcher-item>
+          <cv-switcher-item-link href="javascript:void(0)" selected>Selected app</cv-switcher-item-link>
+        </cv-switcher-item>
+        <cv-switcher-item>
+          <cv-switcher-item-link href="javascript:void(0)">Other app</cv-switcher-item-link>
+        </cv-switcher-item>
+        <cv-switcher-item>
+          <cv-switcher-item-link href="javascript:void(0)">Yet another app</cv-switcher-item-link>
+        </cv-switcher-item>
+      </cv-switcher>
+    </cv-header-panel>
+  </template>
+</cv-header>
+`
+const railTemplate = `
+<cv-header aria-label="Carbon header">
+  <cv-header-menu-button aria-label="Header menu" aria-controls="side-nav" :active="expandedSideNav"/>
+  <cv-skip-to-content href="#main-content">Skip to content</cv-skip-to-content>
+  <cv-header-name href="javascript:void(0)" prefix="IBM">[Platform]</cv-header-name>
+  <template v-slot:left-panels>
+    <cv-side-nav id="side-nav" @panel-resize="onPanelResize" :rail="true" :fixed="useFixed" :expanded="expandedSideNav">
+      <cv-side-nav-items>
+        <cv-side-nav-menu title="Home">
+          <template v-slot:nav-icon><home16 /></template>
+          <cv-side-nav-menu-item href="javascript:void(0)" active>Lawn care</cv-side-nav-menu-item>
+          <cv-side-nav-menu-item href="javascript:void(0)">Plumbing</cv-side-nav-menu-item>
+          <cv-side-nav-menu-item href="javascript:void(0)">Heating & Air</cv-side-nav-menu-item>
+        </cv-side-nav-menu>
+        <cv-side-nav-menu title="Chat ">
+          <template v-slot:nav-icon><chat-bot16 /></template>
+          <cv-side-nav-menu-item href="javascript:void(0)">Bender</cv-side-nav-menu-item>
+          <cv-side-nav-menu-item href="javascript:void(0)" aria-current="page">Sonny</cv-side-nav-menu-item>
+          <cv-side-nav-menu-item href="javascript:void(0)">Rosie</cv-side-nav-menu-item>
+        </cv-side-nav-menu>
+        <cv-side-nav-menu-divider/>
+        <cv-side-nav-link href="javascript:void(0)">
+          <template v-slot:nav-icon><connection-two-way16 /></template>
+          Connection
+        </cv-side-nav-link>
+        <cv-side-nav-link href="javascript:void(0)">
+          <template v-slot:nav-icon><machine-learning-model16 /></template>
+          Machine Learning
+        </cv-side-nav-link>
+      </cv-side-nav-items>
+    </cv-side-nav>
+  </template>
+</cv-header>
+`
+const fixedSideNavTemplate = `
+<cv-header aria-label="Carbon header">
+  <cv-skip-to-content href="#main-content">
+    Skip to content
+  </cv-skip-to-content>
+  <cv-header-name href="javascript:void(0)" prefix="IBM">
+    [Platform]
+  </cv-header-name>
+</cv-header>
+<cv-side-nav id="side-nav" @panel-resize="onPanelResize" :rail="false" :fixed="true" :expanded="true">
+  <cv-side-nav-items>
+    <cv-side-nav-menu title="Home">
+      <template v-slot:nav-icon><home16 /></template>
+      <cv-side-nav-menu-item href="javascript:void(0)" active>Lawn care</cv-side-nav-menu-item>
+      <cv-side-nav-menu-item href="javascript:void(0)">Plumbing</cv-side-nav-menu-item>
+      <cv-side-nav-menu-item href="javascript:void(0)">Heating & Air</cv-side-nav-menu-item>
+    </cv-side-nav-menu>
+    <cv-side-nav-menu title="Chat ">
+      <template v-slot:nav-icon><chat-bot16 /></template>
+      <cv-side-nav-menu-item href="javascript:void(0)">Bender</cv-side-nav-menu-item>
+      <cv-side-nav-menu-item href="javascript:void(0)" aria-current="page">Sonny</cv-side-nav-menu-item>
+      <cv-side-nav-menu-item href="javascript:void(0)">Rosie</cv-side-nav-menu-item>
+    </cv-side-nav-menu>
+    <cv-side-nav-menu-divider/>
+    <cv-side-nav-link href="javascript:void(0)">
+      <template v-slot:nav-icon><connection-two-way16 /></template>
+      Connection
+    </cv-side-nav-link>
+    <cv-side-nav-link href="javascript:void(0)">
+      <template v-slot:nav-icon><machine-learning-model16 /></template>
+      Machine Learning
+    </cv-side-nav-link>
+  </cv-side-nav-items>
+</cv-side-nav>
+`
+
+# UI Shell components
+Set of components for managing navigation and header bars.
+
+## CvHeader
+Slots:
+- default - buttons links etc
+- header-global - Global button content
+- left-panels - Content panel on the left - side nav
+- right-panels - Right panel content - users, languages, notifications, switcher, etc
+
+
+## CvHeaderGlobalAction
+Properties:
+- active - `Boolean` - Specify whether the menu button is "active".
+- ariaControls - `String` Specify the id of a panel that this button controls
+- label - `String` - button label
+- tipPosition - `String` - `top`, `left`, `bottom`, `right`. Default: `bottom`
+- tipAlignment - `String` - `start`, `center`, `end`. Default `center`
+
+Slots:
+- icon - Icon for the action
+
+## CvHeaderMenu
+Properties:
+- title - `String` - Provide a label for the link text
+- hoverToggle - `Boolean` - activate the menu on hover. Default `true`
+
+Slots:
+- default - menu content
+
+## CvHeaderMenuButton
+Properties:
+- active - `Boolean` - Specify whether the menu button is "active".
+- ariaControls - **required** `String` Specify the id of a panel that this button controls
+
+## CvHeaderMenuItem
+Properties:
+- disabled - `Boolean` link is disabled
+- to - link router path
+- href - `String` destination. If `to` is specified this value is ignored
+- active - `Boolean` - Specify whether the menu button is "active".
+- ariaCurrent - `String` - `aria-current` for this button
+- role - `String` - role value for the main component. Default `undefned`
+
+Slots:
+- default - menu content
+
+## CvHeaderName
+Properties:
+- prefix - `String` - Optionally specify a prefix to your header name. Useful for companies, for example: IBM [Product Name] versus solely [Product Name]
+- disabled - `Boolean` link is disabled
+- to - link router path
+- href - `String` destination. If `to` is specified this value is ignored
+
+Slots:
+- default - header content
+
+## CvHeaderNav
+Properties:
+- ariaLabelledBy - `String` `aria-labelledby`  value
+
+Slots:
+- default - nav content
+
+## CvHeaderPanel
+Properties:
+- **Migration Note** - The `v-model` has changed in Vue 3. To control expanded as a `v-model` specify `v-model:expanded`
+- expanded - `Boolean` - Specify whether the panel is expanded
+- id - `String` - **required** this id must match the `ariaControls` value of the button that controls this panel
+
+Slots:
+- default - panel content
+
+## CvSideNav
+Properties:
+- **Migration Note** - The `v-model` has changed in Vue 3. To control expanded as a `v-model` specify `v-model:expanded`
+- expanded - `Boolean` - Specify whether the panel is expanded
+- id - `String` - **required** this id must match the `ariaControls` value of the button that controls this side nav
+- fixed - `Boolean` - Specify if side nav is standalone. Default: `false`
+- rail - `Boolean` - Optional prop to display the side nav as a rail
+- assistiveToggleText - `String` - Assistive text for a non-rail, non-fixed, non-header controlled side nav
+
+Slots:
+- default - nav content
+
+## CvSideNavIcon
+Properties:
+- small - `Boolean` - Use a smaller icon
+
+Slots:
+- default - icon
+
+## CvSideNavLink
+Properties:
+- active - `Boolean` - Specify whether the menu button is "active".
+- icon - icon object to display with the link
+- disabled - `Boolean` link is disabled
+- to - link router path
+- href - `String` destination. If `to` is specified this value is ignored
+
+Slots:
+- default - nav content
+
+## CvSideNavMenu
+Properties:
+- active - `Boolean` - Specify whether the menu is "active".
+- title - `String` - Provide a label for the link text
+- expanded - `Boolean` - Specify whether the menu is expanded
+
+Slots:
+- default - menu content
+- nav-icon - icon
+
+## CvSideNavMenuDivider
+Draw a divider line. No props or slots.
+
+## CvSideNavMenuItem
+Properties:
+- active - `Boolean` - Specify whether the menu is "active".
+- disabled - `Boolean` link is disabled
+- to - Vue router path
+- href - `String` destination. If `to` is specified this value is ignored
+
+Slots:
+- default - menu content
+
+## CvSkipToContent
+Properties:
+- disabled - `Boolean` link is disabled
+- to - Vue router path
+- href - `String` destination. If `to` is specified this value is ignored
+
+Slots:
+- default - default "Skip to main content"
+
+## CvSwitcher
+Slots:
+- default - include switcher content
+
+## CvSwitcherItem
+Slots:
+- default - include switcher item content
+
+## CvSwitcherItemLink
+Properties:
+- disabled - `Boolean` link is disabled
+- to - Vue router path
+- href - `String` destination. If `to` is specified this value is ignored
+- selected - `Boolean` is this item selected
+
+Slots:
+- default - item content
+
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: { exclude: [
+          'template',
+          'default',
+          'header-global',
+          'left-panels',
+          'right-panels'
+        ] },
+      docs: { source: { code: defaultTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: defaultTemplate,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+# CvHeader with side rail
+
+<Canvas>
+  <Story
+    name="Side rail"
+    parameters={{
+      controls: { exclude: [
+          'template',
+          'default',
+          'header-global',
+          'left-panels',
+          'right-panels'
+        ] },
+      docs: { source: { code: railTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: railTemplate,
+      useFixed: false,
+      expandedSideNav: false,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+# CvHeader with fixed side nav
+
+<Canvas>
+  <Story
+    name="Fixed side nav"
+    parameters={{
+      controls: { exclude: [
+          'template',
+          'default',
+          'header-global',
+          'left-panels',
+          'right-panels'
+        ] },
+      docs: { source: { code: fixedSideNavTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: fixedSideNavTemplate,
+    }}
+    argTypes={{
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>