@propelinc/citrus-ui 1.0.4 → 1.3.0

package/src/components/CButton/CButton.vue

@@ -39,12 +39,12 @@
   </sl-button>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import type { IconDefinition } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 import '@shoelace-style/shoelace/dist/components/button/button.js';
-import type { PropType } from 'vue';
-import { computed, defineComponent, inject, ref, toRefs } from 'vue';
+import type { VNode } from 'vue';
+import { computed, inject, ref } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import type {
@@ -64,190 +64,178 @@ import { BLOCK, BOUNCE_AMOUNT, LARGE } from '@propelinc/citrus-ui/src/services/i
  * This mapping is used to translate the variant names to the correct Shoelace variant names
  * and apply it to the underlying Shoelace button component.
  */
-export const VARIANT_TO_SHOELACE_VARIANT: Record<ButtonVariant, ButtonShoelaceVariant> = {
+const VARIANT_TO_SHOELACE_VARIANT: Record<ButtonVariant, ButtonShoelaceVariant> = {
   primary: 'primary',
   // Shoelace `default` is an outline style
   secondary: 'default',
   tertiary: 'text',
 };
 
-const BLOCK_BOUNCE_AMOUNT = 0.96;
-const BASE_BOUNCE_AMOUNT = 0.94;
-
-export default defineComponent({
-  components: {
-    FontAwesomeIcon,
-  },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Controls whether button appears as full-width */
-    block: { type: Boolean, default: false },
+    block?: boolean;
     /** Controls whether button is disabled */
-    disabled: { type: Boolean, default: false },
+    disabled?: boolean;
     /** Designates the button as an anchor and applies the href attribute */
-    href: { type: String, default: undefined },
-    /** Chooses an icon to render on the left side of the button */
-    icon: {
-      type: [String, Array, Object] as PropType<string | string[] | IconDefinition>,
-      default: undefined,
-    },
+    href?: string;
+    /** Chooses an icon to render next to the button text */
+    icon?: string | string[] | IconDefinition;
     /** Chooses whether to place the icon before or after the button text */
-    iconPosition: {
-      type: String as PropType<ButtonIconPosition>,
-      default: 'prefix',
-      validator: (value: string) => ['prefix', 'suffix'].includes(value),
-    },
+    iconPosition?: ButtonIconPosition;
     /**
      * @deprecated use `size` prop instead
      * Controls whether button uses the large variant
      */
-    large: { type: Boolean, default: false, deprecated: true },
+    large?: boolean;
     /** Controls the level of the button */
-    level: {
-      type: String as PropType<ButtonLevel>,
-      default: 'normal',
-      validator: (value: string) => ['normal', 'danger'].includes(value),
-    },
+    level?: ButtonLevel;
     /** Controls whether button is loading */
-    loading: { type: Boolean, default: false },
+    loading?: boolean;
     /**
      * @deprecated use `variant` prop instead
-     * Controls whether button uses the secondary variant */
-    secondary: { type: Boolean, default: false, deprecated: true },
+     * Controls whether button uses the secondary variant
+     */
+    secondary?: boolean;
     /**
      * Controls the size of the button
      * @default 'medium'
      */
-    size: {
-      type: String as PropType<ButtonSize>,
-      default: 'medium',
-      validator: (value: string) => ['medium', 'large'].includes(value),
-    },
+    size?: ButtonSize;
     /** Designates the target attribute. Only use with the href prop. */
-    target: { type: String, default: undefined },
+    target?: string;
     /**
      * @deprecated use `variant` prop instead
      * Controls whether button uses the tertiary variant
      */
-    tertiary: { type: Boolean, default: false, deprecated: true },
+    tertiary?: boolean;
     /** Controls whether button functions as a router-link */
-    to: { type: [Object, String] as PropType<RouteLocationRaw>, default: undefined },
+    to?: RouteLocationRaw;
     /**
      * Controls the styling of the button
      * @default 'primary'
      */
-    variant: {
-      type: String as PropType<ButtonVariant>,
-      default: 'primary',
-      validator: (value: string) => ['primary', 'secondary', 'tertiary'].includes(value),
-    },
-  },
-  emits: ['click', 'focus', 'blur'],
-  setup(props, { emit }) {
-    const { block, to } = toRefs(props);
-    const { href: routerDestination, navigate } = useRouterLink(to);
-    const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
+    variant?: ButtonVariant;
+  }>(),
+  {
+    block: false,
+    disabled: false,
+    href: undefined,
+    icon: undefined,
+    iconPosition: 'prefix',
+    large: false,
+    level: 'normal',
+    loading: false,
+    secondary: false,
+    size: 'medium',
+    target: undefined,
+    tertiary: false,
+    to: undefined,
+    variant: 'primary',
+  }
+);
 
-    const dataLoading = computed<true | undefined>(() => props.loading || undefined);
+const emit = defineEmits<{
+  click: [event: MouseEvent];
+  focus: [event: Event];
+  blur: [event: Event];
+}>();
 
-    const injectedBlock = inject(BLOCK, undefined);
-    const injectedOrPropBlock = computed(() => injectedBlock?.value ?? props.block);
-    const dataBlock = computed<true | undefined>(() => injectedOrPropBlock.value || undefined);
+defineSlots<{
+  icon?: () => VNode[];
+  default?: () => VNode[];
+}>();
 
-    const iconSlotHasContent = useSlotHasContent('icon');
-    const hasIcon = computed(() => iconSlotHasContent.value || !!props.icon);
+const BLOCK_BOUNCE_AMOUNT = 0.96;
+const BASE_BOUNCE_AMOUNT = 0.94;
 
-    /**
-     * Handle the deprecated `secondary` and `tertiary` props.
-     */
-    const computedVariant = computed((): ButtonVariant => {
-      if (props.secondary) {
-        return 'secondary';
-      }
+const { href: routerDestination, navigate } = useRouterLink(() => props.to);
+const routerDestinationOrHref = computed(() => routerDestination.value ?? props.href);
 
-      if (props.tertiary) {
-        return 'tertiary';
-      }
+const dataLoading = computed<true | undefined>(() => props.loading || undefined);
 
-      return props.variant;
-    });
+const injectedBlock = inject(BLOCK, undefined);
+const injectedOrPropBlock = computed(() => injectedBlock?.value ?? props.block);
+const dataBlock = computed<true | undefined>(() => injectedOrPropBlock.value || undefined);
 
-    /**
-     * Map the computed variant to the Shoelace variant
-     */
-    const shoelaceVariant = computed(() => VARIANT_TO_SHOELACE_VARIANT[computedVariant.value]);
+const iconSlotHasContent = useSlotHasContent('icon');
+const hasIcon = computed(() => iconSlotHasContent.value || !!props.icon);
 
-    /**
-     * The deprecated `large` prop can be injected through a provider.
-     */
-    const injectedLarge = inject(LARGE, undefined);
-    const injectedOrPropsLarge = computed(() => injectedLarge?.value ?? props.large);
-    /**
-     * Because we want the `size` prop to have a default, it's always supplied.
-     * Thus, our only option to respect the deprecated `large` prop is to give it priority.
-     */
-    const computedSize = computed(() => {
-      if (injectedOrPropsLarge.value) {
-        return 'large';
-      }
-
-      return props.size;
-    });
-
-    function onClick(event: MouseEvent): void {
-      /**
-       * If the button is disabled or loading, do not take action.
-       * This prevents double/extra clicks when an async operation is in progress.
-       */
-      if (props.disabled || props.loading) {
-        return;
-      }
-
-      navigate(event);
-      emit('click', event);
-    }
-
-    const button = ref<HTMLElement | null>(null);
-    const injectedBounceAmount = inject(BOUNCE_AMOUNT, null);
-    const bounceAmount = computed(() => {
-      /**
-       * If the button is disabled or loading, do not animate the button.
-       */
-      if (props.disabled || props.loading) {
-        return 1;
-      }
-
-      if (injectedBounceAmount) {
-        return injectedBounceAmount;
-      }
-
-      if (block.value) {
-        return BLOCK_BOUNCE_AMOUNT;
-      }
-
-      return BASE_BOUNCE_AMOUNT;
-    });
-    const animationListeners = useTapAnimation({
-      el: button,
-      keyframes: {
-        default: { transform: 'scale(1)' },
-        pressed: { transform: `scale(${bounceAmount.value})` },
-      },
-    });
-
-    return {
-      animationListeners,
-      button,
-      computedSize,
-      computedVariant,
-      dataBlock,
-      dataLoading,
-      hasIcon,
-      injectedOrPropBlock,
-      injectedOrPropsLarge,
-      onClick,
-      routerDestinationOrHref,
-      shoelaceVariant,
-    };
+/**
+ * Handle the deprecated `secondary` and `tertiary` props.
+ */
+const computedVariant = computed((): ButtonVariant => {
+  if (props.secondary) {
+    return 'secondary';
+  }
+
+  if (props.tertiary) {
+    return 'tertiary';
+  }
+
+  return props.variant;
+});
+
+/**
+ * Map the computed variant to the Shoelace variant
+ */
+const shoelaceVariant = computed(() => VARIANT_TO_SHOELACE_VARIANT[computedVariant.value]);
+
+/**
+ * The deprecated `large` prop can be injected through a provider.
+ */
+const injectedLarge = inject(LARGE, undefined);
+const injectedOrPropsLarge = computed(() => injectedLarge?.value ?? props.large);
+/**
+ * Because we want the `size` prop to have a default, it's always supplied.
+ * Thus, our only option to respect the deprecated `large` prop is to give it priority.
+ */
+const computedSize = computed(() => {
+  if (injectedOrPropsLarge.value) {
+    return 'large';
+  }
+
+  return props.size;
+});
+
+function onClick(event: MouseEvent): void {
+  /**
+   * If the button is disabled or loading, do not take action.
+   * This prevents double/extra clicks when an async operation is in progress.
+   */
+  if (props.disabled || props.loading) {
+    return;
+  }
+
+  navigate(event);
+  emit('click', event);
+}
+
+const button = ref<HTMLElement | null>(null);
+const injectedBounceAmount = inject(BOUNCE_AMOUNT, null);
+const bounceAmount = computed(() => {
+  /**
+   * If the button is disabled or loading, do not animate the button.
+   */
+  if (props.disabled || props.loading) {
+    return 1;
+  }
+
+  if (injectedBounceAmount) {
+    return injectedBounceAmount;
+  }
+
+  if (props.block) {
+    return BLOCK_BOUNCE_AMOUNT;
+  }
+
+  return BASE_BOUNCE_AMOUNT;
+});
+const animationListeners = useTapAnimation({
+  el: button,
+  keyframes: {
+    default: { transform: 'scale(1)' },
+    pressed: { transform: `scale(${bounceAmount.value})` },
   },
 });
 </script>

package/src/components/CButtonStack.vue

@@ -4,23 +4,31 @@
   </component>
 </template>
 
-<script lang="ts">
-import { defineComponent, provide, ref, toRefs } from 'vue';
+<script setup lang="ts">
+import type { Ref, VNode } from 'vue';
+import { provide, ref, toRef } from 'vue';
 
 import { BLOCK, LARGE } from '@propelinc/citrus-ui/src/services/injections/buttons';
 
-export default defineComponent({
-  props: {
-    tag: { type: String, default: 'div' },
-    large: { type: Boolean, default: null },
-  },
-  setup(props) {
-    const { large } = toRefs(props);
+const props = withDefaults(
+  defineProps<{
+    tag?: string;
+    large?: boolean | null;
+  }>(),
+  {
+    tag: 'div',
+    large: null,
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+const large = toRef(props, 'large') as Ref<boolean | null>;
 
-    provide(BLOCK, ref(true));
-    provide(LARGE, large);
-  },
-});
+provide(BLOCK, ref(true));
+provide(LARGE, large);
 </script>
 
 <style scoped>

package/src/components/CCard.vue

@@ -24,9 +24,9 @@
   </component>
 </template>
 
-<script lang="ts">
-import type { PropType } from 'vue';
-import { computed, defineComponent, toRefs } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
+import { computed, useAttrs } from 'vue';
 import type { RouteLocationRaw } from 'vue-router';
 
 import CCardHeader from '@propelinc/citrus-ui/src/components/CCardHeader.vue';
@@ -40,80 +40,83 @@ export interface InternalCardConfig {
   isLink: boolean;
 }
 
-export default defineComponent({
-  components: { CCardHeader },
-  props: {
+const props = withDefaults(
+  defineProps<{
     /** Sets the border color of the card */
-    borderColor: { type: String, default: undefined },
-
+    borderColor?: string;
     /** Removes the border of the card */
-    borderless: { type: Boolean, default: false },
-
+    borderless?: boolean;
     /** Sets the background color of the entire card */
-    color: { type: String, default: undefined },
-
+    color?: string;
     /** Navigates externally on click */
-    href: { type: String, default: undefined },
-
+    href?: string;
     /** Stretches the card vertically to fill the height of the parent container */
-    stretch: { type: Boolean, default: false },
-
+    stretch?: boolean;
     /** Toggles a squared-off card style intended to fill the width of the page */
-    tile: { type: Boolean, default: false },
-
+    tile?: boolean;
     /** Sets the title of the card */
-    title: { type: String, default: undefined },
-
+    title?: string;
     /** Navigates within the app on click */
-    to: { type: [Object, String] as PropType<RouteLocationRaw | undefined>, default: undefined },
-  },
-  setup(props, { attrs }) {
-    const { href, to } = toRefs(props);
-
-    const { cssColor: backgroundCssColor } = useCssColor(() => props.color);
-    const { cssColor: borderCssColor } = useCssColor(() => props.borderColor);
-
-    const routingVariant = computed<RoutingVariant>(() => {
-      if (to.value) {
-        return 'internal';
-      }
-
-      if (href.value) {
-        return 'external';
-      }
-
-      return 'none';
-    });
-
-    const config = computed<InternalCardConfig>(() => {
-      switch (routingVariant.value) {
-        case 'internal':
-          return {
-            attrs,
-            element: 'router-link',
-            isLink: true,
-          };
-
-        case 'external':
-          return {
-            attrs: {
-              ...attrs,
-              role: 'link',
-              tabindex: '0',
-              target: '_blank',
-            },
-            element: 'a',
-            isLink: true,
-          };
-
-        case 'none':
-        default:
-          return { attrs, element: 'div', isLink: false };
-      }
-    });
-
-    return { config, backgroundCssColor, borderCssColor };
-  },
+    to?: RouteLocationRaw;
+  }>(),
+  {
+    borderColor: undefined,
+    borderless: false,
+    color: undefined,
+    href: undefined,
+    stretch: false,
+    tile: false,
+    title: undefined,
+    to: undefined,
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
+
+const attrs = useAttrs();
+
+const { cssColor: backgroundCssColor } = useCssColor(() => props.color);
+const { cssColor: borderCssColor } = useCssColor(() => props.borderColor);
+
+const routingVariant = computed<RoutingVariant>(() => {
+  if (props.to) {
+    return 'internal';
+  }
+
+  if (props.href) {
+    return 'external';
+  }
+
+  return 'none';
+});
+
+const config = computed<InternalCardConfig>(() => {
+  switch (routingVariant.value) {
+    case 'internal':
+      return {
+        attrs,
+        element: 'router-link',
+        isLink: true,
+      };
+
+    case 'external':
+      return {
+        attrs: {
+          ...attrs,
+          role: 'link',
+          tabindex: '0',
+          target: '_blank',
+        },
+        element: 'a',
+        isLink: true,
+      };
+
+    case 'none':
+    default:
+      return { attrs, element: 'div', isLink: false };
+  }
 });
 </script>
 

package/src/components/CCardFooter.vue

@@ -4,14 +4,14 @@
   </CButtonStack>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
 import CButtonStack from '@propelinc/citrus-ui/src/components/CButtonStack.vue';
 
-export default defineComponent({
-  components: { CButtonStack },
-});
+defineSlots<{
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>

package/src/components/CCardHeader.vue

@@ -10,16 +10,18 @@
   </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({
-  setup() {
-    provide(TERTIARY_ICON_BUTTON, ref(true));
-  },
-});
+defineSlots<{
+  default?: () => VNode[];
+  append?: () => VNode[];
+}>();
+
+provide(TERTIARY_ICON_BUTTON, ref(true));
 </script>
 
 <style lang="scss" scoped>

package/src/components/CCardSection.vue

@@ -9,15 +9,22 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import type { VNode } from 'vue';
 
-export default defineComponent({
-  props: {
-    /** Removes the padding from the section */
-    fluid: { type: Boolean, default: false },
-  },
-});
+withDefaults(
+  defineProps<{
+    /** Removes the padding from the content */
+    fluid?: boolean;
+  }>(),
+  {
+    fluid: false,
+  }
+);
+
+defineSlots<{
+  default?: () => VNode[];
+}>();
 </script>
 
 <style lang="scss" scoped>