fiery-rabbit 0.0.1

package/src/components/radio-button/src/radio-button.vue

@@ -0,0 +1,144 @@
+<template>
+	<div
+		v-if="!radios?.length"
+		class="flex align-items-center"
+	>
+		<RadioButton
+			:ref="(el: any) => (radioButtonRef = el)"
+			v-model="radioButtonValue"
+			:value="value"
+			:name="name"
+			:disabled="formItemContext?.disabled ?? disabled"
+			:aria-describedby="`${formItemContext?.prop}-error`"
+			:input-id="inputId ?? formItemContext?.prop ?? name"
+			:input-style="inputStyle"
+			:input-class="inputClass"
+			:input-props="inputProps"
+			:variant="layoutContext?.inputStyle ?? variant"
+			:invalid="
+				formItemContext?.formItemValidate !== undefined && formItemContext?.formItemValidate !== null
+					? !formItemContext?.formItemValidate
+					: invalid
+			"
+			:aria-labelledby="ariaLabelledby"
+			:aria-label="ariaLabel"
+			:pt="pt"
+			:pt-options="ptOptions"
+			:unstyled="unstyled"
+			@change="(event: Event) => (handleChange(), emits('change', event))"
+			@focus="(event: Event) => emits('focus', event)"
+			@blur="(event: Event) => emits('blur', event)"
+		/>
+		<label
+			:for="inputId ?? formItemContext?.prop ?? name"
+			class="ml-2"
+			>{{ label }}</label
+		>
+	</div>
+	<div
+		v-else
+		class="rabbit-radios flex flex-wrap gap-3"
+	>
+		<div
+			v-for="(radio, index) in radios"
+			:key="radio.value"
+			class="flex align-items-center"
+		>
+			<RadioButton
+				:ref="(el: any)=>(radiosRef![index]=el)"
+				v-model="radioButtonValue"
+				:value="radio.value"
+				:name="radio.name"
+				:disabled="formItemContext?.disabled ?? radio?.disabled"
+				:aria-describedby="`${formItemContext?.prop}-error`"
+				:variant="layoutContext?.inputStyle ?? radio.variant"
+				:input-id="radio.inputId ?? `${formItemContext?.prop ?? radio.name}-${index}`"
+				:input-style="radio.inputStyle"
+				:input-class="radio.inputClass"
+				:input-props="radio.inputProps"
+				:invalid="
+					formItemContext?.formItemValidate !== undefined && formItemContext?.formItemValidate !== null
+						? !formItemContext?.formItemValidate
+						: radio.invalid
+				"
+				:aria-labelledby="radio.ariaLabelledby"
+				:aria-label="radio.ariaLabel"
+				:pt="radio.pt"
+				:pt-options="radio.ptOptions"
+				:unstyled="radio.unstyled"
+				@change="(event: Event) => (handleChange(), emits('change', event))"
+				@focus="(event: Event) => emits('focus', event)"
+				@blur="(event: Event) => emits('blur', event)"
+			/>
+			<label
+				:for="radio.inputId ?? `${formItemContext?.prop ?? radio.name}-${index}`"
+				class="ml-2"
+				>{{ radio.label }}</label
+			>
+		</div>
+	</div>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, InputHTMLAttributes } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import RadioButton, { RadioButtonPassThroughOptions } from 'primevue/radiobutton';
+
+defineOptions({ name: 'RabbitRadioButton' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	invalid: boolean;
+	modelValue: any;
+	value: any;
+	label: string;
+	name: string;
+	disabled: boolean;
+	variant: 'filled' | 'outlined';
+	inputId: string;
+	inputStyle: object;
+	inputClass: string | object;
+	inputProps: InputHTMLAttributes;
+	ariaLabelledby: string;
+	ariaLabel: string;
+	pt: PassThrough<RadioButtonPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+	radios: IProps[];
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	invalid: false,
+	disabled: false,
+	variant: 'outlined',
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:modelValue', params: any): void;
+	(e: 'change', event?: Event): void;
+	(e: 'focus', event?: Event): void;
+	(e: 'blur', value?: Event): void;
+}>();
+
+const layoutContext: any = inject('layout', undefined);
+const radioButtonRef = ref();
+const radiosRef = ref<any[]>(new Array(props.radios?.length ?? 0));
+const formItemContext: any = inject('rabbitFormItem', undefined);
+const radioButtonValue = ref<any>(props.modelValue);
+
+watch(
+	() => props.modelValue,
+	(val) => (radioButtonValue.value = val),
+	{ deep: true },
+);
+
+const handleChange = () => emits('update:modelValue', radioButtonValue.value);
+
+defineExpose({ radioButton: radioButtonRef, radios: radiosRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/rating/src/rating.vue

@@ -0,0 +1,108 @@
+<template>
+	<Rating
+		:ref="(el) => (ratingRef = el)"
+		v-model="value"
+		:name="name"
+		:disabled="formItemContext?.disabled ?? disabled"
+		:readonly="readonly"
+		:stars="stars"
+		:cancel="cancel"
+		:aria-describedby="`${formItemContext?.prop}-error`"
+		:class="
+			inputClass ??
+			(!formItemContext?.formItemValidate ? { 'p-invalid': formItemContext?.currentValidateError?.message } : '')
+		"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@change="(event: RatingChangeEvent) => (handleChange(), emits('change', event))"
+		@focus="(event: Event) => emits('focus', event)"
+		@blur="(event: Event) => emits('blur', event)"
+	>
+		<template
+			v-if="!!useSlots().cancelicon"
+			#cancelicon="{ class: canceliconclass }"
+		>
+			<slot
+				name="cancelicon"
+				:class="canceliconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().onicon"
+			#onicon="{ value, class: oniconclass }"
+		>
+			<slot
+				name="onicon"
+				:value="value"
+				:class="oniconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().officon"
+			#officon="{ value, class: officonclass }"
+		>
+			<slot
+				name="officon"
+				:value="value"
+				:class="officonclass"
+			/>
+		</template>
+	</Rating>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Rating, { RatingChangeEvent, RatingPassThroughOptions } from 'primevue/rating';
+
+defineOptions({ name: 'RabbitRating' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	modelValue: number;
+	name: string;
+	disabled: boolean;
+	readonly: boolean;
+	stars: number;
+	cancel: boolean;
+	inputClass: string | object;
+	pt: PassThrough<RatingPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	disabled: false,
+	readonly: false,
+	stars: 5,
+	cancel: true,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:modelValue', params: number | undefined): void;
+	(e: 'change', event?: RatingChangeEvent): void;
+	(e: 'focus', event?: Event): void;
+	(e: 'blur', event?: Event): void;
+}>();
+
+const ratingRef = ref();
+const formItemContext: any = inject('rabbitFormItem', undefined);
+const value = ref<number | undefined>(props.modelValue);
+
+watch(
+	() => props.modelValue,
+	(val) => (value.value = val),
+	{ deep: true },
+);
+
+const handleChange = () => emits('update:modelValue', value.value);
+
+defineExpose({ rating: ratingRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/scroll-panel/src/scroll-panel.vue

@@ -0,0 +1,43 @@
+<template>
+	<ScrollPanel
+		:ref="(el) => (scrollPanelRef = el)"
+		:step="step"
+		:style="style"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+	>
+		<slot />
+	</ScrollPanel>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import ScrollPanel, { ScrollPanelPassThroughOptions } from 'primevue/scrollpanel';
+
+defineOptions({ name: 'RabbitScrollPanel' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	step: number;
+	style: string | object;
+	pt: PassThrough<ScrollPanelPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	step: 5,
+	unstyled: false,
+});
+
+const scrollPanelRef = ref();
+
+defineExpose({ scrollPanel: scrollPanelRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/scroll-top/src/scroll-top.vue

@@ -0,0 +1,52 @@
+<template>
+	<ScrollTop
+		:ref="(el) => (scrollTopRef = el)"
+		:target="target"
+		:threshold="threshold"
+		:behavior="behavior"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+	>
+		<template
+			v-if="!!useSlots().icon"
+			#icon
+		>
+			<slot name="icon" />
+		</template>
+	</ScrollTop>
+</template>
+
+<script setup lang="ts">
+import { ref, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import ScrollTop, { ScrollTopPassThroughOptions } from 'primevue/scrolltop';
+
+defineOptions({ name: 'RabbitScrollTop' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	target: 'window' | 'parent';
+	threshold: number;
+	behavior: string;
+	pt: PassThrough<ScrollTopPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	target: 'window',
+	threshold: 400,
+	behavior: 'smooth',
+	unstyled: false,
+});
+
+const scrollTopRef = ref();
+
+defineExpose({ scrollTop: scrollTopRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/select-button/src/select-button.vue

@@ -0,0 +1,108 @@
+<template>
+	<SelectButton
+		:ref="(el) => (selectButtonRef = el)"
+		v-model="value"
+		:options="options"
+		:option-label="optionLabel"
+		:option-value="optionValue"
+		:option-disabled="optionDisabled"
+		:multiple="multiple"
+		:disabled="formItemContext?.disabled ?? disabled"
+		:data-key="dataKey"
+		:allow-empty="allowEmpty"
+		:aria-describedby="`${formItemContext?.prop}-error`"
+		:class="inputClass"
+		:invalid="
+			formItemContext?.formItemValidate !== undefined && formItemContext?.formItemValidate !== null
+				? !formItemContext?.formItemValidate
+				: invalid
+		"
+		:aria-labelledby="ariaLabelledby"
+		:aria-label="ariaLabel"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@change="(event: SelectButtonChangeEvent) => (handleChange(), emits('change', event))"
+		@focus="(event: Event) => emits('focus', event)"
+		@blur="(event: Event) => emits('blur', event)"
+	>
+		<template
+			v-if="!!useSlots().option"
+			#option="{ option, index }"
+		>
+			<slot
+				name="option"
+				:option="option"
+				:index="index"
+			/>
+		</template>
+	</SelectButton>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import SelectButton, { SelectButtonChangeEvent, SelectButtonPassThroughOptions } from 'primevue/selectbutton';
+
+defineOptions({ name: 'RabbitSelectButton' });
+
+export declare type OptionLabelFunction = (item: any) => string;
+
+export declare type OptionValueFunction = (item: any) => any;
+
+export declare type OptionDisabledFunction = (item: any) => boolean;
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	invalid: boolean;
+	modelValue: any;
+	options: any[];
+	optionLabel: string | OptionLabelFunction;
+	optionValue: string | OptionValueFunction;
+	optionDisabled: string | OptionDisabledFunction;
+	multiple: boolean;
+	disabled: boolean;
+	dataKey: string;
+	allowEmpty: boolean;
+	inputClass: string | object;
+	ariaLabelledby: string;
+	ariaLabel: string;
+	pt: PassThrough<SelectButtonPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	invalid: false,
+	multiple: false,
+	disabled: false,
+	allowEmpty: true,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:modelValue', params: any): void;
+	(e: 'change', event?: SelectButtonChangeEvent): void;
+	(e: 'focus', event?: Event): void;
+	(e: 'blur', event?: Event): void;
+}>();
+
+const selectButtonRef = ref();
+const formItemContext: any = inject('rabbitFormItem', undefined);
+const value = ref<any>(props.modelValue);
+
+watch(
+	() => props.modelValue,
+	(val) => (value.value = val),
+	{ deep: true },
+);
+
+const handleChange = () => emits('update:modelValue', value.value);
+
+defineExpose({ selectButton: selectButtonRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/sidebar/src/sidebar.vue

@@ -0,0 +1,110 @@
+<template>
+	<Sidebar
+		:ref="(el) => (sidebarRef = el)"
+		v-model:visible="visibleValue"
+		:position="position"
+		:header="header"
+		:base-z-index="baseZIndex"
+		:auto-z-index="autoZIndex"
+		:dismissable="dismissable"
+		:show-close-icon="showCloseIcon"
+		:modal="modal"
+		:block-scroll="blockScroll"
+		:class="class"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@hide="() => emits('hide')"
+		@show="() => emits('show')"
+	>
+		<slot />
+		<template
+			v-if="!!useSlots().header"
+			#header="{ class: headerclass }"
+		>
+			<slot
+				name="header"
+				:class="headerclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().closeicon"
+			#closeicon="{ class: closeiconclass }"
+		>
+			<slot
+				name="closeicon"
+				:class="closeiconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().container"
+			#container="{ closeCallback }"
+		>
+			<slot
+				name="container"
+				:close-callback="closeCallback"
+			/>
+		</template>
+	</Sidebar>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Sidebar, { SidebarPassThroughOptions } from 'primevue/sidebar';
+
+defineOptions({ name: 'RabbitSidebar' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	visible: boolean;
+	position: 'left' | 'top' | 'bottom' | 'right' | 'full';
+	header: string;
+	baseZIndex: number;
+	autoZIndex: boolean;
+	dismissable: boolean;
+	showCloseIcon: boolean;
+	modal: boolean;
+	blockScroll: boolean;
+	pt: PassThrough<SidebarPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+	class: any;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	visible: false,
+	position: 'left',
+	baseZIndex: 0,
+	autoZIndex: true,
+	dismissable: true,
+	showCloseIcon: true,
+	modal: true,
+	blockScroll: false,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:visible', value?: boolean): void;
+	(e: 'hide'): void;
+	(e: 'show'): void;
+}>();
+
+const sidebarRef = ref();
+const visibleValue = ref<boolean | undefined>(props.visible);
+
+watch(
+	() => props.visible,
+	(val) => (visibleValue.value = val),
+	{ deep: true },
+);
+
+watch(visibleValue, (val) => emits('update:visible', val), { deep: true });
+
+defineExpose({ sidebar: sidebarRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>