@dasidev/dasi-ui 1.0.0

package/src/vueform/elements/ConfigDataSelectorElement.vue

@@ -0,0 +1,50 @@
+<script>
+import { defineElement } from "@vueform/vueform";
+import ConfigDataSelector from "@/components/selector/ConfigDataSelector.vue";
+
+export default defineElement({
+	name: "ConfigDataSelectorElement",
+	props: {
+		parentCode: {
+			type: String,
+			required: false,
+		},
+		placeholder: {
+			type: String,
+			required: true,
+		},
+		field: {
+			type: String,
+		},
+	},
+	components: { ConfigDataSelector },
+	setup(props, { element }) {
+    return { disabled: element.isDisabled };
+  },
+});
+</script>
+
+<template>
+	<ElementLayout>
+		<template #element>
+			<!-- ADD YOUR ELEMENT TEMPLATE HERE -->
+			<ConfigDataSelector
+				v-model="value"
+				:placeholder="placeholder"
+				:parent-code="parentCode"
+				:disabled="disabled"
+				:field="field"
+				:class="{
+					'form-bg-disabled': disabled,
+					'!form-border-color-input-danger': isDanger,
+					'form-color-input-success': isSuccess,
+				}"
+			/>
+		</template>
+
+		<!-- Default element slots -->
+		<template v-for="(component, slot) in elementSlots" #[slot]
+			><slot :name="slot"><component :is="component" :el$="el$" /></slot
+		></template>
+	</ElementLayout>
+</template>

package/src/vueform/elements/DateSelectorElement.vue

