@dasidev/dasi-ui 1.0.0

package/src/components/dialog/InfoDialog.vue

@@ -0,0 +1,74 @@
+<script setup lang="ts">
+import { AlertDialog, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogTitle } from "@/components/ui/alert-dialog";
+import { ref, watch } from "vue";
+import { cn } from "@/lib/utils";
+import { AlertDialogOverlay } from "radix-vue";
+
+export interface InfoDialogOptions {
+  title: string;
+  description: string;
+  actionLabel?: string;
+  actionIcon?: string;
+  contentClass?: string;
+}
+
+const props = defineProps(["class", "classOverlay"]);
+
+const title = ref("");
+const description = ref("");
+const actionLabel = ref("");
+const next = ref<Function | null>(null);
+const dialogOpen = defineModel("open", { default: false });
+const emits = defineEmits(["close"]);
+const actionIcon = ref();
+const contentClass = ref("");
+
+const open = (options: InfoDialogOptions, n: Function | null) => {
+  title.value = options.title;
+  description.value = options.description;
+  actionLabel.value = options.actionLabel || "Tutup";
+  actionIcon.value = options.actionIcon || null;
+  contentClass.value = options.contentClass || "";
+  next.value = n;
+  dialogOpen.value = true;
+};
+
+function close(b: boolean) {
+  dialogOpen.value = false;
+}
+
+watch(dialogOpen, after => {
+  if (!after) {
+    if (next.value) next.value(false);
+    emits("close");
+  }
+});
+
+defineExpose({ open, close });
+</script>
+
+<template>
+  <AlertDialog v-model:open="dialogOpen">
+    <AlertDialogOverlay />
+    <AlertDialogContent :class="cn('w-96', props.class || contentClass)">
+      <AlertDialogHeader>
+        <AlertDialogTitle>
+          <slot name="title">{{ title }}</slot>
+        </AlertDialogTitle>
+        <AlertDialogDescription>
+          <slot name="description">
+            <div v-html="description"></div>
+          </slot>
+        </AlertDialogDescription>
+      </AlertDialogHeader>
+      <slot name="content"></slot>
+      <AlertDialogFooter class="pt-4">
+        <AlertDialogCancel class="border-none text-primary_main shadow-none transition hover:bg-blue-100 hover:text-blue-500">
+          <slot name="actionLabel">
+            {{ actionLabel }}
+          </slot>
+        </AlertDialogCancel>
+      </AlertDialogFooter>
+    </AlertDialogContent>
+  </AlertDialog>
+</template>

package/src/components/dialog/SuccessDialog.vue

@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { defineModel } from 'vue'
+import {
+  Dialog,
+  DialogContent,
+} from '@/components/ui/dialog'
+import BtnSecondary from '@/components/button/BtnSecondary.vue';
+import DialogClose from '@/components/ui/dialog/DialogClose.vue';
+import { DialogOverlay } from 'radix-vue';
+
+const model = defineModel<boolean | undefined>('open');
+const emits = defineEmits(['close']);
+
+function openUpdated(b: boolean) {
+  if (!b) emits('close')
+}
+</script>
+
+<template>
+  <Dialog v-model:open="model" v-on:update:open="openUpdated">
+    <DialogContent class="rounded-lg w-[calc(100%-20px)] max-w-96 py-8 pb-6 z-[999]">
+      <template #overlay>
+        <DialogOverlay class="fixed inset-0 z-[997] bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"/>
+      </template>
+      <div class="-my-6">
+        <video autoplay muted playsinline class="max-w-full max-h-full h-44 mx-auto">
+          <source src="@/assets/success_animation.webm" type="video/webm">
+          <source src="@/assets/success_animation.mp4" type="video/mp4">
+          <img src="@/assets/success_animation.gif">
+        </video>
+      </div>
+      <div>
+        <slot>
+          <h1 class="text-xl font-semibold text-center m-0">
+            <slot name="title">Sukses</slot>
+          </h1>
+          <p class="text-center text-gray-500 text-sm m-0">
+            <slot name="description">Data Anda sudah sukses tersimpan</slot>
+          </p>
+        </slot>
+        <div class="text-center pt-3">
+          <DialogClose as-child>
+            <BtnSecondary>
+              <slot name="close-label">Tutup</slot>
+            </BtnSecondary>
+          </DialogClose>
+        </div>
+      </div>
+    </DialogContent>
+  </Dialog>
+</template>

package/src/components/examples/TestSchemaExample.vue

