@kerkhoff-ict/solora 2.5.2 → 2.5.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.
package/dist/index.css CHANGED
@@ -798,8 +798,6 @@
798
798
  }
799
799
  .popover-content {
800
800
  position: absolute;
801
- top: 100%;
802
- left: 0;
803
801
  min-width: 10rem;
804
802
  border-radius: 12px;
805
803
  margin-top: 0.5rem;
@@ -818,6 +816,44 @@
818
816
  padding: 0.5rem;
819
817
  color: var(--color-text-dark, #000);
820
818
  }
819
+ .popover.top-left .popover-content {
820
+ bottom: 100%;
821
+ left: 0;
822
+ }
823
+ .popover.top-center .popover-content {
824
+ bottom: 100%;
825
+ left: 50%;
826
+ transform: translateX(-50%);
827
+ }
828
+ .popover.top-right .popover-content {
829
+ bottom: 100%;
830
+ right: 0;
831
+ }
832
+ .popover.bottom-left .popover-content {
833
+ top: 100%;
834
+ left: 0;
835
+ }
836
+ .popover.bottom-center .popover-content {
837
+ top: 100%;
838
+ left: 50%;
839
+ transform: translateX(-50%);
840
+ }
841
+ .popover.bottom-right .popover-content {
842
+ top: 100%;
843
+ right: 0;
844
+ }
845
+ .popover.left .popover-content {
846
+ right: 100%;
847
+ top: 50%;
848
+ transform: translateY(-50%);
849
+ margin: 0 0.5rem;
850
+ }
851
+ .popover.right .popover-content {
852
+ left: 100%;
853
+ top: 50%;
854
+ transform: translateY(-50%);
855
+ margin: 0 0.5rem;
856
+ }
821
857
  .popover.sol-pop-w-16 {
822
858
  width: 4rem;
823
859
  }
package/dist/index.js CHANGED
@@ -1922,6 +1922,9 @@ function initDropdowns() {
1922
1922
  function initInput() {
1923
1923
  const inputs = document.querySelectorAll(".sol-input");
1924
1924
  inputs.forEach((input) => {
1925
+ if (input.dataset.solIgnore !== void 0) {
1926
+ return;
1927
+ }
1925
1928
  const form = input.closest("form");
1926
1929
  if (form && !form.noValidate) {
1927
1930
  form.noValidate = true;
@@ -1952,18 +1955,12 @@ function updateValidationState(input, errorDisplay) {
1952
1955
  return;
1953
1956
  }
1954
1957
  let message = "Ongeldige invoer";
1955
- if (input.validity.valueMissing) {
1956
- message = "Dit veld is verplicht";
1957
- } else if (input.validity.typeMismatch) {
1958
+ if (input.validity.valueMissing) message = "Dit veld is verplicht";
1959
+ else if (input.validity.typeMismatch) {
1958
1960
  if (input.type === "email") message = "Voer een geldig e-mailadres in";
1959
1961
  if (input.type === "url") message = "Voer een geldige link in";
1960
- } else if (input.validity.tooShort) {
1961
- message = `Minimaal ${input.minLength} tekens nodig`;
1962
- } else if (input.validity.rangeUnderflow) {
1963
- message = `Minimum waarde is ${input.min}`;
1964
- } else if (input.validity.patternMismatch) {
1965
- message = "De opmaak is onjuist";
1966
- }
1962
+ } else if (input.validity.tooShort) message = `Minimaal ${input.minLength} tekens`;
1963
+ else if (input.validity.rangeUnderflow) message = `Minimum is ${input.min}`;
1967
1964
  errorDisplay.textContent = message;
1968
1965
  errorDisplay.style.display = "block";
1969
1966
  input.classList.add("is-invalid");
@@ -2326,22 +2323,38 @@ function initThemeToggle(elementSelector = ".sol-theme-toggle") {
2326
2323
  // src/components/popover.js
2327
2324
  function initPopovers() {
2328
2325
  if (typeof window === "undefined") return;
2329
- document.querySelectorAll(".popover").forEach((pop) => {
2326
+ const allPopovers = document.querySelectorAll(".popover");
2327
+ allPopovers.forEach((pop) => {
2330
2328
  if (pop.dataset.initialized) return;
2331
2329
  pop.dataset.initialized = "true";
2332
2330
  const content = pop.querySelector(".popover-content");
2333
2331
  if (!content) return;
2334
- const toggle = () => pop.classList.toggle("open");
2335
- const close = () => pop.classList.remove("open");
2336
- pop.addEventListener("click", (e) => {
2332
+ const closeAllOthers = () => {
2333
+ allPopovers.forEach((p) => {
2334
+ if (p !== pop) p.classList.remove("open");
2335
+ });
2336
+ };
2337
+ const toggle = (e) => {
2337
2338
  e.stopPropagation();
2338
- toggle();
2339
- });
2339
+ const isOpen = pop.classList.contains("open");
2340
+ closeAllOthers();
2341
+ if (!isOpen) {
2342
+ pop.classList.add("open");
2343
+ } else {
2344
+ pop.classList.remove("open");
2345
+ }
2346
+ };
2347
+ const trigger = pop.querySelector(".popover-btn") || pop.querySelector("input") || pop;
2348
+ trigger.addEventListener("click", toggle);
2340
2349
  document.addEventListener("click", (e) => {
2341
- if (!pop.contains(e.target)) close();
2350
+ if (!pop.contains(e.target)) {
2351
+ pop.classList.remove("open");
2352
+ }
2342
2353
  });
2343
2354
  document.addEventListener("keydown", (e) => {
2344
- if (e.key === "Escape") close();
2355
+ if (e.key === "Escape") {
2356
+ pop.classList.remove("open");
2357
+ }
2345
2358
  });
2346
2359
  });
2347
2360
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerkhoff-ict/solora",
3
- "version": "2.5.2",
3
+ "version": "2.5.4",
4
4
  "description": "Simple CSS component library",
5
5
  "main": "dist/index.js",
6
6
  "style": "dist/index.css",