@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CProgressRing.vue

@@ -25,53 +25,53 @@
   </span>
 </template>
 
-<script lang="ts">
-import { type PropType, computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import { computed } from 'vue';
+import type { VNode } from 'vue';
 
 import type Colors from '@propelinc/citrus-ui/src/colors/colors';
-import { type HexColor, isValidColor } from '@propelinc/citrus-ui/src/colors/colors';
+import type { HexColor } from '@propelinc/citrus-ui/src/colors/colors';
 import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
 
-export default defineComponent({
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Customizes screen reader only text alternative, should be translated */
-    accessibleText: { type: String, default: undefined },
+    accessibleText?: string;
     /** Selector for testing */
-    dataTest: { type: String, default: 'c-progress-ring' },
+    dataTest?: string;
     /** The current progress, from 0 to valueMax */
-    value: { type: [Number, String], default: 0 },
+    value?: number | string;
     /** Total progress */
-    valueMax: { type: [Number, String], default: 100 },
+    valueMax?: number | string;
     /** The outer diameter of the progress ring, in px */
-    size: { type: [Number, String], default: 44 },
+    size?: number | string;
     /** The width of the progress ring, in px */
-    trackWidth: { type: [Number, String], default: 4 },
+    trackWidth?: number | string;
     /** Sets the indicator color */
-    color: {
-      type: String as PropType<HexColor | keyof typeof Colors>,
-      default: 'blue-500',
-      validator: isValidColor,
-    },
+    color?: HexColor | keyof typeof Colors;
     /** Sets the track color underneath the indicator */
-    trackColor: {
-      type: String as PropType<HexColor | keyof typeof Colors>,
-      default: 'gray-200',
-      validator: isValidColor,
-    },
-  },
-  setup(props) {
-    const { cssColor } = useCssColor(() => props.color);
-    const { cssColor: trackCssColor } = useCssColor(() => props.trackColor);
+    trackColor?: HexColor | keyof typeof Colors;
+  }>(),
+  {
+    accessibleText: undefined,
+    dataTest: 'c-progress-ring',
+    value: 0,
+    valueMax: 100,
+    size: 44,
+    trackWidth: 4,
+    color: 'blue-500',
+    trackColor: 'gray-200',
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
 
-    const percentage = computed(() => (100 * Number(props.value)) / Number(props.valueMax));
+const { cssColor } = useCssColor(() => props.color);
+const { cssColor: trackCssColor } = useCssColor(() => props.trackColor);
 
-    return {
-      percentage,
-      cssColor,
-      trackCssColor,
-    };
-  },
-});
+const percentage = computed(() => (100 * Number(props.value)) / Number(props.valueMax));
 </script>
 
 <style lang="scss" scoped>

package/src/components/CRadio.vue

@@ -27,68 +27,68 @@
   </label>
 </template>
 
-<script lang="ts">
-import {
-  type PropType,
-  defineComponent,
-  inject,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  toRefs,
-} from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { inject, onBeforeUnmount, onMounted, ref, toRefs } from 'vue';
 
 import { useId } from '@propelinc/citrus-ui/src/composables/id';
-import { RADIO_STATE } from '@propelinc/citrus-ui/src/services/injections/radio';
 import type { RadioState } from '@propelinc/citrus-ui/src/services/injections/radio';
+import { RADIO_STATE } from '@propelinc/citrus-ui/src/services/injections/radio';
 
