inital component

necessarylion · Mar 25, 2023 · 5d63cac · 5d63cac
1 parent a2f3da0
commit 5d63cac
Show file tree

Hide file tree

Showing 16 changed files with 6,689 additions and 2 deletions.
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+.DS_Store
diff --git a/README.md b/README.md
@@ -1,3 +1,48 @@
-### Search JS
+## Search JS
 
-Instance search UI components for javascript
+Instance search UI component
+
+### Usage
+
+```js
+const data = [
+  {
+    title: 'Validation',
+    description: 'Create validation easily using Laravel validator',
+    route: '/validation'
+  },
+  {
+    title: 'Request',
+    description: 'Laravel request',
+    route: '/request'
+  }
+]
+
+const searchJs = new SearchJS({
+    data,
+    element : document.body,
+    theme: '#FF2E1F',
+    width: '600px',
+    search : {
+      placeholder: 'Search docs'
+    },
+    onSelected : (i) => {
+      console.log(i)
+    }
+})
+
+searchJs.open()
+
+```
+
+- data
+  - title (required)
+  - description (required)
+- element (optional)
+- width (optional)
+- search 
+  - icon (optional) svg icon string
+  - placeholder (optional)
+- onSelected (required)
+
+- `open()` open function will trigger to open search menu, alternative press `cmd + k` or `ctrl + k` to open menu
diff --git a/index.html b/index.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Search JS</title>
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,300;1,400;1,600&display=swap" rel="stylesheet">
+    <style>
+      body {
+        font-family: 'Source Sans Pro', sans-serif;
+      }
+    </style>
+  </head>
+  <body>
+    <div id="search-js"></div>
+  </body>
+  <script src="index.js"></script>
+  <script>
+    const data = [
+      {
+        title: 'Validation',
+        description: 'Create validation easily using Laravel validator',
+        route: '/validation'
+      },
+      {
+        title: 'Request',
+        description: 'Laravel request',
+        route: '/request'
+      }
+    ]
+    const searchJs = new SearchJS({
+      element : document.getElementById('search-js'),
+      theme: '#FF2E1F',
+      width: '600px',
+      data,
+      search : {
+        placeholder: 'Search docs'
+      },
+      onSelected : (route) => {
+        console.log(route)
+      }
+    })
+    searchJs.open()
+  </script>
+</html>
diff --git a/index.js b/index.js