@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CAppBar.vue

@@ -48,16 +48,12 @@
   </header>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent, provide, ref } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, provide, ref } from 'vue';
 
 import type { HexColor } from '@propelinc/citrus-ui/src/colors/colors';
-import Colors, {
-  isHexColor,
-  isRgbaColor,
-  isValidColor,
-} from '@propelinc/citrus-ui/src/colors/colors';
+import Colors, { isHexColor, isRgbaColor } from '@propelinc/citrus-ui/src/colors/colors';
 import CFadeTransition from '@propelinc/citrus-ui/src/components/CFadeTransition.vue';
 import CLoader from '@propelinc/citrus-ui/src/components/CLoader.vue';
 import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
@@ -66,109 +62,120 @@ import {
   TERTIARY as TERTIARY_ICON_BUTTON,
 } from '@propelinc/citrus-ui/src/services/injections/icon-buttons';
 
-export default defineComponent({
-  components: { CLoader, CFadeTransition },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /**
      * Used to set the background color of the app bar. Needs to accept either a hex code or a
      * a valid color key from the Colors object.
      */
-    backgroundColor: {
-      type: String as PropType<HexColor | keyof typeof Colors>,
-      default: 'default',
-      validator: isValidColor,
-    },
-    color: {
-      type: String as PropType<HexColor | keyof typeof Colors>,
-      default: undefined,
-      validator: isValidColor,
-    },
-    /** If true, the app bar will be fixed to the top of the viewport. */
-    fixed: { type: Boolean, default: false },
+    backgroundColor?: HexColor | keyof typeof Colors;
     /** If true, the app bar will have a bottom border. */
-    border: { type: Boolean, default: false },
-    /** Shows text in the center of the component. Typically used for page names. Overrides the title slot. */
-    title: { type: String, default: '' },
-    /** Shows a loading spinner. Overrides the title slot.  */
-    loading: { type: Boolean, default: false },
+    border?: boolean;
+    /**
+     * Used to set the text color of the app bar. Needs to accept either a hex code or a
+     * a valid color key from the Colors object.
+     * If unset, defaults to either white or black based on the background color's luminance.
+     */
+    color?: HexColor | keyof typeof Colors;
+    /** If true, the app bar will be fixed to the top of the viewport. */
+    fixed?: boolean;
     /** Adds screen reader only text alternative to loading icon, text should be translated */
-    loaderAccessibleText: { type: String, default: '' },
-  },
-  setup(props) {
-    provide(TERTIARY_ICON_BUTTON, ref(true));
-    provide(INHERIT_COLOR_ICON_BUTTON, ref(true));
+    loaderAccessibleText?: string;
+    /** Shows a loading spinner. Overrides the title slot.  */
+    loading?: boolean;
+    /**
+     * Shows text in the center of the component. Typically used for page names.
+     * Overrides the title slot.
+     */
+    title?: string;
+  }>(),
+  {
+    backgroundColor: 'default',
+    border: false,
+    color: undefined,
+    fixed: false,
+    loaderAccessibleText: '',
+    loading: false,
+    title: '',
+  }
+);
+
+defineSlots<{
+  left?: () => VNode[];
+  title?: () => VNode[];
+  right?: () => VNode[];
+}>();
+
+provide(TERTIARY_ICON_BUTTON, ref(true));
+provide(INHERIT_COLOR_ICON_BUTTON, ref(true));
+
+const initialBackgroundColor = computed(() => {
+  if (props.backgroundColor === 'default') {
+    return Colors.WHITE;
+  }
+
+  return props.backgroundColor;
+});
 
-    const initialBackgroundColor = computed(() => {
-      if (props.backgroundColor === 'default') {
-        return Colors.WHITE;
-      }
+const { cssColor: bgCssColor } = useCssColor(initialBackgroundColor);
+
+/**
+ * This text color is computed based on the background color's luminance.
+ * Dark backgrounds get white text, light backgrounds get black text.
+ * Supports both hex and rgba (e.g. gray palette); rgba is composited over white for luminance.
+ *
+ * This is overridden by the `color` prop.
+ */
+const calculatedTextColor = computed(() => {
+  const color = bgCssColor.value;
+  if (!color) {
+    return Colors.BLACK;
+  }
+
+  let r: number;
+  let g: number;
+  let b: number;
+
+  if (isHexColor(color)) {
+    const hex = color.substring(1);
+    const fullHex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
+    r = parseInt(fullHex.substring(0, 2), 16) / 255;
+    g = parseInt(fullHex.substring(2, 4), 16) / 255;
+    b = parseInt(fullHex.substring(4, 6), 16) / 255;
+  } else if (isRgbaColor(color)) {
+    const match = color.match(
+      /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([\d.]+)\s*\)$/i
+    );
+    if (!match) {
+      return Colors.BLACK;
+    }
+    const ra = Number(match[1]) / 255;
+    const ga = Number(match[2]) / 255;
+    const ba = Number(match[3]) / 255;
+    const a = Number(match[4]);
+    // Composite over white to get effective RGB for luminance
+    r = ra * a + (1 - a);
+    g = ga * a + (1 - a);
+    b = ba * a + (1 - a);
+  } else {
+    return Colors.BLACK;
+  }
+
+  // Calculate relative luminance using sRGB coefficients
+  const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+
+  // Use white text if background is dark enough (luminance < 0.5)
+  return luminance < 0.5 ? Colors.WHITE : Colors.BLACK;
+});
 
-      return props.backgroundColor;
-    });
+const { cssColor: userTextCssColor } = useCssColor(() => props.color);
 
