@polyipseity/obsidian-plugin-library 1.33.1 → 1.34.0

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.
@@ -5,20 +5,19 @@ import type { t as i18nt } from "i18next";
5
5
 
6
6
  declare const FindComponent: Component<
7
7
  {
8
- readonly i18n?: typeof i18nt;
9
- readonly params?: Params;
10
- readonly onClose?: () => unknown;
11
- readonly onFind?: (direction: Direction, params: Params) => unknown;
12
- readonly onParamsChanged?: (params: Params) => unknown;
13
- readonly results?: string;
14
- readonly focused?: boolean;
8
+ i18n?: typeof i18nt;
9
+ // `params` is bindable
10
+ params?: DeepWritable<Params>;
11
+ results?: string;
12
+ onClose?: () => unknown;
13
+ onFind?: (direction: Direction, params: Params) => unknown;
14
+ onParamsChanged?: (params: Params) => unknown;
15
+ initialFocus?: boolean;
15
16
  },
16
17
  {
17
- readonly setI18n: (i18n: typeof i18nt) => void;
18
- readonly getParamsRef: () => DeepWritable<Params>;
19
- readonly setResults: (results: string) => void;
20
18
  readonly focus: () => void;
21
19
  readonly blur: () => void;
22
- }
20
+ },
21
+ "params"
23
22
  >;
24
23
  export default FindComponent;
@@ -2,10 +2,10 @@
2
2
 
3
3
  <script module lang="typescript">
4
4
  import type { Direction, Params } from "./find.js";
5
- import { cloneAsWritable, consumeEvent, getKeyModifiers } from "../util.js";
5
+ import { consumeEvent, getKeyModifiers } from "../util.js";
6
6
  import type { DeepWritable } from "ts-essentials";
7
7
  import { t as i18nt } from "i18next";
8
- import { isEmpty } from "lodash-es";
8
+ import { isEmpty, noop } from "lodash-es";
9
9
  import { onMount } from "svelte";
10
10
  import { setIcon } from "obsidian";
11
11
  import { slide } from "svelte/transition";
@@ -14,47 +14,32 @@
14
14
  <script lang="typescript">
15
15
  const {
16
16
  i18n = i18nt,
17
- params = {
17
+ // `params` is bindable
18
+ params = $bindable({
18
19
  caseSensitive: false,
19
20
  findText: "",
20
21
  regex: false,
21
22
  wholeWord: false,
22
- },
23
- onClose = () => {},
24
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
25
- onFind = (_direction, _params) => {},
26
- // eslint-disable-next-line @typescript-eslint/no-unused-vars
27
- onParamsChanged = (_params) => {},
23
+ }),
28
24
  results = "",
29
- focused = false,
25
+ onClose = noop,
26
+ onFind = noop,
27
+ onParamsChanged = noop,
28
+ initialFocus = false,
30
29
  }: {
31
30
  readonly i18n?: typeof i18nt;
32
- readonly params?: Params;
31
+ params?: DeepWritable<Params>;
32
+ readonly results?: string;
33
33
  readonly onClose?: () => unknown;
34
34
  readonly onFind?: (direction: Direction, params: Params) => unknown;
35
35
  readonly onParamsChanged?: (params: Params) => unknown;
36
- readonly results?: string;
37
- readonly focused?: boolean;
36
+ readonly initialFocus?: boolean;
38
37
  } = $props();
39
38
 
40
- let stateI18n = $state.raw(i18n);
41
- const stateParams = $state(cloneAsWritable(params));
42
- let stateResults = $state.raw(results);
43
-
44
39
  $effect(() => {
45
- onParamsChanged(stateParams);
40
+ onParamsChanged(params);
46
41
  });
47
42
 
48
- export function setI18n(i18n0: typeof i18nt): void {
49
- stateI18n = i18n0;
50
- }
51
- export function getParamsRef(): DeepWritable<Params> {
52
- return stateParams;
53
- }
54
- export function setResults(results0: string): void {
55
- stateResults = results0;
56
- }
57
-
58
43
  let inputElement: HTMLElement | null = null;
59
44
  export function focus(): void {
60
45
  inputElement?.focus();
@@ -63,7 +48,8 @@
63
48
  inputElement?.blur();
64
49
  }
65
50
 
