@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/{cv-ui-shell/_cv-side-nav-footer.vue → CvUIShell/_CvSideNavFooter.vue}

@@ -8,33 +8,29 @@
       :title="assistiveText"
     >
       <div :class="`${carbonPrefix}--side-nav__icon`">
-        <Close20
+        <close20
           v-if="expanded"
           :class="`${carbonPrefix}--side-nav__icon--collapse ${carbonPrefix}--side-nave-collapse-icon`"
         />
-        <ChevronRight20
+        <chevron-right20
           v-if="!expanded"
           :class="`${carbonPrefix}--side-nav__icon--expand ${carbonPrefix}--side-nave-expand-icon`"
         />
       </div>
-      <span :class="`${carbonPrefix}--assistive-text`">{{ assistiveText }}</span>
+      <span :class="`${carbonPrefix}--assistive-text`">{{
+        assistiveText
+      }}</span>
     </button>
   </footer>
 </template>
 
-<script>
+<script setup>
+import { carbonPrefix } from '../../global/settings';
 import Close20 from '@carbon/icons-vue/es/close/20';
 import ChevronRight20 from '@carbon/icons-vue/es/chevron--right/20';
-import { carbonPrefixMixin } from '../../mixins';
 
-export default {
-  name: 'CvSideNavFooter',
-  inheritAttrs: false,
-  mixins: [carbonPrefixMixin],
-  components: { ChevronRight20, Close20 },
-  props: {
-    assistiveText: { type: String, default: 'Open / close side nav' },
-    expanded: Boolean,
-  },
-};
+defineProps({
+  assistiveText: { type: String, default: 'Open / close side nav' },
+  expanded: Boolean,
+});
 </script>

package/src/components/CvUIShell/_CvSideNavLinkText.vue

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

package/src/components/CvWrapper/CvWrapper.js

@@ -0,0 +1,23 @@
+/*
+ * This component optionally wraps slotted content with the specified tag-type.
+ *
+ * If no tag-type is supplied then the slotted content is unwrapped.
+ *
+ *  Unwrapped slots do not receive class, style or attributes attached to the wrapper
+ */
+import { h, useSlots, useAttrs } from 'vue';
+
+export default {
+  name: 'CvWrapper',
+  props: {
+    tagType: { type: String, default: undefined },
+  },
+  setup(props) {
+    const slots = useSlots();
+    const attrs = useAttrs();
+    return () => {
+      if (props.tagType) return h(props.tagType, { ...attrs }, slots.default());
+      else return slots.default();
+    };
+  },
+};

package/src/global/component-utils/event-bus.js

@@ -0,0 +1,23 @@
+import mitt from 'mitt';
+import { unref } from 'vue';
+
+const busses = {};
+/**
+ * Get an event bus
+ * @param {string} busId unique id
+ * @returns {Emitter}
+ */
+export function getBus(busId) {
+  const id = unref(busId);
+  if (!(id in busses)) busses[id] = mitt();
+  return busses[id];
+}
+/**
+ * Remove a previously created event bus
+ * @param {string} busId unique id
+ * @returns {Emitter}
+ */
+export function removeBus(busId) {
+  const id = unref(busId);
+  delete busses[id];
+}

package/src/global/component-utils/validators.js

@@ -0,0 +1,14 @@
+const error = message => console.error(`[@carbon/vue] ${message}`);
+
+export const includesOrError =
+  (haystack, componentName, propName) => needle => {
+    if (!haystack.includes(needle)) {
+      error(
+        `Invalid ${componentName} ${propName} specified "${needle}". Valid values are: ${JSON.stringify(
+          haystack
+        )}`
+      );
+    }
+
+    return true;
+  };

package/src/global/settings.js

@@ -0,0 +1,5 @@
+// import { settings as carbonSettings } from "carbon-components";
+
+const carbonPrefix = 'bx'; // carbonSettings.prefix;
+
+export { carbonPrefix };

package/src/global/storybook-utils/__tests__/story-source-code.js

