@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvCodeSnippet/CvCodeSnippet.vue

@@ -0,0 +1,125 @@
+<template>
+  <component :is="component" v-bind="subProps" @copy="handleCopy"
+    ><slot
+  /></component>
+</template>
+
+<script>
+import { useClipboard } from '@vueuse/core';
+import { codeSnippetKinds } from './consts';
+import { includesOrError } from '../../global/component-utils/validators';
+import { carbonPrefix } from '../../global/settings';
+import { useSubComponent } from '../../use/components';
+
+import CviCodeSnippetInline from './_CviCodeSnippetInline.vue';
+import CviCodeSnippetOneline from './_CviCodeSnippetOneline.vue';
+import CviCodeSnippetMultiline from './_CviCodeSnippetMultiline.vue';
+
+export default {
+  name: 'CvCodeSnippet',
+  props: {
+    /** Type of code snippet */
+    kind: {
+      type: String,
+      default: codeSnippetKinds[0],
+      validator: includesOrError(codeSnippetKinds, 'CvCodeSnippet', 'kind'),
+    },
+    /** Text shown to user when copying code */
+    copyFeedback: {
+      type: String,
+      default: 'Copied!',
+    },
+    /** How long should the copy feedback text be shown? */
+    copyFeedbackTimeout: {
+      type: Number,
+      default: 2000,
+    },
+    /** Should the copy button be hidden? (disables copying for inline) */
+    hideCopyButton: {
+      type: Boolean,
+      default: false,
+    },
+    /** Make the component show as disabled & disable copying */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /** Use the light variant */
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    /** (if oneline/multiline) A11y label */
+    ariaLabel: {
+      type: String,
+      default: '',
+    },
+    /** (if multiline) should the code wrap if it's too long? */
+    wrapText: {
+      type: Boolean,
+      default: false,
+    },
+    /** (if multiline) text for collapsing button */
+    lessText: {
+      type: String,
+      default: 'Show less',
+    },
+    /** (if multiline) text for expanding button */
+    moreText: {
+      type: String,
+      default: 'Show more',
+    },
+    /** (if multiline) max amount of rows shown in collapsed view (0 to disable) */
+    maxCollapsedNumberOfRows: {
+      type: Number,
+      default: 15,
+    },
+    /** (if multiline) max amount of rows shown in expanded view (0 to disable) */
+    maxExpandedNumberOfRows: {
+      type: Number,
+      default: 0,
+    },
+    /** (if multiline) min amount of rows shown in collapsed view (0 to disable) */
+    minCollapsedNumberOfRows: {
+      type: Number,
+      default: 3,
+    },
+    /** (if multiline) min amount of rows shown in expanded view (0 to disable) */
+    minExpandedNumberOfRows: {
+      type: Number,
+      default: 16,
+    },
+  },
+  components: {
+    CviCodeSnippetInline,
+    CviCodeSnippetOneline,
+    CviCodeSnippetMultiline,
+  },
+  emits: [
+    /** Emitted when user uses the copy function */
+    'copy',
+  ],
+  setup(props, { emit }) {
+    const { copy } = useClipboard({ read: false });
+
+    const handleCopy = text => {
+      copy(text);
+      emit('copy');
+    };
+
+    const { component, subProps } = useSubComponent(props, {
+      oneline: CviCodeSnippetOneline,
+      multiline: CviCodeSnippetMultiline,
+      inline: CviCodeSnippetInline,
+    });
+
+    return {
+      component,
+      subProps,
+      handleCopy,
+      carbonPrefix,
+      kinds: codeSnippetKinds,
+    };
+  },
+};
+</script>

package/src/components/CvCodeSnippet/CvCodeSnippetSkeleton.vue

