vertumnus
/
primevue-mirror
mirror of https://github.com/primefaces/primevue.git
1
0
Fork 0
Code Packages Releases Activity

CSS component for buttons

pull/7044/head
Cagatay Civici 2025-01-02 12:04:46 +03:00
parent 88522af04d
commit 87e6b35ce2
6 changed files with 50 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
apps/showcase/assets/styles/tailwind/main.css
View File

@ -1,3 +1,13 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer components {
.btn-design {
@apply px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
}
.btn-design-outlined {
@apply px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60;
}
}

47
apps/showcase/components/layout/AppDesigner.vue
View File

@ -1,18 +1,5 @@
<template>
<Drawer
v-model:visible="$appState.designer.active"
position="right"
class="designer !w-screen md:!w-[48rem]"
:modal="false"
:dismissable="false"
@after-show="onShow"
@after-hide="onHide"
:pt="{
header: 'p-5',
content: '!p-5',
footer: '!p-5'
}"
>
<Drawer v-model:visible="$appState.designer.active" position="right" class="designer !w-screen md:!w-[48rem]" :modal="false" :dismissable="false" @after-show="onShow" @after-hide="onHide" :dt="drawerTokens">
<template #header>
<div class="flex items-center gap-2">
<Button v-if="$appState.designer.activeView !== 'dashboard'" variant="text" severity="secondary" rounded type="button" icon="pi pi-chevron-left" @click="openDashboard" />
@ -199,6 +186,38 @@ export default {
}
return null;
},
drawerTokens() {
return {
root: {
shadow: '0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)'
},
header: {
padding: '1.25rem'
},
title: {
fontSize: '1.5rem',
fontWeight: '600'
},
content: {
padding: '0 1.25rem 1.25rem 1.25rem'
},
footer: {
padding: '1.25rem'
},
colorScheme: {
light: {
background: '{surface.0}',
borderColor: '{surface.200}',
color: '#09090b'
},
dark: {
background: '{surface.900}',
borderColor: '{surface.700}',
color: '#ffffff'
}
}
};
}
}
};

10
apps/showcase/components/layout/designer/dashboard/DesignDashboard.vue
View File

@ -6,15 +6,7 @@
>
<form @submit.prevent class="flex gap-4">
<input v-model="licenseKey" type="password" autocomplete="off" class="px-3 py-2 rounded-md border border-surface-300 dark:border-surface-700 flex-1" />
<button
type="button"
@click="activate(false)"
icon="pi pi-download"
:disabled="!licenseKey"
class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
>
Activate
</button>
<button type="button" @click="activate(false)" icon="pi pi-download" :disabled="!licenseKey" class="btn-design">Activate</button>
</form>
<div class="flex justify-between items-center mb-2 mt-6">

18
apps/showcase/components/layout/designer/editor/DesignEditorFooter.vue
View File

@ -1,21 +1,7 @@
<template>
<div class="flex justify-between gap-2">
<button
type="button"
@click="download"
icon="pi pi-download"
class="px-3 py-2 bg-transparent border border-gray-200 dark:border-gray-700 hover:border-gray-800 dark:hover:border-gray-500 text-black dark:text-white rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Download
</button>
<button
type="button"
@click="apply"
icon="pi pi-download"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Apply
</button>
<button type="button" @click="download" icon="pi pi-download" class="btn-design-outlined">Download</button>
<button type="button" @click="apply" icon="pi pi-download" class="btn-design">Apply</button>
</div>
</template>

16
apps/showcase/components/layout/designer/editor/custom/DesignCustomTokens.vue
View File

@ -22,20 +22,8 @@
</li>
</ul>
<div class="flex justify-between">
<button
type="button"
@click="addToken"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Add New
</button>
<button
type="button"
@click="save"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Save
</button>
<button type="button" @click="addToken" class="btn-design-outlined">Add New</button>
<button type="button" @click="save" class="btn-design">Save</button>
</div>
</template>

17
apps/showcase/components/layout/designer/editor/settings/DesignSettings.vue
View File

@ -25,21 +25,8 @@
before the migration.
</span>
<div class="flex justify-between">
<button
type="button"
@click="preview"
class="px-3 py-2 bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:text-black rounded-md font-medium cursor-pointer transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white"
>
Preview
</button>
<button
type="button"
:disabled="status !== 'preview'"
@click="confirmMigration"
class="px-3 py-2 bg-zinc-950 disabled:hover:bg-zinc-950 hover:bg-zinc-800 text-white dark:bg-white dark:hover:bg-gray-100 dark:disabled:hover:bg-white dark:text-black rounded-md font-medium cursor-pointer disabled:cursor-auto transition-colors duration-200 focus:outline focus:outline-offset-2 focus:outline-zinc-950 focus:dark:outline-white disabled:opacity-60"
>
Migrate
</button>
<button type="button" @click="preview" class="btn-design-outlined">Preview</button>
<button type="button" :disabled="status !== 'preview'" @click="confirmMigration" class="btn-design">Migrate</button>
</div>
<div v-if="status === 'preview'">
<div v-if="missingTokens.length" class="p-3 bg-yellow-100 text-yellow-950 dark:bg-amber-600 dark:text-black font-medium mt-4 rounded-md leading-normal">