@veristone/nuxt-v-app 0.1.1 → 0.2.1

package/app/components/V/A/Crud/Create.vue

@@ -0,0 +1,149 @@
+<script setup lang="ts">
+/**
+ * VACrudCreate - Veristone CRUD Create Modal
+ *
+ * Provides a reusable modal for creating new records via API.
+ * Handles form submission, loading states, and error handling.
+ *
+ * @example
+ * <VACrudCreate
+ *   endpoint="/api/loans"
+ *   friendly-name="Loan"
+ *   @created="onLoanCreated"
+ * >
+ *   <template #default="{ submit, loading, error }">
+ *     <form @submit.prevent="submit({ name: 'New Loan' })">
+ *       <UInput v-model="formData.name" placeholder="Loan name" />
+ *       <UButton type="submit" :loading="loading">Create</UButton>
+ *     </form>
+ *   </template>
+ * </VACrudCreate>
+ */
+
+interface Props {
+  endpoint: string;
+  friendlyName: string;
+  triggerLabel?: string;
+  triggerIcon?: string;
+  triggerColor?:
+    | "error"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning"
+    | "neutral";
+  triggerVariant?: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+  modalTitle?: string;
+  modalSize?: "sm" | "md" | "lg" | "xl";
+  initialData?: Record<string, any>;
+  open?: boolean;
+}
+
+interface Emits {
+  (e: "created", data: any): void;
+  (e: "error", error: any): void;
+  (e: "opened"): void;
+  (e: "closed"): void;
+  (e: "update:open", value: boolean): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  triggerLabel: undefined,
+  triggerIcon: "i-lucide-plus",
+  triggerColor: "primary",
+  triggerVariant: "solid",
+  modalTitle: undefined,
+  modalSize: "md",
+  initialData: () => ({}),
+  open: undefined,
+});
+
+const emit = defineEmits<Emits>();
+
+const { create, loading, errorState } = useVCrud(props.endpoint);
+const internalOpen = ref(false);
+
+// Hybrid internal/external state via computed getter/setter
+const isOpen = computed({
+  get: () => props.open ?? internalOpen.value,
+  set: (val) => {
+    emit("update:open", val);
+    internalOpen.value = val;
+  },
+});
+
+// Watch for open state changes to emit lifecycle events
+watch(isOpen, (val) => {
+  if (val) {
+    emit("opened");
+  } else {
+    emit("closed");
+  }
+});
+
+// Computed defaults for labels
+const computedTriggerLabel = computed(() => {
+  return props.triggerLabel ?? `Create ${props.friendlyName}`;
+});
+
+const computedModalTitle = computed(() => {
+  return props.modalTitle ?? `Create ${props.friendlyName}`;
+});
+
+// Submit handler
+const handleSubmit = async (data: Record<string, any>) => {
+  try {
+    const result = await create(data);
+    emit("created", result);
+    isOpen.value = false;
+  } catch (err) {
+    emit("error", err);
+  }
+};
+</script>
+
+<template>
+  <UModal v-model:open="isOpen">
+    <UButton
+      :label="computedTriggerLabel"
+      :icon="triggerIcon"
+      :color="triggerColor"
+      :variant="triggerVariant"
+    />
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ computedModalTitle }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="p-4 space-y-4">
+        <slot :submit="handleSubmit" :loading="loading" :error="errorState">
+          <div class="space-y-4">
+            <p class="text-gray-500 italic">
+              Provide form content via default slot
+            </p>
+          </div>
+        </slot>
+
+        <div
+          v-if="errorState"
+          class="p-3 rounded bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400 text-sm"
+        >
+          {{ errorState }}
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/V/A/Crud/Delete.vue

