-
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
37 changed files
with
3,590 additions
and
304 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,118 @@ | ||
| <template> | ||
| <button | ||
| type="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; | ||
| } | ||
| } | ||
| } | ||
| // Revoke the old object URL when the image file changes | ||
| watch(imageFileObjectUrl, (_, oldObjectUrl) => { | ||
| if (oldObjectUrl !== null) { | ||
| URL.revokeObjectURL(oldObjectUrl); | ||
| } | ||
| }); | ||
| // Revoke the object URL when the component is unmounted | ||
| onBeforeUnmount(() => { | ||
| if (imageFileObjectUrl.value !== null) { | ||
| URL.revokeObjectURL(imageFileObjectUrl.value); | ||
| } | ||
| }); | ||
| </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,128 @@ | ||
| <template> | ||
| <div :class="$style.component"> | ||
| <Icon | ||
| name="tabler:chevron-down" | ||
| size="1.5rem" | ||
| :class="$style.arrow" | ||
| /> | ||
|
|
||
| <select | ||
| :class="$style.select" | ||
| v-model="selectedOption" | ||
| :required="required" | ||
| > | ||
| <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[]; | ||
| readonly required: HTMLSelectElement['required']; | ||
| } | ||
| 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.