@pantograph/pattern-vue 0.0.3 → 0.0.5

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

@@ -0,0 +1,353 @@
+import { ClassValue } from 'clsx';
+import { ComputedRef, Ref } from 'vue';
+import { BaseInputSlots, ColorSwatchSlots, ColorSwatchGroupProps, ColorTriggerSize, Direction, GraphicalObjectBG, GraphicalObjectBR, GraphicalObjectFG, InputProps, PopoverProps, ScrollContainerProps } from '@pantograph/vue';
+import { GoPickerColor, GoPickerGroup } from './model';
+import { DefineComponent } from '@pantograph/utils-vue';
+/**
+ * Represents a graphical object item (icon or emoji)
+ */
+export interface GOItem {
+    /**
+     * Keywords associated with the item for search functionality
+     */
+    keywords?: string[];
+    /**
+     * The value of the item (icon name or emoji character)
+     */
+    value: string;
+    /**
+     * Group identifier for categorization
+     */
+    group?: number;
+}
+/**
+ * Model representing the selected graphical object with styling options
+ */
+export interface GOPickerModel {
+    /**
+     * The selected value (icon name or emoji character)
+     */
+    value: string;
+    /**
+     * The type of graphical object (icon or emoji)
+     */
+    type: GoPickerGroup | 'custom';
+    /**
+     * Foreground color for the graphical object
+     */
+    fg?: string | GraphicalObjectFG;
+    /**
+     * Background color for the graphical object
+     */
+    bg?: string | GraphicalObjectBG;
+    /**
+     * Border color for the graphical object
+     */
+    br?: string | GraphicalObjectBR;
+}
+/**
+ * Props for the GOPicker component
+ */
+export interface GOPickerProps {
+    /**
+     * Text direction for the component
+     */
+    dir?: Direction;
+    /**
+     * Array of icon items to display in the picker
+     */
+    icons?: GOItem[];
+    /**
+     * Array of emoji items to display in the picker
+     */
+    emojis?: GOItem[];
+    /**
+     * The currently selected group (icon or emoji)
+     */
+    group?: GoPickerGroup;
+    /**
+     * The current value of the picker (v-model)
+     */
+    modelValue?: GOPickerModel;
+    /**
+     * The default value for the picker
+     */
+    defaultValue?: GOPickerModel;
+    /**
+     * Tabs to show in the picker
+     * @default ['icon', 'emoji']
+     */
+    visibleTabs?: GoPickerGroup[];
+    /**
+     * Whether to hide the trigger element
+     * @default false
+     */
+    noTrigger?: boolean;
+    /**
+     * Whether to disable model binding
+     * @default false
+     */
+    noModel?: boolean;
+    /**
+     * Whether to hide the clear button
+     * @default false
+     */
+    hideClear?: boolean;
+    /**
+     * Whether to hide the color options
+     * @default false
+     */
+    hideColor?: boolean;
+    /**
+     * Whether to hide the group selector
+     * @default false
+     */
+    hideGroup?: boolean;
+    /**
+     * Whether to hide the icons tab
+     * @default false
+     */
+    hideIcons?: boolean;
+    /**
+     * Whether to hide the emojis tab
+     * @default false
+     */
+    hideEmojis?: boolean;
+    /**
+     * Whether to hide the search input
+     * @default false
+     */
+    hideSearch?: boolean;
+    /**
+     * Whether to hide the random button
+     * @default false
+     */
+    hideRandom?: boolean;
+    /**
+     * Whether the picker is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether to show borders around the picker
+     * @default true
+     */
+    bordered?: boolean;
+    /**
+     * Props to pass to the main popover
+     * @default { forceMount: false }
+     */
+    popoverProps?: PopoverProps;
+    /**
+     * Props to pass to the color popover
+     * @default { forceMount: false }
+     */
+    colorPopoverProps?: PopoverProps;
+    /**
+     * Props to pass to the foreground color swatch group
+     * @default { popoverProps: { forceMount: false } }
+     */
+    fgColorSwatchGroupProps?: ColorSwatchGroupProps;
+    /**
+     * Props to pass to the background color swatch group
+     * @default { popoverProps: { forceMount: false } }
+     */
+    bgColorSwatchGroupProps?: ColorSwatchGroupProps;
+    /**
+     * Props to pass to the border color swatch group
+     * @default { popoverProps: { forceMount: false } }
+     */
+    brColorSwatchGroupProps?: ColorSwatchGroupProps;
+    /**
+     * Color pickers to show (foreground, background, border)
+     * @default ['bg', 'fg']
+     */
+    visibleColorPickers?: GoPickerColor[];
+    /**
+     * CSS classes to apply to the content container
+     */
+    contentCls?: ClassValue;
+    /**
+     * CSS classes to apply to the header
+     */
+    headerCls?: ClassValue;
+    /**
+     * CSS classes to apply to the group selector
+     */
+    groupCls?: ClassValue;
+    /**
+     * CSS classes to apply to the search input
+     */
+    searchCls?: ClassValue;
+    /**
+     * CSS classes to apply to the colors section
+     */
+    colorsCls?: ClassValue;
+    /**
+     * CSS classes to apply to the empty state
+     */
+    emptyCls?: ClassValue;
+    /**
+     * CSS classes to apply to the grid container
+     */
+    gridCls?: ClassValue;
+    /**
+     * Props to pass to the scroll container
+     */
+    scrollContainerProps?: ScrollContainerProps;
+    /**
+     * The size of the picker trigger
+     * @default 'md'
+     */
+    size?: ColorTriggerSize;
+    /**
+     * The ID for the picker
+     */
+    id?: string;
+    /**
+     * The current search query value
+     */
+    search?: string;
+    /**
+     * Props to pass to the search input component
+     */
+    inputProps?: InputProps;
+    inputCls?: ClassValue;
+    /**
+     * Which colors to reset when changing between icon and emoji types
+     */
+    resetColorsOnChangeType?: {
+        /**
+         * Colors to reset when switching to icon type
+         */
+        icon?: ('fg' | 'bg' | 'br')[];
+        /**
+         * Colors to reset when switching to emoji type
+         */
+        emoji?: ('fg' | 'bg' | 'br')[];
+    };
+}
+/**
+ * Events emitted by the GOPicker component
+ */
+export interface GOPickerEmits {
+    /**
+     * Emitted when the selected group is updated
+     */
+    'update:group': [value?: GoPickerGroup];
+    /**
+     * Emitted when the search value changes
+     */
+    'update:search': [value?: string];
+    /**
+     * Emitted when the model value is updated
+     */
+    'update:modelValue': [value?: GOPickerModel];
+    /**
+     * Emitted when the clear button is clicked
+     */
+    clear: [];
+    /**
+     * Emitted when the selected value changes
+     */
+    change: [value?: GOPickerModel];
+    /**
+     * Emitted when an item is selected
+     */
+    select: [value: GOItem];
+}
+/**
+ * Context interface for the GOPicker component
+ */
+export interface GOPickerContext {
+    /**
+     * Props passed to the component
+     */
+    props: GOPickerProps;
+    /**
+     * Reactive reference to the picker model
+     */
+    model: Ref<GOPickerModel | undefined>;
+    /**
+     * Computed reference to filtered icons
+     */
+    filteredIcons: ComputedRef<GOItem[]>;
+    /**
+     * Computed reference to filtered emojis
+     */
+    filteredEmojis: ComputedRef<GOItem[]>;
+    /**
+     * Function to set the selected value
+     */
+    setValue: (value: GOItem) => void;
+    /**
+     * Reactive reference to the current group
+     */
+    groupModel: Ref<GoPickerGroup | undefined>;
+}
+/**
+ * Slots for the GOPicker component
+ */
+export interface GOPickerSlots extends Partial<Pick<BaseInputSlots, 'leading' | 'trailing' | 'clearIcon'>> {
+    /**
+     * Customize the trigger element
+     * @param data - Data containing model value and component state
+     */
+    default?: (data: Partial<Pick<GOPickerProps, 'disabled' | 'bordered' | 'id'>> & {
+        model: GOPickerProps['modelValue'];
+    }) => never;
+    /**
+     * Customize the header for the foreground color picker
+     */
+    fgHeader?: (params?: object) => never;
+    /**
+     * Customize items in the foreground color picker
+     * @param data - Color swatch slot data
+     */
+    fgItem?: ColorSwatchSlots['default'];
+    /**
+     * Customize icons in the foreground color picker items
+     * @param data - Color swatch slot data
+     */
+    fgIcon?: ColorSwatchSlots['icon'];
+    /**
+     * Customize the header for the background color picker
+     */
+    bgHeader?: (params?: object) => never;
+    /**
+     * Customize items in the background color picker
+     * @param data - Color swatch slot data
+     */
+    bgItem?: ColorSwatchSlots['default'];
+    /**
+     * Customize icons in the background color picker items
+     * @param data - Color swatch slot data
+     */
+    bgIcon?: ColorSwatchSlots['icon'];
+    /**
+     * Customize the header for the border color picker
+     */
+    brHeader?: (params?: object) => never;
+    /**
+     * Customize items in the border color picker
+     * @param data - Color swatch slot data
+     */
+    brItem?: ColorSwatchSlots['default'];
+    /**
+     * Customize icons in the border color picker items
+     * @param data - Color swatch slot data
+     */
+    brIcon?: ColorSwatchSlots['icon'];
+    /**
+     * Customize how each icon/emoji item is rendered in the picker
+     * @param data - Information about the item and its group
+     */
+    item?: (data: {
+        item: GOItem;
+        group: GoPickerGroup | undefined;
+    }) => never;
+}
+declare module 'vue' {
+    interface GlobalComponents {
+        GOPicker: DefineComponent<GOPickerProps, GOPickerSlots, GOPickerEmits>;
+    }
+}

