Google Fonts (#525)

* Google Fonts

* Google fonts improvement

* font button color

* Refine font selection UI and update font fetching logic

- Update FontsController to fetch Google fonts sorted by popularity.
- Enhance FontCard component with additional skeleton loaders for better UX during font loading.
- Adjust check icon positioning in FontCard to be absolute for consistent UI.
- Remove unnecessary class in GoogleFontPicker's text input.
- Add border and rounded styling to the font list container in GoogleFontPicker.
- Simplify computed property for enrichedFonts in GoogleFontPicker.
- Implement inline font style preview in FormCustomization component.

---------

Co-authored-by: Frank <csskfaves@gmail.com>
Co-authored-by: Julien Nahum <julien@nahum.net>

client/components/open/editors/FontCard.vue

@@ -0,0 +1,68 @@
+<template>
+  <div
+    class="flex flex-col p-3 rounded-md shadow border-gray-200 border-[0.5px] justify-between w-full cursor-pointer hover:ring ring-blue-300 relative"
+    :class="{'ring': isSelected }"
+    @click="$emit('select-font')"
+  >
+    <template v-if="isVisible">
+      <link
+        :href="getFontUrl"
+        rel="stylesheet"
+      >
+      <div
+        class="text-lg mb-3 font-normal"
+        :style="{ 'font-family': `${fontName} !important` }"
+      >
+        The quick brown fox jumped over the lazy dog
+      </div>
+    </template>
+    <div
+      v-else
+      class="flex flex-wrap gap-2 mb-3"
+    >
+      <USkeleton
+        class="h-5 w-full"
+      />
+      <USkeleton
+        class="h-5 w-3/4"
+      />
+    </div>
+
+    <div class="text-gray-400 flex justify-between">
+      <p class="text-xs">
+        {{ fontName }}
+      </p>
+    </div>
+    <Icon
+      v-if="isSelected"
+      name="heroicons:check-circle-16-solid"
+      class="w-5 h-5 text-nt-blue absolute bottom-4 right-4"
+    />
+  </div>
+</template>
+
+<script setup>
+import { defineEmits } from "vue"
+
+const props = defineProps({
+  fontName: {
+    type: String,
+    required: true
+  },
+  isSelected: {
+    type: Boolean,
+    default: false
+  },
+  isVisible: {
+    type: Boolean,
+    default: false
+  }
+})
+
+const emit = defineEmits(['select-font'])
+
+const getFontUrl = computed(() => {
+  const family = props.fontName.replace(/ /g, '+')
+  return `https://fonts.googleapis.com/css?family=${family}:wght@400&display=swap`
+})
+</script>

client/components/open/editors/GoogleFontPicker.vue

@@ -0,0 +1,141 @@
+<template>
+  <modal
+    :show="show"
+    :compact-header="true"
+    @close="$emit('close')"
+  >
+    <template #icon>
+      <Icon
+        name="ci:font"
+        class="w-10 h-10 text-blue"
+      />
+    </template>
+    <template #title>
+      Google fonts
+    </template>
+    
+    <div v-if="loading">
+      <Loader class="h-6 w-6 text-nt-blue mx-auto" />
+    </div>
+    <div v-else>
+      <text-input
+        v-model="search"
+      
+        name="search"
+        placeholder="Search fonts"
+      />
+
+      <div
+        ref="scrollContainer"
+        class="grid grid-cols-3 gap-2 p-5 mb-5 overflow-y-scroll max-h-[24rem] border rounded-md"
+      >
+        <FontCard
+          v-for="(fontName, index) in enrichedFonts"
+          :key="fontName"
+          :ref="el => setFontRef(el, index)"
+          :font-name="fontName"
+          :is-visible="visible[index]"
+          :is-selected="selectedFont === fontName"
+          @select-font="selectedFont = fontName"
+        />
+      </div>
+
+      <div class="flex">
+        <UButton
+          size="md"
+          color="white"
+          class="mr-2"
+          @click="$emit('apply', null)"
+        >
+          Reset
+        </UButton>
+        <UButton
+          size="md"
+          :disabled="!selectedFont"
+          block
+          class="flex-1"
+          @click="$emit('apply', selectedFont)"
+        >
+          Apply
+        </UButton>
+      </div>
+    </div>
+  </modal>
+</template>
+
+<script setup>
+import { defineEmits } from "vue"
+import Fuse from "fuse.js"
+import { refDebounced, useElementVisibility } from "@vueuse/core"
+import FontCard from './FontCard.vue'
+
+const props = defineProps({
+  show: {
+    type: Boolean,
+    default: false,
+  },
+  font: {
+    type: String,
+    default: null,
+  },
+})
+
+const emit = defineEmits(['close','apply'])
+const loading = ref(false)
+const fonts = ref([])
+const selectedFont = ref(props.font || null)
+const search = ref("")
+const debouncedSearch = refDebounced(search, 500)
+const scrollContainer = ref(null)
+const fontRefs = new Map()
+const visible = ref([])
+
+const setFontRef = (el, index) => {
+  if (el) fontRefs.set(index, el)
+}
+
+const initializeVisibilityTracking = async () => {
+  await nextTick() // Ensure DOM has been fully updated
+  fontRefs.forEach((el, index) => {
+    const visibility = useElementVisibility(el, {
+      root: scrollContainer.value,
+      threshold: 0.1
+    })
+    watch(
+      () => visibility.value,
+      (isVisible) => {
+        if (isVisible) {
+          visible.value[index] = true
+        }
+      },
+      { immediate: true }
+    )
+  })
+}
+
+const fetchFonts = async () => {
+  if (props.show) {
+    selectedFont.value = props.font || null
+    loading.value = true
+    opnFetch('/fonts/').then((data) => {
+      fonts.value = data || []
+      loading.value = false
+      initializeVisibilityTracking()
+    })
+  }
+}
+watch(() => props.show, fetchFonts)
+
+
+const enrichedFonts = computed(() => {
+  if (search.value === "" || search.value === null) {
+    return fonts.value
+  }
+
+  // Fuze search
+  const fuse = new Fuse(Object.values(fonts.value))
+  return fuse.search(debouncedSearch.value).map((res) => {
+    return res.item
+  })
+})
+</script>

client/components/open/forms/OpenCompleteForm.vue

@@ -2,7 +2,14 @@
   <div
     v-if="form"
     class="open-complete-form"
+    :style="{ '--font-family': form.font_family }"
   >
+    <link
+      v-if="adminPreview && form.font_family"
+      rel="stylesheet"
+      :href="getFontUrl"
+    >
+    
     <h1
       v-if="!isHideTitle"
       class="mb-4 px-2"
@@ -249,6 +256,11 @@ export default {
     },
     isHideTitle () {
       return this.form.hide_title || (import.meta.client && window.location.href.includes('hide_title=true'))
+    },
+    getFontUrl() {
+      if(!this.form || !this.form.font_family) return null
+      const family = this.form?.font_family.replace(/ /g, '+')
+      return `https://fonts.googleapis.com/css?family=${family}:wght@400,500,700,800,900&display=swap`
     }
   },
 