@@ -0,0 +1,43 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--snippet`,
+      `${carbonPrefix}--skeleton`,
+      {
+        [`${carbonPrefix}--snippet--single`]: kind === 'oneline',
+        [`${carbonPrefix}--snippet--multi`]: kind === 'multiline',
+        [`${carbonPrefix}--snippet--light`]: light,
+      },
+    ]"
+  >
+    <div :class="`${carbonPrefix}--snippet-container`">
+      <span />
+      <span v-if="kind === 'multiline'" />
+      <span v-if="kind === 'multiline'" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { carbonPrefix } from '../../global/settings';
+import { includesOrError } from '../../global/component-utils/validators';
+import CvCodeSnippetConsts from './consts';
+export default {
+  props: {
+    kind: {
+      type: String,
+      default: CvCodeSnippetConsts.codeSnippetKinds[0],
+      validator: includesOrError(
+        CvCodeSnippetConsts.codeSnippetKinds.slice(0, 2),
+        'CvCodeSnippetSkeleton',
+        'kind'
+      ),
+    },
+    light: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  setup: () => ({ carbonPrefix }),
+};
+</script>

package/src/components/CvCodeSnippet/_CviCodeSnippetInline.vue

@@ -0,0 +1,72 @@
+<template>
+  <span v-if="hideCopyButton" :class="classes">
+    <code ref="text"><slot /></code>
+  </span>
+  <cvi-copy-button
+    v-else
+    :class="classes"
+    @copy="handleCopy"
+    :feedback="copyFeedback"
+    :feedback-timeout="copyFeedbackTimeout"
+    :aria-describedby="codeId"
+  >
+    <code :id="codeId" ref="text"><slot /></code>
+  </cvi-copy-button>
+</template>
+
+<script>
+import { computed, ref } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { useCvId } from '../../use';
+import CviCopyButton from '../CvCopyButton/_CviCopyButton.vue';
+
+export default {
+  props: {
+    /** Text shown to user when copying code */
+    copyFeedback: {
+      type: String,
+      default: 'Copied!',
+    },
+    /** How long should the copy feedback text be shown? */
+    copyFeedbackTimeout: {
+      type: Number,
+      default: 2000,
+    },
+    /** Should the copy button be hidden? */
+    hideCopyButton: {
+      type: Boolean,
+      default: false,
+    },
+    /** Use the light variant */
+    light: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['copy'],
+  components: { CviCopyButton },
+  setup(props, { emit }) {
+    const codeId = useCvId();
+    const classes = computed(() => [
+      `${carbonPrefix}--snippet`,
+      `${carbonPrefix}--snippet--inline`,
+      {
+        [`${carbonPrefix}--snippet--no-copy`]: props.hideCopyButton,
+        [`${carbonPrefix}--snippet--light`]: props.light,
+      },
+    ]);
+
+    const text = ref(null);
+
+    const handleCopy = () => emit('copy', text.value?.innerText);
+
+    return {
+      carbonPrefix,
+      codeId,
+      text,
+      classes,
+      handleCopy,
+    };
+  },
+};
+</script>

package/src/components/CvCodeSnippet/_CviCodeSnippetMultiline.vue

@@ -0,0 +1,199 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--snippet`,
+      `${carbonPrefix}--snippet--multi`,
+      {
+        [`${carbonPrefix}--snippet--no-copy`]: hideCopyButton,
+        [`${carbonPrefix}--snippet--disabled`]: disabled,
+        [`${carbonPrefix}--snippet--light`]: light,
+        [`${carbonPrefix}--snippet--expand`]: isExpanded,
+        [`${carbonPrefix}--snippet--wraptext`]: wrapText,
+      },
+    ]"
+  >
+    <div
+      :class="`${carbonPrefix}--snippet-container`"
+      :aria-label="ariaLabel || 'code-snippet'"
+      :style="styles"
+    >
+      <pre ref="text"><code><slot /></code></pre>
+    </div>
+    <div
+      v-if="hasOverflowLeft"
+      :class="`${carbonPrefix}--snippet__overflow-indicator--left`"
+    ></div>
+    <div
+      v-if="hasOverflowRight"
+      :class="`${carbonPrefix}--snippet__overflow-indicator--right`"
+    ></div>
+    <cv-copy-button
+      v-if="!hideCopyButton"
+      :feedback="copyFeedback"
+      :feedback-timeout="copyFeedbackTimeout"
+      :icon-description="ariaLabel"
+      @copy="handleCopy"
+      :disabled="disabled"
+    />
+    <cv-button
+      v-if="showMoreLessButton"
+      kind="ghost"
+      :class="`${carbonPrefix}--snippet-btn--expand`"
+      :disabled="disabled"
+      @click="isExpanded = !isExpanded"
+    >
+      <span :class="`${carbonPrefix}--snippet-btn--text`">{{
+        isExpanded ? lessText : moreText
+      }}</span>
+      <chevron-down16
+        :class="[
+          `${carbonPrefix}--icon-chevron--down`,
+          `${carbonPrefix}--snippet__icon`,
+        ]"
+      />
+    </cv-button>
+  </div>
+</template>
+
+<script>
+import { computed, ref, toRefs } from 'vue';
+import { useResizeObserver } from '@vueuse/core';
+import { carbonPrefix } from '../../global/settings';
+import { useElementHasOverflow } from '../../use/overflow';
+import CvCopyButton from '../CvCopyButton/CvCopyButton.vue';
+import CvButton from '../CvButton';
+import { ChevronDown16 } from '@carbon/icons-vue';
+
+const ROW_HEIGHT_IN_PX = 16;
+
+export default {
+  props: {
+    /** Text shown to user when copying code */
+    copyFeedback: {
+      type: String,
+      default: 'Copied!',
+    },
+    /** How long should the copy feedback text be shown? */
+    copyFeedbackTimeout: {
+      type: Number,
+      default: 2000,
+    },
+    /** Should the copy button be hidden? */
+    hideCopyButton: {
+      type: Boolean,
+      default: false,
+    },
+    /** Should the code wrap if it's too long? */
+    wrapText: {
+      type: Boolean,
+      default: false,
+    },
+    /** Disable copying */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /** A11y label */
+    ariaLabel: {
+      type: String,
+      default: '',
+    },
+    /** Use the light variant */
+    light: {
+      type: Boolean,
+      default: false,
+    },
+    /** (if multiline) text for collapsing button */
+    lessText: {
+      type: String,
+      default: 'Show less',
+    },
+    /** (if multiline) text for expanding button */
+    moreText: {
+      type: String,
+      default: 'Show more',
+    },
+    /** (if multiline) max amount of rows shown in collapsed view (0 to disable) */
+    maxCollapsedNumberOfRows: {
+      type: Number,
+      default: 15,
+    },
+    /** (if multiline) max amount of rows shown in expanded view (0 to disable) */
+    maxExpandedNumberOfRows: {
+      type: Number,
+      default: 0,
+    },
+    /** (if multiline) min amount of rows shown in collapsed view (0 to disable) */
+    minCollapsedNumberOfRows: {
+      type: Number,
+      default: 3,
+    },
+    /** (if multiline) min amount of rows shown in expanded view (0 to disable) */
+    minExpandedNumberOfRows: {
+      type: Number,
+      default: 16,
+    },
+  },
+  emits: ['copy'],
+  components: {
+    CvCopyButton,
+    CvButton,
+    ChevronDown16,
+  },
+  setup: (props, { emit }) => {
+    const {
+      minCollapsedNumberOfRows: minCollapsed,
+      maxCollapsedNumberOfRows: maxCollapsed,
+      minExpandedNumberOfRows: minExpanded,
+      maxExpandedNumberOfRows: maxExpanded,
+    } = toRefs(props);
+
+    const showMoreLessButton = ref(false);
+    const isExpanded = ref(false);
+    const text = ref(null);
+
+    const { hasOverflowLeft, hasOverflowRight } = useElementHasOverflow(text);
+
+    const handleCopy = () => emit('copy', text.value?.innerText);
+
+    const styles = computed(() => {
+      const [min, max] = isExpanded.value
+        ? [minExpanded.value, maxExpanded.value]
+        : [minCollapsed.value, maxCollapsed.value];
+
+      return {
+        minHeight: min > 0 ? `${min * ROW_HEIGHT_IN_PX}px` : undefined,
+        maxHeight: max > 0 ? `${max * ROW_HEIGHT_IN_PX}px` : undefined,
+      };
+    });
+
+    useResizeObserver(text, ([entries]) => {
+      const { height } = entries.contentRect;
+
+      showMoreLessButton.value =
+        maxCollapsed.value > 0 &&
+        (maxExpanded.value === 0 || maxExpanded.value > maxCollapsed.value) &&
+        height > maxCollapsed.value * ROW_HEIGHT_IN_PX;
+
+      if (
+        isExpanded.value &&
+        minExpanded.value > 0 &&
+        height <= minExpanded.value * ROW_HEIGHT_IN_PX
+      ) {
+        isExpanded.value = false;
+      }
+    });
+
+    return {
+      carbonPrefix,
+      handleCopy,
+      hasOverflowLeft,
+      hasOverflowRight,
+      isExpanded,
+      showMoreLessButton,
+      styles,
+      text,
+    };
+  },
+};
+</script>