@@ -0,0 +1,162 @@
+import { storyParametersObject } from '..';
+import { storySourceCode } from '../story-source-code';
+
+describe('global/storybook-utils/storyParametersObject', () => {
+  it('Should build properties from null', () => {
+    const parameters = storyParametersObject(null, '<div v-bind="args" />', {
+      prop1: 'prop1',
+      prop2: 'prop2',
+    });
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop1="prop1" prop2="prop2" />',
+        },
+      },
+    });
+  });
+
+  it('Should build properties from {}', () => {
+    const parameters = storyParametersObject({}, '<div v-bind="args" />', {
+      prop1: 'prop1',
+      prop2: 'prop2',
+    });
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop1="prop1" prop2="prop2" />',
+        },
+      },
+    });
+  });
+
+  it('Should build properties from { docs: {}}', () => {
+    const parameters = storyParametersObject(
+      { docs: {} },
+      '<div v-bind="args" />',
+      {
+        prop1: 'prop1',
+        prop2: 'prop2',
+      }
+    );
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop1="prop1" prop2="prop2" />',
+        },
+      },
+    });
+  });
+
+  it('Should build properties from { docs: { source: {}}}', () => {
+    const parameters = storyParametersObject(
+      { docs: { source: {} } },
+      '<div v-bind="args" />',
+      {
+        prop1: 'prop1',
+        prop2: 'prop2',
+      }
+    );
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop1="prop1" prop2="prop2" />',
+        },
+      },
+    });
+  });
+
+  it('Should build properties from with non-string props', () => {
+    const parameters = storyParametersObject(null, '<div v-bind="args" />', {
+      prop1: true,
+      prop2: 2,
+    });
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop1 :prop2="2" />',
+        },
+      },
+    });
+  });
+
+  it('Should replace alternate v-bind', () => {
+    const parameters = storyParametersObject(
+      null,
+      '<div v-bind="otherProps" />',
+      {
+        prop1: true,
+      },
+      'v-bind="otherProps"'
+    );
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop1 />',
+        },
+      },
+    });
+  });
+
+  it('Should deal with default values', () => {
+    const parameters = storyParametersObject(null, '<div v-bind="args" />', {
+      prop1: false,
+      prop2: '',
+      prop3: 0,
+    });
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div prop2="" :prop3="0" />',
+        },
+      },
+    });
+  });
+
+  it('Is OK with zero pros', () => {
+    const parameters = storyParametersObject(
+      null,
+      '<div v-bind="args" />',
+      null
+    );
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div  />',
+        },
+      },
+    });
+  });
+
+  it('Is does not add slotArgs', () => {
+    const parameters = storyParametersObject(null, '<div v-bind="args" />', {
+      'slotArgs.abc': 'abc',
+    });
+
+    expect(parameters).toEqual({
+      docs: {
+        source: {
+          code: '<div  />',
+        },
+      },
+    });
+  });
+});
+
+describe('global/storybook-utils/storySourceCode', () => {
+  it('Works with a default parameter', () => {
+    const result = storySourceCode('<div v-bind="args" />', {
+      prop1: 'prop1',
+    });
+
+    expect(result).toEqual('<div prop1="prop1" />');
+  });
+});

package/src/global/storybook-utils/controls-from-props.js

@@ -0,0 +1,72 @@
+const storybookType = prop => {
+  const typeOfProp = typeof prop;
+
+  const functionToControlType = fProp => {
+    if (fProp === Boolean) {
+      return 'boolean';
+    } else if (fProp === String) {
+      return 'text';
+    } else if (fProp === Number) {
+      return 'number';
+    } else {
+      return 'text';
+    }
+  };
+
+  const baseTypeToControlType = type => {
+    if (type === 'string') {
+      return 'text';
+    } else {
+      return type;
+    }
+  };
+
+  let control = {};
+  let defaultValue;
+  if (typeOfProp === 'object') {
+    if (prop.type) {
+      control.type = functionToControlType(prop.type);
+    } else {
+      control.type = baseTypeToControlType(typeof prop.default);
+    }
+    if (prop.default) {
+      defaultValue = prop.default;
+    } else {
+      defaultValue = prop.type();
+    }
+  } else {
+    if (typeOfProp === 'function') {
+      control.type = functionToControlType(prop);
+      defaultValue = prop();
+    } else {
+      // base type
+      control.type = baseTypeToControlType(typeOfProp);
+      defaultValue = prop;
+    }
+  }
+
+  return { control, defaultValue };
+};
+
+/**
+ * When declaring props in another file storybook/docgen does not understand the type.
+ * This function returns a storybook control selection for each prop
+ */
+export const storybookControlsFromProps = props => {
+  const controls = {};
+
+  for (let key of Object.keys(props)) {
+    const prop = props[key];
+
+    try {
+      const type = storybookType(prop);
+
+      controls[key] = type;
+    } catch {
+      // Type not added here yet.
+      controls[key] = { control: { type: 'text' }, defaultValue: '' };
+    }
+  }
+
+  return controls;
+};

