@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CBottomSheet.vue

@@ -66,14 +66,13 @@
   </sl-drawer>
 </template>
 
-<script lang="ts">
-import { faXmark } from '@fortawesome/pro-regular-svg-icons';
+<script setup lang="ts">
 import '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
 import type SlDrawer from '@shoelace-style/shoelace/dist/components/drawer/drawer.js';
 import type { ElementAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
 import { setAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry.js';
-import type { Ref } from 'vue';
-import { computed, defineComponent, nextTick, onMounted, ref, toRefs } from 'vue';
+import type { Ref, VNode } from 'vue';
+import { computed, nextTick, onMounted, ref, toRef } from 'vue';
 
 import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
 import CCloseButton from '@propelinc/citrus-ui/src/components/internal/CCloseButton.vue';
@@ -122,217 +121,231 @@ function setCustomAnimation(
   setAnimation(el.value, name, animation);
 }
 
-export default defineComponent({
-  components: { CButtonStack, CCloseButton },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Aria label for the bottom sheet. This is required if title is hidden */
-    ariaLabel: { type: String, default: '' },
+    ariaLabel?: string;
     /** Background color of the bottom sheet */
-    backgroundColor: { type: String, default: '' },
+    backgroundColor?: string;
+    /** If true, the bottom sheet will be contained within the viewport. */
+    contained?: boolean;
     /** Prefix for test selectors */
-    dataTest: { type: String, default: 'bottom-sheet' },
+    dataTest?: string;
     /** Disables the dismiss button */
-    disableDismiss: { type: Boolean, default: false },
+    disableDismiss?: boolean;
     /** Divided into header, body, and footer slots */
-    divided: { type: Boolean, default: false },
+    divided?: boolean;
     /** Fixed size, in CSS units. By default the drawer sizes itself to its contents. */
-    fixedSize: { type: String, default: '' },
+    fixedSize?: string;
     /** Hides the dismiss 'x' button */
-    hideDismiss: { type: Boolean, default: false },
+    hideDismiss?: boolean;
     /** Allows for hiding the entire title bar, both the title and the dismiss 'x' button */
-    hideTitle: { type: Boolean, default: false },
-    /** Toggles the background behind the sheet. If there's no overlay, the sheet
-     * stays open as the user interacts with background content.' */
-    overlay: { type: Boolean, default: true },
-    /** Prevents the sheet from being dismissed when tapping on the overlay. If
+    hideTitle?: boolean;
+    /**
+     * Toggles the background behind the sheet. If there's no overlay, the sheet
+     * stays open as the user interacts with background content.
+     */
+    overlay?: boolean;
+    /**
+     * Prevents the sheet from being dismissed when tapping on the overlay. If
      * there is no overlay then this property is ignored, as the sheet always
-     * stays open. */
-    persistent: { type: Boolean, default: false },
-    /** If true, the bottom sheet will be contained within the viewport. */
-    contained: { type: Boolean, default: false },
+     * stays open.
+     */
+    persistent?: boolean;
     /** Do not animate in the bottom sheet if it starts open. */
-    skipInitialAnimation: { type: Boolean, default: false },
+    skipInitialAnimation?: boolean;
     /** The title of the bottom sheet */
-    title: { type: String, default: '' },
+    title?: string;
     /** Controls whether or not the bottom sheet is showing */
-    value: { type: Boolean, default: false },
-  },
-  emits: ['input', 'opened', 'closed'],
-  setup(props, { emit }) {
-    // NOTE(slanden): Temporarily disabling because it's causing a lot of errors
-    // in the console - uses from CMS aren't specifying aria-label.
-    // watchEffect(() => {
-    //   if (props.hideTitle && !props.ariaLabel) {
-    //     console.error('CBottomSheet: aria-label is required when title is hidden');
-    //   }
-    // });
-
-    // value: Value provided using props which can open/close the bottom sheet.
-    // internalValue: Tracks the open/closed state and lets the bottom sheet open and close even if
-    //                the external value doesn't change.
-    // animatedValue: Same as internalValue but starts at false so the bottom sheet animates if it
-    //                starts in an open state.
-    const { value } = toRefs(props);
-    const internalValue = useInternalValue(value, { onChange: (value) => emit('input', value) });
-    const mounted = ref(false);
-    const animatedValue = computed(() => {
-      // To animate in the bottom sheet we mount the component with the sheet closed.
-      if (!props.skipInitialAnimation && !mounted.value) {
-        return false;
-      }
-      return internalValue.value;
-    });
-    const { cssColor: backgroundCssColor } = useCssColor(() => props.backgroundColor);
-    onMounted(async () => {
-      // The bottom sheet does not animate unless we wait a tick. We don't know exactly why this
-      // is necessary.
-      await nextTick();
-      mounted.value = true;
-    });
-
-    const sheet = ref<SlDrawer | null>(null);
-    const { panel, overlay, body } = useShoelaceShadowParts(sheet, ['panel', 'overlay', 'body']);
-    useScrollBoundary(body);
-
-    // NOTE(mohan): There are three parts to the bottom sheet animation:
-    // 1. CSS variables. These are used when we want to set the exact height and
-    //    opacity, i.e. when the user is actively moving the sheet.
-    // 2. The built-in Shoelace show and hide animations. If a user has swiped
-    //    the sheet away, we calculate the exact animation that will smoothly
-    //    continue the swipe and then dismiss the shoelace drawer.
-    // 3. Manually-called web animations. These are used when the sheet is being
-    //    restored to its original position after a drag that was not fast or
-    //    long enough to count as a swipe.
-    setCustomAnimation(sheet, 'drawer.showBottom', slideUp());
-    setCustomAnimation(sheet, 'drawer.overlay.show', fadeIn());
-    setCustomAnimation(sheet, 'drawer.hideBottom', slideDown());
-    setCustomAnimation(sheet, 'drawer.overlay.hide', fadeOut());
-
-    const handleDismiss = (): void => {
-      internalValue.value = false;
-    };
-
-    const onRequestClose = (event: Event): void => {
-      if (props.persistent) {
-        event.preventDefault();
-      }
-    };
-
-    const onAfterClose = (): void => {
-      // Reset the exit animations in case they were changed in a drag event
-      setCustomAnimation(sheet, 'drawer.hideBottom', slideDown());
-      setCustomAnimation(sheet, 'drawer.overlay.hide', fadeOut());
-      emit('closed');
-    };
+    value?: boolean;
+  }>(),
+  {
+    ariaLabel: '',
+    backgroundColor: '',
+    dataTest: 'bottom-sheet',
+    disableDismiss: false,
+    divided: false,
+    fixedSize: '',
+    hideDismiss: false,
+    hideTitle: false,
+    overlay: true,
+    persistent: false,
+    contained: false,
+    skipInitialAnimation: false,
+    title: '',
+    value: false,
+  }
+);
+
+const emit = defineEmits<{
+  input: [value: boolean];
+  opened: [];
+  closed: [];
+}>();
+
+defineSlots<{
+  header?: () => VNode[];
+  image?: () => VNode[];
+  body?: () => VNode[];
+  footer?: () => VNode[];
+}>();
+
+// NOTE(slanden): Temporarily disabling because it's causing a lot of errors
+// in the console - uses from CMS aren't specifying aria-label.
+// watchEffect(() => {
+//   if (props.hideTitle && !props.ariaLabel) {
+//     console.error('CBottomSheet: aria-label is required when title is hidden');
+//   }
+// });
+
+// value: Value provided using props which can open/close the bottom sheet.
+// internalValue: Tracks the open/closed state and lets the bottom sheet open and close even if
+//                the external value doesn't change.
+// animatedValue: Same as internalValue but starts at false so the bottom sheet animates if it
+//                starts in an open state.
+const valueRef = toRef(props, 'value');
+const internalValue = useInternalValue(valueRef, { onChange: (value) => emit('input', value) });
+const mounted = ref(false);
+const animatedValue = computed(() => {
+  // To animate in the bottom sheet we mount the component with the sheet closed.
+  if (!props.skipInitialAnimation && !mounted.value) {
+    return false;
+  }
+  return internalValue.value;
+});
+const { cssColor: backgroundCssColor } = useCssColor(() => props.backgroundColor);
+onMounted(async () => {
+  // The bottom sheet does not animate unless we wait a tick. We don't know exactly why this
+  // is necessary.
+  await nextTick();
+  mounted.value = true;
+});
 
-    /**
-     * Helper function to calculate the distance ratio of the sheet's transform.
-     */
-    const getTransformDistanceRatio = (distance: number): number => {
-      return distance / (panel.value?.clientHeight ?? SHEET_HEIGHT_FALLBACK);
-    };
-
-    const { dragDistance } = useDragListener(panel, {
-      onDragEnd: async ({ distance, velocity }) => {
-        const shouldDismiss =
-          !props.persistent && (distance.y > MIN_SWIPE_DISTANCE || velocity.y > MIN_SWIPE_VELOCITY);
-
-        if (shouldDismiss) {
-          const remainingDismissDistance = panel.value!.clientHeight - dragDistance.value!.y;
-          const dismissDuration = Math.max(
-            remainingDismissDistance / Math.max(velocity.y, MIN_DISMISS_VELOCITY),
-            MIN_DISMISS_DURATION
-          );
-          const dismissStart = getTransformDistanceRatio(distance.y);
-
-          // Here we set the custom animations to complete the dismissal animation smoothly
-          // from the point where the user ended their drag event.
-          setCustomAnimation(
-            sheet,
-            'drawer.hideBottom',
-            slideDown({ start: dismissStart, duration: dismissDuration })
-          );
-          setCustomAnimation(
-            sheet,
-            'drawer.overlay.hide',
-            fadeOut({ start: dismissStart, duration: dismissDuration })
-          );
-          handleDismiss();
-        } else {
-          /**
-           * This is when the user's drag event fails to trigger a dismissal
-           * We need to restore the sheet to its original position
-           */
-          const start = 1 - getTransformDistanceRatio(dragDistance.value!.y);
-          const slideUpAnimation = slideUp({ start });
-          const fadeInAnimation = fadeIn({ start });
-
-          // Here we imperatively animate the sheet and overlay back to their original positions
-          panel.value?.animate(slideUpAnimation.keyframes, slideUpAnimation.options);
-          overlay.value?.animate(fadeInAnimation.keyframes, fadeInAnimation.options);
-        }
-      },
-    });
+const sheet = ref<SlDrawer | null>(null);
+const {
+  panel,
+  overlay: overlayPart,
+  body: bodyPart,
+} = useShoelaceShadowParts(sheet, ['panel', 'overlay', 'body']);
+useScrollBoundary(bodyPart);
+
+// NOTE(mohan): There are three parts to the bottom sheet animation:
+// 1. CSS variables. These are used when we want to set the exact height and
+//    opacity, i.e. when the user is actively moving the sheet.
+// 2. The built-in Shoelace show and hide animations. If a user has swiped
+//    the sheet away, we calculate the exact animation that will smoothly
+//    continue the swipe and then dismiss the shoelace drawer.
+// 3. Manually-called web animations. These are used when the sheet is being
+//    restored to its original position after a drag that was not fast or
+//    long enough to count as a swipe.
+setCustomAnimation(sheet, 'drawer.showBottom', slideUp());
+setCustomAnimation(sheet, 'drawer.overlay.show', fadeIn());
+setCustomAnimation(sheet, 'drawer.hideBottom', slideDown());
+setCustomAnimation(sheet, 'drawer.overlay.hide', fadeOut());
+
+const handleDismiss = (): void => {
+  internalValue.value = false;
+};
+
+const onRequestClose = (event: Event): void => {
+  if (props.persistent) {
+    event.preventDefault();
+  }
+};
 
-    /**
-     * The distance that the sheet has been currently dragged
-     */
-    const transformDistance = useElasticClamp(
-      computed(() => dragDistance.value?.y ?? 0),
-      computed(() => ({
-        min: -DRAG_CLAMP_DISTANCE,
-        max: props.persistent ? DRAG_CLAMP_DISTANCE : undefined,
-      }))
-    );
-
-    const transformDistanceRatio = computed(() =>
-      getTransformDistanceRatio(transformDistance.value)
-    );
-
-    const panelTransform = computed(() => `translateY(${transformDistance.value}px)`);
-
-    const overlayOpacity = computed(() => {
-      const result = 1 - transformDistanceRatio.value;
-
-      if (isNaN(result)) {
-        return 1;
-      }
-
-      return result;
-    });
-
-    // NOTE(mohan): We show data-test attributes only when the sheet is open.
-    // This helps simplify testing assertions.
-    const getDataTestAttr = (suffix?: string): string | null => {
-      const dataTest = suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
-      return internalValue.value ? dataTest : null;
-    };
-
-    const footerHasContent = useSlotHasContent('footer');
-
-    const isDismissVisible = computed(
-      () => (!props.persistent && !props.hideDismiss) || props.disableDismiss
-    );
-
-    return {
-      backgroundCssColor,
-      animatedValue,
-      dragDistance,
-      faXmark,
-      footerHasContent,
-      getDataTestAttr,
-      handleDismiss,
-      internalValue,
-      isDismissVisible,
-      onRequestClose,
-      overlayOpacity,
-      panelTransform,
-      onAfterClose,
-      sheet,
-      transformDistance,
-    };
+const onAfterClose = (): void => {
+  // Reset the exit animations in case they were changed in a drag event
+  setCustomAnimation(sheet, 'drawer.hideBottom', slideDown());
+  setCustomAnimation(sheet, 'drawer.overlay.hide', fadeOut());
+  emit('closed');
+};
+
+/**
+ * Helper function to calculate the distance ratio of the sheet's transform.
+ */
+const getTransformDistanceRatio = (distance: number): number => {
+  return distance / (panel.value?.clientHeight ?? SHEET_HEIGHT_FALLBACK);
+};
+
+const { dragDistance } = useDragListener(panel, {
+  onDragEnd: async ({ distance, velocity }) => {
+    const shouldDismiss =
+      !props.persistent && (distance.y > MIN_SWIPE_DISTANCE || velocity.y > MIN_SWIPE_VELOCITY);
+
+    if (shouldDismiss) {
+      const remainingDismissDistance = panel.value!.clientHeight - dragDistance.value!.y;
+      const dismissDuration = Math.max(
+        remainingDismissDistance / Math.max(velocity.y, MIN_DISMISS_VELOCITY),
+        MIN_DISMISS_DURATION
+      );
+      const dismissStart = getTransformDistanceRatio(distance.y);
+
+      // Here we set the custom animations to complete the dismissal animation smoothly
+      // from the point where the user ended their drag event.
+      setCustomAnimation(
+        sheet,
+        'drawer.hideBottom',
+        slideDown({ start: dismissStart, duration: dismissDuration })
+      );
+      setCustomAnimation(
+        sheet,
+        'drawer.overlay.hide',
+        fadeOut({ start: dismissStart, duration: dismissDuration })
+      );
+      handleDismiss();
+    } else {
+      /**
+       * This is when the user's drag event fails to trigger a dismissal
+       * We need to restore the sheet to its original position
+       */
+      const start = 1 - getTransformDistanceRatio(dragDistance.value!.y);
+      const slideUpAnimation = slideUp({ start });
+      const fadeInAnimation = fadeIn({ start });
+
+      // Here we imperatively animate the sheet and overlay back to their original positions
+      panel.value?.animate(slideUpAnimation.keyframes, slideUpAnimation.options);
+      overlayPart.value?.animate(fadeInAnimation.keyframes, fadeInAnimation.options);
+    }
   },
 });
+
+/**
+ * The distance that the sheet has been currently dragged
+ */
+const transformDistance = useElasticClamp(
+  computed(() => dragDistance.value?.y ?? 0),
+  computed(() => ({
+    min: -DRAG_CLAMP_DISTANCE,
+    max: props.persistent ? DRAG_CLAMP_DISTANCE : undefined,
+  }))
+);
+
+const transformDistanceRatio = computed(() => getTransformDistanceRatio(transformDistance.value));
+
+const panelTransform = computed(() => `translateY(${transformDistance.value}px)`);
+
+const overlayOpacity = computed(() => {
+  const result = 1 - transformDistanceRatio.value;
+
+  if (isNaN(result)) {
+    return 1;
+  }
+
+  return result;
+});
+
+// NOTE(mohan): We show data-test attributes only when the sheet is open.
+// This helps simplify testing assertions.
+const getDataTestAttr = (suffix?: string): string | null => {
+  const dataTest = suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
+  return internalValue.value ? dataTest : null;
+};
+
+const footerHasContent = useSlotHasContent('footer');
+
+const isDismissVisible = computed(
+  () => (!props.persistent && !props.hideDismiss) || props.disableDismiss
+);
 </script>
 
 <style lang="scss" scoped>