@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CListItemIcon.vue

@@ -9,25 +9,29 @@
   </CSquaredIcon>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
+import type { VNode } from 'vue';
 
 import CSquaredIcon from '@propelinc/citrus-ui/src/components/CSquaredIcon.vue';
 import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
 
-export default defineComponent({
-  name: 'CListItemIcon',
-  components: { CSquaredIcon },
-  props: {
-    icon: CSquaredIcon.props.icon,
-    iconColor: CSquaredIcon.props.color,
-  },
-  setup() {
-    const iconSlotHasContent = useSlotHasContent('icon');
+withDefaults(
+  defineProps<{
+    icon?: string | string[] | IconDefinition | null;
+    iconColor?: string;
+  }>(),
+  {
+    icon: null,
+    iconColor: 'gray-100',
+  }
+);
 
-    return { iconSlotHasContent };
-  },
-});
+defineSlots<{
+  icon?: () => VNode[];
+}>();
+
+const iconSlotHasContent = useSlotHasContent('icon');
 </script>
 
 <style lang="scss" scoped>

package/src/components/CLoader.vue

@@ -19,10 +19,11 @@
   </span>
 </template>
 
-<script lang="ts">
-import { type PropType, computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
-import Colors, { type HexColor, isValidColor } from '@propelinc/citrus-ui/src/colors/colors';
+import type { HexColor } from '@propelinc/citrus-ui/src/colors/colors';
+import Colors from '@propelinc/citrus-ui/src/colors/colors';
 import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
 
 type Size = 'sm' | 'md' | 'lg';
@@ -39,65 +40,55 @@ const SIZE_TO_TRACK_WIDTH: Record<Size, `${number}px`> = {
   lg: '3px',
 };
 
-export default defineComponent({
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Customizes screen reader only text alternative, should be translated */
-    accessibleText: { type: String, default: undefined },
+    accessibleText?: string;
     /** Sets the color of the indicator of the loader */
-    color: {
-      type: String as PropType<HexColor | keyof typeof Colors>,
-      default: 'default',
-      validator: isValidColor,
-    },
+    color?: HexColor | keyof typeof Colors;
     /** @deprecated Shows a smaller version of the loading icon */
-    small: { type: Boolean, default: false },
+    small?: boolean;
     /** Sets the size of the loader */
-    size: { type: String as PropType<Size>, default: 'lg' },
+    size?: Size;
     /** Sets the color of the track of the loader */
-    trackColor: {
-      type: String as PropType<HexColor | keyof typeof Colors>,
-      default: 'default',
-      validator: isValidColor,
-    },
-  },
-  setup(props) {
-    const computedColor = computed(() => {
-      return props.color === 'default' ? 'black' : props.color;
-    });
-
-    const computedTrackColor = computed(() => {
-      // If _any_ trackColor is provided, use that
-      if (props.trackColor !== 'default') {
-        return props.trackColor;
-      }
-
-      // trackColor is 'default', determine which default color it should use
-      if (props.color === 'white' || props.color === Colors.WHITE) {
-        return 'gray-500';
-      }
-
-      return 'gray-200';
-    });
-
-    const computedSize = computed((): Size => {
-      if (props.small) {
-        return 'sm';
-      }
-      return props.size;
-    });
-
-    const { cssColor: indicatorColorCode } = useCssColor(computedColor);
-    const { cssColor: trackColorCode } = useCssColor(computedTrackColor);
-
-    return {
-      computedSize,
-      indicatorColorCode,
-      SIZE_TO_FONT_SIZE,
-      SIZE_TO_TRACK_WIDTH,
-      trackColorCode,
-    };
-  },
+    trackColor?: HexColor | keyof typeof Colors;
+  }>(),
+  {
+    accessibleText: undefined,
+    color: 'default',
+    small: false,
+    size: 'lg',
+    trackColor: 'default',
+  }
+);
+
+const computedColor = computed(() => {
+  return props.color === 'default' ? 'black' : props.color;
+});
+
+const computedTrackColor = computed(() => {
+  // If _any_ trackColor is provided, use that
+  if (props.trackColor !== 'default') {
+    return props.trackColor;
+  }
+
+  // trackColor is 'default', determine which default color it should use
+  if (props.color === 'white' || props.color === Colors.WHITE) {
+    return 'gray-500';
+  }
+
+  return 'gray-200';
+});
+
+const computedSize = computed((): Size => {
+  if (props.small) {
+    return 'sm';
+  }
+  return props.size;
 });
