@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CStatusDot.vue

@@ -12,27 +12,27 @@
   </div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
 
 import { useA11yLabelCheck } from '@propelinc/citrus-ui/src/composables/accessibility';
 
-export default defineComponent({
-  props: {
-    count: { type: Number as PropType<number | null>, default: null },
-    bordered: { type: Boolean, default: false },
-  },
-  setup(props) {
-    useA11yLabelCheck('CStatusDot');
+const props = withDefaults(
+  defineProps<{
+    count?: number | null;
+    bordered?: boolean;
+  }>(),
+  {
+    count: null,
+    bordered: false,
+  }
+);
 
-    const hasCount = computed(() => props.count !== null);
-    const displayCount = computed(() => {
-      return props.count && props.count > 9 ? '9+' : props.count;
-    });
+useA11yLabelCheck('CStatusDot');
 
-    return { displayCount, hasCount };
-  },
+const hasCount = computed(() => props.count !== null);
+const displayCount = computed(() => {
+  return props.count && props.count > 9 ? '9+' : props.count;
 });
 </script>
 

package/src/components/CSwitch.vue

@@ -18,34 +18,43 @@
   </sl-switch>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import '@shoelace-style/shoelace/dist/components/switch/switch.js';
-import { defineComponent, toRefs } from 'vue';
+import type { VNode } from 'vue';
+import { toRefs } from 'vue';
 
 import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
 
-export default defineComponent({
-  props: {
+const props = withDefaults(
+  defineProps<{
+    /** Label for screen-readers. This hides and overrides the normal label. */
+    ariaLabel?: string;
+    /** Prevents the user from interacting with the switch */
+    disabled?: boolean;
     /** When true, the slot label is visually rendered before the control (label left, switch right) */
-    labelFirst: { type: Boolean, default: false },
+    labelFirst?: boolean;
     /** Whether the switch is in an "on" or "off" state */
-    value: { type: Boolean, default: false },
-    /** Prevents the user from interacting with the switch */
-    disabled: { type: Boolean, default: false },
-    /** Label for screen-readers. This hides and overrides the normal label. */
-    ariaLabel: { type: String, default: '' },
-  },
-  emits: ['input'],
-  setup(props, { emit }) {
-    const { value } = toRefs(props);
-    const internalValue = useInternalValue(value, {
-      onChange: (newValue) => emit('input', newValue),
-    });
-
-    return {
-      internalValue,
-    };
-  },
+    value?: boolean;
+  }>(),
+  {
+    ariaLabel: '',
+    disabled: false,
+    labelFirst: false,
+    value: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'input', value: boolean): void;
+}>();
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+const { value } = toRefs(props);
+const internalValue = useInternalValue(value, {
+  onChange: (newValue) => emit('input', newValue),
 });
 </script>
 

package/src/components/CSwitchListItem.vue

@@ -32,50 +32,49 @@
   </CListItem>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 
 import CListItem from '@propelinc/citrus-ui/src/components/CListItem.vue';
 import CListItemContent from '@propelinc/citrus-ui/src/components/CListItemContent.vue';
 import CListItemIcon from '@propelinc/citrus-ui/src/components/CListItemIcon.vue';
 import CSwitch from '@propelinc/citrus-ui/src/components/CSwitch.vue';
-import type { FaPropType } from '@propelinc/citrus-ui/src/types/font-awesome';
 
 import { useSlotHasContent } from '../composables/slots';
 
-export default defineComponent({
-  name: 'CSwitchListItem',
-  components: {
-    CSwitch,
-    CListItem,
-    CListItemContent,
-    CListItemIcon,
-  },
-  props: {
+withDefaults(
+  defineProps<{
     /** Alignment of the content */
-    align: { type: String as PropType<'top' | 'center'>, default: 'center' },
+    align?: 'top' | 'center';
     /** Prevents the user from interacting with the switch */
-    disabled: { type: Boolean, default: false },
+    disabled?: boolean;
     /** Font Awesome icon to render on the left side of the component */
-    icon: { type: [String, Array, Object] as FaPropType, default: null },
+    icon?: string | string[] | IconDefinition | null;
     /** Color of the icon background */
-    iconColor: { type: String, default: 'gray-100' },
+    iconColor?: string;
     /** Plain body copy. Overridden by the default slot. */
-    label: { type: String, default: undefined },
+    label?: string;
     /** Emphasized text above body text. Overridden by the default slot. */
-    title: { type: String, default: undefined },
+    title?: string;
     /** Whether the switch is in an "on" or "off" state */
-    value: { type: Boolean, default: false },
-  },
-  emits: ['input'],
-  setup() {
-    const iconSlotHasContent = useSlotHasContent('icon');
+    value?: boolean;
+  }>(),
+  {
+    align: 'center',
+    disabled: false,
+    icon: null,
+    iconColor: 'gray-100',
+    label: undefined,
+    title: undefined,
+    value: false,
+  }
+);
+
+defineEmits<{
+  (e: 'input', value: boolean): void;
+}>();
 
-    return {
-      iconSlotHasContent,
-    };
-  },
-});
+const iconSlotHasContent = useSlotHasContent('icon');
 </script>
 
 <style lang="scss" scoped>

package/src/components/CTextArea.vue

@@ -3,7 +3,7 @@
     class="d-flex flex-column gap-1"
     :class="{
       'c-text-area--disabled': disabled,
-      'c-text-area--invalid': !isValidationValid,
+      'c-text-area--invalid': isInvalid,
       'c-text-area--hide-label': hideLabel,
     }"
     :data-test="dataTest"
@@ -21,7 +21,7 @@
       rows="4"
       :aria-label="label || undefined"
       :aria-describedby="`${idWithFallback}-message ${idWithFallback}-validation-message`"
-      :aria-invalid="isValidationValid ? 'false' : 'true'"
+      :aria-invalid="isInvalid ? 'true' : 'false'"
       :data-test="`${dataTest}-textarea`"
       :disabled="disabled"
       :placeholder="placeholder"
@@ -37,7 +37,7 @@
 
     <CValidationMessage
       :data-test="`${dataTest}-validation-message`"
-      :validation-message="validationMessage"
+      :validation-message="errorMessage || validationMessage"
       :hide="hideDetails"
     >
       <template #append>
@@ -62,9 +62,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { defineComponent, ref, toRefs } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, ref, toRefs } from 'vue';
 
 import CFormFieldCounter from '@propelinc/citrus-ui/src/components/CFormFieldCounter.vue';
 import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
@@ -74,86 +74,110 @@ 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 default defineComponent({
-  name: 'CTextArea',
-  components: { CValidationMessage, CFormFieldCounter },
-  props: {
-    /** The textarea's label, both visual and screenreader-only */
-    label: { type: String as PropType<string | null>, default: null },
-    /** The textarea's placeholder */
-    placeholder: { type: String, default: '' },
-    /** The textarea element's id */
-    id: { type: String as PropType<string | null>, default: null },
+const props = withDefaults(
+  defineProps<{
+    /** Shows a character counter and sets its denominator. */
+    counter?: number | null;
+    /**
+     * Function or number that determines the numerator of the counter. If not
+     * set, the counter will be the length of the input value.
+     */
+    counterValue?: number | (() => number | null) | null;
+    /** Adds a custom data test string to the form field and textarea elements */
+    dataTest?: string;
     /** Controls whether the input is disabled */
-    disabled: { type: Boolean, default: false },
-    /** The textarea's value */
-    value: { type: String, default: '' },
+    disabled?: boolean;
+    /**
+     * Overrides the default validation message. If provided, this error message will always
+     * be shown, regardless of any other failing validation rules.
+     */
+    errorMessage?: string | null;
     /** Hides the label and instead labels the field with `aria-label` */
-    hideLabel: { type: Boolean, default: false },
-    /** Hides the validation message area. Defaults to `false` (show message area even when valid), so validations transition in gracefully. */
-    hideDetails: { type: [Boolean, String] as PropType<boolean | 'auto'>, default: false },
-    /** Adds a custom data test string to the form field and textarea elements */
-    dataTest: { type: String, default: 'text-area' },
-    /** Shows a character counter and sets its denominator. */
-    counter: { type: Number as PropType<number | null>, default: null },
-    /** Function or number that determines the numerator of the counter. If not
-     * set, the counter will be the length of the input value. */
-    counterValue: {
-      type: [Number, Function] as PropType<number | (() => number | null)>,
-      default: null,
-    },
-    maxlength: { type: Number, default: undefined },
-    /** Accepts a mixed array of types function, boolean and string.
+    hideLabel?: boolean;
+    /**
+     * Hides the validation message area. Defaults to `false` (show message area even when valid),
+     * so validations transition in gracefully.
+     */
+    hideDetails?: boolean | 'auto';
+    /** The textarea element's id */
+    id?: string | null;
+    /** The textarea's label, both visual and screenreader-only */
+    label?: string | null;
+    /** Sets the maxlength attribute of the textarea */
+    maxlength?: number;
+    /** The textarea's placeholder */
+    placeholder?: string;
+    /** If true, the field is required */
+    required?: boolean;
+    /**
+     * Accepts a mixed array of types function, boolean and string.
      * Functions pass an input value as an argument and must return either true / false or
      * a string containing an error message. The input field will enter an error state if a
-     *  function returns (or any value in the array contains) false or is a string */
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    /** If true, the field is required */
-    required: { type: Boolean, default: false },
-  },
-  emits: ['input', 'change', 'blur', 'focus'],
-  setup(props, { emit }) {
-    const { value, rules, required, id } = toRefs(props);
-    const idWithFallback = useId(id);
-
-    const internalValue = useInternalValue(value, {
-      onChange: (value) => emit('input', value),
-    });
-
-    const messageSlotHasContent = useSlotHasContent('message');
-
-    const textarea = ref<HTMLTextAreaElement | null>(null);
-
-    const {
-      message: validationMessage,
-      valid: isValidationValid,
-      listeners: validationListeners,
-    } = useValidations({
-      id: idWithFallback,
-      value: internalValue,
-      rules,
-      required,
-      field: textarea,
-    });
-
-    const onInput = (event: Event): void => {
-      const target = event.target as HTMLTextAreaElement;
-      internalValue.value = target.value;
-    };
-
-    return {
-      textarea,
-      idWithFallback,
-      internalValue,
-      validationMessage,
-      isValidationValid,
-      validationListeners,
-      messageSlotHasContent,
-
-      onInput,
-    };
-  },
+     * function returns (or any value in the array contains) false or is a string
+     */
+    rules?: Rules<string>;
+    /** The textarea's value */
+    value?: string;
+  }>(),
+  {
+    counter: null,
+    counterValue: null,
+    dataTest: 'text-area',
+    disabled: false,
+    errorMessage: null,
+    hideDetails: false,
+    hideLabel: false,
+    id: null,
+    label: null,
+    maxlength: undefined,
+    placeholder: '',
+    required: false,
+    rules: () => [],
+    value: '',
+  }
+);
+
+const emit = defineEmits<{
+  input: [value: string];
+  change: [value: string];
+  blur: [];
+  focus: [];
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+  message?: () => VNode[];
+}>();
+
+const { value, rules, required, id } = toRefs(props);
+const idWithFallback = useId(id);
+
+const internalValue = useInternalValue(value, {
+  onChange: (value) => emit('input', value),
+});
+
+const messageSlotHasContent = useSlotHasContent('message');
+
+const textarea = ref<HTMLTextAreaElement | null>(null);
+
+const {
+  message: validationMessage,
+  valid: isValidationValid,
+  listeners: validationListeners,
+} = useValidations({
+  id: idWithFallback,
+  value: internalValue,
+  rules,
+  required,
+  field: textarea,
 });
+
+const isInvalid = computed(() => !isValidationValid.value || !!props.errorMessage);
+
+const onInput = (event: Event): void => {
+  const target = event.target as HTMLTextAreaElement;
+  internalValue.value = target.value;
+};
 </script>
 
 <style lang="scss" scoped>
@@ -168,6 +192,10 @@ export default defineComponent({
   margin-bottom: 4px;
   transition: color $citrus-field-transition-duration ease;
 
+  .c-text-area--invalid & {
+    color: $color-status-error;
+  }
+
   .c-text-area--disabled & {
     color: $color-text-disabled;
   }
@@ -186,12 +214,17 @@ export default defineComponent({
   transition: border-color $citrus-field-transition-duration ease;
 
   &:focus,
-  &:focus-within,
-  .c-text-area--invalid & {
+  &:focus-within {
     border-color: $color-black;
     outline: none;
   }
 
+  .c-text-area--invalid & {
+    border-color: $color-status-error;
+    color: $color-status-error;
+    outline: none;
+  }
+
   &:disabled {
     background-color: $color-gray-100;
     color: $color-text-disabled;