https://pupwife.com/projects/chatroom/scripts/components/Input.js

1/**
2 * Input Component (Vencord-inspired)
3 * Reusable input components
4 */
5
6window.ChatroomInput = (function() {
7    'use strict';
8
9    /**
10     * Create text input
11     */
12    function createTextInput(options = {}) {
13        const {
14            placeholder = '',
15            value = '',
16            onChange = null,
17            onEnter = null,
18            className = '',
19            maxLength = null,
20            disabled = false,
21            type = 'text'
22        } = options;
23
24        const input = document.createElement('input');
25        input.type = type;
26        input.className = `chatroom-input ${className}`;
27        input.placeholder = placeholder;
28        input.value = value;
29        if (maxLength) input.maxLength = maxLength;
30        if (disabled) input.disabled = true;
31
32        if (onChange) {
33            input.addEventListener('input', (e) => onChange(e.target.value, e));
34        }
35
36        if (onEnter) {
37            input.addEventListener('keydown', (e) => {
38                if (e.key === 'Enter' && !e.shiftKey) {
39                    e.preventDefault();
40                    onEnter(e.target.value, e);
41                }
42            });
43        }
44
45        return input;
46    }
47
48    /**
49     * Create textarea
50     */
51    function createTextarea(options = {}) {
52        const {
53            placeholder = '',
54            value = '',
55            onChange = null,
56            onEnter = null,
57            className = '',
58            maxLength = null,
59            rows = 3,
60            disabled = false,
61            autoResize = true
62        } = options;
63
64        const textarea = document.createElement('textarea');
65        textarea.className = `chatroom-textarea ${className}`;
66        textarea.placeholder = placeholder;
67        textarea.value = value;
68        textarea.rows = rows;
69        if (maxLength) textarea.maxLength = maxLength;
70        if (disabled) textarea.disabled = true;
71
72        if (autoResize) {
73            textarea.addEventListener('input', () => {
74                textarea.style.height = 'auto';
75                textarea.style.height = textarea.scrollHeight + 'px';
76            });
77        }
78
79        if (onChange) {
80            textarea.addEventListener('input', (e) => onChange(e.target.value, e));
81        }
82
83        if (onEnter) {
84            textarea.addEventListener('keydown', (e) => {
85                if (e.key === 'Enter' && !e.shiftKey) {
86                    e.preventDefault();
87                    onEnter(e.target.value, e);
88                }
89            });
90        }
91
92        return textarea;
93    }
94
95    /**
96     * Create select dropdown
97     */
98    function createSelect(options = {}) {
99        const {
100            options: selectOptions = [],
101            value = '',
102            onChange = null,
103            className = '',
104            disabled = false
105        } = options;
106
107        const select = document.createElement('select');
108        select.className = `chatroom-select ${className}`;
109        if (disabled) select.disabled = true;
110
111        selectOptions.forEach(opt => {
112            const option = document.createElement('option');
113            option.value = opt.value;
114            option.textContent = opt.label || opt.value;
115            if (opt.value === value) option.selected = true;
116            select.appendChild(option);
117        });
118
119        if (onChange) {
120            select.addEventListener('change', (e) => onChange(e.target.value, e));
121        }
122
123        return select;
124    }
125
126    /**
127     * Create checkbox
128     */
129    function createCheckbox(options = {}) {
130        const {
131            label = '',
132            checked = false,
133            onChange = null,
134            className = '',
135            disabled = false
136        } = options;
137
138        const container = document.createElement('label');
139        container.className = `chatroom-checkbox ${className}`;
140
141        const input = document.createElement('input');
142        input.type = 'checkbox';
143        input.checked = checked;
144        if (disabled) input.disabled = true;
145
146        if (label) {
147            const labelSpan = document.createElement('span');
148            labelSpan.textContent = label;
149            container.appendChild(input);
150            container.appendChild(labelSpan);
151        } else {
152            container.appendChild(input);
153        }
154
155        if (onChange) {
156            input.addEventListener('change', (e) =>

156 onChange(e.target.checked, e));
157        }
158
159        return container;
160    }
161
162    return {
163        createTextInput,
164        createTextarea,
165        createSelect,
166        createCheckbox
167    };
168})();