-
Notifications
You must be signed in to change notification settings - Fork 5
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
YSHOP2-1133: Add ResourcePicker component #184
Merged
Merged
Changes from 16 commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
cffa0b1
dark: improve checkbox styles
eihabkhan1 b6e8668
add initial ResourcePicker's Resource component
eihabkhan1 61fa783
add display functionality
eihabkhan1 064586a
bump vue from 3.2.45 to 3.3.0 to add support for types import
eihabkhan1 7ac155a
add emits and v-models
eihabkhan1 2e1e057
made an oopsie in Modal.vue
eihabkhan1 3a6d1df
add selectedResources model
eihabkhan1 2742acd
update checkbox to include indeterminate state
eihabkhan1 41ce174
adding support for variants (wip)
eihabkhan1 b40c95a
Merge branch 'main' into YSHOP2-1133
eihabkhan1 5377dee
add enter event to search bar
eihabkhan1 c97c8fb
add loading state to picker
eihabkhan1 19f92e9
remove unnecessary emits
eihabkhan1 753211b
minor bug fix
eihabkhan1 12cfa8d
code cleanups
eihabkhan1 636e008
add empty state
eihabkhan1 6b461d9
code refactor
eihabkhan1 f849518
improve how variants are displayed
eihabkhan1 3615d45
refactor checkbox logic
eihabkhan1 524f0ae
add finalize ResourcePicker 🎉
eihabkhan1 a7c5a43
minor cleanups
eihabkhan1 a498e5c
minor code cleanup
eihabkhan1 693e438
more cleanups
eihabkhan1 e6d58da
minor bug fixes
eihabkhan1 4ebe954
code cleanups
eihabkhan1 04090ae
Merge branch 'main' into YSHOP2-1133
eihabkhan1 5812f5d
Merge branch 'main' into YSHOP2-1133
eihabkhan1 141c3c0
fix broken pnpm-lock
eihabkhan1 c49f2c1
code cleanup
eihabkhan1 644a576
fixing selection bug
eihabkhan1 607688a
minor selection bug fix
eihabkhan1 File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,28 +1,104 @@ | ||
<script setup lang="ts"> | ||
import 'uno.css'; | ||
import '../assets/main.css'; | ||
import { Spinner } from '~/components'; | ||
import '~/assets/main.css'; | ||
import { ref } from 'vue'; | ||
import { PrimaryButton, ResourcePicker } from '~/components'; | ||
import type { Resource } from '~/components/ResourcePicker/types'; | ||
|
||
const MOCK_RESOURCES: Resource[] = [ | ||
{ | ||
id: 1, | ||
thumbnailUrl: '', | ||
name: 'Apple MacBook Pro', | ||
price: '$10.99', | ||
stock: 99, | ||
}, | ||
{ | ||
id: 33, | ||
thumbnailUrl: '', | ||
name: 'Apple MacBook Pro M3 Max', | ||
price: '$10.99', | ||
stock: 99, | ||
variantFor: 1, | ||
}, | ||
{ | ||
id: 2, | ||
thumbnailUrl: '', | ||
name: 'Apple iMac', | ||
price: '$10.99', | ||
stock: 99, | ||
}, | ||
{ | ||
id: 3, | ||
thumbnailUrl: '', | ||
name: 'Apple Watch', | ||
price: '$10.99', | ||
stock: 99, | ||
}, | ||
]; | ||
|
||
const showPicker = ref(false); | ||
const showLoadingPicker = ref(false); | ||
const showEmptyPicker = ref(false); | ||
|
||
const onConfirm = (resources: Resource[]) => { | ||
console.log(resources); | ||
showPicker.value = false; | ||
}; | ||
|
||
const onSearch = (term: string) => { | ||
console.log('Search term:', term); | ||
}; | ||
</script> | ||
|
||
<template> | ||
<div class="container"> | ||
<Spinner | ||
color="var(--blue-300)" | ||
size="10px" | ||
label="YouCan" | ||
label-color="var(--blue-500)" | ||
label-font-size="xs" | ||
/> | ||
<Spinner /> | ||
<div class="picker"> | ||
<ResourcePicker | ||
v-model:visible="showPicker" | ||
:resources="MOCK_RESOURCES" | ||
stock-label="in stock" | ||
:is-loading="false" | ||
@confirm="onConfirm" | ||
@search="onSearch" | ||
/> | ||
<PrimaryButton @click="showPicker = true;"> | ||
<span>Open Picker</span> | ||
</PrimaryButton> | ||
</div> | ||
<div class="picker"> | ||
<ResourcePicker | ||
v-model:visible="showLoadingPicker" | ||
:is-loading="true" | ||
/> | ||
<PrimaryButton @click="showLoadingPicker = true;"> | ||
<span>Open Loading Picker</span> | ||
</PrimaryButton> | ||
</div> | ||
<div class="picker"> | ||
<ResourcePicker | ||
v-model:visible="showEmptyPicker" | ||
:resources="[]" | ||
:is-loading="false" | ||
/> | ||
<PrimaryButton @click="showEmptyPicker = true;"> | ||
<span>Open Empty Picker</span> | ||
</PrimaryButton> | ||
</div> | ||
</div> | ||
</template> | ||
|
||
<style scoped> | ||
.container { | ||
display: flex; | ||
flex-direction: column; | ||
align-items: center; | ||
justify-content: center; | ||
width: 100vw; | ||
height: 100vh; | ||
margin: auto; | ||
margin: 0 auto; | ||
gap: 32px; | ||
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword */ | ||
font-family: "Mona Sans"; | ||
} | ||
</style> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
94 changes: 94 additions & 0 deletions
94
packages/vue3/src/components/ResourcePicker/Internal/Resource.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,94 @@ | ||
<script setup lang="ts"> | ||
import { ref } from 'vue'; | ||
import { Checkbox, Thumbnail } from '~/components'; | ||
import type { Resource } from '~/components/ResourcePicker/types'; | ||
|
||
const props = withDefaults(defineProps<Resource>(), { | ||
price: '$14.99', | ||
stock: 1, | ||
stockLabel: 'in stock', | ||
name: 'Apple MacBook Pro 14', | ||
showStock: false, | ||
showThumbnail: true, | ||
isChecked: false, | ||
}); | ||
|
||
const emit = defineEmits(['change']); | ||
|
||
const checked = ref(props.isChecked); | ||
|
||
function handleCheck() { | ||
const clickedResource = { ...props, isChecked: checked.value }; | ||
emit('change', clickedResource); | ||
} | ||
</script> | ||
|
||
<template> | ||
<Checkbox v-model="checked" class="container" :class="!showThumbnail && 'variant'" @change.stop="handleCheck"> | ||
<template #label> | ||
<div class="content"> | ||
<div class="info"> | ||
<Thumbnail v-if="showThumbnail" :src="thumbnailUrl" /> | ||
<p class="name"> | ||
{{ name }} | ||
</p> | ||
</div> | ||
<div class="inventory-price"> | ||
<span v-if="showStock" class="stock">{{ stock }} {{ stockLabel }}</span> | ||
<p class="price"> | ||
{{ price }} | ||
</p> | ||
</div> | ||
</div> | ||
</template> | ||
</Checkbox> | ||
</template> | ||
|
||
<style scoped> | ||
.container { | ||
display: flex; | ||
justify-content: start; | ||
padding: 0 16px; | ||
cursor: pointer; | ||
gap: 8px; | ||
} | ||
|
||
.variant { | ||
padding-inline-start: 52px; | ||
} | ||
|
||
.content { | ||
display: flex; | ||
flex: 1 1 auto; | ||
align-items: center; | ||
justify-content: space-between; | ||
gap: 8px; | ||
} | ||
|
||
.info { | ||
display: flex; | ||
flex-basis: 55%; | ||
align-items: center; | ||
gap: 8px; | ||
} | ||
|
||
.info .thumbnail { | ||
margin: 16px 0; | ||
} | ||
|
||
.inventory-price { | ||
display: flex; | ||
flex-basis: 45%; | ||
align-items: center; | ||
gap: 16px; | ||
justify-content: end; | ||
} | ||
|
||
.inventory-price .stock { | ||
color: var(--gray-400); | ||
} | ||
|
||
input:indeterminate + label { | ||
background: lime; | ||
} | ||
</style> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Bumped vue to add support for external types import in SFC (ref: vuejs/core#8083)