{"_id":"jovencio-datatable-vue","_rev":"58-dd387d17fc0c9d1218cae7c1435052f1","name":"jovencio-datatable-vue","dist-tags":{"latest":"1.4.4","beta":"1.4.3-beta.3"},"versions":{"1.0.0":{"name":"jovencio-datatable-vue","version":"1.0.0","_id":"jovencio-datatable-vue@1.0.0","maintainers":[{"name":"lucasjovencio","email":"lucasjovencio@outlook.com.br"}],"dist":{"shasum":"cd247e3b811c92e127788edfa1285fe517cdfa68","tarball":"https://registry.npmjs.org/jovencio-datatable-vue/-/jovencio-datatable-vue-1.0.0.tgz","fileCount":7,"integrity":"sha512-XF/dY3TG6DMpr4rICFo4uU6NI6NsrtixKgGulLgzGsAjXv9KhuHgUFSfl/zjYhWPEmoUT/nD58kDjvlCWwm1+A==","signatures":[{"sig":"MEQCIG7pmlXPGHX/+xMr/l2ks3i3pIDlPytW/NJU0WuXJO94AiBH60EDQb0o7dDBelnLbfci1iDf5Ilee0xa5AR20S799A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":4179},"type":"module","private":false,"scripts":{"dev":"vite","build":"vite build","preview":"vite preview"},"_npmUser":{"name":"lucasjovencio","email":"lucasjovencio@outlook.com.br"},"_npmVersion":"10.8.3","description":"This template should help get you started developing with Vue 3 in Vite. The template uses Vue 3 `\n```\n\n\n# Lib Config\n\n``` js\n:columns=\"arr as JovencioDataTableColumn[]\"\n\ninterface JovencioClousure {\n (provider: JovencioProviderClousure): void;\n}\n\ninterface JovencioDataTableMeta {\n row: number|string,\n col: number|string,\n settings?: object\n}\n\ninterface MaskNumber {\n locale?: string\n fraction?: number\n unsigned?: boolean\n}\n\ninterface MaskToken {\n pattern: RegExp\n multiple?: boolean\n optional?: boolean\n repeated?: boolean\n transform?: (char: string) => string\n}\n\ninterface MaskGroup {\n mask?: {\n mask?: MaskType\n tokens?: MaskToken,\n tokensReplace?: boolean\n eager?: boolean\n reversed?: boolean\n number?: MaskNumber\n },\n tokens?: MaskToken,\n number?: string | string[] | MaskNumber | null,\n preProcess?: string | ((input: string) => string),\n postProcess?: string | ((input: string) => string),\n}\n\ninterface MaskaDatatableI18n {\n i18n?: {\n 'pt-BR': MaskGroup;\n 'en': MaskGroup;\n };\n}\n\ntype MaskType = string | string[] | ((input: string) => string) | null\ntype MaskaDatatable = MaskaDatatableI18n | MaskGroup;\ntype Types = 'string' | 'num' | 'moment';\ninterface JovencioDataTableColumn {\n id: string,\n name: string | (() => string),\n orderable: boolean,\n searchable: boolean,\n mask: MaskaDatatable,\n type?: Types,\n class?: string,\n colspan?: Number,\n rowspan?: Number,\n render?(data: any, type: string, row: any, meta: JovencioDataTableMeta): void,\n triggers?(addClousure:JovencioClousure): void\n}\n```\n\n\n## Properties of JovencioDataTableColumn:\n\n- **id**: `string` \n - The JSON property identifier. \n\n- **name**: `string | (() => string)` \n - The visible name of the column in the table. It can also be an anonymous function that returns the column name based on the selected language. \n\n- **orderable**: `boolean` \n - Allows the datatable to sort the table based on the property. \n\n- **searchable**: `boolean` \n - Enables datatable global search functionality for the column. \n\n- **mask**: `MaskaDatatable` \n - Implements the [Maska](https://github.com/beholdr/maska) interface. You can also define an `i18n` object with specific masks for `en` and `pt-BR`. \n\n- **type**: `Types` \n - The primary column types compatible with Criteria. \n\n- **class**: `string` \n - Property to add a CSS class to the cell. \n\n- **colspan**: `Number` \n - The number of columns a cell should span. \n\n- **rowspan**: `Number` \n - The number of rows a cell should span. \n\n- **render**: `(data: any, type: string, row: any, meta: JovencioDataTableMeta): void` \n - Defines custom rendering for the cell in the datatable. You can modify the information visible in the table cell here. \n - Reactive button generation is implemented within the `render` function (explained here). \n\n- **triggers**: `(addClousure: JovencioClousure): void` \n - Method to register events for reactive buttons defined in the `render` property. \n\n\n\n## Creating a Reactive Button in the Table\n```js\nrender: function (data: any, type: string, row: any, meta: JovencioDataTableMeta) {\n const provider = {\n 'object': row,\n 'meta': meta,\n 'key': 'clousure-body',\n 'buttons': [\n {\n key: 'listen',\n enable: true,\n custom_element: 'button',\n name: (\"Description Listen\"),\n show_name: false,\n class:\"button inline-flex items-center justify-center px-4 py-3 mb-1 whitespace-nowrap rounded text-base font-medium leading-none shadow-sm transition duration-150 ease-in-out text-white dark:text-white bg-red-600 hover:bg-red-900 dark:bg-red-600 dark:hover:bg-red-400 border-red-600 hover:border-red-900 dark:border-red-600 dark:hover:border-red-400 border-1 border mr-2 px-1 py-1 text-sm\",\n order: 0,\n svg: ``,\n class_id: 'load-listen-datatable'\n } as JovencioButtonGenerate,\n ] as JovencioButtonProvider\n };\n return ((data) ? data : '')+' '+JovencioDatatableCommon.providerButtonDT(provider);\n}\n```\n\n- **object**: `any` \n - The complete object of the row.\n\n- **meta**: `JovencioDataTableMeta` \n - Properties of the cell.\n\n- **key**: `string` \n - Grouping key for reactive buttons in the cell. \n - This grouping is essential for button reactivity.\n\n- **buttons**: `JovencioButtonGenerate[]` \n - **key**: `string` \n - Identifier for buttons. For predefined types like [block, edit, delete], configurations are already provided using Tailwind CSS. For custom buttons, specify a unique name.\n\n - **enable**: `boolean` \n - Configuration to restrict the button based on the connected user's authorization.\n\n - **custom_element**: `string` \n - Default is `button`. This property allows you to define the tag to be used.\n\n - **class_id**: `string` \n - Prefix for button grouping. This `class_id` is important for button reactivity but not required for [block, edit, delete]. \n - Mandatory for custom buttons that are not [block, edit, delete].\n\n - **name**: `string` \n - Name of the button to display.\n\n - **show_name**: `boolean` \n - Defines whether the display name of the button will be shown. Defaults to `false`.\n\n - **class**: `string` \n - Property to redefine the button's CSS class.\n\n - **order**: `number` \n - Property to define the button order.\n\n - **svg**: `string` \n - Property to set the SVG icon for the button. Requires the complete SVG tag.\n\n - **html_icon**: `string` \n - Property to define an HTML icon tag. If set, it replaces the `svg` property.\n\n - **svg_secondary**: `string` \n - Property to define a secondary SVG icon. This tag works only for the `block` button type.\n\n\n\n## Making a Button Reactive\n``` js\ntriggers: function (addClousure: JovencioClousure) {\n addClousure({\n 'selector': '.load-listen-datatable-clousure-body',\n 'trigger': 'listen',\n 'triggerSignature': 'triggerListen',\n 'enable': true,\n });\n\n addClousure({\n 'selector': '.load-locks-datatable-clousure-actions',\n 'enable': true,\n 'type': 'lock',\n });\n\n addClousure({\n 'selector': '.load-edits-datatable-clousure-actions',\n 'triggerSignature': 'triggerShow',\n 'lock': 'lock-edit',\n 'enable': false,\n });\n\n addClousure({\n 'selector': '.load-deletes-datatable-clousure-actions',\n 'triggerSignature': 'triggerDelete',\n 'lock': 'lock-delete',\n 'enable': false,\n });\n\n addClousure({\n 'selector': '.load-duplicates-datatable-clousure-actions',\n 'triggerSignature': 'triggerDuplicate',\n 'lock': 'lock-duplicate',\n 'enable': false,\n });\n}\n```\n\n- **selector** \n - Property to identify buttons, consisting of two attributes: `class_id` from `JovencioButtonGenerate` and `key` from `JovencioButtonProvider`, in the sequence `class_id + key`. \n - The `class_id` from `JovencioButtonGenerate` for [block, edit, delete] is immutable, while the `key` from `JovencioButtonProvider` varies according to the closure of the button set.\n\n- **trigger** \n - Property to emit events. The default trigger is `trigger`. This declared property can be used as `@trigger` or `@customTrigger` in the datatable component to call a function within your component.\n\n- **triggerSignature** \n - Property to define an identification signature for the trigger. Useful when all events fire to the same trigger.\n\n- **enable** \n - Property to define the button's availability. Useful for rules related to the logged-in user.\n\n- **lock** \n - Property to specify if the button will be locked by a `lock` button. This property must be set in the format `lock-exibe_modal`, where `lock` defines the type of action (in this case, lock) and `exibe_modal` is a `key` from `JovencioButtonGenerate`.\n\n\n# BR\n\nUma biblioteca que integra biblioteca [DataTable Vue 3](https://github.com/DataTables/Vue) tornando ela reativa ao seu projeto, a lib oficial não tem suporte nativo a component's reativos do vue, e essa biblioteca foi desenvolvida para torna essa biblioteca perfeita ainda mais perfeita.\n \n## Features \n - [SearchBuilder.Criteria](https://datatables.net/extensions/searchbuilder) \n em até 3 níveis.\n - Ordenação de colunas por ajax do datatable\n - Pesquisa em colunas por ajax do datatable\n - I18n (pt-BR e en)\n - [Maska](https://github.com/beholdr/maska) em campos de [SearchBuilder.Criteria](https://datatables.net/extensions/searchbuilder)\n\n## Install\n\n```sh\nnpm i jovencio-datatable-vue\n```\n\n## Usage/Examples\n- [Preview](https://codesandbox.io/p/devbox/35y7kg)\n\n\n```js\n\n\n
\n \n \n\n \n \n
\n\n\n\n```\n\n# Configurações da lib\n\n``` js\n:columns=\"arr as JovencioDataTableColumn[]\"\n\ninterface JovencioClousure {\n (provider: JovencioProviderClousure): void;\n}\n\ninterface JovencioDataTableMeta {\n row: number|string,\n col: number|string,\n settings?: object\n}\n\ninterface MaskNumber {\n locale?: string\n fraction?: number\n unsigned?: boolean\n}\n\ninterface MaskToken {\n pattern: RegExp\n multiple?: boolean\n optional?: boolean\n repeated?: boolean\n transform?: (char: string) => string\n}\n\ninterface MaskGroup {\n mask?: {\n mask?: MaskType\n tokens?: MaskToken,\n tokensReplace?: boolean\n eager?: boolean\n reversed?: boolean\n number?: MaskNumber\n },\n tokens?: MaskToken,\n number?: string | string[] | MaskNumber | null,\n preProcess?: string | ((input: string) => string),\n postProcess?: string | ((input: string) => string),\n}\n\ninterface MaskaDatatableI18n {\n i18n?: {\n 'pt-BR': MaskGroup;\n 'en': MaskGroup;\n };\n}\n\ntype MaskType = string | string[] | ((input: string) => string) | null\ntype MaskaDatatable = MaskaDatatableI18n | MaskGroup;\ntype Types = 'string' | 'num' | 'moment';\ninterface JovencioDataTableColumn {\n id: string,\n name: string | (() => string),\n orderable: boolean,\n searchable: boolean,\n mask: MaskaDatatable,\n type?: Types,\n class?: string,\n colspan?: Number,\n rowspan?: Number,\n render?(data: any, type: string, row: any, meta: JovencioDataTableMeta): void,\n triggers?(addClousure:JovencioClousure): void\n}\n```\n\n## Propriedades de JovencioDataTableColumn:\n\n- **id**: `string` \n - Propriedade que representa o identificador único da coluna no JSON.\n\n- **name**: `string | (() => string)` \n - Nome visível da coluna na tabela. Pode ser uma função anônima que retorna o nome da coluna de acordo com o idioma selecionado.\n\n- **orderable**: `boolean` \n - Define se a coluna pode ser ordenada no DataTable.\n\n- **searchable**: `boolean` \n - Permite que a coluna seja pesquisável pelo método de pesquisa global do DataTable.\n\n- **mask**: `MaskaDatatable` \n - Implementa a interface do [Maska](https://github.com/beholdr/maska). É possível também utilizar um objeto i18n, permitindo diferentes formata","readmeFilename":"README.md"}