@volverjs/ui-vue 0.0.10-beta.5 → 0.0.10-beta.50

package/src/components/VvIcon/index.ts

@@ -1,103 +1,90 @@
-import type { PropType } from 'vue'
 import type { IconifyIconOnLoad, IconifyRenderMode } from '@iconify/vue'
 
+export const ACTION_ICONS = {
+    showPassword: 'eye-on',
+    hidePassword: 'eye-off',
+    showDatePicker: 'calendar',
+    showTimePicker: 'time',
+    showColorPicker: 'color',
+    clear: 'close',
+    add: 'add',
+    remove: 'trash',
+    edit: 'edit',
+    download: 'download',
+} as const
+
 export enum IconPrefix {
-	simple = 'simple',
-	normal = 'normal',
-	detailed = 'detailed',
+    simple = 'simple',
+    normal = 'normal',
+    detailed = 'detailed',
+}
+
+export type VvIconProps = {
+    /**
+     * Icon name
+     * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
+     * https://docs.iconify.design/api/providers.html#provider-in-icon-name
+     */
+    name: string
+    color?: string
+    width?: string | number
+    height?: string | number
+    /**
+     * If custom collection is not added with "addCollection" DS class method, this prop could not be used
+     * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
+     */
+    provider?: string
+    /**
+     * @default 'normal'
+     * The name of icon set.
+     * Icon default options prefix: simple | normal | detailed
+     */
+    prefix?: IconPrefix | string
+    /**
+     * Url remote SVG icon
+     */
+    src?: string
+    horizontalFlip?: boolean
+    verticalFlip?: boolean
+    /**
+     * String alternative to "horizontalFlip" and "verticalFlip".
+     * Example: https://docs.iconify.design/icon-components/vue/transform.html
+     */
+    flip?: string
+    /**
+     * Icon render mode
+     * 'style' = 'bg' or 'mask', depending on icon content
+     * 'bg' = span with style using `background`
+     * 'mask' = span with style using `mask`
+     * 'svg' = svg
+     * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
+     */
+    mode?: IconifyRenderMode
+    /**
+     * Toggles inline or block mode
+     * Example https://docs.iconify.design/icon-components/vue/inline.html
+     */
+    inline?: boolean
+    /**
+     * rotates icon
+     * Example https://docs.iconify.design/icon-components/vue/transform.html
+     */
+    rotate?: number | string
+    /**
+     * A callback that is called when icon data has been loaded
+     */
+    onLoad?: IconifyIconOnLoad
+    /**
+     * SVG icon string
+     */
+    svg?: string
+    /**
+     * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
+     * @values string | string[]
+     */
+    modifiers?: string | string[]
 }
 
