Skip to content

Commit

Permalink
Upload component and its variants.
Browse files Browse the repository at this point in the history
  • Loading branch information
@moshiur01
moshiur01 committed Dec 10, 2024
1 parent 1a694e7 commit 5152f0f
Show file tree
Hide file tree
Showing 6 changed files with 174 additions and 162 deletions.
83 changes: 43 additions & 40 deletions components/content/docs/components/upload/DefaultUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,47 +36,50 @@ watch(dragState, (newValue) => {

<template>
<CodeHighlightWithPreview :code="DefaultUploadCode">
<Upload :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<div class="flex items-center justify-center">
<Upload :options="options">
<UploadBody v-model:isDragActive="dragState" class="">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p
class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
</div>
</CodeHighlightWithPreview>
</template>
83 changes: 43 additions & 40 deletions components/content/docs/components/upload/HorizontalUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,47 +36,50 @@ watch(dragState, (newValue) => {

<template>
<CodeHighlightWithPreview :code="HorizontalUploadCode">
<Upload horizontal :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<div class="flex items-center justify-center">
<Upload horizontal :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p
class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
</div>
</CodeHighlightWithPreview>
</template>
83 changes: 43 additions & 40 deletions components/content/docs/components/upload/SingleUpload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,47 +36,50 @@ watch(dragState, (newValue) => {

<template>
<CodeHighlightWithPreview :code="SingleUploadCode">
<Upload :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<div class="flex items-center justify-center">
<Upload :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p
class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
</div>
</CodeHighlightWithPreview>
</template>
83 changes: 43 additions & 40 deletions components/content/docs/components/upload/UploadDisabled.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,47 +34,50 @@ watch(dragState, (newValue) => {

<template>
<CodeHighlightWithPreview :code="UploadDisabledCode">
<Upload :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<div class="flex items-center justify-center">
<Upload :options="options">
<UploadBody v-model:isDragActive="dragState">
<UploadIcon>
<NuxtImg
src="/images/icon/folder.svg"
alt="folder"
:height="28"
:width="28" />
</UploadIcon>
<UploadText>
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p
class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
v-if="dragState"
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag File to Upload
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<p
v-else
class="text-body-3 font-medium text-metal-600 dark:text-white">
Drag & Drop or Choose File to Upload
</p>
<p class="text-body-4 font-normal text-metal-400 dark:text-metal-300">
DOCX, XLSX, PPTX, PDF, and JPG formats, up to 50 MB.
</p>
</UploadText>
</UploadBody>
<UploadFooter :is-file-exists="files.length > 0">
<p
class="my-2 flex items-center gap-1 text-body-4 font-normal text-metal-600 dark:text-metal-300">
<PhosphorIconInfo :size="16" />
Uploaded Files
</p>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
<ul class="space-y-1">
<li
v-for="file in files"
:key="file?.name"
class="flex items-center justify-between border-l-4 border-l-metal-100 bg-metal-25 px-4 py-2.5 text-left text-body-4 font-normal capitalize text-metal-600 dark:border-l-metal-600 dark:bg-metal-800 dark:text-metal-300">
{{ file?.name }}
<PhosphorIconTrash :size="16" color="red" />
</li>
</ul>
</UploadFooter>
</Upload>
</div>
</CodeHighlightWithPreview>
</template>
2 changes: 1 addition & 1 deletion src/components/Upload/Upload.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ useProvideUpload({ options: props.options, horizontal: props.horizontal });
v-bind="restProps"
:class="
cn(
'max-w-full rounded-xl border border-dashed border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900',
'w-full max-w-[440px] rounded-xl border border-dashed border-metal-100 bg-white p-6 dark:border-metal-800 dark:bg-metal-900',
props.class,
)
">
Expand Down
2 changes: 1 addition & 1 deletion src/components/Upload/UploadFooter.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,6 @@ const restProps = computed(() => {

<template>
<div v-bind="restProps" :class="cn(props.class)">
<slot v-if="isFileExists"></slot>
<slot v-if="isFileExists" />
</div>
</template>

0 comments on commit 5152f0f

Please sign in to comment.