@dasidev/dasi-ui 1.0.0

package/src/vueform/schemas/informasi-gudang.ts

@@ -0,0 +1,160 @@
+import api from "@/api/api";
+import { formatNumberIntl } from "@/lib/utils";
+import type { FormSchema } from "@/types/form.types";
+import { onMounted } from "vue";
+
+const masterGedung: FormSchema = {
+  schema: {
+    html1: {
+      type: "static",
+      content: '<div class="vueform-divider"><span>Informasi Gedung</span></div>'
+    },
+    organizationId: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Pemasok",
+      showAvatar: true,
+      nameField: "name",
+      placeholder: "Pilih pemasok...",
+      sortKey: "pemasok.name",
+      rules: ["required"],
+      descriptionFieldFunc(row) {
+        return row.accessLevel?.name 
+      },
+      showInTable: true,
+      autofill: true,
+      condition: {
+        levels: "pemasok",
+      },
+      orderBy: "name",
+      sort: "asc"
+    },
+    tanggal: {
+      type: 'date_selector',
+      label: 'Tanggal',
+      placeholder: "Pilih Tanggal",
+      rules: ['required'],
+      pickerType: 'datetime',
+      range: true,
+    },
+    masterEpiKapalId: {
+      type: "selector",
+      endpoint: "/master-data",
+      searchColumns: "nama",
+      orderBy: "nama",
+      sort: "asc",
+      nameField: "nama",
+      label: "Master Data",
+      placeholder: "Pilih master data...",
+      rules: ["required"],
+      disableAutoLoad: true,
+      showInDetail: false
+    },
+    nama: {
+      type: "text",
+      sortKey: "t_master_epi_kapal.nama",
+      label: "Nama Kapal",
+      placeholder: "Masukkan nama kapal...",
+      messages: {
+        regex: "Nama kapal hanya boleh mengandung huruf kapital dan tanda (-)",
+        required: "Nama kapal wajib diisi."
+      },
+      disabled: true,
+      cellRender(_: number, row: any) {
+        return row.masterEpiKapal?.nama;
+      }
+    },
+    jenisKapalCode: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Jenis Kapal",
+      placeholder: "Pilih jenis kapal...",
+      columns: { container: 6 },
+      disabled: true,
+      sortKey: "t_master_epi_kapal.t_master_epi_kapal.jenis_kapal_code",
+      cellRender(_: number, row: any) {
+        return row.masterEpiKapal?.jenisKapal?.name;
+      }
+    },
+    imo: {
+      type: "text",
+      inputType: "text",
+      forceNumbers: true,
+      label: "IMO",
+      nullValue: 0,
+      placeholder: "Masukan IMO...",
+      columns: { container: 6 },
+      disabled: true,
+      sortKey: "t_master_epi_kapal.imo",
+      cellRender(_: number, row: any) {
+        return row.masterEpiKapal?.imo;
+      }
+    },
+    mmsi: {
+      type: "text",
+      inputType: "text",
+      forceNumbers: true,
+      label: "MMSI",
+      nullValue: 0,
+      placeholder: "Masukan MMSI...",
+      columns: { container: 6 },
+      disabled: true,
+      sortKey: "t_master_epi_kapal.mmsi",
+      cellRender(_: number, row: any) {
+        return row.masterEpiKapal?.mmsi;
+      }
+    },
+    kapasitas: {
+      type: "text",
+      inputType: "text",
+      mask: {
+        mask: "number",
+        thousandsSeparator: ",",
+        radix: ".",
+        mapToRadix: [".", ","],
+        scale: 3
+      },
+      label: "Kapasitas",
+      placeholder: "Masukkan kapasitas...",
+      default: "",
+      nullValue: "",
+      columns: { container: 6 },
+      disabled: true,
+      sortKey: "t_master_epi_kapal.kapasitas",
+      addons: {
+        after: "MT"
+      },
+      cellRender(i: number, row: any) {
+        return `<b>${formatNumberIntl(row.masterEpiKapal?.kapasitas)} </b> MT`;
+      },
+      textAlign: "right"
+    },
+    pemilikId: {
+      type: "selector",
+      endpoint: "/organization",
+      condition: {
+        levels: 'transportir'
+      },
+      showAvatar: true,
+      placeholder: "Pilih transportir...",
+      label: "Transportir",
+      rules: ["required"],
+      // sortKey: "pemilik.name",
+      // disableAutoLoad: true,
+      showInTable: true
+    },
+    statusGedung: {
+      type: "toggle",
+      default: true,
+      nullValue: true,
+      text: "Status Gedung",
+      sortKey: "status_gedung",
+      cellRender(_: number, row: any) {
+        return row.statusGedung ? '<b class="text-green-500">Aktif</b>' : '<b class="text-red-500">Tidak Aktif</b>';
+      },
+      showInTable: true
+    }
+  },
+};
+
+export default masterGedung;

