@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/cv-ui-shell/cv-skip-to-content.vue

@@ -1,19 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    :class="`cv-skip-to-content ${carbonPrefix}--skip-to-content`"
-  >
-    <slot>Skip to main content</slot>
-  </component>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvSkipToContent',
-  mixins: [linkMixin, carbonPrefixMixin],
-};
-</script>

package/src/components/cv-ui-shell/cv-switcher-item-link.vue

@@ -1,26 +0,0 @@
-<template>
-  <component
-    :is="tagType"
-    v-on="$listeners"
-    v-bind="linkProps"
-    :class="[
-      `cv-switcher-item-link`,
-      `${carbonPrefix}--switcher__item-link`,
-      { [`${carbonPrefix}--switcher__item-link--selected`]: selected },
-    ]"
-  >
-    <slot />
-  </component>
-</template>
-
-<script>
-import { linkMixin, carbonPrefixMixin } from '../../mixins';
-
-export default {
-  name: 'CvSwitcherItemLink',
-  mixins: [linkMixin, carbonPrefixMixin],
-  props: {
-    selected: Boolean,
-  },
-};
-</script>

package/src/components/cv-ui-shell/cv-switcher-item.vue

@@ -1,13 +0,0 @@
-<template>
-  <li :class="`cv-switcher-item ${carbonPrefix}--switcher__item`">
-    <slot />
-  </li>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSwitcherItem',
-  mixins: [carbonPrefixMixin],
-};
-</script>

package/src/components/cv-ui-shell/cv-switcher.vue

@@ -1,13 +0,0 @@
-<template>
-  <ul :class="`cv-switcher ${carbonPrefix}--switcher__item`">
-    <slot />
-  </ul>
-</template>
-
-<script>
-import { carbonPrefixMixin } from '../../mixins';
-export default {
-  name: 'CvSwitcher',
-  mixins: [carbonPrefixMixin],
-};
-</script>

package/src/components/cv-ui-shell/index.js

@@ -1,45 +0,0 @@
-import CvHeaderGlobalAction from './cv-header-global-action';
-import CvHeaderMenuButton from './cv-header-menu-button';
-import CvHeaderMenuItem from './cv-header-menu-item';
-import CvHeaderMenu from './cv-header-menu';
-import CvHeaderName from './cv-header-name';
-import CvHeaderNav from './cv-header-nav';
-import CvHeaderSideNavItems from './cv-header-side-nav-items';
-import CvHeaderPanel from './cv-header-panel';
-import CvHeader from './cv-header';
-import CvSideNavIcon from './cv-side-nav-icon';
-import CvSideNavItems from './cv-side-nav-items';
-import CvSideNavLink from './cv-side-nav-link';
-import CvSideNavMenuItem from './cv-side-nav-menu-item';
-import CvSideNavMenu from './cv-side-nav-menu';
-import CvSideNav from './cv-side-nav';
-import CvSideNavDivider from './cv-side-nav-divider';
-import CvSkipToContent from './cv-skip-to-content';
-import CvSwitcherItemLink from './cv-switcher-item-link';
-import CvSwitcherItem from './cv-switcher-item';
-import CvSwitcher from './cv-switcher';
-import CvContent from './cv-content';
-
-export {
-  CvContent,
-  CvHeaderGlobalAction,
-  CvHeaderMenuButton,
-  CvHeaderMenuItem,
-  CvHeaderMenu,
-  CvHeaderName,
-  CvHeaderPanel,
-  CvHeaderNav,
-  CvHeaderSideNavItems,
-  CvHeader,
-  CvSideNav,
-  CvSideNavDivider,
-  CvSideNavIcon,
-  CvSideNavItems,
-  CvSideNavLink,
-  CvSideNavMenuItem,
-  CvSideNavMenu,
-  CvSkipToContent,
-  CvSwitcherItemLink,
-  CvSwitcherItem,
-  CvSwitcher,
-};

package/src/components/cv-wrapper/_cv-wrapper.js

@@ -1,33 +0,0 @@
-/*
- * 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 recieve class, style or attributes attached to the wrapper
- *
- * NOTE: If used at the top level of a component in the unwrapped case your component still needs to have a single root node.
- *
- */
-export default {
-  name: 'CvWrapper',
-  functional: true,
-  props: {
-    tagType: { type: String, default: undefined },
-  },
-  render(createElement, context) {
-    if (context.props.tagType) {
-      return createElement(
-        context.props.tagType,
-        {
-          attrs: context.data.attrs,
-          class: `${context.data.class || ''} ${context.data.staticClass || ''}`.trim(),
-          style: { ...context.data.staticStyle, ...context.data.style },
-          on: context.listeners,
-        },
-        context.slots().default
-      );
-    } else {
-      return context.slots().default;
-    }
-  },
-};

