@volverjs/ui-vue 0.0.10-beta.4 → 0.0.10-beta.40

package/src/components/VvInputFile/index.ts

@@ -0,0 +1,141 @@
+import {
+    IdNameProps,
+    ModifiersProps,
+    ValidProps,
+    InvalidProps,
+    HintProps,
+    LabelProps,
+    LoadingProps,
+    ReadonlyProps,
+    IconProps,
+} from '../../props'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
+import type { UploadedFile } from '@/types'
+
+export type VvInputFileEvents = {
+    'remove': [
+        File | UploadedFile,
+    ]
+    'download': [
+        File | UploadedFile,
+    ]
+    'update:modelValue': [
+		File | UploadedFile | (File | UploadedFile)[] | undefined,
+    ]
+}
+
+export const VvInputFileProps = {
+    ...IdNameProps,
+    ...ModifiersProps,
+    ...ValidProps,
+    ...InvalidProps,
+    ...HintProps,
+    ...LabelProps,
+    ...LoadingProps,
+    ...ReadonlyProps,
+    ...IconProps,
+    /**
+     * Input value
+     */
+    modelValue: {
+        type: Object as PropType<File | UploadedFile | (File | UploadedFile)[]>,
+    },
+    /**
+     * Whether to show progress bar
+     */
+    progress: { type: [Number, String], default: undefined },
+    /**
+     * Input
+     * Text that appears in the form control when it has no value set
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#placeholder
+     */
+    placeholder: { type: String, default: undefined },
+    /**
+     * File types to accept
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+     */
+    accept: { type: String, default: '*' },
+    /**
+     * Whether to allow multiple values
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#multiple
+     */
+    multiple: { type: Boolean, default: false },
+    /**
+     * Front or rear camera
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/capture
+     */
+    capture: {
+        type: String as PropType<'user' | 'environment'>,
+        default: undefined,
+        validation: (value?: string) => {
+            if (value === undefined) {
+                return true
+            }
+            return ['user', 'environment'].includes(value)
+        },
+    },
+    /**
+     * Max number of files
+     */
+    max: { type: [Number, String], default: undefined },
+    /**
+     * Show drop area
+     */
+    dropArea: { type: Boolean, default: false },
+    /**
+     * Enable sorting
+     */
+    sortable: { type: Boolean, default: false },
+    /**
+     * Label for add button
+     */
+    labelAdd: {
+        type: String,
+        default: 'Add file',
+    },
+    /**
+     * VvIcon name for add button
+     * @see VVIcon
+     */
+    iconAdd: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.add,
+    },
+    /**
+     * Label for replace button
+     */
+    labelReplace: {
+        type: String,
+        default: 'Replace file',
+    },
+    /**
+     * VvIcon name for replace button
+     * @see VVIcon
+     */
+    iconReplace: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.edit,
+    },
+    /**
+     * Label for download button
+     */
+    labelDownload: {
+        type: String,
+        default: 'Downlaod file',
+    },
+    /**
+     * VvIcon name for download button
+     * @see VVIcon
+     */
+    iconDownload: {
+        type: [String, Object] as PropType<string | VvIconProps>,
+        default: ACTION_ICONS.download,
+    },
+    /**
+     * Label for remove button
+     */
+    labelRemove: {
+        type: String,
+        default: 'Remove file',
+    },
+}

package/src/components/VvInputText/VvInputClearAction.ts

@@ -1,52 +1,56 @@
+import type { VvIconProps } from '../VvIcon'
 import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
-	components: {
-		VvIcon,
-	},
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		label: {
-			type: String,
-			default: 'Clear',
-		},
-		icon: {
-			type: String,
-			default: 'close',
-		},
-	},
-	emits: ['clear'],
-	setup(props, { emit }) {
-		function onClick(e: Event) {
-			e?.stopPropagation()
-			if (!props.disabled) {
-				emit('clear')
-			}
-		}
+    components: {
+        VvIcon,
+    },
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        label: {
+            type: String,
+            default: 'Clear',
+        },
+        icon: {
+            type: [String, Object] as PropType<string | VvIconProps>,
+            default: 'close',
+        },
+    },
+    emits: ['clear'],
+    setup(props, { emit }) {
+        const { hasIcon } = useComponentIcon(computed(() => props.icon))
+        function onClick(e: Event) {
+            e?.stopPropagation()
+            if (!props.disabled) {
+                emit('clear')
+            }
+        }
+        return {
+            hasIcon,
+            onClick,
+        }
+    },
+    render() {
+        const icon = this.hasIcon
+            ? h(VvIcon, {
+                ...this.hasIcon,
+                class: 'vv-input-text__icon',
+            })
+            : undefined
 
-		return {
-			onClick,
-		}
-	},
-	render() {
-		const icon = h(VvIcon, {
-			name: this.icon,
-			class: 'vv-input-text__icon',
-		})
-
-		return h(
-			'button',
-			{
-				disabled: this.disabled,
-				class: 'vv-input-text__action',
-				ariaLabel: this.label,
-				type: 'button',
-				onClick: this.onClick,
-			},
-			icon,
-		)
-	},
+        return h(
+            'button',
+            {
+                disabled: this.disabled,
+                class: 'vv-input-text__action',
+                ariaLabel: this.label,
+                type: 'button',
+                onClick: this.onClick,
+            },
+            icon,
+        )
+    },
 })

package/src/components/VvInputText/VvInputPasswordAction.ts

