@onsvisual/svelte-components 1.1.16 → 1.1.18

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.
@@ -241,8 +241,8 @@
241
241
  const columns = [[menu.topics[0]], [menu.topics[1], menu.topics[2]], [menu.topics[3]]];
242
242
 
243
243
  onMount(() => {
244
- const hasBodyClass = "className" in document?.body || {};
245
- const bodyClassString = document?.body?.className || "";
244
+ const hasBodyClass = "className" in document.body || {};
245
+ const bodyClassString = document.body?.className || "";
246
246
  if (hasBodyClass && !bodyClassString.includes("ons-js-enabled"))
247
247
  document.body.className = bodyClassString + " ons-js-enabled";
248
248
  initNav(el?.parentElement || document);
@@ -630,4 +630,13 @@
630
630
  :global(.dark-mode .ons-search__input) {
631
631
  color: var(--ons-color-black);
632
632
  }
633
+
634
+ /* Fixes for no JS styling issue */
635
+ .ons-header__grid-top {
636
+ flex-direction: inherit;
637
+ align-items: center;
638
+ }
639
+ .ons-header__grid-top .ons-header__menu-links {
640
+ width: auto;
641
+ }
633
642
  </style>
@@ -39,6 +39,11 @@
39
39
  * @type {boolean}
40
40
  */
41
41
  export let autoClear = mode === "search";
42
+ /**
43
+ * Auto focus the search input when it is created
44
+ * @type {boolean}
45
+ */
46
+ export let autoFocus = false;
42
47
  /**
43
48
  * A label to describe the element (expected for accessibility)
44
49
  * @type {string|null}
@@ -183,6 +188,7 @@
183
188
  inputElement = element.querySelector(`#${id}`);
184
189
  // setInputValue(value?.[labelKey] || "");
185
190
  inputElement.addEventListener("blur", inputChange);
191
+ if (autoFocus) inputElement.focus();
186
192
  }
187
193
 
188
194
  // In case input value is updated from outside component
@@ -13,6 +13,7 @@ export default class Select extends SvelteComponentTyped<{
13
13
  mode?: "default" | "search" | undefined;
14
14
  clearable?: boolean | undefined;
15
15
  autoClear?: boolean | undefined;
16
+ autoFocus?: boolean | undefined;
16
17
  labelKey?: string | undefined;
17
18
  groupKey?: string | null | undefined;
18
19
  renderFallback?: boolean | undefined;
@@ -43,6 +44,7 @@ declare const __propDef: {
43
44
  mode?: "default" | "search" | undefined;
44
45
  clearable?: boolean | undefined;
45
46
  autoClear?: boolean | undefined;
47
+ autoFocus?: boolean | undefined;
46
48
  labelKey?: string | undefined;
47
49
  groupKey?: string | null | undefined;
48
50
  renderFallback?: boolean | undefined;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onsvisual/svelte-components",
3
- "version": "1.1.16",
3
+ "version": "1.1.18",
4
4
  "scripts": {
5
5
  "dev": "vite dev",
6
6
  "build": "npm run build:package && npm run build:docs",