package/dist/components/InputPassword/InputPassword.d.ts

@@ -1,71 +1,4 @@
-import { InputExtendsEmits, InputExtendsProps, InputNotExtendsEmits, InputNotExtendsProps, InputSlots } from '@pantograph/vue';
-/**
- * Props inherited from Input component
- */
-export type InputPasswordExtendsProps = InputExtendsProps & InputNotExtendsProps;
-/**
- * Props specific to InputPassword component
- */
-export type InputPasswordNotExtendsProps = {
-    /**
-     * Whether the password is visible (v-model)
-     */
-    visible?: boolean;
-    /**
-     * Icon to display when the password is visible.
-     * @default 'tabler:eye-off'
-     */
-    visibleIcon?: string;
-    /**
-     * Icon to display when the password is hidden.
-     * @default 'tabler:eye'
-     */
-    invisibleIcon?: string;
-};
-/**
- * Props for the InputPassword component
- *
- * Extends all `Input` props and adds `visible` for password visibility control.
- */
-export type InputPasswordProps = InputPasswordExtendsProps & InputPasswordNotExtendsProps;
-/**
- * Slots for the InputPassword component
- *
- * Extends all `Input` slots. The `trailing` slot is still supported; when it is
- * empty we render a default visibility toggle icon.
- */
-export type InputPasswordSlots = InputSlots;
-/**
- * Emits inherited from Input component
- */
-export type InputPasswordExtendsEmits = InputExtendsEmits & InputNotExtendsEmits;
-/**
- * Emits specific to InputPassword component
- */
-export type InputPasswordNotExtendsEmits = {
-    /**
-     * Emitted when the visible state is updated
-     */
-    'update:visible': [value: boolean];
-};
-/**
- * Emits for the InputPassword component
- *
- * Extends all `Input` emits and adds visible state update.
- */
-export type InputPasswordEmits = InputPasswordExtendsEmits & InputPasswordNotExtendsEmits;
-/**
- * Default props for the InputPassword component
- */
-export declare const INPUT_PASSWORD_DEFAULT_PROPS: {
-    readonly visible: undefined;
-    readonly visibleIcon: "tabler:eye-off";
-    readonly invisibleIcon: "tabler:eye";
-    readonly readonly: undefined;
-    readonly disabled: undefined;
-    readonly bordered: true;
-    readonly clearIcon: "tabler:circle-x";
-};
+import { InputPasswordProps } from './types';
 declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<InputPasswordProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
     blur: (event: InputEvent) => any;
     change: (value?: string | null | undefined) => any;
