@pantograph/pattern-vue 0.0.3 → 0.0.5

package/dist/components/Form/types.d.ts

@@ -0,0 +1,418 @@
+import { FormItemSize, FormContext as _FormContext, FormItemStatus, FormItemContext as _FormItemContext, DefineComponent } from '@pantograph/utils-vue';
+import { ClassValue } from 'clsx';
+import { FormOptions, GenericValidateFunction, InvalidSubmissionContext, RuleExpression, TypedSchema, FormContext as VeeValidateForm, YupSchema, FieldContext, FieldOptions } from 'vee-validate';
+import { Direction, LabelProps } from '@pantograph/vue';
+import { Ref } from 'vue';
+/**
+ * Props for the FormItem component
+ */
+export type FormItemProps = Partial<Omit<FieldOptions, 'initialValue'>> & Omit<LabelProps, 'size'> & {
+    /**
+     * Text direction for the component
+     */
+    dir?: Direction;
+    /**
+     * CSS classes to apply to the form item
+     */
+    class?: ClassValue;
+    /**
+     * CSS classes to apply to the input container
+     */
+    inputCls?: ClassValue;
+    /**
+     * CSS classes to apply to the caption element
+     */
+    captionCls?: ClassValue;
+    /**
+     * CSS classes to apply to the explanation container
+     */
+    explanationCls?: ClassValue;
+    /**
+     * CSS classes to apply to individual explanation items
+     */
+    explanationItemCls?: ClassValue;
+    /**
+     * Size of the form item
+     */
+    size?: FormItemSize;
+    /**
+     * Name of the form field (required)
+     */
+    name: string | (string | number)[];
+    /**
+     * Validation rules for the field
+     */
+    rules?: FormRuleItem;
+    /**
+     * Current value of the field (v-model)
+     */
+    modelValue?: any;
+    /**
+     * ID for the form input element
+     */
+    id?: string;
+    /**
+     * Caption text to display below the input
+     */
+    caption?: string;
+    /**
+     * Status of the form item (error, warning, success)
+     */
+    status?: FormItemStatus;
+    /**
+     * Whether the form item is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to validate the field on blur
+     * @default true
+     */
+    validateOnBlur?: boolean;
+};
+/**
+ * Events emitted by the FormItem component
+ */
+export interface FormItemEmits {
+    /**
+     * Emitted when the field value changes
+     */
+    'update:modelValue': [value?: any];
+    /**
+     * Emitted when the field value changes
+     */
+    change: [value?: any];
+}
+/**
+ * Type for vee-validate field context
+ */
+export type FormField = FieldContext<any>;
+/**
+ * Props passed to FormItem slots
+ */
+export type FormItemSlotsProps = {
+    status?: FormItemStatus;
+    /**
+     * FormField context from vee-validate
+     */
+    field: FormField;
+    /**
+     * Form context (if inside a Form component)
+     */
+    form?: FormType;
+    /**
+     * @deprecated
+     */
+    model: Ref<any, any>;
+    /**
+     * Blur event handler
+     */
+    onBlur: (event: any) => void;
+    /**
+     * Change event handler
+     */
+    onChange: (event: any) => void;
+};
+/**
+ * Type for individual form item slot items
+ */
+export type FormItemSlotItem = (data: FormItemSlotsProps) => never;
+/**
+ * Slots for the FormItem component
+ */
+export interface FormItemSlots {
+    /**
+     * Slot for the label
+     */
+    label?: FormItemSlotItem;
+    /**
+     * Slot for the leading icon
+     */
+    leadingIcon?: FormItemSlotItem;
+    /**
+     * Slot for the required indicator
+     */
+    required?: FormItemSlotItem;
+    /**
+     * Slot for the optional indicator
+     */
+    optional?: FormItemSlotItem;
+    /**
+     * Slot for the info icon
+     */
+    infoIcon?: FormItemSlotItem;
+    /**
+     * Slot for the info tooltip
+     */
+    info?: FormItemSlotItem;
+    /**
+     * Slot for the description
+     */
+    description?: FormItemSlotItem;
+    /**
+     * Default slot for the input component
+     */
+    default?: (data: FormItemSlotsProps & {
+        id: string;
+    }) => never;
+    /**
+     * Slot for the caption
+     */
+    caption?: FormItemSlotItem;
+    /**
+     * Slot for validation messages explanation
+     */
+    explanation?: FormItemSlotItem;
+    /**
+     * Slot for individual validation messages
+     */
+    explanationItem?: (data: FormItemSlotsProps & {
+        message: string;
+    }) => never;
+}
+/**
+ * Context type for the FormItem component
+ */
+export type FormItemContext = _FormItemContext<FormItemProps, FormField>;
+/**
+ * Interface defining default validation rules available in the form
+ */
+interface DefaultValidators {
+    /**
+     * Validates that the field contains only alphabetic characters, numbers, dashes and underscores
+     */
+    alpha_dash: string | {
+        /**
+         * Locale to use for validation
+         */
+        locale?: string;
+    };
+    /**
+     * Validates that the field contains only alphabetic characters and numbers
+     */
+    alpha_num: string | {
+        /**
+         * Locale to use for validation
+         */
+        locale?: string;
+    };
+    /**
+     * Validates that the field contains only alphabetic characters and spaces
+     */
+    alpha_spaces: string | {
+        /**
+         * Locale to use for validation
+         */
+        locale?: string;
+    };
+    /**
+     * Validates that the field contains only alphabetic characters
+     */
+    alpha: string | {
+        /**
+         * Locale to use for validation
+         */
+        locale?: string;
+    };
+    /**
+     * Validates that the field value is between two values
+     */
+    between: [string | number, string | number] | {
+        /**
+         * Minimum value
+         */
+        min: number | string;
+        /**
+         * Maximum value
+         */
+        max: number | string;
+    };
+    /**
+     * Validates that the field is confirmed by another field value
+     */
+    confirmed: string | {
+        /**
+         * Target field name to confirm against
+         */
+        target: string;
+    };
+    /**
+     * Validates that the field contains only digits with specified length
+     */
+    digits: [string | number] | {
+        /**
+         * Required length of digits
+         */
+        length: string | number;
+    };
+    /**
+     * Validates image dimensions
+     */
+    dimensions: [number | string, number | string] | {
+        /**
+         * Required width
+         */
+        width: string | number;
+        /**
+         * Required height
+         */
+        height: string | number;
+    };
+    /**
+     * Validates that the field contains a valid email
+     */
+    email: boolean;
+    /**
+     * Validates that the file has one of the specified extensions
+     */
+    ext: string[];
+    /**
+     * Validates that the field contains an image file
+     */
+    image: boolean;
+    /**
+     * Validates that the field contains an integer value
+     */
+    integer: boolean;
+    /**
+     * Validates that the field value is not a specific value
+     */
+    is_not: unknown;
+    /**
+     * Validates that the field value is a specific value
+     */
+    is: unknown;
+    /**
+     * Validates the length of the field value
+     */
+    length: string | number;
+    /**
+     * Validates that the field value is less than or equal to the maximum value
+     */
+    max_value: string | number;
+    /**
+     * Validates that the field value length is less than or equal to the maximum
+     */
+    max: string | number;
+    /**
+     * Validates that the file has one of the specified MIME types
+     */
+    mimes: string[];
+    /**
+     * Validates that the field value is greater than or equal to the minimum value
+     */
+    min_value: string | number;
+    /**
+     * Validates that the field value length is greater than or equal to the minimum
+     */
+    min: string | number;
+    /**
+     * Validates that the field value is not one of the specified values
+     */
+    not_one_of: unknown[];
+    /**
+     * Validates that the field contains only numeric characters
+     */
+    numeric: boolean;
+    /**
+     * Validates that the field value is one of the specified values
+     */
+    one_of: unknown[];
+    /**
+     * Validates that the field matches a specified regular expression
+     */
+    regex: string | RegExp;
+    /**
+     * Validates that the field is required and not empty
+     */
+    required: boolean;
+    /**
+     * Validates the file size
+     */
+    size: string | number;
+    /**
+     * Validates that the field contains a valid URL
+     */
+    url: string | RegExp;
+}
+/**
+ * Type definition for form validation rules
+ */
+export type FormRuleItem<FT = any> = string | (Partial<DefaultValidators> & Record<string, unknown>) | GenericValidateFunction<FT> | GenericValidateFunction<FT>[] | TypedSchema<any> | YupSchema<any> | undefined;
+/**
+ * Type for validation schema which can be an object of rules, a typed schema, or a Yup schema
+ */
+export type FormValidationSchema = Record<string, FormRuleItem> | TypedSchema | YupSchema;
+/**
+ * Props for the Form component
+ */
+export interface FormProps extends Partial<Omit<FormOptions<any>, 'validationSchema'>> {
+    /**
+     * Text direction for the component
+     */
+    dir?: Direction;
+    /**
+     * The validation schema for the form
+     */
+    validationSchema?: FormValidationSchema;
+    /**
+     * The form data (v-model)
+     */
+    modelValue?: object;
+    /**
+     * CSS classes to apply to the form
+     */
+    class?: ClassValue;
+    /**
+     * Size for all form items in the form
+     */
+    size?: FormItemSize;
+    /**
+     * Whether the form is disabled
+     */
+    disabled?: boolean;
+}
+/**
+ * Events emitted by the Form component
+ */
+export interface FormEmits {
+    /**
+     * Emitted when the form data changes
+     */
+    'update:modelValue': [value?: object];
+    /**
+     * Emitted when the form is submitted successfully
+     */
+    submit: [data: object];
+    /**
+     * Emitted when form validation fails
+     */
+    validationFail: [data: InvalidSubmissionContext];
+}
+/**
+ * Type alias for the vee-validate form context
+ */
+export type FormType = VeeValidateForm;
+/**
+ * Type for the form component exposes
+ */
+export type FormExposes = FormType;
+/**
+ * Slots for the Form component
+ */
+export interface FormSlots {
+    /**
+     * Default slot for form content
+     */
+    default?: (data: FormExposes) => never;
+}
+/**
+ * Context type for the Form component
+ */
+export type FormContext = _FormContext<FormProps, FormType, FormValidationSchema, FormRuleItem, RuleExpression<any>>;
+declare module 'vue' {
+    interface GlobalComponents {
+        Form: DefineComponent<FormProps, FormSlots, FormEmits>;
+        FormItem: DefineComponent<FormItemProps, FormItemSlots, FormItemEmits>;
+    }
+}
+export {};