package/src/components/CvCodeSnippet/_CviCodeSnippetOneline.vue

@@ -0,0 +1,106 @@
+<template>
+  <div
+    :class="[
+      `${carbonPrefix}--snippet`,
+      `${carbonPrefix}--snippet--single`,
+      {
+        [`${carbonPrefix}--snippet--no-copy`]: hideCopyButton,
+        [`${carbonPrefix}--snippet--disabled`]: disabled,
+        [`${carbonPrefix}--snippet--light`]: light,
+      },
+    ]"
+  >
+    <div
+      role="textbox"
+      :tabindex="disabled ? -1 : 0"
+      :class="`${carbonPrefix}--snippet-container`"
+      :aria-label="ariaLabel || 'code-snippet'"
+      ref="container"
+    >
+      <pre><code ref="text"><slot /></code></pre>
+    </div>
+    <div
+      v-if="hasOverflowLeft"
+      :class="`${carbonPrefix}--snippet__overflow-indicator--left`"
+    ></div>
+    <div
+      v-if="hasOverflowRight"
+      :class="`${carbonPrefix}--snippet__overflow-indicator--right`"
+    ></div>
+    <cv-copy-button
+      v-if="!hideCopyButton"
+      :feedback="copyFeedback"
+      :feedback-timeout="copyFeedbackTimeout"
+      :icon-description="ariaLabel"
+      @copy="handleCopy"
+      :disabled="disabled"
+    />
+  </div>
+</template>
+
+<script>
+import { ref } from 'vue';
+import { carbonPrefix } from '../../global/settings';
+import { useElementHasOverflow } from '../../use/overflow';
+import CvCopyButton from '../CvCopyButton/CvCopyButton.vue';
+
+export default {
+  props: {
+    /** Text shown to user when copying code */
+    copyFeedback: {
+      type: String,
+      default: 'Copied!',
+    },
+    /** How long should the copy feedback text be shown? */
+    copyFeedbackTimeout: {
+      type: Number,
+      default: 2000,
+    },
+    /** Should the copy button be hidden? */
+    hideCopyButton: {
+      type: Boolean,
+      default: false,
+    },
+    /** Should the code wrap if it's too long? */
+    wrapText: {
+      type: Boolean,
+      default: false,
+    },
+    /** Disable copying */
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+    /** A11y label */
+    ariaLabel: {
+      type: String,
+      default: '',
+    },
+    /** Use the light variant */
+    light: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: ['copy'],
+  components: { CvCopyButton },
+  setup: (props, { emit }) => {
+    const text = ref(null);
+    const container = ref(null);
+
+    const { hasOverflowLeft, hasOverflowRight } =
+      useElementHasOverflow(container);
+
+    const handleCopy = () => emit('copy', text.value?.innerText);
+
+    return {
+      carbonPrefix,
+      container,
+      handleCopy,
+      hasOverflowLeft,
+      hasOverflowRight,
+      text,
+    };
+  },
+};
+</script>

package/src/components/CvCodeSnippet/consts.js

@@ -0,0 +1,2 @@
+export const codeSnippetKinds = ['oneline', 'multiline', 'inline'];
+export default { codeSnippetKinds };

package/src/components/CvCodeSnippet/index.js

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