package/src/global/storybook-utils/index.js

@@ -0,0 +1,5 @@
+export { storybookControlsFromProps } from './controls-from-props';
+export { storySourceCode } from './story-source-code';
+export { storyParametersObject } from './story-source-code';
+export { splitSlotArgs } from './split-slot-args';
+export { sbCompPrefix } from './sbCompPrefix';

package/src/global/storybook-utils/sbCompPrefix.js

@@ -0,0 +1 @@
+export const sbCompPrefix = 'Component';

package/src/global/storybook-utils/split-slot-args.js

@@ -0,0 +1,14 @@
+export const splitSlotArgs = (argsIn = {}, slotArgKeys) => {
+  const keys = Object.keys(argsIn);
+  const slotArgs = {};
+  const args = {};
+  keys.forEach(key => {
+    if (slotArgKeys.includes(key)) {
+      slotArgs[key] = argsIn[key];
+    } else {
+      args[key] = argsIn[key];
+    }
+  });
+
+  return { args, slotArgs };
+};

package/src/global/storybook-utils/story-source-code.js

@@ -0,0 +1,52 @@
+export const storySourceCode = (
+  templateSource,
+  args,
+  replacing = 'v-bind="args"'
+) => {
+  const propToSource = (key, val) => {
+    if (key.startsWith('slotArgs.')) return '';
+
+    const type = typeof val;
+    switch (type) {
+      case 'boolean':
+        return val ? key : '';
+      case 'string':
+        return `${key}="${val}"`;
+      default:
+        return `:${key}="${val}"`;
+    }
+  };
+
+  const argsKeys = args ? Object.keys(args) : [];
+  return templateSource.replace(
+    replacing,
+    argsKeys
+      .map(key => propToSource(key, args[key]))
+      .filter(item => item !== '')
+      .join(' ')
+  );
+};
+
+export const storyParametersObject = (
+  parameters,
+  templateSource,
+  args,
+  replacing = 'v-bind="args"'
+) => {
+  const code = storySourceCode(templateSource, args, replacing);
+
+  if (!parameters) {
+    parameters = { docs: { source: { code } } };
+  } else {
+    if (!parameters.docs) {
+      parameters.docs = { source: { code } };
+    } else {
+      if (!parameters.docs.source) {
+        parameters.docs.source = { code };
+      } else {
+        parameters.docs.source.code = code;
+      }
+    }
+  }
+  return parameters;
+};

package/src/index.js

