@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CCheckbox.vue

@@ -40,90 +40,89 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { faCheck } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import type { PropType } from 'vue';
-import { defineComponent, ref, toRefs } from 'vue';
+import type { VNode } from 'vue';
+import { ref, toRefs } from 'vue';
 
 import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
 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: 'CCheckbox',
-  components: { FontAwesomeIcon, CValidationMessage },
-  props: {
-    /** Assigns the checkbox's id */
-    id: { type: String as PropType<string | null>, default: null },
-    /** The label text for the checkbox. */
-    label: { type: String, default: undefined },
-    /** Whether the checkbox is checked */
-    value: { type: Boolean, default: false },
+const props = withDefaults(
+  defineProps<{
     /** A custom data-test selector */
-    dataTest: { type: String, default: 'checkbox' },
+    dataTest?: string;
+    /** Hides the validation message area. */
+    hideDetails?: boolean | 'auto';
+    /** Assigns the checkbox's id */
+    id?: string | null;
+    /** The label text for the checkbox */
+    label?: string;
     /**
      * 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: boolean) => string | boolean)[]>,
-      default: () => [],
-    },
-    /** Hides the validation message area. */
-    hideDetails: {
-      type: [Boolean, String] as PropType<boolean | 'auto'>,
-      default: false,
-    },
-    /** Controls the appearance of the checkbox. */
-    variant: {
-      type: String as PropType<'contained' | 'minimal'>,
-      default: 'contained',
-    },
-  },
-  emits: ['change', 'focus', 'blur'],
-  setup(props, { emit }) {
-    const { value, rules, id } = toRefs(props);
-    const idWithFallback = useId(id);
-
-    const internalValue = useInternalValue(value, {
-      onChange: (value) => emit('change', value),
-    });
-
-    const checkbox = ref<HTMLInputElement | null>(null);
-
-    const {
-      message: validationMessage,
-      valid: isValidationValid,
-      listeners: validationListeners,
-    } = useValidations({
-      id: idWithFallback,
-      value: internalValue,
-      rules,
-      validateOn: 'change',
-      field: checkbox,
-    });
-
-    const onChange = (event: Event): void => {
-      const target = event.target as HTMLInputElement;
-      internalValue.value = !!target.checked;
-    };
-
-    return {
-      checkbox,
-      faCheck,
-      idWithFallback,
-      internalValue,
-      onChange,
-      validationMessage,
-      isValidationValid,
-      validationListeners,
-    };
-  },
+     */
+    rules?: ((value: boolean) => string | boolean)[];
+    /** Whether the checkbox is checked */
+    value?: boolean;
+    /**
+     * Controls the appearance of the checkbox.
+     * @default 'contained'
+     */
+    variant?: 'contained' | 'minimal';
+  }>(),
+  {
+    dataTest: 'checkbox',
+    hideDetails: false,
+    id: null,
+    label: undefined,
+    rules: () => [],
+    value: false,
+    variant: 'contained',
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'change', value: boolean): void;
+  (e: 'focus'): void;
+  (e: 'blur'): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
+
+const { value, rules, id } = toRefs(props);
+const idWithFallback = useId(id);
+
+const internalValue = useInternalValue(value, {
+  onChange: (value) => emit('change', value),
 });
+
+const checkbox = ref<HTMLInputElement | null>(null);
+
+const {
+  message: validationMessage,
+  valid: isValidationValid,
+  listeners: validationListeners,
+} = useValidations({
+  id: idWithFallback,
+  value: internalValue,
+  rules,
+  validateOn: 'change',
+  field: checkbox,
+});
+
+const onChange = (event: Event): void => {
+  const target = event.target as HTMLInputElement;
+  internalValue.value = !!target.checked;
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/CCol.vue

@@ -4,28 +4,27 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
-    /** Sets the default number of columns the component extends.
-     * Available options are: 1 -> 12 and auto. */
-    cols: {
-      type: String,
-      default: null,
-      validator: (value: string) => {
-        if (value === 'auto' || !value) {
-          return true;
-        }
-
-        return Array.from(Array(12))
-          .map((_, i) => `${i + 1}`)
-          .includes(value);
-      },
-    },
-  },
-});
+<script setup lang="ts">
+import type { VNode } from 'vue';
+
+type Cols = 'auto' | '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12';
+
+withDefaults(
+  defineProps<{
+    /**
+     * Sets the default number of columns the component extends.
+     * Available options are: 1 -> 12 and auto.
+     */
+    cols?: Cols | null;
+  }>(),
+  {
+    cols: null,
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CDivider.vue

@@ -6,15 +6,16 @@
   />
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  props: {
+<script setup lang="ts">
+withDefaults(
+  defineProps<{
     /** Displays dividers vertically. */
-    vertical: { type: Boolean, default: false },
-  },
-});
+    vertical?: boolean;
+  }>(),
+  {
+    vertical: false,
+  }
+);
 </script>
 
 <style lang="scss" scoped>

