@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CToast.vue

@@ -32,7 +32,7 @@
   </sl-alert>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   faCircleCheck,
   faCircleExclamation,
@@ -43,8 +43,8 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import type SlAlert from '@shoelace-style/shoelace/dist/components/alert/alert.js';
 import type { ElementAnimation } from '@shoelace-style/shoelace/dist/utilities/animation-registry';
-import type { PropType } from 'vue';
-import { computed, defineComponent, onBeforeUnmount, ref, watchEffect } from 'vue';
+import type { VNode } from 'vue';
+import { computed, onBeforeUnmount, ref, watchEffect } from 'vue';
 
 import CIconButton from '@propelinc/citrus-ui/src/components/CIconButton.vue';
 import { useShoelaceAnimation } from '@propelinc/citrus-ui/src/composables/animation';
@@ -62,150 +62,153 @@ const MIN_SWIPE_DISTANCE = 150;
  * it to be considered a successful swipe. */
 const MIN_SWIPE_VELOCITY = 0.75;
 
-export default defineComponent({
-  name: 'CToast',
-  components: { FontAwesomeIcon, CIconButton },
-  props: {
-    /** Show/hides the toast */
-    value: { type: Boolean, default: false },
-    /** The message rendered in the toast, using the default slot overrides this value */
-    message: { type: String, default: '' },
+const props = withDefaults(
+  defineProps<{
+    /** The data-test attribute for the toast. */
+    dataTest?: string;
+    /** Controls (overrides) whether the toast is dismissible. */
+    dismissible?: boolean | undefined;
     /**
      * @deprecated use `variant` prop instead
      * Renders the error state
      */
-    error: { type: Boolean, default: false, deprecated: true },
+    error?: boolean;
+    /** The message rendered in the toast, using the default slot overrides this value */
+    message?: string;
     /**
      * @deprecated use `variant` prop instead
      * Renders the success state
      */
-    success: { type: Boolean, default: false, deprecated: true },
+    success?: boolean;
+    /** Show/hides the toast */
+    value?: boolean;
+    /** The variant of the toast */
+    variant?: ToastVariant;
     /**
      * @deprecated use `variant` prop instead
      * Renders the warning state
      */
-    warning: { type: Boolean, default: false, deprecated: true },
-    /** The variant of the toast */
-    variant: { type: String as PropType<ToastVariant>, default: 'info' },
-    /** Controls (overrides) whether the toast is dismissible. */
-    dismissible: { type: Boolean as PropType<boolean | undefined>, default: undefined },
-    /** The data-test attribute for the toast. */
-    dataTest: { type: String, default: 'toast' },
-  },
-  emits: ['hide', 'input'],
-  setup(props, { emit }) {
-    const alert = ref<SlAlert | null>(null);
-    const isOpen = ref(props.value);
+    warning?: boolean;
+  }>(),
+  {
+    dataTest: 'toast',
+    dismissible: undefined,
+    error: false,
+    message: '',
+    success: false,
+    variant: 'info',
+    value: false,
+    warning: false,
+  }
+);
 
-    /**
-     * Handle merging the deprecated `error`, `success`, and `warning` props
-     * with the `variant` prop.
-     */
-    const computedVariant = computed(() => {
-      if (props.error) {
-        return 'error';
-      } else if (props.success) {
-        return 'success';
-      } else if (props.warning) {
-        return 'warning';
-      }
-      return props.variant;
-    });
-
-    const show = async (): Promise<void> => {
-      isOpen.value = true;
-      alert.value?.toast();
-    };
-
-    const onHide = (): void => {
-      isOpen.value = false;
-      emit('input', false);
-      emit('hide');
-    };
-
-    const close = async (): Promise<void> => {
-      alert.value?.hide();
-    };
-
-    // If our value changes, show or hide the toast respectively
-    watchEffect(() => (props.value ? show() : close()));
-
-    // Close the toast when the component is unmounted
-    onBeforeUnmount(() => close());
-
-    const shouldAutoDismiss = computed(() => {
-      if (props.dismissible !== undefined) {
-        return !props.dismissible;
-      }
-      return computedVariant.value === 'success';
-    });
-
-    const duration = computed(() => {
-      return shouldAutoDismiss.value ? DEFAULT_DURATION : Infinity;
-    });
-
-    const icon = computed(() => {
-      if (computedVariant.value === 'error') {
-        return faCircleExclamation;
-      } else if (computedVariant.value === 'success') {
-        return faCircleCheck;
-      } else {
-        return faInfoCircle;
-      }
-    });
-
-    const alertHideAnimation = ref<ElementAnimation | 'default'>('default');
-    useShoelaceAnimation(alert, 'alert.hide', alertHideAnimation);
-
-    const resetAnimation = (): void => {
-      alertHideAnimation.value = 'default';
-    };
-
-    const { base } = useShoelaceShadowParts(alert, ['base']);
-    const { dragDistance } = useDragListener(base, {
-      onDragEnd: async ({ distance, velocity }) => {
-        const absoluteDistance = Math.abs(distance.x);
-        const absoluteVelocity = Math.abs(velocity.x);
-        const shouldDismiss =
-          absoluteDistance > MIN_SWIPE_DISTANCE || absoluteVelocity > MIN_SWIPE_VELOCITY;
-        const dismissStart = absoluteDistance / base.value!.clientWidth;
-        if (shouldDismiss) {
-          const remainingDismissDistance = Math.max(base.value!.clientWidth - absoluteDistance, 0);
-          const dismissDuration =
-            remainingDismissDistance / Math.max(absoluteVelocity, MIN_SWIPE_VELOCITY);
-          const slideDirection = velocity.x > 0 ? slideRight : slideLeft;
-          alertHideAnimation.value = slideDirection({
-            start: dismissStart,
-            duration: dismissDuration,
-            end: 1.1,
-          });
-          close();
-        } else {
-          const slideDirection = velocity.x > 0 ? slideRight : slideLeft;
-          const slideBack = slideDirection({ start: dismissStart, end: 0 });
-          base.value?.animate(slideBack.keyframes, slideBack.options);
-        }
-      },
-    });
-
-    const transform = computed(() => {
-      return `translateX(${dragDistance.value?.x ?? 0}px)`;
-    });
-
-    return {
-      duration,
-      alert,
-      icon,
-      faXmark,
-      isOpen,
-      computedVariant,
-      close,
-      onHide,
-      transform,
-      resetAnimation,
-    };
+const emit = defineEmits<{
+  hide: [];
+  input: [value: boolean];
+}>();
+
+defineSlots<{
+  icon?: () => VNode[];
+  default?: () => VNode[];
+}>();
+
+const alert = ref<SlAlert | null>(null);
+const isOpen = ref(props.value);
+
+/**
+ * Handle merging the deprecated `error`, `success`, and `warning` props
+ * with the `variant` prop.
+ */
+const computedVariant = computed(() => {
+  if (props.error) {
+    return 'error';
+  } else if (props.success) {
+    return 'success';
+  } else if (props.warning) {
+    return 'warning';
+  }
+  return props.variant;
+});
+
+const show = async (): Promise<void> => {
+  isOpen.value = true;
+  alert.value?.toast();
+};
+
+const onHide = (): void => {
+  isOpen.value = false;
+  emit('input', false);
+  emit('hide');
+};
+
+const close = async (): Promise<void> => {
+  alert.value?.hide();
+};
+
+// If our value changes, show or hide the toast respectively
+watchEffect(() => (props.value ? show() : close()));
+
+// Close the toast when the component is unmounted
+onBeforeUnmount(() => close());
+
+const shouldAutoDismiss = computed(() => {
+  if (props.dismissible !== undefined) {
+    return !props.dismissible;
+  }
+  return computedVariant.value === 'success';
+});
+
+const duration = computed(() => {
+  return shouldAutoDismiss.value ? DEFAULT_DURATION : Infinity;
+});
+
+const icon = computed(() => {
+  if (computedVariant.value === 'error') {
+    return faCircleExclamation;
+  } else if (computedVariant.value === 'success') {
+    return faCircleCheck;
+  } else {
+    return faInfoCircle;
+  }
+});
+
+const alertHideAnimation = ref<ElementAnimation | 'default'>('default');
+useShoelaceAnimation(alert, 'alert.hide', alertHideAnimation);
+
+const resetAnimation = (): void => {
+  alertHideAnimation.value = 'default';
+};
+
+const { base } = useShoelaceShadowParts(alert, ['base']);
+const { dragDistance } = useDragListener(base, {
+  onDragEnd: async ({ distance, velocity }) => {
+    const absoluteDistance = Math.abs(distance.x);
+    const absoluteVelocity = Math.abs(velocity.x);
+    const shouldDismiss =
+      absoluteDistance > MIN_SWIPE_DISTANCE || absoluteVelocity > MIN_SWIPE_VELOCITY;
+    const dismissStart = absoluteDistance / base.value!.clientWidth;
+    if (shouldDismiss) {
+      const remainingDismissDistance = Math.max(base.value!.clientWidth - absoluteDistance, 0);
+      const dismissDuration =
+        remainingDismissDistance / Math.max(absoluteVelocity, MIN_SWIPE_VELOCITY);
+      const slideDirection = velocity.x > 0 ? slideRight : slideLeft;
+      alertHideAnimation.value = slideDirection({
+        start: dismissStart,
+        duration: dismissDuration,
+        end: 1.1,
+      });
+      close();
+    } else {
+      const slideDirection = velocity.x > 0 ? slideRight : slideLeft;
+      const slideBack = slideDirection({ start: dismissStart, end: 0 });
+      base.value?.animate(slideBack.keyframes, slideBack.options);
+    }
   },
 });
+
+const transform = computed(() => {
+  return `translateX(${dragDistance.value?.x ?? 0}px)`;
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/CToastsList.vue

@@ -10,23 +10,10 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import CToast from '@propelinc/citrus-ui/src/components/CToast.vue';
 
 import { useToast } from '../composables/toast';
 
-export default defineComponent({
-  name: 'CToastsList',
-  components: { CToast },
-  setup() {
-    const { toasts, dismissToast } = useToast();
-
-    return {
-      toasts,
-      dismissToast,
-    };
-  },
-});
+const { toasts, dismissToast } = useToast();
 </script>

package/src/components/CValidationMessage.vue

@@ -19,37 +19,44 @@
   </div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed } from 'vue';
 
 import CFadeTransition from '@propelinc/citrus-ui/src/components/CFadeTransition.vue';
 import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
 
-export default defineComponent({
-  name: 'CValidationMessage',
-  components: { CFadeTransition },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Test selector for the component */
-    dataTest: { type: String, default: 'validation-message' },
+    dataTest?: string;
+    /**
+     * Whether to hide the component. If "auto", the component will automatically
+     * hide itself if it has no content.
+     */
+    hide?: boolean | 'auto';
     /** Validation message to display */
-    validationMessage: { type: String as PropType<string | null>, default: null },
-    /** Whether to hide the component. If "auto", the component will automatically
-     * hide itself if it has no content. */
-    hide: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
-  },
-  setup(props) {
-    const appendSlotHasContent = useSlotHasContent('append');
-    const isHidden = computed(() => {
-      if (props.hide === 'auto') {
-        return !props.validationMessage && !appendSlotHasContent.value;
-      } else {
-        return props.hide;
-      }
-    });
+    validationMessage?: string | null;
+  }>(),
+  {
+    dataTest: 'validation-message',
+    hide: false,
+    validationMessage: null,
+  }
+);
 
-    return { isHidden };
-  },
+defineSlots<{
+  default?: () => VNode[];
+  append?: () => VNode[];
+}>();
+
+const appendSlotHasContent = useSlotHasContent('append');
+const isHidden = computed(() => {
+  if (props.hide === 'auto') {
+    return !props.validationMessage && !appendSlotHasContent.value;
+  } else {
+    return props.hide;
+  }
 });
 </script>
 

package/src/components/CZipcodeField.vue

@@ -29,8 +29,9 @@
   </CMaskedTextField>
 </template>
 
-<script lang="ts">
-import { type PropType, computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed } from 'vue';
 
 import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
 import { useFocusableField } from '@propelinc/citrus-ui/src/composables/fields';
@@ -38,32 +39,44 @@ import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
 import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
 import { minLengthRule } from '@propelinc/shared-utils';
 
-export default defineComponent({
-  name: 'CZipcodeField',
-  components: { CMaskedTextField },
-  props: {
-    dataTest: { type: String, default: 'zipcode-field' },
-    id: { type: String, default: undefined },
-    label: { type: String as PropType<string | null>, default: null },
-    placeholder: { type: String as PropType<string | null>, default: null },
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    value: { type: String, default: '' },
-  },
-  emits: ['input', 'focus', 'blur', 'change'],
-  setup(props, { expose }) {
-    const { t } = useTranslation();
+const props = withDefaults(
+  defineProps<{
+    dataTest?: string;
+    id?: string;
+    label?: string | null;
+    placeholder?: string | null;
+    rules?: Rules<string>;
+    value?: string;
+  }>(),
+  {
+    dataTest: 'zipcode-field',
+    id: undefined,
+    label: null,
+    placeholder: null,
+    rules: (): Rules<string> => [],
+    value: '',
+  }
+);
 
-    const defaultRules = [
-      minLengthRule(5, t('Please enter a valid {inputLabel}', { inputLabel: t('ZIP Code') })),
-    ];
-    const computedRules = computed(() => [...defaultRules, ...props.rules]);
+defineEmits<{
+  input: [value: string];
+  focus: [event: Event];
+  blur: [event: Event];
+  change: [value: string];
+}>();
 
-    const { field } = useFocusableField(expose);
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
 
-    return {
-      computedRules,
-      field,
-    };
-  },
-});
+const { t } = useTranslation();
+
+const defaultRules = [
+  minLengthRule(5, t('Please enter a valid {inputLabel}', { inputLabel: t('ZIP Code') })),
+];
+const computedRules = computed(() => [...defaultRules, ...props.rules]);
+
+const { field, focus } = useFocusableField();
+defineExpose({ focus });
 </script>

package/src/composables/elements.ts

@@ -4,7 +4,7 @@ import { onBeforeUnmount, onMounted, ref, watch } from 'vue';
 // NOTE(mohan): A simplified port of vueuse/core's useResizeObserver.
 // vueuse has type errors because our version of vue is so old.
 export function useResizeObserver(
-  element: Ref<HTMLElement | null>,
+  element: Ref<HTMLElement | null | undefined>,
   callback: (entries: ResizeObserverEntry[]) => void
 ): void {
   if (!('ResizeObserver' in window)) {

package/src/composables/fields.ts

@@ -1,4 +1,4 @@
-import { type Ref, type SetupContext, computed, ref } from 'vue';
+import { type Ref, computed, ref } from 'vue';
 
 export interface Field {
   input: HTMLInputElement | null;
@@ -6,14 +6,14 @@ export interface Field {
 
 interface FocusableField {
   field: Ref<Field | null>;
+  focus: () => void;
 }
 
-export function useFocusableField(expose: SetupContext['expose']): FocusableField {
+export function useFocusableField(): FocusableField {
   const field = ref<Field | null>(null);
   const input = computed(() => field.value?.input as HTMLInputElement);
   function focus(): void {
     input?.value.focus();
   }
-  expose({ focus });
-  return { field };
+  return { field, focus };
 }

package/src/composables/router.ts

@@ -1,4 +1,4 @@
-import { type ComputedRef, type Ref, computed } from 'vue';
+import { type ComputedRef, type MaybeRefOrGetter, type Ref, computed, toValue } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 import { useLink } from 'vue-router';
 
@@ -37,14 +37,15 @@ function useLinkAttrs(href: Ref<string | undefined>): ComputedRef<{
  * @param to - The route to link to.
  * @returns A few helpers can be used to link to the given route.
  */
-export function useRouterLink(to: Ref<RouteLocationRaw | undefined>): RouterComposableHelpers {
+export function useRouterLink(
+  to: MaybeRefOrGetter<RouteLocationRaw | undefined>
+): RouterComposableHelpers {
   // NOTE(mohan): We need to provide a default here or else `useLink` will throw
   // an error.
-  const toWithDefault = computed(() => to.value ?? '');
+  const toWithDefault = computed(() => toValue(to) ?? '');
   const useLinkResult = useLink({ to: toWithDefault });
   const { navigate: _navigate, href: _href } = useLinkResult;
-
-  const isRouterLink = computed(() => !!to.value);
+  const isRouterLink = computed(() => !!toValue(to));
   const href = computed(() => (isRouterLink.value ? _href.value : undefined));
   const linkAttrs = useLinkAttrs(href);
   const navigate = async (event: MouseEvent): Promise<void> => {

package/src/icons.ts

@@ -0,0 +1,6 @@
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { fal } from '@fortawesome/pro-light-svg-icons';
+import { far } from '@fortawesome/pro-regular-svg-icons';
+import { fas } from '@fortawesome/pro-solid-svg-icons';
+
+library.add(fas, far, fal);

package/src/services/injections/buttons.ts

@@ -1,5 +1,5 @@
 import type { InjectionKey, Ref } from 'vue';
 
 export const BLOCK = Symbol('block') as InjectionKey<Ref<boolean>>;
-export const LARGE = Symbol('large') as InjectionKey<Ref<boolean>>;
+export const LARGE = Symbol('large') as InjectionKey<Ref<boolean | null>>;
 export const BOUNCE_AMOUNT = Symbol('bounce-amount') as InjectionKey<number>;

package/src/styles/_core.scss

@@ -312,8 +312,7 @@ $eyebrow: (
 }
 
 @mixin link-underline {
-  // TODO(mohan): Remove important when we remove the v-application a tag styling
-  text-decoration: underline !important;
+  text-decoration: underline;
   text-decoration-skip-ink: none;
   text-underline-offset: 3px;
 }

package/src/styles/_reset.scss

@@ -115,6 +115,6 @@
   a,
   a:active,
   a:hover {
-    text-decoration: none !important;
+    text-decoration: none;
   }
 }

package/src/styles/main.scss

@@ -1,5 +1,7 @@
 @import './reset';
 @import '@shoelace-style/shoelace/dist/themes/light';
+@import './polymath';
+@import './grenette';
 @import './animation';
 @import './typography';
 @import './shoelace';

package/src/types.ts

@@ -12,4 +12,6 @@ export enum InputVariants {
   SEGMENTED = 'segmented',
 }
 
+export type NotificationVariant = 'info' | 'success' | 'error' | 'warning';
+
 export type ToastVariant = 'info' | 'success' | 'error' | 'warning';