@@ -0,0 +1,323 @@
+<script>
+import BtnCircle from "@/components/button/BtnCircle.vue";
+import { defineElement } from "@vueform/vueform";
+import VueDatePicker from "@vuepic/vue-datepicker";
+import "@vuepic/vue-datepicker/dist/main.css";
+import { LucideCalendarFold, LucideX } from "lucide-vue-next";
+import moment from "moment";
+import { ref, watch, computed, onMounted } from "vue";
+import { numberToMonth } from "@/lib/utils";
+
+export default defineElement({
+  name: "DateSelectorElement",
+  components: { VueDatePicker, LucideCalendarFold, LucideX, BtnCircle },
+  props: {
+    placeholder: {
+      type: String,
+      required: false
+    },
+    minDate: {
+      type: Date,
+      required: false
+    },
+    maxDate: {
+      type: Date,
+      required: false
+    },
+    disabled: {
+      type: Boolean,
+      required: false
+    },
+    pickerType: {
+      type: String,
+      default: "date",
+      validator: value => ["date", "datetime", "month", "year"].includes(value)
+    },
+    range: {
+      type: Boolean,
+      default: false
+    },
+    enableTimePicker: {
+      type: Boolean,
+      default: false
+    },
+    timePickerInline: {
+      type: Boolean,
+      default: false
+    },
+    displayFormat: {
+      type: String,
+      required: false
+    },
+    yearRange: {
+      type: Array,
+      default: () => [2000, new Date().getFullYear() + 10]
+    },
+    locale: {
+      type: String,
+      default: "id"
+    },
+    autoApply: {
+      type: Boolean,
+      default: true
+    },
+    textInput: {
+      type: Boolean,
+      default: true
+    },
+    startDate: {
+      type: Date,
+      required: false
+    },
+    isStokReal: {
+      type: Boolean,
+      required: false
+    }
+  },
+
+  setup(props, { element }) {
+    // Access custom props with sensible defaults
+    const pickerType = element.pickerType || props.pickerType || "date";
+    const range = element.range || props.range || false;
+    const placeholder = element.placeholder || props.placeholder || "Pilih tanggal...";
+    const autoApply = element.autoApply !== undefined ? element.autoApply : true;
+    const textInput = element.textInput !== undefined ? element.textInput : true;
+    const locale = element.locale || props.locale || "id";
+    const yearRange = element.yearRange || props.yearRange || [2000, new Date().getFullYear() + 10];
+    const minDate = element.minDate || props.minDate || null;
+    const maxDate = element.maxDate || props.maxDate || null;
+    const startDate = element.startDate || props.startDate || null;
+
+    const { value, update } = element;
+
+    // Computed modes
+    const isRange = computed(() => range);
+    const isMonth = computed(() => pickerType === "month");
+    const isYear = computed(() => pickerType === "year");
+    const isDateTime = computed(() => pickerType === "datetime");
+    const isDisabled = computed(() => Boolean(element?.isDisabled?.value));
+
+    // Model value
+    const modelValue = ref(null);
+
+    // Get correct empty value for picker type
+    const getEmptyValue = () => null;
+
+    // Initialize value
+    const initializeValue = () => {
+      if (!value.value) {
+        modelValue.value = null;
+        return;
+      }
+
+      try {
+        if (isRange.value && Array.isArray(value.value)) {
+          if (isMonth.value) {
+            // ["2025-01", "2025-03"] → [{ month: 0, year: 2025 }, { month: 2, year: 2025 }]
+            modelValue.value = value.value.map(val => {
+              if (!val) return null;
+              const [year, month] = val.split("-").map(Number);
+              return { month: month - 1, year };
+            });
+          } else if (isYear.value) {
+            // ["2020", "2025"] → [2020, 2025]
+            modelValue.value = value.value.map(val => (val ? Number(val) : null));
+          } else {
+            // ["2025-01-01", "2025-01-10"] → [Date, Date]
+            modelValue.value = value.value.map(val => (val ? new Date(val) : null));
+          }
+        } else {
+          if (isMonth.value) {
+            const [year, month] = value.value.split("-").map(Number);
+            modelValue.value = { month: month - 1, year };
+          } else if (isYear.value) {
+            modelValue.value = Number(value.value);
+          } else {
+            modelValue.value = new Date(value.value);
+          }
+        }
+      } catch (error) {
+        console.warn("Date parsing error:", error);
+        modelValue.value = getEmptyValue();
+      }
+    };
+
+    // Update handler
+    const updateDate = newVal => {
+      modelValue.value = newVal;
+
+      if (!newVal) {
+        update(null);
+        return;
+      }
+
+      try {
+        let formatted;
+
+        if (isRange.value && Array.isArray(newVal)) {
+          if (isMonth.value) {
+            // [{ month, year }, { month, year }] → ["2025-01", "2025-03"]
+            formatted = newVal.map(obj => {
+              if (!obj) return null;
+              const m = (obj.month + 1).toString().padStart(2, "0");
+              return `${obj.year}-${m}`;
+            });
+          } else if (isYear.value) {
+            formatted = newVal.map(year => year?.toString() || null);
+          } else {
+            formatted = newVal.map(date => (date ? moment(date).format("YYYY-MM-DD") : null));
+          }
+        } else {
+          if (isMonth.value && newVal?.month !== undefined) {
+            const m = (newVal.month + 1).toString().padStart(2, "0");
+            formatted = `${newVal.year}-${m}`;
+          } else if (isYear.value) {
+            formatted = newVal.toString();
+          } else {
+            const fmt = isDateTime.value ? "YYYY-MM-DD HH:mm:ss" : "YYYY-MM-DD";
+            formatted = moment(newVal).format(fmt);
+          }
+        }
+
+        update(formatted);
+      } catch (error) {
+        console.warn("Update error:", error);
+        update(null);
+      }
+    };
+
+    // Clear handler
+    const clearValue = () => {
+      modelValue.value = null; // not [null, null]
+      update(null);
+    };
+
+    // Display value
+    const displayValue = computed(() => {
+      if (!modelValue.value) return null;
+
+      try {
+        if (isRange.value && Array.isArray(modelValue.value)) {
+          const [start, end] = modelValue.value;
+          if (!start || !end) return null;
+
+          if (isMonth.value) {
+            return `${numberToMonth(start.month + 1)} ${start.year} - ${numberToMonth(end.month + 1)} ${end.year}`;
+          } else if (isYear.value) {
+            return `${start} - ${end}`;
+          } else {
+            const fmt = isDateTime.value ? "DD/MM/YYYY HH:mm" : "DD/MM/YYYY";
+            return `${moment(start).format(fmt)} - ${moment(end).format(fmt)}`;
+          }
+        } else {
+          if (isMonth.value && modelValue.value.month !== undefined) {
+            return `${numberToMonth(modelValue.value.month + 1)} ${modelValue.value.year}`;
+          } else if (isYear.value) {
+            return modelValue.value.toString();
+          } else {
+            const fmt = isDateTime.value ? "DD/MM/YYYY HH:mm" : "DD/MM/YYYY";
+            return moment(modelValue.value).format(fmt);
+          }
+        }
+      } catch {
+        return null;
+      }
+    });
+
+    // Placeholder
+    const computedPlaceholder = computed(() => {
+      if (placeholder !== "Pilih tanggal...") return placeholder;
+
+      if (isRange.value) {
+        if (isMonth.value) return "Pilih rentang bulan";
+        if (isYear.value) return "Pilih rentang tahun";
+        return "Pilih rentang tanggal";
+      } else {
+        if (isMonth.value) return "Pilih bulan...";
+        if (isYear.value) return "Pilih tahun...";
+        if (isDateTime.value) return "Pilih tanggal dan waktu...";
+        return "Pilih tanggal...";
+      }
+    });
+
+    // Watchers
+    watch(value, () => {
+      if (value.value !== undefined) initializeValue();
+    });
+
+    onMounted(() => {
+      initializeValue();
+    });
+
+    return {
+      modelValue,
+      updateDate,
+      clearValue,
+      displayValue,
+      computedPlaceholder,
+      isRange,
+      isDateTime,
+      isMonth,
+      isYear,
+      disabled: isDisabled,
+      autoApply,
+      textInput,
+      locale
+    };
+  }
+});
+</script>
+
+<template>
+  <ElementLayout>
+    <template #element>
+      <!-- Disabled State -->
+      <div v-if="disabled" class="min-h-[2.5rem] w-full cursor-not-allowed rounded-md border border-gray-300 bg-gray-50 dark:bg-dark_bg3 px-3 py-2">
+        <div class="flex h-full items-center">
+          <LucideCalendarFold :size="20" :stroke-width="1.5" class="mr-3 text-gray-400 dark:text-gray-200" />
+          <span class="flex-1 text-gray-500">{{ displayValue || computedPlaceholder }}</span>
+        </div>
+      </div>
+
+      <!-- Active State -->
+      <VueDatePicker
+        v-else
+        v-model="modelValue"
+        :range="isRange"
+        :month-picker="isMonth"
+        :year-picker="isYear"
+        :auto-apply="autoApply"
+        :text-input="textInput"
+        :enable-time-picker="isDateTime"
+        :locale="locale"
+        :placeholder="computedPlaceholder"
+        @update:model-value="updateDate"
+        @cleared="clearValue">
+        <template #trigger>
+          <div class="min-h-[2.5rem] w-full cursor-pointer rounded-md border border-gray-300 bg-white dark:bg-dark_bg3 px-3 py-2 hover:border-gray-400">
+            <div class="flex h-full items-center">
+              <LucideCalendarFold :size="20" :stroke-width="1.5" class="mr-3 text-gray-500 dark:text-gray-200" />
+
+              <span v-if="displayValue" class="flex-1 text-gray-900 dark:text-gray-200">{{ displayValue }}</span>
+              <span v-else class="flex-1 text-gray-400 dark:text-gray-200">{{ computedPlaceholder }}</span>
+
+              <BtnCircle v-if="displayValue && isRange" @click.stop="clearValue" class="ml-2 flex size-6 items-center justify-center rounded-full bg-gray-100 dark:bg-dark_bg3">
+                <LucideX :size="14" />
+              </BtnCircle>
+
+              <svg class="ml-2 h-4 w-4 text-gray-400 dark:text-gray-200" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
+              </svg>
+            </div>
+          </div>
+        </template>
+      </VueDatePicker>
+    </template>
+
+    <template v-for="(component, slot) in elementSlots" #[slot]>
+      <slot :name="slot">
+        <component :is="component" :el$="el$" />
+      </slot>
+    </template>
+  </ElementLayout>
+</template>

