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

package/src/components/VvTextarea/VvTextarea.vue

@@ -1,225 +1,224 @@
-<script lang="ts">
-	export default {
-		name: 'VvTextarea',
-	}
+<script setup lang="ts">
+import type { TextareaHTMLAttributes } from 'vue'
+import HintSlotFactory from '../common/HintSlot'
+import VvIcon from '../VvIcon/VvIcon.vue'
+import { VvTextareaProps, VvTextareaEvents } from '.'
+
+// props, emit and slots
+const props = defineProps(VvTextareaProps)
+
+const emit = defineEmits(VvTextareaEvents)
+
+const slots = useSlots()
+
+// props merged with volver defaults (now only for labels)
+const propsDefaults = useDefaults<typeof VvTextareaProps>(
+    'VvTextarea',
+    VvTextareaProps,
+    props,
+)
+
+// template refs
+const textarea = ref()
+
+// data
+const {
+    id,
+    icon,
+    iconPosition,
+    label,
+    modelValue,
+    count,
+    valid,
+    invalid,
+    loading,
+    modifiers,
+    debounce,
+    minlength,
+    maxlength,
+} = toRefs(props)
+const hasId = useUniqueId(id)
+const hasHintId = computed(() => `${hasId.value}-hint`)
+// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
+const hasPlaceholder = computed(() =>
+    props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
+)
+
+// debounce
+const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
+
+// icons
+const { hasIconBefore, hasIconAfter } = useComponentIcon(icon, iconPosition)
+
+// focus
+const { focused } = useComponentFocus(textarea, emit)
+
+// visibility
+const isVisible = useElementVisibility(textarea)
+watch(isVisible, (newValue) => {
+    if (newValue && props.autofocus) {
+        focused.value = true
+    }
+})
+
+// count
+const { formatted: countFormatted } = useTextCount(localModelValue, {
+    mode: count?.value,
+    upperLimit: Number(maxlength?.value),
+    lowerLimit: Number(minlength?.value),
+})
+
+// tabindex
+const isClickable = computed(() => !props.disabled && !props.readonly)
+const hasTabindex = computed(() =>
+    isClickable.value ? props.tabindex : -1,
+)
+
+// dirty
+const isDirty = computed(() => !isEmpty(modelValue))
+
+// invalid
+const isInvalid = computed(() => {
+    if (props.invalid === true) {
+        return true
+    }
+    if (props.valid === true) {
+        return false
+    }
+    return undefined
+})
+
+// hint
+const {
+    HintSlot,
+    hasHintLabelOrSlot,
+    hasInvalidLabelOrSlot,
+    hintSlotScope,
+} = HintSlotFactory(propsDefaults, slots)
+
+// styles
+const bemCssClasses = useModifiers(
+    'vv-textarea',
+    modifiers,
+    computed(() => ({
+        'valid': valid.value,
+        'invalid': invalid.value,
+        'loading': loading.value,
+        'disabled': props.disabled,
+        'readonly': props.readonly,
+        'icon-before': hasIconBefore.value !== undefined,
+        'icon-after': hasIconAfter.value !== undefined,
+        'floating': props.floating && !isEmpty(props.label),
+        'dirty': isDirty.value,
+        'focus': focused.value,
+        'resizable': props.resizable,
+    })),
+)
+
+// attrs
+const hasAttrs = computed(
+    () =>
+        ({
+            'name': props.name,
+            'placeholder': hasPlaceholder.value,
+            'tabindex': hasTabindex.value,
+            'disabled': props.disabled,
+            'readonly': props.readonly,
+            'required': props.required,
+            'autocomplete': props.autocomplete,
+            'minlength': props.minlength,
+            'maxlength': props.maxlength,
+            'cols': props.cols,
+            'rows': props.rows,
+            'wrap': props.wrap,
+            'spellcheck': props.spellcheck,
+            'aria-invalid': isInvalid.value,
+            'aria-describedby': hasHintLabelOrSlot.value
+                ? hasHintId.value
+                : undefined,
+            'aria-errormessage': hasInvalidLabelOrSlot.value
+                ? hasHintId.value
+                : undefined,
+        }) as TextareaHTMLAttributes,
+)
+
+// slots props
+const slotProps = computed(() => ({
+    valid: props.valid,
+    invalid: props.invalid,
+    modelValue: props.modelValue,
+    hintLabel: props.hintLabel,
+    maxlength: props.maxlength,
+    minlength: props.minlength,
+    clear: onClear,
+}))
+
+// methods
+function onClear() {
+    localModelValue.value = undefined
+}
 </script>
 