-export const VvIconProps = {
-	/**
-	 * Color
-	 */
-	color: String,
-	/**
-	 * Width
-	 */
-	width: {
-		type: [String, Number],
-	},
-	/**
-	 * Height
-	 */
-	height: {
-		type: [String, Number],
-	},
-	/**
-	 * Icon name
-	 * Can be the full composition of iconify name "@{provider}:{prefix}:{name}" or "{prefix}:{name}" or "{name}"
-	 * https://docs.iconify.design/api/providers.html#provider-in-icon-name
-	 */
-	name: {
-		type: String,
-		required: true,
-	},
-	/**
-	 * By default 'vv'
-	 * If custom collection is not added with "addCollection" DS class method, this prop could not be used
-	 * Icon provider: https://docs.iconify.design/api/providers.html#provider-in-icon-name
-	 */
-	provider: {
-		type: String,
-	},
-	/**
-	 * The name of icon set.
-	 * Icon default options prefix: simple | normal | detailed
-	 */
-	prefix: {
-		type: String as PropType<`${IconPrefix}` | string>,
-		default: 'normal',
-	},
-	/**
-	 * Url remote SVG icon
-	 */
-	src: String,
-	/**
-	 * Horizontal flip
-	 */
-	horizontalFlip: Boolean,
-	/**
-	 * Vertical flip
-	 */
-	verticalFlip: Boolean,
-	/**
-	 * String alternative to "horizontalFlip" and "verticalFlip".
-	 * Example: https://docs.iconify.design/icon-components/vue/transform.html
-	 */
-	flip: String,
-	/**
-	 * Icon render mode
-	 * 'style' = 'bg' or 'mask', depending on icon content
-	 * 'bg' = span with style using `background`
-	 * 'mask' = span with style using `mask`
-	 * 'svg' = svg
-	 * Iconify doc: https://docs.iconify.design/iconify-icon/modes.html
-	 */
-	mode: String as PropType<`${IconifyRenderMode}`>,
-	/**
-	 * Toggles inline or block mode
-	 * Example https://docs.iconify.design/icon-components/vue/inline.html
-	 */
-	inline: Boolean,
-	/**
-	 * rotates icon
-	 * Example https://docs.iconify.design/icon-components/vue/transform.html
-	 */
-	rotate: [Number, String],
-	/**
-	 * A callback that is called when icon data has been loaded
-	 */
-	onLoad: Function as PropType<IconifyIconOnLoad>,
-	/**
-	 * SVG icon string
-	 */
-	svg: String,
-	/**
-	 * Icon modifiers: vv-icon css helper classes, value/s are concatened with prefix 'vv-icon--'
-	 * @values string | string[]
-	 */
-	modifiers: {
-		type: [String, Array] as PropType<string | string[]>,
-	},
+export const VvIconPropsDefaults = {
+    prefix: IconPrefix.normal,
 }

package/src/components/VvInputFile/VvInputFile.vue

@@ -0,0 +1,413 @@
+<script setup lang="ts">
+import type { UploadedFile } from '../../types'
+import { useVModel } from '@vueuse/core'
+import { computed, onBeforeUnmount, ref } from 'vue'
+import Sortable from 'vuedraggable'
+import { type VvInputFileEvents, VvInputFileProps } from '.'
+import HintSlotFactory from '../common/HintSlot'
+import VvButton from '../VvButton/VvButton.vue'
+import VvIcon from '../VvIcon/VvIcon.vue'
+
+// props, emit, slots and attrs
+const props = defineProps(VvInputFileProps)
+const emit = defineEmits<VvInputFileEvents>()
+const slots = useSlots()
+
+// props merged with volver defaults (now only for labels)
+const propsDefaults = useDefaults<typeof VvInputFileProps>(
+    'VvInputFile',
+    VvInputFileProps,
+    props,
+)
+const { modifiers, id, readonly, disabled, icon, iconPosition, iconDownload }
+		= toRefs(props)
+const hasId = useUniqueId(id)
+const hasHintId = computed(() => `${hasId.value}-hint`)
+
+const hasProgress = computed(() => {
+    if (!props.progress) {
+        return false
+    }
+    const progress
+			= typeof props.progress === 'string'
+			    ? Number.parseInt(props.progress)
+			    : props.progress
+    return progress > 0 && progress < 100
+})
+
+const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+const { hasIcon: hasIconDownload } = useComponentIcon(iconDownload)
+
+// styles
+const bemCssClasses = useModifiers(
+    'vv-input-file',
+    modifiers,
+    computed(() => ({
+        'dragging': isDragging.value,
+        'loading': props.loading && !hasProgress.value,
+        'valid': props.valid === true,
+        'invalid': props.invalid === true,
+        'icon-before': !!hasIconBefore.value,
+        'icon-after': !!hasIconAfter.value,
+        'drop-area': hasDropArea.value,
+    })),
+)
+
+const {
+    HintSlot,
+    hasHintLabelOrSlot,
+    hasInvalidLabelOrSlot,
+    hintSlotScope,
+} = HintSlotFactory(propsDefaults, slots)
+
+const localModelValue = useVModel(props, 'modelValue', emit)
+const files = computed({
+    get: () => {
+        if (
+            !localModelValue.value
+            || (!Array.isArray(localModelValue.value)
+                && !(localModelValue.value as File)?.name)
+        ) {
+            return []
+        }
+        return Array.isArray(localModelValue.value)
+            ? localModelValue.value
+            : [localModelValue.value]
+    },
+    set: (value) => {
+        if (isMultiple.value) {
+            localModelValue.value = value
+            return
+        }
+        localModelValue.value = value?.[0]
+    },
+})
+
+const isDisabledOrReadonly = computed(() => props.disabled || props.readonly)
+
+const hasMax = computed(() => {
+    return typeof props.max === 'string' ? Number.parseInt(props.max) : props.max
+})
+
+const hasDropArea = computed(() => {
+    return props.dropArea && !isDisabledOrReadonly.value
+})
+
+const isMultiple = computed(() => {
+    if (!props.multiple) {
+        return false
+    }
+    if (!hasMax.value) {
+        return true
+    }
+    return hasMax.value - files.value.length > 1
+})
+
+const isDragging = ref(false)
+
+const inputEl = ref<HTMLInputElement>()
+function onDragenter() {
+    isDragging.value = true
+}
+
+function onDragleave() {
+    isDragging.value = false
+}
+
+function onDrop(event: DragEvent) {
+    if (!event.dataTransfer?.files) {
+        return
+    }
+    isDragging.value = false
+    addFiles(event.dataTransfer?.files)
+}
+
+function onChange() {
+    if (!inputEl.value?.files) {
+        return
+    }
+    addFiles(inputEl.value.files)
+    inputEl.value.value = ''
+}
+
+function addFiles(uploadedFiles: FileList) {
+    if (!props.multiple) {
+        if (Array.isArray(localModelValue.value)) {
+            localModelValue.value = [...uploadedFiles]
+            return
+        }
+        localModelValue.value = uploadedFiles[0]
+        return
+    }
+    let toReturn: (File | UploadedFile)[] = []
+    if (!Array.isArray(localModelValue.value) && localModelValue.value) {
+        toReturn = [localModelValue.value]
+    }
+    else {
+        toReturn
+				= localModelValue.value && Array.isArray(localModelValue.value)
+                ? [...localModelValue.value]
+                : toReturn
+    }
+    for (const file of uploadedFiles) {
+        if (hasMax.value && toReturn.length >= hasMax.value) {
+            break
+        }
+        toReturn.push(file)
+    }
+    localModelValue.value = toReturn
+    selectedFileIndex.value = toReturn.length - 1
+}
+
+function onClickDropArea() {
+    if (!inputEl.value) {
+        return
+    }
+    if (!isDisabledOrReadonly.value) {
+        inputEl.value.click()
+    }
+}
+
+function onClickRemoveFile(index: number) {
+    const toRemove = !Array.isArray(localModelValue.value) ? localModelValue.value : localModelValue.value[index]
+    if (!toRemove) {
+        return
+    }
+    emit('remove', toRemove)
+    if (!Array.isArray(localModelValue.value)) {
+        localModelValue.value = undefined
+        return
+    }
+    if (selectedFileIndex.value === index) {
+        selectedFileIndex.value = 0
+    }
+    const newModelValue = [...localModelValue.value]
+    newModelValue.splice(index, 1)
+    localModelValue.value = newModelValue
+}
+
+const selectedFileIndex = ref(0)
+const PREVIEW_MIME_TYPES = ['image/jpeg', 'image/png']
+const previewSrc = computed(() => {
+    if (files.value.length === 0) {
+        return
+    }
+    if (!files.value[selectedFileIndex.value]) {
+        return undefined
+    }
+    if (files.value[selectedFileIndex.value] instanceof File) {
+        const currentFile = files.value[selectedFileIndex.value] as File
+        if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+            return undefined
+        }
+        return URL.createObjectURL(currentFile)
+    }
+    const currentFile = files.value[selectedFileIndex.value] as UploadedFile
+    if (currentFile.thumbnailUrl) {
+        return currentFile.thumbnailUrl
+    }
+    if (!PREVIEW_MIME_TYPES.includes(currentFile.type)) {
+        return undefined
+    }
+    return currentFile.url
+})
+
+watch(previewSrc, (_newValue, oldValue) => {
+    if (oldValue) {
+        URL.revokeObjectURL(oldValue)
+    }
+})
+
+onBeforeUnmount(() => {
+    if (previewSrc.value) {
+        URL.revokeObjectURL(previewSrc.value)
+    }
+})
+
+function formatBytes(bytes?: number, decimals?: number) {
+    if (!bytes) {
+        return
+    }
+    if (bytes === 0)
+        return '0 Bytes'
+    const k = 1024
+    const dm = !decimals ? 2 : decimals <= 0 ? 0 : decimals
+    const sizes = ['Bytes', 'KB', 'MB', 'GB', 'TB', 'PB', 'EB', 'ZB', 'YB']
+    const i = Math.floor(Math.log(bytes) / Math.log(k))
+    return `${Number.parseFloat((bytes / (k ** i)).toFixed(dm))} ${sizes[i]}`
+}
+
+function onClickDownloadFile(file: File | UploadedFile) {
+    emit('download', file)
+    const href = file instanceof File ? URL.createObjectURL(file) : file.url
+    if (!href) {
+        return
+    }
+    const link = document.createElement('a')
+    link.href = href
+    link.setAttribute('download', file.name)
+    document.body.appendChild(link)
+    link.click()
+    document.body.removeChild(link)
+    URL.revokeObjectURL(link.href)
+}
+
+function onClickSelectFile(index: number) {
+    selectedFileIndex.value = index
+}
+
+const dropdAreaActionLabel = computed(() => {
+    if (files.value.length === 0 || isMultiple.value) {
+        return props.labelAdd
+    }
+    return props.labelReplace
+})
+
+const dropAreaActionIcon = computed(() => {
+    if (files.value.length === 0 || isMultiple.value) {
+        return props.iconAdd
+    }
+    return props.iconReplace
+})
+
+function onSortEnd({ newIndex }: { newIndex: number | null }) {
+    if (newIndex !== null) {
+        selectedFileIndex.value = newIndex
+    }
+}
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvInputFile',
+}
+</script>
+
+<template>
+    <div :class="bemCssClasses">
+        <label v-if="label" :for="hasId">
+            {{ label }}
+        </label>
+        <div
+            v-if="hasDropArea"
+            class="vv-input-file__drop-area"
+            @dragenter.prevent.stop="onDragenter"
+            @dragleave.prevent.stop="onDragleave"
+            @drop.prevent.stop="onDrop"
+            @dragover.prevent.stop
+            @click.stop="onClickDropArea"
+        >
+            <slot name="drop-area">
+                <picture class="vv-input-file__preview">
+                    <img
+                        v-if="previewSrc"
+                        :src="previewSrc"
+                        :alt="files[selectedFileIndex].name"
+                    >
+                </picture>
+                <VvButton
+                    v-if="!readonly"
+                    modifiers="action"
+                    :label="!previewSrc ? dropdAreaActionLabel : undefined"
+                    :title="previewSrc ? dropdAreaActionLabel : undefined"
+                    :disabled="disabled"
+                    :class="{
+                        'vv-input-file__drop-area-action': previewSrc,
+                    }"
+                    :icon="dropAreaActionIcon"
+                    @click.stop="onClickDropArea"
+                />
+            </slot>
+        </div>
+        <div class="vv-input-file__wrapper">
+            <VvIcon v-if="hasIconBefore" v-bind="hasIconBefore" />
+            <input
+                :id="hasId"
+                ref="inputEl"
+                type="file"
+                :readonly="readonly"
+                :disabled="disabled"
+                :placeholder="placeholder"
+                :aria-describedby="hasHintLabelOrSlot ? hasHintId : undefined"
+                :aria-invalid="invalid"
+                :aria-errormessage="
+                    hasInvalidLabelOrSlot ? hasHintId : undefined
+                "
+                :multiple="isMultiple"
+                :accept="accept"
+                :capture="capture"
+                :name="name"
+                @change="onChange"
+            >
+            <progress
+                v-if="hasProgress"
+                class="vv-input-file__progress"
+                :value="progress"
+                max="100"
+            >
+                {{ progress }}%
+            </progress>
+            <VvIcon v-if="hasIconAfter" v-bind="hasIconAfter" />
+        </div>
+        <Sortable
+            v-model="files"
+            tag="ul"
+            class="vv-input-file__list"
+            item-key="name"
+            :move="() => sortable"
+            @end="onSortEnd"
+        >
+            <template #item="{ element: file, index }">
+                <li
+                    class="vv-input-file__item"
+                    :class="{
+                        'active':
+                            index === selectedFileIndex
+                            && hasDropArea
+                            && files.length > 1,
+                        'cursor-move': sortable,
+                    }"
+                    @click.stop="onClickSelectFile(index)"
+                >
+                    <button
+                        v-if="hasIconDownload"
+                        type="button"
+                        class="vv-input-file__item-action"
+                        :title="labelDownload"
+                        @click.stop="onClickDownloadFile(file)"
+                    >
+                        <VvIcon v-bind="hasIconDownload" />
+                    </button>
+                    <div class="vv-input-file__item-name">
+                        {{ file.name }}
+                    </div>
+                    <small class="vv-input-file__item-info">
+                        {{ formatBytes(file.size) }}
+                    </small>
+                    <button
+                        v-if="!readonly"
+                        type="button"
+                        class="vv-input-file__item-remove"
+                        :title="labelRemove"
+                        :disabled="disabled"
+                        @click.stop="onClickRemoveFile(index)"
+                    />
+                </li>
+            </template>
+        </Sortable>
+        <HintSlot :id="hasHintId" class="vv-input-file__hint">
+            <template v-if="$slots.hint" #hint>
+                <slot name="hint" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.loading" #loading>
+                <slot name="loading" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.valid" #valid>
+                <slot name="valid" v-bind="hintSlotScope" />
+            </template>
+            <template v-if="$slots.invalid" #invalid>
+                <slot name="invalid" v-bind="hintSlotScope" />
+            </template>
+        </HintSlot>
+    </div>
+</template>