@@ -0,0 +1,147 @@
+<script setup lang="ts">
+/**
+ * VACrudDelete - Delete confirmation component with CRUD integration
+ *
+ * Provides a delete button with confirmation modal that integrates with useVCrud.
+ * Handles API deletion, loading states, and error handling.
+ *
+ * @example
+ * <VACrudDelete
+ *   endpoint="/api/users"
+ *   :record-id="userId"
+ *   item-name="User"
+ *   @deleted="onUserDeleted"
+ * />
+ */
+
+const props = withDefaults(
+  defineProps<{
+    endpoint: string;
+    recordId: string | number;
+    itemName?: string;
+    triggerLabel?: string;
+    triggerIcon?: string;
+    triggerColor?:
+      | "error"
+      | "primary"
+      | "secondary"
+      | "success"
+      | "info"
+      | "warning"
+      | "neutral";
+    triggerVariant?: "link" | "solid" | "outline" | "soft" | "subtle" | "ghost";
+    triggerSize?: "xs" | "sm" | "md" | "lg" | "xl";
+    confirmTitle?: string;
+    confirmMessage?: string;
+    open?: boolean;
+  }>(),
+  {
+    itemName: "this item",
+    triggerIcon: "i-lucide-trash-2",
+    triggerColor: "error",
+    triggerVariant: "solid",
+    triggerSize: "xs",
+    confirmTitle: "Delete Item",
+    open: undefined,
+  },
+);
+
+const emit = defineEmits<{
+  deleted: [id: string | number];
+  error: [error: any];
+  opened: [];
+  closed: [];
+  "update:open": [value: boolean];
+}>();
+
+const { remove, loading } = useVCrud(props.endpoint);
+
+const isOpen = computed({
+  get: () => props.open,
+  set: (val) => {
+    emit("update:open", val ?? false);
+    if (val) {
+      emit("opened");
+    } else {
+      emit("closed");
+    }
+  },
+});
+
+const confirmMessage = computed(() => {
+  return (
+    props.confirmMessage ||
+    `Are you sure you want to delete ${props.itemName}? This cannot be undone.`
+  );
+});
+
+const handleDelete = async () => {
+  try {
+    await remove(props.recordId);
+    emit("deleted", props.recordId);
+    isOpen.value = false;
+  } catch (error) {
+    emit("error", error);
+  }
+};
+</script>
+
+<template>
+  <UModal v-model:open="isOpen">
+    <UButton
+      :icon="triggerIcon"
+      :color="triggerColor as any"
+      :variant="triggerVariant as any"
+      :size="triggerSize as any"
+      :label="triggerLabel"
+    />
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ confirmTitle }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="p-4 space-y-4">
+        <div class="flex items-start gap-4">
+          <div
+            class="shrink-0 p-2 rounded-full bg-red-50 dark:bg-red-900/20 text-red-600 dark:text-red-400"
+          >
+            <UIcon name="i-lucide-alert-triangle" class="w-6 h-6" />
+          </div>
+          <div class="flex-1">
+            <p class="text-sm text-gray-500 dark:text-gray-400">
+              {{ confirmMessage }}
+            </p>
+          </div>
+        </div>
+
+        <div class="flex justify-end gap-3">
+          <UButton
+            label="Cancel"
+            color="neutral"
+            variant="ghost"
+            @click="isOpen = false"
+          />
+          <UButton
+            label="Delete"
+            color="error"
+            variant="solid"
+            :loading="loading"
+            @click="handleDelete"
+          />
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>

package/app/components/V/A/Crud/Update.vue