-    const { cssColor: bgCssColor } = useCssColor(initialBackgroundColor);
+const textCssColor = computed(() => {
+  if (userTextCssColor.value) {
+    return userTextCssColor.value;
+  }
 
-    /**
-     * This text color is computed based on the background color's luminance.
-     * Dark backgrounds get white text, light backgrounds get black text.
-     * Supports both hex and rgba (e.g. gray palette); rgba is composited over white for luminance.
-     *
-     * This is overridden by the `color` prop.
-     */
-    const calculatedTextColor = computed(() => {
-      const color = bgCssColor.value;
-      if (!color) {
-        return Colors.BLACK;
-      }
-
-      let r: number;
-      let g: number;
-      let b: number;
-
-      if (isHexColor(color)) {
-        const hex = color.substring(1);
-        const fullHex = hex.length === 3 ? hex.replace(/(.)/g, '$1$1') : hex;
-        r = parseInt(fullHex.substring(0, 2), 16) / 255;
-        g = parseInt(fullHex.substring(2, 4), 16) / 255;
-        b = parseInt(fullHex.substring(4, 6), 16) / 255;
-      } else if (isRgbaColor(color)) {
-        const match = color.match(
-          /^rgba\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*([\d.]+)\s*\)$/i
-        );
-        if (!match) {
-          return Colors.BLACK;
-        }
-        const ra = Number(match[1]) / 255;
-        const ga = Number(match[2]) / 255;
-        const ba = Number(match[3]) / 255;
-        const a = Number(match[4]);
-        // Composite over white to get effective RGB for luminance
-        r = ra * a + (1 - a);
-        g = ga * a + (1 - a);
-        b = ba * a + (1 - a);
-      } else {
-        return Colors.BLACK;
-      }
-
-      // Calculate relative luminance using sRGB coefficients
-      const luminance = 0.2126 * r + 0.7152 * g + 0.0722 * b;
-
-      // Use white text if background is dark enough (luminance < 0.5)
-      return luminance < 0.5 ? Colors.WHITE : Colors.BLACK;
-    });
-
-    const { cssColor: userTextCssColor } = useCssColor(() => props.color);
-
-    const textCssColor = computed(() => {
-      if (userTextCssColor.value) {
-        return userTextCssColor.value;
-      }
-
-      return calculatedTextColor.value;
-    });
-
-    return { bgCssColor, textCssColor };
-  },
+  return calculatedTextColor.value;
 });
 </script>
 

package/src/components/CBadge.vue

@@ -12,42 +12,50 @@
   </span>
 </template>
 
-<script lang="ts">
-import { computed, defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed } from 'vue';
 
 import { useCssColor } from '@propelinc/citrus-ui/src/composables/colors';
 
-export default defineComponent({
-  props: {
-    /** Sets the text of the badge, can also use default slot */
-    text: { type: String, default: undefined },
+const props = withDefaults(
+  defineProps<{
     /** Adds a unique data-test attribute for testing to the container */
-    dataTest: { type: String, default: 'badge' },
+    dataTest?: string;
     /** Sets the background color */
-    color: { type: String, default: 'purple-200' },
+    color?: string;
+    /** Sets the text of the badge, can also use default slot */
+    text?: string;
     /** Sets the text color */
-    textColor: { type: String, default: 'text-primary' },
-  },
-  setup(props) {
-    const { cssColor: backgroundCssColor } = useCssColor(() => props.color);
-    const { cssColor: textCssColor } = useCssColor(() => props.textColor);
+    textColor?: string;
+  }>(),
+  {
+    color: 'purple-200',
+    dataTest: 'badge',
+    text: undefined,
+    textColor: 'text-primary',
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
 
-    const computedStyle = computed(() => {
-      const style: Record<string, string> = {};
+const { cssColor: backgroundCssColor } = useCssColor(() => props.color);
+const { cssColor: textCssColor } = useCssColor(() => props.textColor);
 
-      if (backgroundCssColor.value) {
-        style['--c-badge-background-color'] = backgroundCssColor.value;
-      }
+const computedStyle = computed(() => {
+  const style: Record<string, string> = {};
 
-      if (textCssColor.value) {
-        style['--c-badge-text-color'] = textCssColor.value;
-      }
+  if (backgroundCssColor.value) {
+    style['--c-badge-background-color'] = backgroundCssColor.value;
+  }
 
-      return style;
-    });
+  if (textCssColor.value) {
+    style['--c-badge-text-color'] = textCssColor.value;
+  }
 
-    return { computedStyle };
-  },
+  return style;
 });
 </script>