mirror of
https://github.com/InvoiceShelf/InvoiceShelf.git
synced 2026-04-07 21:44:51 +00:00
ad5a7e51b9
- Vite 6 → 8 (Rolldown bundler), laravel-vite-plugin 1 → 3, @vitejs/plugin-vue 5 → 6 - Tailwind CSS 3 → 4 with CSS-based config (@theme, @plugin, @utility) - Add @tailwindcss/vite plugin, remove postcss/autoprefixer/sass - Convert SCSS files to plain CSS (resources/sass → resources/css) - Migrate tailwind.config.js to CSS @theme directives - Rename deprecated utility classes (shadow-sm→shadow-xs, outline-none→outline-hidden, rounded-sm→rounded-xs, bg-gradient-to→bg-linear-to, ring→ring-3) - Migrate opacity utilities to color modifiers (bg-opacity, text-opacity, border-opacity, ring-opacity → color/N syntax) - Update primary color CSS vars to full rgb() values for TW4 color-mix() - Fix border-l color specificity for sidebar navigation (TW4 default border color changed from gray-200 to currentColor) - Fix invalid border color classes (border-grey-light, border-modal-bg, border--200) - Add @reference directive for @apply in Vue component style blocks - Convert Vue component <style lang="scss"> blocks to plain CSS
104 lines
2.6 KiB
Vue
104 lines
2.6 KiB
Vue
<template>
|
|
<div class="rounded-md bg-yellow-50 p-4 relative">
|
|
<BaseIcon
|
|
name="XMarkIcon"
|
|
class="h-5 w-5 text-yellow-500 absolute right-4 cursor-pointer"
|
|
@click="$emit('hide')"
|
|
/>
|
|
<div class="flex flex-col">
|
|
<div class="flex">
|
|
<div class="shrink-0">
|
|
<BaseIcon
|
|
name="ExclamationIcon"
|
|
class="h-5 w-5 text-yellow-400"
|
|
aria-hidden="true"
|
|
/>
|
|
</div>
|
|
<div class="ml-3">
|
|
<h3 class="text-sm font-medium text-yellow-800">
|
|
{{ title }}
|
|
</h3>
|
|
<div class="mt-2 text-sm text-yellow-700">
|
|
<ul role="list" class="list-disc pl-5 space-y-1">
|
|
<li v-for="(list, key) in lists" :key="key">
|
|
{{ list }}
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div v-if="actions.length" class="mt-4 ml-3">
|
|
<div class="-mx-2 -my-1.5 flex flex-row-reverse">
|
|
<button
|
|
v-for="(action, i) in actions"
|
|
:key="i"
|
|
type="button"
|
|
class="
|
|
bg-yellow-50
|
|
px-2
|
|
py-1.5
|
|
rounded-md
|
|
text-sm
|
|
font-medium
|
|
text-yellow-800
|
|
hover:bg-yellow-100
|
|
focus:outline-hidden
|
|
focus:ring-2
|
|
focus:ring-offset-2
|
|
focus:ring-offset-yellow-50
|
|
focus:ring-yellow-600
|
|
mr-3
|
|
"
|
|
@click="$emit(`${action}`)"
|
|
>
|
|
{{ action }}
|
|
</button>
|
|
<!-- <button
|
|
v-if="actions[1]"
|
|
type="button"
|
|
class="
|
|
ml-3
|
|
bg-yellow-50
|
|
px-2
|
|
py-1.5
|
|
rounded-md
|
|
text-sm
|
|
font-medium
|
|
text-yellow-800
|
|
hover:bg-yellow-100
|
|
focus:outline-hidden
|
|
focus:ring-2
|
|
focus:ring-offset-2
|
|
focus:ring-offset-yellow-50
|
|
focus:ring-yellow-600
|
|
"
|
|
@click="$emit('action2')"
|
|
>
|
|
{{ actions[1] }}
|
|
</button> -->
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { XCircleIcon } from '@heroicons/vue/24/solid'
|
|
|
|
const emits = defineEmits(['hide'])
|
|
const props = defineProps({
|
|
title: {
|
|
type: String,
|
|
default: 'There were some errors with your submission',
|
|
},
|
|
lists: {
|
|
type: Array,
|
|
default: null,
|
|
},
|
|
actions: {
|
|
type: Array,
|
|
default: () => ['Dismiss'],
|
|
},
|
|
})
|
|
</script>
|