package/src/vueform/elements/SelectorElement.vue

@@ -0,0 +1,153 @@
+<script>
+import { defineElement } from "@vueform/vueform";
+import BaseSelector from "@/components/selector/BaseSelector.vue";
+import { ref } from "vue";
+
+export default defineElement({
+  props: {
+    endpoint: {
+      type: String,
+      required: false
+    },
+    title: {
+      type: String,
+      required: false
+    },
+    placeholder: {
+      type: String,
+      required: false
+    },
+    nameField: {
+      type: String,
+      required: false
+    },
+    nameFieldFunc: {
+      type: Function,
+      required: false
+    },
+    descriptionField: {
+      type: String,
+      required: false
+    },
+    descriptionFieldFunc: {
+      type: Function,
+      required: false
+    },
+    disableAutoLoad: {
+      type: Boolean,
+      required: false
+    },
+    searchColumns: {
+      type: String,
+      required: false
+    },
+    // New props for unified BaseSelector
+    showAvatar: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    returnObject: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    autoFillOrg: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    accessLevel: {
+      type: String,
+      required: false
+    },
+    multiple: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // Dynamic Parameters
+    params: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    condition: {
+      type: Object,
+      required: false,
+      default: () => ({})
+    },
+    orderBy: {
+      type: String,
+      required: false
+    },
+    sort: {
+      type: String,
+      required: false,
+      validator: value => !value || ["asc", "desc"].includes(value)
+    }
+  },
+  name: "SelectorElement",
+  components: { BaseSelector },
+  setup(props, { element }) {
+    const endpoint = ref(props.endpoint);
+
+    function setEndpoint(newEndpoint) {
+      // console.log('set endpoint', newEndpoint);
+      endpoint.value = newEndpoint;
+    }
+
+    function handleChange(value, objects) {
+      // Debug logging in development mode
+      const isDev = import.meta?.env?.DEV === true;
+      if (isDev) {
+        console.log("[SelectorElement] handleChange - returnObject:", props.returnObject, "value:", value, "objects:", objects);
+      }
+
+      // The v-model already handles the value update
+      // This is just for debugging and potential future hooks
+    }
+
+    return { endpoint, setEndpoint, handleChange, disabled: element.isDisabled };
+  }
+});
+</script>
+
+<template>
+  <ElementLayout>
+    <template #element>
+      <!-- Using the unified BaseSelector component -->
+      <BaseSelector
+        v-model="value"
+        :placeholder="placeholder"
+        :endpoint="endpoint"
+        :title="title"
+        :name-field="nameField"
+        :name-field-func="nameFieldFunc"
+        :description-field="descriptionField"
+        :description-field-func="descriptionFieldFunc"
+        :disable-auto-load="disableAutoLoad"
+        :disabled="disabled"
+        :search-columns="searchColumns"
+        :show-avatar="showAvatar"
+        :return-object="returnObject"
+        :auto-fill-org="autoFillOrg"
+        :access-level="accessLevel"
+        :multiple="multiple"
+        :params="params"
+        :condition="condition"
+        :order-by="orderBy"
+        :sort="sort"
+        @change="handleChange"
+        :class="{
+          '!form-border-color-input-danger': isDanger,
+          'form-color-input-success': isSuccess
+        }" />
+    </template>
+
+    <!-- Default element slots -->
+    <template v-for="(component, slot) in elementSlots" #[slot]
+      ><slot :name="slot"><component :is="component" :el$="el$" /></slot
+    ></template>
+  </ElementLayout>
+</template>