package/src/directives/clickout.js

@@ -1,29 +0,0 @@
-// This directive determines calls the associated method if a click happens outside of el
-
-const handlerMap = new WeakMap();
-
-export default {
-  bind(el, binding, vnode) {
-    if (!el.clickOutsideBlur) {
-      el.clickOutsideBlur = function() {
-        // neither element or child of
-        if (!handlerMap.has(el)) {
-          handlerMap.set(el, clickoutEv => {
-            // neither element or child of
-            if (!(el == clickoutEv.target || el.contains(clickoutEv.target))) {
-              // call method
-              vnode.context[binding.expression](clickoutEv);
-            }
-          });
-          document.body.addEventListener('click', handlerMap.get(el));
-        }
-      };
-
-      el.addEventListener('focusout', el.clickOutsideBlur);
-    }
-  },
-  unbind(el) {
-    handlerMap.delete(el);
-    el.removeEventListener('focusout', el.clickOutsideBlur);
-  },
-};

package/src/index-components-vue.js

@@ -1,5 +0,0 @@
-console.error(
-  'The built und and commonjs modules have been renamed from "carbon-components-vue..." to "carbon-vue..."'
-);
-
-alert(`The built und and mommonjs modules have been renamed from "carbon-components-vue..." to "carbon-vue..."`);

package/src/internal/feature-flags.js

@@ -1,22 +0,0 @@
-/**
- * Copyright IBM Corp. 2016, 2018
- *
- * This source code is licensed under the Apache-2.0 license found in the
- * LICENSE file in the root directory of this source tree.
- */
-
-/**
- * This file contains the list of the default values of compile-time feature flags.
- *
- * Build toolchain can replace variable here and/or the references
- * in order to apply non-default values to those feature flags.
- *
- * @example <div v-if="aFeatureFlag">foo</div><div v-else>bar</div>
- * import { aFeatureFlag } from '/path/to/_feagure-flags';
- * ...
- * data() { return { aFeatureFlag } }
- */
-
-export default {
-  aFeatureFlag: false,
-};

package/src/mixins/carbon-prefix-mixin.js

@@ -1,7 +0,0 @@
-import { settings as carbonSettings } from 'carbon-components';
-
-export default {
-  created() {
-    this.carbonPrefix = carbonSettings.prefix;
-  },
-};

package/src/mixins/check-mixin.js

@@ -1,106 +0,0 @@
-/*
- * Provides common checkbox behaviour
- */
-
-export default {
-  props: {
-    modelValue: { type: [Array, Boolean], default: () => undefined },
-    checked: { type: Boolean, default: undefined },
-    name: String,
-    value: { type: String, required: true },
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'modelEvent',
-  },
-  mounted() {
-    if (this.$options.propsData.modelValue === undefined) {
-      this.isChecked = this.checked;
-    }
-  },
-  watch: {
-    checked(val) {
-      if (this.$options.propsData.modelValue === undefined) {
-        this.isChecked = val;
-        if (!val && this.mixed) {
-          this.dataMixed = true;
-        }
-      }
-    },
-  },
-  data() {
-    return {
-      dataChecked: undefined,
-    };
-  },
-  computed: {
-    isArrayModel() {
-      return Array.isArray(this.modelValue);
-    },
-    isChecked: {
-      get() {
-        if (this.$props.modelValue !== undefined) {
-          // model value always comes first
-          if (this.isArrayModel) {
-            if (this.modelValue.includes(this.value)) {
-              return true;
-            } else {
-              return false;
-            }
-          } else {
-            return this.modelValue;
-          }
-        } else {
-          if (this.dataChecked !== undefined) {
-            return this.dataChecked;
-          } else {
-            // if checked defined
-            if (this.dataChecked !== undefined) {
-              return this.dataChecked;
-            }
-            if (this.dataMixed) {
-              return 'mixed';
-            }
-          }
-
-          return false;
-        }
-      },
-      set(checked) {
-        if (this.isArrayModel) {
-          let modelSet = new Set(this.modelValue);
-
-          if (!checked) {
-            modelSet.delete(this.value);
-          } else {
-            modelSet.add(this.value);
-          }
-          this.dataChecked = Array.from(modelSet);
-        } else {
-          this.dataChecked = checked ? true : undefined; //
-          if (this.dataChecked !== undefined) {
-            this.dataMixed = false;
-          }
-        }
-      },
-    },
-    // Bind listeners at the component level to the embedded input element and
-    // add our own input listener to service the v-model. See:
-    // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
-    inputListeners() {
-      return Object.assign({}, this.$listeners, {
-        change: event => this.onChange(event),
-      });
-    },
-  },
-  methods: {
-    onChangeInner(checked) {
-      this.isChecked = checked;
-      this.$emit('modelEvent', this.dataChecked || false); // or false in case dataChecked is undefined
-      this.$emit('change', checked);
-    },
-    onChange(ev) {
-      this.onChangeInner(ev.target.checked);
-    },
-  },
-};

