@xosen/site-sdk 0.0.6 → 0.0.7

package/src/components/blocks/XImageTextBlock.vue

@@ -1,101 +0,0 @@
-<template>
-  <section class="x-image-text" :class="{ 'x-image-text--reverse': reverse }">
-    <div class="x-image-text__container">
-      <div class="x-image-text__text">
-        <h2 v-if="data.title" class="x-image-text__title">{{ data.title }}</h2>
-        <div v-if="data.content" class="x-image-text__content" v-html="data.content" />
-        <ul v-if="data.items?.length" class="x-image-text__checklist">
-          <li v-for="(item, i) in data.items" :key="i">
-            <span class="x-image-text__check-icon">{{ item.icon || '✓' }}</span>
-            {{ item.text }}
-          </li>
-        </ul>
-      </div>
-      <div v-if="data.image" class="x-image-text__image-wrap">
-        <img :src="data.image" :alt="data.title || ''" class="x-image-text__image" />
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import type { ImageTextBlockData } from '../../types/blocks.js';
-
-withDefaults(
-  defineProps<{
-    data: ImageTextBlockData;
-    reverse?: boolean;
-  }>(),
-  { reverse: false },
-);
-</script>
-
-<style scoped>
-.x-image-text {
-  padding: 80px 24px;
-}
-
-.x-image-text__container {
-  max-width: var(--x-max-width, 1200px);
-  margin: 0 auto;
-  display: grid;
-  grid-template-columns: 1fr 1fr;
-  gap: 48px;
-  align-items: center;
-}
-
-.x-image-text--reverse .x-image-text__container {
-  direction: rtl;
-}
-
-.x-image-text--reverse .x-image-text__text {
-  direction: ltr;
-}
-
-.x-image-text__title {
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--x-color-text, #2c3e50);
-  margin: 0 0 16px;
-}
-
-.x-image-text__content {
-  color: var(--x-color-text, #2c3e50);
-  line-height: 1.8;
-}
-
-.x-image-text__checklist {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-}
-
-.x-image-text__checklist li {
-  display: flex;
-  align-items: center;
-  gap: 12px;
-  padding: 8px 0;
-  font-size: 1rem;
-  color: var(--x-color-text, #2c3e50);
-}
-
-.x-image-text__check-icon {
-  color: var(--x-color-success, #00d084);
-  font-weight: bold;
-}
-
-.x-image-text__image {
-  width: 100%;
-  border-radius: var(--x-border-radius, 12px);
-}
-
-@media (max-width: 768px) {
-  .x-image-text__container {
-    grid-template-columns: 1fr;
-  }
-
-  .x-image-text--reverse .x-image-text__container {
-    direction: ltr;
-  }
-}
-</style>

package/src/components/blocks/XMapBlock.vue

@@ -1,52 +0,0 @@
-<template>
-  <section class="x-map-block">
-    <h2 v-if="data.title" class="x-map-block__title">{{ data.title }}</h2>
-    <div class="x-map-block__container">
-      <iframe
-        :src="mapUrl"
-        width="100%"
-        height="400"
-        style="border: 0"
-        allowfullscreen
-        loading="lazy"
-        referrerpolicy="no-referrer-when-downgrade"
-      />
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-import type { MapBlockData } from '../../types/blocks.js';
-
-const props = defineProps<{
-  data: MapBlockData;
-}>();
-
-const mapUrl = computed(() => {
-  const { lat, lng } = props.data.center || { lat: 0, lng: 0 };
-  const zoom = props.data.zoom || 14;
-  return `https://www.openstreetmap.org/export/embed.html?bbox=${lng - 0.01},${lat - 0.01},${lng + 0.01},${lat + 0.01}&layer=mapnik&marker=${lat},${lng}`;
-});
-</script>
-
-<style scoped>
-.x-map-block {
-  padding: 48px 24px;
-}
-
-.x-map-block__title {
-  text-align: center;
-  font-size: 1.75rem;
-  font-weight: 700;
-  margin-bottom: 32px;
-  color: var(--x-color-text, #2c3e50);
-}
-
-.x-map-block__container {
-  max-width: 1200px;
-  margin: 0 auto;
-  border-radius: var(--x-border-radius, 8px);
-  overflow: hidden;
-}
-</style>

package/src/components/blocks/XPricingBlock.vue

@@ -1,261 +0,0 @@
-<template>
-  <section class="x-pricing">
-    <div class="x-pricing__container">
-      <h2 v-if="title" class="x-pricing__title">{{ title }}</h2>
-      <p v-if="subtitle" class="x-pricing__subtitle">{{ subtitle }}</p>
-
-      <!-- Tabs for tariff groups -->
-      <div v-if="groups.length > 1" class="x-pricing__tabs">
-        <button
-          v-for="group in groups"
-          :key="group"
-          class="x-pricing__tab"
-          :class="{ 'x-pricing__tab--active': activeGroup === group }"
-          @click="activeGroup = group"
-        >
-          {{ group }}
-        </button>
-      </div>
-
-      <div class="x-pricing__grid">
-        <div
-          v-for="(plan, i) in activePlans"
-          :key="plan.id || i"
-          class="x-pricing-card"
-          :class="{ 'x-pricing-card--featured': i === featuredIndex }"
-        >
-          <h3 class="x-pricing-card__name">{{ plan.name }}</h3>
-          <p v-if="plan.description" class="x-pricing-card__desc">{{ plan.description }}</p>
-          <div class="x-pricing-card__price">
-            <span class="x-pricing-card__amount">{{ plan.price }}</span>
-            <span v-if="plan.period" class="x-pricing-card__period">/{{ plan.period }}</span>
-          </div>
-          <ul v-if="plan.features?.length" class="x-pricing-card__features">
-            <li v-for="(feature, fi) in plan.features" :key="fi">{{ feature }}</li>
-          </ul>
-          <a v-if="plan.actionUrl" :href="plan.actionUrl" class="x-btn x-btn--primary x-pricing-card__action">
-            {{ plan.actionText || 'Choose' }}
-          </a>
-        </div>
-      </div>
-    </div>
-  </section>
-</template>
-
-<script setup lang="ts">
-import { ref, computed, onMounted, watch } from 'vue';
-
-import type { PricingBlockData } from '../../types/blocks.js';
-import { useSiteData } from '../../composables/useSiteData.js';
-import { useSiteApi } from '../../composables/useSiteApi.js';
-
-interface Plan {
-  id?: string;
-  name: string;
-  description?: string;
-  price: string | number;
-  period?: string;
-  features?: string[];
-  actionUrl?: string;
-  actionText?: string;
-  tariffGroupName?: string;
-}
-
-const props = withDefaults(
-  defineProps<{
-    data?: PricingBlockData;
-    source?: 'api' | 'kv';
-    featuredIndex?: number;
-  }>(),
-  { source: 'kv', featuredIndex: 1 },
-);
-
-const title = computed(() => props.data?.title);
-const subtitle = computed(() => props.data?.subtitle);
-
-const plans = ref<Plan[]>([]);
-const activeGroup = ref('');
-
-// Load from KV (preloaded)
-const kvTariffs = useSiteData<Plan[]>('tariffs', 'tariffs');
-
-// Load from API if source is 'api'
-const api = useSiteApi();
-
-onMounted(async () => {
-  if (props.source === 'api') {
-    try {
-      plans.value = await api.getTariffs();
-    } catch {
-      // Fallback to KV
-    }
-  }
-});
-
-watch(
-  kvTariffs,
-  (val) => {
-    if (val && props.source === 'kv') {
-      plans.value = val;
-    }
-  },
-  { immediate: true },
-);
-
-const groups = computed(() => {
-  const names = new Set(plans.value.map((p) => p.tariffGroupName).filter(Boolean));
-  return Array.from(names) as string[];
-});
-
-watch(
-  groups,
-  (g) => {
-    if (g.length > 0 && !activeGroup.value) {
-      activeGroup.value = g[0];
-    }
-  },
-  { immediate: true },
-);
-
-const activePlans = computed(() => {
-  if (!activeGroup.value || groups.value.length <= 1) return plans.value;
-  return plans.value.filter((p) => p.tariffGroupName === activeGroup.value);
-});
-</script>
-
-<style scoped>
-.x-pricing {
-  padding: 80px 24px;
-  background: var(--x-color-background-alt, #f7f9fc);
-}
-
-.x-pricing__container {
-  max-width: var(--x-max-width, 1200px);
-  margin: 0 auto;
-}
-
-.x-pricing__title {
-  text-align: center;
-  font-size: 2rem;
-  font-weight: 700;
-  color: var(--x-color-text, #2c3e50);
-  margin: 0 0 8px;
-}
-
-.x-pricing__subtitle {
-  text-align: center;
-  color: var(--x-color-text-light, #6b7c93);
-  margin: 0 0 32px;
-}
-
-.x-pricing__tabs {
-  display: flex;
-  justify-content: center;
-  gap: 8px;
-  margin-bottom: 32px;
-}
-
-.x-pricing__tab {
-  padding: 8px 24px;
-  border: 2px solid var(--x-color-border, #e2e8f0);
-  border-radius: var(--x-border-radius, 8px);
-  background: transparent;
-  cursor: pointer;
-  font-weight: 500;
-  transition: all 0.2s;
-}
-
-.x-pricing__tab--active {
-  background: var(--x-color-primary, #1e73be);
-  border-color: var(--x-color-primary, #1e73be);
-  color: white;
-}
-
-.x-pricing__grid {
-  display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
-  gap: 24px;
-  align-items: start;
-}
-
-.x-pricing-card {
-  background: var(--x-color-surface, #fff);
-  border: 1px solid var(--x-color-border, #e2e8f0);
-  border-radius: var(--x-border-radius, 12px);
-  padding: 32px;
-  text-align: center;
-  transition: transform 0.2s;
-}
-
-.x-pricing-card--featured {
-  transform: scale(1.04);
-  border-color: var(--x-color-primary, #1e73be);
-  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
-}
-
-.x-pricing-card__name {
-  font-size: 1.25rem;
-  font-weight: 600;
-  margin: 0 0 8px;
-}
-
-.x-pricing-card__desc {
-  color: var(--x-color-text-light, #6b7c93);
-  font-size: 0.9rem;
-  margin: 0 0 16px;
-}
-
-.x-pricing-card__price {
-  margin: 16px 0;
-}
-
-.x-pricing-card__amount {
-  font-size: 2.5rem;
-  font-weight: 800;
-  color: var(--x-color-primary, #1e73be);
-}
-
-.x-pricing-card__period {
-  color: var(--x-color-text-light, #6b7c93);
-}
-
-.x-pricing-card__features {
-  list-style: none;
-  padding: 0;
-  margin: 0 0 24px;
-  text-align: left;
-}
-
-.x-pricing-card__features li {
-  padding: 6px 0;
-  border-bottom: 1px solid var(--x-color-border, #e2e8f0);
-  font-size: 0.9rem;
-}
-
-.x-pricing-card__features li::before {
-  content: '✓ ';
-  color: var(--x-color-success, #00d084);
-  font-weight: bold;
-}
-
-.x-pricing-card__action {
-  width: 100%;
-  justify-content: center;
-}
-
-.x-btn {
-  display: inline-flex;
-  align-items: center;
-  padding: 12px 32px;
-  border-radius: var(--x-border-radius, 8px);
-  font-weight: 600;
-  text-decoration: none;
-  transition: all 0.2s;
-  cursor: pointer;
-}
-
-.x-btn--primary {
-  background: var(--x-color-primary, #1e73be);
-  color: white;
-}
-</style>

package/src/components/common/XLocaleSwitcher.vue

@@ -1,56 +0,0 @@
-<template>
-  <div class="x-locale-switcher">
-    <button
-      v-for="loc in locales"
-      :key="loc"
-      class="x-locale-switcher__btn"
-      :class="{ 'x-locale-switcher__btn--active': locale === loc }"
-      @click="switchLocale(loc)"
-    >
-      {{ loc.toUpperCase() }}
-    </button>
-  </div>
-</template>
-
-<script setup lang="ts">
-import { useI18n } from 'vue-i18n';
-
-defineProps<{
-  locales: string[];
-}>();
-
-const { locale } = useI18n();
-
-function switchLocale(loc: string) {
-  locale.value = loc;
-  localStorage.setItem('site-locale', loc);
-}
-</script>
-
-<style scoped>
-.x-locale-switcher {
-  display: flex;
-  gap: 4px;
-}
-
-.x-locale-switcher__btn {
-  padding: 4px 8px;
-  border: 1px solid transparent;
-  border-radius: 4px;
-  background: transparent;
-  cursor: pointer;
-  font-size: 0.75rem;
-  font-weight: 600;
-  opacity: 0.6;
-  transition: all 0.2s;
-}
-
-.x-locale-switcher__btn--active {
-  opacity: 1;
-  border-color: currentColor;
-}
-
-.x-locale-switcher__btn:hover {
-  opacity: 1;
-}
-</style>

package/src/components/layout/XSiteFooter.vue

@@ -1,64 +0,0 @@
-<template>
-  <footer class="x-footer">
-    <div class="x-footer__container">
-      <div v-if="footerConfig.links?.length" class="x-footer__links">
-        <router-link v-for="link in footerConfig.links" :key="link.url" :to="link.url" class="x-footer__link">
-          {{ link.text }}
-        </router-link>
-      </div>
-      <p v-if="copyright" class="x-footer__copyright">{{ copyright }}</p>
-    </div>
-  </footer>
-</template>
-
-<script setup lang="ts">
-import { computed } from 'vue';
-
-import { useSiteConfig } from '../../composables/useSiteConfig.js';
-
-const { footer: footerConfig, branding } = useSiteConfig();
-
-const copyright = computed(() => {
-  if (footerConfig.value.copyright) return footerConfig.value.copyright;
-  const year = new Date().getFullYear();
-  return `© ${year} ${branding.value.siteName || ''}`;
-});
-</script>
-
-<style scoped>
-.x-footer {
-  background: var(--x-color-text, #2c3e50);
-  color: rgba(255, 255, 255, 0.7);
-  padding: 32px 24px;
-  text-align: center;
-}
-
-.x-footer__container {
-  max-width: var(--x-max-width, 1200px);
-  margin: 0 auto;
-}
-
-.x-footer__links {
-  display: flex;
-  gap: 24px;
-  justify-content: center;
-  margin-bottom: 16px;
-  flex-wrap: wrap;
-}
-
-.x-footer__link {
-  color: rgba(255, 255, 255, 0.7);
-  text-decoration: none;
-  font-size: 0.9rem;
-}
-
-.x-footer__link:hover {
-  color: white;
-}
-
-.x-footer__copyright {
-  font-size: 0.85rem;
-  margin: 0;
-  opacity: 0.6;
-}
-</style>

package/src/components/layout/XSiteLayout.vue

@@ -1,35 +0,0 @@
-<template>
-  <div class="x-site-layout">
-    <XSiteNav />
-    <main class="x-site-layout__main">
-      <slot />
-    </main>
-    <XSiteFooter />
-  </div>
-</template>
-
-<script setup lang="ts">
-import { onMounted } from 'vue';
-
-import { useSkin } from '../../composables/useSkin.js';
-import XSiteNav from './XSiteNav.vue';
-import XSiteFooter from './XSiteFooter.vue';
-
-// Apply skin CSS variables on mount
-useSkin();
-</script>
-
-<style scoped>
-.x-site-layout {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  font-family: var(--x-font-family, 'Inter', sans-serif);
-  color: var(--x-color-text, #2c3e50);
-  background: var(--x-color-background, #ffffff);
-}
-
-.x-site-layout__main {
-  flex: 1;
-}
-</style>