@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CDobSelect.vue

@@ -71,9 +71,10 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import dayjs from 'dayjs';
-import { type PropType, computed, defineComponent, ref, watch } from 'vue';
+import type { VNode } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import CSelect from '@propelinc/citrus-ui/src/components/CSelect.vue';
 import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
@@ -83,169 +84,166 @@ import {
   useFormValidationSupport,
 } from '@propelinc/citrus-ui/src/composables/validations';
 
-export default defineComponent({
-  name: 'CDobSelect',
-  components: { CSelect, CValidationMessage },
-  props: {
-    dataTest: { type: String, default: 'dob-select' },
-    id: { type: String, default: undefined },
-    label: { type: String as PropType<string | null>, default: null },
-    required: { type: Boolean, default: false },
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    hideLabel: { type: Boolean, default: false },
-    hideDetails: { type: Boolean, default: false },
-    value: { type: String, default: '' },
-    disabled: { type: Boolean, default: false },
-  },
-  emits: ['input', 'focus', 'blur'],
-  setup(props, { emit }) {
-    const { t } = useTranslation();
-
-    const computedLabel = computed(() => props.label ?? t('Date of birth'));
-
-    const localMonth = ref('');
-    const localDay = ref('');
-    const localYear = ref('');
-
-    const hasError = ref(props.required && props.value === '');
-    const messages = ref<string[]>([]);
-
-    const localValue = computed(() => {
-      if (localDay.value && localMonth.value && localYear.value) {
-        return `${localYear.value}-${localMonth.value}-${localDay.value}`;
-      }
-      return '';
-    });
-
-    const monthRules = computed(() => {
-      if (!props.required && !localMonth.value) {
-        return [];
-      }
-      return [(): boolean => localMonth.value !== ''];
-    });
-    const dayRules = computed(() => {
-      if (!props.required && !localDay.value) {
-        return [];
-      }
-      return [(): boolean => localDay.value !== ''];
-    });
-    const yearRules = computed(() => {
-      if (!props.required && !localYear.value) {
-        return [];
-      }
-      return [(): boolean => localYear.value !== ''];
-    });
-    const message = computed(() => messages.value[0] ?? '');
-
-    const monthOptions = Array.from({ length: 12 }, (_, i) => ({
-      value: (i + 1).toString().padStart(2, '0'),
-      label: dayjs().set('month', i).format('MMM'),
-    }));
-
-    const dayOptions = computed(() => {
-      const year = Number(localYear.value) || 2000;
-      const month = Number(localMonth.value) - 1 || 0;
-      const daysInMonth = dayjs().year(year).month(month).daysInMonth();
-      return Array.from({ length: daysInMonth }, (_, i) => {
-        const day = (i + 1).toString();
-        return { value: day.padStart(2, '0'), label: day };
-      });
-    });
-
-    const currentYear = dayjs().year();
-    const yearOptions = Array.from({ length: 120 }, (_, age) => {
-      const year = (currentYear - age).toString();
-      return { value: year, label: year };
-    });
-
-    const validationMessage = t('Please enter a valid {inputLabel}', {
-      inputLabel: t('date of birth'),
-    });
-
-    const localRules = computed(() => {
-      if (!props.required && !localValue.value) {
-        return [];
-      }
-      const validDateRule = (v: string): boolean | string =>
-        dayjs(v, 'YYYY-MM-DD', true).isValid() || validationMessage;
-      return [validDateRule, ...props.rules];
-    });
-
-    const valid = computed(() => !hasError.value);
-
-    const validate = (): boolean => {
-      messages.value = localRules.value
-        .map((validation) => {
-          const validationResult = validation(localValue.value);
-          return typeof validationResult === 'string' ? validationResult : '';
-        })
-        .filter((message) => message !== '');
-
-      hasError.value = (props.required && localValue.value === '') || messages.value.length > 0;
-      return !hasError.value;
-    };
-
-    const emitDate = (): void => {
-      if (!localValue.value) {
-        return;
-      }
-
-      if (!validate()) {
-        // NOTE(ram): An invalid date can only be caused by the day being invalid.
-        localDay.value = '';
-        emit('input', '');
-        return;
-      }
-
-      emit('input', localValue.value);
-    };
-
-    watch(
-      () => props.value,
-      (value) => {
-        if (!value || value === localValue.value) {
-          return;
-        }
-
-        const date = dayjs(value, 'YYYY-MM-DD', true);
-        if (!date.isValid()) {
-          console.error('Invalid date in CDobSelect', value);
-          return;
-        }
-
-        localMonth.value = date.format('MM');
-        localDay.value = date.format('DD');
-        localYear.value = date.format('YYYY');
-      },
-      { immediate: true }
-    );
-
-    useFormValidationSupport({
-      id: props.id,
-      valid,
-      validate,
-    });
-
-    return {
-      localDay,
-      localMonth,
-      localYear,
-      dayRules,
-      monthRules,
-      yearRules,
-      dayOptions,
-      monthOptions,
-      yearOptions,
-
-      computedLabel,
-      hasError,
-      messages,
-      localValue,
-      message,
-
-      emitDate,
-    };
+const props = withDefaults(
+  defineProps<{
+    dataTest?: string;
+    id?: string;
+    label?: string | null;
+    required?: boolean;
+    rules?: Rules<string>;
+    hideLabel?: boolean;
+    hideDetails?: boolean;
+    value?: string;
+    disabled?: boolean;
+  }>(),
+  {
+    dataTest: 'dob-select',
+    id: undefined,
+    label: null,
+    required: false,
+    rules: () => [],
+    hideLabel: false,
+    hideDetails: false,
+    value: '',
+    disabled: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'input', value: string): void;
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+}>();
+
+const { t } = useTranslation();
+
+const computedLabel = computed(() => props.label ?? t('Date of birth'));
+
+const localMonth = ref('');
+const localDay = ref('');
+const localYear = ref('');
+
+const hasError = ref(props.required && props.value === '');
+const messages = ref<string[]>([]);
+
+const localValue = computed(() => {
+  if (localDay.value && localMonth.value && localYear.value) {
+    return `${localYear.value}-${localMonth.value}-${localDay.value}`;
+  }
+  return '';
+});
+
+const monthRules = computed(() => {
+  if (!props.required && !localMonth.value) {
+    return [];
+  }
+  return [(): boolean => localMonth.value !== ''];
+});
+const dayRules = computed(() => {
+  if (!props.required && !localDay.value) {
+    return [];
+  }
+  return [(): boolean => localDay.value !== ''];
+});
+const yearRules = computed(() => {
+  if (!props.required && !localYear.value) {
+    return [];
+  }
+  return [(): boolean => localYear.value !== ''];
+});
+const message = computed(() => messages.value[0] ?? '');
+
+const monthOptions = Array.from({ length: 12 }, (_, i) => ({
+  value: (i + 1).toString().padStart(2, '0'),
+  label: dayjs().set('month', i).format('MMM'),
+}));
+
+const dayOptions = computed(() => {
+  const year = Number(localYear.value) || 2000;
+  const month = Number(localMonth.value) - 1 || 0;
+  const daysInMonth = dayjs().year(year).month(month).daysInMonth();
+  return Array.from({ length: daysInMonth }, (_, i) => {
+    const day = (i + 1).toString();
+    return { value: day.padStart(2, '0'), label: day };
+  });
+});
+
+const currentYear = dayjs().year();
+const yearOptions = Array.from({ length: 120 }, (_, age) => {
+  const year = (currentYear - age).toString();
+  return { value: year, label: year };
+});
+
+const validationMessage = t('Please enter a valid {inputLabel}', {
+  inputLabel: t('date of birth'),
+});
+
+const localRules = computed(() => {
+  if (!props.required && !localValue.value) {
+    return [];
+  }
+  const validDateRule = (v: string): boolean | string =>
+    dayjs(v, 'YYYY-MM-DD', true).isValid() || validationMessage;
+  return [validDateRule, ...props.rules];
+});
+
+const valid = computed(() => !hasError.value);
+
+const validate = (): boolean => {
+  messages.value = localRules.value
+    .map((validation) => {
+      const validationResult = validation(localValue.value);
+      return typeof validationResult === 'string' ? validationResult : '';
+    })
+    .filter((message) => message !== '');
+
+  hasError.value = (props.required && localValue.value === '') || messages.value.length > 0;
+  return !hasError.value;
+};
+
+const emitDate = (): void => {
+  if (!localValue.value) {
+    return;
+  }
+
+  if (!validate()) {
+    // NOTE(ram): An invalid date can only be caused by the day being invalid.
+    localDay.value = '';
+    emit('input', '');
+    return;
+  }
+
+  emit('input', localValue.value);
+};
+
+watch(
+  () => props.value,
+  (value) => {
+    if (!value || value === localValue.value) {
+      return;
+    }
+
+    const date = dayjs(value, 'YYYY-MM-DD', true);
+    if (!date.isValid()) {
+      console.error('Invalid date in CDobSelect', value);
+      return;
+    }
+
+    localMonth.value = date.format('MM');
+    localDay.value = date.format('DD');
+    localYear.value = date.format('YYYY');
   },
+  { immediate: true }
+);
+
+useFormValidationSupport({
+  id: props.id,
+  valid,
+  validate,
 });
 </script>
 

package/src/components/CEmailField.vue

@@ -23,39 +23,51 @@
   </CTextField>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
 import CTextField from '@propelinc/citrus-ui/src/components/CTextField.vue';
 import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
 import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
 import { isValidEmail } from '@propelinc/shared-utils';
 
-export default defineComponent({
-  name: 'CEmailField',
-  components: { CTextField },
-  props: {
-    dataTest: { type: String, default: 'email-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() {
-    const { t } = useTranslation();
+withDefaults(
+  defineProps<{
+    dataTest?: string;
+    id?: string;
+    label?: string | null;
+    placeholder?: string | null;
+    rules?: Rules<string>;
+    value?: string;
+  }>(),
+  {
+    dataTest: 'email-field',
+    id: undefined,
+    label: null,
+    placeholder: null,
+    rules: (): Rules<string> => [],
+    value: '',
+  }
+);
 
-    const defaultRules = [
-      (v: string): string | boolean =>
-        !v || isValidEmail(v)
-          ? true
-          : t('Please enter a valid {inputLabel}', { inputLabel: t('email') }),
-    ];
+defineEmits<{
+  input: [value: string];
+  focus: [event: Event];
+  blur: [event: Event];
+  change: [value: string];
+}>();
 
-    return {
-      defaultRules,
-    };
-  },
-});
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
+
+const { t } = useTranslation();
+
+const defaultRules = [
+  (v: string): string | boolean =>
+    !v || isValidEmail(v)
+      ? true
+      : t('Please enter a valid {inputLabel}', { inputLabel: t('email') }),
+];
 </script>

package/src/components/CExpandTransition.vue

@@ -11,27 +11,24 @@
   </div>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, inject, ref } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, inject, ref } from 'vue';
 
 import { useResizeObserver } from '@propelinc/citrus-ui/src/composables/elements';
 import { ANIMATIONS_DISABLED } from '@propelinc/citrus-ui/src/services/injections/animations';
 
-export default defineComponent({
-  name: 'CExpandTransition',
-  props: { disabled: { type: Boolean, default: false } },
-  setup(props) {
-    const injectedDisabled = inject(ANIMATIONS_DISABLED, ref(false));
-    const isDisabled = computed(() => props.disabled || injectedDisabled.value);
-    const content = ref<HTMLElement | null>(null);
-    const height = ref<string>('auto');
-
-    useResizeObserver(content, ([entry]) => {
-      height.value = `${entry.contentRect.height}px`;
-    });
-
-    return { content, height, isDisabled };
-  },
+defineSlots<{ default: () => VNode[] }>();
+
+const props = withDefaults(defineProps<{ disabled?: boolean }>(), { disabled: false });
+
+const injectedDisabled = inject(ANIMATIONS_DISABLED, ref(false));
+const isDisabled = computed(() => props.disabled || injectedDisabled.value);
+const content = ref<HTMLElement | null>(null);
+const height = ref<string>('auto');
+
+useResizeObserver(content, ([entry]) => {
+  height.value = `${entry.contentRect.height}px`;
 });
 </script>
 

package/src/components/CFadeTransition.vue

@@ -4,10 +4,10 @@
   </Transition>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
-export default defineComponent({});
+defineSlots<{ default: () => VNode[] }>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CFileInput.vue

@@ -35,65 +35,72 @@
   </label>
 </template>
 
-<script lang="ts">
-import { type PropType, computed, defineComponent, toRefs } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, toRefs } from 'vue';
 
 import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
 import { useId } from '@propelinc/citrus-ui/src/composables/id';
 
-export default defineComponent({
-  name: 'CFileInput',
-  props: {
-    /** The input's label, both visual and screenreader-only */
-    label: { type: String, required: true },
-    /** Placholder text to display before a user has selected any files */
-    prompt: { type: String, required: true },
-    /** The input's value. Either one file or an array of files */
-    value: { type: [Array, Object, null] as PropType<File[] | File | null>, default: null },
+const props = withDefaults(
+  defineProps<{
+    /** A custom data-test string applied to the form field, text field and hide icon */
+    dataTest?: string;
+    /** Controls whether the input is disabled */
+    disabled?: boolean;
     /** A unique id for the input */
-    id: { type: String, required: true },
+    id: string;
+    /** The input's label, both visual and screenreader-only */
+    label: string;
     /** Allow the user to upload multiple files */
-    multiple: { type: Boolean, default: false },
-    /** Controls whether the input is disabled */
-    disabled: { type: Boolean, default: false },
+    multiple?: boolean;
+    /** Placholder text to display before a user has selected any files */
+    prompt: string;
     /** Controls whether the input is required */
-    required: { type: Boolean, default: false },
-    /** A custom data-test string applied to the form field, text field and hide icon */
-    dataTest: { type: String, default: 'file-input' },
-  },
-  emits: ['input'],
-  setup(props, { emit }) {
-    const { id, value } = toRefs(props);
-    const idWithFallback = useId(id);
-    const inputValue = useInternalValue(value, {
-      onChange: (newValue) => {
-        emit('input', newValue);
-      },
-    });
-    const hasValue = computed(() => {
-      if (Array.isArray(inputValue.value)) {
-        return inputValue.value.length > 0;
-      }
-      return !!inputValue.value;
-    });
-
-    function onFileChange(event: Event): void {
-      const files = (event.target as HTMLInputElement).files;
-      if (!files) {
-        inputValue.value = null;
-      } else {
-        inputValue.value = props.multiple ? Array.from(files) : files[0];
-      }
-    }
-
-    return {
-      idWithFallback,
-      inputValue,
-      hasValue,
-      onFileChange,
-    };
+    required?: boolean;
+    /** The input's value. Either one file or an array of files */
+    value?: File[] | File | null;
+  }>(),
+  {
+    dataTest: 'file-input',
+    disabled: false,
+    multiple: false,
+    required: false,
+    value: null,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'input', value: File[] | File | null): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+  prompt?: () => VNode[];
+}>();
+
+const { id, value } = toRefs(props);
+const idWithFallback = useId(id);
+const inputValue = useInternalValue(value, {
+  onChange: (newValue) => {
+    emit('input', newValue);
   },
 });
+const hasValue = computed(() => {
+  if (Array.isArray(inputValue.value)) {
+    return inputValue.value.length > 0;
+  }
+  return !!inputValue.value;
+});
+
+function onFileChange(event: Event): void {
+  const files = (event.target as HTMLInputElement).files;
+  if (!files) {
+    inputValue.value = null;
+  } else {
+    inputValue.value = props.multiple ? Array.from(files) : files[0];
+  }
+}
 </script>
 
 <style lang="scss" scoped>

package/src/components/CFixedPageFooter.vue

@@ -12,29 +12,35 @@
   </CButtonStack>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent, onBeforeUnmount, ref } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, onBeforeUnmount, ref } from 'vue';
 
 import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
 import { useResizeObserver } from '@propelinc/citrus-ui/src/composables/elements';
 
-export default defineComponent({
-  name: 'CFixedPageFooter',
-  components: { CButtonStack },
-  props: {
+withDefaults(
+  defineProps<{
     /** The HTML tag to render as. Avoid changing this if possible. */
-    tag: { type: String, default: 'footer' },
-  },
-  emits: ['change:height'],
-  setup(_, { emit }) {
-    const footer = ref<InstanceType<typeof CButtonStack> | null>(null);
-    const footerElement = computed(() => (footer.value?.$el as HTMLElement) ?? null);
-    useResizeObserver(footerElement, ([entry]) => emit('change:height', entry.contentRect.height));
-    onBeforeUnmount(() => emit('change:height', 0));
+    tag?: string;
+  }>(),
+  {
+    tag: 'footer',
+  }
+);
+
+const emit = defineEmits<{
+  'change:height': [height: number];
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
 
-    return { footer };
-  },
-});
+const footer = ref<InstanceType<typeof CButtonStack> | null>(null);
+const footerElement = computed(() => (footer.value?.$el as HTMLElement) ?? null);
+useResizeObserver(footerElement, ([entry]) => emit('change:height', entry.contentRect.height));
+onBeforeUnmount(() => emit('change:height', 0));
 </script>
 
 <style lang="scss" scoped>