Skip to content

Commit 6d355b6

Browse files
TemplarianTemplarian
committed
Move autocomplete to a new component.
1 parent 62fc950 commit 6d355b6

12 files changed

Lines changed: 264 additions & 60 deletions

File tree

‎src/components/pg/inputText/README.md‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -30,9 +30,9 @@ import { PgInputText } from '@pictogrammers/components/pgInputText';
3030

3131
| CSS Variables | Default | Description |
3232
| ------------------- | --------- | ----------- |
33-
| `--pg-button-padding-inline` | `0.5rem` | Padding inline. |
34-
| `--pg-button-padding-inline-start` | `0.5rem` | Padding inline start. |
35-
| `--pg-button-padding-inline-end` | `0.5rem` | Padding inline end. |
36-
| `--pg-button-padding-block` | `0.25rem` | Padding block. |
37-
| `--pg-button-padding-block-start` | `0.25rem` | Padding block start. |
38-
| `--pg-button-padding-block-end` | `0.25rem` | Padding block end. |
33+
| `--pg-input-text-padding-inline` | `0.5rem` | Padding inline. |
34+
| `--pg-input-text-padding-inline-start` | `0.5rem` | Padding inline start. |
35+
| `--pg-input-text-padding-inline-end` | `0.5rem` | Padding inline end. |
36+
| `--pg-input-text-padding-block` | `0.25rem` | Padding block. |
37+
| `--pg-input-text-padding-block-start` | `0.25rem` | Padding block start. |
38+
| `--pg-input-text-padding-block-end` | `0.25rem` | Padding block end. |

‎src/components/pg/inputTextarea/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -36,4 +36,4 @@ import { PgInputTextarea } from '@pictogrammers/components/pgInputTextarea';
3636
| `--pg-input-textarea-padding-inline-end` | `0.5rem` | Padding inline end. |
3737
| `--pg-input-textarea-padding-block` | `0.25rem` | Padding block. |
3838
| `--pg-input-textarea-padding-block-start` | `0.25rem` | Padding block start. |
39-
| `--pg-input-textarea-padding-block-end` | `0.25rem` | Padding block end. |
39+
| `--pg-input-textarea-padding-block-end` | `0.25rem` | Padding block end. |

‎src/components/pg/inputTextarea/__examples__/basic/basic.html‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,4 @@
66
<div>
77
<code>oninput: <span part="value2"></span></code>
88
</div>
9-
<div>
10-
<code>oncaret: <span part="value3"></span></code>
11-
</div>
129
</div>

‎src/components/pg/inputTextarea/__examples__/basic/basic.ts‎

