chore: transform to module

src/runtime/components/Button.vue

@@ -0,0 +1,196 @@
+<script lang="ts">
+import { tv, type VariantProps } from 'tailwind-variants'
+import type { LinkProps } from './Link.vue'
+// import appConfig from '#build/app.config'
+
+export const theme = {
+  slots: {
+    base: 'inline-flex items-center focus:outline-none rounded-md font-medium',
+    label: '',
+    icon: 'flex-shrink-0'
+  },
+  variants: {
+    color: {
+      blue: 'bg-blue-500 hover:bg-blue-700',
+      red: 'bg-red-500 hover:bg-red-700',
+      green: 'bg-green-500 hover:bg-green-700'
+    },
+    size: {
+      '2xs': {
+        base: 'px-2 py-1 text-xs gap-x-1'
+      },
+      xs: {
+        base: 'px-2.5 py-1.5 text-xs gap-x-1.5'
+      },
+      sm: {
+        base: 'px-2.5 py-1.5 text-sm gap-x-1.5'
+      },
+      md: 'px-3 py-2 text-sm gap-x-2',
+      lg: 'px-3.5 py-2.5 text-sm gap-x-2.5',
+      xl: 'px-3.5 py-2.5 text-base gap-x-2.5'
+    },
+    truncate: {
+      true: {
+        label: 'text-left break-all line-clamp-1'
+      }
+    }
+  },
+  defaultVariants: {
+    color: 'blue',
+    size: 'md'
+  }
+} as const
+
+// export const button = tv({ extend: tv(theme), ...appConfig.ui.button })
+export const button = tv(theme)
+
+type ButtonVariants = VariantProps<typeof button>
+
+export interface ButtonProps extends ButtonVariants, LinkProps {
+  label?: string
+  icon?: string
+  leading?: boolean
+  leadingIcon?: string
+  trailing?: boolean
+  trailingIcon?: string
+  loading?: boolean
+  loadingIcon?: string
+  square?: boolean
+  block?: boolean
+  disabled?: boolean
+  padded?: boolean
+  truncate?: boolean
+  class?: any
+  ui?: Partial<typeof button>
+}
+</script>
+
+<script setup lang="ts">
+import type { PropType } from 'vue'
+import { linkProps } from './Link.vue'
+import UIcon from './Icon.vue'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps({
+  ...linkProps,
+  label: {
+    type: String as PropType<ButtonProps['label']>,
+    default: undefined
+  },
+  icon: {
+    type: String as PropType<ButtonProps['icon']>,
+    default: undefined
+  },
+  leading: {
+    type: Boolean as PropType<ButtonProps['leading']>,
+    default: false
+  },
+  leadingIcon: {
+    type: String as PropType<ButtonProps['leadingIcon']>,
+    default: undefined
+  },
+  trailing: {
+    type: Boolean as PropType<ButtonProps['trailing']>,
+    default: false
+  },
+  trailingIcon: {
+    type: String as PropType<ButtonProps['trailingIcon']>,
+    default: undefined
+  },
+  loading: {
+    type: Boolean as PropType<ButtonProps['loading']>,
+    default: false
+  },
+  loadingIcon: {
+    type: String as PropType<ButtonProps['loadingIcon']>,
+    default: undefined
+  },
+  square: {
+    type: Boolean as PropType<ButtonProps['square']>,
+    default: false
+  },
+  block: {
+    type: Boolean as PropType<ButtonProps['block']>,
+    default: false
+  },
+  disabled: {
+    type: Boolean as PropType<ButtonProps['disabled']>,
+    default: false
+  },
+  padded: {
+    type: Boolean as PropType<ButtonProps['padded']>,
+    default: false
+  },
+  truncate: {
+    type: Boolean as PropType<ButtonProps['truncate']>,
+    default: false
+  },
+  color: {
+    type: String as PropType<ButtonProps['color']>,
+    default: undefined
+  },
+  size: {
+    type: String as PropType<ButtonProps['size']>,
+    default: undefined
+  },
+  class: {
+    type: String as PropType<ButtonProps['class']>,
+    default: undefined
+  },
+  ui: {
+    type: Object as PropType<ButtonProps['ui']>,
+    default: undefined
+  }
+})
+
+
+const slots = useSlots()
+
+// Computed
+
+const isLeading = computed(() => (props.icon && props.leading) || (props.icon && !props.trailing) || (props.loading && !props.trailing) || props.leadingIcon)
+
+const isTrailing = computed(() => (props.icon && props.trailing) || (props.loading && props.trailing) || props.trailingIcon)
+
+const ui = computed(() => tv({ extend: button, ...props.ui })({
+  color: props.color,
+  size: props.size,
+  square: props.square || (!slots.default && !props.label),
+  class: props.class
+}))
+
+const leadingIconName = computed(() => {
+  if (props.loading) {
+    return props.loadingIcon
+  }
+
+  return props.leadingIcon || props.icon
+})
+
+const trailingIconName = computed(() => {
+  if (props.loading && !isLeading.value) {
+    return props.loadingIcon
+  }
+
+  return props.trailingIcon || props.icon
+})
+</script>
+
+<template>
+  <ULink :type="type" :disabled="disabled || loading" :class="ui.base()" v-bind="$attrs">
+    <slot name="leading" :disabled="disabled" :loading="loading">
+      <UIcon v-if="isLeading && leadingIconName" :name="leadingIconName" :class="ui.icon({ isLeading })" aria-hidden="true" />
+    </slot>
+
+    <span v-if="label || $slots.default" :class="ui.label({ truncate })">
+      <slot>
+        {{ label }}
+      </slot>
+    </span>
+
+    <!-- <slot name="trailing" :disabled="disabled" :loading="loading">
+      <UIcon v-if="isTrailing && trailingIconName" :name="trailingIconName" :class="trailingIconClass" aria-hidden="true" />
+    </slot> -->
+  </ULink>
+</template>