package/src/mixins/index.js

@@ -1,12 +0,0 @@
-// import mixins
-import carbonPrefixMixin from './carbon-prefix-mixin';
-import checkMixin from './check-mixin';
-import linkMixin from './link-mixin';
-import methodsMixin from './methods-mixin';
-import notificationMixin from './notification-mixin';
-import radioMixin from './radio-mixin';
-import themeMixin from './theme-mixin';
-import uidMixin from './uid-mixin';
-
-// export all the mixins
-export { carbonPrefixMixin, checkMixin, linkMixin, methodsMixin, notificationMixin, radioMixin, themeMixin, uidMixin };

package/src/mixins/link-mixin.js

@@ -1,23 +0,0 @@
-export default {
-  props: {
-    disabled: Boolean,
-    to: { type: [String, Object] },
-    href: String,
-  },
-  computed: {
-    tagType() {
-      // if to is used and not href then user wanted a router-link
-      return this.to && !this.href ? 'router-link' : 'a';
-    },
-    linkProps() {
-      if (this.disabled) {
-        return {
-          'aria-disabled': true,
-        };
-      } else if (this.to && !this.href) {
-        return { to: this.to };
-      }
-      return { href: this.href };
-    },
-  },
-};

package/src/mixins/methods-mixin.js

@@ -1,18 +0,0 @@
-const methodsMixin = methodDefs => {
-  const methods = {};
-  const keys = Object.keys(methodDefs);
-
-  for (let key of keys) {
-    for (let method of methodDefs[key]) {
-      methods[method] = function(...args) {
-        this.$refs[key][method](...args);
-      };
-    }
-  }
-
-  return {
-    methods: methods,
-  };
-};
-
-export default methodsMixin;

package/src/mixins/notification-mixin.js

@@ -1,18 +0,0 @@
-const kinds = ['error', 'warning', 'info', 'success'];
-
-export default {
-  props: {
-    kind: {
-      type: String,
-      required: true,
-      validator: value => kinds.includes(value),
-    },
-    title: String,
-    subTitle: String,
-  },
-  computed: {
-    isAlert() {
-      return kinds.indexOf(this.kind) < 2;
-    },
-  },
-};

package/src/mixins/radio-mixin.js

@@ -1,36 +0,0 @@
-export default {
-  inheritAttrs: false,
-  props: {
-    modelValue: String,
-    checked: Boolean,
-    label: String,
-    value: { type: String, required: true },
-  },
-  model: {
-    prop: 'modelValue',
-    event: 'change',
-  },
-  computed: {
-    isChecked() {
-      if (this.modelValue === undefined) {
-        return this.checked;
-      } else {
-        return this.modelValue === this.value;
-      }
-    },
-    // Bind listeners at the component level to the embedded input element and
-    // add our own input listener to service the v-model. See:
-    // https://vuejs.org/v2/guide/components-custom-events.html#Customizing-Component-v-model
-    inputListeners() {
-      return Object.assign({}, this.$listeners, {
-        change: event => this.onChange(event),
-      });
-    },
-  },
-  methods: {
-    onChange() {
-      this.$parent.$emit('cv:change', this.value); // emit to parent
-      this.$emit('change', this.value);
-    },
-  },
-};

package/src/mixins/theme-mixin.js

@@ -1,23 +0,0 @@
-const options = ['light'];
-
-export default {
-  props: {
-    light: Boolean,
-    theme: {
-      type: String,
-      default: undefined,
-      validator: value => {
-        if (value !== undefined && process.env.NODE_ENV === 'development') {
-          console.warn(`theme='light' deprecated in favour of boolean light property.`);
-        }
-
-        return value.length === 0 || options.includes(value);
-      },
-    },
-  },
-  computed: {
-    isLight() {
-      return this.light || this.theme === 'light';
-    },
-  },
-};

package/src/mixins/uid-mixin.js

@@ -1,23 +0,0 @@
-const idGen = {
-  newId() {
-    // as it is funny gen IDs using b - https://gist.github.com/jed/982883
-    const b = a =>
-      a
-        ? (a ^ ((Math.random() * 16) >> (a / 4))).toString(16)
-        : ([1e7] + -1e3 + -4e3 + -8e3 + -1e11).replace(/[018]/g, b);
-
-    return `uid-${b()}`;
-  },
-};
-
-// define a mixin object
-export default {
-  props: {
-    id: { type: String, default: undefined },
-  },
-  computed: {
-    uid() {
-      return this.id && this.id.length ? this.id : idGen.newId();
-    },
-  },
-};

