Usage Examples

Example 1: Switch Theme

<script setup>
import { inject } from 'vue';

const { themeToggle, $tMessage } = inject('$global');

const changeTheme = (theme) => {
  themeToggle(theme);
  $tMessage({
    type: 'success',
    content: `Switched to ${theme} theme`
  });
};
</script>

<template>
  <button @click="changeTheme('darkBlue')">Switch to Dark Theme</button>
</template>

Example 2: Use Theme Color

<script setup>
import { inject, computed } from 'vue';

const { $tc, $gTheme } = inject('$global');

const primaryColor = $tc('primary.base', true);
const buttonStyle = computed(() => ({
  backgroundColor: primaryColor.value,
  color: '#fff'
}));
</script>

<template>
  <button :style="buttonStyle">Dynamic Theme Button</button>
</template>

Example 3: i18n Text

<script setup>
import { inject } from 'vue';

const { i18n } = inject('$global');
</script>

<template>
  <div>
    <h1>{{ i18n('error.label') }}</h1>
    <button>{{ i18n('error.terminateService') }}</button>
  </div>
</template>

Example 4: Loading State

<script setup>
import { inject } from 'vue';

const { $tLoading, $tLoadingClose, $tMessage } = inject('$global');

const loadData = async () => {
  $tLoading({
    visible: true,
    desc:'Loading data...',
    spinner: 'ringA'
  });
  
  try {
    // Simulate async request
    await new Promise(resolve => setTimeout(resolve, 2000));
    $tMessage('Loaded successfully');
  } catch (error) {
    $tMessage({ type: 'error', content: 'Load failed' });
  } finally {
    $tLoadingClose();
  }
};
</script>

<template>
  <button @click="loadData">Load Data</button>
</template>

Example 5: Admin Tab

Availability:

✕ Scifi

✕ Base

✓ Admin

✓ Prime

<script setup>
import { inject } from 'vue';
import { useRouter } from 'vue-router';

const router = useRouter();
const { tabAdd, $ATabs } = inject('$global');

const openPage = (route) => {
  tabAdd({
    meta: {
      label: route.meta.label,
      icon: route.meta.icon,
      keepAlive: true
    },
    path: route.path,
    query: route.query
  });
  
  router.push(route);
};
</script>

<template>
  <div>
    <div v-for="tab in $ATabs" :key="tab.path">
      {{ tab.label }}
    </div>
  </div>
</template>