package/src/vueform/schemas/test-schema.ts

@@ -0,0 +1,483 @@
+import type { FormSchema } from "@/types/form.types";
+
+const testSchema: FormSchema = {
+  schema: {
+    html1: {
+      type: "static",
+      content: '<div class="vueform-divider"><span>Selector Element Examples</span></div>'
+    },
+
+    // Basic Selector (Single Selection)
+    basicSelector: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Basic Selector",
+      placeholder: "Pilih organisasi...",
+      nameField: "name",
+      descriptionField: "description",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Selector with Avatar
+    selectorWithAvatar: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Selector with Avatar",
+      placeholder: "Pilih user...",
+      nameField: "name",
+      descriptionField: "email",
+      showAvatar: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Multiple Selection
+    multipleSelector: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Multiple Selection",
+      placeholder: "Pilih role...",
+      nameField: "name",
+      descriptionField: "description",
+      multiple: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Multiple Selection with Avatar
+    multipleSelectorWithAvatar: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Multiple Selection with Avatar",
+      placeholder: "Pilih team...",
+      nameField: "name",
+      descriptionField: "department",
+      showAvatar: true,
+      multiple: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Selector with Custom Function Fields
+    selectorWithCustomFields: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Selector with Custom Fields",
+      placeholder: "Pilih organisasi...",
+      nameFieldFunc: (row: any) => `${row.name} (${row.name})`,
+      descriptionFieldFunc: (row: any) => `Level: ${row.name}`,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Selector with Parameters and Conditions
+    selectorWithParams: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Selector with Parameters",
+      placeholder: "Pilih order...",
+      nameField: "orderNumber",
+      descriptionField: "customerName",
+      params: {
+        status: "active",
+        type: "online"
+      },
+      condition: {
+        levels: "admin",
+        region: "asia"
+      },
+      orderBy: "createdAt",
+      sort: "desc",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Selector with Auto Fill Organization
+    selectorWithAutoFill: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Selector with Auto Fill",
+      placeholder: "Pilih departemen...",
+      nameField: "name",
+      descriptionField: "manager",
+      autoFillOrg: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Selector with Return Object
+    selectorReturnObject: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Selector Return Object",
+      placeholder: "Pilih customer...",
+      nameField: "name",
+      descriptionField: "company",
+      returnObject: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // ========================================
+    // DATE SELECTOR ELEMENT EXAMPLES
+    // ========================================
+
+    html2: {
+      type: "static",
+      content: '<div class="vueform-divider mt-4"><span>Date Selector Element Examples</span></div>'
+    },
+
+    // Basic Date Picker
+    basicDate: {
+      type: "date_selector",
+      label: "Basic Date",
+      placeholder: "Pilih tanggal...",
+      pickerType: "date",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Date Time Picker
+    dateTimePicker: {
+      type: "date_selector",
+      label: "Date Time Picker",
+      placeholder: "Pilih tanggal dan waktu...",
+      pickerType: "datetime",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Month Picker
+    monthPicker: {
+      type: "date_selector",
+      label: "Month Picker",
+      placeholder: "Pilih bulan...",
+      pickerType: "month",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Year Picker
+    yearPicker: {
+      type: "date_selector",
+      label: "Year Picker",
+      placeholder: "Pilih tahun...",
+      pickerType: "year",
+      yearRange: [2020, 2030],
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Date Range Picker
+    dateRange: {
+      type: "date_selector",
+      label: "Date Range",
+      placeholder: "Pilih rentang tanggal...",
+      pickerType: "date",
+      range: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Date Time Range Picker
+    dateTimeRange: {
+      type: "date_selector",
+      label: "Date Time Range",
+      placeholder: "Pilih rentang tanggal dan waktu...",
+      pickerType: "datetime",
+      range: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Month Range Picker
+    monthRange: {
+      type: "date_selector",
+      label: "Month Range",
+      placeholder: "Pilih rentang bulan...",
+      pickerType: "month",
+      range: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Year Range Picker
+    yearRange: {
+      type: "date_selector",
+      label: "Year Range",
+      placeholder: "Pilih rentang tahun...",
+      pickerType: "year",
+      range: true,
+      yearRange: [2020, 2030],
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Date with Min/Max Constraints
+    dateWithConstraints: {
+      type: "date_selector",
+      label: "Date with Constraints",
+      placeholder: "Pilih tanggal...",
+      pickerType: "date",
+      minDate: new Date("2024-01-01"),
+      maxDate: new Date("2024-12-31"),
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Date with Custom Display Format
+    dateWithCustomFormat: {
+      type: "date_selector",
+      label: "Date with Custom Format",
+      placeholder: "Pilih tanggal...",
+      pickerType: "date",
+      displayFormat: "DD/MM/YYYY",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // ========================================
+    // CONFIG DATA SELECTOR ELEMENT EXAMPLES
+    // ========================================
+
+    html3: {
+      type: "static",
+      content: '<div class="vueform-divider mt-4"><span>Config Data Selector Element Examples</span></div>'
+    },
+
+    // Basic Config Data Selector
+    basicConfigData: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Basic Config Data",
+      placeholder: "Pilih negara...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Config Data with Custom Field
+    configDataWithField: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Config Data with Field",
+      placeholder: "Pilih mata uang...",
+      field: "code",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Config Data for Categories
+    configDataCategories: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Categories",
+      placeholder: "Pilih kategori...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Config Data for Status
+    configDataStatus: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Status",
+      placeholder: "Pilih status...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Config Data for Types
+    configDataTypes: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Types",
+      placeholder: "Pilih tipe...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // ========================================
+    // COMBINED EXAMPLES
+    // ========================================
+
+    html4: {
+      type: "static",
+      content: '<div class="vueform-divider mt-4"><span>Combined Examples</span></div>'
+    },
+
+    // User Registration Form
+    userRegistration: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Organization",
+      placeholder: "Pilih organisasi...",
+      nameField: "name",
+      descriptionField: "type",
+      showAvatar: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    userBirthDate: {
+      type: "date_selector",
+      label: "Birth Date",
+      placeholder: "Pilih tanggal lahir...",
+      pickerType: "date",
+      maxDate: new Date(),
+      rules: ["required"],
+      showInTable: true
+    },
+
+    userCountry: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Country",
+      placeholder: "Pilih negara...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Project Management Form
+    projectManager: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Project Manager",
+      placeholder: "Pilih project manager...",
+      nameField: "name",
+      descriptionField: "role",
+      showAvatar: true,
+      multiple: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    projectStartDate: {
+      type: "date_selector",
+      label: "Project Start Date",
+      placeholder: "Pilih tanggal mulai...",
+      pickerType: "date",
+      minDate: new Date(),
+      rules: ["required"],
+      showInTable: true
+    },
+
+    projectEndDate: {
+      type: "date_selector",
+      label: "Project End Date",
+      placeholder: "Pilih tanggal selesai...",
+      pickerType: "date",
+      minDate: new Date(),
+      rules: ["required"],
+      showInTable: true
+    },
+
+    projectStatus: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Project Status",
+      placeholder: "Pilih status proyek...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Event Planning Form
+    eventOrganizers: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Event Organizers",
+      placeholder: "Pilih tim organizer...",
+      nameField: "name",
+      descriptionField: "department",
+      showAvatar: true,
+      multiple: true,
+      condition: {
+        levels: "organizer"
+      },
+      rules: ["required"],
+      showInTable: true
+    },
+
+    eventDateRange: {
+      type: "date_selector",
+      label: "Event Date Range",
+      placeholder: "Pilih rentang tanggal event...",
+      pickerType: "date",
+      range: true,
+      rules: ["required"],
+      showInTable: true
+    },
+
+    eventType: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Event Type",
+      placeholder: "Pilih tipe event...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // ========================================
+    // ADVANCED EXAMPLES
+    // ========================================
+
+    html5: {
+      type: "static",
+      content: '<div class="vueform-divider mt-4"><span>Advanced Examples</span></div>'
+    },
+
+    // Conditional Selector
+    conditionalSelector: {
+      type: "selector",
+      endpoint: "/organization",
+      label: "Product",
+      placeholder: "Pilih produk...",
+      nameField: "name",
+      descriptionField: "category",
+      showAvatar: true,
+      params: {
+        active: true
+      },
+      condition: {
+        levels: "user",
+        region: "asia"
+      },
+      orderBy: "name",
+      sort: "asc",
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Date with Business Logic
+    businessDate: {
+      type: "date_selector",
+      label: "Business Date",
+      placeholder: "Pilih tanggal bisnis...",
+      pickerType: "date",
+      minDate: new Date(),
+      maxDate: new Date(new Date().getFullYear() + 1, 11, 31),
+      rules: ["required"],
+      showInTable: true
+    },
+
+    // Config Data with Business Logic
+    businessConfig: {
+      type: "config_data_selector",
+      parentCode: "dasi//cd/jenis-kapal",
+      label: "Business Unit",
+      placeholder: "Pilih unit bisnis...",
+      field: "name",
+      rules: ["required"],
+      showInTable: true
+    }
+  }
+};
+
+export default testSchema;