@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CSelect.vue

@@ -62,10 +62,11 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { faChevronDown } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { type PropType, defineComponent, ref, toRefs } from 'vue';
+import type { VNode } from 'vue';
+import { ref, toRefs } from 'vue';
 
 import CLoader from '@propelinc/citrus-ui/src/components/CLoader.vue';
 import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
@@ -73,92 +74,107 @@ import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
 import { useId } from '@propelinc/citrus-ui/src/composables/id';
 import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
 
-export default defineComponent({
-  name: 'CSelect',
-  components: { CLoader, CValidationMessage, FontAwesomeIcon },
-  props: {
-    /** The select's label, both visual and screenreader-only */
-    label: { type: String, default: undefined },
+interface SelectItem {
+  label: string;
+  value: string;
+  disabled?: boolean;
+}
+
+const props = withDefaults(
+  defineProps<{
     /** Overrides label for screenreader-only */
-    ariaLabel: { type: String, default: undefined },
-    /** Set the select's placeholder text */
-    placeholder: { type: String, default: undefined },
-    /** Assigns the select input's id */
-    id: { type: String, default: undefined },
-    /** List of options like `{ label: 'Yes', value: 'yes' }` */
-    items: {
-      type: Array as PropType<{ label: string; value: string; disabled?: boolean }[]>,
-      default: () => [],
-    },
-    /** Controls whether the select is disabled */
-    disabled: { type: Boolean, default: false },
-    /** Controls the value of the select */
-    value: { type: String, default: '' },
+    ariaLabel?: string;
     /** Prefix for test selectors */
-    dataTest: { type: String, default: 'select' },
-    /** Hides the label and instead labels the field with `aria-label` */
-    hideLabel: { type: Boolean, default: false },
+    dataTest?: string;
+    /** Controls whether the select is disabled */
+    disabled?: boolean;
     /**
      * Hides the validation message area. Defaults to `false` (show message area even
      * when valid), so validations transition in gracefully.
      *
      * If set to 'auto', the validation message area will only display if there is a message.
      */
-    hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
+    hideDetails?: boolean | 'auto';
+    /** Hides the label and instead labels the field with `aria-label` */
+    hideLabel?: boolean;
+    /** Assigns the select input's id */
+    id?: string;
+    /** List of options like `{ label: 'Yes', value: 'yes' }` */
+    items?: SelectItem[];
+    /** The select's label, both visual and screenreader-only */
+    label?: string;
     /** Controls whether the select is loading */
-    loading: { type: Boolean, default: false },
+    loading?: boolean;
+    /** Set the select's placeholder text */
+    placeholder?: string;
+    /**  If true, the select will be required */
+    required?: boolean;
     /**
      * An array of functions that either return either true / false or a string
      * containing an error message. The component passes the input value as an
      * argument. The input field will enter an error state if a function does
      * not return true.
-     * */
-    rules: { type: Array as PropType<((value: string) => string | boolean)[]>, default: () => [] },
-    /**  If true, the select will be required */
-    required: { type: Boolean, default: false },
-  },
-  emits: ['input', 'focus', 'blur', 'keydown'],
-  setup(props, { emit, expose }) {
-    const { id, value, rules, required } = toRefs(props);
-    const idWithFallback = useId(id);
-    const inputValue = useInternalValue(value, {
-      onChange: (newValue) => emit('input', newValue),
-    });
-    const select = ref<HTMLSelectElement | null>(null);
-    const {
-      message: validationMessage,
-      valid: isValidationValid,
-      listeners: validationListeners,
-      startValidating,
-      clearValidations,
-    } = useValidations({
-      id: idWithFallback,
-      field: select,
-      value: inputValue,
-      rules,
-      required,
-      validateOn: 'blur',
-    });
-
-    function onInput(event: Event): void {
-      const target = event.target as HTMLSelectElement;
-      inputValue.value = target.value;
-    }
-
-    expose({ startValidating, clearValidations });
-
-    return {
-      inputValue,
-      validationListeners,
-      validationMessage,
-      isValidationValid,
-      select,
-      faChevronDown,
-
-      onInput,
-    };
-  },
+     */
+    rules?: ((value: string) => string | boolean)[];
+    /** Controls the value of the select */
+    value?: string;
+  }>(),
+  {
+    ariaLabel: undefined,
+    dataTest: 'select',
+    disabled: false,
+    hideDetails: false,
+    hideLabel: false,
+    id: undefined,
+    items: () => [],
+    label: undefined,
+    loading: false,
+    placeholder: undefined,
+    required: false,
+    rules: () => [],
+    value: '',
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'input', value: string): void;
+  (e: 'focus', event: FocusEvent): void;
+  (e: 'blur', event: FocusEvent): void;
+  (e: 'keydown', event: KeyboardEvent): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
+
+const { id, value, rules, required } = toRefs(props);
+const idWithFallback = useId(id);
+const inputValue = useInternalValue(value, {
+  onChange: (newValue) => emit('input', newValue),
+});
+const select = ref<HTMLSelectElement | null>(null);
+const {
+  message: validationMessage,
+  valid: isValidationValid,
+  listeners: validationListeners,
+  startValidating,
+  clearValidations,
+} = useValidations({
+  id: idWithFallback,
+  field: select,
+  value: inputValue,
+  rules,
+  required,
+  validateOn: 'blur',
 });
+
+function onInput(event: Event): void {
+  const target = event.target as HTMLSelectElement;
+  inputValue.value = target.value;
+}
+
+defineExpose({ startValidating, clearValidations });
 </script>
 
 <style scoped lang="scss">

package/src/components/CSkeletonLoaderCard.vue

@@ -8,22 +8,16 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import CSkeleton from '@propelinc/citrus-ui/src/components/CSkeleton.vue';
 
-export default defineComponent({
-  components: {
-    CSkeleton,
-  },
-  props: {
+withDefaults(
+  defineProps<{
     /** Controls the height of the skeleton loader card */
-    height: {
-      type: [Number, String],
-      required: false,
-      default: 100,
-    },
-  },
-});
+    height?: number | string;
+  }>(),
+  {
+    height: 100,
+  }
+);
 </script>

package/src/components/CSkeletonLoaderCircle.vue

@@ -4,16 +4,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import CSkeleton from '@propelinc/citrus-ui/src/components/CSkeleton.vue';
-
-export default defineComponent({
-  components: {
-    CSkeleton,
-  },
-});
 </script>
 
 <style scoped>

package/src/components/CSkeletonLoaderText.vue

@@ -18,8 +18,8 @@
   </div>
 </template>
 
-<script lang="ts">
-import { type PropType, computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
 import CSkeleton from '@propelinc/citrus-ui/src/components/CSkeleton.vue';
 
@@ -52,25 +52,24 @@ const LINE_TYPE_TO_CLASS: Record<SkeletonLoaderType, string> = {
   'x-large-headline': 'c-skeleton-loader-text__line--x-large-headline',
 };
 
-export default defineComponent({
-  components: {
-    CSkeleton,
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Applies the align-items css property. */
-    align: { type: String as PropType<'center' | 'start' | 'end'>, default: 'start' },
+    align?: 'center' | 'start' | 'end';
     /** Controls how many rows of loading text are shown */
-    rows: { type: Number, default: 2 },
+    rows?: number;
     /** Controls the appearance of the loading text */
-    type: { type: String as PropType<SkeletonLoaderType>, default: 'body' },
-  },
-  setup(props) {
-    const lineTypeClass = computed(() => {
-      return LINE_TYPE_TO_CLASS[props.type];
-    });
-
-    return { lineTypeClass };
-  },
+    type?: SkeletonLoaderType;
+  }>(),
+  {
+    align: 'start',
+    rows: 2,
+    type: 'body',
+  }
+);
+
+const lineTypeClass = computed(() => {
+  return LINE_TYPE_TO_CLASS[props.type];
 });
 </script>
 

package/src/components/CSlideFadeTransition.vue

@@ -6,50 +6,28 @@
   </div>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
 type Direction = 'to-left' | 'to-right' | 'to-top' | 'to-bottom';
 
-/**
- * This component can be used to create a slide-fade transition for children.
- *
- * FIXME: Vue 3 Conversion - Remove this comment when Vue 3 conversion is complete.
- * NOTE: For Vue 2 usage: if you are conditionally rendering children, be sure to add unique
- * keys to each child!
- *
- * Example:
- * ```vue
- * <CSlideFadeTransition>
- *   <div v-if="condition" :key="if">This will slide in</div>
- *   <div v-else :key="else">This will slide out</div>
- * </CSlideFadeTransition>
- * ```
- */
-export default defineComponent({
-  name: 'CSlideFadeTransition',
-  props: {
+defineSlots<{ default: () => VNode[] }>();
+
+withDefaults(
+  defineProps<{
     /**
-     * The amount of pixels to slide the elements in or out
+     * The amount of pixels to slide the elements in or out. Should be >= 0
      * @default 20
      */
-    amount: {
-      type: Number,
-      default: 20,
-      validator(value: number) {
-        return value >= 0;
-      },
-    },
+    amount?: number;
     /**
      * Changes the direction of the slide fade transition
      * @default 'to-left'
      */
-    direction: {
-      type: String as PropType<Direction>,
-      default: 'to-left',
-    },
-  },
-});
+    direction?: Direction;
+  }>(),
+  { amount: 20, direction: 'to-left' }
+);
 </script>
 
 <style scoped>

package/src/components/CSplitInput.vue

@@ -25,64 +25,65 @@
   </CMaskedTextField>
 </template>
 
-<script lang="ts">
-import type { HTMLAttributes, PropType } from 'vue';
-import { computed, defineComponent, ref, toRefs } from 'vue';
+<script setup lang="ts">
+import type { HTMLAttributes, VNode } from 'vue';
+import { computed, ref } from 'vue';
 
 import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
 import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
 import type { SplitInputField } from '@propelinc/citrus-ui/src/types';
 
-export default defineComponent({
-  name: 'CSplitInput',
-  components: { CMaskedTextField },
-  props: {
+const props = withDefaults(
+  defineProps<{
+    /** Controls the underlying input's autocomplete attribute */
+    autocomplete?: string;
     /** Custom data-test selector */
-    dataTest: { type: String, default: 'split-input' },
-    /** The input's type, either text or tel */
-    type: { type: String as PropType<'text' | 'tel'>, default: 'text' },
+    dataTest?: string;
+    /** Controls whether the input is disabled */
+    disabled?: boolean;
+    /** The fields for each of the split inputs of type SplitInputField */
+    fields: SplitInputField[];
+    /** A hint to show the appropriate virtual keyboard, e.g. "numeric". */
+    inputmode?: HTMLAttributes['inputmode'];
     /** The input's label */
-    label: { type: String as PropType<string | null>, default: null },
+    label?: string | null;
     /** The input's name */
-    name: { type: String as PropType<string | undefined>, default: undefined },
-    /** A hint to show the appropriate virtual keyboard, e.g. "numeric". */
-    inputmode: {
-      type: String as PropType<HTMLAttributes['inputmode'] | undefined>,
-      default: undefined,
-    },
-    /** The input's value */
-    value: { type: String, default: '' },
-    /** The fields for each of the split inputs of type SplitInputField */
-    fields: {
-      type: Array as PropType<SplitInputField[]>,
-      required: true,
-    },
+    name?: string;
     /** Validation rules */
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    /** Controls whether the input is disabled */
-    disabled: { type: Boolean, default: false },
-    /** Controls the underlying input's autocomplete attribute */
-    autocomplete: { type: String, default: undefined },
-  },
-  setup(props) {
-    const { fields } = toRefs(props);
+    rules?: Rules<string>;
+    /** The input's type, either text or tel */
+    type?: 'text' | 'tel';
+    /** The input's value */
+    value?: string;
+  }>(),
+  {
+    autocomplete: undefined,
+    dataTest: 'split-input',
+    disabled: false,
+    inputmode: undefined,
+    label: null,
+    name: undefined,
+    rules: () => [],
+    type: 'text',
+    value: '',
+  }
+);
 
-    const maskedValue = ref('');
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
 
-    const placeholder = computed(() => {
-      return fields.value
-        .map((field) => `${field.placeholder ?? ''}${field.separator ?? ''}`)
-        .join('');
-    });
+const maskedValue = ref('');
 
-    const mask = computed(() => {
-      return fields.value
-        .map((field) => `${Array(field.characters).fill('*').join('')}${field.separator ?? ''}`)
-        .join('');
-    });
+const placeholder = computed(() => {
+  return props.fields.map((field) => `${field.placeholder ?? ''}${field.separator ?? ''}`).join('');
+});
 
-    return { placeholder, mask, maskedValue };
-  },
+const mask = computed(() => {
+  return props.fields
+    .map((field) => `${Array(field.characters).fill('*').join('')}${field.separator ?? ''}`)
+    .join('');
 });
 </script>
 

package/src/components/CSquaredIcon.vue

@@ -13,43 +13,53 @@
   </div>
 </template>
 
-<script lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { computed, defineComponent, onMounted } 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, onMounted } from 'vue';
 
 import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
-import type { FaIconArray, FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
+import type { FaIconArray } from '@propelinc/citrus-ui/src/types/font-awesome';
 
-export default defineComponent({
-  components: { FontAwesomeIcon },
-  props: {
-    /** The Font Awesome icon to display */
-    icon: { type: [String, Array, Object] as FaPropType, default: null },
+// FontAwesomeIcon's prop types produce a union too complex for TypeScript to resolve
+const FontAwesomeIcon = FontAwesomeIconComponent as unknown as Component;
+
+const props = withDefaults(
+  defineProps<{
     /** The background color */
-    color: { type: String, default: 'gray-100' },
+    color?: string;
+    /** The Font Awesome icon to display */
+    icon?: string | string[] | IconDefinition | null;
     /** Makes the icon and background larger */
-    large: { type: Boolean, default: false },
-  },
-  setup(props) {
-    onMounted(() => {
-      const enableCheck = process.env.VUE_APP_DEBUG === 'yes' || process.env.NODE_ENV === 'test';
-      if (enableCheck && Array.isArray(props.icon)) {
-        const [prefix, iconName] = props.icon as FaIconArray;
-        if (prefix === 'fal') {
-          console.error(
-            `We no longer use light Font Awesome icons. Please change ['${prefix}', '${iconName}'] to ['far', '${iconName}'].`
-          );
-        }
-      }
-    });
+    large?: boolean;
+  }>(),
+  {
+    color: 'gray-100',
+    icon: null,
+    large: false,
+  }
+);
 
-    const { cssColor } = useCssColor(() => props.color);
+defineSlots<{
+  default?: () => VNode[];
+}>();
 
-    const useWhiteIcon = computed(() => props.color === 'black');
-
-    return { cssColor, useWhiteIcon };
-  },
+onMounted(() => {
+  const enableCheck = process.env.VUE_APP_DEBUG === 'yes' || process.env.NODE_ENV === 'test';
+  if (enableCheck && Array.isArray(props.icon)) {
+    const [prefix, iconName] = props.icon as FaIconArray;
+    if (prefix === 'fal') {
+      console.error(
+        `We no longer use light Font Awesome icons. Please change ['${prefix}', '${iconName}'] to ['far', '${iconName}'].`
+      );
+    }
+  }
 });
+
+const { cssColor } = useCssColor(() => props.color);
+
+const useWhiteIcon = computed(() => props.color === 'black');
 </script>
 
 <style lang="scss" scoped>

package/src/components/CSsnField.vue

@@ -34,10 +34,11 @@
   </CMaskedTextField>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { faLock } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { type PropType, computed, defineComponent } from 'vue';
+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';
@@ -45,42 +46,53 @@ 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: 'CSsnField',
-  components: { CMaskedTextField, FontAwesomeIcon },
-  props: {
-    dataTest: { type: String, default: 'ssn-field' },
-    id: { type: String, default: undefined },
-    label: { type: String as PropType<string | null>, default: null },
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    value: { type: String, default: '' },
-    fourDigitSsn: { type: Boolean, default: false },
-  },
-  emits: ['input', 'focus', 'blur', 'change'],
-  setup(props, { expose }) {
-    const { t } = useTranslation();
-    const defaultLabel = computed(() => {
-      return props.fourDigitSsn ? t('Last 4 digits of SSN') : t('Social Security number');
-    });
-    const defaultRules = computed(() => {
-      const fourDigitRule = minLengthRule(4, t('Please enter the last four digits of your SSN'));
-      const fullSsnRule = minLengthRule(
-        9,
-        t('Please enter a valid {inputLabel}', { inputLabel: t('Social Security number') })
-      );
-      return [props.fourDigitSsn ? fourDigitRule : fullSsnRule];
-    });
+const props = withDefaults(
+  defineProps<{
+    dataTest?: string;
+    id?: string;
+    label?: string | null;
+    rules?: Rules<string>;
+    value?: string;
+    fourDigitSsn?: boolean;
+  }>(),
+  {
+    dataTest: 'ssn-field',
+    id: undefined,
+    label: null,
+    rules: (): Rules<string> => [],
+    value: '',
+    fourDigitSsn: false,
+  }
+);
 
-    const computedRules = computed(() => [...defaultRules.value, ...props.rules]);
+defineEmits<{
+  input: [value: string];
+  focus: [event: Event];
+  blur: [event: Event];
+  change: [value: string];
+}>();
 
-    const { field } = useFocusableField(expose);
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+  append?: () => VNode[];
+}>();
 
-    return {
-      defaultLabel,
-      computedRules,
-      faLock,
-      field,
-    };
-  },
+const { t } = useTranslation();
+const defaultLabel = computed(() => {
+  return props.fourDigitSsn ? t('Last 4 digits of SSN') : t('Social Security number');
 });
+const defaultRules = computed(() => {
+  const fourDigitRule = minLengthRule(4, t('Please enter the last four digits of your SSN'));
+  const fullSsnRule = minLengthRule(
+    9,
+    t('Please enter a valid {inputLabel}', { inputLabel: t('Social Security number') })
+  );
+  return [props.fourDigitSsn ? fourDigitRule : fullSsnRule];
+});
+
+const computedRules = computed(() => [...defaultRules.value, ...props.rules]);
+
+const { field, focus } = useFocusableField();
+defineExpose({ focus });
 </script>