Migrate to Vue 3 and Vite

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/assets/oruga-tailwindcss.css

@@ -0,0 +1,192 @@
+body {
+  @apply bg-body-background-color dark:bg-gray-700 dark:text-white;
+}
+
+/* Button */
+.btn {
+  outline: none !important;
+  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded h-10;
+}
+.btn-rounded {
+  @apply rounded-full;
+}
+.btn-outlined-primary {
+  @apply bg-transparent text-blue-700 font-semibold py-2 px-4 border border-mbz-bluegreen dark:border-violet-3;
+}
+.btn-outlined-primary:hover {
+  @apply font-bold py-2 px-4 bg-mbz-bluegreen dark:bg-violet-3 text-white rounded;
+}
+.btn-disabled {
+  @apply opacity-50 cursor-not-allowed;
+}
+
+/* Field */
+.field {
+  margin-top: 0.5rem;
+}
+.field-label {
+  @apply block text-gray-700 dark:text-gray-100 text-base font-bold mb-2;
+}
+.field-danger {
+  @apply text-red-500;
+}
+
+.o-field.o-field--addons .control:last-child:not(:only-child) .button {
+  @apply inline-flex text-gray-800 bg-gray-200 h-9 mt-[1px] rounded text-center px-2 py-1.5;
+
+  border-bottom-left-radius: 0;
+  border-top-left-radius: 0;
+}
+
+.field-message-info {
+  @apply text-mbz-info;
+}
+
+.field-message-danger {
+  @apply text-mbz-danger;
+}
+
+/* Input */
+.input {
+  @apply appearance-none border w-full py-2 px-3 text-black leading-tight;
+}
+.input-danger {
+  @apply border-red-500;
+}
+.input-icon-right {
+  right: 0.5rem;
+}
+
+.icon-warning {
+  @apply text-amber-600;
+}
+
+.icon-danger {
+  @apply text-red-500;
+}
+
+.o-input__icon-left {
+  @apply dark:text-black h-10 w-10;
+}
+
+.o-input-iconspace-left {
+  @apply pl-10;
+}
+
+/* InputItems */
+.inputitems-item {
+  @apply bg-primary mr-2;
+}
+
+.inputitems-item:first-child {
+  @apply ml-2;
+}
+
+/* Autocomplete */
+.autocomplete-menu {
+  @apply max-h-[200px] drop-shadow-md text-black;
+}
+
+.autocomplete-item {
+  @apply py-1.5 px-4;
+}
+
+/* Dropdown */
+.dropdown {
+  @apply inline-flex relative;
+}
+.dropdown-menu {
+  min-width: 12em;
+  @apply bg-white dark:bg-gray-700 shadow-lg rounded-sm;
+}
+.dropdown-item {
+  @apply relative inline-flex gap-1 no-underline p-2 cursor-pointer;
+}
+
+.dropdown-item-active {
+  /* @apply bg-violet-2; */
+  @apply bg-white;
+}
+
+/* Checkbox */
+
+.checkbox {
+  @apply appearance-none bg-blue-500 border-blue-500;
+}
+
+.checkbox-checked {
+  @apply bg-blue-500;
+}
+
+.checkbox-label {
+  margin-left: 0.2rem;
+}
+
+/* Modal */
+
+.modal-content {
+  @apply bg-white dark:bg-gray-700 rounded px-2 py-4 w-full;
+}
+
+/* Switch */
+.switch {
+  @apply cursor-pointer inline-flex items-center relative mr-2;
+}
+
+.switch-label {
+  @apply pl-2;
+}
+
+/* Select */
+.select {
+  @apply dark:bg-white dark:text-black rounded pl-2 pr-6 border-2 border-transparent h-10 shadow-none;
+}
+
+/* Radio */
+.form-radio {
+  @apply bg-none;
+}
+.radio-label {
+  @apply pl-2;
+}
+
+/* Editor */
+button.menubar__button {
+  @apply dark:text-white;
+}
+
+/* Notification */
+.notification {
+  @apply p-7;
+}
+
+.notification-primary {
+  @apply bg-primary;
+}
+
+.notification-info {
+  @apply bg-mbz-info;
+}
+
+.notification-warning {
+  @apply bg-amber-600 text-black;
+}
+
+.notification-danger {
+  @apply bg-mbz-danger;
+}
+
+/* Table */
+.table tr {
+  @apply odd:bg-white even:bg-gray-50 border-b;
+}
+
+.table-td {
+  @apply py-4 px-2 whitespace-nowrap;
+}
+
+/* Snackbar */
+.notification-dark {
+  @apply text-white;
+  background: #363636;
+}

js/src/assets/tailwind.css

@@ -3,3 +3,49 @@
 @tailwind components;
 
 @tailwind utilities;
+
+@layer base {
+  body {
+    @apply bg-white dark:bg-gray-900;
+  }
+
+  h1 {
+    @apply text-4xl lg:text-5xl leading-none font-extrabold tracking-tight mt-5 mb-4 sm:mt-7 sm:mb-5;
+  }
+
+  h2 {
+    @apply text-xl mt-2;
+  }
+
+  h3 {
+    @apply text-lg;
+  }
+}
+
+a:hover {
+  color: inherit;
+}
+
+@layer components {
+  .mbz-card {
+    @apply block bg-mbz-yellow hover:bg-mbz-yellow/90 text-violet-title dark:text-white dark:hover:text-white/90 rounded-lg dark:border-violet-title shadow-md dark:bg-gray-700 dark:hover:bg-gray-700/90 dark:text-white dark:hover:text-white;
+  }
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+    --oruga-variant-primary: #1e7d97;
+
+    --oruga-field-label-color: white;
+
+    --oruga-table-background-color: #111827;
+    --oruga-table-th-color: white;
+
+    --oruga-modal-content-background-color: #111827;
+
+    --oruga-dropdown-item-color: white;
+    --oruga-dropdown-menu-background: #111827;
+    --oruga-dropdown-item-hover-color: white;
+    --oruga-dropdown-item-hover-background-color: #111827;
+  }
+}