Lines changed: 1 addition & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -12,12 +12,10 @@ export default class XPgInputTextareaBasic extends HTMLElement {
1212
@Part() $input: PgInputTextarea;
1313
@Part() $value1: HTMLSpanElement;
1414
@Part() $value2: HTMLSpanElement;
15-
@Part() $value3: HTMLSpanElement;
1615

1716
connectedCallback() {
1817
this.$input.addEventListener('change', this.#handleChange.bind(this));
1918
this.$input.addEventListener('input', this.#handleInput.bind(this));
20-
this.$input.addEventListener('caret', this.#handleCaret.bind(this));
2119
}
2220

2321
#handleChange(e: CustomEvent) {
@@ -29,9 +27,4 @@ export default class XPgInputTextareaBasic extends HTMLElement {
2927
const { value } = e.detail;
3028
this.$value2.textContent = value;
3129
}
32-
33-
#handleCaret(e: CustomEvent) {
34-
const { column, row } = e.detail;
35-
this.$value3.textContent = `${column}, ${row}`;
36-
}
37-
}
30+
}

‎src/components/pg/inputTextarea/inputTextarea.ts‎

Lines changed: 0 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -3,28 +3,6 @@ import { Component, Prop, Part } from '@pictogrammers/element';
33
import template from './inputTextarea.html';
44
import style from './inputTextarea.css';
55

6-
function getCursorRowCol(
7-
textArea: HTMLTextAreaElement
8-
): { row: number; col: number } {
9-
// Get the character index of the cursor
10-
const cursorIndex = textArea.selectionStart;
11-
12-
// Get the text content up to the cursor position
13-
const textUpToCursor = textArea.value.substring(0, cursorIndex);
14-
15-
// Split the text by newline characters to get all lines
16-
const lines = textUpToCursor.split('\n');
17-
18-
// The row (line number) is the number of lines (array length).
19-
// Rows are typically 1-indexed, so we can return the length directly.
20-
const row = lines.length - 1;
21-
22-
// The column is the length of the last line in the `lines` array.
23-
const col = lines[lines.length - 1].length; // +1 to make it 1-indexed
24-
25-
return { row, col };
26-
}
27-
286
@Component({
297
selector: 'pg-input-textarea',
308
style,
@@ -43,10 +21,6 @@ export default class PgInputTextarea extends HTMLElement {
4321
this.$input.addEventListener('change', this.handleChange.bind(this));
4422
this.$input.addEventListener('focus', this.handleFocus.bind(this));
4523
this.$input.addEventListener('focus', this.handleBlur.bind(this));
46-
47-
this.$input.addEventListener('input', this.handleCursorMove.bind(this));
48-
this.$input.addEventListener('click', this.handleCursorMove.bind(this));
49-
this.$input.addEventListener('keyup', this.handleCursorMove.bind(this));
5024
}
5125

5226
focus() {
@@ -93,22 +67,6 @@ export default class PgInputTextarea extends HTMLElement {
9367
);
9468
}
9569

96-
#currentColumn = -1;
97-
#currentRow = -1;
98-
handleCursorMove(event: Event) {
99-
const textArea = event.target as HTMLTextAreaElement;
100-
const { row, col: column } = getCursorRowCol(textArea);
101-
if (this.#currentColumn !== column && this.#currentRow !== row) {
102-
this.dispatchEvent(new CustomEvent('caret', {
103-
detail: {
104-
column,
105-
row
106-
}
107-
}));
108-
}
109-
console.log(`Cursor position: Row ${row}, Column ${column}`);
110-
}
111-
11270
handleFocus(e: any) {
11371
e.preventDefault();
11472
this.dispatchEvent(new CustomEvent('focus'));

‎src/components/pg/inputTextareaAutocomplete/README.md‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# `<pg-input-textarea-autocomplete>`
2+
3+
The `pg-input-textarea-autocomplete` component supports everything `pg-input-textarea` and adds tracking for the caret position implementing a list of options.
4+
5+
```typescript
6+
import '@pictogrammers/components/pgInputTextareaAutocomplete';
7+
import { PgInputTextarea } from '@pictogrammers/components/pgInputTextareaAutocomplete';
8+
```
9+
10+
```html
11+
<pg-input-textarea-autocomplete value="50"></pg-input-textarea-autocomplete>
12+
```
13+
14+
## Attributes
15+
16+
| Attributes | Tested | Description |
17+
| ----------- | -------- | ----------- |
18+
| name | | Unique name in `pg-form` |
19+
| value | | Field value |
20+
| placeholder | | Placeholder text |
21+
22+
## Methods
23+
24+
### `setOptions`
25+
26+
```typescript
27+
this.$input.setOptions([{
28+
label: 'name',
29+
value: 'name'
30+
}]);
31+
```
32+
33+
## Events
34+
35+
| Events | Tested | Description |
36+
| ---------- | -------- | ----------- |
37+
| change | | `{ detail: { value }` |
38+
| input | | `{ detail: { value }` |
39+
| caret | | `{ detail: { column, row }}` |
40+
41+
## CSS Variables
42+
43+
See: `pg-textarea`.

‎src/components/pg/inputTextareaAutocomplete/__examples__/basic/basic.html‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<div class="example">
2+
<pg-input-textarea-autocomplete part="input" value="Hello World!"></pg-input-textarea-autocomplete>
3+
<div>
4+
<code>onchange: <span part="value1"></span></code>
5+
</div>
6+
<div>
7+
<code>oninput: <span part="value2"></span></code>
8+
</div>
9+
<div>
10+
<code>oncaret: <span part="value3"></span></code>
11+
</div>
12+
</div>

‎src/components/pg/inputTextareaAutocomplete/__examples__/basic/basic.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import { Component, Part } from '@pictogrammers/element';
2+
import PgInputTextareaAutocomplete from '../../inputTextareaAutocomplete';
3+
4+
import template from './basic.html';
5+
6+
@Component({
7+
selector: 'x-pg-input-textarea-autocomplete-basic',
8+
template,
9+
})
10+
export default class XPgInputTextareaBasic extends HTMLElement {
11+
12+
@Part() $input: PgInputTextareaAutocomplete;
13+
@Part() $value1: HTMLSpanElement;
14+
@Part() $value2: HTMLSpanElement;
15+
@Part() $value3: HTMLSpanElement;
16+
17+
connectedCallback() {
18+
this.$input.addEventListener('change', this.#handleChange.bind(this));
19+
this.$input.addEventListener('input', this.#handleInput.bind(this));
20+
this.$input.addEventListener('caret', this.#handleCaret.bind(this));
21+
}
22+
23+
#handleChange(e: CustomEvent) {
24+
const { value } = e.detail;
25+
this.$value1.textContent = value;
26+
}
27+
28+
#handleInput(e: CustomEvent) {
29+
const { value } = e.detail;
30+
this.$value2.textContent = value;
31+
}
32+
33+
#handleCaret(e: CustomEvent) {
34+
const { column, row } = e.detail;
35+
this.$value3.textContent = `${column}, ${row}`;
36+
}
37+
}

‎src/components/pg/inputTextareaAutocomplete/inputTextareaAutocomplete.css‎

Whitespace-only changes.

‎src/components/pg/inputTextareaAutocomplete/inputTextareaAutocomplete.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
<parent />

0 commit comments

Comments
 (0)