@brickflow/ui 0.0.41 → 0.0.43

package/dist/module.json

@@ -4,7 +4,7 @@
   },
   "configKey": "brickflowUi",
   "name": "@brickflow/ui",
-  "version": "0.0.41",
+  "version": "0.0.43",
   "builder": {
     "@nuxt/module-builder": "1.0.3",
     "unbuild": "3.6.1"

package/dist/runtime/components/Button/icons.demo.vue

@@ -1,13 +1,14 @@
-<script>
-export const uiDemo = {
-  description: "Set leadingIcon and trailingIcon to an icon name. Slots take precedence when both are provided.",
-  title: "Icons"
-};
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Set leadingIcon and trailingIcon to an icon name. Slots take precedence when both are provided.',
+    title: 'Icons',
+  }
 </script>
 
-<script setup>
-import { firstIconName } from "#brickflow-ui-icons";
-import Button from "./index.vue";
+<script lang="ts" setup>
+  import { firstIconName } from '#brickflow-ui-icons'
+
+  import Button from './index.vue'
 </script>
 
 <template>

package/dist/runtime/components/Button/index.vue

@@ -1,47 +1,79 @@
-<script>
-const UI_CONFIG = defineUiConfig();
+<script lang="ts">
+  const UI_CONFIG = defineUiConfig<{
+    colorClasses: Record<string, Record<string, string>>
+    colorDefault: string
+    loadingIconName: string
+    sizeClasses: Record<string, string>
+    sizeDefault: string
+    sizeIconClasses: Record<string, string>
+    variantDefault: string
+  }>()
+
+  export type ButtonConfig = typeof UI_CONFIG
 </script>
 
-<script setup>
-import { computed, shallowRef } from "vue";
-import Icon from "../Icon/index.vue";
-import BaseLink from "../Link/index.vue";
-const props = defineProps({
-  block: { type: Boolean, required: false },
-  color: { type: String, required: false, default: UI_CONFIG.colorDefault },
-  disabled: { type: Boolean, required: false },
-  icon: { type: String, required: false, default: void 0 },
-  loading: { type: Boolean, required: false },
-  rounded: { type: Boolean, required: false, default: false },
-  size: { type: String, required: false, default: UI_CONFIG.sizeDefault },
-  square: { type: Boolean, required: false },
-  to: { type: null, required: false, default: void 0 },
-  trailingIcon: { type: String, required: false, default: void 0 },
-  type: { type: String, required: false, default: "button" },
-  variant: { type: String, required: false, default: UI_CONFIG.variantDefault }
-});
-const colorClasses = UI_CONFIG.colorClasses;
-const sizeClasses = UI_CONFIG.sizeClasses;
-const sizeIconClasses = UI_CONFIG.sizeIconClasses;
-const component = computed(() => props.to === void 0 ? "button" : BaseLink);
-const disabled = computed(() => props.disabled || props.loading);
-const isButton = computed(() => props.to === void 0);
-const classes = computed(() => [
-  UI_STYLE.base,
-  sizeClasses[props.size],
-  colorClasses[props.color][props.variant],
-  props.block && UI_STYLE.state.block,
-  props.square && UI_STYLE.state.square,
-  disabled.value && UI_STYLE.state.disabled
-]);
-const isAnimating = shallowRef(false);
-const animationTapClass = UI_STYLE.animationTap;
-function handleTap() {
-  isAnimating.value = false;
-  requestAnimationFrame(() => {
-    isAnimating.value = true;
-  });
-}
+<script setup lang="ts">
+  import type { RouteLocationRaw } from 'vue-router'
+
+  import { computed, shallowRef } from 'vue'
+
+  import Icon from '../Icon/index.vue'
+  import BaseLink from '../Link/index.vue'
+  const props = withDefaults(
+    defineProps<{
+      block?: boolean
+      color?: ButtonColor
+      disabled?: boolean
+      icon?: string
+      loading?: boolean
+      rounded?: boolean
+      size?: ButtonSize
+      square?: boolean
+      to?: RouteLocationRaw
+      trailingIcon?: string
+      type?: 'button' | 'reset' | 'submit'
+      variant?: ButtonVariant
+    }>(),
+    {
+      color: UI_CONFIG.colorDefault,
+      icon: undefined,
+      rounded: false,
+      size: UI_CONFIG.sizeDefault,
+      to: undefined,
+      trailingIcon: undefined,
+      type: 'button',
+      variant: UI_CONFIG.variantDefault,
+    },
+  )
+
+  const colorClasses = UI_CONFIG.colorClasses
+  const sizeClasses = UI_CONFIG.sizeClasses
+  const sizeIconClasses = UI_CONFIG.sizeIconClasses
+  type ButtonColor = Extract<keyof typeof colorClasses, string>
+  type ButtonSize = Extract<keyof typeof sizeClasses, string>
+  type ButtonVariant = Extract<keyof (typeof colorClasses)[ButtonColor], string>
+
+  const component = computed(() => (props.to === undefined ? 'button' : BaseLink))
+  const disabled = computed(() => props.disabled || props.loading)
+  const isButton = computed(() => props.to === undefined)
+  const classes = computed(() => [
+    UI_STYLE.base,
+    sizeClasses[props.size],
+    colorClasses[props.color][props.variant],
+    props.block && UI_STYLE.state.block,
+    props.square && UI_STYLE.state.square,
+    disabled.value && UI_STYLE.state.disabled,
+  ])
+
+  const isAnimating = shallowRef(false)
+  const animationTapClass = UI_STYLE.animationTap
+  function handleTap(): void {
+    isAnimating.value = false
+
+    requestAnimationFrame(() => {
+      isAnimating.value = true
+    })
+  }
 </script>
 
 <template>
