Find My Components

BaseFindMyComponent.vue

<template>
  <div class="widget">
    <h2>Find My {{ title }}</h2>
    <div>
      <div v-if="initialState">
        <p class="description">{{ description }}</p>

        <div class="input">
          <!-- Main input -->
          <input
            @keyup="handleKeyUp"
            ref="input"
            type="text"
            v-model="searchInput"
            autocomplete="none"
            description="Enter Address"
            title="Enter Address"
            placeholder="Enter Address"
          />

          <!-- Address autocomplete dropdown -->
          <div
            v-if="propertyData && propertyData.length"
            class="w-full absolute top-0 mt-10 rounded bg-white border-2 z-50"
          >
            <ul class="text-sm">
              <li
                  v-html="item['situsStreet']"
                  @click="setInputValue(item)"
                  v-for="item in propertyData" :key="item['situsStreet']" class="p-3 hover:bg-wildsand cursor-pointer">
              </li>
            </ul>
          </div>
        </div>

        <!-- Pending/error states -->
        <div class="error">
          <span v-if="requestPending" class="spinner"></span>
          <p v-if="propertyData && !propertyData.length">No addresses found.</p>
        </div>
      </div>
      
      <!-- Results view -->
      <div v-if="!initialState">
        <slot name="results" :individualProperty="individualProperty"></slot>
      
        <!-- Try again button -->
        <div>
          <button @click="toggleState" class="button">Try Again</button>
        </div>
      </div>

    </div>
  </div>
</template>

<script>
import useFindMy from "./@use/find-my";

export default {
  props: {
    title: String,
    description: String
  },
  setup() {
    return useFindMy();
  }
}
</script>

TrashPickup.vue

<template>
  <BaseFindMyComponent
    title="Trash Day"
    description="Enter your address to find your trash day."
  >
    <template #results="{ individualProperty }">
      <div>
        <strong>Trash Pickup Day:</strong> {{ individualProperty['wasteCollectionDay'] }}
        <strong>Next Recycle Date:</strong> {{ individualProperty['nextRecyclingDate'] }}
      </div>
    </template>
  </BaseFindMyComponent>
</template>