App Components

<AccountButton
  :menu-is-closed="true"
  :is-logged="true"
  user-name="John Doe"
  aria-label="Toggle menu"
  @triggerToggleMenu="handleMenuToggle"
/>

<Burger
  @triggerClose="handleClose"
/>

<CalendarFilter
  type="date-range"
  :range-selected="{ start: null, end: null, type: '' }"
  @triggerDate="handleDateRange"
  @triggerCloseModal="handleClose"
/>

<Card
  title="Showcase your sequence"
  description="Upload your photos and share them with the community."
  img-src="illustrations/share.svg"
  img-alt="Share your pictures"
/>

<CompleteUpload
  :upload-sets="currentUploadSet"
  @triggerComplete="handleUploadSetCompletion"
/>

<DateInterval
  :first-date="new Date('2024-01-01T10:00:00')"
  :last-date="new Date('2024-01-01T14:30:00')"
/>

<EditText
  :default-text="'My title'"
  :is-loading="false"
  :is-loaded="true"
  form-title="Form title"
  @triggerNewText="handleTextChange"
/>

<FolderList
  :pictures="folders"
  :current-folder="currentFolderName"
/>

<HeaderApp />

<HeaderOpen
  :menu-is-closed="false"
  user-name="John Doe"
  @triggerClose="handleClose"
/>

<ImageItem
  :disabled="false"
  created="2024-01-01"
  href="/path/to/image.jpg"
  href-hd="/path/to/image-hd.jpg"
  image-id="123"
  :selected-on-map="false"
  :is-sequence-owner="true"
  visibility="anyone"
  seq-visibility="anyone"
  status="ready"
  @trigger="handleImageClick"
>
  <template #checkbox>
    <input type="checkbox" />
  </template>
</ImageItem>

<ImageThumb
  :count="5"
  href="/path/to/thumbnail.jpg"
/>

<InformationCard
  text="This is an information message"
  look="blue"
>
  <template #title>
    <h3>Information Title</h3>
  </template>
  <template #button>
    <Button text="Action" />
  </template>
  <template #cross>
    <button @click="close">×</button>
  </template>
</InformationCard>

<Input
  type="text"
  :text="initialValue"
  placeholder="Enter text"
  maxlength="50"
  @input="handleInput"
/>
<Input
  type="number"
  :text="0"
  min="0"
  max="100"
  placeholder="Enter number"
  @input="handleNumberInput"
/>

<InputCheckbox
  name="my-checkbox"
  label="Check this option"
  :is-checked="false"
  :is-indeterminate="false"
  @trigger="handleCheckboxChange"
/>

<InputRadio
  id="option1"
  name="options"
  label="Option 1"
  icon="bi bi-circle"
  :value="selectedValue"
  :disabled="false"
  :is-hidden="false"
  :has-same-values="false"
  @trigger="handleRadioChange"
/>

<InputSwitch
  :is-checked="false"
  look=""
  @trigger="handleSwitchChange"
/>
<InputSwitch
  :is-checked="true"
  look="rounded"
  @trigger="handleSwitchChange"
/>

<InputUpload
  :is-logged="true"
  :disabled="false"
  text="Drop files here"
  look="yellow"
  @trigger="handleFiles"
  @triggerCancel="handleCancel"
  @triggerDrop="handleDrop"
/>

<Legal
  html-content="<p>Legal content here</p>"
>
  <template #summary>
    <Summary />
  </template>
</Legal>

<License
  url="https://creativecommons.org/licenses/by/4.0/"
  text="CC BY 4.0"
>
  <i class="bi bi-cc-circle"></i>
</License>

<Loader
  look="md"
  color="blue"
  :is-loaded="false"
/>
<Loader
  look="sm"
  color="white"
  :is-loaded="true"
/>

<LoaderPicturesDetails
  look="xsm"
  text="Pictures processed"
  :pictures="42"
  :pictures-count="120"
/>

<LoginRegisterButton />

<Modal
  ref="modalRef"
  title="Modal Title"
>
  <template #body>
    <p>Modal content goes here</p>
  </template>
</Modal>
// In script:
const modalRef = ref()
modalRef.value?.show() // or modalRef.value?.close()

<MyTokens />

<NotificationDetails />

<Notifications :notifications="notificationsStore.someNotification" />/>

<Pagination
  href="/api/items?page=2"
  :self-link="{ href: '/api/items?page=1' }"
  type="right"
  @trigger="handlePagination"