@@ -49,16 +81,16 @@ function handleTap() {
     :is="component"
     v-bind="animationTapClass ? { onPointerupPassive: handleTap } : {}"
     :to="props.to"
-    :type="isButton ? props.type : void 0"
-    :disabled="isButton ? disabled : void 0"
-    :aria-busy="props.loading || void 0"
-    :aria-disabled="disabled || void 0"
-    :tabindex="disabled && !isButton ? -1 : void 0"
+    :type="isButton ? props.type : undefined"
+    :disabled="isButton ? disabled : undefined"
+    :aria-busy="props.loading || undefined"
+    :aria-disabled="disabled || undefined"
+    :tabindex="disabled && !isButton ? -1 : undefined"
     :class="[classes, isAnimating && animationTapClass]"
     data-testid="ui-button"
     :style="{
-  borderRadius: props.rounded && '99999px'
-}"
+      borderRadius: props.rounded && '99999px',
+    }"
     @contextmenu.prevent
   >
     <span
@@ -74,7 +106,7 @@ function handleTap() {
         />
         <Icon
           v-else
-          :name="props.icon"
+          :name="props.icon!"
           :class="sizeIconClasses[props.size]"
           aria-hidden="true"
         />
@@ -94,7 +126,7 @@ function handleTap() {
     >
       <slot name="trailing">
         <Icon
-          :name="props.trailingIcon"
+          :name="props.trailingIcon!"
           :class="sizeIconClasses[props.size]"
           aria-hidden="true"
         />

package/dist/runtime/components/Button/size.demo.vue

@@ -1,12 +1,13 @@
-<script>
-export const uiDemo = {
-  title: "Size & Rounded"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Size & Rounded',
+  }
 </script>
 
-<script setup>
-import { buttonConfig, firstIconName } from "#brickflow-ui-icons";
-import Button from "./index.vue";
+<script lang="ts" setup>
+  import { buttonConfig, firstIconName } from '#brickflow-ui-icons'
+
+  import Button from './index.vue'
 </script>
 
 <template>

package/dist/runtime/components/Button/slots.demo.vue

@@ -1,13 +1,15 @@
-<script>
-export const uiDemo = {
-  title: "Slots"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Slots',
+  }
 </script>
 
-<script setup>
-import { ref } from "vue";
-import Button from "./index.vue";
-const clicks = ref(0);
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import Button from './index.vue'
+
+  const clicks = ref(0)
 </script>
 
 <template>

package/dist/runtime/components/Button/state.demo.vue

@@ -1,13 +1,15 @@
-<script>
-export const uiDemo = {
-  title: "State"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'State',
+  }
 </script>
 
-<script setup>
-import { buttonConfig } from "#brickflow-ui-icons";
-import Button from "./index.vue";
-const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {};
+<script lang="ts" setup>
+  import { buttonConfig } from '#brickflow-ui-icons'
+
+  import Button from './index.vue'
+
+  const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {}
 </script>
 
 <template>

package/dist/runtime/components/Button/variants.demo.vue

@@ -1,13 +1,15 @@
-<script>
-export const uiDemo = {
-  title: "Color & Variants"
-};
+<script lang="ts">
+  export const uiDemo = {
+    title: 'Color & Variants',
+  }
 </script>
 
-<script setup>
-import { buttonConfig } from "#brickflow-ui-icons";
-import Button from "./index.vue";
-const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {};
+<script lang="ts" setup>
+  import { buttonConfig } from '#brickflow-ui-icons'
+
+  import Button from './index.vue'
+
+  const firstColorClasses = Object.values(buttonConfig.colorClasses)[0] ?? {}
 </script>
 
 <template>

package/dist/runtime/components/Icon/basic.demo.vue

@@ -1,15 +1,18 @@
-<script>
-export const uiDemo = {
-  description: "The name matches the SVG filename without its extension.",
-  title: "Basic usage"
-};
+<script lang="ts">
+  export const uiDemo = {
+    description: 'The name matches the SVG filename without its extension.',
+    title: 'Basic usage',
+  }
 </script>
 
-<script setup>
-import { ref } from "vue";
-import { firstIconName } from "#brickflow-ui-icons";
-import Icon from "./index.vue";
-const iconName = ref(firstIconName);
+<script lang="ts" setup>
+  import { ref } from 'vue'
+
+  import { firstIconName } from '#brickflow-ui-icons'
+
+  import Icon from './index.vue'
+
+  const iconName = ref(firstIconName)
 </script>
 
 <template>

package/dist/runtime/components/Icon/gallery.demo.vue

@@ -1,36 +1,44 @@
-<script>
-export const uiDemo = {
-  description: "Browse every icon available in the project, filter by name, and click to copy its name.",
-  title: "Icon gallery"
-};
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Browse every icon available in the project, filter by name, and click to copy its name.',
+    title: 'Icon gallery',
+  }
 </script>
 
-<script setup>
-import { computed, onBeforeUnmount, ref } from "vue";
-import { iconNames } from "#brickflow-ui-icons";
-import Icon from "./index.vue";
-const search = ref("");
-const copiedIconName = ref("");
-const copyError = ref("");
-let copiedTimeout;
-const filteredIconNames = computed(() => {
-  const query = search.value.trim().toLocaleLowerCase();
-  return query ? iconNames.filter((name) => name.toLocaleLowerCase().includes(query)) : iconNames;
-});
-const copyIconName = async (name) => {
-  copyError.value = "";
-  try {
-    await navigator.clipboard.writeText(name);
-    clearTimeout(copiedTimeout);
-    copiedIconName.value = name;
-    copiedTimeout = setTimeout(() => {
-      copiedIconName.value = "";
-    }, 2e3);
-  } catch {
-    copyError.value = "Could not copy the icon name. Please try again.";
+<script lang="ts" setup>
+  import { computed, onBeforeUnmount, ref } from 'vue'
+
+  import { iconNames } from '#brickflow-ui-icons'
+
+  import Icon from './index.vue'
+
+  const search = ref('')
+  const copiedIconName = ref('')
+  const copyError = ref('')
+  let copiedTimeout: ReturnType<typeof setTimeout> | undefined
+
+  const filteredIconNames = computed(() => {
+    const query = search.value.trim().toLocaleLowerCase()
+
+    return query ? iconNames.filter((name) => name.toLocaleLowerCase().includes(query)) : iconNames
+  })
+
+  const copyIconName = async (name: string): Promise<void> => {
+    copyError.value = ''
+
+    try {
+      await navigator.clipboard.writeText(name)
+      clearTimeout(copiedTimeout)
+      copiedIconName.value = name
+      copiedTimeout = setTimeout(() => {
+        copiedIconName.value = ''
+      }, 2000)
+    } catch {
+      copyError.value = 'Could not copy the icon name. Please try again.'
+    }
   }
-};
-onBeforeUnmount(() => clearTimeout(copiedTimeout));
+
+  onBeforeUnmount(() => clearTimeout(copiedTimeout))
 </script>
 
 <template>
@@ -75,7 +83,7 @@ onBeforeUnmount(() => clearTimeout(copiedTimeout));
       class="sr-only"
       role="status"
     >
-      {{ copiedIconName ? `Copied ${copiedIconName}` : "" }}
+      {{ copiedIconName ? `Copied ${copiedIconName}` : '' }}
     </p>
     <p
       v-if="copyError"
@@ -98,9 +106,11 @@ onBeforeUnmount(() => clearTimeout(copiedTimeout));
           type="button"
           :aria-label="`Copy ${name}`"
           :class="[
-  'group flex w-full cursor-pointer flex-col items-center gap-3 rounded-xl border px-3 py-5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
-  copiedIconName === name ? 'border-green-500/50 bg-green-500/10' : 'border-zinc-900 bg-zinc-950/50 hover:border-zinc-700 hover:bg-zinc-900/70'
-]"
+            'group flex w-full cursor-pointer flex-col items-center gap-3 rounded-xl border px-3 py-5 transition-colors focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-400',
+            copiedIconName === name
+              ? 'border-green-500/50 bg-green-500/10'
+              : 'border-zinc-900 bg-zinc-950/50 hover:border-zinc-700 hover:bg-zinc-900/70',
+          ]"
           :title="`Copy ${name}`"
           @click="copyIconName(name)"
         >
