@openreachtech/furo-vue 1.3.1

package/lib/components/molecules/FuroAttachment/FuroAttachment.vue

@@ -0,0 +1,376 @@
+<script>
+import {
+  defineComponent,
+} from 'vue'
+
+import FuroButton from '../../atoms/FuroButton/FuroButton.vue'
+import FuroIcon from '../../atoms/FuroIcon/FuroIcon.vue'
+import FuroAttachmentContext from './FuroAttachmentContext.js'
+
+export default defineComponent({
+  name: 'FuroAttachment',
+
+  components: {
+    FuroButton,
+    FuroIcon,
+  },
+
+  inheritAttrs: false,
+
+  props: {
+    parcel: {
+      /** @type {import('vue').PropType<import('./FuroAttachmentContext.js').Props['parcel']>} */
+      type: [
+        Object,
+        null,
+      ],
+      default: null,
+    },
+  },
+
+  slots: /** @type {import('./FuroAttachmentContext.js').FuroAttachmentSlots} */ (Object),
+  emits: FuroAttachmentContext.EMIT_EVENT_HASH,
+
+  /** @type {import('./FuroAttachmentContext.js').FuroAttachmentSetup} */
+  setup (
+    props,
+    componentContext
+  ) {
+    const context = FuroAttachmentContext.create({
+      props,
+      componentContext,
+    })
+      .setupComponent()
+
+    return {
+      context,
+    }
+  },
+})
+</script>
+
+<template>
+  <div
+    v-bind="{
+      ...context.extractRootAttributes(),
+      ...$attrs,
+    }"
+    :class="context.extractRootClassNames()"
+  >
+    <img
+      v-if="context.hasImagePreview()"
+      class="preview"
+      :src="context.imageSource"
+      :alt="context.imageAlternativeText"
+      @error="context.onImagePreviewError()"
+    >
+
+    <template v-else>
+      <slot name="glyph">
+        <FuroIcon
+          class="glyph"
+          :name="context.iconName"
+        />
+      </slot>
+
+      <div class="body">
+        <p class="name">
+          {{ context.fileName }}
+        </p>
+
+        <p
+          v-if="context.hasFileSizeCaption()"
+          class="caption"
+        >
+          {{ context.fileSize }}
+        </p>
+
+        <div
+          v-if="context.hasProgressBar()"
+          class="progress"
+        >
+          <div
+            class="track"
+            v-bind="context.extractProgressAttributes()"
+          >
+            <div
+              :class="context.extractProgressFillClassNames()"
+              :style="context.extractProgressStyle()"
+            />
+          </div>
+        </div>
+      </div>
+    </template>
+
+    <div
+      v-if="context.hasUploadingPreview()"
+      class="veil"
+      aria-hidden="true"
+    />
+
+    <div
+      v-if="context.hasActions()"
+      class="actions"
+    >
+      <slot name="actions">
+        <FuroButton
+          v-if="context.hasDownloadAction()"
+          class="action"
+          :parcel="context.buildActionParcel()"
+          :aria-label="context.downloadLabel"
+          @click="context.onDownloadClick()"
+        >
+          <FuroIcon
+            class="action-icon"
+            name="ph:download-simple"
+          />
+        </FuroButton>
+
+        <FuroButton
+          v-if="context.hasRemoveAction()"
+          class="action"
+          :parcel="context.buildActionParcel()"
+          :aria-label="context.removeLabel"
+          @click="context.onRemoveClick()"
+        >
+          <FuroIcon
+            class="action-icon"
+            name="ph:x"
+          />
+        </FuroButton>
+
+        <span
+          v-if="context.hasUploadingPreview()"
+          class="spinner"
+        >
+          <FuroIcon
+            class="spinner-icon"
+            name="ph:circle-notch"
+          />
+        </span>
+      </slot>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+@layer furo {
+  .unit-attachment {
+    position: relative;
+
+    display: inline-flex;
+    align-items: center;
+    gap: var(--size-space-compact);
+
+    border-radius: var(--size-border-radius-medium);
+  }
+
+  .unit-attachment:not(.image) {
+    width: 25.5rem;
+    max-width: 100%;
+    min-width: 20rem;
+
+    padding-block: 0.5rem;
+    padding-inline: 1rem;
+
+    border: var(--size-thinnest) solid var(--color-brand-border-subtle);
+
+    background-color: var(--color-muted-subtle);
+  }
+
+  .unit-attachment.image {
+    width: var(--furo-attachment-preview-size, 9rem);
+    height: var(--furo-attachment-preview-size, 9rem);
+  }
+
+  .unit-attachment > .preview {
+    width: 100%;
+    height: 100%;
+
+    border-radius: inherit;
+
+    object-fit: cover;
+  }
+
+  .unit-attachment > .glyph {
+    width: 1.25rem;
+    height: 1.25rem;
+
+    color: var(--color-foreground-secondary);
+  }
+
+  .unit-attachment > .body {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    flex: 1 0 0;
+
+    min-width: 0;
+  }
+
+  .unit-attachment > .body > .name {
+    margin-block: 0;
+
+    width: 100%;
+
+    color: var(--color-foreground-title);
+    font: var(--font-body-large);
+    word-break: break-word;
+  }
+
+  .unit-attachment > .body > .caption {
+    margin-block: 0;
+
+    width: 100%;
+
+    color: var(--color-foreground-secondary);
+    font: var(--font-body-small);
+  }
+
+  .unit-attachment > .body > .progress {
+    display: flex;
+    align-items: center;
+
+    width: 100%;
+    height: 1.25rem;
+  }
+
+  .unit-attachment > .body > .progress > .track {
+    width: 100%;
+    height: 0.3125rem;
+
+    overflow: hidden;
+
+    border-radius: var(--size-border-radius-full);
+
+    background-color: var(--color-muted);
+  }
+
+  .unit-attachment > .body > .progress > .track > .fill {
+    height: 100%;
+
+    border-radius: inherit;
+
+    background-color: var(--color-info);
+
+    transition: width var(--transition-timer);
+  }
+
+  .unit-attachment > .body > .progress > .track > .fill.indeterminate {
+    width: 40%;
+
+    animation: furo-attachment-progress-sweep 1200ms ease-in-out infinite;
+    transition: none;
+  }
+
+  @keyframes furo-attachment-progress-sweep {
+    from {
+      transform: translateX(-100%);
+    }
+
+    to {
+      transform: translateX(250%);
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .unit-attachment > .body > .progress > .track > .fill.indeterminate {
+      width: 100%;
+
+      opacity: 0.5;
+
+      animation: none;
+    }
+  }
+
+  .unit-attachment > .veil {
+    position: absolute;
+    inset: 0;
+
+    border-radius: inherit;
+
+    background-color: var(--color-background);
+
+    opacity: 0.8;
+  }
+
+  .unit-attachment > .actions {
+    display: flex;
+    align-items: center;
+    gap: var(--size-space-tiny);
+
+    opacity: 0;
+
+    transition: opacity var(--transition-timer);
+  }
+
+  .unit-attachment:hover > .actions,
+  .unit-attachment:focus-within > .actions,
+  .unit-attachment.uploading > .actions {
+    opacity: 1;
+  }
+
+  .unit-attachment.image > .actions {
+    position: absolute;
+    inset-block-start: -0.75rem;
+    inset-inline-end: -0.375rem;
+
+    padding-block: 0.125rem;
+    padding-inline: 0.125rem;
+
+    border: var(--size-thinnest) solid var(--color-border);
+    border-radius: var(--size-border-radius-full);
+
+    background-color: var(--color-background);
+  }
+
+  .unit-attachment > .actions > .action {
+    width: 1.75rem;
+    min-width: 1.75rem;
+    height: 1.75rem;
+
+    border-radius: var(--size-border-radius-full);
+
+    color: var(--color-foreground-secondary);
+  }
+
+  .unit-attachment.image > .actions > .action {
+    width: 1.5rem;
+    min-width: 1.5rem;
+    height: 1.5rem;
+  }
+
+  .unit-attachment > .actions > .spinner {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    width: 1.5rem;
+    height: 1.5rem;
+
+    color: var(--color-info);
+  }
+
+  .unit-attachment .action-icon {
+    width: 1rem;
+    height: 1rem;
+  }
+
+  .unit-attachment .spinner-icon {
+    width: 1rem;
+    height: 1rem;
+
+    animation: furo-attachment-spin var(--transition-timer) linear infinite;
+  }
+
+  @keyframes furo-attachment-spin {
+    from {
+      transform: rotate(0deg);
+    }
+
+    to {
+      transform: rotate(360deg);
+    }
+  }
+}
+</style>