-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Showing
14 changed files
with
703 additions
and
28 deletions.
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -72,6 +72,7 @@ | |
| // Reset default button styles | ||
| button { | ||
| border: none; | ||
| padding: 0; | ||
| } | ||
| } | ||
| </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
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
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,103 @@ | ||
| <template> | ||
| <button | ||
| :class="$style.component" | ||
| @click="onButtonClick" | ||
| > | ||
| <img | ||
| v-if="imageFileObjectUrl" | ||
| :src="imageFileObjectUrl" | ||
| alt="Uploaded image" | ||
| :class="$style.image" | ||
| /> | ||
|
|
||
| <Icon | ||
| v-else | ||
| size="1.5rem" | ||
| name="tabler:upload" | ||
| :class="$style.icon" | ||
| /> | ||
|
|
||
| <input | ||
| type="file" | ||
| accept="image/png, image/jpeg, image/webp" | ||
| ref="fileInput" | ||
| :class="$style.input" | ||
| @change="onFileChange" | ||
| /> | ||
| </button> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| const fileInputRef = useTemplateRef('fileInput'); | ||
| const imageFile = ref<File | null>(null); | ||
| const imageFileObjectUrl = computed(() => { | ||
| if (imageFile.value === null) { | ||
| return null; | ||
| } | ||
| return URL.createObjectURL(imageFile.value); | ||
| }); | ||
| function onButtonClick() { | ||
| fileInputRef.value?.click(); | ||
| } | ||
| function onFileChange(event: Event) { | ||
| if (event.target instanceof HTMLInputElement) { | ||
| const file = event.target.files?.[0]; | ||
| if (file !== undefined) { | ||
| imageFile.value = file; | ||
| } | ||
| } | ||
| } | ||
| </script> | ||
|
|
||
| <style module> | ||
| .component { | ||
| align-content: center; | ||
| outline: 2px solid transparent; | ||
| border: 1px solid var(--color-blue-500); | ||
| border-radius: var(--border-radius-24); | ||
| background-color: var(--color-blue-100); | ||
| cursor: pointer; | ||
| overflow: hidden; | ||
| transition: | ||
| background-color 0.2s, | ||
| border-color 0.2s, | ||
| outline-color 0.2s; | ||
| &:hover, | ||
| &:focus-visible{ | ||
| background-color: var(--color-blue-200); | ||
| border-color: var(--color-blue-600); | ||
| outline-color: var(--color-blue-600); | ||
| } | ||
| } | ||
| .image { | ||
| width: 100%; | ||
| height: 100%; | ||
| object-fit: cover; | ||
| } | ||
| .icon { | ||
| display: block; | ||
| margin: 0 auto; | ||
| color: var(--color-blue-500); | ||
| transition: | ||
| color 0.2s, | ||
| scale 0.2s; | ||
| .component:hover &, | ||
| .component:focus-visible & { | ||
| color: var(--color-blue-600); | ||
| scale: 1.3; | ||
| } | ||
| } | ||
| .input { | ||
| display: none; | ||
| } | ||
| </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
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 |
|---|---|---|
| @@ -0,0 +1,126 @@ | ||
| <template> | ||
| <div :class="$style.component"> | ||
| <Icon | ||
| name="tabler:chevron-down" | ||
| size="1.5rem" | ||
| :class="$style.arrow" | ||
| /> | ||
|
|
||
| <select | ||
| :class="$style.select" | ||
| v-model="selectedOption" | ||
| > | ||
| <option | ||
| disabled | ||
| value="" | ||
| class="placeholder" | ||
| :class="$style.option" | ||
| > | ||
| {{ placeholder }} | ||
| </option> | ||
|
|
||
| <option | ||
| v-for="option in options" | ||
| :key="option.value" | ||
| :value="option.value" | ||
| :selected="isSelected(option.value)" | ||
| :class="$style.option" | ||
| > | ||
| {{ option.label }} | ||
| </option> | ||
| </select> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| interface Option { | ||
| readonly value: string; | ||
| readonly label: string; | ||
| } | ||
| interface Props { | ||
| readonly placeholder: string; | ||
| readonly options: readonly Option[]; | ||
| } | ||
| defineProps<Props>(); | ||
| const selectedOption = defineModel<string>(); | ||
| function isSelected(value: string) { | ||
| return selectedOption.value === value; | ||
| } | ||
| </script> | ||
|
|
||
| <style module> | ||
| .component { | ||
| position: relative; | ||
| } | ||
| .arrow { | ||
| position: absolute; | ||
| right: var(--input-spacing-horizontal); | ||
| top: 50%; | ||
| translate: 0 -50%; | ||
| pointer-events: none; | ||
| color: var(--input-secondary-color-text); | ||
| transition: rotate var(--transition-time-quick); | ||
| /* FIXME: experimental and shouldn't be in production */ | ||
| .component:has(.select:open) & { | ||
| rotate: x 180deg; | ||
| } | ||
| } | ||
| .select { | ||
| appearance: none; | ||
| width: 100%; | ||
| outline: none; | ||
| height: var(--input-height); | ||
| padding: 0 calc(var(--input-spacing-horizontal) + 1.5rem) 0 var(--input-spacing-horizontal); | ||
| cursor: pointer; | ||
| border-radius: var(--input-border-radius); | ||
| background-color: var(--input-secondary-color-main); | ||
| color: var(--input-secondary-color-text); | ||
| border: 1px solid var(--input-secondary-color-border); | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| transition: background-color var(--transition-time-quick); | ||
| &:hover, | ||
| &:focus-visible { | ||
| background-color: var(--input-secondary-color-focus); | ||
| } | ||
| /* FIXME: experimental and shouldn't be in production */ | ||
| &:open { | ||
| background-color: var(--input-secondary-color-active); | ||
| } | ||
| } | ||
| .option { | ||
| outline: none; | ||
| height: 40px; | ||
| padding: 0 var(--spacing-32) 0 var(--spacing-12); | ||
| background-color: var(--color-background); | ||
| color: var(--color-blue-600); | ||
| cursor: pointer; | ||
| transition: background-color var(--transition-time-quick) ease-out; | ||
| max-width: 100px; | ||
| overflow: hidden; | ||
| text-overflow: ellipsis; | ||
| &:hover, | ||
| &:focus-visible { | ||
| background-color: var(--color-blue-100); | ||
| } | ||
| &:checked { | ||
| background-color: var(--color-blue-200); | ||
| } | ||
| &:global(.placeholder) { | ||
| display: none; | ||
| } | ||
| } | ||
| </style> |
Oops, something went wrong.