quasar/docs/src/components/AppSearchResults.vue at dev · hipertracker/quasar · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
<template lang="pug">
.app-search
  .app-search__instructions.flex.flex-center(v-if="searchHasFocus" key="instr-focused")
    span Navigate
    kbd.q-ml-sm
      q-icon(:name="down")
    kbd.q-mr-sm
      q-icon(:name="up")
    span Select
    kbd.q-mx-sm
      q-icon(:name="select")
    span Close
    kbd.q-ml-sm
      q-icon(:name="close")
  .app-search__instructions.flex.flex-center(v-else key="instr-unfocused")
    span Type
    kbd.q-mx-sm.q-px-sm /
    span to focus on searchbox

  .app-search__section(
    v-for="group in results.groupList"
    :key="`group_${group}`"
  )
    .app-search__section-title.text-subtitle1 {{ group }}

    component(
      v-for="entry in results.entries[group]"
      :key="entry.id"
      :is="entry.component"
      :entry="entry"
      :active="entry.id === searchActiveId"
    )
      .app-search__result-keyboard.flex.flex-center.absolute-right(v-if="entry.id === searchActiveId")
        kbd
          q-icon(:name="select")
</template>

<script>
import { computed } from 'vue'
import { mdiArrowUpBold, mdiArrowDownBold, mdiKeyboardReturn, mdiKeyboardEsc } from '@quasar/extras/mdi-v6'

import ResultPageContent from 'components/search-results/ResultPageContent'
import ResultPageLink from 'components/search-results/ResultPageLink'

export const apiTypeToComponentMap = {
  'page-content': ResultPageContent,
  'page-link': ResultPageLink
}

export default {
  name: 'AppSearchResults',

  components: {
    ResultPageContent,
    ResultPageLink
  },

  props: {
    results: Object,
    searchHasFocus: Boolean,
    searchActiveId: String
  },

  setup (props) {
    const instructionsClass = computed(() =>
      `app-search__instructions--${props.searchHasFocus === true ? 'visible' : 'hidden'}`
    )

    return {
      instructionsClass,

      up: mdiArrowUpBold,
      down: mdiArrowDownBold,
      select: mdiKeyboardReturn,
      close: mdiKeyboardEsc
    }
  }
}
</script>

<style lang="sass">
.app-search

  &__instructions
    padding: 8px
    transition: opacity .28s
    min-height: 38px

    span
      font-size: .8em
      color: $grey
    kbd
      font-size: 1em
      color: #000

    &--hidden
      opacity: 0

  &__section
    margin: 4px 0

  &__section-title
    padding: 4px 0 4px 16px
    font-weight: 500
    color: $brand-primary

  &__result
    margin: 4px 16px 4px 0
    padding: 8px 8px 8px 16px
    border: 1px solid rgba(0, 0, 0, 0.12)
    border-right: 4px solid $brand-primary
    border-radius: 0 4px 4px 0
    position: relative
    cursor: pointer

    &-keyboard
      color: #fff
      right: 4px
      font-size: 22px
      div
        width: 1.2em
        height: 1.2em
        background: #fff
        color: $brand-primary
        border-radius: 4px

    &-overlay
      padding-bottom: 4px
      font-size: .8em
      color: $grey

    &-main
      font-size: .9em
      font-weight: 400
      line-height: 1.2em

    &-token
      background-color: scale-color($positive, $lightness: 60%)
      border-radius: 4px
      padding: 0 2px
      color: #000

  &__result.q-item--active
    background: $brand-primary
    color: #fff

    .app-search__result-overlay
      color: #ddd

body.mobile .app-search__instructions
  display: none
</style>