package/src/thumbnails/inline-notification.svg

@@ -1,23 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>inline-notification</title>
-    <defs>
-        <circle id="path-1" cx="5" cy="5" r="4.375"></circle>
-        <polygon id="path-3" points="4.375 6.71875 2.8125 5.15625 3.309375 4.6875 4.375 5.734375 6.690625 3.4375 7.1875 3.93125"></polygon>
-    </defs>
-    <g id="inline-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="77" width="200" height="26"></rect>
-        <g id="icon/status/checkmark-filled/16" transform="translate(69.000000, 85.000000)">
-            <mask id="mask-2" fill="white">
-                <use xlink:href="#path-1"></use>
-            </mask>
-            <use id="icon-color" fill="#24A148" xlink:href="#path-1"></use>
-            <mask id="mask-4" fill="white">
-                <use xlink:href="#path-3"></use>
-            </mask>
-            <use id="icon-color" fill="#FFFFFF" xlink:href="#path-3"></use>
-        </g>
-        <rect id="Path-Copy-2" fill="#24A148" x="60" y="77" width="2" height="26"></rect>
-        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="85" y="88" width="100.088235" height="4"></rect>
-    </g>
-</svg>

package/src/thumbnails/skeleton-text.svg

@@ -1,15 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>skeleton-text</title>
-    <defs>
-        <linearGradient x1="-21.9775656%" y1="50%" x2="113.47099%" y2="50%" id="linearGradient-1">
-            <stop stop-color="#C6C6C6" stop-opacity="0" offset="0%"></stop>
-            <stop stop-color="#C6C6C6" offset="100%"></stop>
-        </linearGradient>
-    </defs>
-    <g id="skeleton-text" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle" fill="#E0E0E0" x="56" y="82" width="208" height="16"></rect>
-        <rect id="Rectangle" fill="#C6C6C6" x="56" y="82" width="156" height="16"></rect>
-        <rect id="Rectangle" fill="url(#linearGradient-1)" transform="translate(215.500000, 90.000000) scale(-1, 1) translate(-215.500000, -90.000000) " x="212" y="82" width="7" height="16"></rect>
-    </g>
-</svg>

package/src/thumbnails/toast-notification.svg

@@ -1,34 +0,0 @@
-<?xml version="1.0" encoding="UTF-8"?>
-<svg width="320px" height="180px" viewBox="0 0 320 180" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
-    <title>toast-notification</title>
-    <defs>
-        <circle id="path-1" cx="6.125" cy="6.125" r="6.125"></circle>
-        <polygon id="path-3" points="3.00668244 -0.342156092 3.99105744 -0.342156092 3.99105744 7.33596891 3.00668244 7.33596891"></polygon>
-    </defs>
-    <g id="toast-notification" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
-        <rect id="Rectangle-2-Copy-27" fill="#393939" x="60" y="56" width="200" height="68"></rect>
-        <rect id="Path-Copy-2" fill="#DA1E28" x="60" y="56" width="3" height="68"></rect>
-        <g id="Group" transform="translate(73.000000, 68.000000)">
-            <g id="Group" transform="translate(7.000000, 7.000000) scale(-1, 1) translate(-7.000000, -7.000000) ">
-                <g id="error--filled" transform="translate(0.875000, 0.875000)">
-                    <g id="icon-2">
-                        <mask id="mask-2" fill="white">
-                            <use xlink:href="#path-1"></use>
-                        </mask>
-                        <use id="icon-color" fill="#DA1E28" xlink:href="#path-1"></use>
-                    </g>
-                    <g id="icon-1" transform="translate(2.625000, 2.625000)">
-                        <mask id="mask-4" fill="white">
-                            <use xlink:href="#path-3"></use>
-                        </mask>
-                        <use id="icon-color" fill="#000000" transform="translate(3.498870, 3.496906) rotate(-45.000000) translate(-3.498870, -3.496906) " xlink:href="#path-3"></use>
-                    </g>
-                </g>
-                <rect id="transparent-rectangle" x="0" y="0" width="14" height="14"></rect>
-            </g>
-        </g>
-        <rect id="Rectangle-Copy-14" fill="#F4F4F4" x="95" y="72" width="71.1191279" height="5"></rect>
-        <rect id="Rectangle-Copy-23" fill="#E0E0E0" x="95" y="105" width="93.8444444" height="5"></rect>
-        <rect id="Rectangle-Copy-24" fill="#E0E0E0" x="95" y="82" width="123" height="5"></rect>
-    </g>
-</svg>