@dragonmastery/zinia-forms-core 0.3.2 → 0.3.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (3) hide show
  1. package/dist/index.js +86 -11
  2. package/dist/index.js.map +1 -1
  3. package/package.json +1 -1
package/dist/index.js CHANGED
@@ -3983,6 +3983,7 @@ function createDaisyUIComboboxField() {
3983
3983
  const isTouched2 = formState.isTouched(props.name);
3984
3984
  const comboboxRoot = ref(null);
3985
3985
  const inputElement = ref(null);
3986
+ const dropdownPanel = ref(null);
3986
3987
  const selectedIndex = computed({
3987
3988
  get: () => formState.getSelectedIndex(props.name),
3988
3989
  set: (value) => formState.setSelectedIndex(props.name, value)
@@ -4013,7 +4014,6 @@ function createDaisyUIComboboxField() {
4013
4014
  });
4014
4015
  const inputClass = [
4015
4016
  "input",
4016
- "w-full",
4017
4017
  "pr-10",
4018
4018
  props.size ? `input-${props.size}` : "",
4019
4019
  props.variant ? `input-${props.variant}` : "",
@@ -4037,7 +4037,8 @@ function createDaisyUIComboboxField() {
4037
4037
  },
4038
4038
  onBlur: (event) => {
4039
4039
  const relatedTarget = event.relatedTarget;
4040
- if (comboboxRoot.value?.contains(relatedTarget)) {
4040
+ const root = comboboxRoot.value || inputElement.value?.closest("label.floating-label");
4041
+ if (root?.contains(relatedTarget)) {
4041
4042
  return;
4042
4043
  }
4043
4044
  const displayValue = String(displayText.value || "").trim();
@@ -4080,11 +4081,48 @@ function createDaisyUIComboboxField() {
4080
4081
  const newIndex = currentIndex < 0 ? 0 : (currentIndex + 1) % totalOptions;
4081
4082
  selectedIndex.value = newIndex;
4082
4083
  nextTick(() => {
4083
- const selectedElement = comboboxRoot.value?.querySelector(
4084
+ let panel = null;
4085
+ if (dropdownPanel.value) {
4086
+ panel = dropdownPanel.value;
4087
+ } else if (inputElement.value) {
4088
+ const comboboxContainer = inputElement.value.closest('[role="combobox"]');
4089
+ if (comboboxContainer) {
4090
+ panel = comboboxContainer.querySelector("div.absolute.overflow-auto");
4091
+ if (!panel) {
4092
+ const listbox = comboboxContainer.querySelector("#combobox-listbox");
4093
+ if (listbox) {
4094
+ panel = listbox.parentElement;
4095
+ }
4096
+ }
4097
+ }
4098
+ }
4099
+ if (!panel) {
4100
+ const listbox = document.querySelector(`#combobox-listbox`);
4101
+ if (listbox) {
4102
+ panel = listbox.parentElement;
4103
+ }
4104
+ }
4105
+ if (!panel) {
4106
+ return;
4107
+ }
4108
+ const selectedElement = panel.querySelector(
4084
4109
  newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
4085
4110
  );
4086
- if (selectedElement) {
4087
- selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
4111
+ if (!selectedElement) {
4112
+ return;
4113
+ }
4114
+ const listElement = selectedElement.parentElement;
4115
+ if (!listElement) {
4116
+ return;
4117
+ }
4118
+ const elementTop = selectedElement.offsetTop;
4119
+ const elementHeight = selectedElement.offsetHeight;
4120
+ const containerHeight = panel.clientHeight;
4121
+ const containerScrollTop = panel.scrollTop;
4122
+ if (elementTop < containerScrollTop) {
4123
+ panel.scrollTop = elementTop;
4124
+ } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
4125
+ panel.scrollTop = elementTop + elementHeight - containerHeight;
4088
4126
  }
4089
4127
  });
4090
4128
  }
@@ -4099,11 +4137,48 @@ function createDaisyUIComboboxField() {
4099
4137
  const newIndex = currentIndex < 0 ? totalOptionsUp - 1 : (currentIndex - 1 + totalOptionsUp) % totalOptionsUp;
4100
4138
  selectedIndex.value = newIndex;
4101
4139
  nextTick(() => {
4102
- const selectedElement = comboboxRoot.value?.querySelector(
4140
+ let panel = null;
4141
+ if (dropdownPanel.value) {
4142
+ panel = dropdownPanel.value;
4143
+ } else if (inputElement.value) {
4144
+ const comboboxContainer = inputElement.value.closest('[role="combobox"]');
4145
+ if (comboboxContainer) {
4146
+ panel = comboboxContainer.querySelector("div.absolute.overflow-auto");
4147
+ if (!panel) {
4148
+ const listbox = comboboxContainer.querySelector("#combobox-listbox");
4149
+ if (listbox) {
4150
+ panel = listbox.parentElement;
4151
+ }
4152
+ }
4153
+ }
4154
+ }
4155
+ if (!panel) {
4156
+ const listbox = document.querySelector(`#combobox-listbox`);
4157
+ if (listbox) {
4158
+ panel = listbox.parentElement;
4159
+ }
4160
+ }
4161
+ if (!panel) {
4162
+ return;
4163
+ }
4164
+ const selectedElement = panel.querySelector(
4103
4165
  newIndex === filteredOptions.value.length ? "#option-new" : `#option-${newIndex}`
4104
4166
  );
4105
- if (selectedElement) {
4106
- selectedElement.scrollIntoView({ block: "nearest", behavior: "smooth" });
4167
+ if (!selectedElement) {
4168
+ return;
4169
+ }
4170
+ const listElement = selectedElement.parentElement;
4171
+ if (!listElement) {
4172
+ return;
4173
+ }
4174
+ const elementTop = selectedElement.offsetTop;
4175
+ const elementHeight = selectedElement.offsetHeight;
4176
+ const containerHeight = panel.clientHeight;
4177
+ const containerScrollTop = panel.scrollTop;
4178
+ if (elementTop < containerScrollTop) {
4179
+ panel.scrollTop = elementTop;
4180
+ } else if (elementTop + elementHeight > containerScrollTop + containerHeight) {
4181
+ panel.scrollTop = elementTop + elementHeight - containerHeight;
4107
4182
  }
4108
4183
  });
4109
4184
  }
@@ -4142,12 +4217,12 @@ function createDaisyUIComboboxField() {
4142
4217
  name: props.name,
4143
4218
  ...htmlAttrs
4144
4219
  };
4145
- return /* @__PURE__ */ jsxs("label", { ref: comboboxRoot, class: "floating-label w-full", children: [
4220
+ return /* @__PURE__ */ jsxs("label", { ref: comboboxRoot, class: "floating-label", children: [
4146
4221
  !props.hideLabel && /* @__PURE__ */ jsxs("span", { children: [
4147
4222
  props.label || fieldMetadata.label,
4148
4223
  fieldMetadata.isRequired && /* @__PURE__ */ jsx("span", { class: "text-error", children: " *" })
4149
4224
  ] }),
4150
- /* @__PURE__ */ jsxs("div", { class: "relative", role: "combobox", "aria-expanded": showDropdown.value, "aria-haspopup": "listbox", children: [
4225
+ /* @__PURE__ */ jsxs("div", { class: "relative inline-block max-w-full", style: "min-width: clamp(3rem, 20rem, 100%);", role: "combobox", "aria-expanded": showDropdown.value, "aria-haspopup": "listbox", children: [
4151
4226
  /* @__PURE__ */ jsx(
4152
4227
  "input",
4153
4228
  {
@@ -4172,7 +4247,7 @@ function createDaisyUIComboboxField() {
4172
4247
  children: /* @__PURE__ */ jsx("path", { "stroke-linecap": "round", "stroke-linejoin": "round", d: "M8 9l4-4 4 4m0 6l-4 4-4-4" })
4173
4248
  }
4174
4249
  ) }),
4175
- showDropdown.value && /* @__PURE__ */ jsx("div", { class: "absolute z-50 w-full mt-1 bg-base-100 border border-base-300 rounded-box shadow-lg max-h-60 overflow-auto", children: filteredOptions.value.length > 0 || isNewValue.value ? /* @__PURE__ */ jsxs("ul", { id: "combobox-listbox", class: "menu w-full", role: "listbox", children: [
4250
+ 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: [
4176
4251
  filteredOptions.value.map((option, index) => /* @__PURE__ */ jsx(
4177
4252
  "li",
4178
4253
  {