src/runtime/components/Icon.vue

@@ -0,0 +1,12 @@
+<template>
+  <Icon :name="name" />
+</template>
+
+<script setup lang="ts">
+defineProps({
+  name: {
+    type: String,
+    required: true
+  }
+})
+</script>

src/runtime/components/Link.vue

@@ -0,0 +1,184 @@
+<script lang="ts">
+import type { PropType } from 'vue'
+import type { NuxtLinkProps } from '#app'
+import type { RouteLocationRaw } from '#vue-router'
+
+export interface LinkProps extends NuxtLinkProps {
+  as?: string
+  type?: string
+  disabled?: boolean
+  active?: boolean
+  exact?: boolean
+  exactQuery?: boolean
+  exactHash?: boolean
+  inactiveClass?: string
+}
+
+export const linkProps = {
+  // Routing
+  to: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined,
+    required: false
+  },
+  href: {
+    type: [String, Object] as PropType<RouteLocationRaw>,
+    default: undefined,
+    required: false
+  },
+
+  // Attributes
+  target: {
+    type: String as PropType<NuxtLinkProps['target']>,
+    default: undefined,
+    required: false
+  },
+  rel: {
+    type: String as PropType<NuxtLinkProps['rel']>,
+    default: undefined,
+    required: false
+  },
+  noRel: {
+    type: Boolean as PropType<NuxtLinkProps['noRel']>,
+    default: undefined,
+    required: false
+  },
+
+  // Prefetching
+  prefetch: {
+    type: Boolean as PropType<NuxtLinkProps['prefetch']>,
+    default: undefined,
+    required: false
+  },
+  noPrefetch: {
+    type: Boolean as PropType<NuxtLinkProps['noPrefetch']>,
+    default: undefined,
+    required: false
+  },
+
+  // Styling
+  activeClass: {
+    type: String as PropType<NuxtLinkProps['activeClass']>,
+    default: undefined,
+    required: false
+  },
+  exactActiveClass: {
+    type: String as PropType<NuxtLinkProps['exactActiveClass']>,
+    default: undefined,
+    required: false
+  },
+  prefetchedClass: {
+    type: String as PropType<NuxtLinkProps['prefetchedClass']>,
+    default: undefined,
+    required: false
+  },
+
+  // Vue Router's `<RouterLink>` additional props
+  replace: {
+    type: Boolean as PropType<NuxtLinkProps['replace']>,
+    default: undefined,
+    required: false
+  },
+  ariaCurrentValue: {
+    type: String as PropType<NuxtLinkProps['ariaCurrentValue']>,
+    default: undefined,
+    required: false
+  },
+
+  // Edge cases handling
+  external: {
+    type: Boolean as PropType<NuxtLinkProps['external']>,
+    default: undefined,
+    required: false
+  },
+
+  // Specific props
+  as: {
+    type: String as PropType<LinkProps['as']>,
+    default: 'button'
+  },
+  type: {
+    type: String as PropType<LinkProps['type']>,
+    default: 'button'
+  },
+  disabled: {
+    type: Boolean as PropType<LinkProps['disabled']>,
+    default: null
+  },
+  active: {
+    type: Boolean as PropType<LinkProps['active']>,
+    default: undefined
+  },
+  exact: {
+    type: Boolean as PropType<LinkProps['exact']>,
+    default: false
+  },
+  exactQuery: {
+    type: Boolean as PropType<LinkProps['exactQuery']>,
+    default: false
+  },
+  exactHash: {
+    type: Boolean as PropType<LinkProps['exactHash']>,
+    default: false
+  },
+  inactiveClass: {
+    type: String as PropType<LinkProps['inactiveClass']>,
+    default: undefined
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { isEqual } from 'ohash'
+import type { RouteLocation } from '#vue-router'
+
+defineOptions({ inheritAttrs: false })
+
+const props = defineProps(linkProps)
+
+function resolveLinkClass (route: RouteLocation, currentRoute: RouteLocation, { isActive, isExactActive }: { isActive: boolean, isExactActive: boolean }) {
+  if (props.exactQuery && !isEqual(route.query, currentRoute.query)) {
+    return props.inactiveClass
+  }
+  if (props.exactHash && route.hash !== currentRoute.hash) {
+    return props.inactiveClass
+  }
+
+  if (props.exact && isExactActive) {
+    return props.activeClass
+  }
+
+  if (!props.exact && isActive) {
+    return props.activeClass
+  }
+
+  return props.inactiveClass
+}
+</script>
+
+<template>
+  <component
+    :is="as"
+    v-if="!to"
+    :type="type"
+    :disabled="disabled"
+    v-bind="$attrs"
+    :class="active ? activeClass : inactiveClass"
+  >
+    <slot v-bind="{ isActive: active }" />
+  </component>
+  <NuxtLink v-else v-slot="{ route, href, target, rel, navigate, isActive, isExactActive, isExternal }" v-bind="$props" custom>
+    <a
+      v-bind="$attrs"
+      :href="!disabled ? href : undefined"
+      :aria-disabled="disabled ? 'true' : undefined"
+      :role="disabled ? 'link' : undefined"
+      :rel="rel"
+      :target="target"
+      :class="active !== undefined ? (active ? activeClass : inactiveClass) : resolveLinkClass(route, $route, { isActive, isExactActive })"
+      @click="(e) => (!isExternal && !disabled) && navigate(e)"
+    >
+      <slot v-bind="{ isActive: active !== undefined ? active : (exact ? isExactActive : isActive) }" />
+    </a>
+  </NuxtLink>
+</template>