package/src/components/CDobField.vue

@@ -28,10 +28,10 @@
   </CMaskedTextField>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import dayjs from 'dayjs';
-import { computed, defineComponent, ref, watch } from 'vue';
-import type { PropType } from 'vue';
+import type { VNode } from 'vue';
+import { computed, ref, watch } from 'vue';
 
 import CMaskedTextField from '@propelinc/citrus-ui/src/components/CMaskedTextField.vue';
 import { useTranslation } from '@propelinc/citrus-ui/src/composables/i18n';
@@ -41,113 +41,122 @@ import {
   minLengthRule as createMinLengthRule,
 } from '@propelinc/shared-utils';
 
-export default defineComponent({
-  name: 'CDobField',
-  components: { CMaskedTextField },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** A custom data-test attribute for the input. */
-    dataTest: { type: String, default: 'dob-field' },
+    dataTest?: string;
     /** A unique id for the input. */
-    id: { type: String as PropType<string | undefined>, default: undefined },
+    id?: string;
     /** The input's label text. */
-    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, must have the format YYYY-MM-DD or YYYY. */
-    value: { type: String, default: '' },
-    /** Toggles the field's year only variant. Changes default label, placeholder, mask and validation
-     * behavior */
-    yearOnly: { type: Boolean, default: false },
-  },
-  emits: ['input', 'blur', 'focus', 'change'],
-  setup(props, { emit }) {
-    const { t } = useTranslation();
-
-    const parseDate = (value: string): string => {
-      if (props.yearOnly) {
-        return value;
-      }
-
-      if (!value) {
-        return '';
-      }
-
-      const [year, month, day] = value.split('-');
-      if (!year || !month || !day) {
-        console.warn(`Invalid date format. Expected YYYY-MM-DD, received: ${value}.`);
-        return '';
-      }
-
-      return `${month}${day}${year}`;
-    };
-
-    const formattedDate = ref<string>(parseDate(props.value));
-
-    let lastEmittedValue = props.value;
-
-    watch(
-      () => props.value,
-      (newValue: string) => {
-        if (newValue !== lastEmittedValue) {
-          formattedDate.value = props.yearOnly ? newValue : parseDate(newValue);
-        }
-      }
-    );
-
-    const emitIsoDate = (value: string): void => {
-      if (props.yearOnly) {
-        emit('input', value);
-      } else {
-        const month = value.substring(0, 2);
-        const day = value.substring(2, 4);
-        const year = value.substring(4, 8);
-        lastEmittedValue = year && month && day ? `${year}-${month}-${day}` : '';
-        emit('input', lastEmittedValue);
-      }
-    };
-
-    const defaultLabel = computed(() => {
-      return props.yearOnly ? t('Year of birth') : t('Date of birth');
-    });
-
-    const defaultPlaceholder = computed(() => {
-      return props.yearOnly ? t('YYYY') : t('MM/DD/YYYY');
-    });
-
-    const validationMessage = computed(() => {
-      const inputLabel = props.yearOnly ? t('year of birth') : t('date of birth');
-      return t('Please enter a valid {inputLabel}', { inputLabel });
-    });
-
-    const defaultRules = computed(() => {
-      const minLengthRule = createMinLengthRule(props.yearOnly ? 4 : 10, validationMessage.value);
-      const maxAgeRule = (v: string): boolean | string =>
-        isValidDateInAgeRange(0, 125)(v) || validationMessage.value;
-      const validDateRule = (v: string): boolean | string =>
-        dayjs(v, 'MM/DD/YYYY', true).isValid() || validationMessage.value;
-
-      return [minLengthRule, maxAgeRule, !props.yearOnly ? validDateRule : undefined].filter(
-        Boolean
-      ) as Rules<string>;
-    });
-
-    const computedLabel = computed(() => props.label || defaultLabel.value);
-    const computedPlaceholder = computed(() => props.placeholder || defaultPlaceholder.value);
-    const computedRules = computed(() => [...defaultRules.value, ...props.rules]);
-    const dateLength = computed(() => (props.yearOnly ? 4 : 8));
-    const mask = computed(() => (props.yearOnly ? '####' : '##/##/####'));
-
-    return {
-      computedLabel,
-      computedPlaceholder,
-      computedRules,
-      emitIsoDate,
-      formattedDate,
-      dateLength,
-      mask,
-    };
-  },
+    value?: string;
+    /**
+     * Toggles the field's year only variant. Changes default label, placeholder,
+     * mask and validation behavior
+     */
+    yearOnly?: boolean;
+  }>(),
+  {
+    dataTest: 'dob-field',
+    id: undefined,
+    label: null,
+    placeholder: '',
+    rules: () => [],
+    value: '',
+    yearOnly: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'input', value: string): void;
+  (e: 'blur', event: Event): void;
+  (e: 'focus', event: Event): void;
+  (e: 'change', event: Event): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
+
+const { t } = useTranslation();
+
+const parseDate = (value: string): string => {
+  if (props.yearOnly) {
+    return value;
+  }
+
+  if (!value) {
+    return '';
+  }
+
+  const [year, month, day] = value.split('-');
+  if (!year || !month || !day) {
+    console.warn(`Invalid date format. Expected YYYY-MM-DD, received: ${value}.`);
+    return '';
+  }
+
+  return `${month}${day}${year}`;
+};
+
+const formattedDate = ref<string>(parseDate(props.value));
+
+let lastEmittedValue = props.value;
+
+watch(
+  () => props.value,
+  (newValue: string) => {
+    if (newValue !== lastEmittedValue) {
+      formattedDate.value = props.yearOnly ? newValue : parseDate(newValue);
+    }
+  }
+);
+
+const emitIsoDate = (value: string): void => {
+  if (props.yearOnly) {
+    emit('input', value);
+  } else {
+    const month = value.substring(0, 2);
+    const day = value.substring(2, 4);
+    const year = value.substring(4, 8);
+    lastEmittedValue = year && month && day ? `${year}-${month}-${day}` : '';
+    emit('input', lastEmittedValue);
+  }
+};
+
+const defaultLabel = computed(() => {
+  return props.yearOnly ? t('Year of birth') : t('Date of birth');
 });
