adata-ui 2.1.41-beta.2 → 2.1.41-beta.21

package/components/navigation/footer/ui/a-footer-accordion.vue

@@ -1,118 +1,118 @@
-<script setup lang="ts">
-import { useMediaQuery } from '@vueuse/core'
-
-interface Item {
-  title: string
-  link: string
-}
-
-interface Props {
-  label: string
-  link: string
-  content: Item[]
-}
-
-const props = defineProps<Props>()
-
-const isDesktop = useMediaQuery('(max-width: 1024px)')
-
-const open = ref(false)
-function toFinalValues(el: HTMLDivElement) {
-  el.style.height = `${el.scrollHeight}px`
-  el.style.opacity = '1'
-}
-
-function onAfterEnter(el: HTMLDivElement) {
-  el.style.height = ''
-}
-
-const filterCheck = computed(() => {
-  if (open.value) {
-    return open.value
-  }
-  else {
-    return open.value = !isDesktop.value
-  }
-})
-</script>
-
-<template>
-  <div class="flex flex-col items-start gap-2">
-    <div class="flex w-full justify-between gap-2">
-      <nuxt-link
-        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-current lg:pb-3 lg:pr-4"
-        :class="{ 'cursor-pointer': link }"
-        :to="link?.replace(/\/$/, '')"
-      >
-        {{ label }}
-      </nuxt-link>
-
-      <div class="cursor-pointer transition-all lg:hidden">
-        <a-icon-chevron-down
-          v-if="content.length"
-          filled
-          :font-controlled="false"
-          class="size-6 transition-all"
-          :class="{ 'rotate-180': open }"
-          @click="open = !open"
-        />
-      </div>
-    </div>
-
-    <transition
-      name="accordion"
-      @enter="toFinalValues"
-      @after-enter="onAfterEnter"
-      @before-leave="toFinalValues"
-    >
-      <div
-        v-if="filterCheck"
-        class="flex flex-col gap-3 lg:flex-row lg:gap-6"
-      >
-        <div
-          v-for="(subItem, subIdx) in content"
-          :key="subIdx"
-          class="flex flex-col gap-3 lg:gap-2"
-        >
-          <div
-            v-for="(link, idx) in subItem"
-            :key="idx"
-            class="flex items-center gap-2"
-          >
-            <nuxt-link
-              class="flex cursor-pointer items-center gap-2 text-body-sm lg:font-medium"
-              :to="link.link?.replace(/\/$/, '')"
-            >
-              {{ link.title }}
-            </nuxt-link>
-
-            <div
-              v-if="link.isNew"
-              class="rounded-xs bg-white/20 px-1 py-[2px] text-body-sm font-bold"
-            >
-              NEW
-            </div>
-          </div>
-        </div>
-      </div>
-    </transition>
-  </div>
-</template>
-
-<style scoped>
-.accordion-enter-active,
-.accordion-leave-active {
-  overflow: hidden;
-  transition: height 0.3s ease,
-  opacity 0.3s ease,
-  margin 0.3s ease;
-
-}
-
-.accordion-enter-from,
-.accordion-leave-to {
-  height: 0 !important;
-  opacity: 0 !important;
-  margin: 0 !important;
-}
-</style>
+<script setup lang="ts">
+import { useMediaQuery } from '@vueuse/core'
+
+interface Item {
+  title: string
+  link: string
+}
+
+interface Props {
+  label: string
+  link: string
+  content: Item[]
+}
+
+const props = defineProps<Props>()
+
+const isDesktop = useMediaQuery('(max-width: 1024px)')
+
+const open = ref(false)
+function toFinalValues(el: HTMLDivElement) {
+  el.style.height = `${el.scrollHeight}px`
+  el.style.opacity = '1'
+}
+
+function onAfterEnter(el: HTMLDivElement) {
+  el.style.height = ''
+}
+
+const filterCheck = computed(() => {
+  if (open.value) {
+    return open.value
+  }
+  else {
+    return open.value = !isDesktop.value
+  }
+})
+</script>
+
+<template>
+  <div class="flex flex-col items-start gap-2">
+    <div class="flex w-full justify-between gap-2">
+      <nuxt-link
+        class="cursor-default text-body-md-strong lg:border-b-[0.5px] lg:border-current lg:pb-3 lg:pr-4"
+        :class="{ 'cursor-pointer': link }"
+        :to="link?.replace(/\/$/, '')"
+      >
+        {{ label }}
+      </nuxt-link>
+
+      <div class="cursor-pointer transition-all lg:hidden">
+        <a-icon-chevron-down
+          v-if="content.length"
+          filled
+          :font-controlled="false"
+          class="size-6 transition-all"
+          :class="{ 'rotate-180': open }"
+          @click="open = !open"
+        />
+      </div>
+    </div>
+
+    <transition
+      name="accordion"
+      @enter="toFinalValues"
+      @after-enter="onAfterEnter"
+      @before-leave="toFinalValues"
+    >
+      <div
+        v-if="filterCheck"
+        class="flex flex-col gap-3 lg:flex-row lg:gap-6"
+      >
+        <div
+          v-for="(subItem, subIdx) in content"
+          :key="subIdx"
+          class="flex flex-col gap-3 lg:gap-2"
+        >
+          <div
+            v-for="(link, idx) in subItem"
+            :key="idx"
+            class="flex items-center gap-2"
+          >
+            <nuxt-link
+              class="flex cursor-pointer items-center gap-2 text-body-sm lg:font-medium"
+              :to="link.link?.replace(/\/$/, '')"
+            >
+              {{ link.title }}
+            </nuxt-link>
+
+            <div
+              v-if="link.isNew"
+              class="rounded-xs bg-white/20 px-1 py-[2px] text-body-sm font-bold"
+            >
+              NEW
+            </div>
+          </div>
+        </div>
+      </div>
+    </transition>
+  </div>
+</template>
+
+<style scoped>
+.accordion-enter-active,
+.accordion-leave-active {
+  overflow: hidden;
+  transition: height 0.3s ease,
+  opacity 0.3s ease,
+  margin 0.3s ease;
+
+}
+
+.accordion-enter-from,
+.accordion-leave-to {
+  height: 0 !important;
+  opacity: 0 !important;
+  margin: 0 !important;
+}
+</style>