@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CForm.vue

@@ -4,9 +4,10 @@
   </form>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import scrollIntoViewIfNeeded from 'scroll-into-view-if-needed';
-import { computed, defineComponent, onMounted, provide, ref, watch } from 'vue';
+import type { VNode } from 'vue';
+import { computed, onMounted, provide, ref, watch } from 'vue';
 
 import { VALIDATIONS } from '@propelinc/citrus-ui/src/services/injections/forms';
 import type { ValidationState } from '@propelinc/citrus-ui/src/types/CForm';
@@ -18,69 +19,75 @@ interface FormValidation {
   field?: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement | null;
 }
 
-export default defineComponent({
-  name: 'CForm',
-  props: {
-    dataTest: { type: String, default: 'form' },
-    // eslint-disable-next-line vue/no-unused-properties
-    value: { type: Boolean, default: false },
-  },
-  emits: ['submit', 'input'],
-  setup(_, { expose, emit }) {
-    const form = ref<HTMLFormElement | null>(null);
-    const inputs = ref<Record<string, FormValidation>>({});
-
-    provide(VALIDATIONS, {
-      register: (input: ValidationState) => {
-        // NOTE(ram): Vue collapses the ref to input.field automatically so we need to adjust types.
-        inputs.value = { ...inputs.value, [input.id]: input as unknown as FormValidation };
-      },
-      unregister: (id: string) => {
-        const filteredInputs = { ...inputs.value };
-        delete filteredInputs[id];
-        inputs.value = filteredInputs;
-      },
-    });
+withDefaults(
+  defineProps<{
+    dataTest?: string;
+  }>(),
+  {
+    dataTest: 'form',
+  }
+);
 
-    const inputArray = computed(() => Object.values(inputs.value));
-    const getInvalidInputs = (startValidating?: boolean): FormValidation[] => {
-      return inputArray.value.filter((input) => {
-        return startValidating ? !input.validate() : !input.valid;
-      });
-    };
+const emit = defineEmits<{
+  submit: [event: Event];
+  input: [value: boolean];
+}>();
 
-    // NOTE(mohan): I would love for this to be a computed property, but Vue 2's
-    // the reactivity system can't seem to track refs inside of refs, though it
-    // should work in Vue 3.
-    watch(getInvalidInputs, (newInvalidInputs, oldInvalidInputs) => {
-      const newValid = newInvalidInputs.length === 0;
-      const oldValid = oldInvalidInputs?.length === 0;
-      if (newValid !== oldValid) {
-        emit('input', newValid);
-      }
-    });
-    onMounted(() => emit('input', getInvalidInputs().length === 0));
+defineSlots<{
+  default?: () => VNode[];
+}>();
 
-    const validate = (): boolean => {
-      if (!form.value) {
-        return false;
-      }
+const form = ref<HTMLFormElement | null>(null);
+const inputs = ref<Record<string, FormValidation>>({});
 
-      const invalidInputs = getInvalidInputs(true);
-      const firstInvalidField = invalidInputs.find((input) => input.field)?.field;
-      if (firstInvalidField) {
-        scrollIntoViewIfNeeded(firstInvalidField, {
-          behavior: 'smooth',
-          block: 'center',
-          scrollMode: 'if-needed',
-        });
-      }
+provide(VALIDATIONS, {
+  register: (input: ValidationState) => {
+    // NOTE(ram): Vue collapses the ref to input.field automatically so we need to adjust types.
+    inputs.value = { ...inputs.value, [input.id]: input as unknown as FormValidation };
+  },
+  unregister: (id: string) => {
+    const filteredInputs = { ...inputs.value };
+    delete filteredInputs[id];
+    inputs.value = filteredInputs;
+  },
+});
 
-      return invalidInputs.length === 0;
-    };
+const inputArray = computed(() => Object.values(inputs.value));
+const getInvalidInputs = (startValidating?: boolean): FormValidation[] => {
+  return inputArray.value.filter((input) => {
+    return startValidating ? !input.validate() : !input.valid;
+  });
+};
 
-    expose({ validate, inputs: inputArray });
-    return { form };
-  },
+// NOTE(mohan): I would love for this to be a computed property, but Vue 2's
+// the reactivity system can't seem to track refs inside of refs, though it
+// should work in Vue 3.
+watch(getInvalidInputs, (newInvalidInputs, oldInvalidInputs) => {
+  const newValid = newInvalidInputs.length === 0;
+  const oldValid = oldInvalidInputs?.length === 0;
+  if (newValid !== oldValid) {
+    emit('input', newValid);
+  }
 });
+onMounted(() => emit('input', getInvalidInputs().length === 0));
+
+const validate = (): boolean => {
+  if (!form.value) {
+    return false;
+  }
+
+  const invalidInputs = getInvalidInputs(true);
+  const firstInvalidField = invalidInputs.find((input) => input.field)?.field;
+  if (firstInvalidField) {
+    scrollIntoViewIfNeeded(firstInvalidField, {
+      behavior: 'smooth',
+      block: 'center',
+      scrollMode: 'if-needed',
+    });
+  }
+
+  return invalidInputs.length === 0;
+};
+
+defineExpose({ validate, inputs: inputArray });
 </script>

package/src/components/CFormFieldCounter.vue

@@ -2,39 +2,36 @@
   <div>{{ displayText }}</div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-export default defineComponent({
-  name: 'CFormFieldCounter',
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Sets the denominator of the counter. */
-    counter: { type: Number as PropType<number | null>, default: null },
+    counter?: number | null;
     /** Function or number that determines the numerator of the counter. */
-    counterValue: {
-      type: [Number, Function] as PropType<number | (() => number | null)>,
-      default: null,
-    },
+    counterValue?: number | (() => number | null) | null;
     /** Input value of the parent form field */
-    value: { type: String, default: '' },
-  },
-  setup(props) {
-    const numerator = computed(() => {
-      if (typeof props.counterValue === 'function') {
-        return props.counterValue();
-      } else if (typeof props.counterValue === 'number') {
-        return props.counterValue;
-      } else {
-        return props.value.length;
-      }
-    });
+    value?: string;
+  }>(),
+  {
+    counter: null,
+    counterValue: null,
+    value: '',
+  }
+);
 
-    const displayText = computed(() => {
-      return `${numerator.value}/${props.counter}`;
-    });
+const numerator = computed(() => {
+  if (typeof props.counterValue === 'function') {
+    return props.counterValue();
+  } else if (typeof props.counterValue === 'number') {
+    return props.counterValue;
+  } else {
+    return props.value.length;
+  }
+});
 
-    return { numerator, displayText };
-  },
+const displayText = computed(() => {
+  return `${numerator.value}/${props.counter}`;
 });
 </script>

package/src/components/CIconButton.vue

@@ -40,11 +40,11 @@
   </CButton>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { IconDefinition } from '@fortawesome/pro-light-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import type { PropType } from 'vue';
-import { computed, defineComponent, inject, provide } from 'vue';
+import type { VNode } from 'vue';
+import { computed, inject, provide } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import CButton from '@propelinc/citrus-ui/src/components/CButton/CButton.vue';
@@ -57,105 +57,124 @@ import { useA11yLabelCheck } from '@propelinc/citrus-ui/src/composables/accessib
 import { BOUNCE_AMOUNT } from '@propelinc/citrus-ui/src/services/injections/buttons';
 import { INHERIT_COLOR, TERTIARY } from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
 
-export default defineComponent({
-  components: { FontAwesomeIcon, CButton },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** ARIA label for the button. You must use either this or ariaLabelledby. */
-    ariaLabel: { type: String, default: undefined },
+    ariaLabel?: string;
     /** ARIA labelledby for the button. You must use either this or ariaLabel. */
-    ariaLabelledby: { type: String, default: undefined },
+    ariaLabelledby?: string;
     /** Controls whether button is disabled */
-    disabled: { type: Boolean, default: false },
+    disabled?: boolean;
     /** Designates the button as an anchor and applies the href attribute */
-    href: { type: String, default: undefined },
+    href?: string;
     /** Specifies a Font Awesome icon */
-    icon: {
-      type: [String, Array, Object] as PropType<string | string[] | IconDefinition>,
-      default: undefined,
-    },
+    icon?: string | string[] | IconDefinition;
     /**
      * Controls whether button uses the large variant
      * @deprecated Use `size="large"` instead
      */
-    large: { type: Boolean, default: false, deprecated: true },
+    large?: boolean;
     /**
      * Controls the level of the button
      * @default 'normal'
      */
-    level: { type: String as PropType<ButtonLevel>, default: 'normal' },
+    level?: ButtonLevel;
     /** Controls whether button is loading */
-    loading: { type: Boolean, default: false },
+    loading?: boolean;
     /**
      * Controls whether button uses the secondary variant
      * @deprecated Use `variant="secondary"` instead
      */
-    secondary: { type: Boolean, default: false, deprecated: true },
+    secondary?: boolean;
     /**
      * Controls the size of the button
      * @default 'medium'
      */
-    size: { type: String as PropType<ButtonSize>, default: 'medium' },
+    size?: ButtonSize;
     /** Spins the icon for loading states */
-    spinIcon: { type: Boolean, default: false },
+    spinIcon?: boolean;
     /** Designates the target attribute. Only use with the href prop. */
-    target: { type: String, default: undefined },
+    target?: string;
     /**
      * Controls whether button uses the tertiary variant
      * @deprecated Use `variant="tertiary"` instead
      */
-    tertiary: { type: Boolean, default: false, deprecated: true },
+    tertiary?: boolean;
     /** Controls whether button functions as a router-link */
-    to: { type: [Object, String] as PropType<RouteLocationRaw>, default: undefined },
+    to?: RouteLocationRaw;
     /**
      * Controls the variant of the button
      * @default 'primary'
      */
-    variant: { type: String as PropType<ButtonVariant>, default: 'primary' },
-  },
-  emits: ['blur', 'click', 'focus'],
-  setup(props) {
-    useA11yLabelCheck('CIconButton', props);
-
-    const injectedTertiary = inject(TERTIARY, undefined);
-    const injectedOrPropTertiary = computed(() => injectedTertiary?.value ?? props.tertiary);
-    /**
-     * Handle the `variant` prop. `secondary` and `tertiary` are deprecated, but because we set a
-     * default `variant`, we need to give them precedence.
-     *
-     * This is slightly different than the implementation of `computedVariant` in CButton, as
-     * `CButton` does not make use of an injected `TERTIARY` value.
-     */
-    const computedVariant = computed((): ButtonVariant => {
-      if (props.secondary) {
-        return 'secondary';
-      }
-
-      if (injectedOrPropTertiary.value) {
-        return 'tertiary';
-      }
-
-      return props.variant;
-    });
-
-    /**
-     * Handle the `size` prop. `large` is deprecated, but because we set a default `size`, we need
-     * to give it precedence.
-     */
-    const computedSize = computed((): ButtonSize => {
-      if (props.large) {
-        return 'large';
-      }
+    variant?: ButtonVariant;
+  }>(),
+  {
+    ariaLabel: undefined,
+    ariaLabelledby: undefined,
+    disabled: false,
+    href: undefined,
+    icon: undefined,
+    large: false,
+    level: 'normal',
+    loading: false,
+    secondary: false,
+    size: 'medium',
+    spinIcon: false,
+    target: undefined,
+    tertiary: false,
+    to: undefined,
+    variant: 'primary',
+  }
+);
+
+defineEmits<{
+  blur: [event: Event];
+  click: [event: MouseEvent];
+  focus: [event: Event];
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+useA11yLabelCheck('CIconButton', props);
+
+const injectedTertiary = inject(TERTIARY, undefined);
+const injectedOrPropTertiary = computed(() => injectedTertiary?.value ?? props.tertiary);
+/**
+ * Handle the `variant` prop. `secondary` and `tertiary` are deprecated, but because we set a
+ * default `variant`, we need to give them precedence.
+ *
+ * This is slightly different than the implementation of `computedVariant` in CButton, as
+ * `CButton` does not make use of an injected `TERTIARY` value.
+ */
+const computedVariant = computed((): ButtonVariant => {
+  if (props.secondary) {
+    return 'secondary';
+  }
+
+  if (injectedOrPropTertiary.value) {
+    return 'tertiary';
+  }
+
+  return props.variant;
+});
 
-      return props.size;
-    });
+/**
+ * Handle the `size` prop. `large` is deprecated, but because we set a default `size`, we need
+ * to give it precedence.
+ */
+const computedSize = computed((): ButtonSize => {
+  if (props.large) {
+    return 'large';
+  }
 
-    const inheritColor = inject(INHERIT_COLOR, undefined);
+  return props.size;
+});
 
-    provide(BOUNCE_AMOUNT, 0.9);
+const inheritColor = inject(INHERIT_COLOR, undefined);
 
-    return { computedSize, computedVariant, inheritColor };
-  },
-});
+provide(BOUNCE_AMOUNT, 0.9);
 </script>
 
 <style lang="scss" scoped>

