System Features

// Date range state
const dateRange = ref([
  new Date(new Date().setDate(new Date().getDate() - 7)),
  new Date(),
]);

// Handle date range changes
const handleDateRangeChange = (newDateRange) => {
  dateRange.value = newDateRange;
  // All cards automatically update via props
};

const displayFormat = (date) => {
  const dateObj = new Date(date);
  return dateObj.toLocaleDateString(undefined, {
    year: 'numeric',
    month: 'short',
    day: 'numeric',
  });
};

addFilter('uixpress/dashboard/categories/register', (categories) => {
  return [
    ...categories,
    { value: 'site', label: __('Overview', 'uixpress') },
    { value: 'analytics', label: __('Analytics', 'uixpress') },
  ];
});

/wp-admin/index.php?dashboard_category=analytics

// Active category from URL or default
const activeCategoryID = computed(() => {
  const urlParams = new URLSearchParams(window.location.search);
  const dashboardCategory = urlParams.get('dashboard_category');
  
  if (dashboardCategory) {
    const siteCategory = registeredCategories.value.find(
      (category) => category.value === dashboardCategory
    )?.value;
    if (siteCategory) return siteCategory;
  }
  
  return registeredCategories.value[0]?.value || null;
});

// Update URL when category changes
watch(activeCategory, (newVal) => {
  const urlParams = new URLSearchParams(window.location.search);
  urlParams.set('dashboard_category', newVal);
  window.history.replaceState(
    {},
    '',
    `${window.location.pathname}?${urlParams.toString()}`
  );
});

const userHasCapability = (capabilities) => {
  if (!capabilities) return true;
  if (!Array.isArray(capabilities)) return true;
  if (!appStore.state.currentUser) return false;

  for (let capability of capabilities) {
    const hasCap = appStore.state.currentUser.allcaps[capability];
    if (hasCap) return true;
  }
  return false;
};

<component
  :is="card.component"
  :class="`col-span-${card.metadata.width || 4} max-md:col-span-${
    card.metadata.mobileWidth || 12
  }`"
/>

import { applyFilters } from '@/assets/js/functions/HooksSystem.js';

// Register cards
registeredCards.value = await applyFilters(
  'uixpress/dashboard/cards/register',
  registeredCards.value
);

// Register categories
registeredCategories.value = await applyFilters(
  'uixpress/dashboard/categories/register',
  registeredCategories.value
);

// Dispatch when dashboard is ready
const event = new CustomEvent('uixpress/dashboard/ready');
document.dispatchEvent(event);

document.addEventListener('uixpress/dashboard/ready', () => {
  const { addFilter } = window.uixpress;
  
  addFilter('uixpress/dashboard/cards/register', (widgets) => {
    return [...widgets, myExternalCard];
  });
});

import { addFilter } from '@/assets/js/functions/HooksSystem.js';
import myCard from './my-card/index.js';

addFilter('uixpress/dashboard/cards/register', (widgets) => {
  return [...widgets, myCard];
});

<ShadowRoot
  tag="div"
  :adopted-style-sheets="[adoptedStyleSheets]"
  class="uipx-normalize"
>
  <!-- Dashboard content -->
</ShadowRoot>

const setStyles = () => {
  let appStyleNode = document.querySelector('#uixpress-dashboard-css');
  if (!appStyleNode) {
    appStyleNode = manuallyAddStyleSheet();
    appStyleNode.onload = () => {
      const appStyles = appStyleNode.sheet;
      for (const rule of [...appStyles.cssRules].reverse()) {
        adoptedStyleSheets.value.insertRule(rule.cssText);
      }
    };
  } else {
    const appStyles = appStyleNode.sheet;
    for (const rule of [...appStyles.cssRules].reverse()) {
      adoptedStyleSheets.value.insertRule(rule.cssText);
    }
  }
};

<div :class="isDark ? 'dark' : ''" class="...">
  <!-- Dashboard content -->
</div>

import { useDarkMode } from './src/useDarkMode.js';
const { isDark } = useDarkMode();

<LoadingIndicator :height="3" />

const loading = ref(false);

const loadData = async () => {
  loading.value = true;
  try {
    // Fetch data
  } finally {
    loading.value = false;
  }
};

const error = ref(null);

try {
  // Fetch data
} catch (err) {
  error.value = err.message || 'Failed to load data';
}

<div v-if="error" class="error-message">
  {{ error }}
  <button @click="loadData">Retry</button>
</div>

onMounted(async () => {
  await loadData();
});

watch(
  () => props.dateRange,
  loadData,
  { deep: true }
);