Add current state of the component

RoleModel · Aug 23, 2024 · c471278 · c471278
1 parent 07c14ca
commit c471278
Show file tree

Hide file tree

Showing 6 changed files with 517 additions and 23 deletions.
diff --git a/README.md b/README.md
@@ -21,6 +21,7 @@ Tailored Select is a Web Component built to be a searchable select box. Inspired
 - Web Component
 - Simple Form Component (TODO: link to rolemodel rails)
 - Capybara test helper (TODO: link to rolemodel rails)
+- Optics addon (TODO: link to optics)
 
 ## Supported browsers
 

diff --git a/index.html b/index.html
@@ -1,14 +1,30 @@
 <!doctype html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="stylesheet" href="/src/assets/stylesheets/application.scss" />
-    <title>Vite App</title>
-  </head>
-  <body>
-    <p>Hello There</p>
-    <script type="module" src="/src/assets/javascript/application.js"></script>
-  </body>
+
+<head>
+  <meta charset="UTF-8" />
+  <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <link rel="stylesheet" href="/src/assets/stylesheets/application.scss" />
+  <title>Vite App</title>
+</head>
+
+<body>
+  <form action="">
+    <tailored-select name='record[association][]' id='record_association' placeholder='Select Records'>
+      <option value='1' selected>Record 1</option>
+      <option value='2'>Record 2</option>
+      <option value='3'>Record 3</option>
+      <option value='4'>Record 4</option>
+      <option value='5'>Record 5</option>
+      <option value='6'>Record 6</option>
+      <option value='7'>Record 7</option>
+      <option value='8'>Record 8</option>
+      <option value='9'>Record 9</option>
+      <option value='10'>Record 10</option>
+    </tailored-select>
+  </form>
+  <script type="module" src="/src/assets/javascript/application.js"></script>
+</body>
+
 </html>
diff --git a/src/assets/javascript/application.js b/src/assets/javascript/application.js
@@ -1,3 +1 @@
-import { setupCounter } from './components/counter.js'
-
-setupCounter(document.querySelector('#counter'))
+import './components/tailored-select.js'
diff --git a/src/assets/javascript/components/counter.js b/src/assets/javascript/components/counter.js