@@ -83,14 +16,14 @@ declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<In
     "onUpdate:modelValue"?: ((value?: string | null | undefined) => any) | undefined;
     "onUpdate:visible"?: ((value: boolean) => any) | undefined;
 }>, {
-    readonly: boolean;
     disabled: boolean;
+    visible: boolean;
     clearIcon: string;
     bordered: boolean;
-    visible: boolean;
+    readonly: boolean;
     visibleIcon: string;
     invisibleIcon: string;
-}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<import('@pantograph/vue').InputExtendsSlots> & import('@pantograph/vue').InputExtendsSlots>;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<import('@pantograph/vue').InputSlots> & import('@pantograph/vue').InputSlots>;
 export default _default;
 type __VLS_WithTemplateSlots<T, S> = T & {
     new (): {

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

@@ -0,0 +1,12 @@
+/**
+ * Default props for the InputPassword component
+ */
+export declare const INPUT_PASSWORD_DEFAULT_PROPS: {
+    readonly visible: undefined;
+    readonly visibleIcon: "tabler:eye-off";
+    readonly invisibleIcon: "tabler:eye";
+    readonly readonly: undefined;
+    readonly disabled: undefined;
+    readonly bordered: true;
+    readonly clearIcon: "tabler:circle-x";
+};

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

@@ -1,8 +1,4 @@
-import { DefineComponent } from '@pantograph/utils-vue';
-import { default as InputPassword, InputPasswordSlots, InputPasswordEmits, InputPasswordExtendsEmits, InputPasswordExtendsProps, InputPasswordNotExtendsEmits, InputPasswordNotExtendsProps, InputPasswordProps, INPUT_PASSWORD_DEFAULT_PROPS } from './InputPassword';
-export { InputPassword, type InputPasswordProps, type InputPasswordExtendsProps, type InputPasswordNotExtendsProps, type InputPasswordSlots, type InputPasswordEmits, type InputPasswordExtendsEmits, type InputPasswordNotExtendsEmits, INPUT_PASSWORD_DEFAULT_PROPS, };
-declare module 'vue' {
-    interface GlobalComponents {
-        InputPassword: DefineComponent<InputPasswordProps, InputPasswordSlots, InputPasswordEmits>;
-    }
-}
+import { default as InputPassword } from './InputPassword';
+export { InputPassword };
+export * from './constant';
+export * from './types';

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

@@ -0,0 +1,46 @@
+import { InputEmits, InputSlots, InputProps } from '@pantograph/vue';
+import { DefineComponent } from '@pantograph/utils-vue';
+/**
+ * Props for the InputPassword component
+ *
+ * Extends all `Input` props and adds `visible` for password visibility control.
+ */
+export interface InputPasswordProps extends InputProps {
+    /**
+     * Whether the password is visible (v-model)
+     */
+    visible?: boolean;
+    /**
+     * Icon to display when the password is visible.
+     * @default 'tabler:eye-off'
+     */
+    visibleIcon?: string;
+    /**
+     * Icon to display when the password is hidden.
+     * @default 'tabler:eye'
+     */
+    invisibleIcon?: string;
+}
+/**
+ * Slots for the InputPassword component
+ *
+ * Extends all `Input` slots. The `trailing` slot is still supported; when it is
+ * empty we render a default visibility toggle icon.
+ */
+export type InputPasswordSlots = InputSlots;
+/**
+ * Emits for the InputPassword component
+ *
+ * Extends all `Input` emits and adds visible state update.
+ */
+export interface InputPasswordEmits extends InputEmits {
+    /**
+     * Emitted when the visible state is updated
+     */
+    'update:visible': [value: boolean];
+}
+declare module 'vue' {
+    interface GlobalComponents {
+        InputPassword: DefineComponent<InputPasswordProps, InputPasswordSlots, InputPasswordEmits>;
+    }
+}

package/dist/components/ListView/ListView.d.ts

@@ -0,0 +1,15 @@
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('@pantograph/vue').AccordionProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    change: (value: string | string[] | undefined) => any;
+    collapse: (value: string | string[] | undefined) => any;
+    "update:modelValue": (value: string | string[] | undefined) => any;
+}, string, import('vue').PublicProps, Readonly<import('@pantograph/vue').AccordionProps> & Readonly<{
+    onChange?: ((value: string | string[] | undefined) => any) | undefined;
+    onCollapse?: ((value: string | string[] | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | string[] | undefined) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<import('@pantograph/vue').AccordionSlots> & import('@pantograph/vue').AccordionSlots>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/ListView/ListViewItem.d.ts

@@ -0,0 +1,10 @@
+import { AccordionItemSlots } from '@pantograph/vue';
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<import('@pantograph/vue').AccordionItemProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('@pantograph/vue').AccordionItemProps> & Readonly<{}>, {
+    unmountOnHide: boolean;
+}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>, Readonly<AccordionItemSlots> & AccordionItemSlots>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

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

@@ -0,0 +1,4 @@
+export declare const listViewPrefix: string;
+export declare const LIST_VIEW_ITEM_DEFAULT_PROPS: {
+    unmountOnHide: boolean;
+};

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

@@ -0,0 +1,5 @@
+import { default as ListView } from './ListView';
+import { default as ListViewItem } from './ListViewItem';
+export { ListView, ListViewItem };
+export * from './constant';
+export * from './types';

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

@@ -0,0 +1,16 @@
+import { AccordionSlots, AccordionProps, AccordionEmits, AccordionItemSlots, AccordionItemProps } from '@pantograph/vue';
+import { DefineComponent } from '@pantograph/utils-vue';
+export type ListViewItemProps = AccordionItemProps;
+export type ListViewItemSlots = AccordionItemSlots;
+export type ListViewProps = AccordionProps;
+export type ListViewEmits = AccordionEmits & {
+    change: [value: ListViewProps['modelValue']];
+    collapse: [value: ListViewProps['modelValue']];
+};
+export type ListViewSlots = AccordionSlots;
+declare module 'vue' {
+    interface GlobalComponents {
+        ListView: DefineComponent<ListViewProps, ListViewSlots, ListViewEmits>;
+        ListViewItem: DefineComponent<ListViewItemProps, ListViewItemSlots>;
+    }
+}