Coopax-search NPM

coopax-search

Install web component

npm install --save coopax-search

In your main.js, or a similar entry point for your app:

import SearchComponent from 'coopax-search';
import Vue from 'vue';
Vue.component(SearchComponent);

Now it's able to use anywhere in your app like this

<coopax-search
    src="https://test-api.coopax.com" // only use for testing
    text-input-type="input" // input or textarea
    city-name-label="city name input label"
    city-name-placeholder="city name input placeholder"
    purpose-label="purpose input label"
    purpose-placeholder="purpose placeholder"
    attendees-label="attendee input label"
    attendees-placeholder="attendee input placeholder"
    search-text="search button text"
    business-category-label="business radio button label"
    other-category-label="other radio button label"
    create-event-text="create event button text"
    language-code="en" // default "br"
></coopax-search>

You can change css by part name like this

coopax-search::part(web-comp-container) {
    background-color: red;
}

We have these parts (each part is same as class of element):
    web-comp-container
    city-name-container
    city-name-label
    city-name-input
    purposes-container
    purposes-label
    purpose-wrapper
    purpose-placeholder
    purpose-input
    purposes-select-option
    purpose-menu
    purpose-categories-container
    purpose-category-business
    purpose-category-other
    business-radio-button
    business-label
    other-radio-button
    other-label
    attendees-container
    attendees-label
    attendees-input
    search-button-container
    search-button
    create-event-button-container
    create-event-button
    
You can also style google-autocomplete, see more https://softauthor.com/google-places-autocomplete-api/

You can import directly to html file by add

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <meta http-equiv="X-UA-Compatible" content="ie=edge" />
  <title>Coopax - Web Component</title>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.min.js"></script>
  <script src="https://coopax-search-widget.s3.amazonaws.com/coopax-search.min.js"></script>
</head>

<body>
<coopax-search
  city-name-label="City name"
  city-name-placeholder="City placeholder"
>
</coopax-search>
</body>

<style>
  coopax-search::part(web-comp-container) {
    display: grid;
    grid-template-columns: 1fr;
    grid-column-gap: 20px;
  }
  
  coopax-search::part(city-name-input) {
    height: 31px;
  }

  coopax-search::part(city-name-container) {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }

  coopax-search::part(purposes-container) {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }

  coopax-search::part(purpose-input) {
    height: 31px;
  }

  coopax-search::part(attendees-container) {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 10px;
  }
  
  coopax-search::part(attendees-input) {
       height: 31px;
  }

  coopax-search::part(search-button-container) {
    margin-top: 20px;
  }
</style>
</html>