@@ -0,0 +1,171 @@
+<script setup lang="ts">
+/**
+ * VACrudUpdate - Veristone CRUD Update Modal
+ *
+ * Provides a reusable modal for editing records via API.
+ * Handles data fetching, form state management, and submission.
+ *
+ * @example
+ * ```vue
+ * <VACrudUpdate
+ *   endpoint="/api/users"
+ *   :record-id="userId"
+ *   friendly-name="User"
+ *   @updated="onUserUpdated"
+ * >
+ *   <template #default="{ submit, loading, error, data, isDirty }">
+ *     <form @submit.prevent="submit(data)">
+ *       <UFormGroup label="Name">
+ *         <UInput v-model="data.name" />
+ *       </UFormGroup>
+ *       <UButton type="submit" :loading="loading">Save</UButton>
+ *     </form>
+ *   </template>
+ * </VACrudUpdate>
+ * ```
+ */
+
+interface Props {
+  endpoint: string;
+  recordId: string | number;
+  friendlyName?: string;
+  triggerLabel?: string;
+  triggerIcon?: string;
+  triggerColor?:
+    | "neutral"
+    | "error"
+    | "primary"
+    | "secondary"
+    | "success"
+    | "info"
+    | "warning";
+  triggerVariant?: "ghost" | "link" | "solid" | "outline" | "soft" | "subtle";
+  modalTitle?: string;
+  modalSize?: "sm" | "md" | "lg" | "xl";
+  open?: boolean;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  friendlyName: "Record",
+  triggerLabel: "Edit",
+  triggerIcon: "i-lucide-pencil",
+  triggerColor: "neutral",
+  triggerVariant: "ghost",
+  modalSize: "md",
+  open: undefined,
+});
+
+const emit = defineEmits<{
+  updated: [data: any];
+  error: [error: any];
+  opened: [];
+  closed: [];
+  "update:open": [value: boolean];
+}>();
+
+// Composables
+const { findOne, update, loading, errorState, formData, isFormDirty } =
+  useVCrud(props.endpoint);
+
+// State
+const internalOpen = ref(false);
+const isFetching = ref(false);
+
+// Computed modal title
+const computedModalTitle = computed(() => {
+  return props.modalTitle || `Edit ${props.friendlyName}`;
+});
+
+// Hybrid open state (internal + external v-model)
+const isOpen = computed({
+  get: () => (props.open !== undefined ? props.open : internalOpen.value),
+  set: (val) => {
+    emit("update:open", val);
+    internalOpen.value = val;
+  },
+});
+
+// Watch for modal open to fetch data
+watch(isOpen, async (val) => {
+  if (val) {
+    emit("opened");
+    if (props.recordId) {
+      isFetching.value = true;
+      try {
+        await findOne(props.recordId);
+      } catch (e) {
+        // Error handled by composable
+      } finally {
+        isFetching.value = false;
+      }
+    }
+  } else {
+    emit("closed");
+  }
+});
+
+// Submit handler
+const submit = async (data: Record<string, any>) => {
+  try {
+    const result = await update(props.recordId, data);
+    emit("updated", result);
+    isOpen.value = false;
+  } catch (e) {
+    emit("error", e);
+  }
+};
+</script>
+
+<template>
+  <UModal v-model:open="isOpen">
+    <UButton
+      :label="triggerLabel"
+      :icon="triggerIcon"
+      :color="triggerColor"
+      :variant="triggerVariant"
+    />
+
+    <template #header>
+      <div class="flex items-center justify-between w-full">
+        <h3 class="text-base font-semibold text-gray-900 dark:text-white">
+          {{ computedModalTitle }}
+        </h3>
+        <UButton
+          icon="i-lucide-x"
+          color="neutral"
+          variant="ghost"
+          size="sm"
+          @click="isOpen = false"
+        />
+      </div>
+    </template>
+
+    <template #body>
+      <div class="p-4 space-y-4">
+        <div v-if="isFetching" class="space-y-4">
+          <USkeleton class="h-4 w-full" />
+          <USkeleton class="h-4 w-3/4" />
+          <USkeleton class="h-4 w-1/2" />
+        </div>
+
+        <div v-else>
+          <slot
+            :submit="submit"
+            :loading="loading"
+            :error="errorState"
+            :data="formData"
+            :isDirty="isFormDirty"
+            :isFetching="isFetching"
+          />
+        </div>
+
+        <div
+          v-if="errorState"
+          class="rounded bg-red-50 p-3 text-sm text-red-600 dark:bg-red-900/20 dark:text-red-400"
+        >
+          {{ errorState }}
+        </div>
+      </div>
+    </template>
+  </UModal>
+</template>