@@ -1,5 +1,13 @@
-const ctx = require.context('./components/', true, /^(?!.*(?:\/_|-story\.vue|-test\.vue)).*\.vue$/);
-const components = ctx.keys().map(ctx);
+const ctx = require.context(
+  './components/',
+  true,
+  /^(?!.*(?:\/_|\.stories\.vue|\.test\.vue|\.spec\.vue)).*\.vue$/
+);
+const components = ctx.keys().map(k => {
+  const fn = k.split('/').slice(-1)[0];
+  const compName = fn.slice(0, -4);
+  return { name: compName, component: ctx(k) };
+});
 
 // Export the components as a plugin
 export default {
@@ -8,7 +16,7 @@ export default {
   install(Vue, options) {
     if (typeof options === 'undefined') {
       for (let c of components) {
-        Vue.component(c.default.name, c.default);
+        Vue.component(c.name, c.component.default);
       }
     } else {
       if (!(options instanceof Array)) {
@@ -17,88 +25,10 @@ export default {
 
       for (let c of components) {
         // register only components specified in the options
-        if (options.includes(c.default.name)) {
-          Vue.component(c.default.name, c.default);
+        if (options.includes(c.name)) {
+          Vue.component(c.name, c.component.default);
         }
       }
     }
   },
 };
-
-// import/export individual components
-export { CvAccordion, CvAccordionItem, CvAccordionSkeleton } from './components/cv-accordion';
-export { CvAspectRatio } from './components/cv-aspect-ratio';
-export { CvBreadcrumb, CvBreadcrumbItem, CvBreadcrumbSkeleton } from './components/cv-breadcrumb';
-export { CvButton, CvIconButton, CvButtonSkeleton, CvButtonSet } from './components/cv-button';
-export { CvCheckbox, CvCheckboxSkeleton } from './components/cv-checkbox';
-export { CvCodeSnippet, CvCodeSnippetSkeleton } from './components/cv-code-snippet';
-export { CvComboBox } from './components/cv-combo-box';
-export { CvContentSwitcher, CvContentSwitcherButton, CvContentSwitcherContent } from './components/cv-content-switcher';
-export {
-  CvDataTable,
-  CvDataTableRow,
-  CvDataTableCell,
-  CvDataTableAction,
-  CvDataTableSkeleton,
-  CvDataTableHeading,
-} from './components/cv-data-table';
-export { CvDatePicker } from './components/cv-date-picker';
-export { CvDropdown, CvDropdownItem, CvDropdownSkeleton } from './components/cv-dropdown';
-export { CvFileUploader, CvFileUploaderSkeleton } from './components/cv-file-uploader';
-export { CvForm, CvFormItem, CvFormGroup } from './components/cv-form';
-export { CvGrid, CvRow, CvColumn } from './components/cv-grid';
-export { CvInlineLoading } from './components/cv-inline-loading';
-export { CvInlineNotification } from './components/cv-inline-notification';
-export { CvLink } from './components/cv-link';
-export { CvList, CvListItem } from './components/cv-list';
-export { CvLoading } from './components/cv-loading';
-export { CvModal } from './components/cv-modal';
-export { CvMultiSelect } from './components/cv-multi-select';
-export { CvNumberInput, CvNumberInputSkeleton } from './components/cv-number-input';
-export { CvOverflowMenu, CvOverflowMenuItem } from './components/cv-overflow-menu';
-export { CvPagination } from './components/cv-pagination';
-export { CvProgress, CvProgressStep } from './components/cv-progress';
-export { CvRadioGroup, CvRadioButton } from './components/cv-radio-button';
-export { CvSearch } from './components/cv-search';
-export { CvSelect, CvSelectOption, CvSelectOptgroup } from './components/cv-select';
-export { CvSkeletonText } from './components/cv-skeleton-text';
-export { CvSliderSkeleton, CvSlider } from './components/cv-slider';
-export {
-  CvStructuredListData,
-  CvStructuredListHeading,
-  CvStructuredListItem,
-  CvStructuredList,
-} from './components/cv-structured-list';
-export { CvTabs, CvTab, CvTabsSkeleton } from './components/cv-tabs';
-export { CvTag, CvTagSkeleton } from './components/cv-tag';
-export { CvTextArea } from './components/cv-text-area';
-export { CvTextInput } from './components/cv-text-input';
-export { CvTile } from './components/cv-tile';
-export { CvTimePicker } from './components/cv-time-picker';
-export { CvToastNotification } from './components/cv-toast-notification';
-export { CvToggle, CvToggleSkeleton } from './components/cv-toggle';
-export { CvToolbar, CvToolbarTitle, CvToolbarSearch, CvToolbarOption, CvToolbarDivider } from './components/cv-toolbar';
-export { CvTooltip, CvInteractiveTooltip, CvDefinitionTooltip } from './components/cv-tooltip';
-export {
-  CvContent,
-  CvHeaderGlobalAction,
-  CvHeaderMenuButton,
-  CvHeaderMenuItem,
-  CvHeaderMenu,
-  CvHeaderName,
-  CvHeaderNav,
-  CvHeaderSideNavItems,
-  CvHeaderPanel,
-  CvHeader,
-  CvSideNavIcon,
-  CvSideNavItems,
-  CvSideNavLink,
-  CvSideNavMenuItem,
-  CvSideNavMenu,
-  CvSideNav,
-  CvSideNavDivider,
-  CvSkipToContent,
-  CvSwitcherItemLink,
-  CvSwitcherItem,
-  CvSwitcher,
-} from './components/cv-ui-shell';

package/src/use/components.js

@@ -0,0 +1,24 @@
+import { reactivePick } from '@vueuse/core';
+import { computed } from 'vue';
+
+/**
+ * Picks subcomponent props from super component props based on a subcomponent map
+ * @param props Reactive super component props
+ * @param subComponents Map of kind name to component
+ * @param kindKey key under which to find the current kind name in props
+ */
+export const useSubComponentProps = (props, subComponents, kindKey = 'kind') =>
+  computed(() =>
+    reactivePick(props, ...Object.keys(subComponents[props[kindKey]].props))
+  );
+
+/**
+ * Reactive subcomponent and sub props
+ * @param props Reactive super component props
+ * @param subComponents Map of kind name to component
+ * @param kindKey key under which to find the current kind name in props
+ */
+export const useSubComponent = (props, subComponents, kindKey = 'kind') => ({
+  component: computed(() => subComponents[props[kindKey]]),
+  subProps: useSubComponentProps(props, subComponents, kindKey),
+});

package/src/use/cvCheck.js

@@ -0,0 +1,94 @@
+/*
+ * Provides common checkbox behaviour
+ */
+import { unref, ref, computed, watch, onMounted } from 'vue';
+
+export const props = {
+  modelValue: { type: [Array, Boolean], default: undefined },
+  mixed: { type: Boolean, default: null },
+  checked: { type: Boolean, default: undefined },
+  name: String,
+  value: { type: String, required: true },
+};
+
+export function useCheck(props, emit) {
+  const isArrayModel = computed(() => {
+    return Array.isArray(props.modelValue.value);
+  });
+
+  // Maintain the state of the checkbox
+  let dataChecked = ref(undefined);
+  let isChecked = computed({
+    get() {
+      if (props.modelValue.value !== undefined) {
+        // model value always comes first
+        if (isArrayModel.value) {
+          if (props.modelValue.value.includes(unref(props.value))) {
+            return true;
+          } else {
+            return false;
+          }
+        } else {
+          return unref(props.modelValue);
+        }
+      } else {
+        if (dataChecked.value !== undefined) {
+          return dataChecked.value;
+        } else if (dataMixed.value) {
+          return 'mixed';
+        }
+        return false;
+      }
+    },
+    set(checked) {
+      if (isArrayModel.value) {
+        let modelSet = new Set(props.modelValue.value);
+
+        if (!checked) {
+          modelSet.delete(props.value.value);
+        } else {
+          modelSet.add(props.value.value);
+        }
+        dataChecked.value = Array.from(modelSet);
+      } else {
+        dataChecked.value = checked ? true : undefined;
+        if (dataChecked.value !== undefined) {
+          dataMixed.value = false;
+        }
+      }
+    },
+  });
+  onMounted(() => {
+    if (props.modelValue.value === undefined) {
+      isChecked.value = props.checked.value;
+    }
+  });
+
+  // Maintain the state of the aria-checkbox
+  let dataMixed = ref(props.mixed.value);
+  watch(props.mixed, val => {
+    dataMixed.value = val;
+    if (dataMixed.value && props.checked.value !== true) {
+      isChecked.value = false; // reset check state so mixed takes
+    }
+  });
+
+  watch(props.checked, val => {
+    if (props.modelValue.value === undefined) isChecked.value = val;
+    if (!val && dataMixed.value) {
+      dataMixed.value = true;
+    }
+  });
+
+  // Watch for change
+  function onChangeInner(checkedVal) {
+    isChecked.value = checkedVal;
+    emit('update:modelValue', dataChecked.value || false); // or false in case dataChecked is undefined
+    emit('change', checkedVal);
+  }
+  function onChange(ev) {
+    onChangeInner(ev.target.checked);
+  }
+  // expose managed state as return value
+  return { onChange, isChecked };
+}