Appearance

ShareAssetDialog Component ​

File Information ​

  • Path: app/components/dialogs/ShareAssetDialog.vue
  • Purpose: Dialog for sharing assets with permissions, passwords, expiration dates, and embed codes
  • Type: Dialog Component

Overview ​

The ShareAssetDialog component provides a comprehensive interface for creating and managing share links for assets, folders, and collages. It supports permissions, passwords, expiration dates, and embed codes.

Features ​

  • Share Link Creation: Generate share links for assets/folders/collages
  • Title & Description: Customizable share link title and description
  • Permissions: Set access permissions
  • Password Protection: Optional password protection
  • Expiration Dates: Set expiration dates for share links
  • Embed Codes: Generate embed codes for sharing
  • Private Asset Warnings: Alerts for private assets
  • Copy Link: Copy share link to clipboard
  • Link Management: Create and manage share links

Props ​

typescript
{
  dialog: boolean                    // Dialog visibility (required)
  files?: Asset[]                   // Files to share
  folders?: Folder[]                // Folders to share
  type: 'file' | 'folder'           // Share type (required)
  collection?: boolean              // Whether sharing a collection
  collectionAssets?: boolean         // Whether sharing collection assets
  collectionAssetsId?: number | string // Collection assets ID
  collectionId?: number | string    // Collection ID
  assetIds?: (string | number)[]    // Asset IDs array
  selectAll?: boolean               // Select all assets
  shareTitle?: string               // Pre-filled share title
  shareDescription?: string        // Pre-filled share description
}

Events ​

typescript
{
  close: []  // Dialog closed
}

Composables Used ​

  • useShareAssetDialog(props, emit) - Share dialog logic and state management

Key Functionality ​

  • Creates share link via API
  • Generates unique share URL
  • Shows loading state during creation
  • Displays created share link

Form Fields ​

  • Title: Share link title (required)
  • Description: Optional description
  • Password: Optional password protection
  • Expiration: Optional expiration date
  • Permissions: Access permissions settings

Private Asset Warnings ​

  • Warns if selected assets are private
  • Warns if folders contain private assets
  • Different messages for single vs multiple items
  • Collection-specific warnings
  • Copy link to clipboard
  • Shows "Copied!" feedback
  • Read-only link field
  • Create link button with loading state

Usage Example ​

vue
<template>
  <ShareAssetDialog
    :dialog="showShareDialog"
    :files="selectedFiles"
    type="file"
    :share-title="'My Share'"
    @close="showShareDialog = false"
  />
</template>

<script setup lang="ts">
import ShareAssetDialog from '~/components/dialogs/ShareAssetDialog.vue'

const showShareDialog = ref(false)
const selectedFiles = ref([])
</script>

Styling ​

Uses global SCSS classes:

  • .v-dialog-global - Dialog container
  • .v-dialog-body - Dialog body
  • .v-dialog-footer - Dialog footer
  • .form-group - Form field groups
  • .btn-primary - Primary button
  • .btn-primary-invert - Inverted primary button