@ziyarago/ui 0.6.1 → 0.8.0

package/types/vue-global.d.ts

@@ -102,21 +102,33 @@ declare module 'vue' {
     UiOptionCard: typeof Ui.UiOptionCard;
     UiOptionCards: typeof Ui.UiOptionCards;
     UiPageAccount: typeof Ui.UiPageAccount;
+    UiPageAnalytics: typeof Ui.UiPageAnalytics;
     UiPageAuth: typeof Ui.UiPageAuth;
+    UiPageBilling: typeof Ui.UiPageBilling;
     UiPageBookings: typeof Ui.UiPageBookings;
+    UiPageCalendar: typeof Ui.UiPageCalendar;
     UiPageCatalog: typeof Ui.UiPageCatalog;
+    UiPageCheckout: typeof Ui.UiPageCheckout;
     UiPageCrm: typeof Ui.UiPageCrm;
     UiPageDashboard: typeof Ui.UiPageDashboard;
     UiPageDetail: typeof Ui.UiPageDetail;
     UiPageFaq: typeof Ui.UiPageFaq;
     UiPageForm: typeof Ui.UiPageForm;
     UiPageHeader: typeof Ui.UiPageHeader;
+    UiPageInbox: typeof Ui.UiPageInbox;
+    UiPageIntegrations: typeof Ui.UiPageIntegrations;
+    UiPageKanban: typeof Ui.UiPageKanban;
+    UiPageLanding: typeof Ui.UiPageLanding;
+    UiPageNotifications: typeof Ui.UiPageNotifications;
+    UiPageOnboarding: typeof Ui.UiPageOnboarding;
     UiPageOrder: typeof Ui.UiPageOrder;
     UiPagePatterns: typeof Ui.UiPagePatterns;
     UiPagePricing: typeof Ui.UiPagePricing;
     UiPageProfile: typeof Ui.UiPageProfile;
+    UiPageSearch: typeof Ui.UiPageSearch;
     UiPageSettings: typeof Ui.UiPageSettings;
     UiPageStatus: typeof Ui.UiPageStatus;
+    UiPageTeam: typeof Ui.UiPageTeam;
     UiPageUserList: typeof Ui.UiPageUserList;
     UiPagination: typeof Ui.UiPagination;
     UiPasswordInput: typeof Ui.UiPasswordInput;

package/types/vue.d.ts

@@ -3199,6 +3199,46 @@ export interface UiPageAccountSlots {
 }
 export const UiPageAccount: UiVueComponent<UiPageAccountProps, UiPageAccountSlots>;
 
+/**
+ * Analytics template: period picker, KPI strip, trend charts, a breakdown block and a table. Put Export in actions.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Trend and breakdown share a row and wrap on narrow screens. Put Export in the actions slot.
+ */
+export interface UiPageAnalyticsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageAnalyticsSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Period presets and compare toggle; SegmentedControl, Select, Switch. */
+  period?: () => any;
+  /** Headline numbers with deltas; KpiTile, StatLine. */
+  kpis?: () => any;
+  /** Main time series; ChartCard with MiniChart. */
+  trend?: () => any;
+  /** Split by channel or country; ChartCard with SegBar and CountryRow. */
+  breakdown?: () => any;
+  /** Rows behind the numbers; DataTable. */
+  table?: () => any;
+}
+export const UiPageAnalytics: UiVueComponent<UiPageAnalyticsProps, UiPageAnalyticsSlots>;
+
 /**
  * Sign-in page template without the app shell, as a centered card or a split layout.
  * Note: Designed for the dark theme and used without AppShell.
@@ -3275,6 +3315,46 @@ export interface UiPageAuthSlots {
 }
 export const UiPageAuth: UiVueComponent<UiPageAuthProps, UiPageAuthSlots>;
 
+/**
+ * Billing template: current plan, usage meters, invoices, payment methods and an upgrade card.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Plan, usage and invoices share the main column; methods and upgrade form the side column.
+ */
+export interface UiPageBillingProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageBillingSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Current plan; Card with Badge and Buttons. */
+  plan?: () => any;
+  /** Usage meters; Progress. */
+  usage?: () => any;
+  /** Invoices; DataTable. */
+  invoices?: () => any;
+  /** Saved cards; Card, IconTile, Badge. */
+  methods?: () => any;
+  /** Upgrade call to action; Card variant="inverse" or PricingCard. */
+  upgrade?: () => any;
+}
+export const UiPageBilling: UiVueComponent<UiPageBillingProps, UiPageBillingSlots>;
+
 /**
  * Bookings list template: stats, toolbar, bulk-action bar, table and pagination.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3314,6 +3394,44 @@ export interface UiPageBookingsSlots {
 }
 export const UiPageBookings: UiVueComponent<UiPageBookingsProps, UiPageBookingsSlots>;
 
+/**
+ * Calendar template: view switch, time grid, mini calendar and event details.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: The grid sits beside the mini calendar and details; they stack under 860 px.
+ */
+export interface UiPageCalendarProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageCalendarSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** SegmentedControl, Button, IconButton. */
+  toolbar?: () => any;
+  /** Time grid with events; Card with custom grid, or CalendarView for the month. */
+  grid?: () => any;
+  /** Month picker; Calendar. */
+  mini?: () => any;
+  /** Selected event; Card, Descriptions, Avatar, Button. */
+  details?: () => any;
+}
+export const UiPageCalendar: UiVueComponent<UiPageCalendarProps, UiPageCalendarSlots>;
+
 /**
  * Catalog template with a filter sidebar and a card grid (hotels, tours).
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3352,6 +3470,46 @@ export interface UiPageCatalogSlots {
 }
 export const UiPageCatalog: UiVueComponent<UiPageCatalogProps, UiPageCatalogSlots>;
 
+/**
+ * Checkout template: step indicator, cart items, delivery address, payment and an order summary column.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Summary sits in the side column and drops below the form on narrow screens.
+ */
+export interface UiPageCheckoutProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageCheckoutSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Checkout steps above the content; Stepper. */
+  steps?: () => any;
+  /** Cart lines with quantity and price; Card with NumberInput. */
+  items?: () => any;
+  /** Contact and delivery fields; Card with TextField and Select. */
+  address?: () => any;
+  /** Payment method and card fields; OptionCards, TextField. */
+  payment?: () => any;
+  /** Totals, promo code and the pay button; Card, Descriptions, Button. */
+  summary?: () => any;
+}
+export const UiPageCheckout: UiVueComponent<UiPageCheckoutProps, UiPageCheckoutSlots>;
+
 /**
  * CRM template: summary tiles, filters, pipeline board and call queue.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3563,6 +3721,219 @@ export interface UiPageHeaderSlots {
 }
 export const UiPageHeader: UiVueComponent<UiPageHeaderProps, UiPageHeaderSlots>;
 
+/**
+ * Inbox template: filters and conversation list, the open thread with a composer, and a customer panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: List, thread and customer panel sit side by side and stack in that order at 860px and below. Keep the selected conversation in your own state.
+ */
+export interface UiPageInboxProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageInboxSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Search and folder chips above the list; SearchInput, FilterChips. */
+  filters?: () => any;
+  /** Conversation rows with unread marks; Card, Avatar, Badge. */
+  list?: () => any;
+  /** Messages of the open conversation; Card, Avatar. */
+  thread?: () => any;
+  /** Reply field and send button; Textarea, Button. */
+  composer?: () => any;
+  /** Customer details; ContactPanel, Descriptions, Tag. */
+  customer?: () => any;
+}
+export const UiPageInbox: UiVueComponent<UiPageInboxProps, UiPageInboxSlots>;
+
+/**
+ * Integrations template: connection cards, API keys and webhooks.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Keys and webhooks share a row and wrap on narrow screens.
+ */
+export interface UiPageIntegrationsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageIntegrationsSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** SearchInput, FilterChips. */
+  filters?: () => any;
+  /** IntegrationCard grid. */
+  connections?: () => any;
+  /** Keys; DataTable with CopyButton and IconButton. */
+  keys?: () => any;
+  /** Webhooks list; Card, Switch, Chip. */
+  webhooks?: () => any;
+}
+export const UiPageIntegrations: UiVueComponent<UiPageIntegrationsProps, UiPageIntegrationsSlots>;
+
+/**
+ * Kanban template: filters, task board columns and a card detail panel.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Board scrolls horizontally inside its area; detail goes below it under 860 px.
+ */
+export interface UiPageKanbanProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageKanbanSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** SearchInput, FilterChips, Select. */
+  filters?: () => any;
+  /** Columns with cards; KanbanColumn, KanbanCard. */
+  board?: () => any;
+  /** Selected card; Card, Descriptions, Checkbox, Timeline. */
+  detail?: () => any;
+}
+export const UiPageKanban: UiVueComponent<UiPageKanbanProps, UiPageKanbanSlots>;
+
+/**
+ * Landing template: hero, logo strip, features, social proof, pricing teaser, call to action and footer. Used without the app shell.
+ * Note: Landing does not use the app shell: render it on its own page. Blocks stack in one column; each block may use its own grid and wraps on narrow screens.
+ */
+export interface UiPageLandingProps {
+
+}
+export interface UiPageLandingSlots {
+  /** Hero block; HeroBanner, Card, Button. */
+  hero?: () => any;
+  /** Partner row; Chip or Text. */
+  logos?: () => any;
+  /** Feature cards; Card, IconTile. */
+  features?: () => any;
+  /** Numbers and quotes; StatStrip, Card, Avatar. */
+  proof?: () => any;
+  /** Plan cards; PricingCard. */
+  pricing?: () => any;
+  /** Closing block; Card variant="gradient", Button. */
+  cta?: () => any;
+  /** Page footer; Footer. */
+  footer?: () => any;
+}
+export const UiPageLanding: UiVueComponent<UiPageLandingProps, UiPageLandingSlots>;
+
+/**
+ * Notifications template: filters, a feed grouped by day and an empty state. Put Mark all read in actions.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Fill empty only when the feed has no rows. Mark all read goes in the actions slot.
+ */
+export interface UiPageNotificationsProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageNotificationsSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Filter chips such as all, unread and mentions; FilterChips. */
+  filters?: () => any;
+  /** Notification rows grouped by day; Card, IconTile, Badge, Divider. */
+  feed?: () => any;
+  /** Shown instead of the feed when nothing matches; EmptyState. */
+  empty?: () => any;
+}
+export const UiPageNotifications: UiVueComponent<UiPageNotificationsProps, UiPageNotificationsSlots>;
+
+/**
+ * Onboarding template: progress block, active step content, setup checklist and a column of tips.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Keep the active step in your own state; the template does not switch steps. Steps and checklist share the main column, tips go to the side and stack below it on narrow screens.
+ */
+export interface UiPageOnboardingProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageOnboardingSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Stepper and a completion bar above the content; Stepper, Progress. */
+  progress?: () => any;
+  /** Content of the active step; Card with form fields. */
+  steps?: () => any;
+  /** Remaining setup tasks; Card with Checkbox rows. */
+  checklist?: () => any;
+  /** Side column with help cards; Card, IconTile, Button. */
+  tips?: () => any;
+}
+export const UiPageOnboarding: UiVueComponent<UiPageOnboardingProps, UiPageOnboardingSlots>;
+
 /**
  * Order/booking details template: status chips, items table, timeline and side info cards.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3725,6 +4096,44 @@ export interface UiPageProfileSlots {
 }
 export const UiPageProfile: UiVueComponent<UiPageProfileProps, UiPageProfileSlots>;
 
+/**
+ * Search template: query field, filter sidebar, result groups and an empty state.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Filters sit left of the results and stack above them under 860 px. Fill empty only when there are no results.
+ */
+export interface UiPageSearchProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageSearchSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** SearchInput, Tabs. */
+  search?: () => any;
+  /** Filters; Card, Checkbox, Select. */
+  filters?: () => any;
+  /** Result groups; Card, Chip, Divider. */
+  results?: () => any;
+  /** Shown only when there are no results; EmptyState. */
+  empty?: () => any;
+}
+export const UiPageSearch: UiVueComponent<UiPageSearchProps, UiPageSearchSlots>;
+
 /**
  * Settings template with a section sub-navigation and stacked settings sections.
  * Note: Place inside AppShell; fill only the slots you need.
@@ -3821,6 +4230,44 @@ export interface UiPageStatusSlots {
 }
 export const UiPageStatus: UiVueComponent<UiPageStatusProps, UiPageStatusSlots>;
 
+/**
+ * Team template: member stats, members table, roles and permissions matrix, and an invite form.
+ * Note: Place inside AppShell; fill only the slots you need.
+ * Note: Members and roles share the main column; the invite form is the side column.
+ */
+export interface UiPageTeamProps {
+  /**
+   * Page heading. The built-in header renders only when title is set and the header slot is empty.
+   * @remarks Forwarded to the inner element.
+   */
+  title?: string;
+  /**
+   * Caption under the heading.
+   * @remarks Forwarded to the inner element.
+   */
+  subtitle?: string;
+  /**
+   * Breadcrumb trail above the title.
+   * @remarks Forwarded to the inner element.
+   */
+  crumbs?: { label: string; href?: string }[];
+}
+export interface UiPageTeamSlots {
+  /** Custom page header; replaces the built-in title/subtitle/crumbs header. */
+  header?: () => any;
+  /** Buttons on the right of the built-in header. With a title they sit beside it; without a title they render alone, right-aligned (unless the header slot is filled). */
+  actions?: () => any;
+  /** Counters; KpiTile, StatsCard. */
+  stats?: () => any;
+  /** Members; DataTable with UserCell, Select, Badge. */
+  members?: () => any;
+  /** Permissions matrix; DataTable with Checkbox cells. */
+  roles?: () => any;
+  /** Invite form; Card, TextField, Select, Button. */
+  invite?: () => any;
+}
+export const UiPageTeam: UiVueComponent<UiPageTeamProps, UiPageTeamSlots>;
+
 /**
  * User or customer list template: stats, filters, toolbar, table and a right-hand add/edit drawer.
  * Note: Place inside AppShell; fill only the slots you need.