+
+const { cssColor: indicatorColorCode } = useCssColor(computedColor);
+const { cssColor: trackColorCode } = useCssColor(computedTrackColor);
 </script>
 
 <style lang="scss" scoped>

package/src/components/CLogo.vue

@@ -2,22 +2,23 @@
   <img :src="src" :alt="$t('{appName}')" />
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
 import propelIcon from '@propelinc/citrus-ui/src/assets/logos/propel/icon.svg';
 import propelLockup from '@propelinc/citrus-ui/src/assets/logos/propel/lockup.svg';
 
-export default defineComponent({
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Show just the orange icon */
-    icon: { type: Boolean, default: false },
-  },
-  setup(props) {
-    const src = computed(() => {
-      return props.icon ? propelIcon : propelLockup;
-    });
-    return { src };
-  },
+    icon?: boolean;
+  }>(),
+  {
+    icon: false,
+  }
+);
+
+const src = computed(() => {
+  return props.icon ? propelIcon : propelLockup;
 });
 </script>

package/src/components/CMaskedTextField.vue

@@ -35,9 +35,10 @@
   </CTextField>
 </template>
 
-<script lang="ts">
-import type { MaskOptions, MaskTokens, MaskaDetail } from 'maska';
-import { type PropType, computed, defineComponent, ref, toRefs } from 'vue';
+<script setup lang="ts">
+import type { MaskInputOptions, MaskOptions, MaskTokens, MaskaDetail } from 'maska';
+import type { VNode } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 
 import CTextField from '@propelinc/citrus-ui/src/components/CTextField.vue';
 import {
@@ -47,72 +48,87 @@ import {
 } from '@propelinc/citrus-ui/src/composables/input-mask';
 import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
 
-export default defineComponent({
-  name: 'CMaskedTextField',
-  components: { CTextField },
-  props: {
-    counter: { type: Number as PropType<number | null>, default: null },
-    dataTest: { type: String, default: 'masked-text-field' },
-    id: { type: String, default: undefined },
-    label: { type: String as PropType<string | null>, default: null },
-    mask: {
-      type: [String, Array, Function] as PropType<MaskOptions['mask'] | null>,
-      required: true,
-    },
-    minlength: { type: [Number, String], default: null },
-    maxlength: { type: [Number, String], default: null },
-    placeholder: { type: String, default: undefined },
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    tokens: { type: Object as PropType<MaskTokens | null>, default: null },
-    unmaskRules: { type: Boolean, default: true },
-    value: { type: String, default: '' },
-  },
-  emits: ['keyup', 'keydown', 'keypress', 'input', 'focus', 'blur', 'change', 'input:masked'],
-  setup(props, { emit, expose }) {
-    const { minlength, maxlength, value } = toRefs(props);
+const props = withDefaults(
+  defineProps<{
+    counter?: number | null;
+    dataTest?: string;
+    id?: string;
+    label?: string | null;
+    mask: MaskOptions['mask'] | null;
+    minlength?: number | string | null;
+    maxlength?: number | string | null;
+    placeholder?: string;
+    rules?: Rules<string>;
+    tokens?: MaskTokens | null;
+    unmaskRules?: boolean;
+    value?: string;
+  }>(),
+  {
+    counter: null,
+    dataTest: 'masked-text-field',
+    id: undefined,
+    label: null,
+    minlength: null,
+    maxlength: null,
+    placeholder: undefined,
+    rules: () => [],
+    tokens: null,
+    unmaskRules: true,
+    value: '',
+  }
+);
+
+const emit = defineEmits<{
+  'keyup': [event: KeyboardEvent];
+  'keydown': [event: KeyboardEvent];
+  'keypress': [event: KeyboardEvent];
+  'input': [value: string];
+  'focus': [event: Event];
+  'blur': [event: Event];
+  'change': [value: string];
+  'input:masked': [value: string];
+}>();
 
-    const textField = ref<typeof CTextField | null>(null);
-    const input = computed(() => textField.value?.input);
-    const maskOptions = computed<MaskOptions>(() => {
-      return {
-        mask: props.mask,
-        tokens: {
-          // NOTE (ej): For the EBT Card Number we accept a mask 'N' from the server
-          // to hide all but the last 4 digits. e.g. XXXXXXXXXXXXXXX2114
-          N: { pattern: /[0-9X]/ },
-          ...props.tokens,
-        },
-        onMaska: (detail: MaskaDetail): void => {
-          emit('input', detail.unmasked);
-          emit('input:masked', detail.masked);
-        },
-      };
-    });
+defineSlots<{
+  'label'?: () => VNode[];
+  'prepend-inner'?: () => VNode[];
+  'append'?: () => VNode[];
+  'message'?: () => VNode[];
+}>();
 
-    const { maskedValue, mask: inputMask, unmaskedValue } = useInputMask(input, value, maskOptions);
-    const maskedMinLength = useMaskedMinLength(minlength, value, maskOptions);
-    const maskedMaxLength = useMaskedMaxLength(maxlength, maskOptions);
-    const counterValue = computed<number>(() => unmaskedValue.value.length);
+const { minlength, maxlength, value } = toRefs(props);
 
-    const unmaskedRules = computed<Rules<string>>(() => {
-      return props.rules.map((rule) => {
-        return (value): string | boolean => {
-          const unmaskedValue = inputMask.value?.unmasked(value) ?? value;
-          return rule(unmaskedValue);
-        };
-      });
-    });
+const textField = ref<InstanceType<typeof CTextField> | null>(null);
+const input = computed(() => textField.value?.input ?? null);
+const maskOptions = computed<MaskInputOptions>(() => {
+  return {
+    mask: props.mask,
+    tokens: {
+      // NOTE (ej): For the EBT Card Number we accept a mask 'N' from the server
+      // to hide all but the last 4 digits. e.g. XXXXXXXXXXXXXXX2114
+      N: { pattern: /[0-9X]/ },
+      ...props.tokens,
+    },
+    onMaska: (detail: MaskaDetail): void => {
+      emit('input', detail.unmasked);
+      emit('input:masked', detail.masked);
+    },
+  };
+});
 
-    expose({ input });
+const { maskedValue, mask: inputMask, unmaskedValue } = useInputMask(input, value, maskOptions);
+const maskedMinLength = useMaskedMinLength(minlength, value, maskOptions);
+const maskedMaxLength = useMaskedMaxLength(maxlength, maskOptions);
+const counterValue = computed<number>(() => unmaskedValue.value.length);
 
-    return {
-      counterValue,
-      maskedMinLength,
-      maskedMaxLength,
-      maskedValue,
-      textField,
-      unmaskedRules,
+const unmaskedRules = computed<Rules<string>>(() => {
+  return props.rules.map((rule) => {
+    return (value): string | boolean => {
+      const unmaskedValue = inputMask.value?.unmasked(value) ?? value;
+      return rule(unmaskedValue);
     };
-  },
+  });
 });
+
+defineExpose({ input });
 </script>

package/src/components/CMenu.vue

@@ -5,14 +5,22 @@
 </template>
 
 <script lang="ts">
-import '@shoelace-style/shoelace/dist/components/menu/menu.js';
-import { defineComponent } from 'vue';
 export type { default as SlMenuItem } from '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
+</script>
+
+<script setup lang="ts">
+import type { VNode } from 'vue';
+
+import '@shoelace-style/shoelace/dist/components/menu/menu.js';
+
+defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  select: [item: any];
+}>();
 
-export default defineComponent({
-  name: 'CMenu',
-  emits: ['select'],
-});
+defineSlots<{
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CMenuItem.vue

@@ -27,38 +27,44 @@
   </sl-menu-item>
 </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, defineComponent } from 'vue';
+import type { VNode } from 'vue';
 
 import '@shoelace-style/shoelace/dist/components/menu-item/menu-item.js';
 import CCheckbox from '@propelinc/citrus-ui/src/components/CCheckbox.vue';
 
-export default defineComponent({
-  name: 'CMenuItem',
-  components: { CCheckbox, FontAwesomeIcon },
-  props: {
-    /** Controls whether the item has hover-state styles and responds to click events */
-    selectable: { type: Boolean, default: true },
+const props = withDefaults(
+  defineProps<{
     /** Controls whether to enable and display a checked state */
-    checkable: { type: Boolean },
+    checkable?: boolean;
     /** Reflects the item's checked state */
-    checked: { type: Boolean },
+    checked?: boolean;
     /** Controls what style of checking to apply, either a checkbox, or just a check icon */
-    checkType: { type: String as PropType<'checkbox' | 'icon'>, default: 'checkbox' },
-  },
-  setup(props) {
-    const onClick = (e: Event): void => {
-      if (!props.selectable) {
-        e.preventDefault();
-        e.stopPropagation();
-      }
-    };
+    checkType?: 'checkbox' | 'icon';
+    /** Controls whether the item has hover-state styles and responds to click events */
+    selectable?: boolean;
+  }>(),
+  {
+    checkable: false,
+    checked: false,
+    checkType: 'checkbox',
+    selectable: true,
+  }
+);
 
-    return { faCheck, onClick };
-  },
-});
+defineSlots<{
+  'prepend-inner'?: () => VNode[];
+  'default'?: () => VNode[];
+}>();
+
+const onClick = (e: Event): void => {
+  if (!props.selectable) {
+    e.preventDefault();
+    e.stopPropagation();
+  }
+};
 </script>
 
 <style lang="scss" scoped>

package/src/components/CMenuLabel.vue

@@ -4,13 +4,14 @@
   </sl-menu-label>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
+import type { VNode } from 'vue';
+
 import '@shoelace-style/shoelace/dist/components/menu-label/menu-label.js';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'CMenuLabel',
-});
+defineSlots<{
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CModal.vue

@@ -52,11 +52,11 @@
   </sl-dialog>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type SlDialog from '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
 import '@shoelace-style/shoelace/dist/components/dialog/dialog.js';
-import type { PropType } from 'vue';
-import { computed, defineComponent, ref } from 'vue';
+import type { VNode } from 'vue';
+import { computed, ref } from 'vue';
 
 import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
 import CExpandTransition from '@propelinc/citrus-ui/src/components/CExpandTransition.vue';
@@ -64,77 +64,82 @@ import CLoader from '@propelinc/citrus-ui/src/components/CLoader.vue';
 import { useShoelaceAnimation } from '@propelinc/citrus-ui/src/composables/animation';
 import { useSlotHasContent } from '@propelinc/citrus-ui/src/composables/slots';
 
-export default defineComponent({
-  name: 'CModal',
-  components: { CButtonStack, CLoader, CExpandTransition },
-  props: {
-    /** Controls whether or not the modal is showing */
-    value: { type: Boolean, default: false },
-    /** The title of the modal */
-    title: { type: String as PropType<string | null>, default: null },
-    /** Shows loading state and sets loading message if string */
-    loading: { type: [String, Boolean], default: false },
-    /** Allows modal to be dismissed */
-    dismissible: { type: Boolean, default: true },
+const props = withDefaults(
+  defineProps<{
+    /** Aria label for the modal. This is required if title is hidden */
+    ariaLabel?: string;
     /** Prefix for test selectors */
-    dataTest: { type: String, default: 'modal' },
-    /** Toggles the open/close animation */
-    transition: { type: Boolean, default: true },
+    dataTest?: string;
+    /** Allows modal to be dismissed */
+    dismissible?: boolean;
     /** Controls whether the modal displays fullscreen */
-    fullscreen: { type: Boolean, default: false },
-    /** Aria label for the modal. This is required if title is hidden */
-    ariaLabel: { type: String, default: '' },
-  },
-  emits: ['input'],
-  setup(props) {
-    const onRequestClose = (event: Event): void => {
-      if (!props.dismissible) {
-        event.preventDefault();
-      }
-    };
-
-    const modal = ref<SlDialog | null>(null);
-    const animation = computed<'default' | null>(() => (props.transition ? 'default' : null));
-    useShoelaceAnimation(modal, 'dialog.show', animation);
-    useShoelaceAnimation(modal, 'dialog.hide', animation);
-    useShoelaceAnimation(modal, 'dialog.overlay.show', animation);
-    useShoelaceAnimation(modal, 'dialog.overlay.hide', animation);
-
-    const isVisible = ref(false);
-    // NOTE(mohan): Don't do any expand transitions until the modal is fully
-    // open.
-    const enableExpandTransition = computed(() => !props.fullscreen && isVisible.value);
-
-    const getDataTestAttr = (suffix?: string): string => {
-      return suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
-    };
-
-    const loadingMessage = computed(() => {
-      return typeof props.loading === 'string' ? props.loading : null;
-    });
-
-    const dialogLabel = computed(() => {
-      if (loadingMessage.value) {
-        return loadingMessage.value;
-      }
-
-      return props.title || props.ariaLabel;
-    });
-
-    const footerHasContent = useSlotHasContent('footer');
-
-    return {
-      dialogLabel,
-      loadingMessage,
-      isVisible,
-      enableExpandTransition,
-      footerHasContent,
-      onRequestClose,
-      getDataTestAttr,
-      modal,
-    };
-  },
+    fullscreen?: boolean;
+    /** Shows loading state and sets loading message if string */
+    loading?: string | boolean;
+    /** The title of the modal */
+    title?: string | null;
+    /** Toggles the open/close animation */
+    transition?: boolean;
+    /** Controls whether or not the modal is showing */
+    value?: boolean;
+  }>(),
+  {
+    ariaLabel: '',
+    dataTest: 'modal',
+    dismissible: true,
+    fullscreen: false,
+    loading: false,
+    title: null,
+    transition: true,
+    value: false,
+  }
+);
+
+defineEmits<{
+  input: [value: boolean];
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+  footer?: () => VNode[];
+  loading?: () => VNode[];
+}>();
+
+const onRequestClose = (event: Event): void => {
+  if (!props.dismissible) {
+    event.preventDefault();
+  }
+};
+
+const modal = ref<SlDialog | null>(null);
+const animation = computed<'default' | null>(() => (props.transition ? 'default' : null));
+useShoelaceAnimation(modal, 'dialog.show', animation);
+useShoelaceAnimation(modal, 'dialog.hide', animation);
+useShoelaceAnimation(modal, 'dialog.overlay.show', animation);
+useShoelaceAnimation(modal, 'dialog.overlay.hide', animation);
+
+const isVisible = ref(false);
+// NOTE(mohan): Don't do any expand transitions until the modal is fully
+// open.
+const enableExpandTransition = computed(() => !props.fullscreen && isVisible.value);
+
+const getDataTestAttr = (suffix?: string): string => {
+  return suffix ? `${props.dataTest}-${suffix}` : props.dataTest;
+};
+
+const loadingMessage = computed(() => {
+  return typeof props.loading === 'string' ? props.loading : null;
 });
+
+const dialogLabel = computed(() => {
+  if (loadingMessage.value) {
+    return loadingMessage.value;
+  }
+
+  return props.title || props.ariaLabel;
+});
+
+const footerHasContent = useSlotHasContent('footer');
 </script>
 
 <style lang="scss" scoped>