@@ -1,68 +1,72 @@
-import { TYPES_ICON } from '../VvInputText'
 import VvIcon from '../VvIcon/VvIcon.vue'
+import { type VvIconProps, ACTION_ICONS } from '../VvIcon'
 
 export default defineComponent({
-	components: {
-		VvIcon,
-	},
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		labelShow: {
-			type: String,
-			default: 'Show password',
-		},
-		labelHide: {
-			type: String,
-			default: 'Hide password',
-		},
-		iconShow: {
-			type: String,
-			default: TYPES_ICON.PASSWORD_SHOW,
-		},
-		iconHide: {
-			type: String,
-			default: TYPES_ICON.PASSWORD_HIDE,
-		},
-	},
-	emits: ['toggle-password'],
-	setup(props, { emit }) {
-		const active = ref(false)
-		const activeIcon = computed(() =>
-			active.value ? props.iconHide : props.iconShow,
-		)
+    components: {
+        VvIcon,
+    },
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        labelShow: {
+            type: String,
+            default: 'Show password',
+        },
+        labelHide: {
+            type: String,
+            default: 'Hide password',
+        },
+        iconShow: {
+            type: [String, Object] as PropType<string | VvIconProps>,
+            default: ACTION_ICONS.showPassword,
+        },
+        iconHide: {
+            type: [String, Object] as PropType<string | VvIconProps>,
+            default: ACTION_ICONS.hidePassword,
+        },
+    },
+    emits: ['toggle-password'],
+    setup(props, { emit }) {
+        const active = ref(false)
+        const activeIcon = computed(() =>
+            active.value ? props.iconHide : props.iconShow,
+        )
+        const { hasIcon } = useComponentIcon(activeIcon)
 
-		function onClick(e: Event) {
-			e?.stopPropagation()
-			if (!props.disabled) {
-				active.value = !active.value
-				emit('toggle-password', active.value)
-			}
-		}
+        function onClick(e: Event) {
+            e?.stopPropagation()
+            if (!props.disabled) {
+                active.value = !active.value
+                emit('toggle-password', active.value)
+            }
+        }
 
-		return {
-			active,
-			activeIcon,
-			onClick,
-		}
-	},
-	render() {
-		const icon = h(VvIcon, {
-			name: this.activeIcon,
-			class: 'vv-input-text__icon',
-		})
-		return h(
-			'button',
-			{
-				disabled: this.disabled,
-				class: 'vv-input-text__action',
-				ariaLabel: this.active ? this.labelHide : this.labelShow,
-				type: 'button',
-				onClick: this.onClick,
-			},
-			icon,
-		)
-	},
+        return {
+            active,
+            activeIcon,
+            hasIcon,
+            onClick,
+        }
+    },
+    render() {
+        const icon = this.hasIcon
+            ? h(VvIcon, {
+                ...this.hasIcon,
+                class: 'vv-input-text__icon',
+            })
+            : undefined
+        return h(
+            'button',
+            {
+                disabled: this.disabled,
+                class: 'vv-input-text__action',
+                ariaLabel: this.active ? this.labelHide : this.labelShow,
+                type: 'button',
+                onClick: this.onClick,
+            },
+            icon,
+        )
+    },
 })

package/src/components/VvInputText/VvInputStepAction.ts

@@ -1,49 +1,49 @@
 import VvIcon from '../VvIcon/VvIcon.vue'
 
 export default defineComponent({
-	components: {
-		VvIcon,
-	},
-	props: {
-		disabled: {
-			type: Boolean,
-			default: false,
-		},
-		label: {
-			type: String,
-		},
-		mode: {
-			type: String,
-			validator: (v: string) => ['up', 'down'].includes(v),
-			default: 'up',
-		},
-	},
-	emits: ['step-up', 'step-down'],
-	setup(props, { emit }) {
-		const isUp = computed(() => props.mode === 'up')
+    components: {
+        VvIcon,
+    },
+    props: {
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+        label: {
+            type: String,
+        },
+        mode: {
+            type: String,
+            validator: (v: string) => ['up', 'down'].includes(v),
+            default: 'up',
+        },
+    },
+    emits: ['step-up', 'step-down'],
+    setup(props, { emit }) {
+        const isUp = computed(() => props.mode === 'up')
 
-		const onClick = (e: Event) => {
-			e?.stopPropagation()
-			if (!props.disabled) {
-				emit(isUp.value ? 'step-up' : 'step-down')
-			}
-		}
+        const onClick = (e: Event) => {
+            e?.stopPropagation()
+            if (!props.disabled) {
+                emit(isUp.value ? 'step-up' : 'step-down')
+            }
+        }
 
-		return {
-			isUp,
-			onClick,
-		}
-	},
-	render() {
-		return h('button', {
-			class: [
-				'vv-input-text__action vv-input-text__action-chevron',
-				this.isUp && 'vv-input-text__action-chevron-up',
-			],
-			disabled: this.disabled,
-			ariaLabel: this.label,
-			type: 'button',
-			onClick: this.onClick,
-		})
-	},
+        return {
+            isUp,
+            onClick,
+        }
+    },
+    render() {
+        return h('button', {
+            class: [
+                'vv-input-text__action vv-input-text__action-chevron',
+                this.isUp && 'vv-input-text__action-chevron-up',
+            ],
+            disabled: this.disabled,
+            ariaLabel: this.label,
+            type: 'button',
+            onClick: this.onClick,
+        })
+    },
 })