+
+const defaultPlaceholder = computed(() => {
+  return props.yearOnly ? t('YYYY') : t('MM/DD/YYYY');
+});
+
+const validationMessage = computed(() => {
+  const inputLabel = props.yearOnly ? t('year of birth') : t('date of birth');
+  return t('Please enter a valid {inputLabel}', { inputLabel });
+});
+
+const defaultRules = computed(() => {
+  const minLengthRule = createMinLengthRule(props.yearOnly ? 4 : 10, validationMessage.value);
+  const maxAgeRule = (v: string): boolean | string =>
+    isValidDateInAgeRange(0, 125)(v) || validationMessage.value;
+  const validDateRule = (v: string): boolean | string =>
+    dayjs(v, 'MM/DD/YYYY', true).isValid() || validationMessage.value;
+
+  return [minLengthRule, maxAgeRule, !props.yearOnly ? validDateRule : undefined].filter(
+    Boolean
+  ) as Rules<string>;
+});
+
+const computedLabel = computed(() => props.label || defaultLabel.value);
+const computedPlaceholder = computed(() => props.placeholder || defaultPlaceholder.value);
+const computedRules = computed(() => [...defaultRules.value, ...props.rules]);
+const dateLength = computed(() => (props.yearOnly ? 4 : 8));
+const mask = computed(() => (props.yearOnly ? '####' : '##/##/####'));
 </script>