@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CTextField.vue

@@ -125,17 +125,24 @@
 </template>
 
 <script lang="ts">
+// NOTE(slanden): These rules do not properly handle multiple script tags in Vue
+// eslint-disable-next-line import/order, import/no-duplicates
+import type { Ref } from 'vue';
+
+export interface CTextFieldExposed {
+  input: Ref<HTMLInputElement | null>;
+  focus: () => void;
+  blur: () => void;
+  startValidating: () => void;
+}
+</script>
+
+<script setup lang="ts">
+// eslint-disable-next-line import/order
 import { faEye, faEyeSlash, faXmark } from '@fortawesome/pro-regular-svg-icons';
-import {
-  type PropType,
-  type Ref,
-  type StyleValue,
-  computed,
-  defineComponent,
-  onMounted,
-  ref,
-  toRefs,
-} from 'vue';
+// eslint-disable-next-line import/no-duplicates
+import type { StyleValue, VNode } from 'vue';
+import { computed, onMounted, ref, toRefs, useAttrs, useSlots } from 'vue';
 
 import CFormFieldCounter from '@propelinc/citrus-ui/src/components/CFormFieldCounter.vue';
 import CIconButton from '@propelinc/citrus-ui/src/components/CIconButton.vue';
@@ -147,203 +154,192 @@ import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
 import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
 import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
 