-export default defineComponent({
-  name: 'CRadio',
-  props: {
+const props = withDefaults(
+  defineProps<{
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: { type: null as unknown as PropType<any>, required: true },
-    id: { type: String as PropType<string | null>, default: null },
-    label: { type: String as PropType<string | null>, default: null },
-    dataTest: { type: String, default: 'radio-group-option' },
-    hideRadio: { type: Boolean, default: false },
-  },
-  emits: ['change', 'blur', 'focus'],
-  setup(props, { emit }) {
-    const { id } = toRefs(props);
-    const idWithFallback = useId(id);
-
-    const parentState = inject(
-      RADIO_STATE,
-      ref<RadioState>({
-        value: null,
-        name: idWithFallback.value,
-        invalid: false,
-        update: () => {},
-        register: () => {},
-        unregister: () => {},
-      })
-    );
-
-    const onChange = (event: Event): void => {
-      const target = event.target as HTMLInputElement;
-      parentState.value.update(target.checked ? props.value : null);
-      emit('change', event);
-    };
-
-    onMounted((): void => {
-      parentState.value.register(props.value);
-    });
-
-    onBeforeUnmount((): void => {
-      parentState.value.unregister(props.value);
-    });
-
-    return {
-      idWithFallback,
-      parentState,
-      onChange,
-    };
-  },
+    value: any;
+    id?: string | null;
+    label?: string | null;
+    dataTest?: string;
+    hideRadio?: boolean;
+  }>(),
+  {
+    id: null,
+    label: null,
+    dataTest: 'radio-group-option',
+    hideRadio: false,
+  }
+);
+
+const emit = defineEmits<{
+  (e: 'change', event: Event): void;
+  (e: 'blur'): void;
+  (e: 'focus'): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+}>();
+
+const { id } = toRefs(props);
+const idWithFallback = useId(id);
+
+const parentState = inject(
+  RADIO_STATE,
+  ref<RadioState>({
+    value: null,
+    name: idWithFallback.value,
+    invalid: false,
+    update: () => {},
+    register: () => {},
+    unregister: () => {},
+  })
+);
+
+const onChange = (event: Event): void => {
+  const target = event.target as HTMLInputElement;
+  parentState.value.update(target.checked ? props.value : null);
+  emit('change', event);
+};
+
+onMounted((): void => {
+  parentState.value.register(props.value);
+});
+
+onBeforeUnmount((): void => {
+  parentState.value.unregister(props.value);
 });
 </script>
 

package/src/components/CRadioGroup.vue

@@ -31,8 +31,9 @@
   </fieldset>
 </template>
 
-<script lang="ts">
-import { type PropType, computed, defineComponent, provide, ref, toRefs, watch } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, provide, ref, toRefs, watch } from 'vue';
 
 import CValidationMessage from '@propelinc/citrus-ui/src/components/CValidationMessage.vue';
 import { useInternalValue } from '@propelinc/citrus-ui/src/composables/binding';
@@ -41,79 +42,91 @@ import type { Rules } from '@propelinc/citrus-ui/src/composables/validations';
 import { useValidations } from '@propelinc/citrus-ui/src/composables/validations';
 import { RADIO_STATE } from '@propelinc/citrus-ui/src/services/injections/radio';
 
-export default defineComponent({
-  name: 'CRadioGroup',
-  components: { CValidationMessage },
-  props: {
+const props = withDefaults(
+  defineProps<{
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    value: { type: null as unknown as PropType<any>, default: null },
-    id: { type: String as PropType<string | null>, default: null },
-    dataTest: { type: String, default: 'radio-group' },
-    label: { type: String as PropType<string | null>, default: null },
-    column: { type: Boolean, default: true },
-    mandatory: { type: Boolean, default: false },
-    rules: { type: Array as PropType<Rules<string>>, default: () => [] },
-    hideDetails: { type: Boolean as PropType<boolean | 'auto'>, default: false },
-  },
-  emits: ['change', 'input'],
-  setup(props, { emit }) {
-    const { value, rules, id, mandatory } = toRefs(props);
-    const idWithFallback = useId(id);
-    const radioGroup = ref<HTMLElement | null>(null);
-
-    const internalValue = useInternalValue(value, {
-      onChange: (newValue) => {
-        emit('change', newValue);
-        emit('input', newValue);
-      },
-    });
-
-    const {
-      startValidating,
-      message: validationMessage,
-      valid: isValidationValid,
-    } = useValidations({
-      id: idWithFallback,
-      value: internalValue,
-      rules,
-      required: mandatory,
-      validateOn: 'change',
-    });
-
-    provide(
-      RADIO_STATE,
-      computed(() => ({
-        invalid: !isValidationValid.value,
-        value: internalValue.value,
-        name: idWithFallback.value,
-        update: (newValue: unknown): void => {
-          internalValue.value = newValue;
-        },
-        register: (value: unknown): void => {
-          if (props.mandatory && internalValue.value === null) {
-            internalValue.value = value;
-          }
-        },
-        unregister: (value: unknown): void => {
-          if (internalValue.value === value) {
-            internalValue.value = null;
-          }
-        },
-      }))
-    );
-
-    watch(internalValue, () => {
-      startValidating();
-    });
-
-    return {
-      idWithFallback,
-      isValidationValid,
-      radioGroup,
-      validationMessage,
-    };
+    value?: any;
+    id?: string | null;
+    dataTest?: string;
+    label?: string | null;
+    column?: boolean;
+    mandatory?: boolean;
+    rules?: Rules<string>;
+    hideDetails?: boolean | 'auto';
+  }>(),
+  {
+    value: null,
+    id: null,
+    dataTest: 'radio-group',
+    label: null,
+    column: true,
+    mandatory: false,
+    rules: () => [],
+    hideDetails: false,
+  }
+);
+
+const emit = defineEmits<{
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'change', value: any): void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  (e: 'input', value: any): void;
+}>();
+
+defineSlots<{
+  label?: () => VNode[];
+  default?: () => VNode[];
+  message?: () => VNode[];
+}>();
+
+const { value, rules, id, mandatory } = toRefs(props);
+const idWithFallback = useId(id);
+const radioGroup = ref<HTMLElement | null>(null);
+
+const internalValue = useInternalValue(value, {
+  onChange: (newValue) => {
+    emit('change', newValue);
+    emit('input', newValue);
   },
 });
+
+const {
+  startValidating,
+  message: validationMessage,
+  valid: isValidationValid,
+} = useValidations({
+  id: idWithFallback,
+  value: internalValue,
+  rules,
+  required: mandatory,
+  validateOn: 'change',
+});
+
+provide(
+  RADIO_STATE,
+  computed(() => ({
+    invalid: !isValidationValid.value,
+    value: internalValue.value,
+    name: idWithFallback.value,
+    update: (newValue: unknown): void => {
+      internalValue.value = newValue;
+    },
+    register: (value: unknown): void => {
+      if (props.mandatory && internalValue.value === null) {
+        internalValue.value = value;
+      }
+    },
+    unregister: (value: unknown): void => {
+      if (internalValue.value === value) {
+        internalValue.value = null;
+      }
+    },
+  }))
+);
+
+watch(internalValue, () => {
+  startValidating();
+});
 </script>
 
 <style lang="scss" scoped>

package/src/components/CRow.vue

@@ -13,35 +13,37 @@
   </div>
 </template>
 
-<script lang="ts">
-import { type PropType, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
-export default defineComponent({
-  props: {
+withDefaults(
+  defineProps<{
     /** Applies the align-items css property.
      * Available options are: start, center, end and stretch. */
-    align: {
-      type: String as PropType<'center' | 'start' | 'end' | 'stretch'>,
-      default: null,
-    },
+    align?: 'center' | 'start' | 'end' | 'stretch' | null;
     /** Applies the align-content css property.
      * Available options are: start, center, end, and stretch. */
-    alignContent: {
-      type: String as PropType<'center' | 'start' | 'end' | 'stretch'>,
-      default: null,
-    },
+    alignContent?: 'center' | 'start' | 'end' | 'stretch' | null;
     /**  Reduces the gutter between c-cols. */
-    dense: { type: Boolean, default: false },
+    dense?: boolean;
     /** Removes the gutter between c-cols. */
-    noGutters: { type: Boolean, default: false },
+    noGutters?: boolean;
     /** Applies the justify-content css property.
      * Available options are: start, center, end, space-between and space-around. */
-    justify: {
-      type: String as PropType<'center' | 'start' | 'end' | 'space-between' | 'space-around'>,
-      default: null,
-    },
-  },
-});
+    justify?: 'center' | 'start' | 'end' | 'space-between' | 'space-around' | null;
+  }>(),
+  {
+    align: null,
+    alignContent: null,
+    dense: false,
+    noGutters: false,
+    justify: null,
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CSectionHeader.vue

@@ -7,22 +7,30 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent, provide, ref } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { provide, ref } from 'vue';
 
 import { TERTIARY as TERTIARY_ICON_BUTTON } from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
 
-export default defineComponent({
-  props: {
-    /** The title text to display. */
-    title: { type: String, default: '' },
+withDefaults(
+  defineProps<{
     /** The tag used for the title text. */
-    tag: { type: String, default: 'h2' },
-  },
-  setup(): void {
-    provide(TERTIARY_ICON_BUTTON, ref(true));
-  },
-});
+    tag?: string;
+    /** The title text to display. */
+    title?: string;
+  }>(),
+  {
+    tag: 'h2',
+    title: '',
+  }
+);
+
+defineSlots<{
+  append?: () => VNode[];
+}>();
+
+provide(TERTIARY_ICON_BUTTON, ref(true));
 </script>
 
 <style lang="scss" scoped>