-<script setup lang="ts">
-	import type { TextareaHTMLAttributes } from 'vue'
-	import HintSlotFactory from '../common/HintSlot'
-	import VvIcon from '../VvIcon/VvIcon.vue'
-	import { VvTextareaProps, VvTextareaEvents } from '.'
-
-	// props, emit and slots
-	const props = defineProps(VvTextareaProps)
-	const emit = defineEmits(VvTextareaEvents)
-	const slots = useSlots()
-
-	// props merged with volver defaults (now only for labels)
-	const propsDefaults = useDefaults<typeof VvTextareaProps>(
-		'VvTextarea',
-		VvTextareaProps,
-		props,
-	)
-
-	// template refs
-	const textarea = ref()
-
-	// data
-	const {
-		id,
-		icon,
-		iconPosition,
-		label,
-		modelValue,
-		count,
-		valid,
-		invalid,
-		loading,
-		modifiers,
-		debounce,
-		minlength,
-		maxlength,
-	} = toRefs(props)
-	const hasId = useUniqueId(id)
-	const hasHintId = computed(() => `${hasId.value}-hint`)
-	// BUG - https://www.samanthaming.com/tidbits/88-css-placeholder-shown/
-	const hasPlaceholder = computed(() =>
-		props.floating && isEmpty(props.placeholder) ? ' ' : props.placeholder,
-	)
-
-	// debounce
-	const localModelValue = useDebouncedInput(modelValue, emit, debounce?.value)
-
-	// icons
-	const { hasIcon, hasIconBefore, hasIconAfter } = useComponentIcon(
-		icon,
-		iconPosition,
-	)
-
-	// focus
-	const { focused } = useComponentFocus(textarea, emit)
-
-	// visibility
-	const isVisible = useElementVisibility(textarea)
-	watch(isVisible, (newValue) => {
-		if (newValue && props.autofocus) {
-			focused.value = true
-		}
-	})
-
-	// count
-	const { formatted: countFormatted } = useTextCount(localModelValue, {
-		mode: count?.value,
-		upperLimit: Number(maxlength?.value),
-		lowerLimit: Number(minlength?.value),
-	})
-
-	// tabindex
-	const isClickable = computed(() => !props.disabled && !props.readonly)
-	const hasTabindex = computed(() =>
-		isClickable.value ? props.tabindex : -1,
-	)
-
-	// dirty
-	const isDirty = computed(() => !isEmpty(modelValue))
-
-	// invalid
-	const isInvalid = computed(() => {
-		if (props.invalid === true) {
-			return true
-		}
-		if (props.valid === true) {
-			return false
-		}
-		return undefined
-	})
-
-	// hint
-	const {
-		HintSlot,
-		hasHintLabelOrSlot,
-		hasInvalidLabelOrSlot,
-		hintSlotScope,
-	} = HintSlotFactory(propsDefaults, slots)
-
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-textarea',
-		modifiers,
-		computed(() => ({
-			valid: valid.value,
-			invalid: invalid.value,
-			loading: loading.value,
-			disabled: props.disabled,
-			readonly: props.readonly,
-			'icon-before': hasIconBefore.value,
-			'icon-after': hasIconAfter.value,
-			floating: props.floating && !isEmpty(props.label),
-			dirty: isDirty.value,
-			focused: focused.value,
-			resizable: props.resizable,
-		})),
-	)
-
-	// attrs
-	const hasAttrs = computed(
-		() =>
-			({
-				name: props.name,
-				placeholder: hasPlaceholder.value,
-				tabindex: hasTabindex.value,
-				disabled: props.disabled,
-				readonly: props.readonly,
-				required: props.required,
-				autocomplete: props.autocomplete,
-				minlength: props.minlength,
-				maxlength: props.maxlength,
-				cols: props.cols,
-				rows: props.rows,
-				wrap: props.wrap,
-				spellcheck: props.spellcheck,
-				'aria-invalid': isInvalid.value,
-				'aria-describedby': hasHintLabelOrSlot.value
-					? hasHintId.value
-					: undefined,
-				'aria-errormessage': hasInvalidLabelOrSlot.value
-					? hasHintId.value
-					: undefined,
-			}) as TextareaHTMLAttributes,
-	)
-
-	// slots props
-	const slotProps = computed(() => ({
-		valid: props.valid,
-		invalid: props.invalid,
-		modelValue: props.modelValue,
-		hintLabel: props.hintLabel,
-		maxlength: props.maxlength,
-		minlength: props.minlength,
-		clear: onClear,
-	}))
-
-	// methods
-	const onClear = () => {
-		localModelValue.value = undefined
-	}
+<script lang="ts">
+export default {
+    name: 'VvTextarea',
+}
 </script>
 
 <template>