-// Export the interface for what this component exposes
-export interface CTextFieldExposed {
-  input: Ref<HTMLInputElement | null>;
-  focus: () => void;
-  blur: () => void;
-  startValidating: () => void;
-}
-
-export default defineComponent({
-  name: 'CTextField',
-  components: { CFormFieldCounter, CIconButton, CValidationMessage },
-  inheritAttrs: false,
-  props: {
-    id: { type: String as PropType<string | null>, default: null },
-    label: { type: String as PropType<string | null>, default: null },
-    ariaLabel: { type: String as PropType<string | null>, default: null },
-    placeholder: { type: String, default: '' },
-    type: {
-      type: String as PropType<
-        'text' | 'password' | 'email' | 'tel' | 'url' | 'search' | 'number' | 'decimal' | 'numeric'
-      >,
-      default: 'text',
-    },
-    clearable: { type: Boolean, default: false },
-    size: { type: String as PropType<'medium' | 'large'>, default: 'medium' },
-    inputmode: {
-      type: String as PropType<
-        'text' | 'search' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal'
-      >,
-      default: undefined,
-    },
-    minlength: { type: [Number, String], default: undefined },
-    maxlength: { type: [Number, String], default: undefined },
-    disabled: { type: Boolean, default: false },
-    hideable: { type: Boolean, default: false },
-    hideLabel: { type: Boolean, default: false },
-    hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
-    value: { type: String, default: '' },
-    dataTest: { type: String, default: 'text-field' },
-    counter: { type: Number as PropType<number | null>, default: null },
-    counterValue: {
-      type: [Number, Function] as PropType<number | (() => number | null)>,
-      default: null,
-    },
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    validateOnBlur: { type: Boolean, default: true },
-    required: { type: Boolean, default: false },
+defineOptions({ inheritAttrs: false });
+
+const props = withDefaults(
+  defineProps<{
+    id?: string | null;
+    label?: string | null;
+    ariaLabel?: string | null;
+    placeholder?: string;
+    type?:
+      | 'text'
+      | 'password'
+      | 'email'
+      | 'tel'
+      | 'url'
+      | 'search'
+      | 'number'
+      | 'decimal'
+      | 'numeric';
+    clearable?: boolean;
+    size?: 'medium' | 'large';
+    inputmode?: 'text' | 'search' | 'none' | 'tel' | 'url' | 'email' | 'numeric' | 'decimal';
+    minlength?: number | string;
+    maxlength?: number | string;
+    disabled?: boolean;
+    hideable?: boolean;
+    hideLabel?: boolean;
+    hideDetails?: boolean | 'auto';
+    value?: string;
+    dataTest?: string;
+    counter?: number | null;
+    counterValue?: number | (() => number | null) | null;
+    rules?: Rules<string>;
+    validateOnBlur?: boolean;
+    required?: boolean;
     /**
      * Overrides the default validation message. If provided, this error message will always
      * be shown, regardless of any other failing validation rules.
      */
-    errorMessage: { type: String, default: null },
-  },
-  emits: [
-    'keyup',
-    'keydown',
-    'keypress',
-    'input',
-    'focus',
-    'blur',
-    'change',
-    'click',
-    'click:hide',
-  ],
-  setup(props, { attrs, emit, slots, expose }) {
-    const { t } = useTranslation();
-
-    const isFocused = ref(false);
-    const inputHidden = ref(true);
-    const inputType = computed(() =>
-      props.hideable && inputHidden.value ? 'password' : props.type
-    );
-    const hideToggleAriaLabel = computed(() => {
-      return props.hideable && inputHidden.value ? t('Show input value') : t('Hide input value');
-    });
+    errorMessage?: string;
+  }>(),
+  {
+    id: null,
+    label: null,
+    ariaLabel: null,
+    placeholder: '',
+    type: 'text',
+    clearable: false,
+    size: 'medium',
+    inputmode: undefined,
+    minlength: undefined,
+    maxlength: undefined,
+    disabled: false,
+    hideable: false,
+    hideLabel: false,
+    hideDetails: false,
+    value: '',
+    dataTest: 'text-field',
+    counter: null,
+    counterValue: null,
+    rules: () => [],
+    validateOnBlur: true,
+    required: false,
+    errorMessage: undefined,
+  }
+);
+
+const emit = defineEmits<{
+  'keyup': [event: KeyboardEvent];
+  'keydown': [event: KeyboardEvent];
+  'keypress': [event: KeyboardEvent];
+  'input': [value: string];
+  'focus': [event: Event];
+  'blur': [event: Event];
+  'change': [value: string];
+  'click': [event: MouseEvent];
+  'click:hide': [hidden: boolean];
+}>();
+
+defineSlots<{
+  'label'?: () => VNode[];
+  'prepend-inner'?: () => VNode[];
+  'append'?: () => VNode[];
+  'message'?: () => VNode[];
+}>();
+
+const attrs = useAttrs();
+const slots = useSlots();
+const { t } = useTranslation();
+
+const isFocused = ref(false);
+const inputHidden = ref(true);
+const inputType = computed(() => (props.hideable && inputHidden.value ? 'password' : props.type));
+const hideToggleAriaLabel = computed(() => {
+  return props.hideable && inputHidden.value ? t('Show input value') : t('Hide input value');
+});
 
-    const { id, value, rules, required } = toRefs(props);
+const { id, value, rules, required } = toRefs(props);
 
-    const idWithFallback = useId(id);
+const idWithFallback = useId(id);
 
-    const inputValue = useInternalValue(value, {
-      onChange: (newValue) => {
-        emit('input', newValue);
-      },
-    });
-
-    const input: Ref<HTMLInputElement | null> = ref(null);
-    const {
-      message: validationMessage,
-      valid: isValidationValid,
-      listeners: validationListeners,
-      startValidating,
-    } = useValidations({
-      id: idWithFallback,
-      value: inputValue,
-      rules,
-      required,
-      validateOn: computed(() => (props.validateOnBlur ? 'blur' : 'input')),
-      field: input,
-    });
-
-    const isInvalid = computed(() => !isValidationValid.value || !!props.errorMessage);
-
-    const prefixSlotHasContent = useSlotHasContent('prepend-inner');
-    const suffixSlotHasContent = useSlotHasContent('append');
-    const messageSlotHasContent = useSlotHasContent('message');
-
-    const toggleHidden = (): void => {
-      inputHidden.value = !inputHidden.value;
-      emit('click:hide', inputHidden.value);
-    };
-
-    const onInput = (event: Event): void => {
-      const target = event.target as HTMLInputElement;
-      if (target.value !== inputValue.value) {
-        inputValue.value = target.value;
-        validationListeners.input(event);
-      }
-    };
-
-    const onChange = (event: Event): void => {
-      validationListeners.change(event);
-      const target = event.target as HTMLInputElement;
-      emit('change', target.value);
-    };
-
-    const onFocus = (event: Event): void => {
-      isFocused.value = true;
-      emit('focus', event);
-    };
-
-    const onBlur = (event: Event): void => {
-      isFocused.value = false;
-      validationListeners.blur(event);
-      emit('blur', event);
-    };
-
-    const clearInput = (): void => {
-      emit('input', '');
-    };
-
-    const focus = (): void => {
-      input.value?.focus();
-    };
-
-    const blur = (): void => {
-      input.value?.blur();
-    };
-
-    onMounted(() => {
-      if (!props.label && !slots.label && !props.ariaLabel) {
-        console.error(
-          'Missing CTextField label. Please provide a label prop, an ariaLabel prop or pass a label via the label slot.'
-        );
-      }
-    });
-
-    const exposedAPI: CTextFieldExposed = { input, focus, blur, startValidating };
-    expose(exposedAPI);
-
-    const fallthroughAttrs = computed(() => {
-      const { class: _, style: __, ...rest } = attrs;
-      return rest;
-    });
-
-    // Need to compute these to cast the type to avoid type errors
-    const rootStyles = computed(() => attrs.style as StyleValue);
-
-    return {
-      faXmark,
-      faEye,
-      faEyeSlash,
-
-      fallthroughAttrs,
-      hideToggleAriaLabel,
-      idWithFallback,
-      input,
-      inputHidden,
-      inputType,
-      inputValue,
-      isFocused,
-      messageSlotHasContent,
-      prefixSlotHasContent,
-      rootStyles,
-      suffixSlotHasContent,
-      isInvalid,
-      validationMessage,
-
-      clearInput,
-      onBlur,
-      onChange,
-      onFocus,
-      onInput,
-      toggleHidden,
-    };
+const inputValue = useInternalValue(value, {
+  onChange: (newValue) => {
+    emit('input', newValue);
   },
 });
+
+const input = ref<HTMLInputElement | null>(null);
+const {
+  message: validationMessage,
+  valid: isValidationValid,
+  listeners: validationListeners,
+  startValidating,
+} = useValidations({
+  id: idWithFallback,
+  value: inputValue,
+  rules,
+  required,
+  validateOn: computed(() => (props.validateOnBlur ? 'blur' : 'input')),
+  field: input,
+});
+
+const isInvalid = computed(() => !isValidationValid.value || !!props.errorMessage);
+
+const prefixSlotHasContent = useSlotHasContent('prepend-inner');
+const suffixSlotHasContent = useSlotHasContent('append');
+const messageSlotHasContent = useSlotHasContent('message');
+
+const toggleHidden = (): void => {
+  inputHidden.value = !inputHidden.value;
+  emit('click:hide', inputHidden.value);
+};
+
+const onInput = (event: Event): void => {
+  const target = event.target as HTMLInputElement;
+  if (target.value !== inputValue.value) {
+    inputValue.value = target.value;
+    validationListeners.input(event);
+  }
+};
+
+const onChange = (event: Event): void => {
+  validationListeners.change(event);
+  const target = event.target as HTMLInputElement;
+  emit('change', target.value);
+};
+
+const onFocus = (event: Event): void => {
+  isFocused.value = true;
+  emit('focus', event);
+};
+
+const onBlur = (event: Event): void => {
+  isFocused.value = false;
+  validationListeners.blur(event);
+  emit('blur', event);
+};
+
+const clearInput = (): void => {
+  emit('input', '');
+};
+
+const focus = (): void => {
+  input.value?.focus();
+};
+
+const blur = (): void => {
+  input.value?.blur();
+};
+
+onMounted(() => {
+  if (!props.label && !slots.label && !props.ariaLabel) {
+    console.error(
+      'Missing CTextField label. Please provide a label prop, an ariaLabel prop or pass a label via the label slot.'
+    );
+  }
+});
+
+const exposedAPI: CTextFieldExposed = { input, focus, blur, startValidating };
+defineExpose(exposedAPI);
+
+const fallthroughAttrs = computed(() => {
+  const { class: _, style: __, ...rest } = attrs;
+  return rest;
+});
+
+const rootStyles = computed(() => attrs.style as StyleValue);
 </script>
 
 <style lang="scss" scoped>

package/src/components/CTextLink.vue

@@ -13,39 +13,42 @@
   </a>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import { useRouterLink } from '@propelinc/citrus-ui/src/composables/router';
 
-export default defineComponent({
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Controls whether the text link functions as a router-link */
-    to: { type: [String, Object] as PropType<RouteLocationRaw>, default: undefined },
+    to?: RouteLocationRaw;
     /** Designates the text link as an anchor and applies the href attribute */
-    href: { type: String, default: undefined },
+    href?: string;
     /** Designates the target attribute. Only use with the href prop. */
-    target: { type: String, default: undefined },
+    target?: string;
     /** Toggles whether the link should have an underline */
-    underline: { type: Boolean, default: true },
-  },
-  setup(props) {
-    const to = computed(() => props.to);
-    const { href: routerDestination, navigate } = useRouterLink(to);
-    const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
-
-    const isRoleButton = computed(() => {
-      return !props.to && !props.href;
-    });
-
-    return {
-      isRoleButton,
-      navigate,
-      routerDestinationOrHref,
-    };
-  },
+    underline?: boolean;
+  }>(),
+  {
+    to: undefined,
+    href: undefined,
+    target: undefined,
+    underline: true,
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+const to = computed(() => props.to);
+const { href: routerDestination, navigate } = useRouterLink(to);
+const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
+
+const isRoleButton = computed(() => {
+  return !props.to && !props.href;
 });
 </script>
 

package/src/components/CThirdPartyLogo.vue

@@ -19,8 +19,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent, ref } from 'vue';
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import { ref } from 'vue';
 
 import CSquaredIcon from '@propelinc/citrus-ui/src/components/CSquaredIcon.vue';
 
@@ -28,71 +29,41 @@ type Size = 'medium' | 'large';
 
 type ImageState = 'loading' | 'loaded' | 'failed';
 
-const SIZES = new Set<Size>(['medium', 'large']);
-
 const SIZE_TO_VALUE: Record<Size, `${number}px`> = {
   medium: '40px',
   large: '56px',
 };
 
-/**
- * A component that displays a third party logo with a fallback icon.
- *
- * The fallback icon is displayed while the image is loading or if the image fails to load.
- *
- * The image is rendered, but hidden, while loading, and displayed when loaded.
- */
-export default defineComponent({
-  name: 'CThirdPartyLogo',
-  components: {
-    CSquaredIcon,
-  },
-  props: {
-    /**
-     * The alt text for the logo.
-     */
-    alt: { type: String, required: true },
-    /**
-     * The color of the fallback icon logo
-     */
-    color: CSquaredIcon.props.color,
-    /**
-     * The Font Awesome icon to display as a fallback
-     */
-    icon: CSquaredIcon.props.icon,
-    /**
-     * The size of the logo. Defaults to `medium`.
-     */
-    size: {
-      type: String as PropType<Size>,
-      required: false,
-      default: 'medium',
-      validator: (value: string) => SIZES.has(value as Size),
-    },
-    /**
-     * The URL of the logo image
-     */
-    src: { type: String, required: false, default: '' },
-  },
-  setup() {
-    const imageState = ref<ImageState>('loading');
+withDefaults(
+  defineProps<{
+    /** The alt text for the logo. */
+    alt: string;
+    /** The color of the fallback icon logo */
+    color?: string;
+    /** The Font Awesome icon to display as a fallback */
+    icon?: string | string[] | IconDefinition | null;
+    /** The size of the logo. Defaults to `medium`. */
+    size?: Size;
+    /** The URL of the logo image */
+    src?: string;
+  }>(),
+  {
+    color: 'gray-100',
+    icon: null,
+    size: 'medium',
+    src: '',
+  }
+);
 
-    const handleImageError = (): void => {
-      imageState.value = 'failed';
-    };
+const imageState = ref<ImageState>('loading');
 
-    const handleImageLoad = (): void => {
-      imageState.value = 'loaded';
-    };
+const handleImageError = (): void => {
+  imageState.value = 'failed';
+};
 
-    return {
-      handleImageError,
-      handleImageLoad,
-      imageState,
-      SIZE_TO_VALUE,
-    };
-  },
-});
+const handleImageLoad = (): void => {
+  imageState.value = 'loaded';
+};
 </script>
 
 <style scoped>