;\n\nexport type TRadioOptions = WithVariantProps<{\n modelValue?: TRadioValue\n} & InputHTMLAttributes & {\n type?: 'radio'\n} & Data>;\n"
},
{
"path": "src/types/components/t-rich-select.ts",
"content": "import {\n Data, InputOptions, Measure, NormalizedOption, NormalizedOptions, TRichSelectClassesValidKeys, WithVariantPropsAndClassesList,\n} from '@variantjs/core';\nimport { HTMLAttributes } from 'vue';\nimport { Placement, Options } from '@popperjs/core';\nimport { TSelectValue } from './t-select';\nimport { FetchOptionsFn, PreFetchOptionsFn } from '../misc';\n\nexport type MinimumInputLengthTextProp = ((minimumInputLength: number, query?: string) => string) | string;\n\nexport type TRichSelectOptions = WithVariantPropsAndClassesList<{\n modelValue?: TSelectValue,\n options?: InputOptions | NormalizedOption[] | NormalizedOptions,\n multiple?: boolean\n name?: string,\n tags?: boolean\n normalizeOptions?: boolean,\n valueAttribute?: string,\n textAttribute?: string,\n delay?: number,\n fetchOptions?: FetchOptionsFn,\n prefetchOptions?: boolean | PreFetchOptionsFn,\n minimumInputLength?: number,\n minimumInputLengthText?: MinimumInputLengthTextProp,\n minimumResultsForSearch?: number,\n hideSearchBox?: boolean,\n toggleOnFocus?: boolean,\n toggleOnClick?: boolean,\n closeOnSelect?: boolean,\n selectOnClose?: boolean,\n clearable?: boolean,\n disabled?: boolean,\n placeholder?: string,\n searchBoxPlaceholder?: string,\n noResultsText?: string,\n searchingText?: string,\n loadingClosedPlaceholder?: string,\n loadingMoreResultsText?: string,\n maxHeight?: Measure | null,\n dropdownPlacement?: Placement,\n dropdownPopperOptions?: Options,\n teleport?: boolean,\n teleportTo?: string | HTMLElement,\n} & HTMLAttributes & Data, TRichSelectClassesValidKeys>;\n"
},
{
"path": "src/types/components/t-select.ts",
"content": "import {\n Data, InputOptions, NormalizedOption, NormalizedOptions, WithVariantProps,\n} from '@variantjs/core';\nimport { SelectHTMLAttributes } from 'vue';\nimport { Truthy } from '../misc';\n\n// eslint-disable-next-line @typescript-eslint/ban-types\nexport type TSelectValue = string | number | boolean | undefined | null | Date | Function | symbol | TSelectValue[];\n\nexport type TSelectOptions = WithVariantProps<{\n modelValue?: TSelectValue,\n options?: InputOptions | NormalizedOption[] | NormalizedOptions,\n multiple?: Truthy,\n normalizeOptions?: boolean,\n valueAttribute?: string\n textAttribute?: string\n} & SelectHTMLAttributes & Data>;\n"
},
{
"path": "src/types/components/t-tag.ts",
"content": "import { Data, WithVariantProps } from '@variantjs/core';\nimport { HTMLAttributes } from 'vue';\n\nexport type TTagOptions = WithVariantProps<{\n tagName?: string\n text?: string\n} & HTMLAttributes & Data>;\n"
},
{
"path": "src/types/components/t-textarea.ts",
"content": "import { Data, WithVariantProps } from '@variantjs/core';\nimport { InputHTMLAttributes } from 'vue';\n\nexport type TTextareaValue = string | number | string[] | undefined;\n\nexport type TTextareaOptions = WithVariantProps<{\n modelValue?: TTextareaValue,\n} & InputHTMLAttributes & Data>;\n"
},
{
"path": "src/types/components/t-toggle.ts",
"content": "import { WithVariantPropsAndClassesList, TToggleClassesValidKeys, Data } from '@variantjs/core';\nimport { HTMLAttributes } from 'vue';\nimport { TCheckboxValue } from './t-checkbox';\n\nexport type TToggleValue = TCheckboxValue;\n\nexport type TToggleOptions = WithVariantPropsAndClassesList<{\n name?: string,\n modelValue?: TToggleValue,\n value?: TToggleValue,\n uncheckedValue?: TToggleValue,\n checked?: boolean,\n disabled?: boolean,\n checkedPlaceholder?: string,\n uncheckedPlaceholder?: string,\n} & HTMLAttributes & Data, TToggleClassesValidKeys>;\n"
},
{
"path": "src/types/helpers.ts",
"content": "type ObjectWithProperties = Record;\n\ntype KeysOfType = { [P in keyof T]: T[P] extends TProp? P : never }[keyof T];\n\nexport { ObjectWithProperties, KeysOfType };\n"
},
{
"path": "src/types/index.ts",
"content": "export { VariantJSConfiguration, VariantJSProps, VariantJSWithClassesListProps } from './variantCore';\nexport { TInputValue, TInputOptions } from './components/t-input';\nexport { TTextareaValue, TTextareaOptions } from './components/t-textarea';\nexport { TRadioValue, TRadioOptions } from './components/t-radio';\nexport { TCheckboxValue, TCheckboxOptions } from './components/t-checkbox';\nexport { TSelectValue, TSelectOptions } from './components/t-select';\nexport { TButtonOptions } from './components/t-button';\nexport { TCardOptions } from './components/t-card';\nexport { TModalOptions } from './components/t-modal';\nexport { TDialogOptions } from './components/t-dialog';\nexport { TTagOptions } from './components/t-tag';\nexport { TAlertOptions } from './components/t-alert';\nexport { TToggleValue, TToggleOptions } from './components/t-toggle';\nexport { TDropdownOptions } from './components/t-dropdown';\nexport { TRichSelectOptions, MinimumInputLengthTextProp } from './components/t-rich-select';\nexport { TInputGroupOptions, TInputGroupValidChilElementsKeys } from './components/t-input-group';\nexport {\n Truthy, IconProp, FetchOptionsFn, FetchedOptions, PreFetchOptionsFn, PromiseRejectFn,\n} from './misc';\nexport { ObjectWithProperties, KeysOfType } from './helpers';\nexport { EmitterEvents, EmitterFunction, EmitterInterface } from './utils';\nexport { VueRouteAriaCurrentValue, VueRouteRouteLocationRaw } from './vueRouter';\n"
},
{
"path": "src/types/misc.ts",
"content": "import { Data, InputOptions } from '@variantjs/core';\n\ntype Truthy = boolean | string;\n\n// eslint-disable-next-line @typescript-eslint/ban-types\ntype IconProp = Element | string | (Data & { render?: Function });\n\ntype FetchedOptions = Promise<{\n results: InputOptions;\n hasMorePages?: boolean;\n}>;\n\ntype FetchOptionsFn = (query?: string, nextPage?: number) => FetchedOptions;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype PreFetchOptionsFn = (currentValue?: any) => Promise;\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype PromiseRejectFn = ((reason?: any) => void);\n\nexport {\n Truthy, IconProp, FetchOptionsFn, FetchedOptions, PromiseRejectFn, PreFetchOptionsFn,\n};\n"
},
{
"path": "src/types/utils.ts",
"content": "/* eslint-disable @typescript-eslint/no-explicit-any */\ntype EmitterFunction = (...args : any[]) => void;\n\ntype EmitterEvents = {\n [key: string]: EmitterFunction[]\n};\n\ninterface EmitterInterface {\n on(name: keyof EmitterEvents, callback: EmitterFunction): void;\n once(name: keyof EmitterEvents, callback: EmitterFunction): void;\n emit(name: keyof EmitterEvents, ...args: any[]): void;\n emit(name: keyof EmitterEvents, ...args: any[]): void;\n off(name: keyof EmitterEvents, callback: EmitterFunction): void;\n}\n\nexport { EmitterEvents, EmitterFunction, EmitterInterface };\n"
},
{
"path": "src/types/variantCore.ts",
"content": "import {\n CSSRawClassesList,\n CSSClass, Variants, VariantsWithClassesList, WithVariantProps, WithVariantPropsAndClassesList, Data,\n} from '@variantjs/core';\n\nimport { ComponentPropsOptions, PropType } from 'vue';\nimport { TButtonOptions } from './components/t-button';\nimport { TCardOptions } from './components/t-card';\nimport { TCheckboxOptions } from './components/t-checkbox';\nimport { TInputOptions } from './components/t-input';\nimport { TInputGroupOptions } from './components/t-input-group';\nimport { TRadioOptions } from './components/t-radio';\nimport { TSelectOptions } from './components/t-select';\nimport { TTagOptions } from './components/t-tag';\nimport { TTextareaOptions } from './components/t-textarea';\n\ntype VariantJSProps = {\n classes?: CSSClass;\n fixedClasses?: CSSClass;\n variants?: Variants;\n variant?: string;\n class?: string;\n}, PropsOptions extends Readonly = {\n classes: {\n type: PropType;\n default: undefined;\n },\n fixedClasses: {\n type: PropType;\n default: undefined;\n },\n variants: {\n type: PropType>;\n default: undefined;\n },\n variant: {\n type:PropType;\n default: undefined;\n },\n}> = PropsOptions & {\n classes: {\n type: PropType;\n default: undefined;\n },\n fixedClasses: {\n type: PropType;\n default: undefined;\n },\n variants: {\n type: PropType>;\n default: undefined;\n },\n variant: {\n type:PropType;\n default: undefined;\n },\n};\n\ntype VariantJSWithClassesListProps<\n ClassesKeys extends string,\n ComponentOptions extends WithVariantPropsAndClassesList = WithVariantPropsAndClassesList,\n PropsOptions extends Readonly = {\n classes: {\n type: PropType>;\n default: undefined;\n },\n fixedClasses: {\n type: PropType>;\n default: undefined;\n },\n variants: {\n type: PropType>;\n default: undefined;\n },\n variant: {\n type:PropType;\n default: undefined;\n },\n }> = PropsOptions & {\n classes: {\n type: PropType>;\n default: undefined;\n },\n fixedClasses: {\n type: PropType>;\n default: undefined;\n },\n variants: {\n type: PropType>;\n default: undefined;\n },\n variant: {\n type:PropType;\n default: undefined;\n },\n };\n\ntype VariantJSConfiguration = {\n TInput?: TInputOptions\n TSelect?: TSelectOptions\n TRadio?: TRadioOptions\n TCheckbox?: TCheckboxOptions\n TButton?: TButtonOptions\n TTextarea?: TTextareaOptions\n TTag?: TTagOptions\n TCard?: TCardOptions\n TInputGroup?: TInputGroupOptions,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n [key: string]: any\n};\n\nexport { VariantJSConfiguration, VariantJSProps, VariantJSWithClassesListProps };\n"
},
{
"path": "src/types/vueRouter.ts",
"content": "// Copied from the types on vue/node_modules/vue-router/dist/vue-router.d.ts\n// so we dont need to add any extra dependency\n\ntype RouteParamValue = string;\n\ntype RouteParamValueRaw = RouteParamValue | number;\n\ntype RouteParamsRaw = Record;\n\ntype RouteRecordName = string | symbol;\n\ninterface LocationAsRelativeRaw {\n name?: RouteRecordName;\n params?: RouteParamsRaw;\n}\n\ntype HistoryStateArray = Array;\n\ntype HistoryStateValue = string | number | boolean | null | undefined | HistoryState | HistoryStateArray;\n\n/**\n * Allowed HTML history.state\n */\ninterface HistoryState {\n [x: number]: HistoryStateValue;\n [x: string]: HistoryStateValue;\n}\n\ninterface RouteLocationOptions {\n /**\n * Replace the entry in the history instead of pushing a new entry\n */\n replace?: boolean;\n /**\n * Triggers the navigation even if the location is the same as the current one\n */\n force?: boolean;\n /**\n * State to save using the History API. This cannot contain any reactive\n * values and some primitives like Symbols are forbidden. More info at\n * https://developer.mozilla.org/en-US/docs/Web/API/History/state\n */\n state?: HistoryState;\n}\n\ninterface LocationAsPath {\n path: string;\n}\n\ntype LocationQueryValue = string | null;\n\ntype LocationQueryValueRaw = LocationQueryValue | number | undefined;\n\ntype LocationQueryRaw = Record;\n\ninterface RouteQueryAndHash {\n query?: LocationQueryRaw;\n hash?: string;\n}\n\ntype VueRouteRouteLocationRaw = string | (RouteQueryAndHash & LocationAsPath & RouteLocationOptions) | (RouteQueryAndHash & LocationAsRelativeRaw & RouteLocationOptions);\ntype VueRouteAriaCurrentValue = 'page' | 'step' | 'location' | 'date' | 'time' | 'true' | 'false' | undefined;\n\nexport { VueRouteAriaCurrentValue, VueRouteRouteLocationRaw };\n"
},
{
"path": "src/use/useActivableOption.ts",
"content": "import { isEqual, NormalizedOption, normalizedOptionIsDisabled } from '@variantjs/core';\nimport {\n computed, ComputedRef, Ref, ref, watch,\n} from 'vue';\n\nexport default function useActivableOption(\n options: ComputedRef,\n localValue: Ref,\n): {\n activeOption: Ref,\n initActiveOption: () => void,\n optionIsActive: (option: NormalizedOption) => boolean,\n setActiveOption: (option: NormalizedOption) => void,\n setNextOptionActive: () => void,\n setPrevOptionActive: () => void,\n } {\n const getActiveOption = (): NormalizedOption | null => {\n const selectedOption = options.value.find((option: NormalizedOption) => isEqual(option.value, localValue.value) && !normalizedOptionIsDisabled(option));\n\n if (selectedOption !== undefined) {\n return selectedOption;\n }\n\n if (options.value.length > 0) {\n return options.value.find((option) => !normalizedOptionIsDisabled(option)) || null;\n }\n\n return null;\n };\n\n const activeOption = ref(getActiveOption());\n\n const activeOptionIndex = computed((): number => {\n if (activeOption.value === null) {\n return 0;\n }\n\n const index = options.value.findIndex((option) => isEqual(option.value, (activeOption.value as NormalizedOption).value));\n\n return index < 0 ? 0 : index;\n });\n\n const optionIsActive = (option: NormalizedOption): boolean => (activeOption.value === null ? false : isEqual(activeOption.value.value, option.value));\n\n const setActiveOption = (option: NormalizedOption): void => {\n activeOption.value = option;\n };\n\n const setNextOptionActive = (): void => {\n let newActiveOption: NormalizedOption | undefined;\n let nextIndex = activeOptionIndex.value + 1;\n\n while (nextIndex < options.value.length && newActiveOption === undefined) {\n const option = options.value[nextIndex];\n const optionIsDisabled = normalizedOptionIsDisabled(option);\n if (!optionIsDisabled) {\n newActiveOption = option;\n }\n nextIndex += 1;\n }\n\n if (newActiveOption) {\n setActiveOption(newActiveOption);\n }\n };\n\n const setPrevOptionActive = (): void => {\n let newActiveOption: NormalizedOption | undefined;\n let nextIndex = activeOptionIndex.value - 1;\n\n while (nextIndex >= 0 && newActiveOption === undefined) {\n const option = options.value[nextIndex];\n const optionIsDisabled = normalizedOptionIsDisabled(option);\n if (!optionIsDisabled) {\n newActiveOption = option;\n }\n nextIndex -= 1;\n }\n\n if (newActiveOption) {\n setActiveOption(newActiveOption);\n }\n };\n\n const initActiveOption = (): void => {\n activeOption.value = getActiveOption();\n };\n\n watch(options, (newOptions: NormalizedOption[], oldOptions: NormalizedOption[]) => {\n const firstNewOption = newOptions.find((o) => !oldOptions.includes(o) && !normalizedOptionIsDisabled(o));\n\n if (firstNewOption) {\n setActiveOption(firstNewOption);\n } else {\n initActiveOption();\n }\n });\n\n return {\n activeOption,\n initActiveOption,\n optionIsActive,\n setActiveOption,\n setNextOptionActive,\n setPrevOptionActive,\n };\n}\n"
},
{
"path": "src/use/useConfiguration.ts",
"content": "import {\n computed, inject, camelize, getCurrentInstance, ComponentInternalInstance, ComputedRef, watch, reactive,\n} from 'vue';\nimport {\n Data, get, isEqual, isPrimitive, parseVariant, pick,\n} from '@variantjs/core';\nimport { VariantJSConfiguration } from '../types';\n\nexport const extractDefinedProps = (vm: ComponentInternalInstance): string[] => {\n const validProps = Object.keys(vm.props);\n\n const definedProps = Object.keys(vm.vnode.props || {})\n .map((propName) => camelize(propName))\n .filter((propName) => validProps.includes(propName) && propName !== 'modelValue');\n\n return definedProps;\n};\n\nexport function useAttributes(configuration: ComponentOptions): Data {\n const vm = getCurrentInstance()!;\n\n const computedAttributes: ComputedRef = computed(():Data => {\n const availableProps = Object.keys(vm.props);\n\n return pick(configuration, (value, key) => isPrimitive(value) && !availableProps.includes(String(key)));\n });\n\n const attributes = reactive(computedAttributes.value);\n\n watch(computedAttributes, (newValue) => {\n Object.keys(newValue).forEach((key) => {\n if (!isEqual(attributes[key], newValue[key])) {\n attributes[key] = newValue[key];\n }\n });\n });\n\n return attributes;\n}\n\nexport function useConfigurationParts(): {\n componentGlobalConfiguration?: ComponentOptions\n propsValues: ComputedRef\n} {\n const vm = getCurrentInstance()!;\n\n const variantGlobalConfiguration = inject('configuration', {});\n\n const componentGlobalConfiguration = get(variantGlobalConfiguration, vm?.type.name as keyof VariantJSConfiguration, {});\n\n const propsValues = computed(() => {\n const values: Data = {};\n\n extractDefinedProps(vm).forEach((attributeName) => {\n const normalizedAttribute = camelize(attributeName);\n values[normalizedAttribute] = vm.props[normalizedAttribute];\n });\n\n return values;\n });\n\n return {\n componentGlobalConfiguration,\n propsValues: propsValues as ComputedRef,\n };\n}\n\nexport default function useConfiguration(defaultConfiguration: ComponentOptions): {\n configuration: ComponentOptions,\n attributes: Data,\n} {\n const vm = getCurrentInstance()!;\n\n const { propsValues, componentGlobalConfiguration } = useConfigurationParts();\n\n const computedConfiguration = computed(() => {\n const props = { ...vm.props };\n delete props.modelValue;\n return {\n ...props,\n ...parseVariant(\n propsValues.value,\n componentGlobalConfiguration,\n defaultConfiguration,\n ),\n };\n });\n\n const configuration = reactive(computedConfiguration.value);\n\n watch(computedConfiguration, (newValue) => {\n Object.keys(newValue).forEach((key) => {\n configuration[key] = newValue[key];\n });\n });\n\n const attributes = useAttributes(configuration);\n\n return {\n configuration: configuration as ComponentOptions,\n attributes,\n };\n}\n"
},
{
"path": "src/use/useConfigurationWithClassesList.ts",
"content": "import {\n computed, getCurrentInstance, reactive, watch,\n} from 'vue';\nimport { Data, parseVariantWithClassesList } from '@variantjs/core';\nimport { useAttributes, useConfigurationParts } from './useConfiguration';\n\nexport default function useConfigurationWithClassesList(defaultConfiguration: ComponentOptions, classesListKeys: string[]): {\n configuration: ComponentOptions,\n attributes: Data,\n} {\n const vm = getCurrentInstance()!;\n\n const { propsValues, componentGlobalConfiguration } = useConfigurationParts();\n\n const computedConfiguration = computed(() => ({\n ...vm.props,\n ...parseVariantWithClassesList(\n propsValues.value,\n classesListKeys,\n componentGlobalConfiguration,\n defaultConfiguration,\n ),\n }));\n\n const configuration = reactive(computedConfiguration.value);\n\n watch(computedConfiguration, (newValue) => {\n Object.keys(newValue).forEach((key) => {\n configuration[key] = newValue[key];\n });\n });\n\n const attributes = useAttributes(configuration);\n\n return {\n configuration: configuration as ComponentOptions,\n attributes,\n };\n}\n"
},
{
"path": "src/use/useFetchsOptions.ts",
"content": "import {\n debounce, filterOptions, flattenOptions, InputOptions, NormalizedOption, NormalizedOptions, normalizeOptions,\n} from '@variantjs/core';\nimport {\n computed, Ref, ref, ComputedRef, getCurrentInstance, watch,\n} from 'vue';\nimport {\n FetchedOptions, FetchOptionsFn, MinimumInputLengthTextProp, PreFetchOptionsFn,\n} from '../types';\n\nexport default function useFetchsOptions(\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n localValue: Ref,\n options: Ref,\n textAttribute: Ref,\n valueAttribute: Ref,\n normalize: Ref,\n searchQuery: Ref,\n fetchFn: Ref,\n prefetchFn: Ref,\n fetchDelay: Ref,\n fetchMinimumInputLength: Ref,\n fetchMinimumInputLengthText: Ref,\n): {\n\n normalizedOptions: ComputedRef\n flattenedOptions: ComputedRef\n fetchsOptions: ComputedRef,\n needsMoreCharsToFetch: ComputedRef,\n needsMoreCharsMessage: ComputedRef,\n fetchingOptions: Ref,\n fetchingMoreOptions: Ref,\n fetchedOptionsHaveMorePages: Ref,\n optionsWereFetched: Ref,\n fetchOptions: () => void,\n prefetchOptions: () => void,\n fetchMoreOptions: () => void,\n fetchOptionsCancel: () => void,\n } {\n const { emit } = getCurrentInstance()!;\n\n const getNormalizedOptions = (rawOptions: InputOptions): NormalizedOptions => (normalize.value\n ? normalizeOptions(rawOptions, textAttribute.value, valueAttribute.value)\n : rawOptions as NormalizedOptions);\n\n const fetchedOptions = ref(getNormalizedOptions(options.value || []));\n\n watch(options, () => {\n fetchedOptions.value = getNormalizedOptions(options.value || []);\n });\n\n const optionsWereFetched = ref(false);\n\n const normalizedOptions = computed(() => {\n if (typeof fetchFn.value !== 'function' && typeof prefetchFn.value !== 'function') {\n const normalized = getNormalizedOptions(options.value || []);\n\n if (searchQuery.value) {\n return filterOptions(normalized, searchQuery.value);\n }\n\n return normalized;\n }\n\n return fetchedOptions.value;\n });\n\n const flattenedOptions = computed(() => flattenOptions(normalizedOptions.value));\n\n const fetchsOptions = computed(() => fetchFn.value !== undefined);\n\n const needsMoreCharsToFetch = computed(() => {\n if (!fetchsOptions.value) {\n return false;\n }\n\n if (!fetchMinimumInputLength.value) {\n return false;\n }\n\n return !searchQuery.value || searchQuery.value.length < fetchMinimumInputLength.value;\n });\n\n const fetchNextPage = ref(undefined);\n\n const fetchingOptions = ref(false);\n\n const fetchingMoreOptions = ref(false);\n\n const fetchedOptionsHaveMorePages = computed(() => fetchNextPage.value !== undefined);\n\n const fetchOptionsFn = ([nextPage]: [number | undefined]): void => {\n fetchFn.value!(searchQuery.value, nextPage)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .then((response: FetchedOptions | any) => {\n if (typeof response === 'object' && Object.prototype.hasOwnProperty.call(response, 'results')) {\n const {\n results,\n hasMorePages,\n } = response;\n\n if (!Array.isArray(results) && results !== undefined && typeof results !== 'object') {\n throw new Error(`Response.results must be an array or object, got ${typeof results}`);\n }\n\n if (nextPage !== undefined && nextPage >= 2) {\n fetchedOptions.value = fetchedOptions.value.concat(getNormalizedOptions(results));\n } else {\n fetchedOptions.value = getNormalizedOptions(results);\n }\n\n if (hasMorePages) {\n fetchNextPage.value = fetchNextPage.value === undefined ? 2 : fetchNextPage.value + 1;\n } else {\n fetchNextPage.value = undefined;\n }\n } else {\n throw new Error('Options response must be an object with `results` property.');\n }\n\n optionsWereFetched.value = true;\n\n emit('fetch-options-success', response);\n }).catch((error) => {\n emit('fetch-options-error', error);\n }).then(() => {\n fetchingOptions.value = false;\n fetchingMoreOptions.value = false;\n });\n };\n\n const debouncedFetchOptions = debounce(fetchOptionsFn, fetchDelay.value);\n\n const fetchOptionsCancel = () => {\n debouncedFetchOptions.cancel();\n fetchingOptions.value = false;\n fetchingMoreOptions.value = false;\n };\n\n const fetchOptions = (nextPage?: number) => {\n if (!fetchsOptions.value) {\n fetchOptionsCancel();\n return;\n }\n\n if (nextPage !== undefined && nextPage >= 2) {\n fetchingMoreOptions.value = true;\n } else {\n fetchingOptions.value = true;\n }\n\n debouncedFetchOptions(nextPage);\n };\n\n const fetchMoreOptions = () => {\n fetchOptions(fetchNextPage.value);\n };\n\n watch(searchQuery, () => {\n if (!fetchsOptions.value || needsMoreCharsToFetch.value) {\n return;\n }\n\n optionsWereFetched.value = false;\n\n fetchOptions();\n });\n\n const needsMoreCharsMessage = computed((): string => {\n if (typeof fetchMinimumInputLengthText.value === 'string') {\n return fetchMinimumInputLengthText.value;\n }\n\n return fetchMinimumInputLengthText.value(fetchMinimumInputLength.value!, searchQuery.value);\n });\n\n const prefetchOptions = (): void => {\n if (typeof prefetchFn.value !== 'function') {\n fetchOptions();\n return;\n }\n\n fetchingOptions.value = true;\n\n prefetchFn.value!(localValue.value)\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n .then((results: InputOptions | any) => {\n if (!Array.isArray(results) && results !== undefined && typeof results !== 'object') {\n throw new Error(`Response must be an array or object, got ${typeof results}`);\n }\n\n fetchedOptions.value = getNormalizedOptions(results);\n\n optionsWereFetched.value = true;\n\n emit('fetch-options-success', results);\n }).catch((error) => {\n emit('fetch-options-error', error);\n }).then(() => {\n fetchingOptions.value = false;\n });\n };\n\n return {\n normalizedOptions,\n flattenedOptions,\n fetchsOptions,\n needsMoreCharsToFetch,\n needsMoreCharsMessage,\n fetchingOptions,\n fetchingMoreOptions,\n fetchedOptionsHaveMorePages,\n optionsWereFetched,\n fetchOptions,\n prefetchOptions,\n fetchMoreOptions,\n fetchOptionsCancel,\n };\n}\n"
},
{
"path": "src/use/useInjectsClassesList.ts",
"content": "import { CSSClassesList } from '@variantjs/core';\nimport { ComputedRef, computed } from 'vue';\nimport useInjectsConfiguration from './useInjectsConfiguration';\n\nexport default function useInjectsClassesList(): ComputedRef {\n const configuration = useInjectsConfiguration();\n\n return computed((): CSSClassesList => configuration.classesList || {});\n}\n"
},
{
"path": "src/use/useInjectsClassesListClass.ts",
"content": "import { CSSClass, get } from '@variantjs/core';\nimport { ComputedRef, computed } from 'vue';\nimport useInjectsConfiguration from './useInjectsConfiguration';\n\nexport default function useInjectsClassesListClass(property: string): ComputedRef {\n const configuration = useInjectsConfiguration();\n\n return computed((): CSSClass => get(configuration.classesList, property, ''));\n}\n"
},
{
"path": "src/use/useInjectsConfiguration.ts",
"content": "import { Data, WithVariantPropsAndClassesList } from '@variantjs/core';\nimport { inject } from 'vue';\n\nexport default function useInjectsConfiguration>(): P {\n return inject
('configuration', {} as P);\n}\n"
},
{
"path": "src/use/useMulipleableVModel.ts",
"content": "import { Data } from '@variantjs/core';\nimport {\n computed, ref, getCurrentInstance, Ref, watch,\n} from 'vue';\n\nexport default function useMulipleableVModel
(\n props: P,\n key: K,\n configuration?: C,\n): {\n localValue: Ref;\n clearValue: () => void\n } {\n const vm = getCurrentInstance();\n\n const isMultiple = computed((): boolean => (configuration === undefined ? false : configuration.multiple !== null && configuration.multiple !== undefined && configuration.multiple !== false));\n\n const getDefaultValue = (): P[K] => {\n if (isMultiple.value) {\n return [] as P[K];\n }\n\n return undefined as P[K];\n };\n\n const initialValue = props[key];\n\n const localValue = ref(initialValue === undefined ? getDefaultValue() : initialValue) as Ref;\n\n watch(localValue, (value) => {\n vm?.emit(`update:${key}`, value);\n });\n\n watch(() => props[key], (value) => {\n localValue.value = value;\n });\n\n const clearValue = () : void => {\n localValue.value = getDefaultValue();\n };\n\n watch(isMultiple, () => {\n clearValue();\n });\n\n return {\n localValue,\n clearValue,\n };\n}\n"
},
{
"path": "src/use/useMultioptions.ts",
"content": "import {\n flattenOptions,\n InputOptions,\n NormalizedOption,\n NormalizedOptions,\n normalizeOptions,\n} from '@variantjs/core';\nimport { computed, ComputedRef, Ref } from 'vue';\n\nexport default function useMultioptions(\n options: Ref,\n textAttribute: Ref,\n valueAttribute: Ref,\n normalize: Ref,\n): {\n normalizedOptions: ComputedRef\n flattenedOptions: ComputedRef\n } {\n const normalizedOptions = computed(() => {\n if (!normalize.value) {\n return options.value as NormalizedOptions;\n }\n\n return normalizeOptions(\n options.value,\n textAttribute.value,\n valueAttribute.value,\n );\n });\n\n // Flattened array with all posible options\n const flattenedOptions = computed((): NormalizedOption[] => flattenOptions(normalizedOptions.value));\n\n return {\n normalizedOptions,\n flattenedOptions,\n };\n}\n"
},
{
"path": "src/use/useSelectableOption.ts",
"content": "/* eslint-disable no-param-reassign */\nimport {\n addToArray, isEqual, NormalizedOption, substractFromArray,\n} from '@variantjs/core';\nimport {\n computed, ComputedRef, Ref, ref, watch,\n} from 'vue';\n\ntype SelectedOption = NormalizedOption | NormalizedOption[] | undefined;\n\nexport default function useSelectableOption(\n options: Ref,\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n localValue: Ref,\n multiple: Ref,\n): {\n selectedOption: Ref,\n hasSelectedOption: ComputedRef,\n selectOption: (option: NormalizedOption) => void,\n toggleOption: (option: NormalizedOption) => void,\n optionIsSelected: (option: NormalizedOption) => boolean,\n } {\n const optionIsSelected = (option: NormalizedOption): boolean => {\n if (multiple.value === true) {\n return Array.isArray(localValue.value)\n && localValue.value.some((value) => isEqual(value, option.value));\n }\n\n return isEqual(localValue.value, option.value);\n };\n\n const getSelectedOption = (currentSelectedOption?: SelectedOption): SelectedOption => {\n let allOptions: NormalizedOption[] = options.value;\n\n // If the option is part of the current selected option is desired to use\n // those option since its possible that the options is not in the list\n // For example: an option that was selected from an ajax list but was removed\n if (Array.isArray(currentSelectedOption)) {\n allOptions = allOptions\n // Remove the options that are also on the current selected option list\n .filter((option) => !currentSelectedOption.some((selectedOption) => isEqual(selectedOption.value, option.value)))\n // Concat the current selected option list\n .concat(currentSelectedOption);\n } else if (currentSelectedOption !== undefined) {\n allOptions = allOptions\n // Remove the selected option if already exists in the list so it\n // can be replaced with the selected option\n .filter((option) => !isEqual(currentSelectedOption.value, option.value))\n .concat([currentSelectedOption]);\n }\n\n if (multiple.value === true) {\n if (Array.isArray(localValue.value)) {\n return allOptions.filter((option) => optionIsSelected(option));\n }\n\n return [];\n }\n\n return allOptions.find((option) => optionIsSelected(option));\n };\n\n const selectedOption = ref(getSelectedOption());\n\n const selectOption = (option: NormalizedOption): void => {\n if (optionIsSelected(option)) {\n return;\n }\n\n if (multiple.value === true) {\n if (Array.isArray(localValue.value)) {\n localValue.value = addToArray(localValue.value, option.value);\n selectedOption.value = addToArray(selectedOption.value, option);\n } else {\n localValue.value = [option.value];\n selectedOption.value = [option];\n }\n } else {\n localValue.value = option.value;\n selectedOption.value = option;\n }\n };\n\n const toggleOption = (option: NormalizedOption): void => {\n if (optionIsSelected(option)) {\n if (multiple.value === true) {\n localValue.value = substractFromArray(localValue.value, option.value);\n } else {\n localValue.value = undefined;\n }\n } else if (multiple.value === true) {\n if (Array.isArray(localValue.value)) {\n localValue.value = addToArray(localValue.value, option.value);\n } else {\n localValue.value = [option.value];\n }\n } else {\n localValue.value = option.value;\n }\n };\n\n watch([options, localValue], () => {\n selectedOption.value = getSelectedOption(selectedOption.value);\n });\n\n const hasSelectedOption = computed((): boolean => {\n if (multiple.value === true) {\n return (selectedOption.value as NormalizedOption[]).length > 0;\n }\n\n return selectedOption.value !== undefined;\n });\n\n return {\n selectedOption,\n hasSelectedOption,\n selectOption,\n toggleOption,\n optionIsSelected,\n };\n}\n"
},
{
"path": "src/use/useVModel.ts",
"content": "import { Data } from '@variantjs/core';\nimport {\n getCurrentInstance, Ref, watch, ref,\n} from 'vue';\n\nexport default function useVModel(\n props: P,\n key: K,\n): Ref {\n const vm = getCurrentInstance();\n\n const localValue = ref(props[key]) as Ref;\n\n watch(localValue, (value) => {\n vm?.emit(`update:${key}`, value);\n });\n\n watch(() => props[key], (value) => {\n localValue.value = value;\n });\n\n return localValue;\n}\n"
},
{
"path": "src/utils/createDialogProgramatically.ts",
"content": "import { DialogResponse, DialogType } from '@variantjs/core';\nimport { createApp } from 'vue';\nimport { TDialogOptions } from '../types/components/t-dialog';\nimport { VariantJSConfiguration } from '../types/variantCore';\n\nimport TDialog from '../components/TDialog.vue';\n\nconst createDialogProgramatically = (configuration: VariantJSConfiguration, type: DialogType, titleOrDialogOptions: TDialogOptions | string, text?: string, icon?: string) : Promise => {\n const { props } = TDialog;\n\n if (typeof titleOrDialogOptions === 'string') {\n props.title.default = titleOrDialogOptions;\n } else {\n Object.keys(titleOrDialogOptions).forEach((key) => {\n props[key].default = titleOrDialogOptions[key];\n });\n }\n\n if (typeof text === 'string') {\n props.text.default = text;\n }\n\n if (typeof icon === 'string') {\n props.icon.default = icon;\n }\n\n props.type.default = type;\n\n const instance = createApp(TDialog);\n\n instance.provide('configuration', configuration);\n\n const dialogInstance = instance.mount(document.createElement('div'));\n\n // eslint-disable-next-line @typescript-eslint/no-explicit-any\n const promise = (dialogInstance as any).show() as Promise;\n\n return promise\n .then((response) => {\n instance.unmount();\n\n return Promise.resolve(response);\n })\n .catch((error) => {\n instance.unmount();\n\n return Promise.reject(error);\n });\n};\n\nexport default createDialogProgramatically;\n"
},
{
"path": "src/utils/emitter.ts",
"content": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { EmitterEvents, EmitterFunction, EmitterInterface } from '../types';\n\nexport class Emitter implements EmitterInterface {\n /* eslint-disable tree-shaking/no-side-effects-in-initialization */\n private events: EmitterEvents = {};\n\n on(name: keyof EmitterEvents, callback: EmitterFunction): void {\n if (this.events[name] === undefined) {\n this.events[name] = [callback];\n } else {\n this.events[name].push(callback);\n }\n }\n\n once(name: keyof EmitterEvents, callback: EmitterFunction): void {\n const listener = (...args: any[]) => {\n callback(...args);\n this.off(name, listener);\n };\n\n return this.on(name, listener);\n }\n\n emit(name: keyof EmitterEvents, ...args: any[]): void {\n const events = this.events[name];\n\n if (events === undefined) {\n return;\n }\n\n events.forEach((callback) => {\n callback(...args);\n });\n }\n\n off(name: keyof EmitterEvents, callback: EmitterFunction): void {\n const events = this.events[name];\n\n if (events === undefined) {\n return;\n }\n\n const index = events.findIndex((c) => c === callback);\n\n if (index < 0) {\n return;\n }\n\n events.splice(index, 1);\n this.events[name] = events;\n }\n}\n"
},
{
"path": "src/utils/getVariantProps.ts",
"content": "import {\n CSSClass, CSSRawClassesList, Data, Variants, VariantsWithClassesList,\n} from '@variantjs/core';\n\nimport { PropType } from 'vue';\nimport { VariantJSProps, VariantJSWithClassesListProps } from '../types';\n\nconst getVariantProps = () : VariantJSProps => ({\n classes: {\n type: [String, Array, Object] as PropType,\n default: undefined,\n },\n fixedClasses: {\n type: [String, Array, Object] as PropType,\n default: undefined,\n },\n variants: {\n type: Object as PropType>,\n default: undefined,\n },\n variant: {\n type: String as PropType,\n default: undefined,\n },\n});\n\nconst getVariantPropsWithClassesList = () : VariantJSWithClassesListProps => ({\n classes: {\n type: [String, Array, Object] as PropType>,\n default: undefined,\n },\n fixedClasses: {\n type: [String, Array, Object] as PropType>,\n default: undefined,\n },\n variants: {\n type: Object as PropType>,\n default: undefined,\n },\n variant: {\n type: String as PropType,\n default: undefined,\n },\n});\n\nexport { getVariantProps, getVariantPropsWithClassesList };\n"
},
{
"path": "src/utils/popper.ts",
"content": "import { Modifier, ModifierArguments } from '@popperjs/core';\nimport { Data } from '@variantjs/core';\n\nconst sameWidthModifier: Modifier<'sameWidth', Data> = {\n name: 'sameWidth',\n enabled: true,\n phase: 'beforeWrite',\n requires: ['computeStyles'],\n fn: (options: ModifierArguments): void => {\n const { state } = options;\n state.styles.popper.width = `${state.rects.reference.width}px`;\n },\n effect: (options: ModifierArguments): void => {\n const { state } = options;\n const reference = state.elements.reference as HTMLElement;\n state.elements.popper.style.width = `${reference.offsetWidth}px`;\n },\n};\n\nexport { sameWidthModifier };\n"
},
{
"path": "src/utils/svgToVueComponent.ts",
"content": "import { Data } from '@variantjs/core';\nimport { h, VNode, VNodeProps } from 'vue';\n\nconst icons: {\n [key: string]: VNode\n} = {};\n\nexport const svgToVueComponent = (el: Element | string, deep = 0): VNode => {\n let iconAsString: string | null = null;\n\n if (deep === 0) {\n iconAsString = typeof el === 'string' ? el : el.outerHTML;\n\n if (icons[iconAsString]) {\n return icons[iconAsString];\n }\n }\n\n let elToConvert: Element | null | string = el;\n\n if (typeof elToConvert === 'string') {\n const div = document.createElement('div');\n div.innerHTML = elToConvert;\n elToConvert = div.firstElementChild;\n }\n\n if (elToConvert === null) {\n return h('span');\n }\n\n const attributes = Array.from(elToConvert.attributes);\n const children = Array.from(elToConvert.children);\n const attrs: VNodeProps & Data = {};\n\n attributes\n .filter((attribute: Attr) => !attribute.name.startsWith('on'))\n .forEach((attribute: Attr) => {\n attrs[attribute.name] = attribute.value;\n });\n\n const component = h(elToConvert.tagName, attrs, children.map((child) => svgToVueComponent(child, deep + 1)));\n\n if (deep === 0 && iconAsString !== null) {\n icons[iconAsString] = component;\n }\n\n return component;\n};\n"
},
{
"path": "tailwind.config.js",
"content": "module.exports = {\n content: [\n './src/development/**/*.{html,js,vue,ts}',\n './node_modules/@variantjs/core/src/config/**/*.ts'\n ],\n plugins: [\n require('@tailwindcss/forms'),\n ],\n}\n"
},
{
"path": "tsconfig.json",
"content": "{\n \"compilerOptions\": {\n \"target\": \"esnext\",\n \"module\": \"esnext\",\n \"declaration\": true,\n \"outDir\": \"./dist\",\n \"moduleResolution\": \"node\",\n \"strict\": true,\n \"jsx\": \"preserve\",\n \"sourceMap\": true,\n \"resolveJsonModule\": true,\n \"esModuleInterop\": true,\n \"lib\": [\"esnext\", \"dom\"],\n \"types\": [\"vite/client\", \"jest\"],\n },\n \"include\": [\"src/**/*.ts\", \"src/**/*.d.ts\", \"src/**/*.tsx\", \"src/**/*.vue\"],\n \"exclude\": [\"node_modules\"]\n}\n"
},
{
"path": "vite.config.ts",
"content": "import path from 'path'\nimport { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\nimport typescript from '@rollup/plugin-typescript'\n\nexport default defineConfig({\n plugins: [vue()],\n build: {\n minify: false,\n sourcemap: true,\n lib: {\n entry: path.resolve(__dirname, 'src/index.ts'),\n name: 'VariantJS',\n fileName: (format) => `index.${format}.js`\n },\n rollupOptions: {\n plugins: [\n typescript({\n \"exclude\": [\"node_modules\", 'src/__tests/**/*']\n }),\n ],\n external: ['vue', '@popperjs/core', '@variantjs/core'],\n output: {\n globals: {\n vue: 'Vue'\n },\n }\n }\n }\n})\n"
},
{
"path": "vite.demo.config.ts",
"content": "import { defineConfig } from 'vite'\nimport vue from '@vitejs/plugin-vue'\n\n// https://vitejs.dev/config/\nexport default defineConfig({\n plugins: [vue()],\n})\n"
}
]