openprompt-lang 0.3.0 → 0.4.0

package/src/templates/langs/vue/INDEX.json

@@ -0,0 +1,246 @@
+{
+  "language": "vue",
+  "version": "1.0.0",
+  "updated": "2026-05-14",
+  "categories": {
+    "ui/button": {
+      "name": "Buttons",
+      "description": "Button components with variants and states"
+    },
+    "ui/modal": {
+      "name": "Modals",
+      "description": "Dialogs, confirmations, and popovers"
+    },
+    "ui/form": {
+      "name": "Forms",
+      "description": "Inputs, selects, and form utilities"
+    },
+    "ui/data-display": {
+      "name": "Data Display",
+      "description": "Tables, lists, cards, and data visualizers"
+    },
+    "auth": {
+      "name": "Authentication",
+      "description": "Auth composables, guards, and middleware"
+    },
+    "composable/general": {
+      "name": "General Composables",
+      "description": "Reusable Vue composables"
+    },
+    "composable/data": {
+      "name": "Data Composables",
+      "description": "Data fetching and state management composables"
+    },
+    "service/api": {
+      "name": "API Services",
+      "description": "HTTP clients and API abstractions"
+    }
+  },
+  "templates": [
+    {
+      "id": "button-shadcn-vue",
+      "name": "Button",
+      "description": "Versatile button with variants, loading state, and dark mode",
+      "category": "ui/button",
+      "purposes": ["primary-action", "confirmation", "danger", "navigation"],
+      "file": "templates/ui/Button.template.vue",
+      "testFile": null,
+      "variants": ["primary", "secondary", "danger", "ghost", "outline"],
+      "sizes": ["sm", "default", "lg", "icon"],
+      "darkMode": true,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["button", "action", "form", "shadcn-vue", "loading"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "input-shadcn-vue",
+      "name": "Input",
+      "description": "Form input with label, error state, helper text, and v-model",
+      "category": "ui/form",
+      "purposes": ["text-input", "search", "email", "password", "number"],
+      "file": "templates/ui/Input.template.vue",
+      "testFile": null,
+      "variants": ["default", "error", "flushed"],
+      "sizes": ["sm", "default", "lg"],
+      "darkMode": true,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["input", "form", "label", "error", "shadcn-vue"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "select-shadcn-vue",
+      "name": "Select",
+      "description": "Custom styled select dropdown with label, error state, and placeholder",
+      "category": "ui/form",
+      "purposes": ["dropdown", "option-picker", "multi-select"],
+      "file": "templates/ui/Select.template.vue",
+      "testFile": null,
+      "variants": ["default", "error", "multiple"],
+      "sizes": ["sm", "default", "lg"],
+      "darkMode": true,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["select", "dropdown", "form", "shadcn-vue"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "card-shadcn-vue",
+      "name": "Card",
+      "description": "Container card with title, subtitle, footer, and interactive variant",
+      "category": "ui/data-display",
+      "purposes": ["container", "summary", "feature-card", "dashboard-card"],
+      "file": "templates/ui/Card.template.vue",
+      "testFile": null,
+      "variants": ["default", "bordered", "elevated", "interactive"],
+      "sizes": ["sm", "default", "full"],
+      "darkMode": true,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["card", "container", "dashboard", "shadcn-vue"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "modal-dialog-vue",
+      "name": "Modal",
+      "description": "Accessible modal dialog with Teleport, focus trap, and escape-to-close",
+      "category": "ui/modal",
+      "purposes": ["confirm-action", "form-dialog", "alert", "fullscreen"],
+      "file": "templates/ui/Modal.template.vue",
+      "testFile": null,
+      "variants": ["dialog", "confirm-destructive", "fullscreen"],
+      "sizes": ["sm", "default", "lg", "xl", "fullscreen"],
+      "darkMode": true,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["modal", "dialog", "overlay", "teleport", "a11y"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "datatable-shadcn-vue",
+      "name": "DataTable",
+      "description": "Generic typed data table with sorting, loading skeleton, and empty state",
+      "category": "ui/data-display",
+      "purposes": ["data-table", "sortable-table", "paginated-list"],
+      "file": "templates/ui/DataTable.template.vue",
+      "testFile": null,
+      "variants": ["default", "compact", "striped", "sortable"],
+      "sizes": ["default", "compact"],
+      "darkMode": true,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["table", "data", "sortable", "shadcn-vue"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "composable-useFetch",
+      "name": "useFetch",
+      "description": "Typed data fetching composable with loading/error states",
+      "category": "composable/data",
+      "purposes": ["data-fetching", "api-calls", "loading-states"],
+      "file": "templates/composables/useFetch.template.ts",
+      "testFile": null,
+      "variants": [],
+      "sizes": [],
+      "darkMode": false,
+      "responsive": false,
+      "dependencies": ["vue"],
+      "tags": ["fetch", "composable", "data", "api", "loading"],
+      "hasTeachMe": false,
+      "fixHistory": []
+    },
+    {
+      "id": "composable-useAuth",
+      "name": "useAuth",
+      "description": "Authentication composable with Supabase and session management",
+      "category": "auth",
+      "purposes": ["login", "register", "session", "logout", "protected-routes"],
+      "file": "templates/composables/useAuth.template.ts",
+      "testFile": null,
+      "variants": [],
+      "sizes": [],
+      "darkMode": false,
+      "responsive": false,
+      "dependencies": ["@supabase/supabase-js", "vue"],
+      "tags": ["auth", "supabase", "session", "composable"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "composable-useDebounce",
+      "name": "useDebounce",
+      "description": "Debounce composable for input values, search delays, and resize throttling",
+      "category": "composable/general",
+      "purposes": ["input-debounce", "search-delay", "resize-throttle"],
+      "file": "templates/composables/useDebounce.template.ts",
+      "testFile": null,
+      "variants": ["default", "leading", "trailing"],
+      "sizes": [],
+      "darkMode": false,
+      "responsive": false,
+      "dependencies": [],
+      "tags": ["debounce", "composable", "search", "throttle"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "composable-usePagination",
+      "name": "usePagination",
+      "description": "Pagination composable with ellipsis logic, page buttons, and server-side support",
+      "category": "composable/general",
+      "purposes": ["paginated-list", "table-pagination", "infinite-scroll"],
+      "file": "templates/composables/usePagination.template.ts",
+      "testFile": null,
+      "variants": ["client-side", "server-side"],
+      "sizes": [],
+      "darkMode": false,
+      "responsive": true,
+      "dependencies": [],
+      "tags": ["pagination", "composable", "table", "navigation"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "composable-useForm",
+      "name": "useForm",
+      "description": "Lightweight form state manager with validation, async submit, and touched tracking",
+      "category": "ui/form",
+      "purposes": ["form-state", "validation", "async-submit"],
+      "file": "templates/composables/useForm.template.ts",
+      "testFile": null,
+      "variants": ["controlled", "uncontrolled"],
+      "sizes": [],
+      "darkMode": false,
+      "responsive": false,
+      "dependencies": [],
+      "tags": ["form", "validation", "composable", "state"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    },
+    {
+      "id": "service-api-vue",
+      "name": "ApiClient",
+      "description": "Generic REST API client with typed responses, auth, timeout, and error handling",
+      "category": "service/api",
+      "purposes": ["crud", "rest-api", "http-client", "data-fetching"],
+      "file": "templates/services/apiService.template.ts",
+      "testFile": null,
+      "variants": ["rest", "supabase"],
+      "sizes": [],
+      "darkMode": false,
+      "responsive": false,
+      "dependencies": [],
+      "tags": ["api", "rest", "http", "client", "service"],
+      "hasTeachMe": true,
+      "fixHistory": []
+    }
+  ],
+  "errorsLearned": []
+}

package/src/templates/langs/vue/MODULE.json

@@ -0,0 +1,105 @@
+{
+  "id": "vue",
+  "name": "Vue 3 + Nuxt",
+  "version": "1.0.0",
+  "tags": {
+    "kind": {
+      "component": {
+        "extends": "base",
+        "limit": 120,
+        "suggests": ["props"],
+        "description": "Vue SFC component"
+      },
+      "composable": {
+        "extends": "base",
+        "limit": 80,
+        "requires": ["contract"],
+        "description": "Vue composable function"
+      },
+      "page": {
+        "extends": "base",
+        "limit": 200,
+        "requires": ["compose"],
+        "description": "Nuxt page"
+      },
+      "server": {
+        "extends": "base",
+        "limit": 100,
+        "requires": ["contract"],
+        "description": "Nuxt server API route"
+      },
+      "store": {
+        "extends": "base",
+        "limit": 100,
+        "suggests": ["deps"],
+        "description": "Pinia store"
+      },
+      "middleware": { "extends": "base", "limit": 60, "description": "Nuxt route middleware" },
+      "util": {
+        "extends": "base",
+        "limit": 100,
+        "forbids": ["state"],
+        "description": "Utility function"
+      }
+    },
+    "platforms": ["web", "mobile"],
+    "forbidden": ["any", "vuex"]
+  },
+  "structure": {
+    "folders": [
+      "composables",
+      "components/ui",
+      "components/layout",
+      "pages",
+      "server/api",
+      "server/utils",
+      "stores",
+      "types",
+      "middleware",
+      "docs/COMMITS",
+      "docs/LOGS/ERRORES",
+      "docs/BACKLOG"
+    ],
+    "scaffolds": ["prompt-lang.json", "AGENTS.md", ".gitignore"],
+    "deps": {
+      "base": { "dev": ["nuxt", "vue", "typescript", "tailwindcss", "vitest"] },
+      "supabase": { "prod": ["@supabase/supabase-js"] },
+      "prisma": { "dev": ["prisma"], "prod": ["@prisma/client"] },
+      "ionic": {
+        "prod": ["@ionic/vue", "@ionic/vue-router", "@capacitor/core"],
+        "dev": ["@capacitor/cli"]
+      }
+    }
+  },
+  "projectTypes": {
+    "saas": {
+      "name": "SaaS / Dashboard",
+      "ui": true,
+      "description": "Multi-tenant SaaS with dashboard"
+    },
+    "web": { "name": "Corporate Website", "ui": true, "description": "Company site with CMS" },
+    "landing": { "name": "Landing Page", "ui": true, "description": "Single product page" },
+    "api": { "name": "API / Microservice", "ui": false, "description": "Nuxt server-only API" }
+  },
+  "uiStyles": ["shadcn-vue", "primevue", "vuetify", "none"],
+  "extensions": [
+    {
+      "name": "Supabase (auth + DB)",
+      "value": "supabase",
+      "deps": ["@supabase/supabase-js"],
+      "description": "Backend as a service"
+    },
+    {
+      "name": "Prisma ORM",
+      "value": "prisma",
+      "deps": ["prisma", "@prisma/client"],
+      "description": "Type-safe database ORM"
+    },
+    {
+      "name": "Pinia (state)",
+      "value": "pinia",
+      "deps": ["pinia"],
+      "description": "State management"
+    }
+  ]
+}

package/src/templates/langs/vue/templates/composables/useAuth.template.ts

@@ -0,0 +1,106 @@
+// @template
+// @id: composable-useAuth
+// @category: auth
+// @purpose: login, register, session, logout, protected-routes
+// @framework: vue
+// @style: none
+// @darkMode: false
+// @responsive: false
+// @deps: [vue, @supabase/supabase-js]
+// @states: [idle, loading, authenticated, unauthenticated, error]
+// @example: const { user, login, logout } = useAuth()
+// @teachMe
+//
+// @goodPractice: Use provide/inject for auth state across app
+// @goodPractice: Persist session in localStorage for refresh resilience
+// @goodPractice: Type user data for type-safe access throughout app
+// @badPractice: Don't store tokens in plain state — use httpOnly cookies or localStorage with guards
+
+import { ref, computed, type Ref } from "vue"
+import { createClient, type SupabaseClient, type User } from "@supabase/supabase-js"
+
+interface AuthState {
+  user: Ref<User | null>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  isAuthenticated: Ref<boolean>
+}
+
+const supabase: SupabaseClient = createClient(
+  import.meta.env.VITE_SUPABASE_URL || "",
+  import.meta.env.VITE_SUPABASE_ANON_KEY || ""
+)
+
+const user = ref<User | null>(null)
+const loading = ref(true)
+const error = ref<string | null>(null)
+
+export function useAuth(): AuthState & {
+  login: (email: string, password: string) => Promise<void>
+  register: (email: string, password: string) => Promise<void>
+  logout: () => Promise<void>
+  refreshSession: () => Promise<void>
+} {
+  async function refreshSession() {
+    loading.value = true
+    error.value = null
+    try {
+      const { data: { session } } = await supabase.auth.getSession()
+      user.value = session?.user ?? null
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Session error"
+      user.value = null
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function login(email: string, password: string) {
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: authError } = await supabase.auth.signInWithPassword({ email, password })
+      if (authError) throw authError
+      user.value = data.user
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Login failed"
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function register(email: string, password: string) {
+    loading.value = true
+    error.value = null
+    try {
+      const { data, error: authError } = await supabase.auth.signUp({ email, password })
+      if (authError) throw authError
+      user.value = data.user
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Registration failed"
+      throw e
+    } finally {
+      loading.value = false
+    }
+  }
+
+  async function logout() {
+    loading.value = true
+    try {
+      await supabase.auth.signOut()
+      user.value = null
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Logout failed"
+    } finally {
+      loading.value = false
+    }
+  }
+
+  const isAuthenticated = computed(() => user.value !== null)
+
+  // Initialize session
+  refreshSession()
+
+  return { user, loading, error, isAuthenticated, login, register, logout, refreshSession }
+}

package/src/templates/langs/vue/templates/composables/useDebounce.template.ts

@@ -0,0 +1,47 @@
+// @template
+// @id: composable-useDebounce
+// @category: composable/general
+// @purpose: input-debounce, search-delay, resize-throttle
+// @framework: vue
+// @style: none
+// @darkMode: false
+// @responsive: false
+// @deps: [vue]
+// @states: [active, idle]
+// @example: const debouncedValue = useDebounce(inputValue, 300)
+// @teachMe
+//
+// @goodPractice: Clean up timeout on unmount via onUnmounted
+// @goodPractice: Use computed.ref for seamless reactivity integration
+// @goodPractice: Allow leading/trailing invocation modes
+
+import { ref, watch, onUnmounted, type Ref } from "vue"
+
+export function useDebounce<T>(
+  value: Ref<T> | (() => T),
+  delay: number = 300
+): Ref<T> {
+  const debouncedValue = ref<T>(
+    typeof value === "function" ? value() : value.value
+  ) as Ref<T>
+  let timeoutId: ReturnType<typeof setTimeout> | null = null
+
+  const sourceValue = typeof value === "function" ? value : () => value.value
+
+  watch(
+    sourceValue,
+    (newVal) => {
+      if (timeoutId) clearTimeout(timeoutId)
+      timeoutId = setTimeout(() => {
+        debouncedValue.value = newVal as T
+      }, delay)
+    },
+    { immediate: false }
+  )
+
+  onUnmounted(() => {
+    if (timeoutId) clearTimeout(timeoutId)
+  })
+
+  return debouncedValue
+}

package/src/templates/langs/vue/templates/composables/useFetch.template.ts

@@ -0,0 +1,54 @@
+// @template
+// @id: composable-useFetch
+// @category: composable/data
+// @purpose: data-fetching, api-calls
+// @framework: vue
+// @style: none
+// @darkMode: false
+// @responsive: false
+// @deps: [vue]
+// @states: [idle, loading, success, error]
+// @example: const { data, loading, error } = await useFetch<User[]>('/api/users')
+//
+// @goodPractice: Use AbortController to cancel requests on unmount
+// @goodPractice: Provide type generics for return data
+
+import { ref, watchEffect, type Ref } from "vue"
+
+interface UseFetchResult<T> {
+  data: Ref<T | null>
+  loading: Ref<boolean>
+  error: Ref<string | null>
+  refresh: () => void
+}
+
+export function useFetch<T = unknown>(
+  url: string | Ref<string>,
+  options?: RequestInit
+): UseFetchResult<T> {
+  const data = ref<T | null>(null) as Ref<T | null>
+  const loading = ref(true)
+  const error = ref<string | null>(null)
+
+  const fetchData = async () => {
+    loading.value = true
+    error.value = null
+
+    try {
+      const resolvedUrl = typeof url === "string" ? url : url.value
+      const res = await fetch(resolvedUrl, options)
+      if (!res.ok) throw new Error(`HTTP ${res.status}`)
+      data.value = await res.json()
+    } catch (e) {
+      error.value = e instanceof Error ? e.message : "Unknown error"
+    } finally {
+      loading.value = false
+    }
+  }
+
+  watchEffect(() => {
+    fetchData()
+  })
+
+  return { data, loading, error, refresh: fetchData }
+}

package/src/templates/langs/vue/templates/composables/useForm.template.ts

@@ -0,0 +1,127 @@
+// @template
+// @id: composable-useForm
+// @category: ui/form
+// @purpose: form-state, validation, async-submit
+// @framework: vue
+// @style: none
+// @darkMode: false
+// @responsive: false
+// @deps: [vue]
+// @states: [idle, validating, submitting, error, success]
+// @example: const { values, errors, handleSubmit, isSubmitting } = useForm({ email: '' })
+// @teachMe
+//
+// @goodPractice: Track touched fields for selective error display
+// @goodPractice: Support async validation for server-side checks
+// @goodPractice: Use TypeScript generics for type-safe form values
+// @badPractice: Don't validate on every keystroke for large forms — debounce first
+
+import { ref, reactive, computed, type Ref, type UnwrapRef } from "vue"
+
+type ValidationRule<T> = {
+  key: keyof T
+  validate: (value: T[keyof T], values: T) => string | null
+  async?: (value: T[keyof T], values: T) => Promise<string | null>
+  debounce?: number
+}
+
+interface UseFormOptions<T extends Record<string, unknown>> {
+  initialValues: T
+  rules?: ValidationRule<T>[]
+  onSubmit?: (values: T) => Promise<void> | void
+}
+
+export function useForm<T extends Record<string, unknown>>(options: UseFormOptions<T>) {
+  const { initialValues, rules = [], onSubmit } = options
+
+  const values = reactive<T>({ ...initialValues }) as UnwrapRef<T>
+  const errors = ref<Partial<Record<keyof T, string>>>({})
+  const touched = ref<Set<keyof T>>(new Set())
+  const isSubmitting = ref(false)
+  const isDirty = ref(false)
+  const submitCount = ref(0)
+
+  const isValid = computed(() => Object.keys(errors.value).length === 0)
+
+  function validateField(key: keyof T) {
+    const fieldRules = rules.filter((r) => r.key === key)
+    for (const rule of fieldRules) {
+      const error = rule.validate(values[key], values)
+      if (error) {
+        errors.value[key] = error
+        return
+      }
+    }
+    delete errors.value[key]
+  }
+
+  function validateAll(): boolean {
+    const newErrors: Partial<Record<keyof T, string>> = {}
+    for (const rule of rules) {
+      const error = rule.validate(values[rule.key], values)
+      if (error) newErrors[rule.key] = error
+    }
+    errors.value = newErrors as Partial<Record<keyof T, string>>
+    return Object.keys(newErrors).length === 0
+  }
+
+  function setFieldValue(key: keyof T, value: T[keyof T]) {
+    values[key] = value
+    isDirty.value = true
+    if (touched.value.has(key)) {
+      validateField(key)
+    }
+  }
+
+  function setFieldTouched(key: keyof T) {
+    touched.value.add(key)
+    validateField(key)
+  }
+
+  async function handleSubmit() {
+    submitCount.value++
+    isSubmitting.value = true
+    touched.value = new Set(Object.keys(values)) as Set<keyof T>
+
+    const valid = validateAll()
+    if (!valid) {
+      isSubmitting.value = false
+      return false
+    }
+
+    try {
+      if (onSubmit) await onSubmit(values)
+      return true
+    } catch (e) {
+      const message = e instanceof Error ? e.message : "Submission failed"
+      errors.value.submit = message as any
+      return false
+    } finally {
+      isSubmitting.value = false
+    }
+  }
+
+  function resetForm() {
+    Object.assign(values, { ...initialValues })
+    errors.value = {} as Partial<Record<keyof T, string>>
+    touched.value = new Set()
+    isDirty.value = false
+    isSubmitting.value = false
+  }
+
+  return {
+    values,
+    errors,
+    touched,
+    isSubmitting,
+    isDirty,
+    isValid,
+    submitCount,
+    setFieldValue,
+    setFieldTouched,
+    validateField,
+    validateAll,
+    handleSubmit,
+    resetForm,
+  }
+}