package/src/components/CLabel.vue

@@ -9,24 +9,30 @@
   </div>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import type { PropType } from 'vue';
-import { defineComponent } from 'vue';
+import type { VNode } from 'vue';
 
-export default defineComponent({
-  components: { FontAwesomeIcon },
-  props: {
+withDefaults(
+  defineProps<{
     /** Specifies the label's icon, overwritten if icon slot is used */
-    icon: {
-      type: [Array, String, Object] as PropType<string | string[] | IconDefinition>,
-      default: null,
-    },
+    icon?: string | string[] | IconDefinition | null;
     /** A custom data test string */
-    dataTest: { type: String, default: 'label' },
-  },
-});
+    dataTest?: string;
+  }>(),
+  {
+    icon: null,
+    dataTest: 'label',
+  }
+);
+
+defineSlots<{
+  /** Icon slot, overrides icon prop */
+  icon?: () => VNode[];
+  /** Default content */
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CListItem.vue

@@ -51,92 +51,93 @@
   </component>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { faChevronRight } from '@fortawesome/pro-regular-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { type PropType, computed, defineComponent, mergeProps, toRefs } from 'vue';
+import { computed, mergeProps, toRefs, useAttrs } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import CListItemContent from '@propelinc/citrus-ui/src/components/CListItemContent.vue';
 import CListItemIcon from '@propelinc/citrus-ui/src/components/CListItemIcon.vue';
 import { useRouterLink } from '@propelinc/citrus-ui/src/composables/router';
 import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
-import type { FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
 
-export default defineComponent({
-  components: { FontAwesomeIcon, CListItemIcon, CListItemContent },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** The Font Awesome icon to display */
-    icon: { type: [String, Array, Object] as FaPropType, default: null },
+    icon?: string | string[] | IconDefinition | null;
     /** The icon to display on the right side for clickable items, defaulting to right arrow */
-    actionIcon: { type: [String, Array, Object] as FaPropType, default: null },
+    actionIcon?: string | string[] | IconDefinition | null;
     /** Color of the icon background */
-    iconColor: { type: String, default: 'gray-100' },
+    iconColor?: string;
     /** Emphasized text above body text. Overridden by the default slot. */
-    title: { type: String, default: undefined },
+    title?: string;
     /** Plain body copy. Overridden by the default slot. */
-    label: { type: String, default: undefined },
+    label?: string;
     /** Router location for links within the app */
-    to: { type: [String, Object] as PropType<RouteLocationRaw>, default: undefined },
+    to?: RouteLocationRaw;
     /** HTML target attribute for links to outside the app */
-    target: { type: String, default: undefined },
+    target?: string;
     /** Location for links to outside the app */
-    href: { type: String, default: undefined },
+    href?: string;
     /** Changes alignment of icon and action icon */
-    align: { type: String as PropType<'top' | 'center'>, default: 'center' },
+    align?: 'top' | 'center';
     /** Overrides default behavior to display a chevron in the action slot */
-    hideAction: { type: Boolean, default: false },
-  },
-  setup(props, { attrs }) {
-    const { to } = toRefs(props);
-    const { href: routerDestination, navigate } = useRouterLink(to);
-    const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
-
-    const isLink = computed(() => !!routerDestinationOrHref.value);
-    const isButton = computed(() => !!attrs.onClick);
-    const isTappable = computed(() => isLink.value || isButton.value);
-
-    const tag = computed(() => {
-      if (isLink.value) {
-        return 'a';
-      } else if (isButton.value) {
-        return 'button';
-      } else {
-        return 'div';
-      }
-    });
-    const tagAttrs = computed(() => {
-      if (isButton.value) {
-        return { type: 'button' };
-      }
-      return {};
-    });
-
-    const actionSlotHasContent = useSlotHasContent('action');
-
-    const renderActionSlot = computed(() => {
-      if (props.hideAction) {
-        return false;
-      }
-
-      return isTappable.value || actionSlotHasContent.value;
-    });
-    const iconSlotHasContent = useSlotHasContent('icon');
-
-    const allAttrs = computed(() => mergeProps(attrs, tagAttrs.value));
-
-    return {
-      allAttrs,
-      faChevronRight,
-      iconSlotHasContent,
-      isTappable,
-      navigate,
-      renderActionSlot,
-      routerDestinationOrHref,
-      tag,
-    };
-  },
+    hideAction?: boolean;
+  }>(),
+  {
+    icon: null,
+    actionIcon: null,
+    iconColor: 'gray-100',
+    title: undefined,
+    label: undefined,
+    to: undefined,
+    target: undefined,
+    href: undefined,
+    align: 'center',
+    hideAction: false,
+  }
+);
+
+const attrs = useAttrs();
+
+const { to } = toRefs(props);
+const { href: routerDestination, navigate } = useRouterLink(to);
+const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
+
+const isLink = computed(() => !!routerDestinationOrHref.value);
+const isButton = computed(() => !!attrs.onClick);
+const isTappable = computed(() => isLink.value || isButton.value);
+
+const tag = computed(() => {
+  if (isLink.value) {
+    return 'a';
+  } else if (isButton.value) {
+    return 'button';
+  } else {
+    return 'div';
+  }
+});
+const tagAttrs = computed(() => {
+  if (isButton.value) {
+    return { type: 'button' };
+  }
+  return {};
 });
+
+const actionSlotHasContent = useSlotHasContent('action');
+
+const renderActionSlot = computed(() => {
+  if (props.hideAction) {
+    return false;
+  }
+
+  return isTappable.value || actionSlotHasContent.value;
+});
+const iconSlotHasContent = useSlotHasContent('icon');
+
+const allAttrs = computed(() => mergeProps(attrs, tagAttrs.value));
 </script>
 
 <style lang="scss" scoped>

package/src/components/CListItemContent.vue

@@ -19,24 +19,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
+<script setup lang="ts">
 import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
 
-export default defineComponent({
-  name: 'CListItemContent',
-  props: {
-    title: { type: String, default: '' },
-    label: { type: String, default: '' },
-  },
-  setup() {
-    const titleSlotHasContent = useSlotHasContent('title');
-    const labelSlotHasContent = useSlotHasContent('label');
-
-    return { titleSlotHasContent, labelSlotHasContent };
-  },
-});
+withDefaults(
+  defineProps<{
+    title?: string;
+    label?: string;
+  }>(),
+  {
+    title: '',
+    label: '',
+  }
+);
+
+const titleSlotHasContent = useSlotHasContent('title');
+const labelSlotHasContent = useSlotHasContent('label');
 </script>
 
 <style lang="scss" scoped>