@@ -111,11 +121,11 @@ onBeforeUnmount(() => clearTimeout(copiedTimeout));
           />
           <span
             :class="[
-  'w-full truncate text-center font-mono text-xs transition-colors',
-  copiedIconName === name ? 'text-green-400' : 'text-zinc-400 group-hover:text-zinc-100'
-]"
+              'w-full truncate text-center font-mono text-xs transition-colors',
+              copiedIconName === name ? 'text-green-400' : 'text-zinc-400 group-hover:text-zinc-100',
+            ]"
           >
-            {{ copiedIconName === name ? "Copied" : name }}
+            {{ copiedIconName === name ? 'Copied' : name }}
           </span>
         </button>
       </li>

package/dist/runtime/components/Icon/index.vue

@@ -1,12 +1,18 @@
-<script setup>
-import { computed } from "vue";
-defineOptions({
-  inheritAttrs: false
-});
-const props = defineProps({
-  name: { type: String, required: true }
-});
-const classes = computed(() => `icon-${props.name}`);
+<script setup lang="ts">
+  import { computed } from 'vue'
+
+  defineOptions({
+    inheritAttrs: false,
+  })
+
+  const props = withDefaults(
+    defineProps<{
+      name: string
+    }>(),
+    {},
+  )
+
+  const classes = computed(() => `icon-${props.name}`)
 </script>
 
 <template>

