@omnitend/dashboard-for-laravel 0.19.1 → 0.19.2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnitend/dashboard-for-laravel",
-  "version": "0.19.1",
+  "version": "0.19.2",
   "description": "Vue 3 dashboard components for Laravel with Bootstrap Vue Next",
   "type": "module",
   "main": "./dist/dashboard-for-laravel.umd.cjs",

package/resources/js/components/base/DFormSelect.vue

@@ -1,14 +1,112 @@
-<script setup lang="ts">
+/**
+ * @component
+ * Type-safe wrapper around Bootstrap Vue Next BFormSelect.
+ *
+ * Adds one behaviour BVN lacks: a `select` option whose value is `null`
+ * round-trips correctly. BVN renders each option's value as a plain HTML
+ * `value` attribute, so when that value is `null` Vue omits the attribute and
+ * the browser falls back to using the option's *text* as its DOM value — a
+ * model bound to `null` then matches no option and the select renders blank.
+ *
+ * We map a `null` option value (and a `null` model) to a private string
+ * sentinel so BVN renders a real value attribute, while keeping the consumer's
+ * model and emitted value as `null`. Legacy Bootstrap-Vue (BS4) handled this;
+ * BVN does not. (Radios likely need the same treatment — see #81.)
+ */
+<script setup lang="ts" generic="T = unknown">
 import { BFormSelect } from "bootstrap-vue-next";
-import { useSlots } from "vue";
+import { computed, useSlots } from "vue";
+
+// Mirrors the shapes BVN's BFormSelect accepts per option (primitive, object, or
+// group). Only object options can carry a `null` value.
+export type OptionItem = string | number | boolean | Record<string, unknown>;
+
+export interface Props<TValue = unknown> {
+  modelValue?: TValue | TValue[] | null;
+  options?: readonly OptionItem[];
+  /** Key on object options that holds the value (BVN default: "value"). */
+  valueField?: string;
+  /** Key on object options that holds nested options / groups (BVN default: "options"). */
+  optionsField?: string;
+}
+
+// A stable private value that stands in for a `null` option/model. Chosen to be
+// vanishingly unlikely to collide with a real option value.
+const NULL_SENTINEL = "__dfl_null_option_sentinel__";
+
+const props = withDefaults(defineProps<Props<T>>(), {
+  valueField: "value",
+  optionsField: "options",
+});
+
+const emit = defineEmits<{
+  "update:modelValue": [value: T | T[] | null];
+}>();
 
 const slots = useSlots();
+
+const encodeValue = (value: unknown): unknown =>
+  value === null ? NULL_SENTINEL : value;
+
+const decodeValue = (value: unknown): unknown =>
+  value === NULL_SENTINEL ? null : value;
+
+const isPlainOptionObject = (option: unknown): option is Record<string, unknown> =>
+  typeof option === "object" && option !== null && !Array.isArray(option);
+
+// Replace any option whose resolved value is `null` with the sentinel. Recurses
+// into option groups. Primitive options (string/number/boolean) can't be null.
+const encodeOptions = (options: readonly OptionItem[]): OptionItem[] =>
+  options.map((option) => {
+    if (!isPlainOptionObject(option)) {
+      return option;
+    }
+
+    const nested = option[props.optionsField];
+    if (Array.isArray(nested)) {
+      return { ...option, [props.optionsField]: encodeOptions(nested) };
+    }
+
+    if (option[props.valueField] === null) {
+      return { ...option, [props.valueField]: NULL_SENTINEL };
+    }
+
+    return option;
+  });
+
+const encodedOptions = computed<OptionItem[] | undefined>(() =>
+  props.options === undefined ? undefined : encodeOptions(props.options),
+);
+
+const encodedModel = computed<unknown>(() => {
+  const model = props.modelValue;
+  if (Array.isArray(model)) {
+    return model.map(encodeValue);
+  }
+  return encodeValue(model);
+});
+
+const onUpdateModelValue = (value: unknown): void => {
+  const decoded = Array.isArray(value) ? value.map(decodeValue) : decodeValue(value);
+  emit("update:modelValue", decoded as T | T[] | null);
+};
+
+defineOptions({
+  inheritAttrs: false,
+});
 </script>
 
 <template>
-  <BFormSelect v-bind="$attrs">
-    <template v-for="(_, name) in slots" :key="name" #[name]>
-      <slot :name="name" />
+  <BFormSelect
+    v-bind="$attrs"
+    :model-value="encodedModel"
+    :options="encodedOptions"
+    :value-field="valueField"
+    :options-field="optionsField"
+    @update:model-value="onUpdateModelValue"
+  >
+    <template v-for="(_, name) in slots" :key="name" #[name]="slotProps">
+      <slot :name="name" v-bind="slotProps" />
     </template>
   </BFormSelect>
 </template>

package/resources/js/components/extended/DXTable.vue

@@ -1126,14 +1126,27 @@ watch(() => props.filters, (newFilters, oldFilters) => {
     }
 }, { deep: true });
 
-// Watch apiUrl changes to reset filter cache (prevents stale dropdown options)
+// Watch apiUrl changes to reset filter cache and refetch. The api-url isn't part
+// of BTable's provider context, so an api-url-only change doesn't re-invoke the
+// provider on its own — without this the table keeps showing the previous url's
+// rows until some other trigger (sort, per-page, create/edit/delete) fires.
 watch(() => props.apiUrl, (newUrl, oldUrl) => {
     if (newUrl !== oldUrl && isProviderMode.value) {
-        // Clear cached filter values and pagination when API endpoint changes
+        // Clear cached filter values and pagination when API endpoint changes.
+        // The next provider call will request fresh filter values.
         apiFilterValues.value = {};
         apiPaginationMeta.value = null;
         apiError.value = null;
-        // Next provider call will request fresh filter values
+        // A url change is a fresh dataset — go back to page 1. If we were past
+        // page 1, resetting the page re-invokes the provider on its own (so the
+        // out-of-range page can't linger); if we were already on page 1 the prop
+        // doesn't change, so refresh() forces the refetch. Exactly one fetch
+        // either way.
+        const wasOnFirstPage = apiCurrentPage.value === 1;
+        apiCurrentPage.value = 1;
+        if (wasOnFirstPage) {
+            refresh();
+        }
     }
 });
 
@@ -1382,8 +1395,14 @@ const handleBusyChange = (busy: boolean) => {
 // Debounce timer for filter changes
 let filterDebounceTimer: ReturnType<typeof setTimeout> | null = null;
 
-const handlePerPageChange = (newPerPage: number | string) => {
-    const perPageNum = typeof newPerPage === 'string' ? parseInt(newPerPage, 10) : newPerPage;
+// DFormSelect's model can be null/array (it mirrors BVN's BFormSelect), but the
+// per-page selector only ever emits a numeric-string scalar; narrow defensively.
+const handlePerPageChange = (newPerPage: number | string | null | (number | string)[]) => {
+    const rawPerPage = Array.isArray(newPerPage) ? newPerPage[0] : newPerPage;
+    if (rawPerPage === null || rawPerPage === undefined) {
+        return;
+    }
+    const perPageNum = typeof rawPerPage === 'string' ? parseInt(rawPerPage, 10) : rawPerPage;
 
     // Update internal state if not using external perPage
     if (props.perPage === undefined) {