#Vue 2 + AEM 6.5 Handbook — Phần 2: AEM Features & Advanced Patterns

<template>
  <div class="accordion">
    <button @click="isOpen = !isOpen" class="accordion__toggle">
      {{ title }}
      <span :class="{ 'rotated': isOpen }">▼</span>
    </button>

    <transition name="slide-fade">
      <div v-if="isOpen" class="accordion__content">
        <div v-html="body"></div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    title: { type: String, default: '' },
    body:  { type: String, default: '' },
    defaultOpen: { type: Boolean, default: false }
  },
  data() {
    return { isOpen: this.defaultOpen }
  }
}
</script>

<style>
.slide-fade-enter-active {
  transition: all 0.3s ease-out;
}
.slide-fade-leave-active {
  transition: all 0.2s ease-in;
}
.slide-fade-enter,
.slide-fade-leave-to {
  transform: translateY(-10px);
  opacity: 0;
}
</style>

<template>
  <div class="tab-content">
    <div class="tab-content__nav">
      <button v-for="tab in tabs" :key="tab.id"
              :class="{ active: activeTab === tab.id }"
              @click="activeTab = tab.id">
        {{ tab.label }}
      </button>
    </div>

    <transition name="fade" mode="out-in">
      <div :key="activeTab" class="tab-content__panel">
        <div v-html="activeContent"></div>
      </div>
    </transition>
  </div>
</template>

<script>
export default {
  props: {
    tabs: { type: Array, default: () => [] }
    // tabs: [{ id: 'tab1', label: 'Tab 1', content: '<p>...</p>' }]
  },
  data() {
    return { activeTab: this.tabs[0]?.id || '' }
  },
  computed: {
    activeContent() {
      const tab = this.tabs.find(t => t.id === this.activeTab);
      return tab ? tab.content : '';
    }
  }
}
</script>

<style>
.fade-enter-active, .fade-leave-active {
  transition: opacity 0.25s ease;
}
.fade-enter, .fade-leave-to {
  opacity: 0;
}
</style>

<template>
  <div>
    <!-- Tracking click với data tùy chỉnh -->
    <button v-analytics="{ event: 'cta-click', action: 'hero-banner', label: title }">
      {{ ctaLabel }}
    </button>

    <!-- Tracking đơn giản -->
    <a v-analytics :href="link">Xem thêm</a>
  </div>
</template>

<template>
  <img v-lazy-src="imageSrc" :alt="title" class="lazy-image" />
</template>

<style>
.lazy-image {
  opacity: 0;
  transition: opacity 0.3s;
}
.lazy-image.loaded {
  opacity: 1;
}
</style>

<script>
import aemMixin from '../mixins/aemMixin';

export default {
  mixins: [aemMixin],
  computed: {
    transitionName() {
      // Tắt animation trong Author mode (tránh glitch khi drag/drop)
      return this.isAuthorMode ? '' : 'slide-fade';
    }
  }
}
</script>

<template>
  <transition :name="transitionName">
    <div v-if="isOpen">...</div>
  </transition>
</template>

<!-- ✅ Khuyến nghị cho AEM: BEM prefix, không scoped -->
<style>
/* Component namespace rõ ràng */
.vue-banner { }
.vue-banner__title { }
.vue-banner__cta { }
.vue-banner--dark-theme { }
.vue-banner--large-padding { }
</style>

<script>
export default {
  props: {
    // Path đến Content Fragment, truyền từ HTL
    fragmentPath: { type: String, default: '' }
  },
  data() {
    return { fragment: null, loading: true }
  },
  async created() {
    if (!this.fragmentPath) return;
    try {
      // AEM Assets HTTP API
      const res = await fetch(
        `${this.fragmentPath}.json`
      );
      const data = await res.json();
      this.fragment = data;
    } catch (err) {
      console.error('[CF] Fetch failed:', err);
    } finally {
      this.loading = false;
    }
  }
}
</script>

<script>
export default {
  data() {
    return {
      isMobile: false,
      mediaQuery: null
    }
  },
  mounted() {
    this.mediaQuery = window.matchMedia('(max-width: 768px)');
    this.isMobile = this.mediaQuery.matches;
    this.mediaQuery.addEventListener('change', this.onResize);
  },
  beforeDestroy() {
    if (this.mediaQuery) {
      this.mediaQuery.removeEventListener('change', this.onResize);
    }
  },
  methods: {
    onResize(e) {
      this.isMobile = e.matches;
    }
  }
}
</script>

<!-- ErrorBoundary.vue -->
<script>
export default {
  name: 'ErrorBoundary',
  data() {
    return { hasError: false, errorMessage: '' }
  },
  errorCaptured(err, vm, info) {
    this.hasError = true;
    this.errorMessage = err.message;
    console.error(`[ErrorBoundary] Caught error in ${vm?.$options?.name}:`, err);
    return false; // ngăn error propagate lên
  },
  render(h) {
    if (this.hasError) {
      return h('div', { class: 'vue-error-fallback' }, [
        h('p', 'Component gặp lỗi. Vui lòng refresh trang.'),
      ]);
    }
    return this.$slots.default?.[0];
  }
}
</script>

<template>
  <div class="static-banner">
    <!-- Render 1 lần, không track changes → nhanh hơn -->
    <h1 v-once>{{ title }}</h1>
    <p v-once v-html="body"></p>

    <!-- Phần interactive vẫn reactive bình thường -->
    <button @click="handleClick">{{ ctaLabel }}</button>
  </div>
</template>

<script>
export default {
  props: {
    // Large array từ AEM (ví dụ: 1000 items)
    items: { type: Array, default: () => [] }
  },
  data() {
    return {
      // Freeze để Vue không tạo getter/setter cho từng item
      frozenItems: Object.freeze(this.items)
    }
  }
}
</script>

<!-- SimpleTag.vue — functional, không có state -->
<template functional>
  <span :class="['tag', `tag--${props.variant}`]">
    {{ props.label }}
  </span>
</template>

<script>
export default {
  functional: true,
  props: {
    label:   { type: String, required: true },
    variant: { type: String, default: 'default' }
  }
}
</script>