feat(front): upgrade to Oruga 0.8.x

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

package-lock.json

@@ -11,7 +11,8 @@
         "@apollo/client": "^3.3.16",
         "@framasoft/socket": "^1.0.0",
         "@framasoft/socket-apollo-link": "^1.0.0",
-        "@oruga-ui/oruga-next": "^0.7.0",
+        "@oruga-ui/oruga-next": "^0.8.1",
+        "@oruga-ui/theme-oruga": "^0.2.0",
         "@sentry/tracing": "^7.1",
         "@sentry/vue": "^7.1",
         "@tiptap/core": "^2.0.0-beta.41",
@@ -3038,13 +3039,18 @@
       "dev": true
     },
     "node_modules/@oruga-ui/oruga-next": {
-      "version": "0.7.0",
+      "version": "0.8.1",
-      "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.7.0.tgz",
+      "resolved": "https://registry.npmjs.org/@oruga-ui/oruga-next/-/oruga-next-0.8.1.tgz",
-      "integrity": "sha512-T2KnNhGzgqv/Xzu4Efx3wnYahANcP6Z7Yc8DHOFIOLrM+ZDdTS9OjL3gofBVDrDBRg1DQv6EvsSsNkwMR88LpA==",
+      "integrity": "sha512-sdqQEYQ4BTcYWUvgUkzbthO26ZxtJ7W4clE0XKtPLr9MaGuDGU+SKqs7CvpWOrUhfWidiMSjOdGWTQAYzeWASQ==",
       "peerDependencies": {
         "vue": "^3.0.0"
       }
     },
+    "node_modules/@oruga-ui/theme-oruga": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@oruga-ui/theme-oruga/-/theme-oruga-0.2.0.tgz",
+      "integrity": "sha512-SW5v5cypn+fzBqjcUOY/esv92LOqV6l/Z9QlcaneGQqxyjyapIzuwUdt6oEXpjowqyN90uLYeXYnxltP7uKo0Q=="
+    },
     "node_modules/@pkgjs/parseargs": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/@pkgjs/parseargs/-/parseargs-0.11.0.tgz",

package.json

@@ -28,7 +28,8 @@
     "@apollo/client": "^3.3.16",
     "@framasoft/socket": "^1.0.0",
     "@framasoft/socket-apollo-link": "^1.0.0",
-    "@oruga-ui/oruga-next": "^0.7.0",
+    "@oruga-ui/oruga-next": "^0.8.1",
+    "@oruga-ui/theme-oruga": "^0.2.0",
     "@sentry/tracing": "^7.1",
     "@sentry/vue": "^7.1",
     "@tiptap/core": "^2.0.0-beta.41",

src/assets/oruga-tailwindcss.css

@@ -139,24 +139,31 @@ body {
   @apply pl-10;
 }
 
