@comercti/vue-components 0.31.0 → 0.33.0

package/index.d.ts

@@ -8,14 +8,24 @@ import { VNode } from 'vue';
 
 declare const __VLS_component: DefineComponent<DataTableProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
 "update:modelValue": (value: Record<string, any>[]) => any;
+input: (value: string) => any;
 updateSelected: (value: Record<string, any>[]) => any;
+"update:modelValueEditable": (value: {
+field: string;
+value: string | boolean | number;
+}) => any;
 orderBy: (value: {
 key: string;
 order: "asc" | "desc";
 }) => any;
 }, string, PublicProps, Readonly<DataTableProps> & Readonly<{
 "onUpdate:modelValue"?: (value: Record<string, any>[]) => any;
+onInput?: (value: string) => any;
 onUpdateSelected?: (value: Record<string, any>[]) => any;
+"onUpdate:modelValueEditable"?: (value: {
+field: string;
+value: string | boolean | number;
+}) => any;
 onOrderBy?: (value: {
 key: string;
 order: "asc" | "desc";
@@ -24,6 +34,7 @@ order: "asc" | "desc";
 search: boolean;
 selectable: boolean;
 singleSelect: boolean;
+initialSelectedRows: Record<string, unknown>[];
 striped: boolean;
 orderByServer: boolean;
 expandLine: boolean;
@@ -32,6 +43,14 @@ loading: boolean;
 loadingType: "spinner" | "semi-circle" | "dots";
 truncated: boolean;
 copyable: boolean;
+editable: boolean;
+editColumnStyle: {
+fields: string[];
+style?: Record<string, string>;
+class?: string;
+};
+backgroundPagination: "transparent" | `#${string}` | `rgb(${string})` | `rgba(${string})`;
+backgroundTitle: "transparent" | `#${string}` | `rgb(${string})` | `rgba(${string})`;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {
 rootRef: HTMLDivElement;
 }, HTMLDivElement>;
@@ -173,6 +192,7 @@ close: (value: boolean) => any;
 }, string, PublicProps, Readonly<__VLS_Props_29> & Readonly<{
 onClose?: (value: boolean) => any;
 }>, {
+class: string;
 background: "1" | "2";
 isOpen: boolean;
 closeOutside: boolean;
@@ -386,7 +406,7 @@ declare type __VLS_Props_10 = {
     /** Define o texto do botão */
     text: string;
     /** Define o botão selecionado */
-    selected: number;
+    selected: number | string;
     /** Define a variante do botão */
     variant: 'text' | 'radio';
     /** Define se o botão está desabilitado */
@@ -657,6 +677,8 @@ declare type __VLS_Props_29 = {
     closeOutside?: boolean;
     /** Define se o botão de fechar fica visível */
     showCloseButton?: boolean;
+    /** Define a diretivas do modal */
+    class?: string;
 };
 
 declare type __VLS_Props_3 = {
@@ -1704,7 +1726,7 @@ text: string;
 disabled: boolean;
 id: string | number;
 variant: "text" | "radio";
-selected: number;
+selected: number | string;
 }, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLButtonElement>;
 
 export declare const CeButtonPagination: DefineComponent<__VLS_Props_13, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {} & {
@@ -1978,11 +2000,20 @@ contoured: boolean;
 
 export declare const CeTooltip: __VLS_WithTemplateSlots_25<typeof __VLS_component_25, __VLS_TemplateResult_25["slots"]>;
 
+export declare const CeTruncated: DefineComponent<Props_2, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<Props_2> & Readonly<{}>, {
+reserveSpaceFeedback: boolean;
+indexItem: number;
+indexHeader: number;
+maxLength: number;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, HTMLDivElement>;
+
 declare interface Coluna {
     text: string;
     value: string;
 }
 
+declare type CSSColor = HexColor | RgbColor | RgbaColor | 'transparent';
+
 declare type DataTableProps = {
     /** Array utilizado no header da tabela
      *
@@ -2001,7 +2032,7 @@ declare type DataTableProps = {
     /** Ativa a opção de selecinar apenas um conteúdo da tabela */
     singleSelect?: boolean;
     /** Array de objetos que estão inicialmente selecionados na tabela */
-    initialSelectedRows?: Record<string, any>[];
+    initialSelectedRows?: Record<string, unknown>[];
     /** Ativa o input de pesquisa da tabela */
     search?: boolean;
     /** Array de objetos que serão exibidos na tabela */
@@ -2024,6 +2055,18 @@ declare type DataTableProps = {
     paginationStyle?: string;
     /** Habilita a funcionalidade de copiar o conteúdo da célula ao clicar */
     copyable?: boolean;
+    /** Habilita a funcionalidade de editar o conteúdo da célula ao clicar */
+    editable?: boolean;
+    /** Configurações para estilizar colunas editáveis */
+    editColumnStyle?: {
+        fields: string[];
+        style?: Record<string, string>;
+        class?: string;
+    };
+    /** Define o estilo de fundo do slot de paginação */
+    backgroundPagination?: CSSColor;
+    /** Define o estilo de fundo da area superior da tabela */
+    backgroundTitle?: CSSColor;
 };
 
 export declare const disableCeLoading: () => void;
@@ -2057,8 +2100,14 @@ declare type Header = {
     value: string | ((item: Record<string, unknown>) => string);
     sortable?: boolean;
     width?: string;
+    editableField?: {
+        type: InputType | 'boolean';
+        mask?: string | string[];
+    };
 };
 
+declare type HexColor = `#${string}`;
+
 declare interface IBreadcrumbsProps {
     /** Define o ponto de partida do breadcrumbs */
     home: string;
@@ -2151,6 +2200,8 @@ declare interface IItems {
     showDescription?: boolean;
 }
 
+declare type InputType = 'number' | 'search' | 'time' | 'text' | 'password' | 'email' | 'tel' | 'url' | 'date' | 'datetime-local';
+
 declare type IProgressStepsProps = {
     /** Define os itens que serão exibidos */
     items: IItems[];
@@ -2276,8 +2327,20 @@ declare interface Props {
     clearButton?: boolean;
 }
 
+declare interface Props_2 {
+    text: string;
+    indexItem?: number;
+    indexHeader?: number;
+    maxLength?: number;
+    reserveSpaceFeedback?: boolean;
+}
+
 export declare const removeCeToast: (id: number) => void;
 
+declare type RgbaColor = `rgba(${string})`;
+
+declare type RgbColor = `rgb(${string})`;
+
 declare interface SelectOption {
     label?: string;
     value?: string | number | boolean | null;
@@ -2361,6 +2424,7 @@ declare module 'vue' {
         'ce-button-pagination': typeof ButtonPaginationComponent;
         'ce-textarea': typeof TextareaComponent;
         'ce-code-input': typeof CodeInputComponent;
+        'ce-truncated': typeof TruncatedComponent;
     }
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@comercti/vue-components",
-  "version": "0.31.0",
+  "version": "0.33.0",
   "types": "index.d.ts",
   "type": "module",
   "license": "private",
@@ -19,64 +19,64 @@
     "prismjs": "^1.30.0",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
-    "veaury": "^2.6.2",
-    "vitest-sonar-reporter": "^2.0.0",
-    "vue": "^3.5.13"
+    "veaury": "^2.6.3",
+    "vitest-sonar-reporter": "^2.0.4",
+    "vue": "^3.5.29"
   },
   "peerDependencies": {
     "vue": ">=3.2.0"
   },
   "devDependencies": {
-    "@fontsource/exo-2": "^5.1.1",
-    "@storybook/addon-actions": "^8.5.5",
+    "@fontsource/exo-2": "^5.2.8",
+    "@storybook/addon-actions": "^8.6.18",
     "@storybook/addon-essentials": "8.5.5",
     "@storybook/addon-interactions": "8.5.5",
     "@storybook/addon-onboarding": "8.5.5",
     "@storybook/addon-postcss": "^2.0.0",
-    "@storybook/addon-viewport": "^8.5.5",
+    "@storybook/addon-viewport": "^8.6.18",
     "@storybook/addons": "^7.6.17",
     "@storybook/blocks": "8.5.5",
-    "@storybook/manager-api": "^8.5.5",
+    "@storybook/manager-api": "^8.6.14",
     "@storybook/test": "8.5.5",
-    "@storybook/theming": "^8.5.5",
+    "@storybook/theming": "^8.6.14",
     "@storybook/vue3": "8.5.5",
     "@storybook/vue3-vite": "8.5.5",
-    "@tsconfig/node22": "^22.0.0",
+    "@tsconfig/node22": "^22.0.5",
     "@types/jsdom": "^21.1.7",
-    "@types/node": "^22.13.2",
-    "@types/react": "^17.0.85",
+    "@types/node": "^22.19.15",
+    "@types/react": "^17.0.91",
     "@types/react-dom": "^17.0.26",
-    "@vitejs/plugin-react": "^4.4.1",
-    "@vitejs/plugin-vue": "^5.2.1",
-    "@vitejs/plugin-vue-jsx": "^4.1.1",
+    "@vitejs/plugin-react": "^4.7.0",
+    "@vitejs/plugin-vue": "^5.2.4",
+    "@vitejs/plugin-vue-jsx": "^4.2.0",
     "@vitest/coverage-v8": "3.0.5",
     "@vitest/eslint-plugin": "1.1.25",
     "@vitest/ui": "3.0.5",
     "@vue/eslint-config-prettier": "^10.2.0",
-    "@vue/eslint-config-typescript": "^14.4.0",
+    "@vue/eslint-config-typescript": "^14.7.0",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.7.0",
-    "autoprefixer": "^10.4.20",
-    "eslint": "^9.20.1",
-    "eslint-plugin-storybook": "^0.11.2",
-    "eslint-plugin-vue": "^9.32.0",
-    "jiti": "^2.4.2",
-    "jsdom": "^26.0.0",
+    "autoprefixer": "^10.4.27",
+    "eslint": "^9.39.3",
+    "eslint-plugin-storybook": "^0.11.6",
+    "eslint-plugin-vue": "^9.33.0",
+    "jiti": "^2.6.1",
+    "jsdom": "^26.1.0",
     "npm-run-all2": "^7.0.2",
-    "postcss": "^8.5.2",
-    "prettier": "^3.5.1",
+    "postcss": "^8.5.8",
+    "prettier": "^3.8.1",
     "storybook": "8.5.5",
     "storybook-addon-vue-mdx": "^1.0.6",
     "storybook-dark-mode": "^4.0.2",
-    "tailwindcss": "^3.4.17",
+    "tailwindcss": "^3.4.19",
     "typescript": "~5.7.3",
-    "vite": "^6.1.0",
+    "vite": "^6.4.1",
     "vite-plugin-css-injected-by-js": "^3.5.2",
-    "vite-plugin-dts": "^4.5.0",
-    "vite-plugin-vue-devtools": "^7.7.2",
-    "vitest": "^3.0.5",
+    "vite-plugin-dts": "^4.5.4",
+    "vite-plugin-vue-devtools": "^7.7.9",
+    "vitest": "^3.2.4",
     "vue-loader": "^17.4.2",
-    "vue-tsc": "^2.2.0"
+    "vue-tsc": "^2.2.12"
   },
   "contributors": [
     {