/>

<PanelOrientationManagement
  :road-degrees="150"
  :seq-brute-deg="145"
  :is-loading="false"
  @triggerAngle="handleAngleChange"
  @triggerMovingAngle="handleMovingAngle"
/>

<PanelPhotosManagement
  :pictures="photoList"
  :pictures-to-delete="selectedIds"
  :sequence="currentSequence"
  :pagination-links="links"
  :is-sequence-owner="true"
  @triggerInputCheck="handleBulkSelection"
  @triggerPatchOrDeleteCollectionItems="handleDelete"
/>

<PanelSortManagement
  :sequence-sorted="'+gpsdate'"
  @triggerSort="handleSort"
/>

<ParamsPanel
  :is-edition-mode="false"
  :angle-response="angle"
  @triggerParams="handleParams"
  @triggerMovingAngle="previewAngle"
  @triggerUpdateUploadSets="refreshUploadSet"
/>

<PictureItem
  name="IMG_001.jpg"
  text="Uploaded successfully"
  look="success"
>
  <Button look="link--blue-dark" text="View" />
</PictureItem>

<ProgressBar
  :percentage="75"
  :error-percentage="15"
  :items-broken="2"
  :items-rejected="1"
/>

<SequenceSection
  :list-displayed="hasSequences"
  :upload-sets="currentUploadSet"
  :new-seq-title="pendingTitle"
  :is-loading="isSaving"
  :is-loaded="hasLoaded"
/>

<SequenceStatus
  status="waiting-for-process"
  :is-square="true"
/>
<SequenceStatus
  status="anyone"
  :is-square="false"
/>

<Summary />

<TabPanel
  :pictures-count="10"
  panel-selected="photos"
  :is-loading="false"
  :is-sequence-owner="true"
  @trigger="handleTabChange"
/>

<TagsLabel
  label="Duplication"
  description="Avoid uploading duplicated pictures"
/>

<TagsPanel
  :semantics-editor="currentSemantics"
  :is-edition-mode="true"
  upload-set-id="123"
  @triggerSemantics="handleSemantics"
  @triggerUpdateUploadSets="refreshUploadSet"
/>

<Terminal
  text-install="pip install panoramax"
  text-upload="panoramax upload ./images"
/>

<TransportPanel
  :selected-transport="currentTransport"
  @triggerSemantics="handleTransportChange"
/>

<TreatmentBlock
  :upload-sets="currentUploadSet"
  :percentage="75"
  :error-percentage="10"
  progress-classe="text-blue"
>
  <template #subtitle>
    <h3>Processing status</h3>
  </template>
</TreatmentBlock>

<TripleSelectButton
  :images-full-selected="selectedImages"
  :possible-visibilities="['anyone', 'logged-only', 'owner-only']"
  @triggerVisibility="handleVisibilityChange"
/>

<Tutorial />

<UploadError
  severity="error"
  :count="5"
  :pictures="errorList"
/>

<UploadErrorBlock :errors="errorGroup" />

<UploadErrorMessage upload-error="An unexpected error occurred." />

<UploadingBlock />

<UploadingImg />

<UploadLoader
  :load-percentage="'75%'"
  :is-loading="true"
  :uploaded-sequence="sequence"
  :pictures-count="120"
/>

<UploadSetBlocks />

<UploadSummary
  :upload-sets="currentUploadSet"
  :is-loading="isLoading"
  @triggerComplete="handleComplete"
  @triggerResetUpload="startNewUpload"
/>

<VisibilityBlock
  visibility="anyone"
  :possible-visibilities="['anyone', 'logged-only', 'owner-only']"
  description="Choose visibility level"
  @triggerVisibility="handleVisibilityChange"
/>

<WebsiteViewer
  id="viewer-1"
  viewer-type="viewer"
  :params="{ map: {} }"
  @triggerPicId="handlePicSelection"
  @triggerReady="handleViewerReady"
/>
<WebsiteViewer
  id="editor-1"
  viewer-type="editor"
  seq-id="123"
  pic-id="456"
  :params="{ raster: {} }"
  @triggerReady="handleEditorReady"
/>

<WidgetOrientation
  :road-degrees="150"
  :seq-brute-deg="orientation"
  :index-car="3"
  @triggerAngle="handleAngleChange"
  @triggerMovingAngle="handleMovingAngle"
/>