-/* InputItems */
+/* TagInput */
-.inputitems-item {
+.taginput {
+  @apply rounded bg-white dark:bg-zinc-700;
+}
+.taginput-item {
   @apply bg-primary mr-2;
 }
 
-.inputitems-item:first-child {
+.taginput-item:first-child {
   @apply ml-2;
 }
 
 /* Autocomplete */
-.autocomplete-menu {
+.autocomplete {
-  @apply max-h-[200px] drop-shadow-md text-black;
+  @apply max-h-[200px] drop-shadow-md text-black z-10;
 }
 
 .autocomplete-item {
   @apply py-1.5 px-4 text-start;
 }
 
+.autocomplete-item-group-title {
+  @apply opacity-50 py-0 px-2;
+}
+
 /* Dropdown */
 .dropdown {
   @apply inline-flex relative;
@@ -218,6 +225,9 @@ body {
 }
 
 /* Radio */
+.radio {
+  @apply mr-2;
+}
 .form-radio {
   @apply bg-none text-primary accent-primary;
 }

src/components/Account/ActorAutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-  <o-inputitems
+  <o-taginput
     :modelValue="modelValueWithDisplayName"
     @update:modelValue="(val: IActor[]) => $emit('update:modelValue', val)"
     :data="availableActors"
@@ -8,12 +8,12 @@
     :open-on-focus="false"
     field="displayName"
     :placeholder="t('Add a recipient')"
-    @typing="getActors"
+    @input="getActors"
   >
     <template #default="props">
       <ActorInline :actor="props.option" />
     </template>
-  </o-inputitems>
+  </o-taginput>
 </template>
 
 <script setup lang="ts">

src/components/Comment/EventComment.vue

@@ -235,7 +235,7 @@ import type { Locale } from "date-fns";
 import ReportModal from "@/components/Report/ReportModal.vue";
 import { useCreateReport } from "@/composition/apollo/report";
 import { Snackbar } from "@/plugins/snackbar";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import RouteName from "@/router/name";
 
 const router = useRouter();
@@ -372,7 +372,7 @@ const reportComment = async (
 };
 
 const snackbar = inject<Snackbar>("snackbar");
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 
 onCreateReportError((e) => {
   isReportModalActive.value = false;
@@ -387,7 +387,7 @@ onCreateReportError((e) => {
 
 oneCreateReportDone(() => {
   isReportModalActive.value = false;
-  oruga.notification.open({
+  notification.open({
     message: t("Comment from {'@'}{username} reported", {
       username: props.comment.actor?.preferredUsername,
     }),

src/components/Discussion/DiscussionComment.vue

@@ -157,7 +157,7 @@ import type { Locale } from "date-fns";
 import { useI18n } from "vue-i18n";
 import { useCreateReport } from "@/composition/apollo/report";
 import { Snackbar } from "@/plugins/snackbar";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import ReportModal from "@/components/Report/ReportModal.vue";
 
 const Editor = defineAsyncComponent(
@@ -220,7 +220,7 @@ const reportComment = async (
 };
 
 const snackbar = inject<Snackbar>("snackbar");
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 
 onCreateReportError((e) => {
   isReportModalActive.value = false;
@@ -235,7 +235,7 @@ onCreateReportError((e) => {
 
 oneCreateReportDone(() => {
   isReportModalActive.value = false;
-  oruga.notification.open({
+  notification.open({
     message: t("Comment from {'@'}{username} reported", {
       username: props.modelValue.actor?.preferredUsername,
     }),

src/components/Event/EventActionSection.vue

@@ -381,7 +381,7 @@ import { ApolloCache, FetchResult } from "@apollo/client/core";
 import { useMutation } from "@vue/apollo-composable";
 import { useCreateReport } from "@/composition/apollo/report";
 import { useDeleteEvent } from "@/composition/apollo/event";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import ExternalParticipationButton from "./ExternalParticipationButton.vue";
 import AccountMultiple from "vue-material-design-icons/AccountMultiple.vue";
 import Bullhorn from "vue-material-design-icons/Bullhorn.vue";
@@ -619,11 +619,11 @@ onJoinEventMutationDone(({ data }) => {
   }
 });
 
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 
 onJoinEventMutationError((error) => {
   if (error.message) {
-    oruga.notification.open({
+    notification.open({
       message: error.message,
       variant: "danger",
       position: "bottom-right",

src/components/Event/EventMetadataList.vue

@@ -10,9 +10,9 @@
       </div>
     </div>
     <o-field
-      grouped
       :label="$t('Find or add an element')"
       label-for="event-metadata-autocomplete"
+      class="flex-wrap justify-center gap-2"
     >
       <o-autocomplete
         expanded
@@ -27,6 +27,7 @@
         id="event-metadata-autocomplete"
         @select="addElement"
         dir="auto"
+        class="flex-1 min-w-[200px]"
       >
         <template v-slot="props">
           <div class="dark:bg-violet-3 p-1 flex items-center gap-1">

src/components/Event/EventParticipationCard.vue

@@ -337,7 +337,7 @@ import ViewCompact from "vue-material-design-icons/ViewCompact.vue";
 import AccountCircle from "vue-material-design-icons/AccountCircle.vue";
 import AccountGroup from "vue-material-design-icons/AccountGroup.vue";
 import Video from "vue-material-design-icons/Video.vue";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import { computed, inject } from "vue";
 import { useI18n } from "vue-i18n";
 import { Dialog } from "@/plugins/dialog";
@@ -401,7 +401,7 @@ const openDeleteEventModal = (
   });
 };
 
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 const snackbar = inject<Snackbar>("snackbar");
 
 const {
@@ -419,7 +419,7 @@ onDeleteEventDone(() => {
    */
   emit("eventDeleted", props.participation.event.id);
 
-  oruga.notification.open({
+  notification.open({
     message: t("Event {eventTitle} deleted", {
       eventTitle: props.participation.event.title,
     }),
@@ -460,7 +460,7 @@ const gotToWithCheck = async (
   ) {
     const organizerActor = participation.event.organizerActor as IPerson;
     await changeIdentity(organizerActor);
-    oruga.notification.open({
+    notification.open({
       message: t(
         "Current identity has been changed to {identityName} in order to manage this event.",
         {

src/components/Event/FullAddressAutoComplete.vue

@@ -23,9 +23,9 @@
           :data="addressData"
           v-model="queryTextWithDefault"
           :placeholder="placeholderWithDefault"
-          :customFormatter="(elem: IAddress) => addressFullName(elem)"
+          :formatter="(elem: IAddress) => addressFullName(elem)"
-          :debounceTyping="debounceDelay"
+          :debounce="debounceDelay"
-          @typing="asyncData"
+          @input="asyncData"
           :icon="canShowLocateMeButton ? null : 'map-marker'"
           expanded
           @select="setSelected"
@@ -114,30 +114,39 @@
               required
               v-model="selected.description"
               id="addressNameInput"
+              expanded
             />
           </o-field>
 
           <o-field :label="t('Street')" labelFor="streetInput">
-            <o-input v-model="selected.street" id="streetInput" />
+            <o-input v-model="selected.street" id="streetInput" expanded />
           </o-field>
 
           <o-field grouped>
             <o-field :label="t('Postal Code')" labelFor="postalCodeInput">
-              <o-input v-model="selected.postalCode" id="postalCodeInput" />
+              <o-input
+                v-model="selected.postalCode"
+                id="postalCodeInput"
+                expanded
+              />
             </o-field>
 
             <o-field :label="t('Locality')" labelFor="localityInput">
-              <o-input v-model="selected.locality" id="localityInput" />
+              <o-input
+                v-model="selected.locality"
+                id="localityInput"
+                expanded
+              />
             </o-field>
           </o-field>
 
           <o-field grouped>
             <o-field :label="t('Region')" labelFor="regionInput">
-              <o-input v-model="selected.region" id="regionInput" />
+              <o-input v-model="selected.region" id="regionInput" expanded />
             </o-field>
 
             <o-field :label="t('Country')" labelFor="countryInput">
-              <o-input v-model="selected.country" id="countryInput" />
+              <o-input v-model="selected.country" id="countryInput" expanded />
             </o-field>
           </o-field>
         </section>

src/components/Event/TagInput.vue

@@ -11,7 +11,7 @@
         <HelpCircleOutline :size="16" />
       </o-tooltip>
     </template>
-    <o-inputitems
+    <o-taginput
       v-model="tagsStrings"
       :data="filteredTags"
       :allow-autocomplete="true"
@@ -21,11 +21,11 @@
       :maxlength="20"
       :maxitems="10"
       :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
-      @typing="debouncedGetFilteredTags"
+      @input="debouncedGetFilteredTags"
       :id="id"
       dir="auto"
     >
-    </o-inputitems>
+    </o-taginput>
   </o-field>
 </template>
 <script lang="ts" setup>

src/components/Home/SearchFields.vue

@@ -17,6 +17,7 @@
       autocomplete="off"
       autocorrect="off"
       maxlength="1024"
+      expanded
     />
     <full-address-auto-complete
       :resultType="AddressSearchType.ADMINISTRATIVE"
@@ -102,7 +103,7 @@ const submit = () => {
 const { t } = useI18n({ useScope: "global" });
 </script>
 <style scoped>
-#search-anchor :deep(.o-ctrl-input) {
+#search-anchor :deep(.o-input__wrapper) {
   flex: 1;
 }
 </style>

src/components/NavBar.vue

@@ -235,7 +235,7 @@ import { useLazyQuery, useMutation } from "@vue/apollo-composable";
 import { UPDATE_DEFAULT_ACTOR } from "@/graphql/actor";
 import { changeIdentity } from "@/utils/identity";
 import { useRegistrationConfig } from "@/composition/apollo/config";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import {
   UNREAD_ACTOR_CONVERSATIONS,
   UNREAD_ACTOR_CONVERSATIONS_SUBSCRIPTION,
@@ -350,12 +350,12 @@ onDone(({ data }) => {
 
 const showMobileMenu = ref(false);
 
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 
 const performLogout = async () => {
   console.debug("Logging out client...");
   await logout();
-  oruga.notification.open({
+  notification.open({
     message: t("You have been logged-out"),
     variant: "success",
     position: "bottom-right",

src/components/Report/ReportModal.vue

@@ -55,6 +55,7 @@
             id="additional-comments"
             autofocus
             ref="reportAdditionalCommentsInput"
+            expanded
           />
         </o-field>
 

src/components/Share/ShareModal.vue

@@ -13,10 +13,9 @@
             <o-tooltip
               :label="t('URL copied to clipboard')"
               :active="showCopiedTooltip"
-              always
               variant="success"
               position="left"
-            >
+            />
             <o-button
               variant="primary"
               icon-right="content-paste"
@@ -25,7 +24,6 @@
               @keyup.enter="copyURL"
               :title="t('Copy URL to clipboard')"
             />
-            </o-tooltip>
           </p>
         </o-field>
         <div class="flex flex-wrap gap-1">
@@ -132,7 +130,7 @@ const props = withDefaults(
 
 const { t } = useI18n({ useScope: "global" });
 
-const URLInput = ref<{ $refs: { input: HTMLInputElement } } | null>(null);
+const URLInput = ref<{ $refs: { inputRef: HTMLInputElement } } | null>(null);
 
 const showCopiedTooltip = ref(false);
 
@@ -162,7 +160,7 @@ const mastodonShare = computed((): string | undefined =>
 );
 
 const copyURL = (): void => {
-  URLInput.value?.$refs.input.select();
+  URLInput.value?.$refs.inputRef.select();
   document.execCommand("copy");
   showCopiedTooltip.value = true;
   setTimeout(() => {

src/main.ts

@@ -18,7 +18,7 @@ import { notifierPlugin } from "./plugins/notifier";
 import FloatingVue from "floating-vue";
 import "floating-vue/dist/style.css";
 import Oruga from "@oruga-ui/oruga-next";
-import "@oruga-ui/oruga-next/dist/oruga.css";
+import "@oruga-ui/theme-oruga/dist/oruga.css";
 import "./assets/oruga-tailwindcss.css";
 import { orugaConfig } from "./oruga-config";
 import MaterialIcon from "./components/core/MaterialIcon.vue";

src/oruga-config.ts

@@ -22,22 +22,24 @@ export const orugaConfig = {
     roundedClass: "rounded",
     variantClass: "input-",
     iconRightClass: "input-icon-right",
+    sizeClass: "input-size-",
   },
-  inputitems: {
+  taginput: {
-    itemClass: "inputitems-item",
+    itemClass: "taginput-item",
-    containerClass: "rounded",
+    rootClass: "taginput",
   },
   autocomplete: {
-    menuClass: "autocomplete-menu",
+    rootClass: "autocomplete",
     itemClass: "autocomplete-item",
+    itemGroupTitleClass: "autocomplete-item-group-title",
   },
   icon: {
     variantClass: "icon-",
   },
   checkbox: {
     rootClass: "checkbox",
-    checkClass: "checkbox-check",
+    inputClass: "checkbox-check",
-    checkCheckedClass: "checkbox-checked",
+    inputCheckedClass: "checkbox-checked",
     labelClass: "checkbox-label",
   },
   dropdown: {
@@ -62,14 +64,15 @@ export const orugaConfig = {
   },
   switch: {
     labelClass: "switch-label",
-    checkCheckedClass: "switch-check-checked",
+    switchCheckedClass: "switch-check-checked",
   },
   select: {
     selectClass: "select",
   },
   radio: {
-    checkCheckedClass: "radio-checked",
+    rootClass: "radio",
-    checkClass: "form-radio",
+    inputCheckedClass: "radio-checked",
+    inputClass: "form-radio",
     labelClass: "radio-label",
   },
   notification: {
@@ -90,8 +93,8 @@ export const orugaConfig = {
     linkClass: "pagination-link",
     linkCurrentClass: "pagination-link-current",
     linkDisabledClass: "pagination-link-disabled",
-    nextBtnClass: "pagination-next",
+    nextButtonClass: "pagination-next",
-    prevBtnClass: "pagination-previous",
+    prevButtonClass: "pagination-previous",
     ellipsisClass: "pagination-ellipsis",
   },
   tabs: {
@@ -99,7 +102,7 @@ export const orugaConfig = {
     navTabsClass: "tabs-nav",
     navTypeClass: "tabs-nav-",
     navSizeClass: "tabs-nav-",
-    tabItemWrapperClass: "tabs-nav-item-wrapper",
+    itemWrapperClass: "tabs-nav-item-wrapper",
     itemHeaderTypeClass: "tabs-nav-item-",
     itemHeaderActiveClass: "tabs-nav-item-active-",
   },

src/plugins/notifier.ts

@@ -26,7 +26,6 @@ export class Notifier {
       duration: 5000,
       position: "bottom-right",
       type,
-      hasIcon: true,
     });
   }
 }

src/views/Account/children/EditIdentity.vue

@@ -28,6 +28,7 @@
           @input="(event: any) => updateUsername(event.target.value)"
           id="identity-display-name"
           dir="auto"
+          expanded
         />
       </o-field>
 
@@ -69,6 +70,7 @@
           aria-required="false"
           v-model="identity.summary"
           id="identity-summary"
+          expanded
         />
       </o-field>
 
@@ -118,10 +120,9 @@
             <o-tooltip
               :label="t('URL copied to clipboard')"
               :active="showCopiedTooltip.atom"
-              always
               variant="success"
               position="left"
-            >
+            />
             <o-button
               tag="a"
               icon-left="rss"
@@ -133,14 +134,12 @@
               target="_blank"
               >{{ t("RSS/Atom Feed") }}</o-button
             >
-            </o-tooltip>
             <o-tooltip
               :label="t('URL copied to clipboard')"
               :active="showCopiedTooltip.ics"
-              always
               variant="success"
               position="left"
-            >
+            />
             <o-button
               tag="a"
               @click="
@@ -152,7 +151,6 @@
               target="_blank"
               >{{ t("ICS/WebCal Feed") }}</o-button
             >
-            </o-tooltip>
             <o-button
               icon-left="refresh"
               variant="text"

src/views/Admin/SettingsView.vue

@@ -10,7 +10,11 @@
     <section v-if="settingsToWrite">
       <form @submit.prevent="updateSettings">
         <o-field :label="t('Instance Name')" label-for="instance-name">
-          <o-input v-model="settingsToWrite.instanceName" id="instance-name" />
+          <o-input
+            v-model="settingsToWrite.instanceName"
+            id="instance-name"
+            expanded
+          />
         </o-field>
         <div class="field flex flex-col">
           <label class="" for="instance-description">{{
@@ -74,7 +78,7 @@
           <small>
             {{ t("Main languages you/your moderators speak") }}
           </small>
-          <o-inputitems
+          <o-taginput
             v-model="instanceLanguages"
             :data="filteredLanguages"
             allow-autocomplete
@@ -82,11 +86,11 @@
             field="name"
             icon="label"
             :placeholder="t('Select languages')"
-            @typing="getFilteredLanguages"
+            @input="getFilteredLanguages"
             id="instance-languages"
           >
             <template #empty>{{ t("No languages found") }}</template>
-          </o-inputitems>
+          </o-taginput>
         </div>
         <div class="field flex flex-col">
           <label class="" for="instance-long-description">{{

src/views/Conversations/ConversationListView.vue

@@ -56,7 +56,7 @@ import ConversationListItem from "../../components/Conversations/ConversationLis
 import EmptyContent from "../../components/Utils/EmptyContent.vue";
 import { useHead } from "@unhead/vue";
 import { IPerson } from "@/types/actor";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import { arrayTransformer } from "@/utils/route";
 
 const page = useRouteQuery("page", 1, integerTransformer);
@@ -89,14 +89,14 @@ const conversations = computed(
     }
 );
 
-const { oruga } = useProgrammatic();
+const { modal } = useOruga();
 
 const NewConversation = defineAsyncComponent(
   () => import("@/components/Conversations/NewConversation.vue")
 );
 
 const openNewMessageModal = () => {
-  oruga.modal.open({
+  modal.open({
     component: NewConversation,
     props: {
       personMentions: personMentions.value,

src/views/Discussions/CreateView.vue

@@ -36,6 +36,7 @@
         <o-input
           aria-required="true"
           required
+          expanded
           v-model="discussion.title"
           id="discussion-title"
         />

src/views/Discussions/DiscussionView.vue

@@ -65,6 +65,7 @@
             <o-input
               :value="discussion.title"
               v-model="newTitle"
+              expanded
               id="discussion-title"
             />
           </o-field>

src/views/Event/EditView.vue

@@ -31,6 +31,7 @@
           v-model="event.title"
           id="title"
           dir="auto"
+          expanded
         />
       </o-field>
 
@@ -72,7 +73,6 @@
           :locale="$i18n.locale.replace('_', '-')"
           v-model="beginsOn"
           horizontal-time-picker
-          editable
           :tz-offset="tzOffset(beginsOn)"
           :first-day-of-week="firstDayOfWeek"
           :datepicker="{
@@ -99,7 +99,6 @@
           horizontal-time-picker
           :min-datetime="beginsOn"
           :tz-offset="tzOffset(endsOn)"
-          editable
           :first-day-of-week="firstDayOfWeek"
           :datepicker="{
             id: 'ends-on-field',
@@ -145,6 +144,7 @@
           v-model="event.onlineAddress"
           placeholder="URL"
           id="website-url"
+          expanded
         />
       </o-field>
 
@@ -373,44 +373,55 @@
             <o-radio
               v-model="event.status"
               name="status"
-              class="mr-2 p-2 rounded border"
-              :class="{
-                'btn-warning': event.status === EventStatus.TENTATIVE,
-                'btn-outlined-warning': event.status !== EventStatus.TENTATIVE,
-              }"
               variant="warning"
               :native-value="EventStatus.TENTATIVE"
+            >
+              <div
+                class="mr-2 p-2 rounded border flex gap-x-1"
+                :class="{
+                  'btn-warning': event.status === EventStatus.TENTATIVE,
+                  'btn-outlined-warning':
+                    event.status !== EventStatus.TENTATIVE,
+                }"
               >
                 <o-icon icon="calendar-question" />
                 {{ t("Tentative: Will be confirmed later") }}
+              </div>
             </o-radio>
             <o-radio
               v-model="event.status"
               name="status"
               variant="success"
-              class="mr-2 p-2 rounded border"
+              :native-value="EventStatus.CONFIRMED"
+            >
+              <div
+                class="mr-2 p-2 rounded border flex gap-x-1"
                 :class="{
                   'btn-success': event.status === EventStatus.CONFIRMED,
-                'btn-outlined-success': event.status !== EventStatus.CONFIRMED,
+                  'btn-outlined-success':
+                    event.status !== EventStatus.CONFIRMED,
                 }"
-              :native-value="EventStatus.CONFIRMED"
               >
                 <o-icon icon="calendar-check" />
                 {{ t("Confirmed: Will happen") }}
+              </div>
             </o-radio>
             <o-radio
               v-model="event.status"
               name="status"
-              class="p-2 rounded border"
+              variant="danger"
+              :native-value="EventStatus.CANCELLED"
+            >
+              <div
+                class="p-2 rounded border flex gap-x-1"
                 :class="{
                   'btn-danger': event.status === EventStatus.CANCELLED,
                   'btn-outlined-danger': event.status !== EventStatus.CANCELLED,
                 }"
-              variant="danger"
-              :native-value="EventStatus.CANCELLED"
               >
                 <o-icon icon="calendar-remove" />
                 {{ t("Cancelled: Won't happen") }}
+              </div>
             </o-radio>
           </o-field>
         </fieldset>
@@ -625,7 +636,7 @@ import { useMutation } from "@vue/apollo-composable";
 import { Dialog } from "@/plugins/dialog";
 import { Notifier } from "@/plugins/notifier";
 import { useHead } from "@unhead/vue";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 import type { Locale } from "date-fns";
 import sortBy from "lodash/sortBy";
 import { escapeHtml } from "@/utils/html";
@@ -806,10 +817,10 @@ const {
     postRefetchQueries(updatedData?.createEvent),
 }));
 
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 
 onCreateEventMutationDone(async ({ data }) => {
-  oruga.notification.open({
+  notification.open({
     message: (event.value.draft
       ? t("The event has been created as a draft")
       : t("The event has been published")) as string,
@@ -852,7 +863,7 @@ const {
 }));
 
 onEditEventMutationDone(() => {
-  oruga.notification.open({
+  notification.open({
     message: updateEventMessage.value,
     variant: "success",
     position: "bottom-right",

src/views/Group/CreateView.vue

@@ -15,6 +15,7 @@
         <o-input
           aria-required="true"
           required
+          expanded
           v-model="group.name"
           id="group-display-name"
         />

src/views/Group/GroupSettings.vue

@@ -27,7 +27,11 @@
     >
       <form @submit.prevent="updateGroup(buildVariables)" v-if="editableGroup">
         <o-field :label="t('Group name')" label-for="group-settings-name">
-          <o-input v-model="editableGroup.name" id="group-settings-name" />
+          <o-input
+            v-model="editableGroup.name"
+            id="group-settings-name"
+            expanded
+          />
         </o-field>
         <o-field :label="t('Group short description')">
           <Editor
@@ -83,16 +87,15 @@
               )
             }}</small>
           </o-radio>
-          <p class="pl-6">
+          <p class="pl-6 flex items-center gap-2">
             <code>{{ group.url }}</code>
             <o-tooltip
               v-if="canShowCopyButton"
               :label="t('URL copied to clipboard')"
               :active="showCopiedTooltip"
-              always
               variant="success"
               position="left"
-            >
+            />
             <o-button
               variant="primary"
               icon-right="content-paste"
@@ -100,7 +103,6 @@
               @click="copyURL"
               @keyup.enter="copyURL"
             />
-            </o-tooltip>
           </p>
         </div>
 

src/views/Moderation/ReportView.vue

@@ -387,6 +387,7 @@
           <o-input
             type="textarea"
             v-model="noteContent"
+            expanded
             id="newNoteInput"
           ></o-input>
         </o-field>

src/views/Posts/EditView.vue

@@ -29,6 +29,7 @@
             v-model="editablePost.title"
             id="post-title"
             dir="auto"
+            expanded
           />
         </o-field>
 

src/views/Posts/PostView.vue

@@ -100,7 +100,7 @@
           </div>
           <o-dropdown position="bottom-left" aria-role="list">
             <template #trigger>
-              <o-button role="button" icon-right="dots-horizontal">
+              <o-button icon-right="dots-horizontal">
                 {{ t("Actions") }}
               </o-button>
             </template>

src/views/Resources/ResourceFolder.vue

@@ -71,6 +71,7 @@
                 ref="resourceRenameInput"
                 aria-required="true"
                 v-model="updatedResource.title"
+                expanded
               />
             </o-field>
 
@@ -133,6 +134,7 @@
               aria-required="true"
               v-model="newResource.title"
               id="new-resource-title"
+              expanded
             />
           </o-field>
 
@@ -167,6 +169,7 @@
                 id="new-resource-url"
                 type="url"
                 required
+                expanded
                 v-model="newResource.resourceUrl"
                 @blur="previewResource"
                 ref="modalNewResourceLinkInput"
@@ -187,6 +190,7 @@
                 aria-required="true"
                 v-model="newResource.title"
                 id="new-resource-link-title"
+                expanded
               />
             </o-field>
 
@@ -200,6 +204,7 @@
                 type="textarea"
                 v-model="newResource.summary"
                 id="new-resource-summary"
+                expanded
               />
             </o-field>
 

src/views/Settings/AccountSettings.vue

@@ -60,6 +60,7 @@
             type="email"
             id="account-email"
             v-model="newEmail"
+            expanded
           />
         </o-field>
         <p class="help">{{ t("You'll receive a confirmation email.") }}</p>
@@ -72,6 +73,7 @@
             password-reveal
             minlength="6"
             v-model="passwordForEmailChange"
+            expanded
           />
         </o-field>
         <o-button class="mt-2" variant="primary" nativeType="submit">
@@ -117,6 +119,7 @@
             minlength="6"
             id="account-old-password"
             v-model="oldPassword"
+            expanded
           />
         </o-field>
         <o-field :label="t('New password')" label-for="account-new-password">
@@ -128,6 +131,7 @@
             minlength="6"
             id="account-new-password"
             v-model="newPassword"
+            expanded
           />
         </o-field>
         <o-button class="mt-2" variant="primary" nativeType="submit">
@@ -243,7 +247,7 @@ import {
 } from "../../graphql/user";
 import RouteName from "../../router/name";
 import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
-import { useProgrammatic } from "@oruga-ui/oruga-next";
+import { useOruga } from "@oruga-ui/oruga-next";
 
 const { t } = useI18n({ useScope: "global" });
 
@@ -341,12 +345,12 @@ const {
   DELETE_ACCOUNT
 );
 
-const { oruga } = useProgrammatic();
+const { notification } = useOruga();
 
 deleteAccountMutationDone(async () => {
   console.debug("Deleted account, logging out client...");
   await logout(false);
-  oruga.notification.open({
+  notification.open({
     message: t("Your account has been successfully deleted"),
     variant: "success",
     position: "bottom-right",

src/views/Settings/NotificationsView.vue

@@ -240,10 +240,9 @@
           <o-tooltip
             :label="$t('URL copied to clipboard')"
             :active="showCopiedTooltip.atom"
-            always
             variant="success"
             position="left"
-          >
+          />
           <o-button
             tag="a"
             icon-left="rss"
@@ -259,14 +258,13 @@
             target="_blank"
             >{{ $t("RSS/Atom Feed") }}</o-button
           >
-          </o-tooltip>
+
           <o-tooltip
             :label="$t('URL copied to clipboard')"
             :active="showCopiedTooltip.ics"
-            always
             variant="success"
             position="left"
-          >
+          />
           <o-button
             tag="a"
             @click="
@@ -282,7 +280,6 @@
             target="_blank"
             >{{ $t("ICS/WebCal Feed") }}</o-button
           >
-          </o-tooltip>
           <o-button
             icon-left="refresh"
             variant="text"

src/views/User/LoginView.vue

@@ -52,6 +52,7 @@
         <o-input
           aria-required="true"
           required
+          expanded
           id="email"
           type="email"
           v-model="credentials.email"
@@ -63,6 +64,7 @@
           aria-required="true"
           id="password"
           required
+          expanded
           type="password"
           password-reveal
           v-model="credentials.password"

src/views/User/PasswordReset.vue

@@ -19,6 +19,7 @@
           password-reveal
           minlength="6"
           v-model="credentials.password"
+          expanded
         />
       </o-field>
       <o-field :label="$t('Password (confirmation)')">
@@ -29,6 +30,7 @@
           password-reveal
           minlength="6"
           v-model="credentials.passwordConfirmation"
+          expanded
         />
       </o-field>
       <button class="button is-primary">

src/views/User/RegisterView.vue

@@ -103,6 +103,7 @@
               v-model="credentials.email"
               @blur="showGravatar = true"
               @focus="showGravatar = false"
+              expanded
             />
           </o-field>
 
@@ -120,6 +121,7 @@
               password-reveal
               minlength="6"
               v-model="credentials.password"
+              expanded
             />
           </o-field>
 

src/views/User/ResendConfirmation.vue

@@ -14,6 +14,7 @@
           type="email"
           id="emailAddress"
           v-model="emailValue"
+          expanded
         />
       </o-field>
       <p class="flex flex-wrap gap-1 mt-2">

tests/unit/specs/components/Comment/__snapshots__/CommentTree.spec.ts.snap

@@ -18,7 +18,7 @@ exports[`CommentTree > renders a comment tree with comments 1`] = `
         </div>
       </div>
       <div data-v-5d0380ab=\\"\\" class=\\"\\">
-        <o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\"></o-button-stub>
+        <o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\"></o-button-stub>
       </div>
     </article>
   </form>
@@ -56,7 +56,7 @@ exports[`CommentTree > renders an empty comment tree 1`] = `
         </div>
       </div>
       <div data-v-5d0380ab=\\"\\" class=\\"\\">
-        <o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\" iconboth=\\"false\\"></o-button-stub>
+        <o-button-stub data-v-5d0380ab=\\"\\" variant=\\"primary\\" iconleft=\\"send\\" rounded=\\"false\\" outlined=\\"false\\" loading=\\"false\\" expanded=\\"false\\" inverted=\\"false\\" nativetype=\\"submit\\" tag=\\"button\\" disabled=\\"false\\"></o-button-stub>
       </div>
     </article>
   </form>