@propelinc/citrus-ui 1.0.5 → 1.3.0

package/src/components/CModalLoading.vue

@@ -12,23 +12,32 @@
   </CModal>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
 import CModal from '@propelinc/citrus-ui/src/components/CModal.vue';
 
-export default defineComponent({
-  name: 'CModalLoading',
-  components: { CModal },
-  props: {
-    /** Controls whether or not the modal is showing */
-    value: { type: Boolean, default: false },
-    /** Controls the message shown below the Modal Loading icon */
-    message: { type: String as PropType<string | null>, default: null },
+withDefaults(
+  defineProps<{
     /** Prefix for test selectors */
-    dataTest: { type: String, default: 'loading-modal' },
-  },
-  emits: ['input'],
-});
+    dataTest?: string;
+    /** Controls the message shown below the Modal Loading icon */
+    message?: string | null;
+    /** Controls whether or not the modal is showing */
+    value?: boolean;
+  }>(),
+  {
+    dataTest: 'loading-modal',
+    message: null,
+    value: false,
+  }
+);
+
+defineEmits<{
+  input: [value: boolean];
+}>();
+
+defineSlots<{
+  loading?: () => VNode[];
+}>();
 </script>

package/src/components/CNotification.vue

@@ -2,10 +2,7 @@
   <div
     data-test="notification"
     class="c-notification"
-    :class="{
-      'c-notification--alert': alert,
-      'c-notification--warning': warning,
-    }"
+    :class="`c-notification--${computedVariant}`"
   >
     <CIconButton
       v-if="dismissible"
@@ -49,35 +46,83 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { faXmark as farXmark } from '@fortawesome/pro-regular-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { computed, defineComponent } from 'vue';
+import { FontAwesomeIcon as FontAwesomeIconComponent } from '@fortawesome/vue-fontawesome';
+import type { Component, VNode } from 'vue';
+import { computed } from 'vue';
+import type { RouteLocationRaw } from 'vue-router';
 
 import CButton from '@propelinc/citrus-ui/src/components/CButton/CButton.vue';
 import CIconButton from '@propelinc/citrus-ui/src/components/CIconButton.vue';
 
