fiery-rabbit 0.0.1

package/src/components/dropdown/src/dropdown.vue

@@ -0,0 +1,291 @@
+<template>
+	<Dropdown
+		:ref="(el) => (dropdownRef = el)"
+		v-model="value"
+		:options="options"
+		:option-label="optionLabel"
+		:option-value="optionValue"
+		:option-disabled="optionDisabled"
+		:option-group-label="optionGroupLabel"
+		:option-group-children="optionGroupChildren"
+		:placeholder="placeholder"
+		:disabled="formItemContext?.disabled ?? disabled"
+		:data-key="dataKey"
+		:variant="layoutContext?.inputStyle ?? variant"
+		:aria-describedby="`${formItemContext?.prop}-error`"
+		:input-id="inputId ?? formItemContext?.prop"
+		:input-style="inputStyle"
+		:input-class="inputClass"
+		:invalid="
+			formItemContext?.formItemValidate !== undefined && formItemContext?.formItemValidate !== null
+				? !formItemContext?.formItemValidate
+				: invalid
+		"
+		:input-props="inputProps"
+		:append-to="appendTo"
+		:panel-style="panelStyle"
+		:panel-class="panelClass"
+		:panel-props="panelProps"
+		:show-clear="showClear"
+		:filter-input-props="filterInputProps"
+		:loading="loading"
+		:reset-filter-on-hide="resetFilterOnHide"
+		:virtual-scroller-options="virtualScrollerOptions"
+		:auto-option-focus="autoOptionFocus"
+		:auto-filter-focus="autoFilterFocus"
+		:select-on-focus="selectOnFocus"
+		:filter-message="filterMessage"
+		:selection-message="selectionMessage"
+		:empty-selection-message="emptySelectionMessage"
+		:empty-filter-message="emptyFilterMessage"
+		:empty-message="emptyMessage"
+		:tabindex="tabindex"
+		:aria-labelledby="ariaLabelledby"
+		:aria-label="ariaLabel"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@change="(event) => (handleChange(), emits('change', event))"
+		@focus="(event) => emits('focus', event)"
+		@blur="(event) => emits('blur', event)"
+		@before-show="() => emits('before-show')"
+		@before-hide="() => emits('before-hide')"
+		@show="() => emits('show')"
+		@hide="() => emits('hide')"
+		@filter="(event) => emits('filter', event)"
+	>
+		<template
+			v-if="!!useSlots().value"
+			#value="{ value, placeholder }"
+		>
+			<slot
+				name="value"
+				:value="value"
+				:placeholder="placeholder"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().header"
+			#header="{ value, options }"
+		>
+			<slot
+				name="header"
+				:value="value"
+				:options="options"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().footer"
+			#footer="{ value, options }"
+		>
+			<slot
+				name="footer"
+				:value="value"
+				:options="options"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().option"
+			#option="{ option, index }"
+		>
+			<slot
+				name="option"
+				:option="option"
+				:index="index"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().optiongroup"
+			#optiongroup="{ option, index }"
+		>
+			<slot
+				name="optiongroup"
+				:option="option"
+				:index="index"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().emptyfilter"
+			#emptyfilter
+		>
+			<slot name="emptyfilter" />
+		</template>
+		<template
+			v-if="!!useSlots().empty"
+			#empty
+		>
+			<slot name="empty" />
+		</template>
+		<template
+			v-if="!!useSlots().content"
+			#content="{ items, styleClass, contentRef, getItemOptions }"
+		>
+			<slot
+				name="content"
+				:items="items"
+				:style-class="styleClass"
+				:content-ref="contentRef"
+				:get-item-options="getItemOptions"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().loader"
+			#loader="{ options }"
+		>
+			<slot
+				name="loader"
+				:options="options"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().clearicon"
+			#clearicon="{ class: cleariconclass, clearCallback }"
+		>
+			<slot
+				name="clearicon"
+				:class="cleariconclass"
+				:clear-callback="clearCallback"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().dropdownicon"
+			#dropdownicon="{ class: dropdowniconclass }"
+		>
+			<slot
+				name="dropdownicon"
+				:class="dropdowniconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().loadingicon"
+			#loadingicon="{ class: loadingiconclass }"
+		>
+			<slot
+				name="loadingicon"
+				:class="loadingiconclass"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().filtericon"
+			#filtericon="{ class: filtericonclass }"
+		>
+			<slot
+				name="filtericon"
+				:class="filtericonclass"
+			/>
+		</template>
+	</Dropdown>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject, useSlots, InputHTMLAttributes, HTMLAttributes } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Dropdown, { DropdownChangeEvent, DropdownFilterEvent, DropdownPassThroughOptions } from 'primevue/dropdown';
+import type { VirtualScrollerProps } from 'primevue/virtualscroller';
+
+defineOptions({ name: 'RabbitDropdown' });
+
+export declare type OptionLabelFunction = (item: any) => string;
+
+export declare type OptionValueFunction = (item: any) => any;
+
+export declare type OptionDisabledFunction = (item: any) => boolean;
+
+export declare type OptionGroupLabelFunction = (item: any) => string;
+
+export declare type OptionGroupChildrenFunction = (item: any) => any[];
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	invalid: boolean;
+	showClear: boolean;
+	modelValue: any;
+	variant: 'filled' | 'outlined';
+	options: any[];
+	optionLabel: string | OptionLabelFunction;
+	optionValue: string | OptionValueFunction;
+	optionDisabled: string | OptionDisabledFunction;
+	optionGroupLabel: string | OptionGroupLabelFunction;
+	optionGroupChildren: string | OptionGroupChildrenFunction;
+	placeholder: string;
+	disabled: boolean;
+	dataKey: string;
+	inputId: string;
+	inputStyle: object;
+	inputClass: string | object;
+	inputProps: InputHTMLAttributes;
+	appendTo: string | HTMLElement;
+	panelStyle: object;
+	panelClass: string | object;
+	panelProps: HTMLAttributes;
+	filterInputProps: InputHTMLAttributes;
+	loading: boolean;
+	resetFilterOnHide: boolean;
+	virtualScrollerOptions: VirtualScrollerProps;
+	autoOptionFocus: boolean;
+	autoFilterFocus: boolean;
+	selectOnFocus: boolean;
+	filterMessage: string;
+	selectionMessage: string;
+	emptySelectionMessage: string;
+	emptyFilterMessage: string;
+	emptyMessage: string;
+	tabindex: string | number;
+	ariaLabelledby: string;
+	ariaLabel: string;
+	pt: PassThrough<DropdownPassThroughOptions<any>>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	invalid: false,
+	showClear: false,
+	disabled: false,
+	appendTo: 'body',
+	loading: false,
+	variant: 'outlined',
+	resetFilterOnHide: false,
+	autoOptionFocus: true,
+	autoFilterFocus: false,
+	selectOnFocus: false,
+	filterMessage: '{0} results are available',
+	selectionMessage: '{0} items selected',
+	emptySelectionMessage: 'No selected item',
+	emptyFilterMessage: 'No results found',
+	emptyMessage: 'No results found',
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:modelValue', params: any): void;
+	(e: 'change', event?: DropdownChangeEvent): void;
+	(e: 'focus', event?: Event): void;
+	(e: 'blur', event?: Event): void;
+	(e: 'before-show'): void;
+	(e: 'before-hide'): void;
+	(e: 'show'): void;
+	(e: 'hide'): void;
+	(e: 'filter', event?: DropdownFilterEvent): void;
+}>();
+
+const layoutContext: any = inject('layout', undefined);
+const formItemContext: any = inject('rabbitFormItem', undefined);
+const dropdownRef = ref();
+const value = ref<any>(props.modelValue);
+
+watch(
+	() => props.modelValue,
+	(val) => (value.value = val),
+	{ deep: true },
+);
+
+const handleChange = () => emits('update:modelValue', value.value);
+
+defineExpose({ dropdown: dropdownRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/dynamic-dialog/src/dynamic-dialog.vue

@@ -0,0 +1,28 @@
+<template>
+	<DynamicDialog :ref="(el) => (dynamicDialogRef = el)">
+		<slot />
+	</DynamicDialog>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import DynamicDialog from 'primevue/dynamicdialog';
+
+defineOptions({ name: 'RabbitDynamicDialog' });
+
+export interface IProps {
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	unstyled: false,
+});
+
+const dynamicDialogRef = ref();
+
+defineExpose({ dynamicDialog: dynamicDialogRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/editor/src/editor.vue

@@ -0,0 +1,77 @@
+<template>
+	<Editor
+		:ref="(el) => (editorRef = el)"
+		v-model="value"
+		:placeholder="placeholder"
+		:readonly="readonly"
+		:formats="formats"
+		:editor-style="editorStyle"
+		:id="inputId ?? formItemContext?.prop"
+		:modules="modules"
+		:aria-describedby="`${formItemContext?.prop}-error`"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@text-change="(event) => (handleTextChange(), emits('text-change', event))"
+		@selection-change="(event) => emits('selection-change', event)"
+		@load="(event) => emits('load', event)"
+	/>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, inject } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Editor, {
+	EditorTextChangeEvent,
+	EditorSelectionChangeEvent,
+	EditorLoadEvent,
+	EditorPassThroughOptions,
+} from 'primevue/editor';
+
+defineOptions({ name: 'RabbitEditor' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	modelValue: string;
+	placeholder: string;
+	inputId: string;
+	readonly: boolean;
+	formats: any[];
+	editorStyle: any;
+	modules: any;
+	pt: PassThrough<EditorPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	readonly: false,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:modelValue', params: string): void;
+	(e: 'text-change', event?: EditorTextChangeEvent): void;
+	(e: 'selection-change', event?: EditorSelectionChangeEvent): void;
+	(e: 'load', event?: EditorLoadEvent): void;
+}>();
+
+const editorRef = ref();
+const formItemContext: any = inject('rabbitFormItem', undefined);
+const value = ref<any>(props.modelValue);
+
+watch(
+	() => props.modelValue,
+	(val) => (value.value = val),
+	{ deep: true },
+);
+
+const handleTextChange = () => emits('update:modelValue', value.value);
+
+defineExpose({ editor: editorRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/fieldset/src/fieldset.vue

@@ -0,0 +1,67 @@
+<template>
+	<Fieldset
+		:ref="(el) => (fieldsetRef = el)"
+		:legend="legend"
+		:toggleable="toggleable"
+		v-model:collapsed="collapsedValue"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@toggle="(event) => emits('toggle', event)"
+	>
+		<slot />
+		<template
+			v-if="!!useSlots().legend"
+			#legend
+		>
+			<slot name="legend" />
+		</template>
+	</Fieldset>
+</template>
+
+<script setup lang="ts">
+import { ref, watch, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import Fieldset, { FieldsetPassThroughOptions, FieldsetToggleEvent } from 'primevue/fieldset';
+
+defineOptions({ name: 'RabbitFieldset' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	legend: string;
+	toggleable: boolean;
+	collapsed: boolean;
+	pt: PassThrough<FieldsetPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+const props = withDefaults(defineProps<Partial<IProps>>(), {
+	toggleable: false,
+	collapsed: false,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'update:collapsed', value?: boolean): void;
+	(e: 'toggle', event?: FieldsetToggleEvent): void;
+}>();
+
+const fieldsetRef = ref();
+const collapsedValue = ref<boolean | undefined>(props.collapsed);
+
+watch(
+	() => props.collapsed,
+	(val) => (collapsedValue.value = val),
+	{ deep: true },
+);
+
+watch(collapsedValue, (val) => emits('update:collapsed', val), { deep: true });
+
+defineExpose({ fieldset: fieldsetRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/file-upload/src/file-upload.vue

@@ -0,0 +1,188 @@
+<template>
+	<FileUpload
+		:ref="(el) => (fileUploadRef = el)"
+		:name="name"
+		:url="url"
+		:mode="mode"
+		:multiple="multiple"
+		:accept="accept"
+		:disabled="disabled"
+		:auto="auto"
+		:max-file-size="maxFileSize"
+		:invalid-file-size-message="invalidFileSizeMessage"
+		:invalid-file-limit-message="invalidFileLimitMessage"
+		:invalid-file-type-message="invalidFileTypeMessage"
+		:file-limit="fileLimit"
+		:with-credentials="withCredentials"
+		:preview-width="previewWidth"
+		:choose-label="chooseLabel"
+		:upload-label="uploadLabel"
+		:cancel-label="cancelLabel"
+		:custom-upload="customUpload"
+		:show-upload-button="showUploadButton"
+		:show-cancel-button="showCancelButton"
+		:style="style"
+		:class="class"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+		@select="(event) => emits('select', event)"
+		@before-upload="(event) => emits('before-upload', event)"
+		@progress="(event) => emits('progress', event)"
+		@upload="(event) => emits('upload', event)"
+		@uploader="(event) => emits('uploader', event)"
+		@error="(event) => emits('error', event)"
+		@before-send="(event) => emits('before-send', event)"
+		@clear="() => emits('clear')"
+		@remove="(event) => emits('remove', event)"
+		@remove-uploaded-file="(event: FileUploadRemoveUploadedFile) => emits('removeUploadedFile', event)"
+	>
+		<template
+			v-if="!!useSlots().header"
+			#header="{ files, uploadedFiles, chooseCallback, uploadCallback, clearCallback }"
+		>
+			<slot
+				name="header"
+				:files="files"
+				:uploaded-files="uploadedFiles"
+				:choose-Callback="chooseCallback"
+				:upload-Callback="uploadCallback"
+				:clear-Callback="clearCallback"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().content"
+			#content="{ files, uploadedFiles, removeUploadedFileCallback, removeFileCallback, progress, messages }"
+		>
+			<slot
+				name="content"
+				:files="files"
+				:uploaded-files="uploadedFiles"
+				:remove-uploaded-file-callback="removeUploadedFileCallback"
+				:remove-file-callback="removeFileCallback"
+				:progress="progress"
+				:messages="messages"
+			/>
+		</template>
+		<template
+			v-if="!!useSlots().empty"
+			#empty
+		>
+			<slot name="empty" />
+		</template>
+		<template
+			v-if="!!useSlots().chooseicon"
+			#chooseicon
+		>
+			<slot name="chooseicon" />
+		</template>
+		<template
+			v-if="!!useSlots().uploadicon"
+			#uploadicon
+		>
+			<slot name="uploadicon" />
+		</template>
+		<template
+			v-if="!!useSlots().cancelicon"
+			#cancelicon
+		>
+			<slot name="cancelicon" />
+		</template>
+		<template
+			v-if="!!useSlots().fileremoveicon"
+			#fileremoveicon="{ file, index }"
+		>
+			<slot
+				name="fileremoveicon"
+				:file="file"
+				:index="index"
+			/>
+		</template>
+	</FileUpload>
+</template>
+
+<script setup lang="ts">
+import { ref, useSlots } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import FileUpload, {
+	FileUploadPassThroughOptions,
+	FileUploadSelectEvent,
+	FileUploadBeforeUploadEvent,
+	FileUploadProgressEvent,
+	FileUploadUploadEvent,
+	FileUploadUploaderEvent,
+	FileUploadErrorEvent,
+	FileUploadBeforeSendEvent,
+	FileUploadRemoveEvent,
+	FileUploadRemoveUploadedFile,
+} from 'primevue/fileupload';
+
+defineOptions({ name: 'RabbitFileUpload' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+export interface IProps {
+	name: string;
+	url: string;
+	mode: 'basic' | 'advanced';
+	multiple: boolean;
+	accept: string;
+	disabled: boolean;
+	auto: boolean;
+	maxFileSize: number;
+	invalidFileSizeMessage: string;
+	invalidFileLimitMessage: string;
+	invalidFileTypeMessage: string;
+	fileLimit: number;
+	withCredentials: boolean;
+	previewWidth: number;
+	chooseLabel: string;
+	uploadLabel: string;
+	cancelLabel: string;
+	customUpload: boolean;
+	showUploadButton: boolean;
+	showCancelButton: boolean;
+	style: any;
+	class: any;
+	pt: PassThrough<FileUploadPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	mode: 'advanced',
+	multiple: false,
+	disabled: false,
+	auto: false,
+	invalidFileSizeMessage: '{0}: Invalid file size, file size should be smaller than {1}.',
+	invalidFileLimitMessage: 'Maximum number of files exceeded, limit is {0} at most.',
+	invalidFileTypeMessage: '{0}: Invalid file type, allowed file types: {1}.',
+	withCredentials: false,
+	previewWidth: 50,
+	cancelLabel: 'Cancel',
+	showUploadButton: true,
+	showCancelButton: true,
+	unstyled: false,
+});
+
+const emits = defineEmits<{
+	(e: 'select', event?: FileUploadSelectEvent): void;
+	(e: 'before-upload', event?: FileUploadBeforeUploadEvent): void;
+	(e: 'progress', event?: FileUploadProgressEvent): void;
+	(e: 'upload', event?: FileUploadUploadEvent): void;
+	(e: 'uploader', event?: FileUploadUploaderEvent): void;
+	(e: 'error', event?: FileUploadErrorEvent): void;
+	(e: 'before-send', event?: FileUploadBeforeSendEvent): void;
+	(e: 'clear'): void;
+	(e: 'remove', event?: FileUploadRemoveEvent): void;
+	(e: 'removeUploadedFile', event?: FileUploadRemoveUploadedFile): void;
+}>();
+
+const fileUploadRef = ref();
+
+defineExpose({ fileUpload: fileUploadRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>

package/src/components/float-label/src/float-label.vue

@@ -0,0 +1,38 @@
+<template>
+	<FloatLabel
+		:ref="(el) => (floatLabelRef = el)"
+		:pt="pt"
+		:pt-options="ptOptions"
+		:unstyled="unstyled"
+	>
+		<slot />
+	</FloatLabel>
+</template>
+
+<script setup lang="ts">
+import { ref } from 'vue';
+import { PassThroughOptions } from 'primevue/passthrough';
+import FloatLabel, { FloatLabelPassThroughOptions } from 'primevue/floatlabel';
+
+defineOptions({ name: 'RabbitFloatLabel' });
+
+export declare type PassThrough<T = void> = T | object | undefined;
+
+interface IProps {
+	pt: PassThrough<FloatLabelPassThroughOptions>;
+	ptOptions: PassThroughOptions;
+	unstyled: boolean;
+}
+
+withDefaults(defineProps<Partial<IProps>>(), {
+	unstyled: false,
+});
+
+const floatLabelRef = ref();
+
+defineExpose({ floatLabel: floatLabelRef });
+</script>
+
+<style lang="scss" scoped>
+@import '../style/style.scss';
+</style>