@dasidev/dasi-ui 1.0.19 → 1.0.21

package/template/src/vueform/elements/ConfigDataSelectorElement.vue

@@ -1,50 +0,0 @@
-<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/template/src/vueform/elements/DateSelectorElement.vue

@@ -1,323 +0,0 @@
-<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/template/src/vueform/elements/SelectorElement.vue

@@ -1,153 +0,0 @@
-<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/template/src/vueform/schemas/date-selector-test.ts

@@ -1,103 +0,0 @@
-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",
-    },
-  },
-};