-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(tw): file input component (#4644)
* added file input component and story --------- Co-authored-by: connoratrug <[email protected]>
- Loading branch information
1 parent
2cd0d13
commit 539fa37
Showing
11 changed files
with
169 additions
and
6 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
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
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
11 changes: 11 additions & 0 deletions
11
apps/tailwind-components/components/global/icons/UploadFile.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,11 @@ | ||
| <template> | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| viewBox="0 -960 960 960" | ||
| fill="currentColor" | ||
| > | ||
| <path | ||
| d="M440-200h80v-167l64 64 56-57-160-160-160 160 57 56 63-63v167ZM240-80q-33 0-56.5-23.5T160-160v-640q0-33 23.5-56.5T240-880h320l240 240v480q0 33-23.5 56.5T720-80H240Zm280-520v-200H240v640h480v-440H520ZM240-800v200-200 640-640Z" | ||
| /> | ||
| </svg> | ||
| </template> |
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,92 @@ | ||
| <template> | ||
| <div | ||
| class="flex items-center border border-input p-2" | ||
| :class="{ | ||
| 'cursor-pointer duration-default ease-in-out hover:border-input-hover hover:shadow-input-hover focus:border-input-hover focus:shadow-input-hover focus-within:border-input-hover focus-within:shadow-input-hover': | ||
| !disabled && !invalid, | ||
| 'border-invalid': invalid, | ||
| 'border-valid': valid, | ||
| }" | ||
| > | ||
| <div class="grow"> | ||
| <button | ||
| v-if="modelValue" | ||
| class="flex justify-center items-center h-10.5 px-5 text-heading-lg gap-3 tracking-widest uppercase font-display duration-default ease-in-out border rounded-input" | ||
| :class="{ | ||
| 'text-disabled bg-disabled hover:text-disabled cursor-not-allowed': | ||
| disabled, | ||
| 'bg-button-filter text-button-filter border-button-filter hover:bg-button-filter-hover hover:border-button-filter-hover': | ||
| !disabled, | ||
| 'border-invalid text-invalid bg-invalid hover:bg-invalid hover:text-invalid': | ||
| invalid, | ||
| 'border-valid text-valid bg-valid hover:bg-valid hover:text-valid': | ||
| valid, | ||
| }" | ||
| @click="onFilterWellClick" | ||
| :disabled="disabled" | ||
| > | ||
| <span>{{ modelValue.filename }}</span> | ||
| <BaseIcon name="Trash" class="w-4" /> | ||
| </button> | ||
| </div> | ||
| <div class="flex-none"> | ||
| <button | ||
| class="flex justify-center items-center h-10 px-5 text-heading-xl tracking-widest uppercase font-display duration-default ease-in-out border rounded-input bg-button-filter text-button-filter border-button-filter" | ||
| :class="{ | ||
| 'border-invalid text-invalid bg-invalid hover:bg-invalid hover:text-invalid': | ||
| invalid, | ||
| 'border-valid text-valid bg-valid hover:bg-valid hover:text-valid': | ||
| valid, | ||
| 'text-disabled bg-disabled hover:text-disabled cursor-not-allowed': | ||
| disabled, | ||
| 'hover:bg-button-primary hover:text-button-primary cursor-pointer': | ||
| !disabled, | ||
| }" | ||
| @click="showFileInput" | ||
| > | ||
| <span>Browse</span> | ||
| </button> | ||
| <input | ||
| :id="`${id}-file-input`" | ||
| ref="fileInputElem" | ||
| class="sr-only" | ||
| type="file" | ||
| :disabled="disabled" | ||
| @change="onChange" | ||
| @focus="$emit('focus')" | ||
| @blur="$emit('blur')" | ||
| /> | ||
| </div> | ||
| </div> | ||
| </template> | ||
|
|
||
| <script lang="ts" setup> | ||
| import type { IInputProps, IFile } from "~/types/types"; | ||
| const modelValue = defineModel<IFile | null>(); | ||
| const fileInputElem = useTemplateRef<HTMLInputElement>("fileInputElem"); | ||
| defineProps<IInputProps>(); | ||
| const emit = defineEmits(["focus", "blur", "error", "update:modelValue"]); | ||
| function showFileInput() { | ||
| fileInputElem.value?.click(); | ||
| } | ||
| function onChange(event: Event) { | ||
| const files = (event.target as HTMLInputElement)?.files; | ||
| if (files) { | ||
| const file = files.item(0) as File; | ||
| modelValue.value = { | ||
| filename: file.name, | ||
| size: file.size, | ||
| extension: file.type, | ||
| }; | ||
| } | ||
| } | ||
| function onFilterWellClick() { | ||
| modelValue.value = null; | ||
| } | ||
| </script> |
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,29 @@ | ||
| <template> | ||
| <InputTestContainer show-state v-slot="{ valid, invalid, disabled }"> | ||
| <label for="file-input-demo-file-input" class="block mb-2" | ||
| >Select a file to import.</label | ||
| > | ||
| <InputFile | ||
| id="file-input-demo" | ||
| :valid="valid" | ||
| :invalid="invalid" | ||
| :disabled="disabled" | ||
| @update:modelValue="(value: columnValueObject) => (file = value)" | ||
| /> | ||
| </InputTestContainer> | ||
| <form @submit.prevent></form> | ||
| <h3 class="text-heading-lg my-2">Data output</h3> | ||
| <output | ||
| class="block w-full mt-2 bg-gray-100 py-3 px-2 pl-6 h-30 overflow-y-scroll shadow-inner" | ||
| > | ||
| <pre class="indent-[-5em]"> | ||
| {{ file }} | ||
| </pre | ||
| > | ||
| </output> | ||
| </template> | ||
|
|
||
| <script setup lang="ts"> | ||
| import type { columnValueObject } from "../../../metadata-utils/src/types"; | ||
| const file = ref<columnValueObject>(); | ||
| </script> |
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