studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

dynamize brief steps

Browse source
This commit is contained in:
isUnknown 2024-09-25 17:33:28 +02:00
parent 13592a5869
commit 0df79ba8a8
8 changed files with 298 additions and 130 deletions
Download patch file Download diff file Expand all files Collapse all files

117
src/components/brief/AddImages.vue Normal file
View file

@ -0,0 +1,117 @@
<template>
<section class="h-full | flex flex-col" style="--row-gap: var(--space-32)">
<header
class="project-details | flex items-baseline | bg-white | rounded-2xl | p-16 | w-full"
>
<div class="project-details__description | flex-1">
<h2 class="text-sm text-grey-700 | mb-8">Description du projet</h2>
<textarea
name="description"
id="description"
placeholder="Ajoutez une description générale de votre projet…"
rows="3"
class="border border-grey-200 | rounded-xl | p-16 | w-full"
></textarea>
</div>
<div class="project-details__filters | flex-1">
<h2 class="text-sm text-grey-700 | mb-8">Filtrer par tags</h2>
<div class="flex" style="gap: var(--space-8)">
<button class="btn btn--sm btn--grey" id="all">Voir tout</button>
<button class="btn btn--sm btn--primary">Bouchon</button>
<button class="btn btn--sm btn--primary">Bouton Poussoir</button>
<button class="btn btn--sm btn--primary">Coloris & Nuances</button>
<button class="btn btn--sm btn--primary">DA Globale</button>
<button class="btn btn--sm btn--primary">Forme & Design</button>
<button class="btn btn--sm btn--primary">Matériaux & Textures</button>
<button class="btn btn--sm btn--primary">Parachèvements</button>
</div>
</div>
</header>
<!-- <div class="h-full | masonry">
<button
data-icon="upload"
class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
>
Ajouter une ou plusieurs images
</button>
</div> -->
<div class="h-full | masonry">
<button
class="flex flex-col | bg-white | border border-grey-200 | text-grey-800 | font-medium | rounded-2xl"
>
<FileUpload
name="demo[]"
url="/api/upload"
@upload="onAdvancedUpload($event)"
:multiple="true"
accept="image/*"
:maxFileSize="1000000"
>
<template #empty>
<span>Drag and drop files to here to upload.</span>
</template>
</FileUpload>
</button>
<Toast />
</div>
<figure class="image">
<span class="tag | btn btn--sm">Tag</span>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
alt=""
/>
</figure>
<figure class="image">
<span class="tag | btn btn--sm">Tag</span>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
alt=""
/>
</figure>
<figure class="image">
<span class="tag | btn btn--sm">Tag</span>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
alt=""
/>
</figure>
<figure class="image">
<span class="tag | btn btn--sm">Tag</span>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/6ed93d6950-1725442486/d82f18573c439d6edd434ffca62471a7.png"
alt=""
/>
</figure>
<figure class="image">
<span class="tag | btn btn--sm">Tag</span>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/7b0fcc5012-1725442486/37a038883c87973036232aa0e43f6da2.png"
alt=""
/>
</figure>
<figure class="image">
<span class="tag | btn btn--sm">Tag</span>
<img
src="http://localhost:8888/media/pages/inspirations/shape-of-the-nature/1bbe051c5a-1725442486/0c41d3266e9ce2872f30608cceb28239.png"
alt=""
/>
</figure>
</section>
</template>
<script setup>
import Toast from "primevue/toast";
import FileUpload from "primevue/fileupload";
import { useToast } from "primevue/usetoast";
const toast = useToast();
const onAdvancedUpload = () => {
toast.add({
severity: "info",
summary: "Success",
detail: "File Uploaded",
life: 3000,
});
};
</script>