feat: share and support modals

components/smart/ChangeLanguage.vue

@@ -14,7 +14,7 @@
             }`"
           />
         </template>
-        <nuxt-link
+        <NuxtLink
           v-for="(locale, index) in $i18n.locales.filter(
             ({ code }) => code !== $i18n.locale
           )"
@@ -23,7 +23,7 @@
           @click="$refs.language.tippy().hide()"
         >
           <SmartItem :label="locale.name" />
-        </nuxt-link>
+        </NuxtLink>
       </tippy>
     </span>
   </span>

components/smart/FontSizePicker.vue

@@ -17,6 +17,7 @@
           :key="`size-${index}`"
           :label="size.name"
           :info-icon="size.code === active.code ? 'done' : ''"
+          :active-info-icon="size.code === active.code"
           @click.native="
             setActiveFont(size)
             $refs.fontSize.tippy().hide()

components/smart/Item.vue

@@ -30,10 +30,17 @@
     :disabled="disabled"
     :tabindex="loading ? '-1' : '0'"
   >
-    <span v-if="!loading" class="inline-flex items-center">
+    <span
+      v-if="!loading"
+      class="inline-flex items-center"
+      :class="{ 'self-start': infoIcon }"
+    >
       <i
         v-if="icon"
-        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        :class="[
+          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          { 'text-accent': active },
+        ]"
         class="material-icons"
       >
         {{ icon }}
@@ -41,7 +48,10 @@
       <SmartIcon
         v-if="svg"
         :name="svg"
-        :class="label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : ''"
+        :class="[
+          label ? (reverse ? 'ml-4 opacity-75' : 'mr-4 opacity-75') : '',
+          { 'text-accent': active },
+        ]"
         class="svg-icons"
       />
     </span>
@@ -57,7 +67,11 @@
         {{ description }}
       </p>
     </div>
-    <i v-if="infoIcon" class="text-accent ml-6 self-end material-icons">
+    <i
+      v-if="infoIcon"
+      class="ml-6 self-center material-icons items-center"
+      :class="{ 'text-accent': activeInfoIcon }"
+    >
       {{ infoIcon }}
     </i>
   </SmartLink>
@@ -110,6 +124,14 @@ export default {
       type: Boolean,
       default: false,
     },
+    active: {
+      type: Boolean,
+      default: false,
+    },
+    activeInfoIcon: {
+      type: Boolean,
+      default: false,
+    },
     infoIcon: {
       type: String,
       default: "",

components/smart/Modal.vue

@@ -162,6 +162,7 @@ export default defineComponent({
       }
     },
     onTransitionLeaveStart() {
+      this.close()
       this.shouldCleanupDomOnUnmount = false
     },
     $getPortal() {