package/src/vueform/schemas/date-selector-test.ts

@@ -0,0 +1,103 @@
+import type { FormSchema } from "@/types/form.types";
+
+/**
+ * Test schema for the DateSelectorElement
+ * This demonstrates all the different configurations
+ */
+export const dateSelectorTestSchema: FormSchema = {
+  schema: {
+    // Test 1: Basic date picker
+    testDate: {
+      type: "DateSelectorElement",
+      label: "Test Date",
+      placeholder: "Select a date",
+      pickerType: "date",
+      rules: ["required"],
+    },
+
+    // Test 2: Date range
+    testDateRange: {
+      type: "DateSelectorElement",
+      label: "Test Date Range",
+      placeholder: "Select date range",
+      pickerType: "date",
+      range: true,
+    },
+
+    // Test 3: DateTime picker
+    testDateTime: {
+      type: "DateSelectorElement",
+      label: "Test DateTime",
+      placeholder: "Select date and time",
+      pickerType: "datetime",
+      timePickerInline: true,
+    },
+
+    // Test 4: DateTime range
+    testDateTimeRange: {
+      type: "DateSelectorElement",
+      label: "Test DateTime Range",
+      placeholder: "Select date time range",
+      pickerType: "datetime",
+      range: true,
+      timePickerInline: true,
+    },
+
+    // Test 5: Month picker
+    testMonth: {
+      type: "DateSelectorElement",
+      label: "Test Month",
+      placeholder: "Select month",
+      pickerType: "month",
+      locale: "id",
+    },
+
+    // Test 6: Month range
+    testMonthRange: {
+      type: "DateSelectorElement",
+      label: "Test Month Range",
+      placeholder: "Select month range",
+      pickerType: "month",
+      range: true,
+      locale: "id",
+    },
+
+    // Test 7: Year picker (using date picker with year navigation)
+    testYear: {
+      type: "DateSelectorElement",
+      label: "Test Year",
+      placeholder: "Select year",
+      pickerType: "year",
+      yearRange: [2020, 2030],
+    },
+
+    // Test 8: Year range (using date range picker with year navigation)
+    testYearRange: {
+      type: "DateSelectorElement",
+      label: "Test Year Range",
+      placeholder: "Select year range",
+      pickerType: "year",
+      range: true,
+      yearRange: [2020, 2030],
+    },
+
+    // Test 9: Custom format
+    testCustomFormat: {
+      type: "DateSelectorElement",
+      label: "Test Custom Format",
+      placeholder: "Select date",
+      pickerType: "date",
+      displayFormat: "DD-MM-YYYY",
+    },
+
+    // Test 10: Disabled
+    testDisabled: {
+      type: "DateSelectorElement",
+      label: "Test Disabled",
+      placeholder: "This is disabled",
+      pickerType: "date",
+      disabled: true,
+      default: "2024-01-01",
+    },
+  },
+};