package/dist/runtime/components/Link/basic.demo.vue

@@ -1,12 +1,12 @@
-<script>
-export const uiDemo = {
-  description: "Internal navigation keeps the current locale.",
-  title: "Basic usage"
-};
+<script lang="ts">
+  export const uiDemo = {
+    description: 'Internal navigation keeps the current locale.',
+    title: 'Basic usage',
+  }
 </script>
 
-<script setup>
-import Link from "./index.vue";
+<script lang="ts" setup>
+  import Link from './index.vue'
 </script>
 
 <template>

package/dist/runtime/components/Link/index.vue

@@ -8,55 +8,86 @@
   </NuxtLink>
 </template>
 
-<script setup>
-import { computed, ref } from "vue";
-import { useRouter } from "vue-router";
-import { useTranslate } from "../../composables/useTranslate";
-defineOptions({ inheritAttrs: false });
-const props = defineProps({
-  activeClass: { type: String, required: false, default: void 0 },
-  class: { type: [Array, String], required: false, default: void 0 },
-  custom: { type: Boolean, required: false, default: false },
-  exactActiveClass: { type: String, required: false, default: void 0 },
-  external: { type: Boolean, required: false, default: false },
-  faster: { type: Boolean, required: false, default: false },
-  href: { type: null, required: false, default: void 0 },
-  onClick: { type: Function, required: false, default: void 0 },
-  onPointerdown: { type: Function, required: false, default: void 0 },
-  prefetch: { type: Boolean, required: false, default: false },
-  rel: { type: [null, String], required: false, default: void 0 },
-  replace: { type: Boolean, required: false, default: false },
-  style: { type: Object, required: false, default: void 0 },
-  target: { type: [String, null, Object], required: false, default: void 0 },
-  to: { type: null, required: false, default: void 0 }
-});
-const { localePath } = useTranslate();
-const prepareProps = computed(() => {
-  const { faster: _faster, onPointerdown: _onPointerdown, ...linkProps } = props;
-  const refineDrops = { ...linkProps, onPointerdown: props.faster ? handlePointerDown : void 0 };
-  if (typeof props.to === "string") {
-    return { ...refineDrops, to: localePath(props.to) };
-  } else if (props.to?.path) {
-    return { ...refineDrops, to: { ...props.to, path: localePath(props.to.path) } };
-  }
-  return refineDrops;
-});
-const linkRef = ref();
-function handlePointerDown(e) {
-  const router = useRouter();
-  props.onPointerdown?.();
-  if (e.button !== 0) {
-    return;
-  }
-  if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
-    return;
-  }
-  e.preventDefault();
-  const to = prepareProps.value.to;
-  if (!to) {
-    return;
+<script lang="ts" setup>
+  import { type ComponentPublicInstance, computed, ref } from 'vue'
+  import { type RouteLocationPathRaw, type RouteLocationRaw, useRouter } from 'vue-router'
+
+  import { useTranslate } from '../../composables/useTranslate'
+
+  defineOptions({ inheritAttrs: false })
+
+  const props = withDefaults(
+    defineProps<{
+      activeClass?: string
+      class?: (false | string)[] | string
+      custom?: boolean
+      exactActiveClass?: string
+      external?: boolean
+      faster?: boolean
+      href?: RouteLocationRaw
+      onClick?: () => void
+      onPointerdown?: () => void
+      prefetch?: boolean
+      rel?: null | string
+      replace?: boolean
+      style?: Record<string, string>
+      target?: '_blank' | '_parent' | '_self' | '_top' | null | (Record<string, never> & string)
+      to?: RouteLocationRaw
+    }>(),
+    {
+      activeClass: undefined,
+      class: undefined,
+      custom: false,
+      exactActiveClass: undefined,
+      external: false,
+      faster: false,
+      href: undefined,
+      onClick: undefined,
+      onPointerdown: undefined,
+      prefetch: false,
+      rel: undefined,
+      replace: false,
+      style: undefined,
+      target: undefined,
+      to: undefined,
+    },
+  )
+  const { localePath } = useTranslate()
+
+  const prepareProps = computed(() => {
+    const { faster: _faster, onPointerdown: _onPointerdown, ...linkProps } = props
+    const refineDrops = { ...linkProps, onPointerdown: props.faster ? handlePointerDown : undefined }
+
+    if (typeof props.to === 'string') {
+      return { ...refineDrops, to: localePath(props.to) }
+    } else if ((props.to as RouteLocationPathRaw)?.path) {
+      return { ...refineDrops, to: { ...props.to, path: localePath((props.to as RouteLocationPathRaw).path) } }
+    }
+
+    return refineDrops
+  })
+  const linkRef = ref<ComponentPublicInstance>()
+
+  function handlePointerDown(e: PointerEvent): void {
+    const router = useRouter()
+    props.onPointerdown?.()
+    if (e.button !== 0) {
+      return
+    }
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) {
+      return
+    }
+
+    e.preventDefault()
+
+    const to = prepareProps.value.to
+
+    if (!to) {
+      return
+    }
+
+    props.replace ? router.replace(to) : router.push(to)
   }
-  props.replace ? router.replace(to) : router.push(to);
-}
-defineExpose({ linkRef });
+
+  defineExpose({ linkRef })
 </script>