@edgedev/create-edge-site 1.0.6 → 1.0.7

package/components/Input.vue

@@ -1,6 +1,4 @@
 <script>
-import { MaskInput } from 'vue-3-mask'
-
 export default {
   inheritAttrs: false,
 }
@@ -28,10 +26,10 @@ defineOptions({ inheritAttrs: false })
 
 <template>
   <Field v-slot="{ field }" :name="props.name">
-    <MaskInput
+    <i-mask-input
       v-if="props.type === 'phone'"
-      mask="(###) ###-####"
-      type="props.type"
+      v-model:unmasked="model"
+      mask="(000) 000-0000"
       v-bind="{ ...field, ...$attrs }"
     />
     <input

package/components/edgeFormFling.vue

@@ -14,6 +14,11 @@ const props = defineProps({
     type: String,
     required: false,
   },
+  turnstileTheme: {
+    type: String,
+    required: false,
+    default: 'light',
+  },
   successMessage: {
     type: String,
     required: false,
@@ -116,6 +121,7 @@ const onSubmit = async (values, { resetForm }) => {
       v-if="props.turnstileSiteSecret"
       v-model="state.turnstileToken"
       :site-key="props.turnstileSiteSecret"
+      :theme="props.turnstileTheme"
     />
     <div v-if="state.submitResponse.sent" :class="state.submitResponse.success ? props.successClass : props.errorClass">
       {{ state.submitResponse.message }}

package/directives/scrollReveal.ts

@@ -0,0 +1,38 @@
+// directives/scrollReveal.ts
+import type { DirectiveBinding, ObjectDirective } from 'vue'
+
+const scrollReveal: ObjectDirective = {
+  mounted(el: HTMLElement, binding: DirectiveBinding) {
+    const delay = binding.value?.delay || 0
+
+    el.classList.add(
+      'opacity-0',
+      'translate-y-8',
+      'transition-all',
+      'duration-700',
+      'ease-out'
+    )
+
+    const observer = new IntersectionObserver(
+      ([entry]) => {
+        if (entry.isIntersecting) {
+          setTimeout(() => {
+            el.classList.remove('opacity-0', 'translate-y-8')
+            el.classList.add('opacity-100', 'translate-y-0')
+          }, delay)
+          observer.unobserve(el)
+        }
+      },
+      { threshold: 0.2 }
+    )
+
+    observer.observe(el)
+  },
+
+  // SSR shim to prevent Nuxt crash
+  getSSRProps() {
+    return {}
+  }
+}
+
+export default scrollReveal

package/nuxt.config.ts

@@ -1,7 +1,9 @@
 import { defineNuxtConfig } from 'nuxt/config'
 
 export default defineNuxtConfig({
-  ssr: false,
+  nitro: {
+    preset: 'static',
+  },
   compatibilityDate: '2024-11-01',
   app: {
     head: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edgedev/create-edge-site",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Create Edge Starter Site",
   "bin": {
     "create-edge-site": "./bin/cli.js"
@@ -24,7 +24,7 @@
     "scrollreveal": "^4.0.9",
     "swiper": "^11.2.6",
     "vue": "^3.5.13",
-    "vue-3-mask": "0.0.1-alpha",
+    "vue-imask": "^7.6.1",
     "vue-router": "^4.5.0",
     "vue-turnstile": "^1.0.11",
     "zod": "^3.24.2"

package/plugins/scrollReveal.ts

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app'
+import scrollReveal from '~/directives/scrollReveal'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.directive('scroll-reveal', scrollReveal)
+})

package/plugins/vue-imask.js

@@ -0,0 +1,6 @@
+import { defineNuxtPlugin } from '#app'
+import { IMaskComponent } from 'vue-imask'
+
+export default defineNuxtPlugin((nuxtApp) => {
+  nuxtApp.vueApp.component('IMaskInput', IMaskComponent)
+})