-	<div :class="bemCssClasses">
-		<label v-if="label" :for="hasId" class="vv-textarea__label">
-			{{ label }}
-		</label>
-		<div class="vv-textarea__wrapper">
-			<!-- @slot Slot to replace icon before textarea -->
-			<div v-if="$slots.before" class="vv-textarea__input-before">
-				<!-- @slot Slot before input -->
-				<slot name="before" v-bind="slotProps" />
-			</div>
-			<div class="vv-textarea__inner">
-				<VvIcon
-					v-if="hasIconBefore"
-					class="vv-textarea__icon"
-					v-bind="hasIcon"
-				/>
-				<textarea
-					:id="hasId"
-					ref="textarea"
-					v-model="localModelValue"
-					v-bind="hasAttrs"
-					@keyup="emit('keyup', $event)"
-				/>
-				<VvIcon
-					v-if="hasIconAfter"
-					class="vv-textarea__icon vv-textarea__icon-after"
-					v-bind="hasIcon"
-				/>
-			</div>
-			<div v-if="$slots.after" class="vv-textarea__input-after">
-				<!-- @slot Slot after input -->
-				<slot name="after" v-bind="slotProps" />
-			</div>
-			<span v-if="count" class="vv-textarea__limit">
-				<!-- @slot Slot to replace count -->
-				<slot name="count" v-bind="slotProps">
-					{{ countFormatted }}
-				</slot>
-			</span>
-		</div>
-		<HintSlot :id="hasHintId" class="vv-textarea__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>
+    <div :class="bemCssClasses">
+        <label v-if="label" :for="hasId" class="vv-textarea__label">
+            {{ label }}
+        </label>
+        <div class="vv-textarea__wrapper">
+            <!-- @slot Slot to replace icon before textarea -->
+            <div v-if="$slots.before" class="vv-textarea__input-before">
+                <!-- @slot Slot before input -->
+                <slot name="before" v-bind="slotProps" />
+            </div>
+            <div class="vv-textarea__inner">
+                <VvIcon
+                    v-if="hasIconBefore"
+                    v-bind="hasIconBefore"
+                    class="vv-textarea__icon"
+                />
+                <textarea
+                    :id="hasId"
+                    ref="textarea"
+                    v-model="localModelValue"
+                    v-bind="hasAttrs"
+                    @keyup="emit('keyup', $event)"
+                />
+                <VvIcon
+                    v-if="hasIconAfter"
+                    v-bind="hasIconAfter"
+                    class="vv-textarea__icon vv-textarea__icon-after"
+                />
+            </div>
+            <div v-if="$slots.after" class="vv-textarea__input-after">
+                <!-- @slot Slot after input -->
+                <slot name="after" v-bind="slotProps" />
+            </div>
+            <span v-if="count" class="vv-textarea__limit">
+                <!-- @slot Slot to replace count -->
+                <slot name="count" v-bind="slotProps">
+                    {{ countFormatted }}
+                </slot>
+            </span>
+        </div>
+        <HintSlot :id="hasHintId" class="vv-textarea__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>

package/src/components/VvTextarea/index.ts

