orio-ui 1.7.0 → 1.7.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/module.json
CHANGED
|
@@ -136,5 +136,5 @@ onMounted(() => {
|
|
|
136
136
|
</template>
|
|
137
137
|
|
|
138
138
|
<style scoped>
|
|
139
|
-
.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");
|
|
139
|
+
.carousel{border:1px solid var(--color-border);border-radius:var(--border-radius-lg);height:v-bind("calculatedSize.height");max-height:v-bind(maxHeight);max-width:100%;overflow:hidden;width:v-bind("calculatedSize.width")}.carousel__track{align-items:center;cursor:grab;display:flex;gap:.75rem;height:100%;position:relative;-webkit-user-select:none;-moz-user-select:none;user-select:none;width:100%}.carousel__track:active{cursor:grabbing}.carousel__item{background:var(--color-surface);border-radius:var(--border-radius-sm);color:var(--color-text);height:100%;inset:0;opacity:0;padding:.5rem .75rem;pointer-events:none;position:absolute;transition:opacity .5s ease-in-out,transform .5s ease-in-out;white-space:nowrap;width:100%}.carousel__item.previous-image{transform:translateX(-100%)}.carousel__item.next-image{transform:translateX(100%)}.carousel__item.active-image{opacity:1;pointer-events:auto;transform:translateX(0)}.carousel__item img{height:100%;-o-object-fit:v-bind(fit);object-fit:v-bind(fit);width:100%}.carousel__empty{color:var(--color-muted)}.switch-button{position:absolute;top:50%}.switch-button :deep(button){background:transparent!important;border:none!important;color:transparent!important}.switch-button :deep(button:hover){color:transparent!important}.switch-button :deep(.orio-icon){color:#fff!important;fill:#fff!important;filter:drop-shadow(0 0 2px rgba(0,0,0,.8)) drop-shadow(0 0 4px rgba(0,0,0,.6))}@supports (mix-blend-mode:difference) and (not (-webkit-hyphens:none)){.switch-button :deep(.orio-icon){color:#000!important;fill:#000!important;filter:grayscale(1) contrast(9) invert(1) drop-shadow(0 0 1px black) drop-shadow(0 0 2px black);mix-blend-mode:difference}}.switch-button.previous-button{left:0}.switch-button.next-button{right:0}
|
|
140
140
|
</style>
|
|
@@ -1,48 +1,67 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
import { useDropZone, useFileDialog } from "@vueuse/core";
|
|
3
|
-
import { toRefs, useTemplateRef } from "vue";
|
|
3
|
+
import { computed, toRefs, useTemplateRef } from "vue";
|
|
4
4
|
|
|
5
5
|
interface Props {
|
|
6
|
-
|
|
6
|
+
maxFiles?: number;
|
|
7
7
|
allowedTypes?: string[];
|
|
8
|
+
disabled?: boolean;
|
|
8
9
|
}
|
|
9
10
|
|
|
10
11
|
const props = withDefaults(defineProps<Props>(), {
|
|
11
|
-
|
|
12
|
+
maxFiles: undefined,
|
|
12
13
|
allowedTypes: undefined,
|
|
14
|
+
disabled: false,
|
|
13
15
|
});
|
|
14
16
|
|
|
15
|
-
const {
|
|
17
|
+
const { maxFiles, allowedTypes, disabled } = toRefs(props);
|
|
18
|
+
|
|
19
|
+
const isMultiple = computed(
|
|
20
|
+
() => maxFiles.value === undefined || maxFiles.value > 1,
|
|
21
|
+
);
|
|
16
22
|
|
|
17
23
|
const dropZone = useTemplateRef("dropZone");
|
|
18
24
|
|
|
19
|
-
const modelValue = defineModel<File[]
|
|
25
|
+
const modelValue = defineModel<File[]>({ default: () => [] });
|
|
20
26
|
|
|
21
27
|
function onDrop(files: File[] | null) {
|
|
28
|
+
if (disabled.value) return;
|
|
22
29
|
if (files && files.length > 0) {
|
|
23
|
-
modelValue.value
|
|
30
|
+
const finalFiles = [...modelValue.value, ...files].slice(
|
|
31
|
+
0,
|
|
32
|
+
maxFiles.value ?? -1,
|
|
33
|
+
);
|
|
34
|
+
modelValue.value = finalFiles;
|
|
24
35
|
} else {
|
|
25
|
-
modelValue.value =
|
|
36
|
+
modelValue.value = [];
|
|
26
37
|
}
|
|
27
38
|
}
|
|
28
39
|
|
|
29
|
-
|
|
40
|
+
// Since we want to have more control over disabled upload - rename the isOverDropZone to overwrite it as a computed
|
|
41
|
+
const { isOverDropZone: overDropZone } = useDropZone(dropZone, {
|
|
30
42
|
onDrop,
|
|
31
|
-
multiple:
|
|
43
|
+
multiple: isMultiple.value,
|
|
32
44
|
dataTypes: allowedTypes.value,
|
|
33
45
|
preventDefaultForUnhandled: false,
|
|
34
46
|
});
|
|
35
47
|
|
|
36
48
|
const { open, onChange } = useFileDialog({
|
|
37
|
-
multiple:
|
|
49
|
+
multiple: isMultiple.value,
|
|
38
50
|
accept: allowedTypes.value?.join(","),
|
|
39
51
|
});
|
|
40
52
|
|
|
53
|
+
function openDialog() {
|
|
54
|
+
if (disabled.value) return;
|
|
55
|
+
open();
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
const isOverDropZone = computed(() => !disabled.value && overDropZone.value);
|
|
59
|
+
|
|
41
60
|
onChange((files) => onDrop(files as File[] | null));
|
|
42
61
|
</script>
|
|
43
62
|
|
|
44
63
|
<template>
|
|
45
64
|
<div ref="dropZone">
|
|
46
|
-
<slot :is-over-drop-zone :open />
|
|
65
|
+
<slot :is-over-drop-zone :open-dialog />
|
|
47
66
|
</div>
|
|
48
67
|
</template>
|