-export default defineComponent({
-  components: { CButton, CIconButton, FontAwesomeIcon },
-  props: {
-    // TODO(mohan): Make this prop accessible.
-    alert: { type: Boolean, default: false },
-    warning: { type: Boolean, default: false },
-    dismissible: { type: Boolean, default: false },
-    title: { type: String, default: '' },
-    titleIcon: { type: [String, Array, Object], default: undefined },
-    buttonText: { type: String, default: undefined },
-    buttonTo: { type: [Object, String], default: undefined },
-    buttonHref: { type: String, default: undefined },
-    buttonTarget: { type: String, default: undefined },
-    buttonLoading: { type: Boolean, default: false },
-  },
-  emits: ['click:button', 'dismiss'],
-  setup(props) {
-    const hasButton = computed(() => !!props.buttonText);
-
-    return { hasButton, farXmark };
-  },
+import type { NotificationVariant } from '../types';
+
+// FontAwesomeIcon's prop types produce a union too complex for TypeScript to resolve
+const FontAwesomeIcon = FontAwesomeIconComponent as unknown as Component;
+
+const props = withDefaults(
+  defineProps<{
+    /**
+     * @deprecated use `variant` prop instead
+     * Renders the error state
+     */
+    // TODO(mohan): Make alert prop accessible.
+    alert?: boolean;
+    /**
+     * @deprecated use `variant` prop instead
+     * Renders the warning state
+     */
+    warning?: boolean;
+    /** The variant of the notification */
+    variant?: NotificationVariant;
+    dismissible?: boolean;
+    title?: string;
+    titleIcon?: object;
+    buttonText?: string;
+    buttonTo?: RouteLocationRaw;
+    buttonHref?: string;
+    buttonTarget?: string;
+    buttonLoading?: boolean;
+  }>(),
+  {
+    alert: false,
+    warning: false,
+    variant: 'info',
+    dismissible: false,
+    title: '',
+    titleIcon: undefined,
+    buttonText: undefined,
+    buttonTo: undefined,
+    buttonHref: undefined,
+    buttonTarget: undefined,
+    buttonLoading: false,
+  }
+);
+
+defineEmits<{
+  'click:button': [];
+  'dismiss': [];
+}>();
+
+defineSlots<{
+  title?: () => VNode[];
+  default?: () => VNode[];
+}>();
+
+const hasButton = computed(() => !!props.buttonText);
+
+/**
+ * Handle merging the deprecated `alert` and `warning` props
+ * with the `variant` prop.
+ */
+const computedVariant = computed(() => {
+  if (props.alert) {
+    return 'alert';
+  } else if (props.warning) {
+    return 'warning';
+  }
+  return props.variant;
 });
 </script>
 
@@ -91,6 +136,10 @@ export default defineComponent({
   position: relative;
 }
 
+.c-notification--success {
+  background-color: $color-green-100;
+}
+
 .c-notification--alert {
   background-color: $color-red-100;
 }

package/src/components/CPhoneField.vue

@@ -24,9 +24,9 @@
   </CMaskedTextField>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
-import type { PropType } 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';
@@ -34,36 +34,45 @@ 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: 'CPhoneField',
-  components: { CMaskedTextField },
-  props: {
+withDefaults(
+  defineProps<{
     /** A custom data-test attribute for the input. */
-    dataTest: { type: String, default: 'phone-field' },
+    dataTest?: string;
     /** A unique id for the input. */
-    id: { type: String as PropType<string | undefined>, default: undefined },
+    id?: string;
     /** The input's label. */
-    label: { type: String as PropType<string | null>, default: null },
+    label?: string | null;
     /** The input's placeholder. */
-    placeholder: { type: String, default: '' },
+    placeholder?: string;
     /** Additional validation rules. */
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
+    rules?: Rules<string>;
     /** The value of the input. */
-    value: { type: String, default: '' },
-  },
-  setup(_, { expose }) {
-    const { t } = useTranslation();
+    value?: string;
+  }>(),
+  {
+    dataTest: 'phone-field',
+    id: undefined,
+    label: null,
+    placeholder: '',
+    rules: () => [],
+    value: '',
+  }
+);
 
-    const defaultRules = computed(() => {
-      const errorMessage = t('Please enter a valid {inputLabel}', {
-        inputLabel: t('phone number'),
-      });
-      return [minLengthRule(10, errorMessage)];
-    });
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
 
-    const { field } = useFocusableField(expose);
+const { t } = useTranslation();
 
-    return { defaultRules, field };
-  },
+const defaultRules = computed(() => {
+  const errorMessage = t('Please enter a valid {inputLabel}', {
+    inputLabel: t('phone number'),
+  });
+  return [minLengthRule(10, errorMessage)];
 });
+
+const { field, focus } = useFocusableField();
+defineExpose({ focus });
 </script>

package/src/components/CPill.vue

@@ -22,105 +22,109 @@
   </span>
 </template>
 
-<script lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import type { PropType } from 'vue';
-import { computed, defineComponent, inject } from 'vue';
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon as FontAwesomeIconComponent } from '@fortawesome/vue-fontawesome';
+import type { Component, VNode } from 'vue';
+import { computed, inject } from 'vue';
 
 import {
   ROLE,
   SELECTED_VALUE,
   TOGGLE_VALUE,
 } from '@propelinc/citrus-ui/src/services/injections/pills';
-import type { FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
+
+// FontAwesomeIcon's prop types produce a union too complex for TypeScript to resolve
+const FontAwesomeIcon = FontAwesomeIconComponent as unknown as Component;
 
 type ToggleVariant = 'standalone' | 'group' | 'none';
 
-export default defineComponent({
-  components: { FontAwesomeIcon },
-  props: {
-    /** By default, this is a boolean that determines if the pill is selected or
-    not. If in a pill group, this is a string that identifies this pill. */
-    value: {
-      type: [Boolean, String] as PropType<boolean | string | undefined>,
-      default: undefined,
-    },
+const props = withDefaults(
+  defineProps<{
     /** The icon to display. */
-    icon: { type: [String, Array, Object] as FaPropType, default: undefined },
-  },
-  emits: ['click', 'input'],
-  setup(props, { emit }) {
-    const injectedRole = inject(ROLE, undefined);
-    const injectedSelectedValue = inject(SELECTED_VALUE, undefined);
-    const toggleValue = inject(TOGGLE_VALUE, undefined);
-
-    const toggleVariant = computed<ToggleVariant>(() => {
-      if (toggleValue) {
-        return 'group';
-      }
-
-      if (props.value !== undefined) {
-        return 'standalone';
-      }
-
-      return 'none';
-    });
-
-    const isSelected = computed(() => {
-      if (toggleVariant.value === 'standalone') {
-        // @ts-expect-error - "Expression produces a union type that is too complex to represent" error
-        // unclear why this is occurring, ignoring for now
-        return props.value;
-      }
-
-      if (injectedSelectedValue?.value) {
-        return injectedSelectedValue.value === props.value;
-      }
-
-      return undefined;
-    });
-
-    const ariaChecked = computed((): 'true' | 'false' | undefined => {
-      if (isSelected.value === undefined) {
-        return undefined;
-      }
-
-      return isSelected.value ? 'true' : 'false';
-    });
-
-    const role = computed(() => {
-      if (toggleVariant.value === 'standalone') {
-        return 'radio';
-      }
-
-      if (toggleVariant.value === 'group') {
-        return injectedRole?.value ?? undefined;
-      }
-
-      return undefined;
-    });
-
-    const onClick = (): void => {
-      if (toggleVariant.value === 'standalone') {
-        emit('input', !props.value);
-      }
-
-      if (toggleVariant.value === 'group' && toggleValue) {
-        const nextValue = isSelected.value ? undefined : (props.value as string);
-        toggleValue(nextValue);
-      }
-
-      emit('click');
-    };
-
-    return {
-      ariaChecked,
-      isSelected,
-      onClick,
-      role,
-    };
-  },
+    icon?: string | string[] | IconDefinition;
+    /**
+     * By default, this is a boolean that determines if the pill is selected or
+     * not. If in a pill group, this is a string that identifies this pill.
+     */
+    value?: boolean | string;
+  }>(),
+  {
+    icon: undefined,
+    value: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  click: [];
+  input: [value: boolean];
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+  icon?: () => VNode[];
+}>();
+
+const injectedRole = inject(ROLE, undefined);
+const injectedSelectedValue = inject(SELECTED_VALUE, undefined);
+const toggleValue = inject(TOGGLE_VALUE, undefined);
+
+const toggleVariant = computed<ToggleVariant>(() => {
+  if (toggleValue) {
+    return 'group';
+  }
+
+  if (props.value !== undefined) {
+    return 'standalone';
+  }
+
+  return 'none';
+});
+
+const isSelected = computed(() => {
+  if (toggleVariant.value === 'standalone') {
+    return props.value;
+  }
+
+  if (injectedSelectedValue?.value) {
+    return injectedSelectedValue.value === props.value;
+  }
+
+  return undefined;
+});
+
+const ariaChecked = computed((): 'true' | 'false' | undefined => {
+  if (isSelected.value === undefined) {
+    return undefined;
+  }
+
+  return isSelected.value ? 'true' : 'false';
 });
+
+const role = computed(() => {
+  if (toggleVariant.value === 'standalone') {
+    return 'radio';
+  }
+
+  if (toggleVariant.value === 'group') {
+    return injectedRole?.value ?? undefined;
+  }
+
+  return undefined;
+});
+
+const onClick = (): void => {
+  if (toggleVariant.value === 'standalone') {
+    emit('input', !props.value);
+  }
+
+  if (toggleVariant.value === 'group' && toggleValue) {
+    const nextValue = isSelected.value ? undefined : (props.value as string);
+    toggleValue(nextValue);
+  }
+
+  emit('click');
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/CPillGroup.vue

@@ -15,9 +15,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent, provide, ref } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, provide, ref } from 'vue';
 
 import CPill from '@propelinc/citrus-ui/src/components/CPill.vue';
 import {
@@ -33,25 +33,34 @@ interface PillConfig {
   icon?: FaIcon;
 }
 
-export default defineComponent({
-  components: { CPill },
-  props: {
-    /** Specifies which pill is selected. */
-    value: { type: String as PropType<string>, default: () => '' },
+const props = withDefaults(
+  defineProps<{
     /** A list of pills to display. This is overwritten by the default slot. */
-    options: { type: Array as PropType<PillConfig[]>, default: () => [] },
-  },
-  emits: ['input'],
-  setup(props, { emit }) {
-    provide(ROLE, ref('radio'));
-    provide(
-      SELECTED_VALUE,
-      computed(() => props.value)
-    );
-    provide(TOGGLE_VALUE, (value) => {
-      emit('input', value);
-    });
-  },
+    options?: PillConfig[];
+    /** Specifies which pill is selected. */
+    value?: string;
+  }>(),
+  {
+    options: () => [],
+    value: '',
+  }
+);
+
+const emit = defineEmits<{
+  input: [value: string | undefined];
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+provide(ROLE, ref('radio'));
+provide(
+  SELECTED_VALUE,
+  computed(() => props.value)
+);
+provide(TOGGLE_VALUE, (value) => {
+  emit('input', value);
 });
 </script>
 

package/src/components/CPopup.vue

@@ -7,51 +7,60 @@
   </sl-popup>
 </template>
 
-<script lang="ts">
-import { type SlPopup } from '@shoelace-style/shoelace';
+<script setup lang="ts">
+import type { SlPopup } from '@shoelace-style/shoelace';
 import '@shoelace-style/shoelace/dist/components/popup/popup.js';
-import { defineComponent, onMounted, onUnmounted, ref, watchEffect } from 'vue';
+import type { VNode } from 'vue';
+import { onMounted, onUnmounted, ref, watchEffect } from 'vue';
 
-export default defineComponent({
-  name: 'CPopup',
-  props: {
-    value: { type: Boolean, default: false },
-  },
-  emits: ['mouseleave', 'outside-click'],
-  setup(props, { emit }) {
-    const popup = ref<SlPopup | null>(null);
+const props = withDefaults(
+  defineProps<{
+    value?: boolean;
+  }>(),
+  {
+    value: false,
+  }
+);
 
-    const handleMouseLeave = (): void => {
-      if (props.value) {
-        emit('mouseleave');
-      }
-    };
+const emit = defineEmits<{
+  'mouseleave': [];
+  'outside-click': [];
+}>();
 
-    const handleOutsideClick = ({ target }: MouseEvent): void => {
-      if (target instanceof HTMLElement && !popup.value?.contains(target)) {
-        emit('outside-click');
-      }
-    };
+defineSlots<{
+  default?: () => VNode[];
+  content?: () => VNode[];
+}>();
 
-    watchEffect(async () => {
-      if (props.value) {
-        document.addEventListener('click', handleOutsideClick);
-      } else {
-        document.removeEventListener('click', handleOutsideClick);
-      }
-    });
+const popup = ref<SlPopup | null>(null);
 
-    onMounted(() => {
-      popup.value?.addEventListener('mouseleave', handleMouseLeave);
-    });
+const handleMouseLeave = (): void => {
+  if (props.value) {
+    emit('mouseleave');
+  }
+};
 
-    onUnmounted(() => {
-      document.removeEventListener('click', handleOutsideClick);
-      popup.value?.removeEventListener('mouseleave', handleMouseLeave);
-    });
+const handleOutsideClick = ({ target }: MouseEvent): void => {
+  if (target instanceof HTMLElement && !popup.value?.contains(target)) {
+    emit('outside-click');
+  }
+};
 
-    return { popup };
-  },
+watchEffect(async () => {
+  if (props.value) {
+    document.addEventListener('click', handleOutsideClick);
+  } else {
+    document.removeEventListener('click', handleOutsideClick);
+  }
+});
+
+onMounted(() => {
+  popup.value?.addEventListener('mouseleave', handleMouseLeave);
+});
+
+onUnmounted(() => {
+  document.removeEventListener('click', handleOutsideClick);
+  popup.value?.removeEventListener('mouseleave', handleMouseLeave);
 });
 </script>
 

package/src/components/CProgressLinear.vue

@@ -9,24 +9,30 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import '@shoelace-style/shoelace/dist/components/progress-bar/progress-bar.js';
 
-export default defineComponent({
-  props: {
+withDefaults(
+  defineProps<{
     /** Customizes screen reader only text alternative, should be translated */
-    accessibleText: { type: String, default: undefined },
+    accessibleText?: string;
     /** Selector for testing */
-    dataTest: { type: String, default: 'c-progress-linear' },
+    dataTest?: string;
     /** Renders an indefinite loading state */
-    indeterminate: { type: Boolean, default: false },
+    indeterminate?: boolean;
     /** Rounds the progress bar */
-    rounded: { type: Boolean, default: true },
+    rounded?: boolean;
     /** The current progress from 0 to 100 */
-    value: { type: [Number, String], default: 0 },
-  },
-});
+    value?: number | string;
+  }>(),
+  {
+    accessibleText: undefined,
+    dataTest: 'c-progress-linear',
+    indeterminate: false,
+    rounded: true,
+    value: 0,
+  }
+);
 </script>
 
 <style lang="scss" scoped>