@@ -2,49 +2,49 @@ import type { ExtractPropTypes } from 'vue'
 import { InputTextareaProps } from '../../props'
 
 export const WRAP = {
-	hard: 'hard',
-	soft: 'soft',
+    hard: 'hard',
+    soft: 'soft',
 }
 
 export const SPELLCHECK = {
-	true: true,
-	false: false,
-	default: 'default',
+    true: true,
+    false: false,
+    default: 'default',
 }
 
 export const VvTextareaEvents = ['update:modelValue', 'focus', 'blur', 'keyup']
 
 export const VvTextareaProps = {
-	...InputTextareaProps,
-	/**
-	 * Textarea value
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
-	 */
-	modelValue: String,
-	/**
-	 * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
-	 */
-	cols: { type: [String, Number], default: 20 },
-	/**
-	 * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
-	 */
-	rows: { type: [String, Number], default: 2 },
-	/**
-	 * Indicates how the control should wrap the value for form submission.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-	 */
-	wrap: { type: String, default: WRAP.soft },
-	/**
-	 * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
-	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
-	 */
-	spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
-	/**
-	 * If true, the textarea will be resizable
-	 */
-	resizable: Boolean,
+    ...InputTextareaProps,
+    /**
+     * Textarea value
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#value
+     */
+    modelValue: String,
+    /**
+     * The visible width of the text control, in average character widths. If it is specified, it must be a positive integer. If it is not specified, the default value is 20.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#cols
+     */
+    cols: { type: [String, Number], default: 20 },
+    /**
+     * The number of visible text lines for the control. If it is specified, it must be a positive integer. If it is not specified, the default value is 2.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#rows
+     */
+    rows: { type: [String, Number], default: 2 },
+    /**
+     * Indicates how the control should wrap the value for form submission.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+     */
+    wrap: { type: String, default: WRAP.soft },
+    /**
+     * Specifies whether the <textarea> is subject to spell checking by the underlying browser/OS.
+     * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/textarea#wrap
+     */
+    spellcheck: { type: [Boolean, String], default: SPELLCHECK.default },
+    /**
+     * If true, the textarea will be resizable
+     */
+    resizable: Boolean,
 }
 
 export type VvTextareaPropsTypes = ExtractPropTypes<typeof VvTextareaProps>

package/src/components/VvTooltip/VvTooltip.vue

@@ -1,23 +1,29 @@
 <script setup lang="ts">
-	import { VvTooltipProps } from '.'
+import { VvTooltipProps } from '.'
 
-	const props = defineProps(VvTooltipProps)
-	const { modifiers } = toRefs(props)
+const props = defineProps(VvTooltipProps)
+const { modifiers } = toRefs(props)
 
-	// styles
-	const bemCssClasses = useModifiers(
-		'vv-tooltip',
-		modifiers,
-		computed(() => ({
-			[props.position]: true,
-		})),
-	)
+// styles
+const bemCssClasses = useModifiers(
+    'vv-tooltip',
+    modifiers,
+    computed(() => ({
+        [props.position]: true,
+    })),
+)
+</script>
+
+<script lang="ts">
+export default {
+    name: 'VvTooltip',
+}
 </script>
 
 <template>
-	<span :class="bemCssClasses" role="tooltip" inert>
-		<slot>
-			{{ value }}
-		</slot>
-	</span>
+    <span :class="bemCssClasses" role="tooltip" inert>
+        <slot>
+            {{ value }}
+        </slot>
+    </span>
 </template>

package/src/components/VvTooltip/index.ts

@@ -3,16 +3,16 @@ import { Side } from '../../constants'
 import { ModifiersProps } from '../../props'
 
 export const VvTooltipProps = {
-	...ModifiersProps,
-	/**
-	 * Define the tooltip position
-	 * @default Side.bottom
-	 */
-	position: {
-		type: String as PropType<`${Side}`>,
-		default: Side.bottom,
-	},
-	value: {
-		type: String,
-	},
+    ...ModifiersProps,
+    /**
+     * Define the tooltip position
+     * @default Side.bottom
+     */
+    position: {
+        type: String as PropType<`${Side}`>,
+        default: Side.bottom,
+    },
+    value: {
+        type: String,
+    },
 }