@@ -0,0 +1,288 @@
+<template>
+  <div class="min-h-screen bg-gray-50 p-6 dark:bg-dark_bg">
+    <div class="mx-auto max-w-6xl">
+      <!-- Header -->
+      <div class="mb-8">
+        <h1 class="mb-2 text-3xl font-bold text-gray-900 dark:text-white">Test Schema Examples</h1>
+        <p class="text-gray-600 dark:text-gray-400">Comprehensive examples of all three selector elements: SelectorElement, DateSelectorElement, and ConfigDataSelectorElement</p>
+      </div>
+
+      <!-- Configuration Status -->
+      <div class="mb-6 rounded-lg bg-blue-50 p-4 dark:bg-blue-900/20">
+        <div class="flex items-center">
+          <div class="flex-shrink-0">
+            <svg class="h-5 w-5 text-blue-400" viewBox="0 0 20 20" fill="currentColor">
+              <path fill-rule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clip-rule="evenodd" />
+            </svg>
+          </div>
+          <div class="ml-3">
+            <h3 class="text-sm font-medium text-blue-800 dark:text-blue-200">Configuration Status</h3>
+            <div class="mt-2 text-sm text-blue-700 dark:text-blue-300">
+              <p>
+                Current Configuration: <strong>{{ currentConfig }}</strong>
+              </p>
+              <p>
+                API Base URL: <code class="rounded bg-blue-100 px-1 dark:bg-blue-800">{{ apiBaseUrl }}</code>
+              </p>
+              <p>
+                Token Key: <code class="rounded bg-blue-100 px-1 dark:bg-blue-800">{{ tokenKey }}</code>
+              </p>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Form Container -->
+      <div class="rounded-lg bg-white p-6 shadow-lg dark:bg-dark_bg2">
+        <Vueform
+          :schema="testSchema.schema as any"
+          :endpoint="handleSubmit"
+          submit-button="Test All Selectors"
+          submit-button-class="w-full bg-blue-600 hover:bg-blue-700 text-white font-medium py-3 px-4 rounded-md transition-colors" />
+      </div>
+
+      <!-- Results Display -->
+      <div v-if="formData" class="mt-8 rounded-lg bg-white p-6 shadow-lg dark:bg-dark_bg2">
+        <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Form Results</h2>
+        <div class="rounded-md bg-gray-50 p-4 dark:bg-gray-800">
+          <pre class="overflow-x-auto text-sm text-gray-700 dark:text-gray-300">{{ JSON.stringify(formData, null, 2) }}</pre>
+        </div>
+      </div>
+
+      <!-- Documentation -->
+      <div class="mt-8 rounded-lg bg-white p-6 shadow-lg dark:bg-dark_bg2">
+        <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Documentation</h2>
+
+        <div class="space-y-6">
+          <!-- Selector Element -->
+          <div>
+            <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">SelectorElement Features</h3>
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div class="space-y-2">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300">Basic Features:</h4>
+                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <li>• Single & Multiple Selection</li>
+                  <li>• Avatar Display</li>
+                  <li>• Custom Field Functions</li>
+                  <li>• Parameters & Conditions</li>
+                  <li>• Auto Fill Organization</li>
+                  <li>• Return Object Mode</li>
+                </ul>
+              </div>
+              <div class="space-y-2">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300">Advanced Features:</h4>
+                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <li>• Order By & Sort</li>
+                  <li>• Search Columns</li>
+                  <li>• Disable Auto Load</li>
+                  <li>• Custom Placeholders</li>
+                  <li>• Validation Rules</li>
+                  <li>• Table Display</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Date Selector Element -->
+          <div>
+            <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">DateSelectorElement Features</h3>
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div class="space-y-2">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300">Picker Types:</h4>
+                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <li>• Date Picker</li>
+                  <li>• Date Time Picker</li>
+                  <li>• Month Picker</li>
+                  <li>• Year Picker</li>
+                </ul>
+              </div>
+              <div class="space-y-2">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300">Range & Constraints:</h4>
+                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <li>• Date Range Selection</li>
+                  <li>• Min/Max Date Constraints</li>
+                  <li>• Custom Year Range</li>
+                  <li>• Custom Display Format</li>
+                  <li>• Locale Support</li>
+                  <li>• Auto Apply</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+
+          <!-- Config Data Selector Element -->
+          <div>
+            <h3 class="mb-3 text-lg font-medium text-gray-900 dark:text-white">ConfigDataSelectorElement Features</h3>
+            <div class="grid grid-cols-1 gap-4 md:grid-cols-2">
+              <div class="space-y-2">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300">Basic Features:</h4>
+                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <li>• Parent Code Configuration</li>
+                  <li>• Custom Field Mapping</li>
+                  <li>• Dynamic Data Loading</li>
+                  <li>• Caching Support</li>
+                </ul>
+              </div>
+              <div class="space-y-2">
+                <h4 class="font-medium text-gray-700 dark:text-gray-300">Use Cases:</h4>
+                <ul class="space-y-1 text-sm text-gray-600 dark:text-gray-400">
+                  <li>• Countries & Regions</li>
+                  <li>• Categories & Types</li>
+                  <li>• Status & States</li>
+                  <li>• Business Units</li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      <!-- Code Examples -->
+      <div class="mt-8 rounded-lg bg-white p-6 shadow-lg dark:bg-dark_bg2">
+        <h2 class="mb-4 text-xl font-semibold text-gray-900 dark:text-white">Code Examples</h2>
+
+        <div class="space-y-6">
+          <!-- Selector Example -->
+          <div>
+            <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">SelectorElement Example</h3>
+            <div class="rounded-md bg-gray-50 p-4 dark:bg-gray-800">
+              <pre class="overflow-x-auto text-sm text-gray-700 dark:text-gray-300"><code>{
+  type: "selector",
+  endpoint: "/users",
+  label: "Select User",
+  placeholder: "Pilih user...",
+  nameField: "name",
+  descriptionField: "email",
+  showAvatar: true,
+  multiple: true,
+  params: { status: "active" },
+  condition: { levels: "user" },
+  orderBy: "name",
+  sort: "asc",
+  rules: ["required"]
+}</code></pre>
+            </div>
+          </div>
+
+          <!-- Date Selector Example -->
+          <div>
+            <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">DateSelectorElement Example</h3>
+            <div class="rounded-md bg-gray-50 p-4 dark:bg-gray-800">
+              <pre class="overflow-x-auto text-sm text-gray-700 dark:text-gray-300"><code>{
+  type: "date_selector",
+  label: "Select Date Range",
+  placeholder: "Pilih rentang tanggal...",
+  pickerType: "date",
+  range: true,
+  minDate: new Date("2024-01-01"),
+  maxDate: new Date("2024-12-31"),
+  displayFormat: "DD/MM/YYYY",
+  rules: ["required"]
+}</code></pre>
+            </div>
+          </div>
+
+          <!-- Config Data Selector Example -->
+          <div>
+            <h3 class="mb-2 text-lg font-medium text-gray-900 dark:text-white">ConfigDataSelectorElement Example</h3>
+            <div class="rounded-md bg-gray-50 p-4 dark:bg-gray-800">
+              <pre class="overflow-x-auto text-sm text-gray-700 dark:text-gray-300"><code>{
+  type: "config_data_selector",
+  parentCode: "app//cd/countries",
+  label: "Select Country",
+  placeholder: "Pilih negara...",
+  field: "name",
+  rules: ["required"]
+}</code></pre>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, computed } from "vue";
+import { useAppConfig } from "@/composables/useAppConfig";
+import testSchema from "@/vueform/schemas/test-schema";
+
+// Configuration
+const { appName, apiBaseUrl, tokenKey, isConfigLoaded } = useAppConfig();
+
+// Form data
+const formData = ref(null);
+
+// Computed properties
+const currentConfig = computed(() => {
+  // If config is loaded, show app name, otherwise show loading
+  // Since myAppConfig is now the default, config should always be available
+  return isConfigLoaded.value ? appName.value : (appName.value || "Loading...");
+});
+
+// Form submission handler
+const handleSubmit = async (data: any, form$: any) => {
+  console.log("Form submitted with data:", data);
+
+  // Store form data for display
+  formData.value = data;
+
+  // Simulate API call
+  try {
+    // Here you would typically send the data to your API
+    console.log("Sending data to API...", data);
+
+    // Simulate success
+    form$.setMessage("Form submitted successfully!", "success");
+
+    // You could also redirect or show a success message
+    // router.push('/success')
+  } catch (error) {
+    console.error("Form submission error:", error);
+    form$.setMessage("Error submitting form. Please try again.", "error");
+  }
+};
+</script>
+
+<style scoped>
+/* Custom styles for the example page */
+.vueform-divider {
+  @apply my-6 border-t border-gray-200 dark:border-gray-700;
+}
+
+.vueform-divider span {
+  @apply bg-white px-4 py-2 text-sm font-medium text-gray-500 dark:bg-dark_bg2 dark:text-gray-400;
+}
+
+/* Ensure proper spacing for form elements */
+:deep(.vueform-element) {
+  @apply mb-4;
+}
+
+/* Style the form container */
+:deep(.vueform) {
+  @apply space-y-6;
+}
+
+/* Style form buttons */
+:deep(.vueform-button) {
+  @apply transition-colors duration-200;
+}
+
+/* Style form inputs */
+:deep(.vueform-input) {
+  @apply transition-colors duration-200;
+}
+
+/* Style form selects */
+:deep(.vueform-select) {
+  @apply transition-colors duration-200;
+}
+
+/* Dark mode adjustments */
+@media (prefers-color-scheme: dark) {
+  .vueform-divider span {
+    @apply bg-dark_bg2;
+  }
+}
+</style>