origam 0.3.10 → 2.3.0

package/dist/src/components/FileField/OrigamFileField.vue

@@ -1,232 +1,404 @@
 <template>
-	<origam-input
-			ref="origamInputRef"
-			v-model="model"
-			:class="fileFieldClasses"
-			:focused="isFocused"
-			:style="fileFieldStyles"
-			v-bind="{ ...rootAttrs, ...inputProps }"
-			@click:prepend="handleClickPrepend"
-			@clik:append="handleClickAppend"
-	>
-		<template
-				v-if="slots.prepend"
-				#prepend
-		>
-			<slot name="prepend"/>
-		</template>
-
-		<template #default="{id, isDisabled, isDirty, isValid, isReadonly}">
-			<slot
-					name="field"
-					v-bind="{id, isDisabled, isDirty, isValid, isReadonly}"
-			>
-				<origam-field
-						:id="id"
-						ref="origamFieldRef"
-						:active="isActive || isDirty"
-						:dirty="isDirty || props.dirty"
-						:disabled="isDisabled"
-						:error="!isValid"
-						:focused="isFocused"
-						v-bind="{ ...fieldProps }"
-						@click="handleControlClick"
-						@mousedown="handleControlMousedown"
-						@click:clear="handleClear"
-						@click:prepend-inner="handleClickPrependInner"
-						@lick:append-inner="handleClickAppendInner"
-				>
-					<template
-							v-if="slots.loader"
-							#loader
-					>
-						<slot name="loader"/>
-					</template>
-
-					<template
-							v-if="slots.prependInner"
-							#prependInner
-					>
-						<slot name="prependInner"/>
-					</template>
-
-					<template
-							v-if="slots.floatingLabel"
-							#floatingLabel
-					>
-						<slot name="floatingLabel"/>
-					</template>
-
-					<template
-							v-if="slots.label"
-							#label
-					>
-						<slot name="label"/>
-					</template>
-
-					<template
-							v-if="slots.prefix"
-							#prefix
-					>
-						<slot name="prefix"/>
-					</template>
-
-					<template #default="{class: fieldSlotClass, ...fieldSlotProps}">
-						<div
-								:class="fieldSlotClass"
-								data-no-activator=""
-						>
-							<slot
-									name="default"
-									v-bind="fieldSlotProps"
-							/>
-							<input
-									ref="inputRef"
-									:disabled="isDisabled"
-									:name="props.name"
-									:placeholder="props.placeholder"
-									:readonly="isReadonly"
-									:size="1"
-									type="file"
-									v-bind="{ ...fieldSlotProps, ...inputAttrs }"
-									@blur="handleBlur"
-									@change="handleChange"
-									@click="handleClick($event, isReadonly)"
-									@focus="handleFocus"
-							>
-
-							<template
-									v-for="(filename, index) in fileNames"
-									:key="index"
-							>
-								<div class="origam-file-field__selection">
-									<template v-if="hasChips">
-										<slot
-												name="chip"
-												v-bind="{ fileNames: filename, totalBytes: totalBytes, totalBytesReadable: totalBytesReadable, props: chipProps }"
-										>
-											<origam-chip
-													key="chip"
-													:model-value="true"
-													size="small"
-													v-bind="chipProps"
-											>
-												<template #default>
-													<slot name="selection">
-														{{ filename }}
-													</slot>
-												</template>
-											</origam-chip>
-										</slot>
-									</template>
-									<template v-else>
-				            <span class="origam-file-field__selection-text">
-				              <slot name="selection">
-				                {{ filename }}
-				              </slot>
-				              <span
-						              v-if="multiple && (index < model.length - 1)"
-						              class="origam-file-field__selection-comma"
-				              >
-				                {{ divider }}
-				              </span>
-				            </span>
-									</template>
-								</div>
-							</template>
-						</div>
-					</template>
-
-					<template
-							v-if="slots.suffix"
-							#suffix
-					>
-						<slot name="suffix"/>
-					</template>
-
-					<template
-							v-if="slots.appendInner"
-							#appendInner
-					>
-						<slot name="appendInner"/>
-					</template>
-
-					<template
-							v-if="slots.clear"
-							#clear
-					>
-						<slot name="clear"/>
-					</template>
-				</origam-field>
-			</slot>
-		</template>
-
-		<template
-				v-if="slots.append"
-				#append
-		>
-			<slot name="append"/>
-		</template>
-
-		<template
-				v-if="hasDetails"
-				#details="detailsSlotProps"
-		>
-			<slot
-					name="details"
-					v-bind="detailsSlotProps"
-			>
-				<origam-counter
-						:active="props.persistentCounter || isFocused"
-						:disabled="props.disabled"
-						:value="counterValue"
-				>
-					<template
-							v-if="slots.counter"
-							#default="{counter, value, max}"
-					>
-						<slot
-								name="counter"
-								v-bind="{counter, value, max}"
-						/>
-					</template>
-				</origam-counter>
-			</slot>
-		</template>
-
-		<template
-				v-if="slots.messages"
-				#messages="{hasMessages, messages}"
-		>
-			<slot
-					name="messages"
-					v-bind="{hasMessages, messages}"
-			/>
-		</template>
-
-		<template
-				v-if="slots.message"
-				#message="{message}"
-		>
-			<slot
-					name="message"
-					v-bind="{message}"
-			/>
-		</template>
-	</origam-input>
+  <origam-input
+      ref="origamInputRef"
+      v-model="model"
+      :class="fileFieldClasses"
+      :focused="isFocused"
+      :style="fileFieldStyles"
+      v-bind="{ ...rootAttrs, ...inputProps }"
+      @click:prepend="handleClickPrepend"
+      @click:append="handleClickAppend"
+  >
+    <template
+        v-if="slots.prepend"
+        #prepend
+    >
+      <slot name="prepend"/>
+    </template>
+
+    <template #default="{id, isDisabled, isDirty, isValid, isReadonly}">
+      <slot
+          name="field"
+          v-bind="{id, isDisabled, isDirty, isValid, isReadonly}"
+      >
+        <div
+            v-if="isDropzoneMode"
+            class="origam-file-field__dragndrop"
+        >
+          <label
+              :class="dropzoneClasses"
+              :style="dropzoneColorStyles"
+              @dragenter.prevent="handleDragEnter"
+              @dragover.prevent="handleDragOver"
+              @dragleave.prevent="handleDragLeave"
+              @drop.prevent="handleDrop"
+          >
+            <template v-if="!multiple && hasFiles">
+              <slot
+                  name="item"
+                  v-bind="{
+                    file: model[0],
+                    index: 0,
+                    progress: getProgress(0),
+                    remove: () => handleRemove(0),
+                    download: () => handleDownload(0, model[0]),
+                  }"
+              >
+                <origam-file-field-drag-n-drop-item
+                    :file="model[0]"
+                    :index="0"
+                    :progress="getProgress(0)"
+                    :file-icon="fileIcon"
+                    :download-icon="downloadIcon"
+                    :remove-icon="removeIcon"
+                    :downloadable="downloadable"
+                    :disabled="isDisabled"
+                    :readonly="isReadonly"
+                    :color="color"
+                    :show-size="showSize"
+                    @click:remove="handleRemove(0)"
+                    @click:download="handleDownload(0, model[0])"
+                />
+              </slot>
+            </template>
+            <template v-else>
+              <slot
+                  name="dropzone"
+                  v-bind="{ isDragging, browse: handleBrowseClick }"
+              >
+                <origam-icon
+                    :icon="dragndropIcon"
+                    class="origam-file-field__dropzone-icon"
+                />
+                <div class="origam-file-field__dropzone-title">
+                  {{ dropzoneTitleText }}
+                </div>
+                <div class="origam-file-field__dropzone-subtitle">
+                  {{ dropzoneSubtitleText }}
+                </div>
+                <div
+                    v-if="isErrored && errorMessage"
+                    class="origam-file-field__dropzone-error"
+                    role="alert"
+                    data-cy="file-field-dropzone-error-message"
+                >
+                  {{ errorMessage }}
+                </div>
+              </slot>
+            </template>
+            <input
+                :id="id"
+                ref="inputRef"
+                :disabled="isDisabled"
+                :multiple="multiple"
+                :name="name"
+                :readonly="isReadonly"
+                class="origam-file-field__dropzone-input"
+                type="file"
+                v-bind="inputAttrs"
+                @blur="handleBlur"
+                @change="handleChange"
+                @focus="handleFocus"
+            >
+          </label>
+
+          <ul
+              v-if="multiple && hasFiles"
+              class="origam-file-field__list"
+              role="list"
+          >
+            <template v-for="(item, idx) in fileList" :key="idx">
+              <slot
+                  name="item"
+                  v-bind="{
+                    file: item,
+                    index: idx,
+                    progress: getProgress(idx),
+                    remove: () => handleRemove(idx),
+                    download: () => handleDownload(idx, item),
+                  }"
+              >
+                <origam-file-field-list-item
+                    :file="item"
+                    :index="idx"
+                    :progress="getProgress(idx)"
+                    :file-icon="fileIcon"
+                    :download-icon="downloadIcon"
+                    :remove-icon="removeIcon"
+                    :downloadable="downloadable"
+                    :disabled="isDisabled"
+                    :readonly="isReadonly"
+                    :color="color"
+                    :show-size="showSize"
+                    @click:remove="handleRemove(idx)"
+                    @click:download="handleDownload(idx, item)"
+                />
+              </slot>
+            </template>
+          </ul>
+        </div>
+
+        <div
+            v-else
+            class="origam-file-field__field"
+        >
+          <origam-field
+              :id="id"
+              ref="origamFieldRef"
+              :active="isActive || isDirty"
+              :dirty="isDirty || dirty"
+              :disabled="isDisabled"
+              :error="!isValid || isErrored"
+              :focused="isFocused"
+              v-bind="{ ...fieldProps }"
+              @click="handleControlClick"
+              @mousedown="handleControlMousedown"
+              @click:clear="handleClear"
+              @click:prepend-inner="handleClickPrependInner"
+              @click:append-inner="handleClickAppendInner"
+          >
+            <template
+                v-if="slots.loader"
+                #loader
+            >
+              <slot name="loader"/>
+            </template>
+
+            <template
+                v-if="slots.prependInner"
+                #prependInner
+            >
+              <slot name="prependInner"/>
+            </template>
+
+            <template
+                v-if="slots.floatingLabel"
+                #floatingLabel
+            >
+              <slot name="floatingLabel"/>
+            </template>
+
+            <template
+                v-if="slots.label"
+                #label
+            >
+              <slot name="label"/>
+            </template>
+
+            <template
+                v-if="slots.prefix"
+                #prefix
+            >
+              <slot name="prefix"/>
+            </template>
+
+            <template #default="{class: fieldSlotClass, ref, ...fieldSlotProps}">
+              <div
+                  :class="fieldSlotClass"
+                  data-no-activator=""
+              >
+                <slot
+                    name="default"
+                    v-bind="{ref, ...fieldSlotProps}"
+                />
+                <input
+                    ref="inputRef"
+                    :disabled="isDisabled"
+                    :multiple="multiple"
+                    :name="name"
+                    :placeholder="placeholder"
+                    :readonly="isReadonly"
+                    :size="1"
+                    type="file"
+                    v-bind="{ ...fieldSlotProps, ...inputAttrs }"
+                    @blur="handleBlur"
+                    @change="handleChange"
+                    @click="handleClick($event, isReadonly)"
+                    @focus="handleFocus"
+                >
+
+                <template v-if="hasFiles">
+                  <div class="origam-file-field__selections">
+                    <template v-if="multiple && hasChips">
+                      <template
+                          v-for="(filename, index) in fileNames"
+                          :key="index"
+                      >
+                        <div class="origam-file-field__selection">
+                          <slot
+                              name="chip"
+                              v-bind="{ fileNames: filename, totalBytes: totalBytes, totalBytesReadable: totalBytesReadable, props: chipProps }"
+                          >
+                            <origam-chip
+                                key="chip"
+                                :model-value="true"
+                                size="small"
+                                v-bind="chipProps"
+                                @click:close.prevent.stop="handleRemove(index)"
+                            >
+                              <template #default>
+                                <slot name="selection">
+                                  {{ filename }}
+                                </slot>
+                              </template>
+                            </origam-chip>
+                          </slot>
+                        </div>
+                      </template>
+                    </template>
+                    <template v-else>
+                      <span class="origam-file-field__selection-text">
+                        <slot name="selection">
+                          {{ selectionText }}
+                        </slot>
+                      </span>
+                      <origam-counter
+                          v-if="hasInlineCounter"
+                          class="origam-file-field__inline-counter"
+                          data-cy="file-field-inline-counter"
+                          :active="true"
+                          :value="inlineCounterValue"
+                      />
+                    </template>
+                  </div>
+                </template>
+              </div>
+            </template>
+
+            <template
+                v-if="slots.suffix"
+                #suffix
+            >
+              <slot name="suffix"/>
+            </template>
+
+            <template
+                v-if="slots.appendInner"
+                #appendInner
+            >
+              <slot name="appendInner"/>
+            </template>
+
+            <template
+                v-if="slots.clear"
+                #clear
+            >
+              <slot name="clear"/>
+            </template>
+          </origam-field>
+
+          <ul
+              v-if="multiple && hasFiles && !hasChips && displayMode === 'list'"
+              class="origam-file-field__list"
+              role="list"
+          >
+            <template v-for="(item, idx) in fileList" :key="idx">
+              <slot
+                  name="item"
+                  v-bind="{
+                    file: item,
+                    index: idx,
+                    progress: getProgress(idx),
+                    remove: () => handleRemove(idx),
+                    download: () => handleDownload(idx, item),
+                  }"
+              >
+                <origam-file-field-list-item
+                    :file="item"
+                    :index="idx"
+                    :file-icon="fileIcon"
+                    :remove-icon="removeIcon"
+                    :disabled="isDisabled"
+                    :readonly="isReadonly"
+                    :show-size="showSize"
+                    @click:remove="handleRemove(idx)"
+                />
+              </slot>
+            </template>
+          </ul>
+        </div>
+      </slot>
+    </template>
+
+    <template
+        v-if="slots.append"
+        #append
+    >
+      <slot name="append"/>
+    </template>
+
+    <template
+        v-if="hasDetails"
+        #details="detailsSlotProps"
+    >
+      <slot
+          name="details"
+          v-bind="detailsSlotProps"
+      >
+        <origam-counter
+            :active="persistentCounter || isFocused"
+            :disabled="disabled"
+            :value="counterValue"
+        >
+          <template
+              v-if="slots.counter"
+              #default="{counter, value, max}"
+          >
+            <slot
+                name="counter"
+                v-bind="{counter, value, max}"
+            />
+          </template>
+        </origam-counter>
+      </slot>
+    </template>
+
+    <template
+        v-if="slots.messages"
+        #messages="{hasMessages, messages}"
+    >
+      <slot
+          name="messages"
+          v-bind="{hasMessages, messages}"
+      />
+    </template>
+
+    <template
+        v-if="slots.message"
+        #message="{message}"
+    >
+      <slot
+          name="message"
+          v-bind="{message}"
+      />
+    </template>
+  </origam-input>
 </template>
 
 <script setup>
 import { computed, nextTick, ref, StyleValue, toRef, useAttrs, useSlots, watch } from "vue";