package/dist/components/GOPicker/GOItemSkeleton.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDivElement>;
+export default _default;

package/dist/components/GOPicker/GOPicker.d.ts

@@ -0,0 +1,33 @@
+import { ColorSwatchGroupProps } from '@pantograph/vue';
+import { GOItem, GOPickerModel, GOPickerProps, GOPickerSlots } from './types';
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<GOPickerProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value?: GOPickerModel | undefined) => any;
+    select: (value: GOItem) => any;
+    clear: () => any;
+    "update:group": (value?: "icon" | "emoji" | undefined) => any;
+    "update:search": (value?: string | undefined) => any;
+    "update:modelValue": (value?: GOPickerModel | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<GOPickerProps> & Readonly<{
+    onChange?: ((value?: GOPickerModel | undefined) => any) | undefined;
+    onSelect?: ((value: GOItem) => any) | undefined;
+    onClear?: (() => any) | undefined;
+    "onUpdate:group"?: ((value?: "icon" | "emoji" | undefined) => any) | undefined;
+    "onUpdate:search"?: ((value?: string | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value?: GOPickerModel | undefined) => any) | undefined;
+}>, {
+    disabled: boolean;
+    popoverProps: import('@pantograph/vue').PopoverProps;
+    bordered: boolean;
+    visibleTabs: ("icon" | "emoji")[];
+    colorPopoverProps: import('@pantograph/vue').PopoverProps;
+    fgColorSwatchGroupProps: ColorSwatchGroupProps;
+    bgColorSwatchGroupProps: ColorSwatchGroupProps;
+    brColorSwatchGroupProps: ColorSwatchGroupProps;
+    visibleColorPickers: ("br" | "fg" | "bg")[];
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<GOPickerSlots> & GOPickerSlots>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/GOPicker/constant.d.ts

@@ -0,0 +1,40 @@
+export declare const goPickerPrefix: string;
+export declare const GO_PICKER_DEFAULT_POPOVER_PROPS: {
+    forceMount: boolean;
+    disableOutsidePointerEvents: boolean;
+};
+/**
+ * Default props for the GOPicker component
+ */
+export declare const GO_PICKER_DEFAULT_PROPS: {
+    readonly visibleTabs: () => ("icon" | "emoji")[];
+    readonly visibleColorPickers: () => ("br" | "fg" | "bg")[];
+    readonly popoverProps: () => {
+        forceMount: boolean;
+        disableOutsidePointerEvents: boolean;
+    };
+    readonly colorPopoverProps: () => {
+        forceMount: boolean;
+        disableOutsidePointerEvents: boolean;
+    };
+    readonly fgColorSwatchGroupProps: () => {
+        popoverProps: {
+            forceMount: boolean;
+            disableOutsidePointerEvents: boolean;
+        };
+    };
+    readonly bgColorSwatchGroupProps: () => {
+        popoverProps: {
+            forceMount: boolean;
+            disableOutsidePointerEvents: boolean;
+        };
+    };
+    readonly brColorSwatchGroupProps: () => {
+        popoverProps: {
+            forceMount: boolean;
+            disableOutsidePointerEvents: boolean;
+        };
+    };
+    readonly disabled: undefined;
+    readonly bordered: true;
+};

package/dist/components/GOPicker/emojis.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Array of emoji items for the GOPicker component
+ * Each item includes the emoji character, group, and associated keywords
+ */
+declare const emojiList: ({
+    value: string;
+    group: number;
+    keywords: string[];
+    skins?: undefined;
+} | {
+    value: string;
+    group: number;
+    skins: ({
+        value: string;
+        version: number;
+        tone: number;
+    } | {
+        value: string;
+        version: number;
+        tone: number[];
+    })[];
+    keywords: string[];
+})[];
+export default emojiList;

package/dist/components/GOPicker/getEmojiList.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Comprehensive list of emojis for the GOPicker component
+ * Contains detailed emoji data including values, groups, and keywords
+ */
+export declare const emojiList: ({
+    value: string;
+    group: number;
+    keywords: string[];
+    skins?: undefined;
+} | {
+    value: string;
+    group: number;
+    skins: ({
+        value: string;
+        version: number;
+        tone: number;
+    } | {
+        value: string;
+        version: number;
+        tone: number[];
+    })[];
+    keywords: string[];
+})[];
+export declare const getEmojiList: (list: string[]) => ({
+    value: string;
+    group: number;
+    keywords: string[];
+    skins?: undefined;
+} | {
+    value: string;
+    group: number;
+    skins: ({
+        value: string;
+        version: number;
+        tone: number;
+    } | {
+        value: string;
+        version: number;
+        tone: number[];
+    })[];
+    keywords: string[];
+})[];

package/dist/components/GOPicker/icons.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Array of icon items for the GOPicker component
+ * Each item includes the icon name and associated keywords for search functionality
+ */
+declare const _default: {
+    value: string;
+    keywords: string[];
+}[];
+export default _default;

package/dist/components/GOPicker/index.d.ts

@@ -0,0 +1,6 @@
+import { default as GOPicker } from './GOPicker';
+export { GOPicker };
+export * from './model';
+export * from './types';
+export * from './constant';
+export * from './getEmojiList';

package/dist/components/GOPicker/model.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Array of available picker groups
+ */
+export declare const GoPickerGroups: readonly ["icon", "emoji"];
+/**
+ * Type representing the possible picker groups
+ */
+export type GoPickerGroup = (typeof GoPickerGroups)[number];
+/**
+ * Array of available color options for the picker
+ */
+export declare const GoPickerColors: readonly ["fg", "bg", "br"];
+/**
+ * Type representing the possible color options
+ */
+export type GoPickerColor = (typeof GoPickerColors)[number];