@dragonmastery/zinia-forms-core 0.3.3 → 0.3.5

package/dist/index.js

@@ -1,4 +1,4 @@
-import { provide, ref, computed, unref, inject, getCurrentInstance, reactive, watch, nextTick, Teleport } from 'vue';
+import { provide, ref, computed, unref, inject, getCurrentInstance, watch, reactive, nextTick, Teleport } from 'vue';
 import { z } from 'zod';
 import { jsxs, jsx, Fragment } from 'vue/jsx-runtime';
 
@@ -3983,6 +3983,7 @@ function createDaisyUIComboboxField() {
     const isTouched2 = formState.isTouched(props.name);
     const comboboxRoot = ref(null);
     const inputElement = ref(null);
+    const dropdownPanel = ref(null);
     const selectedIndex = computed({
       get: () => formState.getSelectedIndex(props.name),
       set: (value) => formState.setSelectedIndex(props.name, value)
@@ -4036,7 +4037,8 @@ function createDaisyUIComboboxField() {
       },
       onBlur: (event) => {
         const relatedTarget = event.relatedTarget;
-        if (comboboxRoot.value?.contains(relatedTarget)) {
+        const root = comboboxRoot.value || inputElement.value?.closest("label.floating-label");
+        if (root?.contains(relatedTarget)) {
           return;
         }
         const displayValue = String(displayText.value || "").trim();
@@ -4079,11 +4081,48 @@ function createDaisyUIComboboxField() {
               const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % totalOptions;
               selectedIndex.value = newIndex;
               nextTick(() => {
-                const selectedElement = comboboxRoot.value?.querySelector(
+                let panel = null;
+                if (dropdownPanel.value) {
+                  panel = dropdownPanel.value;
+                } else if (inputElement.value) {
+                  const comboboxContainer = inputElement.value.closest('[role="combobox"]');
+                  if (comboboxContainer) {
+                    panel = comboboxContainer.querySelector("div.absolute.overflow-auto");
+                    if (!panel) {
+                      const listbox = comboboxContainer.querySelector("#combobox-listbox");
+                      if (listbox) {
+                        panel = listbox.parentElement;
+                      }
+                    }
+                  }
+                }
+                if (!panel) {
+                  const listbox = document.querySelector(`#combobox-listbox`);
+                  if (listbox) {
+                    panel = listbox.parentElement;
+                  }
+                }
+                if (!panel) {
+                  return;
+                }
+                const selectedElement = panel.querySelector(
                   newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
                 );
-                if (selectedElement) {
-                  selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+                if (!selectedElement) {
+                  return;
+                }
+                const listElement = selectedElement.parentElement;
+                if (!listElement) {
+                  return;
+                }
+                const elementTop = selectedElement.offsetTop;
+                const elementHeight = selectedElement.offsetHeight;
+                const containerHeight = panel.clientHeight;
+                const containerScrollTop = panel.scrollTop;
+                if (elementTop < containerScrollTop) {
+                  panel.scrollTop = elementTop;
+                } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
+                  panel.scrollTop = elementTop + elementHeight - containerHeight;
                 }
               });
             }
@@ -4098,11 +4137,48 @@ function createDaisyUIComboboxField() {
               const newIndex = currentIndex < 0 ? totalOptionsUp - 1 : (currentIndex - 1 + totalOptionsUp) % totalOptionsUp;
               selectedIndex.value = newIndex;
               nextTick(() => {
-                const selectedElement = comboboxRoot.value?.querySelector(
+                let panel = null;
+                if (dropdownPanel.value) {
+                  panel = dropdownPanel.value;
+                } else if (inputElement.value) {
+                  const comboboxContainer = inputElement.value.closest('[role="combobox"]');
+                  if (comboboxContainer) {
+                    panel = comboboxContainer.querySelector("div.absolute.overflow-auto");
+                    if (!panel) {
+                      const listbox = comboboxContainer.querySelector("#combobox-listbox");
+                      if (listbox) {
+                        panel = listbox.parentElement;
+                      }
+                    }
+                  }
+                }
+                if (!panel) {
+                  const listbox = document.querySelector(`#combobox-listbox`);
+                  if (listbox) {
+                    panel = listbox.parentElement;
+                  }
+                }
+                if (!panel) {
+                  return;
+                }
+                const selectedElement = panel.querySelector(
                   newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
                 );
-                if (selectedElement) {
-                  selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
+                if (!selectedElement) {
+                  return;
+                }
+                const listElement = selectedElement.parentElement;
+                if (!listElement) {
+                  return;
+                }
+                const elementTop = selectedElement.offsetTop;
+                const elementHeight = selectedElement.offsetHeight;
+                const containerHeight = panel.clientHeight;
+                const containerScrollTop = panel.scrollTop;
+                if (elementTop < containerScrollTop) {
+                  panel.scrollTop = elementTop;
+                } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
+                  panel.scrollTop = elementTop + elementHeight - containerHeight;
                 }
               });
             }
@@ -4171,7 +4247,7 @@ function createDaisyUIComboboxField() {
             children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
           }
         ) }),
-        showDropdown.value && /* @__PURE__ */ jsx("div", { class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", style: "min-width: 100%;", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
+        showDropdown.value && /* @__PURE__ */ jsx("div", { ref: dropdownPanel, class: "absolute z-50 mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", style: "min-width: 100%;", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
           filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
             "li",
             {
@@ -5214,7 +5290,10 @@ var SELECT_FIELD_PROP_NAMES = [
   "size",
   "variant",
   "valueToLabel",
-  "useSchemaOptions"
+  "useSchemaOptions",
+  "dependsOn",
+  "optionFilterFn",
+  "autoReset"
 ];
 function createDaisyUISelectField() {
   const propsDefinition = [...SELECT_FIELD_PROP_NAMES];
@@ -5226,7 +5305,13 @@ function createDaisyUISelectField() {
     }
     const fieldMetadata = formState.fieldsMetadata[props.name] || {};
     const normalizedProps = normalizePropsFromAttrs(props, propsDefinition, attrs);
-    const getOptions = computed(() => {
+    const parentValue = computed(() => {
+      if (normalizedProps.dependsOn) {
+        return formState.getValue(normalizedProps.dependsOn);
+      }
+      return null;
+    });
+    const allOptions = computed(() => {
       if (normalizedProps.selectOptions) {
         return normalizedProps.selectOptions;
       }
@@ -5243,6 +5328,43 @@ function createDaisyUISelectField() {
       }
       return schemaOptions;
     });
+    const getOptions = computed(() => {
+      const options = allOptions.value;
+      if (normalizedProps.dependsOn && normalizedProps.optionFilterFn) {
+        const parentVal = parentValue.value;
+        if (parentVal === null || parentVal === void 0 || parentVal === "") {
+          return [];
+        }
+        return normalizedProps.optionFilterFn(parentVal, options);
+      }
+      if (normalizedProps.dependsOn && !normalizedProps.optionFilterFn) {
+        const parentVal = parentValue.value;
+        if (parentVal === null || parentVal === void 0 || parentVal === "") {
+          return [];
+        }
+      }
+      return options;
+    });
+    if (normalizedProps.dependsOn && normalizedProps.autoReset !== false) {
+      watch(
+        parentValue,
+        (newParentValue, oldParentValue) => {
+          if (oldParentValue !== void 0 && newParentValue !== oldParentValue) {
+            formState.setValue(props.name, "");
+            formState.touchField(props.name);
+          }
+        },
+        { immediate: false }
+      );
+    }
+    const isDisabled = computed(() => {
+      if (props.disabled) return true;
+      if (normalizedProps.dependsOn) {
+        const parentVal = parentValue.value;
+        return parentVal === null || parentVal === void 0 || parentVal === "";
+      }
+      return false;
+    });
     const htmlAttrs = filterComponentPropsFromAttrs(propsDefinition, attrs);
     const selectProps = {
       value: formState.getValue(props.name),
@@ -5274,7 +5396,7 @@ function createDaisyUISelectField() {
         props.label || fieldMetadata.label,
         fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
       ] }),
-      /* @__PURE__ */ jsxs("select", { class: selectClass, disabled: props.disabled, "data-testid": `${formState.storeName}-select-field-${String(props.name)}`, ...selectProps, children: [
+      /* @__PURE__ */ jsxs("select", { class: selectClass, disabled: isDisabled.value, "data-testid": `${formState.storeName}-select-field-${String(props.name)}`, ...selectProps, children: [
         props.placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, selected: true, children: props.placeholder }),
         getOptions.value.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
       ] }),
@@ -8391,7 +8513,52 @@ function createPlainSelectField() {
       propsDefinition,
       attrs
     );
-    const options = normalizedProps.selectOptions || fieldMetadata.options || [];
+    const parentValue = computed(() => {
+      if (normalizedProps.dependsOn) {
+        return formState.getValue(normalizedProps.dependsOn);
+      }
+      return null;
+    });
+    const allOptions = computed(() => {
+      return normalizedProps.selectOptions || fieldMetadata.options || [];
+    });
+    const options = computed(() => {
+      const opts = allOptions.value;
+      if (normalizedProps.dependsOn && normalizedProps.optionFilterFn) {
+        const parentVal = parentValue.value;
+        if (parentVal === null || parentVal === void 0 || parentVal === "") {
+          return [];
+        }
+        return normalizedProps.optionFilterFn(parentVal, opts);
+      }
+      if (normalizedProps.dependsOn && !normalizedProps.optionFilterFn) {
+        const parentVal = parentValue.value;
+        if (parentVal === null || parentVal === void 0 || parentVal === "") {
+          return [];
+        }
+      }
+      return opts;
+    });
+    if (normalizedProps.dependsOn && normalizedProps.autoReset !== false) {
+      watch(
+        parentValue,
+        (newParentValue, oldParentValue) => {
+          if (oldParentValue !== void 0 && newParentValue !== oldParentValue) {
+            formState.setValue(props.name, "");
+            formState.touchField(props.name);
+          }
+        },
+        { immediate: false }
+      );
+    }
+    const isDisabled = computed(() => {
+      if (props.disabled) return true;
+      if (normalizedProps.dependsOn) {
+        const parentVal = parentValue.value;
+        return parentVal === null || parentVal === void 0 || parentVal === "";
+      }
+      return false;
+    });
     const htmlAttrs = filterComponentPropsFromAttrs(
       propsDefinition,
       attrs
@@ -8408,9 +8575,9 @@ function createPlainSelectField() {
       },
       ...htmlAttrs
     };
-    return /* @__PURE__ */ jsxs("select", { class: props.class, disabled: props.disabled, "data-testid": `${formState.storeName}-select-field-${String(props.name)}`, ...selectProps, children: [
+    return /* @__PURE__ */ jsxs("select", { class: props.class, disabled: isDisabled.value, "data-testid": `${formState.storeName}-select-field-${String(props.name)}`, ...selectProps, children: [
       props.placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, selected: true, children: props.placeholder }),
-      options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      options.value.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, children: option.label }, option.value))
     ] });
   };
   PlainSelectField.props = propsDefinition;
@@ -8967,6 +9134,6 @@ var ActionIcons = {
   dotsHorizontal: `<svg fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5 12h.01M12 12h.01M19 12h.01M6 12a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0zm7 0a1 1 0 11-2 0 1 1 0 012 0z" /></svg>`
 };
 
-export { ActionIcons, ErrorDisplay, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, ZiniaPlugin, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };
+export { ActionIcons, COMBOBOX_FIELD_PROP_NAMES, ErrorDisplay, LoadingDisplay, NoDataDisplay, SCHEMA_ID_SYMBOL, SELECT_FIELD_PROP_NAMES, ZINIA_DATA_TABLE_ACTIONS_KEY, ZINIA_DATA_TABLE_COLUMNS_KEY, ZINIA_DATA_TABLE_FILTER_INPUTS_KEY, ZINIA_DATA_TABLE_FILTER_OPERATORS_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_LOADING_KEY, ZINIA_DATA_TABLE_FILTER_OPTIONS_STATE_KEY, ZINIA_DATA_TABLE_KEY, ZINIA_DATA_TABLE_NAME_KEY, ZINIA_DATA_TABLE_OPTIONS_KEY, ZINIA_DATA_TABLE_SEARCH_INPUT_KEY, ZINIA_DELETE_MODAL_FIELDS_GENERIC_KEY, ZINIA_DELETE_MODAL_FIELDS_KEY, ZINIA_DELETE_MODAL_KEY, ZINIA_DELETE_MODAL_SCHEMA_KEY, ZINIA_DISPLAY_FIELDS_GENERIC_KEY, ZINIA_DISPLAY_FIELDS_KEY, ZINIA_DISPLAY_KEY, ZINIA_DISPLAY_SCHEMA_KEY, ZINIA_FIELDS_GENERIC_KEY, ZINIA_FIELDS_KEY, ZINIA_FORM_KEY, ZINIA_FORM_SCHEMA_KEY, ZiniaPlugin, clearAllMetadata, clearSchemaMetadata, createBaseComponents, createBaseDisplayComponents, createPartialStyle, createStyleTemplate, createTypedArrayField, createTypedSelectField, daisyUIStyle, extendStyle, generateDisplayComponents, generateFieldComponents, getAllSchemaMetadata, getDefaultStyle, getFieldMetadata, getRegisteredStyle, getRegisteredStyleNames, getSchemaId, hasRegisteredStyle, hasSchemaMetadata, mergeStyles, plainStyle, registerSchemaMetadata, registerStyle, setSchemaMetadata, useCursorDataTable, useDataTable, useDeleteModal, useDisplay, useForm, withMetadata };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map