fiery-rabbit 0.0.1

package/src/components/slider/src/slider.vue

@@ -0,0 +1,90 @@
+<template>
+	<Slider
+		:ref="(el) => (sliderRef = el)"
+		v-model="value"
+		:min="min"
+		:max="max"
+		:orientation="orientation"
+		:step="step"
+		:range="range"
+		:disabled="formItemContext?.disabled ?? disabled"
+		:tabindex="tabindex"
+		:aria-describedby="`${formItemContext?.prop}-error`"
+		:class="
+			inputClass ??
+			(formItemContext?.formItemValidate !== undefined &&
+			formItemContext?.formItemValidate !== null &&
+			!formItemContext?.formItemValidate
+				? { 'p-invalid': formItemContext?.currentValidateError?.message }
+				: '')
+		"
+		:aria-labelledby="ariaLabelledby"
+		:aria-label="ariaLabel"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@change="(changeValue: number) => (handleChange(), emits('change', changeValue))"
+		@slideend="(event: SliderSlideEndEvent) => emits('slideend', event)"
+	/>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Slider, { SliderSlideEndEvent, SliderPassThroughOptions } from 'primevue/slider';
+
+defineOptions({ name: 'RabbitSlider' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	modelValue: number | number[];
+	min: number;
+	max: number;
+	orientation: 'horizontal' | 'vertical';
+	step: number;
+	range: boolean;
+	disabled: boolean;
+	tabindex: number;
+	inputClass: string | object;
+	ariaLabelledby: string;
+	ariaLabel: string;
+	pt: PassThrough<SliderPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	min: 0,
+	max: 100,
+	orientation: 'horizontal',
+	step: 1,
+	range: false,
+	disabled: false,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:modelValue', params: number | number[] | undefined): void;
+	(e: 'change', value?: number): void;
+	(e: 'slideend', event?: SliderSlideEndEvent): void;
+}>();
+
+const sliderRef = ref();
+const formItemContext: any = inject('rabbitFormItem', undefined);
+const value = ref<number | number[] | undefined>(props.modelValue);
+
+watch(
+	() => props.modelValue,
+	(val) => (value.value = val),
+	{ deep: true },
+);
+
+const handleChange = () => emits('update:modelValue', value.value);
+
+defineExpose({ slider: sliderRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/speed-dial/src/speed-dial.vue

@@ -0,0 +1,124 @@
+<template>
+	<SpeedDial
+		:ref="(el) => (speedDialRef = el)"
+		:model="model"
+		:visible="visible"
+		:direction="direction"
+		:transition-delay="transitionDelay"
+		:type="type"
+		:radius="radius"
+		:mask="mask"
+		:disabled="disabled"
+		:hide-on-click-outside="hideOnClickOutside"
+		:button-class="buttonClass"
+		:mask-style="maskStyle"
+		:mask-class="maskClass"
+		:rotate-animation="rotateAnimation"
+		:class="class"
+		:style="style"
+		:tooltip-options="tooltipOptions"
+		:aria-labelledby="ariaLabelledby"
+		:aria-label="ariaLabel"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@focus="(event) => emits('focus', event)"
+		@blur="(event) => emits('blur', event)"
+		@click="(event) => emits('click', event)"
+		@show="() => emits('show')"
+		@hide="() => emits('hide')"
+	>
+		<template
+			v-if="!!useSlots().item"
+			#item="{ item, onClick }"
+		>
+			<slot
+				name="item"
+				:item="item"
+				:on-click="onClick"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().button"
+			#button="{ toggleCallback }"
+		>
+			<slot
+				name="button"
+				:toggle-callback="toggleCallback"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().icon"
+			#icon="{ visible }"
+		>
+			<slot
+				name="icon"
+				:visible="visible"
+			/>
+		</template>
+	</SpeedDial>
+</template>
+
+<script setup lang="ts">
+import { ref, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import SpeedDial, { SpeedDialTooltipOptions, SpeedDialPassThroughOptions } from 'primevue/speeddial';
+import { MenuItem } from 'primevue/menuitem';
+
+defineOptions({ name: 'RabbitSpeedDial' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	model: MenuItem[];
+	visible: boolean;
+	direction: 'left' | 'right' | 'up' | 'down' | 'up-left' | 'up-right' | 'down-left' | 'down-right';
+	transitionDelay: number;
+	type: 'linear' | 'circle' | 'semi-circle' | 'quarter-circle';
+	radius: number;
+	mask: boolean;
+	disabled: boolean;
+	hideOnClickOutside: boolean;
+	buttonClass: any;
+	maskStyle: any;
+	maskClass: string;
+	rotateAnimation: boolean;
+	class: any;
+	style: any;
+	tooltipOptions: SpeedDialTooltipOptions;
+	ariaLabelledby: string;
+	ariaLabel: string;
+	pt: PassThrough<SpeedDialPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	visible: false,
+	direction: 'up',
+	transitionDelay: 30,
+	type: 'linear',
+	radius: 0,
+	mask: false,
+	disabled: false,
+	hideOnClickOutside: true,
+	rotateAnimation: true,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'focus', event?: Event): void;
+	(e: 'blur', event?: Event): void;
+	(e: 'click', event?: Event): void;
+	(e: 'show'): void;
+	(e: 'hide'): void;
+}>();
+
+const speedDialRef = ref();
+
+defineExpose({ speedDial: speedDialRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

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

@@ -0,0 +1,135 @@
+<template>
+	<SplitButton
+		:ref="(el) => (splitButtonRef = el)"
+		:label="label"
+		:model="model"
+		:auto-z-index="autoZIndex"
+		:base-z-index="baseZIndex"
+		:append-to="appendTo"
+		:disabled="disabled"
+		:clas="class"
+		:style="style"
+		:button-props="buttonProps"
+		:menu-button-props="menuButtonProps"
+		:severity="severity"
+		:raised="raised"
+		:rounded="rounded"
+		:text="text"
+		:outlined="outlined"
+		:size="size"
+		:plain="plain"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@click="(event) => emits('click', event)"
+	>
+		<slot />
+		<template
+			v-if="!!useSlots().buttoncontent"
+			#buttoncontent
+		>
+			<slot name="buttoncontent" />
+		</template>
+		<template
+			v-if="!!useSlots().icon"
+			#icon="{ class: iconclass }"
+		>
+			<slot
+				name="icon"
+				:class="iconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().menubuttonicon"
+			#menubuttonicon="{ class: menubuttoniconclass }"
+		>
+			<slot
+				name="menubuttonicon"
+				:class="menubuttoniconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().menuitemicon"
+			#menuitemicon="{ item, class: menuitemiconclass }"
+		>
+			<slot
+				name="menuitemicon"
+				:item="item"
+				:class="menuitemiconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().item"
+			#item="{ item, label, props, hasSubmenu }"
+		>
+			<slot
+				name="item"
+				:item="item"
+				:label="label"
+				:props="props"
+				:has-submenu="hasSubmenu"
+			/>
+		</template>
+	</SplitButton>
+</template>
+
+<script setup lang="ts">
+import { ref, useSlots, ButtonHTMLAttributes } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import SplitButton, { SplitButtonPassThroughOptions } from 'primevue/splitbutton';
+import { MenuItem } from 'primevue/menuitem';
+
+defineOptions({ name: 'RabbitSplitButton' });
+
+export declare type HintedString<T extends string> = (string & {}) | T;
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	label: string;
+	model: MenuItem[];
+	autoZIndex: boolean;
+	baseZIndex: number;
+	appendTo: HTMLElement | HintedString<'body' | 'self'>;
+	disabled: boolean;
+	class: any;
+	style: any;
+	buttonProps: ButtonHTMLAttributes;
+	menuButtonProps: ButtonHTMLAttributes;
+	severity: HintedString<'success' | 'help' | 'secondary' | 'info' | 'warning' | 'danger' | 'contrast'>;
+	raised: boolean;
+	rounded: boolean;
+	text: boolean;
+	outlined: boolean;
+	size: 'small' | 'large';
+	plain: boolean;
+	pt: PassThrough<SplitButtonPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	autoZIndex: true,
+	baseZIndex: 0,
+	appendTo: 'body',
+	disabled: false,
+	raised: false,
+	rounded: false,
+	text: false,
+	outlined: false,
+	plain: false,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'click', event?: Event): void;
+}>();
+
+const splitButtonRef = ref();
+
+defineExpose({ splitButton: splitButtonRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/splitter/src/splitter.vue

@@ -0,0 +1,66 @@
+<template>
+	<Splitter
+		:ref="(el) => (splitterRef = el)"
+		:layout="layout"
+		:gutter-size="gutterSize"
+		:state-key="stateKey"
+		:state-storage="stateStorage"
+		:step="step"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@resizestart="(event: SplitterResizeStartEvent) => emits('resizestart', event)"
+		@resize="(event: SplitterResizeEvent) => emits('resize', event)"
+		@resizeend="(event: SplitterResizeEndEvent) => emits('resizeend', event)"
+	>
+		<slot />
+	</Splitter>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Splitter, {
+	SplitterPassThroughOptions,
+	SplitterResizeStartEvent,
+	SplitterResizeEvent,
+	SplitterResizeEndEvent,
+} from 'primevue/splitter';
+
+defineOptions({ name: 'RabbitSplitter' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	layout: 'horizontal' | 'vertical';
+	gutterSize: number;
+	stateKey: string;
+	stateStorage: 'local' | 'session';
+	step: number;
+	pt: PassThrough<SplitterPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	layout: 'horizontal',
+	gutterSize: 4,
+	stateStorage: 'session',
+	step: 1,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'resizestart', event?: SplitterResizeStartEvent): void;
+	(e: 'resize', event?: SplitterResizeEvent): void;
+	(e: 'resizeend', event?: SplitterResizeEndEvent): void;
+}>();
+
+const splitterRef = ref();
+
+defineExpose({ splitter: splitterRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/stepper/src/stepper.vue

@@ -0,0 +1,74 @@
+<template>
+	<Stepper
+		:ref="(el) => (stepperRef = el)"
+		v-model:active-step="activeStepValue"
+		:orientation="orientation"
+		:linear="linear"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@step-change="(event) => emits('step-change', event)"
+	>
+		<slot />
+		<template
+			v-if="!!useSlots().start"
+			#start
+		>
+			<slot name="start" />
+		</template>
+		<template
+			v-if="!!useSlots().end"
+			#end
+		>
+			<slot name="end" />
+		</template>
+	</Stepper>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Stepper, { StepperPassThroughOptions, StepperChangeEvent } from 'primevue/stepper';
+
+defineOptions({ name: 'RabbitStepper' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	activeStep: number;
+	orientation: 'horizontal' | 'vertical';
+	linear: boolean;
+	pt: PassThrough<StepperPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	activeStep: 0,
+	orientation: 'horizontal',
+	linear: false,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:activeStep', value?: number): void;
+	(e: 'step-change', event?: StepperChangeEvent): void;
+}>();
+
+const stepperRef = ref();
+const activeStepValue = ref<number | undefined>(props.activeStep);
+
+watch(
+	() => props.activeStep,
+	(val) => (activeStepValue.value = val),
+	{ deep: true },
+);
+
+watch(activeStepValue, (val) => emits('update:activeStep', val), { deep: true });
+
+defineExpose({ stepper: stepperRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/steps/src/steps.vue

@@ -0,0 +1,74 @@
+<template>
+	<Steps
+		:ref="(el) => (stepsRef = el)"
+		:id="id"
+		:model="model"
+		:readonly="readonly"
+		v-model:active-step="activeStepValue"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+	>
+		<template
+			v-if="!!useSlots().item"
+			#item="{ item, active, label, props, index }"
+		>
+			<slot
+				name="item"
+				:item="item"
+				:active="active"
+				:label="label"
+				:props="props"
+				:index="index"
+			/>
+		</template>
+	</Steps>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Steps, { StepsPassThroughOptions } from 'primevue/steps';
+import { MenuItem } from 'primevue/menuitem';
+
+defineOptions({ name: 'RabbitSteps' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	id: string;
+	model: MenuItem[];
+	readonly: boolean;
+	activeStep: number;
+	pt: PassThrough<StepsPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	readonly: true,
+	activeStep: 0,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:activeStep', value?: number): void;
+}>();
+
+const stepsRef = ref();
+const activeStepValue = ref<number | undefined>(props.activeStep);
+
+watch(
+	() => props.activeStep,
+	(val) => (activeStepValue.value = val),
+	{ deep: true },
+);
+
+watch(activeStepValue, (val) => emits('update:activeStep', val), { deep: true });
+
+defineExpose({ steps: stepsRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/tab-menu/src/tab-menu.vue

@@ -0,0 +1,85 @@
+<template>
+	<TabMenu
+		:ref="(el) => (tabMenuRef = el)"
+		:model="model"
+		v-model:active-index="activeIndexValue"
+		:aria-label="ariaLabel"
+		:aria-labelledby="ariaLabelledby"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@tab-change="(event) => emits('tab-change', event)"
+	>
+		<template
+			v-if="!!useSlots().item"
+			#item="{ item, index, active, label, props }"
+		>
+			<slot
+				name="item"
+				:item="item"
+				:index="index"
+				:active="active"
+				:label="label"
+				:props="props"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().itemicon"
+			#itemicon="{ item, class: itemiconclass }"
+		>
+			<slot
+				name="itemicon"
+				:item="item"
+				:class="itemiconclass"
+			/>
+		</template>
+	</TabMenu>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import TabMenu, { TabMenuPassThroughOptions, TabMenuChangeEvent } from 'primevue/tabmenu';
+import { MenuItem } from 'primevue/menuitem';
+
+defineOptions({ name: 'RabbitTabMenu' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	model: MenuItem[];
+	activeIndex: number;
+	ariaLabel: string;
+	ariaLabelledby: string;
+	pt: PassThrough<TabMenuPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	activeIndex: 0,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:activeIndex', value?: number): void;
+	(e: 'tab-change', event?: TabMenuChangeEvent): void;
+}>();
+
+const tabMenuRef = ref();
+const activeIndexValue = ref<number | undefined>(props.activeIndex);
+
+watch(
+	() => props.activeIndex,
+	(val) => (activeIndexValue.value = val),
+	{ deep: true },
+);
+
+watch(activeIndexValue, (val) => emits('update:activeIndex', val), { deep: true });
+
+defineExpose({ tabMenu: tabMenuRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>