kihashi/stardew_community_checklist
1
0
Fork 0
mirror of https://github.com/kihashi/stardew_community_checklist.git synced 2025-10-19 08:03:17 +00:00
Code Issues Releases Activity

Add basic search, search form, and filter components.

Browse Source 
Note that these are missing events.
This commit is contained in:
John Cleaver 2018-04-30 22:46:14 -04:00
parent 2426da3088
commit 0363505688
5 changed files with 180 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

25
src/components/search/ItemSearch.vue Normal file
View File

@ -0,0 +1,25 @@
<template>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Search</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<input class="input" placeholder="Item Name"/>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
name: 'item-search'
}
</script>
<style>
</style>

24
src/components/search/Search.vue
View File

@ -1,9 +1,31 @@
<template>
<section class="section">
<search-form></search-form>
<section class="container">
<div class="columns is-multiline">
<div class="column is-3 is-flex" v-for="item in filtered_items" :key="item.id">
<item-card :item="item"></item-card>
</div>
</div>
</section>
</section>
</template>
<script>
import SearchForm from '@/components/search/SearchForm'
import ItemCard from '@/components/item_card/ItemCard'
export default {
name: 'search',
components: {
SearchForm,
ItemCard
},
computed: {
filtered_items () {
return this.$store.state.items
}
}
}
</script>

32
src/components/search/SearchForm.vue Normal file
View File

@ -0,0 +1,32 @@
<template>
<div class="columns">
<div class="column">
<item-search />
</div>
<div class="column">
<season-filter />
</div>
<div class="column">
<skill-filter />
</div>
</div>
</template>
<script>
import ItemSearch from '@/components/search/ItemSearch.vue'
import SeasonFilter from '@/components/search/SeasonFilter.vue'
import SkillFilter from '@/components/search/SkillFilter.vue'
export default {
name: 'search-form',
components: {
ItemSearch,
SeasonFilter,
SkillFilter
}
}
</script>
<style>
</style>

47
src/components/search/SeasonFilter.vue Normal file
View File

@ -0,0 +1,47 @@
<template>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Season</label>
</div>
<div class="field-body">
<div class="field has-addons has-addons-centered">
<div class="control" v-for="season in seasons" :key="season.id">
<button-check>
<span class="icon is-small">
<season-icon :season="season"></season-icon>
</span>
</button-check>
</div>
</div>
<div class="field">
<div class="control is-expanded">
<button-check class="is-fullwidth">
Exclusive
</button-check>
</div>
</div>
</div>
</div>
</template>
<script>
import SeasonIcon from '@/components/SeasonIcon'
import ButtonCheck from '@/components/ButtonCheckbox'
export default {
name: 'season-filter',
components: {
SeasonIcon,
ButtonCheck
},
computed: {
seasons () {
return this.$store.state.seasons
}
}
}
</script>
<style>
</style>

53
src/components/search/SkillFilter.vue Normal file
View File

@ -0,0 +1,53 @@
<template>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Skills</label>
</div>
<div class="field-body">
<div class="field has-addons has-addons-centered">
<div class="control" v-for="skill in skills" :key="skill.id">
<button-check>
<span class="icon is-small">
<skill-icon :skill="skill"></skill-icon>
</span>
</button-check>
</div>
</div>
<div class="field">
<div class="control is-expanded">
<button-check class="is-fullwidth">
Exclusive
</button-check>
</div>
</div>
</div>
</div>
</template>
<script>
import SkillIcon from '@/components/SkillIcon'
import ButtonCheck from '@/components/ButtonCheckbox'
export default {
name: 'skill-filter',
components: {
SkillIcon,
ButtonCheck
},
data () {
return {
selected_skills: []
}
},
computed: {
skills () {
return this.$store.state.skills
}
}
}
</script>
<style>
</style>