Merge branch 'main' into fix-typecheck

app.config.ts

@@ -37,11 +37,11 @@ export default defineAppConfig({
     },
     commandPalette: {
       default: {
-        icon: 'i-ph-magnifying-glass-duotone',
+        icon: 'i-ph-magnifying-glass',
         loadingIcon: 'i-ph-spinner',
         selectedIcon: 'i-ph-check',
         emptyState: {
-          icon: 'i-ph-magnifying-glass-duotone'
+          icon: 'i-ph-magnifying-glass'
         },
         closeButton: {
           icon: 'i-ph-x'
@@ -97,12 +97,12 @@ export default defineAppConfig({
       }
     },
     icons: {
-      dark: 'i-ph-moon-duotone',
-      light: 'i-ph-sun-duotone',
-      search: 'i-ph-magnifying-glass-duotone',
+      dark: 'i-ph-moon',
+      light: 'i-ph-sun',
+      search: 'i-ph-magnifying-glass',
       external: 'i-ph-arrow-up-right',
       chevron: 'i-ph-caret-down',
-      hash: 'i-ph-hash-duotone'
+      hash: 'i-ph-hash'
     },
     header: {
       wrapper: 'lg:mb-0 lg:border-0',
@@ -149,7 +149,7 @@ export default defineAppConfig({
     content: {
       search: {
         fileIcon: {
-          name: 'i-ph-file-text-duotone'
+          name: 'i-ph-file-text'
         }
       },
       toc: {
@@ -176,12 +176,12 @@ export default defineAppConfig({
         code: {
           button: {
             icon: {
-              copy: 'i-ph-copy-duotone',
-              copied: 'i-ph-check-square-duotone'
+              copy: 'i-ph-copy',
+              copied: 'i-ph-check-square'
             }
           },
           icon: {
-            terminal: 'i-ph-terminal-window-duotone'
+            terminal: 'i-ph-terminal-window'
           }
         }
       }

app.vue

@@ -71,7 +71,7 @@ onMounted(() => {
     >
       <div class="flex items-center gap-1">
         <UIcon
-          name="i-ph-magic-wand-duotone"
+          name="i-ph-magic-wand"
           class="w-5 h-5 flex-shrink-0 pointer-events-none hidden lg:inline-block mr-1"
         />
         <span>Learn Nuxt with a Collection of 100+ Tips!</span>
@@ -90,7 +90,7 @@ onMounted(() => {
     >
       <div class="flex items-center gap-2">
         <UIcon
-          name="i-ph-medal-duotone"
+          name="i-ph-medal"
           class="w-5 h-5 flex-shrink-0 pointer-events-none"
         />
         <span>The <span class="font-semibold">Nuxt Certification Program</span> by VueSchool is out!</span>

components/AppHeader.vue

@@ -27,7 +27,7 @@ const mobileNav = computed(() => {
     ...headerLinks.value.slice(1),
     {
       label: 'Design Kit',
-      icon: 'i-ph-palette-duotone',
+      icon: 'i-ph-palette',
       to: '/design-kit'
     }
   ]
@@ -48,7 +48,7 @@ const dropdownItems = [
   }],
   [{
     label: 'Browse Design Kit',
-    icon: 'i-ph-shapes-duotone',
+    icon: 'i-ph-shapes',
     to: '/design-kit'
   }]
 ]

components/EmptyCard.vue

@@ -9,7 +9,7 @@ withDefaults(defineProps<{
 <template>
   <UCard>
     <div class="flex flex-col items-center py-12">
-      <UIcon name="i-ph-magnifying-glass-duotone" class="w-16 h-16 mx-auto text-gray-500 dark:text-gray-400 mb-4" aria-hidden="true" />
+      <UIcon name="i-ph-magnifying-glass" class="w-16 h-16 mx-auto text-gray-500 dark:text-gray-400 mb-4" aria-hidden="true" />
 
       <!-- eslint-disable-next-line vue/no-v-html -->
       <p class="text-lg text-center max-w-sm" v-html="label" />

components/UInputCopy.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+defineProps({
+  value: {
+    type: String,
+    required: true
+  },
+  size: {
+    type: String,
+    default: 'lg'
+  }
+})
+const { copy, copied } = useClipboard()
+</script>
+
+<template>
+  <label>
+    <UInput :model-value="value" :size="size" disabled :ui="{ icon: { trailing: { pointer: '' } } }" icon="i-ph-terminal">
+      <div class="absolute inset-0" :class="[copied ? 'cursor-default' : 'cursor-copy']" @click="copy(value)" />
+      <template #trailing>
+        <UButton
+          :icon="copied ? 'i-ph-check' : 'i-ph-copy'"
+          color="gray"
+          variant="link"
+          :padded="false"
+          :class="{ 'text-green-500 hover:text-green-500 dark:text-green-400 hover:dark:text-green-400': copied }"
+          aria-label="copy button"
+          @click="copy(value)"
+        />
+      </template>
+    </UInput>
+  </label>
+</template>

components/content/Caution.vue

@@ -1,7 +1,7 @@
 <template>
   <Alert
     title="Caution"
-    icon="i-ph-warning-octagon-duotone"
+    icon="i-ph-warning-octagon"
     color="red"
     class="_caution"
     :class="$attrs.to ? 'dark:hover:!border-red-600/50 hover:!border-red-400/50' : ''"

components/content/Important.vue

@@ -1,7 +1,7 @@
 <template>
   <Alert
     title="Important"
-    icon="i-ph-warning-diamond-duotone"
+    icon="i-ph-warning-diamond"
     color="violet"
     class="_important"
     :class="$attrs.to ? 'dark:hover:!border-violet-600/50 hover:!border-violet-400/50' : ''"

components/content/LinkExample.vue

@@ -1,5 +1,5 @@
 <template>
-  <Callout icon="i-ph-app-window-duotone">
+  <Callout icon="i-ph-app-window">
     Read and edit a live example in
     <NuxtLink :to="to">
       {{ computedTitle }}

components/content/Note.vue

@@ -1,7 +1,7 @@
 <template>
   <Alert
     title="Note"
-    icon="i-ph-info-duotone"
+    icon="i-ph-info"
     color="blue"
     class="_note"
     :class="$attrs.to ? 'dark:hover:!border-blue-600/50 hover:!border-blue-400/50' : ''"

components/content/ReadMore.vue

@@ -33,7 +33,7 @@ const computedTitle = computed<string>(() => props.title || createBreadcrumb(pro
 </script>
 
 <template>
-  <Callout icon="i-ph-bookmark-simple-duotone" :to="to">
+  <Callout icon="i-ph-bookmark-simple" :to="to">
     <MDCSlot unwrap="p">
       Read more in <span class="font-bold" v-html="computedTitle" />.
     </MDCSlot>

components/content/Tip.vue

@@ -1,7 +1,7 @@
 <template>
   <Alert
     title="Tip"
-    icon="i-ph-lightbulb-duotone"
+    icon="i-ph-lightbulb"
     color="green"
     class="_tip"
     :class="$attrs.to ? 'dark:hover:!border-green-600/50 hover:!border-green-400/50' : ''"

components/content/Warning.vue

@@ -1,7 +1,7 @@
 <template>
   <Alert
     title="Warning"
-    icon="i-ph-warning-duotone"
+    icon="i-ph-warning"
     color="amber"
     class="_warning"
     :class="$attrs.to ? 'dark:hover:!border-amber-600/50 hover:!border-amber-400/50' : ''"

components/newsletter/NewsletterForm.vue

@@ -39,12 +39,12 @@ function onSubmit() {
 
 <template>
   <form @submit.prevent="onSubmit">
-    <UFormGroup name="email" :label="label" :description="description" size="xl" :ui="{ label: { base: 'font-semibold' }, container: 'mt-3' }">
+    <UFormGroup name="email" :label="label" size="lg" :description="description" :ui="{ label: { base: 'font-semibold' }, container: 'mt-3' }">
       <UInput
         v-model="email"
         type="email"
         placeholder="[email protected]"
-        :ui="{ icon: { trailing: { pointer: '' } } }"
+        :ui="{ icon: { trailing: { pointer: '', padding: { lg: 'px-1' } } } }"
         required
         autocomplete="off"
         class="max-w-sm"

composables/useModules.ts

@@ -1,23 +1,23 @@
 import type { Module, Filter } from '../types'
 
 const iconsMap = {
-  Analytics: 'i-ph-chart-bar-duotone',
-  CMS: 'i-ph-pencil-duotone',
-  CSS: 'i-ph-paint-brush-broad-duotone',
-  Database: 'i-ph-database-duotone',
-  Devtools: 'i-ph-wrench-duotone',
-  Ecommerce: 'i-ph-shopping-cart-duotone',
-  Extensions: 'i-ph-puzzle-piece-duotone',
-  Fonts: 'i-ph-text-aa-duotone',
-  Images: 'i-ph-image-duotone',
-  Libraries: 'i-ph-books-duotone',
-  Monitoring: 'i-ph-timer-duotone',
-  Payment: 'i-ph-credit-card-duotone',
-  Performance: 'i-ph-gauge-duotone',
-  Request: 'i-ph-plugs-connected-duotone',
-  Security: 'i-ph-shield-duotone',
-  SEO: 'i-ph-file-search-duotone',
-  UI: 'i-ph-layout-duotone'
+  Analytics: 'i-ph-chart-bar',
+  CMS: 'i-ph-pencil',
+  CSS: 'i-ph-paint-brush-broad',
+  Database: 'i-ph-database',
+  Devtools: 'i-ph-wrench',
+  Ecommerce: 'i-ph-shopping-cart',
+  Extensions: 'i-ph-puzzle-piece',
+  Fonts: 'i-ph-text-aa',
+  Images: 'i-ph-image',
+  Libraries: 'i-ph-books',
+  Monitoring: 'i-ph-timer',
+  Payment: 'i-ph-credit-card',
+  Performance: 'i-ph-gauge',
+  Request: 'i-ph-plugs-connected',
+  Security: 'i-ph-shield',
+  SEO: 'i-ph-file-search',
+  UI: 'i-ph-layout'
 }
 
 export const moduleImage = function (icon: string = '', size: number = 80) {
@@ -31,7 +31,7 @@ export const moduleImage = function (icon: string = '', size: number = 80) {
 }
 
 export const moduleIcon = function (category: string) {
-  return iconsMap[category as keyof typeof iconsMap] || 'i-ph-cube-duotone'
+  return iconsMap[category as keyof typeof iconsMap] || 'i-ph-cube'
 }
 
 export const useModules = () => {