66
- if (focused) {
51
+ // svelte-ignore state_referenced_locally
52
+ if (initialFocus) {
67
53
  onMount(focus);
68
54
  }
69
55
  </script>
@@ -72,79 +58,87 @@
72
58
  <div class="document-search">
73
59
  <div class="document-search-buttons">
74
60
  <button
61
+ type="button"
75
62
  class={`document-search-button${
76
- stateParams.caseSensitive ? " mod-cta" : ""
63
+ params.caseSensitive ? " mod-cta" : ""
77
64
  }`}
78
- aria-label={stateI18n("components.find.case-sensitive")}
65
+ aria-label={i18n("components.find.case-sensitive")}
79
66
  onclick={(event) => {
80
- stateParams.caseSensitive = !stateParams.caseSensitive;
67
+ params.caseSensitive = !params.caseSensitive;
81
68
  consumeEvent(event);
82
69
  }}
83
- use:setIcon={stateI18n("asset:components.find.case-sensitive-icon")}
70
+ use:setIcon={i18n("asset:components.find.case-sensitive-icon")}
84
71
  ></button>
85
72
  <button
86
- class={`document-search-button${
87
- stateParams.wholeWord ? " mod-cta" : ""
88
- }`}
89
- aria-label={stateI18n("components.find.whole-word")}
73
+ type="button"
74
+ class={`document-search-button${params.wholeWord ? " mod-cta" : ""}`}
75
+ aria-label={i18n("components.find.whole-word")}
90
76
  onclick={(event) => {
91
- stateParams.wholeWord = !stateParams.wholeWord;
77
+ params.wholeWord = !params.wholeWord;
92
78
  consumeEvent(event);
93
79
  }}
94
- use:setIcon={stateI18n("asset:components.find.whole-word-icon")}
80
+ use:setIcon={i18n("asset:components.find.whole-word-icon")}
95
81
  ></button>
96
82
  <button
97
- class={`document-search-button${stateParams.regex ? " mod-cta" : ""}`}
98
- aria-label={stateI18n("components.find.regex")}
83
+ type="button"
84
+ class={`document-search-button${params.regex ? " mod-cta" : ""}`}
85
+ aria-label={i18n("components.find.regex")}
99
86
  onclick={(event) => {
100
- stateParams.regex = !stateParams.regex;
87
+ params.regex = !params.regex;
101
88
  consumeEvent(event);
102
89
  }}
103
- use:setIcon={stateI18n("asset:components.find.regex-icon")}
90
+ use:setIcon={i18n("asset:components.find.regex-icon")}
104
91
  ></button>
105
92
  </div>
106
93
  <input
107
94
  class="document-search-input"
108
95
  type="text"
109
- placeholder={stateI18n("components.find.input-placeholder")}
96
+ placeholder={i18n("components.find.input-placeholder")}
110
97
  role="searchbox"
111
- bind:value={stateParams.findText}
98
+ bind:value={params.findText}
112
99
  bind:this={inputElement}
113
100
  onkeydown={(event) => {
114
101
  if (event.key === "Escape" && isEmpty(getKeyModifiers(event))) {
115
102
  onClose();
116
103
  consumeEvent(event);
117
104
  }
105
+ if (event.key === "Enter" && isEmpty(getKeyModifiers(event))) {
106
+ onFind("next", params);
107
+ consumeEvent(event);
108
+ }
118
109
  }}
119
110
  />
120
111
  <div class="document-search-buttons">
121
112
  <button
113
+ type="button"
122
114
  class="document-search-button"
123
- aria-label={stateI18n("components.find.previous")}
115
+ aria-label={i18n("components.find.previous")}
124
116
  onclick={(event) => {
125
- onFind("previous", stateParams);
117
+ onFind("previous", params);
126
118
  consumeEvent(event);
127
119
  }}
128
- use:setIcon={stateI18n("asset:components.find.previous-icon")}
120
+ use:setIcon={i18n("asset:components.find.previous-icon")}
129
121
  ></button>
130
122
  <button
123
+ type="button"
131
124
  class="document-search-button"
132
- aria-label={stateI18n("components.find.next")}
125
+ aria-label={i18n("components.find.next")}
133
126
  onclick={(event) => {
134
- onFind("next", stateParams);
127
+ onFind("next", params);
135
128
  consumeEvent(event);
136
129
  }}
137
- use:setIcon={stateI18n("asset:components.find.next-icon")}
130
+ use:setIcon={i18n("asset:components.find.next-icon")}
138
131
  ></button>
139
- <div class="document-search-results">{stateResults}</div>
132
+ <div class="document-search-results" aria-live="polite">{results}</div>
140
133
  <button
134
+ type="button"
141
135
  class="document-search-close-button"
142
- aria-label={stateI18n("components.find.close")}
136
+ aria-label={i18n("components.find.close")}
143
137
  onclick={(event) => {
144
138
  onClose();
145
139
  consumeEvent(event);
146
140
  }}
147
- use:setIcon={stateI18n("asset:components.find.close-icon")}
141
+ use:setIcon={i18n("asset:components.find.close-icon")}
148
142
  ></button>
149
143
  </div>
150
144
  </div>
package/package.json CHANGED
@@ -37,7 +37,7 @@
37
37
  "@commitlint/cli": "^20.4.1",
38
38
  "@commitlint/config-conventional": "^20.4.1",
39
39
  "@eslint/compat": "^2.0.2",
40
- "@eslint/js": "^10.0.1",
40
+ "@eslint/js": "^9.39.2",
41
41
  "@polyipseity/obsidian": "~1.4.11",
42
42
  "@types/async-lock": "^1.4.2",
43
43
  "@types/browser-util-inspect": "^0.2.4",
@@ -143,7 +143,7 @@
143
143
  "style": "dist/style.css",
144
144
  "type": "module",
145
145
  "types": "dist/src/index.d.ts",
146
- "version": "1.33.1",
146
+ "version": "1.34.0",
147
147
  "workspaces": [],
148
148
  "scripts": {
149
149
  "build": "npm run check && npm run build:force",