Add dropdown interface (#461)

* Add show-deselect option to v-select

* Add parse-choices util

* Add dropdown interface

* Add allow-other prop to v-select (single only)

* Check for custom state correctly

* Treat empty custom value as null

* Set full-width to true by default for inputs / selects

* Add allow-other support to multiple dropdown

* Upgrade display value to show item count

* Fix custom deletion

* Fix tests

* Pass allow other on in dropdown interface

src/utils/parse-choices/index.ts

@@ -0,0 +1,4 @@
+import parseChoices from './parse-choices';
+
+export { parseChoices };
+export default parseChoices;

src/utils/parse-choices/parse-choices.test.ts

@@ -0,0 +1,42 @@
+import parseChoices from './parse-choices';
+
+describe('Utils / Parse Choices', () => {
+	it('Filters out empty rows', () => {
+		const choices = `
+test
+
+above is gone
+		`;
+
+		const result = parseChoices(choices);
+
+		expect(result.length).toBe(2);
+		expect(result[0]).toEqual({ text: 'test', value: 'test' });
+	});
+
+	it('Filters out whitespace around options', () => {
+		const choices = '              bunch of whitespace             ';
+
+		const result = parseChoices(choices);
+
+		expect(result.length).toBe(1);
+		expect(result[0]).toEqual({ text: 'bunch of whitespace', value: 'bunch of whitespace' });
+	});
+
+	it('Separates on double colon to form key/value pairs', () => {
+		const choices = `
+			value::Text
+		`;
+		const result = parseChoices(choices);
+		expect(result[0]).toEqual({ text: 'Text', value: 'value' });
+	});
+
+	it('Trims whitespace around colons', () => {
+		const choices = `
+			works     :: Yes!
+		`;
+
+		const result = parseChoices(choices);
+		expect(result[0]).toEqual({ text: 'Yes!', value: 'works' });
+	});
+});

src/utils/parse-choices/parse-choices.ts

@@ -0,0 +1,21 @@
+export default function parseChoices(choices: string) {
+	return choices
+		.trim()
+		.split('\n')
+		.filter((r) => r.length !== 0)
+		.map((row) => {
+			const parts = row.split('::').map((part) => part.trim());
+
+			if (parts.length > 1) {
+				return {
+					value: parts[0],
+					text: parts[1],
+				};
+			}
+
+			return {
+				value: parts[0],
+				text: parts[0],
+			};
+		});
+}