@ziyarago/ui 0.9.0 → 0.11.0

package/dist/manifest.json

@@ -1,6 +1,6 @@
 {
  "name": "@ziyarago/ui",
- "version": "0.9.0",
+ "version": "0.11.0",
  "homepage": "https://ziyara.vip",
  "imports": {
   "vue": "import { UiButton } from '@ziyarago/ui/vue'",
@@ -238,6 +238,7 @@
     "TourCard",
     "PrayerTimes",
     "RamadanTracker",
+    "QiblaCompass",
     "BookingCard",
     "GuestCard",
     "RoomGrid",
@@ -289,6 +290,10 @@
     "PageLegal",
     "PageLocations",
     "PageBookingFlow",
+    "PageItinerary",
+    "PagePrayer",
+    "PageGroupManager",
+    "PageTourPublic",
     "PageNotifications",
     "PageInbox",
     "PageCheckout",
@@ -4899,6 +4904,542 @@
       "use": "<UiCard title=\"Summary\">…</UiCard>"
      }
     ]
+   },
+   {
+    "id": "itinerary",
+    "label": "Itinerary",
+    "component": "UiPageItinerary",
+    "description": "Itinerary: day tabs, a timeline of stops, transport and hotel blocks and a sticky trip summary.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "days",
+      "title": "Days",
+      "desc": "Switch between the days of the trip.",
+      "accepts": [
+       "Tabs",
+       "PillTabs"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiTabs v-model=\"day\" :items=\"days\" />"
+     },
+     {
+      "id": "timeline",
+      "title": "Day timeline",
+      "desc": "Stops of the active day with times, places and durations.",
+      "accepts": [
+       "Card",
+       "Timeline",
+       "StatRow"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Day 2 · Makkah\">…</UiCard>"
+     },
+     {
+      "id": "transport",
+      "title": "Transport",
+      "desc": "Flights, buses and transfers of the day.",
+      "accepts": [
+       "Card",
+       "StatRow"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Transport\">…</UiCard>"
+     },
+     {
+      "id": "hotel",
+      "title": "Hotel",
+      "desc": "Where the group stays.",
+      "accepts": [
+       "Card",
+       "Badge",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "summary",
+      "title": "Trip summary",
+      "desc": "Dates, group size and what is booked.",
+      "accepts": [
+       "Card",
+       "Descriptions",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Trip summary\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "prayer",
+    "label": "Prayer times",
+    "component": "UiPagePrayer",
+    "description": "Prayer times: location picker, today with the next prayer, a month table and a sticky Qibla compass.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "location",
+      "title": "Location",
+      "desc": "City and calculation method.",
+      "accepts": [
+       "Select",
+       "PillSelect",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSelect v-model=\"city\" :options=\"cities\" />"
+     },
+     {
+      "id": "today",
+      "title": "Today",
+      "desc": "Five prayers with the next one highlighted and a countdown.",
+      "accepts": [
+       "Card",
+       "PrayerTimes"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiPrayerTimes :items=\"times\" :next=\"2\" />"
+     },
+     {
+      "id": "month",
+      "title": "Month table",
+      "desc": "Prayer times for every day of the month.",
+      "accepts": [
+       "Card",
+       "DataTable"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"days\" />"
+     },
+     {
+      "id": "qibla",
+      "title": "Qibla",
+      "desc": "Direction to the Kaaba.",
+      "accepts": [
+       "Card",
+       "QiblaCompass"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiQiblaCompass :bearing=\"248\" />"
+     }
+    ]
+   },
+   {
+    "id": "group-manager",
+    "label": "Group manager",
+    "component": "UiPageGroupManager",
+    "description": "Group manager: trip summary, pilgrims with documents and visa, bulk actions, rooming and payments.",
+    "shell": true,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "trip",
+      "title": "Trip summary",
+      "desc": "Dates, route, seats and readiness counters.",
+      "accepts": [
+       "Card",
+       "StatStrip",
+       "Progress"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStatStrip :items=\"stats\" />"
+     },
+     {
+      "id": "toolbar",
+      "title": "Toolbar",
+      "desc": "Search and status filters.",
+      "accepts": [
+       "SearchInput",
+       "FilterChips"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiSearchInput v-model=\"q\" />"
+     },
+     {
+      "id": "bulk",
+      "title": "Bulk actions",
+      "desc": "Shown when pilgrims are selected.",
+      "accepts": [
+       "Button",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiButton icon=\"send\">Remind selected</UiButton>"
+     },
+     {
+      "id": "pilgrims",
+      "title": "Pilgrims",
+      "desc": "Table with passport, visa and payment status.",
+      "accepts": [
+       "Card",
+       "DataTable",
+       "Badge"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiDataTable :columns=\"cols\" :rows=\"rows\" />"
+     },
+     {
+      "id": "rooms",
+      "title": "Rooming",
+      "desc": "Room assignment for the hotel.",
+      "accepts": [
+       "Card",
+       "RoomGrid"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiRoomGrid :rooms=\"rooms\" />"
+     },
+     {
+      "id": "payments",
+      "title": "Payments",
+      "desc": "Collected, outstanding and the manager contact.",
+      "accepts": [
+       "Card",
+       "Progress",
+       "ContactPanel"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Payments\">…</UiCard>"
+     }
+    ]
+   },
+   {
+    "id": "tour-public",
+    "label": "Tour page",
+    "component": "UiPageTourPublic",
+    "description": "Public tour page without the shell: gradient gallery, highlights, itinerary, inclusions, reviews and a sticky booking card.",
+    "shell": false,
+    "slots": [
+     {
+      "id": "header",
+      "title": "Page heading",
+      "desc": "Breadcrumbs, heading, caption and action buttons on the right.",
+      "accepts": [
+       "PageHeader",
+       "Breadcrumbs",
+       "Button",
+       "SegmentedControl"
+      ],
+      "props": [
+       {
+        "name": "title",
+        "type": "string",
+        "desc": "H1, up to 60 characters"
+       },
+       {
+        "name": "subtitle",
+        "type": "string?",
+        "desc": "Gray caption below the heading"
+       },
+       {
+        "name": "crumbs",
+        "type": "{label,href?}[]",
+        "desc": "Breadcrumbs"
+       },
+       {
+        "name": "actions",
+        "type": "VNode",
+        "desc": "Buttons on the right; wrap below on a narrow screen"
+       }
+      ],
+      "use": "<UiPageHeader title=\"Dashboard\" :crumbs=\"crumbs\">\n  <template #actions><UiButton variant=\"primary\">Export</UiButton></template>\n</UiPageHeader>"
+     },
+     {
+      "id": "gallery",
+      "title": "Gallery",
+      "desc": "Hero area made of gradients or photos.",
+      "accepts": [
+       "Gallery",
+       "Card"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard>…</UiCard>"
+     },
+     {
+      "id": "highlights",
+      "title": "Highlights",
+      "desc": "Key facts: nights, hotels, flights.",
+      "accepts": [
+       "StatStrip",
+       "IconTile"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiStatStrip :items=\"facts\" />"
+     },
+     {
+      "id": "itinerary",
+      "title": "Itinerary",
+      "desc": "Day by day program in an accordion.",
+      "accepts": [
+       "Accordion"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiAccordion :items=\"days\" />"
+     },
+     {
+      "id": "included",
+      "title": "Included",
+      "desc": "What the price includes and excludes.",
+      "accepts": [
+       "Card",
+       "Descriptions"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Included\">…</UiCard>"
+     },
+     {
+      "id": "reviews",
+      "title": "Reviews",
+      "desc": "What pilgrims say.",
+      "accepts": [
+       "Card",
+       "Rating",
+       "Avatar"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Reviews\">…</UiCard>"
+     },
+     {
+      "id": "booking",
+      "title": "Booking",
+      "desc": "Price, dates, seats and the booking button.",
+      "accepts": [
+       "Card",
+       "Button"
+      ],
+      "props": [
+       {
+        "name": "content",
+        "type": "VNode",
+        "desc": ""
+       }
+      ],
+      "use": "<UiCard title=\"Book\">…</UiCard>"
+     }
+    ]
    }
   ]
  },
@@ -6629,6 +7170,21 @@
      "forwarded": true,
      "description": "Error message under the control. Turns the control red and is announced with role=\"alert\"."
     },
+    "required": {
+     "type": "boolean",
+     "default": false,
+     "description": "Adds a red asterisk to the label and the native required attribute."
+    },
+    "name": {
+     "type": "string",
+     "forwarded": true,
+     "description": "Native name attribute of the input."
+    },
+    "autofocus": {
+     "type": "boolean",
+     "forwarded": true,
+     "description": "Focuses the input on mount."
+    },
     "autocomplete": {
      "type": "string",
      "default": "current-password",
@@ -8256,6 +8812,11 @@
      "default": true,
      "description": "Show the \"Forgot password?\" link."
     },
+    "showRemember": {
+     "type": "boolean",
+     "default": true,
+     "description": "Show the \"Remember device\" checkbox. Hide it when your backend has no such option; the submit payload then keeps remember: true."
+    },
     "submitLabel": {
      "type": "string",
      "default": "Sign in",
@@ -11676,6 +12237,44 @@
     "Exposed as role=\"img\" with aria-label \"Day N of 30\"."
    ]
   },
+  {
+   "name": "QiblaCompass",
+   "tag": "UiQiblaCompass",
+   "group": "domain",
+   "description": "Compass dial with a Kaaba marker pointing to the Qibla and the bearing in degrees below it.",
+   "props": {
+    "bearing": {
+     "type": "number",
+     "required": true,
+     "default": 0,
+     "description": "Qibla bearing in degrees clockwise from true north, 0 to 360; other values wrap."
+    },
+    "heading": {
+     "type": "number",
+     "default": 0,
+     "description": "Direction the device points to, in degrees. The dial turns against it so the marker follows the real Qibla; 0 keeps north up."
+    },
+    "distance": {
+     "type": "string",
+     "description": "Optional small caption under the bearing, such as \"4 210 km to the Kaaba\"."
+    },
+    "size": {
+     "type": "'xs' | 'sm' | 'md' | 'lg' | 'xl' | number",
+     "values": [
+      "xs",
+      "sm",
+      "md",
+      "lg",
+      "xl"
+     ],
+     "default": "md",
+     "description": "Diameter: xs 120, sm 160, md 200, lg 250, xl 300 px; a number is used as px."
+    }
+   },
+   "notes": [
+    "Exposed as role=\"img\" with a label that states the bearing. Compute the bearing and heading yourself (geolocation and DeviceOrientation); the component only draws them."
+   ]
+  },
   {
    "name": "BookingCard",
    "tag": "UiBookingCard",
@@ -13412,6 +14011,151 @@
     "Render only the active step in content. The summary stays visible on the right and goes below the step under 860 px."
    ]
   },
+  {
+   "name": "PageItinerary",
+   "tag": "UiPageItinerary",
+   "group": "pages",
+   "description": "Itinerary template: day tabs, a timeline of stops for the chosen day, transport and hotel blocks and a sticky trip summary card.",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
+    },
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
+    },
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "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).",
+    "days": "Day switcher; Tabs or PillTabs.",
+    "timeline": "Stops of the active day with times and places; Card, Timeline, StatRow.",
+    "transport": "Flights, buses and transfers of the day; Card, StatRow.",
+    "hotel": "Where the group stays that night; Card, Badge, IconTile.",
+    "summary": "Trip summary; Card, Descriptions, Progress."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "Render only the active day in timeline, transport and hotel. The summary stays visible on the right and goes below the day under 860 px."
+   ]
+  },
+  {
+   "name": "PagePrayer",
+   "tag": "UiPagePrayer",
+   "group": "pages",
+   "description": "Prayer times template: a location picker, today's times with the next prayer highlighted, a month table and a sticky Qibla compass.",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
+    },
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
+    },
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "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).",
+    "location": "City and method pickers; Select, PillSelect, SegmentedControl.",
+    "today": "Today's prayers and the countdown to the next one; Card, PrayerTimes.",
+    "month": "Prayer times for the whole month; Card, DataTable.",
+    "qibla": "Qibla direction; Card, QiblaCompass."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "The Qibla card stays visible on the right and goes below the times under 860 px."
+   ]
+  },
+  {
+   "name": "PageGroupManager",
+   "tag": "UiPageGroupManager",
+   "group": "pages",
+   "description": "Group manager template: trip summary, pilgrims table with document and visa status, bulk actions, rooming and a sticky payments summary.",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
+    },
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
+    },
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "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).",
+    "trip": "Trip header with dates, route and counters; Card, StatStrip, Progress.",
+    "toolbar": "Search and status filters; SearchInput, FilterChips.",
+    "bulk": "Actions for the selected pilgrims; Button, Badge.",
+    "pilgrims": "Pilgrims table with documents and visa; Card, DataTable, Badge.",
+    "rooms": "Rooming assignment; Card, RoomGrid.",
+    "payments": "Payments summary and manager contact; Card, Progress, ContactPanel."
+   },
+   "notes": [
+    "Place inside AppShell; fill only the slots you need.",
+    "The payments card stays visible on the right and goes below the table under 860 px."
+   ]
+  },
+  {
+   "name": "PageTourPublic",
+   "tag": "UiPageTourPublic",
+   "group": "pages",
+   "description": "Public tour page: header, gradient gallery area, highlights, itinerary accordion, included and excluded lists, reviews and a sticky price and booking card. Has no shell and follows the theme.",
+   "props": {
+    "title": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Page heading. The built-in header renders only when title is set and the header slot is empty."
+    },
+    "subtitle": {
+     "forwarded": true,
+     "type": "string",
+     "description": "Caption under the heading."
+    },
+    "crumbs": {
+     "forwarded": true,
+     "type": "{ label: string; href?: string }[]",
+     "description": "Breadcrumb trail above the title."
+    }
+   },
+   "slots": {
+    "header": "Custom page header; replaces the built-in title/subtitle/crumbs header.",
+    "actions": "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).",
+    "gallery": "Hero area made of gradients or photos; Gallery, Card.",
+    "highlights": "Key facts and highlights; StatStrip, IconTile.",
+    "itinerary": "Day by day program; Accordion.",
+    "included": "What the price includes and excludes; Card, Descriptions.",
+    "reviews": "Pilgrim reviews; Card, Rating, Avatar.",
+    "booking": "Price, dates, seats and the booking button; Card, Button."
+   },
+   "notes": [
+    "Render the page on its own, without AppShell: it supplies its own width and padding in your layout.",
+    "The booking card stays visible on the right and goes below the content under 860 px."
+   ]
+  },
   {
    "name": "PageNotifications",
    "tag": "UiPageNotifications",