@@ -330,6 +342,9 @@ export default {
 
 <style lang="scss">
 .open-complete-form {
+  * {
+    font-family: var(--font-family) !important;
+  }
   .form-description, .nf-text {
     ol {
       @apply list-decimal list-inside;

client/components/open/forms/components/form-components/FormCustomization.vue

@@ -53,6 +53,24 @@
       label="Form Theme"
     />
 
+    <label class="text-gray-700 font-medium text-sm">Font Style</label>
+    <v-button
+      color="white"
+      class="w-full mb-4"
+      size="small"
+      @click="showGoogleFontPicker = true"
+    >
+      <span :style="{ 'font-family': (form.font_family?form.font_family+' !important':null) }">
+        {{ form.font_family || 'Default' }}
+      </span>
+    </v-button>
+    <GoogleFontPicker
+      :show="showGoogleFontPicker"
+      :font="form.font_family || null"
+      @close="showGoogleFontPicker=false"
+      @apply="onApplyFont"
+    />
+
     <div class="flex space-x-4 justify-stretch">
       <select-input
         name="size"
@@ -173,12 +191,14 @@
 <script setup>
 import { useWorkingFormStore } from "../../../../../stores/working_form"
 import EditorOptionsPanel from "../../../editors/EditorOptionsPanel.vue"
+import GoogleFontPicker from "../../../editors/GoogleFontPicker.vue"
 import ProTag from "~/components/global/ProTag.vue"
 
 const workingFormStore = useWorkingFormStore()
 const form = storeToRefs(workingFormStore).content
 const isMounted = ref(false)
 const confetti = useConfetti()
+const showGoogleFontPicker = ref(false)
 
 onMounted(() => {
   isMounted.value = true
@@ -190,4 +210,9 @@ const onChangeConfettiOnSubmission = (val) => {
     confetti.play()
   }
 }
+
+const onApplyFont = (val) => {
+  form.value.font_family = val
+  showGoogleFontPicker.value = false
+}
 </script>

client/composables/forms/initForm.js

@@ -9,6 +9,7 @@ export const initForm = (defaultValue = {}, withDefaultProperties = false) => {
     properties: withDefaultProperties ? getDefaultProperties() : [],
 
     // Customization
+    font_family: null,
     theme: "default",
     width: "centered",
     dark_mode: "auto",

client/pages/forms/[slug]/index.vue

@@ -178,6 +178,39 @@ const pageMeta = computed(() => {
   }
   return {}
 })
+
+const getFontUrl = computed(() => {
+  if(!form.value || !form.value.font_family) return null
+  const family = form.value.font_family.replace(/ /g, '+')
+  return `https://fonts.googleapis.com/css?family=${family}:wght@400,500,700,800,900&display=swap`
+})
+
+const headLinks = computed(() => {
+  const links = []
+  if (form.value && form.value.font_family) {
+    links.push({
+        rel: 'stylesheet',
+        href: getFontUrl.value
+    })
+  }
+  if (pageMeta.value.page_favicon) {
+    links.push({
+        rel: 'icon', type: 'image/x-icon',
+        href: pageMeta.value.page_favicon
+    })
+    links.push({
+        rel: 'apple-touch-icon',
+        type: 'image/png',
+        href: pageMeta.value.page_favicon
+    })
+    links.push({
+      rel: 'shortcut icon',
+      href: pageMeta.value.page_favicon
+    })
+  }
+  return links
+})
+    
 useOpnSeoMeta({
   title: () => {
     if (pageMeta.value.page_title) {
@@ -209,21 +242,7 @@ useHead({
     }
     return titleChunk ? `${titleChunk} - OpnForm` : 'OpnForm'
   },
-  link: pageMeta.value.page_favicon ? [
-    {
-      rel: 'icon', type: 'image/x-icon',
-      href: pageMeta.value.page_favicon
-    },
-    {
-      rel: 'apple-touch-icon',
-      type: 'image/png',
-      href: pageMeta.value.page_favicon
-    },
-    {
-      rel: 'shortcut icon',
-      href: pageMeta.value.page_favicon
-    }
-  ] : {},
+  link: headLinks.value,
   meta: pageMeta.value.page_favicon ? [
     {
       name: 'apple-mobile-web-app-capable',