-import { OrigamChip, OrigamCounter, OrigamField, OrigamInput } from "../../components";
-import { useAdjacent, useAdjacentInner, useFocus, useLocale, useProps, useVModel } from "../../composables";
+import { OrigamChip, OrigamCounter, OrigamField, OrigamIcon, OrigamInput } from "../../components";
+import OrigamFileFieldDragNDropItem from "./OrigamFileFieldDragNDropItem.vue";
+import OrigamFileFieldListItem from "./OrigamFileFieldListItem.vue";
+import {
+  useAdjacent,
+  useAdjacentInner,
+  useBothColor,
+  useDefaults,
+  useDensity,
+  useFocus,
+  useLocale,
+  useProps,
+  useStyle,
+  useVModel
+} from "../../composables";
 import { DENSITY, MDI_ICONS } from "../../enums";
 import { filterInputAttrs, forwardRefs, humanReadableFileSize, wrapInArray } from "../../utils";
-const props = defineProps({
+const _props = defineProps({
   chips: { type: Boolean, required: false },
   counter: { type: Boolean, required: false },
-  counterSizeString: { type: String, required: false, default: "origam.fileInput.counterSize" },
-  counterString: { type: String, required: false, default: "origam.fileInput.counter" },
+  counterSizeString: { type: String, required: false, default: "origam.fileField.counterSize" },
+  counterString: { type: String, required: false, default: "origam.fileField.counter" },
   placeholder: { type: String, required: false },
   persistentPlaceholder: { type: Boolean, required: false },
   persistentCounter: { type: Boolean, required: false },
@@ -235,22 +407,32 @@ const props = defineProps({
   modelValue: { type: null, required: false },
   chipProps: { type: Object, required: false },
   divider: { type: String, required: false, default: "," },
+  iconColor: { type: String, required: false },
+  maxFileSize: { type: Number, required: false },
+  dragndrop: { type: Boolean, required: false },
+  dragndropIcon: { type: String, required: false, default: MDI_ICONS.CLOUD_UPLOAD_OUTLINE },
+  fileIcon: { type: String, required: false, default: MDI_ICONS.FILE },
+  removeIcon: { type: String, required: false, default: MDI_ICONS.CLOSE },
+  downloadIcon: { type: String, required: false, default: MDI_ICONS.DOWNLOAD },
+  downloadable: { type: Boolean, required: false },
+  progress: { type: Array, required: false },
+  dropzoneTitle: { type: String, required: false, default: "origam.fileField.dropzoneTitle" },
+  dropzoneSubtitle: { type: String, required: false, default: "origam.fileField.dropzoneSubtitle" },
+  browseText: { type: String, required: false, default: "origam.fileField.browse" },
+  maxFileSizeErrorString: { type: String, required: false, default: "origam.validation.max_size_error" },
+  display: { type: String, required: false, default: "list" },
+  dropzone: { type: Boolean, required: false },
   id: { type: String, required: false },
   class: { type: [String, Array, Object], required: false },
   style: { type: [String, Array, Object, Boolean, null], required: false, skipCheck: true },
   color: { type: [String, Boolean, null], required: false, skipCheck: true },
-  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  activeBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverColor: { type: [String, Boolean, null], required: false, skipCheck: true },
-  hoverBgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   density: { type: null, required: false, default: DENSITY.DEFAULT },
-  active: { type: Boolean, required: false },
   centerAffix: { type: Boolean, required: false, default: true },
   dirty: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  error: { type: Boolean, required: false },
+  error: { type: [String, Boolean], required: false },
   flat: { type: Boolean, required: false },
+  inline: { type: Boolean, required: false },
   label: { type: String, required: false },
   prefix: { type: String, required: false },
   suffix: { type: String, required: false },
@@ -258,9 +440,10 @@ const props = defineProps({
   reverse: { type: Boolean, required: false },
   singleLine: { type: Boolean, required: false },
   required: { type: Boolean, required: false },
-  loading: { type: [Boolean, Number], required: false },
+  loading: { type: [Boolean, Number, Object], required: false },
   loadingText: { type: String, required: false },
   tag: { type: String, required: false },
+  bgColor: { type: [String, Boolean, null], required: false, skipCheck: true },
   appendInnerAvatar: { type: String, required: false },
   appendInnerIcon: { type: null, required: false },
   prependInnerAvatar: { type: String, required: false },
@@ -268,18 +451,9 @@ const props = defineProps({
   clearIcon: { type: null, required: false },
   clearable: { type: Boolean, required: false, default: true },
   focused: { type: Boolean, required: false },
-  hideDetails: { type: [Boolean, String], required: false },
-  hideSpinButtons: { type: Boolean, required: false },
-  hint: { type: String, required: false },
-  persistentHint: { type: Boolean, required: false },
-  messages: { type: [Array, String], required: false },
-  padding: { type: [Boolean, Number, String], required: false },
-  paddingTop: { type: [Boolean, Number, String], required: false },
-  paddingLeft: { type: [Boolean, Number, String], required: false },
-  paddingBottom: { type: [Boolean, Number, String], required: false },
-  paddingRight: { type: [Boolean, Number, String], required: false },
-  paddingBlock: { type: [Boolean, Number, String], required: false },
-  paddingInline: { type: [Boolean, Number, String], required: false },
+  text: { type: String, required: false },
+  floating: { type: Boolean, required: false },
+  name: { type: String, required: false },
   margin: { type: [Boolean, Number, String], required: false },
   marginTop: { type: [Boolean, Number, String], required: false },
   marginLeft: { type: [Boolean, Number, String], required: false },
@@ -287,11 +461,13 @@ const props = defineProps({
   marginRight: { type: [Boolean, Number, String], required: false },
   marginBlock: { type: [Boolean, Number, String], required: false },
   marginInline: { type: [Boolean, Number, String], required: false },
-  rounded: { type: [Boolean, String, Number, null], required: false, skipCheck: true, default: true },
-  roundedTopRight: { type: [Boolean, Number, String], required: false },
-  roundedTopLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
-  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  padding: { type: [Boolean, Number, String], required: false },
+  paddingTop: { type: [Boolean, Number, String], required: false },
+  paddingLeft: { type: [Boolean, Number, String], required: false },
+  paddingBottom: { type: [Boolean, Number, String], required: false },
+  paddingRight: { type: [Boolean, Number, String], required: false },
+  paddingBlock: { type: [Boolean, Number, String], required: false },
+  paddingInline: { type: [Boolean, Number, String], required: false },
   border: { type: [Boolean, Number, String, Array], required: false, skipCheck: true, default: true },
   borderTop: { type: [Boolean, Number, String], required: false },
   borderLeft: { type: [Boolean, Number, String], required: false },
@@ -301,7 +477,21 @@ const props = defineProps({
   borderInline: { type: [Boolean, Number, String], required: false },
   borderColor: { type: String, required: false },
   borderStyle: { type: String, required: false },
+  rounded: { type: [Boolean, Number, String, null], required: false, skipCheck: true, default: true },
+  roundedTopRight: { type: [Boolean, Number, String], required: false },
+  roundedTopLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomLeft: { type: [Boolean, Number, String], required: false },
+  roundedBottomRight: { type: [Boolean, Number, String], required: false },
+  active: { type: [Boolean, Object], required: false },
+  activeClass: { type: String, required: false },
+  variant: { type: null, required: false },
   elevation: { type: [Number, String], required: false },
+  size: { type: null, required: false },
+  hideDetails: { type: [Boolean, String], required: false },
+  hideSpinButtons: { type: Boolean, required: false },
+  hint: { type: String, required: false },
+  persistentHint: { type: Boolean, required: false },
+  messages: { type: [Array, String], required: false },
   height: { type: [Number, String], required: false },
   maxHeight: { type: [Number, String], required: false },
   maxWidth: { type: [Number, String], required: false },
@@ -311,7 +501,6 @@ const props = defineProps({
   direction: { type: null, required: false },
   errorMessages: { type: [Array, String], required: false },
   maxErrors: { type: [Number, String], required: false },
-  name: { type: String, required: false },
   readonly: { type: Boolean, required: false },
   rules: { type: Array, required: false },
   validateOn: { type: null, required: false },
@@ -321,8 +510,25 @@ const props = defineProps({
   prependAvatar: { type: String, required: false },
   prependIcon: { type: null, required: false }
 });
-const emits = defineEmits(["click:clear", "click:control", "mousedown:control", "update:focused", "update:modelValue", "click:prepend", "click:append", "click:prependInner", "click:appendInner"]);
-const { filterProps } = useProps(props);
+const props = useDefaults(_props);
+const isDropzoneMode = computed(() => Boolean(props.dropzone || props.dragndrop));
+const displayMode = computed(() => {
+  if (props.chips) return "chips";
+  return props.display ?? "list";
+});
+const isErrored = computed(() => Boolean(props.error));
+const errorMessage = computed(() => typeof props.error === "string" ? props.error : "");
+const fileList = computed(() => {
+  const mv = props.modelValue;
+  if (Array.isArray(mv)) return mv;
+  if (mv instanceof File) return [mv];
+  const m = model.value;
+  return Array.isArray(m) ? m : [];
+});
+const emits = defineEmits(["click:control", "mousedown:control", "click:remove", "click:download", "drop", "error:max-size", "update:focused", "update:modelValue", "click:appendInner", "click:prependInner", "click:clear", "update:active", "click:append", "click:prepend"]);
+defineSlots();
+const slots = useSlots();
+const attrs = useAttrs();
 const { t } = useLocale();
 const model = useVModel(
   props,
@@ -331,7 +537,6 @@ const model = useVModel(
   (val) => wrapInArray(val),
   (val) => props.multiple || Array.isArray(props.modelValue) ? val : val[0] ?? null
 );
-const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const {
   onClickPrepend,
   onClickAppend: handleClickAppend
@@ -340,33 +545,10 @@ const {
   onClickPrependInner: handleClickPrependInner,
   onClickAppendInner: handleClickAppendInner
 } = useAdjacentInner(props);
-const slots = useSlots();
-const attrs = useAttrs();
-const base = computed(() => {
-  return typeof props.showSize !== "boolean" ? props.showSize : void 0;
-});
-const totalBytes = computed(() => {
-  return (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0);
-});
-const totalBytesReadable = computed(() => {
-  return humanReadableFileSize(totalBytes.value, base.value);
-});
-const fileNames = computed(() => {
-  return (model.value ?? []).map((file) => {
-    const { name = "", size = 0 } = file;
-    return !props.showSize ? name : `${name} (${humanReadableFileSize(size, base.value)})`;
-  });
-});
-const counterValue = computed(() => {
-  const fileCount = model.value?.length ?? 0;
-  if (props.showSize) {
-    return t(props.counterSizeString, fileCount, totalBytesReadable.value);
-  }
-  return t(props.counterString, fileCount);
-});
 const origamInputRef = ref();
 const origamFieldRef = ref();
 const inputRef = ref();
+const { isFocused, onFocus, onBlur: handleBlur } = useFocus(props);
 const isActive = computed(() => {
   return isFocused.value || props.active;
 });
@@ -406,7 +588,76 @@ const handleClick = (e, isReadonly) => {
 const handleChange = (e) => {
   if (!e.target) return;
   const target = e.target;
-  model.value = [...target.files ?? []];
+  const files = filterBySize([...target.files ?? []]);
+  if (props.dragndrop && props.multiple && hasFiles.value) {
+    model.value = [...model.value ?? [], ...files];
+  } else {
+    model.value = files;
+  }
+};
+const isDragging = ref(false);
+const handleBrowseClick = () => {
+  inputRef.value?.click();
+};
+const handleDragEnter = () => {
+  if (props.disabled || props.readonly) return;
+  isDragging.value = true;
+};
+const handleDragOver = (e) => {
+  if (props.disabled || props.readonly) return;
+  if (e.dataTransfer) e.dataTransfer.dropEffect = "copy";
+  isDragging.value = true;
+};
+const handleDragLeave = (e) => {
+  const currentTarget = e.currentTarget;
+  const related = e.relatedTarget;
+  if (currentTarget && related && currentTarget.contains(related)) return;
+  isDragging.value = false;
+};
+const handleDrop = (e) => {
+  isDragging.value = false;
+  if (props.disabled || props.readonly) return;
+  const dropped = Array.from(e.dataTransfer?.files ?? []);
+  const filtered = filterBySize(dropped);
+  const limited = props.multiple ? filtered : filtered.slice(0, 1);
+  if (props.multiple && hasFiles.value) {
+    model.value = [...model.value ?? [], ...limited];
+  } else {
+    model.value = limited;
+  }
+  emits("drop", { files: limited, event: e });
+};
+const filterBySize = (files) => {
+  if (!props.maxFileSize) return files;
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (file.size <= props.maxFileSize) {
+      accepted.push(file);
+    } else {
+      rejected.push(file);
+    }
+  }
+  if (rejected.length > 0) {
+    emits("error:max-size", {
+      files: rejected,
+      maxFileSize: props.maxFileSize,
+      message: rejected.map((file) => t(
+        props.maxFileSizeErrorString,
+        [file.name, humanReadableFileSize(props.maxFileSize, base.value)]
+      ))
+    });
+  }
+  return accepted;
+};
+const handleRemove = (index) => {
+  const files = [...model.value ?? []];
+  const [removed] = files.splice(index, 1);
+  model.value = files;
+  emits("click:remove", { file: removed, index });
+};
+const handleDownload = (index, file) => {
+  emits("click:download", { file, index });
 };
 watch(model, (newValue) => {
   const hasModelReset = !Array.isArray(newValue) || !newValue.length;
@@ -414,6 +665,38 @@ watch(model, (newValue) => {
     inputRef.value.value = "";
   }
 });
+const base = computed(() => {
+  return typeof props.showSize !== "boolean" ? props.showSize : void 0;
+});
+const totalBytes = computed(() => {
+  return (model.value ?? []).reduce((bytes, { size = 0 }) => bytes + size, 0);
+});
+const totalBytesReadable = computed(() => {
+  return humanReadableFileSize(totalBytes.value, base.value);
+});
+const fileNames = computed(() => {
+  return (model.value ?? []).map((file) => {
+    const { name = "", size = 0 } = file;
+    return !props.showSize ? name : `${name} (${humanReadableFileSize(size, base.value)})`;
+  });
+});
+const selectionText = computed(() => {
+  if (!hasFiles.value) return "";
+  if (props.multiple) {
+    return t(props.counterString, [model.value?.length ?? 0]);
+  }
+  return fileNames.value[0] ?? "";
+});
+const counterValue = computed(() => {
+  const fileCount = model.value?.length ?? 0;
+  if (props.showSize) {
+    return t(props.counterSizeString, [fileCount, totalBytesReadable.value]);
+  }
+  return t(props.counterString, [fileCount]);
+});
+const hasFiles = computed(() => {
+  return Array.isArray(model.value) && model.value.length > 0;
+});
 const hasCounter = computed(() => {
   return slots.counter || props.counter;
 });
@@ -421,7 +704,28 @@ const hasDetails = computed(() => {
   return slots.details || hasCounter.value;
 });
 const hasChips = computed(() => {
-  return props.chips || slots.chip;
+  return displayMode.value === "chips" || slots.chip;
+});
+const hasInlineCounter = computed(() => {
+  return displayMode.value === "counter" && hasFiles.value && props.multiple;
+});
+const inlineCounterValue = computed(() => {
+  return model.value?.length ?? 0;
+});
+const chipProps = computed(() => {
+  return {
+    closable: !props.disabled && !props.readonly,
+    color: props.color
+  };
+});
+const getProgress = (index) => {
+  return props.progress?.[index] ?? 0;
+};
+const dropzoneTitleText = computed(() => {
+  return t(props.dropzoneTitle);
+});
+const dropzoneSubtitleText = computed(() => {
+  return t(props.dropzoneSubtitle);
 });
 const [rootAttrs, inputAttrs] = filterInputAttrs(attrs);
 const inputProps = computed(() => {
@@ -439,36 +743,211 @@ const fileFieldClasses = computed(() => {
   return [
     "origam-file-field",
     {
-      "origam-file-field--chips": props.chips
+      "origam-file-field--chips": props.chips,
+      "origam-file-field--dragndrop": props.dragndrop
     },
     props.class
   ];
 });
-defineExpose(forwardRefs({ filterProps }, origamInputRef, origamFieldRef, inputRef));
+const { colorClasses: dropzoneColorClasses, colorStyles: dropzoneColorStyles } = useBothColor(
+  toRef(props, "bgColor"),
+  toRef(props, "color")
+);
+const { densityClasses: dropzoneDensityClasses } = useDensity(props, "origam-file-field__dropzone");
+const dropzoneClasses = computed(() => {
+  return [
+    "origam-file-field__dropzone",
+    {
+      "origam-file-field__dropzone--dragging": isDragging.value,
+      "origam-file-field__dropzone--disabled": props.disabled,
+      "origam-file-field__dropzone--readonly": props.readonly,
+      "origam-file-field__dropzone--has-file": !props.multiple && hasFiles.value,
+      "origam-file-field__dropzone--error": isErrored.value
+    },
+    dropzoneColorClasses.value,
+    dropzoneDensityClasses.value
+  ];
+});
+const { filterProps } = useProps(props);
+const { id, css, load, isLoaded, unload } = useStyle(fileFieldStyles);
+defineExpose(forwardRefs({
+  filterProps,
+  css,
+  id,
+  load,
+  unload,
+  isLoaded
+}, origamInputRef, origamFieldRef, inputRef));
 </script>
 
 <style lang="scss" scoped>
-	.origam-file-field {
-		:deep(input[type=file]) {
-			height: 100%;
-			left: 0;
-			opacity: 0;
-			position: absolute;
-			top: 0;
-			width: 100%;
-			z-index: 1;
-		}
-
-		:deep(.origam-input) {
-			.origam-input__details {
-				padding-inline: 16px;
-			}
-		}
-	}
-</style>
+  .origam-file-field {
+    :deep(input[type=file]) {
+      height: 100%;
+      left: 0;
+      opacity: 0;
+      position: absolute;
+      top: 0;
+      width: 100%;
+      z-index: 1;
+    }
+
+    :deep(.origam-input) {
+      .origam-input__details {
+        padding-inline: var(--origam-file-field---details-padding-inline, 16px);
+      }
+    }
+
+    :deep(.origam-field) {
+      &.origam-field--active {
+        .origam-field__input {
+          flex-wrap: nowrap;
+          padding-block: 4px;
+        }
+      }
+    }
+
+    &__field {
+      display: flex;
+      flex-direction: column;
+      gap: var(--origam-file-field---field-gap, 8px);
+      width: 100%;
+    }
+
+    &__selections {
+      display: flex;
+      align-items: center;
+      min-width: 0;
+      overflow: hidden;
+      flex: 1;
+      z-index: 2;
+    }
+
+    &__selection {
+      max-width: 100%;
+    }
+
+    &__selection-text {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    &__inline-counter {
+      flex-shrink: 0;
+      margin-inline-start: var(--origam-file-field---inline-counter-margin, 8px);
+    }
+
+    &--dragndrop {
+      :deep(.origam-input__control) {
+        display: block;
+      }
+    }
+
+    &__dragndrop {
+      display: flex;
+      flex-direction: column;
+      gap: var(--origam-file-field---gap, 12px);
+      width: 100%;
+    }
+
+    &__dropzone {
+      align-items: center;
+      background-color: var(--origam-file-field__dropzone---background-color, transparent);
+      border: var(--origam-file-field__dropzone---border-width, 2px) var(--origam-file-field__dropzone---border-style, dashed) var(--origam-file-field__dropzone---color, var(--origam-color__border---default));
+      border-radius: var(--origam-file-field__dropzone---border-radius, 8px);
+      color: var(--origam-file-field__dropzone---color, inherit);
+      cursor: var(--origam-file-field__dropzone---cursor, pointer);
+      display: flex;
+      flex-direction: column;
+      gap: var(--origam-file-field__dropzone---gap, 8px);
+      justify-content: center;
+      min-height: calc(var(--origam-file-field__dropzone---min-height, 140px) + var(--origam-file-field__dropzone---density, 0px));
+      padding: calc(var(--origam-file-field__dropzone---padding, 24px) + var(--origam-file-field__dropzone---density, 0px));
+      position: relative;
+      text-align: center;
+      transition: border-color var(--origam-file-field---transition-duration, 200ms) ease, background-color var(--origam-file-field---transition-duration, 200ms) ease;
+
+      &:hover {
+        border-color: var(--origam-file-field__dropzone---color-hover, var(--origam-color__border---strong));
+      }
+
+      &--dragging {
+        background-color: var(--origam-file-field__dropzone---bg-dragging, var(--origam-file-field__dropzone--dragging---background-color, var(--origam-color__feedback--info---bg-subtle)));
+        border-color: var(--origam-file-field__dropzone---border-color-dragging, var(--origam-file-field__dropzone--dragging---border-color, var(--origam-color__feedback--info---bg)));
+      }
+
+      &--error {
+        border-color: var(--origam-file-field__dropzone--error---border-color, var(--origam-file-field__dropzone---border-color-error, var(--origam-color__feedback--danger---bg)));
+
+        .origam-file-field__dropzone-icon,
+        .origam-file-field__dropzone-title {
+          color: var(--origam-file-field__dropzone--error---fg, var(--origam-color__feedback--danger---fg-subtle));
+        }
+      }
+
+      &-error {
+        color: var(--origam-file-field__dropzone--error---fg, var(--origam-color__feedback--danger---fg-subtle));
+        font-size: var(--origam-file-field__dropzone---subtitle-font-size, 0.75rem);
+        margin-top: var(--origam-file-field__dropzone---gap-deck, 8px);
+      }
 
-<style>
-	:root {
+      &--has-file {
+        flex-direction: row;
+        gap: var(--origam-file-field__dropzone--has-file---gap, 12px);
+        justify-content: flex-start;
+        min-height: auto;
+        padding-block: var(--origam-file-field__dropzone--has-file---padding, 10px);
+        padding-inline: var(--origam-file-field__dropzone--has-file---padding-inline, 12px);
+        text-align: left;
+      }
 
-	}
+      &--density-compact {
+        --origam-file-field__dropzone---density: -8px;
+      }
+
+      &--density-comfortable {
+        --origam-file-field__dropzone---density: -4px;
+      }
+
+      &--disabled,
+      &--readonly {
+        cursor: var(--origam-file-field__dropzone---cursor-disabled, not-allowed);
+        opacity: var(--origam-file-field__dropzone---opacity-disabled, 0.6);
+      }
+
+      &-icon {
+        font-size: var(--origam-file-field__dropzone---icon-font-size, 40px);
+        opacity: var(--origam-file-field__dropzone---icon-opacity, 0.7);
+      }
+
+      &-title {
+        font-size: var(--origam-file-field__dropzone---title-font-size, 0.875rem);
+        font-weight: var(--origam-file-field__dropzone---title-font-weight, 500);
+      }
+
+      &-subtitle {
+        font-size: var(--origam-file-field__dropzone---subtitle-font-size, 0.75rem);
+        opacity: var(--origam-file-field__dropzone---subtitle-opacity, 0.6);
+      }
+
+      &-input {
+        height: 100%;
+        left: 0;
+        opacity: 0;
+        position: absolute;
+        top: 0;
+        width: 100%;
+      }
+    }
+
+    &__list {
+      display: flex;
+      flex-direction: column;
+      gap: var(--origam-file-field---list-gap, 8px);
+      list-style: none;
+      margin: 0;
+      padding: 0;
+    }
+  }
 </style>