Skip to content

Commit

Permalink
enhancement: overall playground page UI (#41)
Browse files Browse the repository at this point in the history
  • Loading branch information
Juliana Praxedes authored Oct 15, 2023
1 parent ef96f87 commit 3f14627
Show file tree
Hide file tree
Showing 5 changed files with 133 additions and 104 deletions.
Binary file added playground/bun.lockb
View file
Binary file not shown.
187 changes: 91 additions & 96 deletions playground/src/components/MyComponent.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,58 +19,61 @@ const watermarkOptions = ref({
</script>

<template>
<div class="flex h-full w-full">
<div>
<Watermark :options="watermarkOptions">
<div class="content">This is the content of the slot.</div>
<main class="flex flex-col lg:flex-row flex-1 items-stretch">
<section class="flex flex-2 lg:flex-1 bg-watermarkify-500">
<Watermark :options="watermarkOptions" class="watermark flex flex-1">
<div class="p-4 h-full">This is the content of the slot.</div>
</Watermark>
</div>
<div class="w-full h-full">
<section class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="content"> Content </label>
</section>

<section class="flex-1 flex items-stretch">
<div
class="w-full grid lg:grid-flow-col lg:grid-rows-7 grid-cols-2 gap-x-5 lg:gap-x-10 p-5 lg:p-10 shadow-md bg-white text-xs lg:text-base text-gray-700 font-bold"
>
<div>
<label for="content" class="block mb-1 lg:mb-2">Content</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
id="content"
type="text"
placeholder="Enter watermark content"
v-model="watermarkOptions.content"
/>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="width"> Width </label>
<div>
<label for="width" class="block mb-1 lg:mb-2">Width</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
id="width"
type="number"
placeholder="Enter width"
v-model="watermarkOptions.width"
/>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="height"> Height </label>
<div>
<label for="height" class="block mb-1 lg:mb-2">Height</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
id="height"
type="number"
placeholder="Enter height"
v-model="watermarkOptions.height"
/>
</div>
<div class="mb-4 md:flex md:justify-between">
<div class="md:justify-between">
<div class="mb-4 md:mb-0">
<label class="block text-gray-700 font-bold mb-2" for="gap"> [GapX, GapY] </label>
<label for="gap" class="block mb-1 lg:mb-2"> [GapX GapY] </label>
<div class="flex">
<input
class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
id="gap_x"
type="number"
placeholder="Enter Gap X"
v-model="watermarkOptions.gap[0]"
/>
<span class="mx-2 flex items-center"></span>
<input
class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
id="gap_y"
type="number"
placeholder="Enter Gap Y"
Expand All @@ -79,20 +82,20 @@ const watermarkOptions = ref({
</div>
</div>
</div>
<div class="mb-4">
<div>
<div class="mb-4 md:mb-0">
<label class="block text-gray-700 font-bold mb-2" for="offset"> [OffsetX, OffsetY] </label>
<label for="offset" class="block mb-1 lg:mb-2"> [OffsetX OffsetY] </label>
<div class="flex">
<input
class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
id="offset_x"
type="number"
placeholder="Enter offset X"
v-model="watermarkOptions.offset[0]"
/>
<span class="mx-2 flex items-center"></span>
<input
class="shadow appearance-none border rounded w-1/2 py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-1/2 py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:shadow-outline"
id="offset_y"
type="number"
placeholder="Enter offset Y"
Expand All @@ -101,20 +104,20 @@ const watermarkOptions = ref({
</div>
</div>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="zIndex"> zIndex </label>
<div>
<label for="zIndex" class="block mb-1 lg:mb-2">zIndex</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
id="zIndex"
type="number"
placeholder="Enter zIndex"
v-model="watermarkOptions.zIndex"
/>
</div>
<div class="mb-4">
<label class="block text-gray-700 font-bold mb-2" for="rotate"> rotate </label>
<div>
<label for="rotate" class="block mb-1 lg:mb-2">rotate</label>
<input
class="shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
id="rotate"
type="number"
min="-180"
Expand All @@ -123,74 +126,66 @@ const watermarkOptions = ref({
v-model="watermarkOptions.rotate"
/>
</div>
</section>
</div>
<div class="w-full h-full">
<section class="bg-white shadow-md rounded px-8 pt-6 pb-8 mb-4">
<div class="mb-4">
<div class="mb-4">
<label for="color" class="block text-gray-700 font-bold mb-2">fontColor</label>
<input
type="text"
id="color"
name="color"
class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a color value"
v-model="watermarkOptions.font.color"
/>
</div>
<div class="mb-4">
<label for="size" class="block text-gray-700 font-bold mb-2">fontSize</label>
<input
type="number"
id="size"
name="size"
class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font size"
v-model="watermarkOptions.font.fontSize"
/>
</div>
<div class="mb-4">
<label for="weight" class="block text-gray-700 font-bold mb-2">fontWeight</label>
<input
id="weight"
name="weight"
class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font weight"
v-model="watermarkOptions.font.fontWeight"
/>
</div>
<div class="mb-4">
<label for="style" class="block text-gray-700 font-bold mb-2">fontStyle</label>
<input
id="style"
name="style"
class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font style"
v-model="watermarkOptions.font.fontStyle"
/>
</div>
<div class="mb-4">
<label for="family" class="block text-gray-700 font-bold mb-2">fontFamily</label>
<input
id="family"
name="family"
class="w-full border-gray-400 py-2 px-3 rounded-lg shadow-sm focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font family"
v-model="watermarkOptions.font.fontFamily"
/>
</div>

<div>
<label for="color" class="block mb-1 lg:mb-2">fontColor</label>
<input
type="text"
id="color"
name="color"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a color value"
v-model="watermarkOptions.font.color"
/>
</div>
<div>
<label for="size" class="block mb-1 lg:mb-2">fontSize</label>
<input
type="number"
id="size"
name="size"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font size"
v-model="watermarkOptions.font.fontSize"
/>
</div>
<div>
<label for="weight" class="block mb-1 lg:mb-2">fontWeight</label>
<input
id="weight"
name="weight"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font weight"
v-model="watermarkOptions.font.fontWeight"
/>
</div>
<div>
<label for="style" class="block mb-1 lg:mb-2">fontStyle</label>
<input
id="style"
name="style"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font style"
v-model="watermarkOptions.font.fontStyle"
/>
</div>
<div>
<label for="family" class="block mb-1 lg:mb-2">fontFamily</label>
<input
id="family"
name="family"
class="shadow appearance-none border w-full py-2 px-3 text-gray-400 leading-tight focus:outline-none focus:ring-2 focus:ring-gray-400 focus:border-transparent"
placeholder="Enter a font family"
v-model="watermarkOptions.font.fontFamily"
/>
</div>
</section>
</div>
</div>
</div>
</section>
</main>
</template>

<style scoped>
.content {
height: 800px;
width: 800px;
background: rgb(98, 215, 244);
padding: 20px;
<style>
.watermark > div {
flex: 1;
}
</style>
14 changes: 10 additions & 4 deletions playground/src/components/Navbar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,22 @@
<div class="px-4">
<div class="flex items-center justify-between h-16">
<div class="flex-shrink-0 text-white font-bold">@watermarkify/vue-watermark</div>
<div class="flex">
<div>
<a
href="https://github.com/watermarkify/vue-watermark"
target="_blank"
rel="noopener noreferrer"
class="text-white hover:text-blue-200 px-3 py-2 rounded-md text-md font-medium"
class="text-white hover:text-blue-200 text-md font-medium"
>
<svg class="h-6 w-6 fill-current" viewBox="0 0 24 24">
<svg
xmlns="http://www.w3.org/2000/svg"
class="h-7 w-7 lg:mr-5 fill-current"
width="24"
height="24"
viewBox="0 0 24 24"
>
<path
d="M12 0a12 12 0 0 0-3.8 23.4c.6.1.8-.3.8-.6v-2.2c-3.3.7-4-1.6-4-1.6-.5-1.3-1.2-1.6-1.2-1.6-.9-.6.1-.6.1-.6 1 .1 1.6 1.1 1.6 1.1.9 1.6 2.4 1.1 3 .8.1-.7.4-1.1.8-1.4-2.7-.3-5.5-1.4-5.5-6.2 0-1.4.5-2.5 1.1-3.4-.1-.3-.5-1.6.1-3.4 0 0 1.1-.3 3.5 1.3 1-.3 2-.5 3-.5s2 .2 3 .5c2.4-1.6 3.4-1.3 3.4-1.3.6 1.8.2 3.1.1 3.4.6.9 1.1 2 1.1 3.4 0 4.8-2.8 5.8-5.5 6.2.4.4.8 1.2.8 2.4v3.5c0 .3.2.7.8.6A12 12 0 0 0 12 0z"
d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"
/>
</svg>
</a>
Expand Down
11 changes: 7 additions & 4 deletions playground/src/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,12 +32,12 @@ a:hover {
color: #535bf2;
}

* {
box-sizing: border-box;
}

body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
min-height: 100vh;
}

h1 {
Expand Down Expand Up @@ -70,6 +70,9 @@ button:focus-visible {

#app {
width: 100%;
min-height: 100vh;
display: flex;
flex-direction: column;
margin: 0 auto;
text-align: center;
}
Expand Down
25 changes: 25 additions & 0 deletions playground/windi.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
import { defineConfig } from 'windicss/helpers'
import colors from 'windicss/colors'
import plugin from 'windicss/plugin'

export default defineConfig({
theme: {
extend: {
colors: {
watermarkify: {
500: '#62D7F4',
},
},
},
},
plugins: [
plugin(({ addUtilities }) => {
const newUtilities = {
'.flex-2': {
flex: '2',
},
}
addUtilities(newUtilities)
}),
],
})

0 comments on commit 3f14627

Please sign in to comment.