@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/components/dialog/InfoDialog.vue

@@ -1,74 +0,0 @@
-<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/template/src/components/dialog/SuccessDialog.vue

@@ -1,50 +0,0 @@
-<script setup lang="ts">
-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/template/src/components/examples/TestSchemaExample.vue

@@ -1,288 +0,0 @@
-<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>