From 56dd424cb9befbd9faabb47bd76576cd6ed0a98a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Milan=20Felix=20=C5=A0ulc?= Date: Wed, 7 Jun 2023 23:51:32 +0200 Subject: [PATCH] Assets: move to datagrid library --- assets/css/main.css | 9 +- assets/datagrid/ajax/index.ts | 1 - assets/datagrid/ajax/naja.ts | 135 ---- assets/datagrid/assets/datagrid.css | 632 ------------------ assets/datagrid/assets/happy.css.ts | 464 ------------- assets/datagrid/datagrid.ts | 152 ----- assets/datagrid/datagrids.ts | 85 --- assets/datagrid/index.ts | 6 - .../datagrid/integrations/bootstrap-select.ts | 46 -- assets/datagrid/integrations/happy.ts | 222 ------ assets/datagrid/integrations/index.ts | 5 - assets/datagrid/integrations/sortable-js.ts | 58 -- assets/datagrid/integrations/tom-select.ts | 23 - .../integrations/vanilla-datepicker.ts | 14 - .../datagrid/plugins/features/autosubmit.ts | 69 -- .../datagrid/plugins/features/checkboxes.ts | 92 --- assets/datagrid/plugins/features/confirm.ts | 28 - assets/datagrid/plugins/features/editable.ts | 118 ---- assets/datagrid/plugins/features/inline.ts | 73 -- .../datagrid/plugins/features/item-detail.ts | 51 -- assets/datagrid/plugins/features/treeView.ts | 39 -- assets/datagrid/plugins/index.ts | 12 - .../plugins/integrations/datepicker.ts | 17 - assets/datagrid/plugins/integrations/happy.ts | 19 - .../plugins/integrations/nette-forms.ts | 18 - .../plugins/integrations/selectpicker.ts | 17 - .../datagrid/plugins/integrations/sortable.ts | 62 -- assets/datagrid/types/ajax.d.ts | 136 ---- assets/datagrid/types/datagrid.d.ts | 29 - assets/datagrid/types/index.d.ts | 40 -- assets/datagrid/types/integrations.d.ts | 14 - assets/datagrid/utils.ts | 180 ----- assets/js/main.js | 36 +- package-lock.json | 157 +++-- package.json | 1 + vite.config.js | 1 - 36 files changed, 118 insertions(+), 2943 deletions(-) delete mode 100644 assets/datagrid/ajax/index.ts delete mode 100644 assets/datagrid/ajax/naja.ts delete mode 100644 assets/datagrid/assets/datagrid.css delete mode 100644 assets/datagrid/assets/happy.css.ts delete mode 100644 assets/datagrid/datagrid.ts delete mode 100644 assets/datagrid/datagrids.ts delete mode 100644 assets/datagrid/index.ts delete mode 100644 assets/datagrid/integrations/bootstrap-select.ts delete mode 100644 assets/datagrid/integrations/happy.ts delete mode 100644 assets/datagrid/integrations/index.ts delete mode 100644 assets/datagrid/integrations/sortable-js.ts delete mode 100644 assets/datagrid/integrations/tom-select.ts delete mode 100644 assets/datagrid/integrations/vanilla-datepicker.ts delete mode 100644 assets/datagrid/plugins/features/autosubmit.ts delete mode 100644 assets/datagrid/plugins/features/checkboxes.ts delete mode 100644 assets/datagrid/plugins/features/confirm.ts delete mode 100644 assets/datagrid/plugins/features/editable.ts delete mode 100644 assets/datagrid/plugins/features/inline.ts delete mode 100644 assets/datagrid/plugins/features/item-detail.ts delete mode 100644 assets/datagrid/plugins/features/treeView.ts delete mode 100644 assets/datagrid/plugins/index.ts delete mode 100644 assets/datagrid/plugins/integrations/datepicker.ts delete mode 100644 assets/datagrid/plugins/integrations/happy.ts delete mode 100644 assets/datagrid/plugins/integrations/nette-forms.ts delete mode 100644 assets/datagrid/plugins/integrations/selectpicker.ts delete mode 100644 assets/datagrid/plugins/integrations/sortable.ts delete mode 100644 assets/datagrid/types/ajax.d.ts delete mode 100644 assets/datagrid/types/datagrid.d.ts delete mode 100644 assets/datagrid/types/index.d.ts delete mode 100644 assets/datagrid/types/integrations.d.ts delete mode 100644 assets/datagrid/utils.ts diff --git a/assets/css/main.css b/assets/css/main.css index 2f39b39..f608161 100644 --- a/assets/css/main.css +++ b/assets/css/main.css @@ -1,9 +1,6 @@ -@import "@fortawesome/fontawesome-free/css/all.css"; -@import 'bootstrap/dist/css/bootstrap.css'; -@import 'prismjs/themes/prism-okaidia.css'; - -@import './../datagrid/assets/datagrid.css'; -@import 'vanillajs-datepicker/css/datepicker-bs5.css'; +/* Datagrid styles */ +@import '@contributte/datagrid/assets/css/datagrid-full.css'; /* App styles */ +@import 'prismjs/themes/prism-okaidia.css'; @import './styles.css'; diff --git a/assets/datagrid/ajax/index.ts b/assets/datagrid/ajax/index.ts deleted file mode 100644 index 23b37df..0000000 --- a/assets/datagrid/ajax/index.ts +++ /dev/null @@ -1 +0,0 @@ -export * from "./naja"; diff --git a/assets/datagrid/ajax/naja.ts b/assets/datagrid/ajax/naja.ts deleted file mode 100644 index b9d0840..0000000 --- a/assets/datagrid/ajax/naja.ts +++ /dev/null @@ -1,135 +0,0 @@ -import type {Naja} from "naja"; -import type { - Ajax, - RequestParams, - Payload, - DatagridPayload, - EventDetail, - EventListener, - Response as AjaxResponse, - BaseRequestParams as AjaxBaseRequestParams, - BeforeEventDetail as BaseBeforeEventDetail, - ErrorEventDetail as BaseErrorEventDetail, - InteractEventDetail as BaseInteractEventDetail, - SuccessEventDetail as BaseSuccessEventDetail, - AjaxEventMap as BaseAjaxEventMap, -} from "@datagrid/types"; -import {Datagrid} from "@datagrid/datagrid"; -import {BeforeEvent, SuccessEvent, ErrorEvent, Payload as NajaPayload} from "naja/dist/Naja"; -import {InteractionEvent} from "naja/dist/core/UIHandler"; - -export interface BaseRequestParams extends AjaxBaseRequestParams, Request { - url: string; - method: string; -} - -export interface BeforeEventDetail extends BaseBeforeEventDetail { - params: EventDetail & RequestParams; -} - -export interface InteractEventDetail< - E extends HTMLElement = HTMLElement -> extends BaseInteractEventDetail, EventDetail { - element: E; -} - -export interface SuccessEventDetail< - P = DatagridPayload -> extends BaseSuccessEventDetail, EventDetail { - params: BaseRequestParams; - payload: Payload

& NajaPayload; - response: AjaxResponse & Response; -} - -export interface ErrorEventDetail< - E extends Error = Error, -> extends BaseErrorEventDetail, EventDetail { - params: BaseRequestParams; - response: (AjaxResponse & Response) | undefined; - error: E; -} - -export interface AjaxEventMap extends BaseAjaxEventMap { - before: CustomEvent; - interact: CustomEvent; - snippetUpdate: CustomEvent; - success: CustomEvent; - error: CustomEvent; -} - -export class NajaAjax extends EventTarget implements Ajax { - constructor(public client: C) { - if (!client.VERSION || client.VERSION < 2) { - throw new Error("NajaAjax supports Naja 2 and higher" + (client.VERSION ? `(version ${client.VERSION} provided)` : '')) - } - super(); - } - - onInit() { - this.client.addEventListener('before', (e) => { - return this.dispatch('before', { - params: e.detail - }); - }) - - this.client.uiHandler.addEventListener('interaction', (e) => { - if (!(e.detail.element instanceof HTMLElement)) { - throw new Error("Element is not an instanceof HTMLElement"); - } - - return this.dispatch('interact', { - ...e.detail, - element: e.detail.element as HTMLElement // Naja's event has a type of HTMLElement - }) - }) - - - this.client.addEventListener('success', (e) => { - return this.dispatch('success', { - ...e.detail, - params: e.detail.request, - payload: e.detail.payload as Payload - }); - }) - - this.client.addEventListener('error', (e) => { - return this.dispatch('error', { - ...e.detail, - params: e.detail.request, - response: e.detail.response, - }); - }) - - return this; - } - - async request(args: RequestParams): Promise

{ - return await this.client.makeRequest(args.method, args.url, args.data) as P; - } - - async submitForm(element: E): Promise

{ - return await this.client.uiHandler.submitForm(element) as P; - } - - dispatch< - K extends string, M extends BaseAjaxEventMap = AjaxEventMap - >(type: K, detail: K extends keyof M ? EventDetail : any, options?: boolean): boolean { - return this.dispatchEvent(new CustomEvent(type, {detail})); - } - - declare addEventListener: ( - type: K, - listener: EventListener, - options?: boolean | AddEventListenerOptions - ) => void; - - declare removeEventListener: ( - type: K, - listener: EventListener, - options?: boolean | AddEventListenerOptions - ) => void; - - declare dispatchEvent: ( - event: K extends keyof M ? M[K] : CustomEvent - ) => boolean; -} diff --git a/assets/datagrid/assets/datagrid.css b/assets/datagrid/assets/datagrid.css deleted file mode 100644 index 8b096ce..0000000 --- a/assets/datagrid/assets/datagrid.css +++ /dev/null @@ -1,632 +0,0 @@ -/* .datagrid--slide-toggle > td > div { - -webkit-transition: height .25s ease; - -o-transition: height .25s ease; - transition: height .25s ease; - overflow: hidden; -} */ - -.datagrid--content-row:not(.is-active) > td /*> div*/ { - display: none; -} - -@keyframes edited { - 0% { - background-color: #A6E2A9 - } - - 100% { - background-color: transparent - } - -} - -@keyframes edited-error { - 0% { - background-color: #E8AAA4 - } - - 100% { - background-color: transparent - } - -} - -.datagrid { - background-color: #fff; - padding: 1em; - box-sizing: border-box -} - -.datagrid .datagrid-input-group-full-width { - width: 100% -} - -.datagrid .hidden { - display: none !important -} - -.datagrid .datagrid-collapse-filters-button-row { - margin-bottom: 0.5em -} - -.datagrid .col-action .dropdown { - display: inline-block -} - -.datagrid .datagrid-row-inline-add.datagrid-row-inline-add-hidden { - display: none -} - -.datagrid .datagrid-row-columns-summary td { - border-top: 2px solid #bbb; - border-left: 1px solid #eee; - border-right: 1px solid #eee; - font-weight: bold -} - -.datagrid .datagrid-row-columns-summary td:first-child { - border-left: 1px solid #ddd -} - -.datagrid .datagrid-row-columns-summary td:last-child { - border-right: 1px solid #ddd -} - -.datagrid .datagrid-toolbar { - margin-top: .35em; - float: right; - display: inline-block -} - -.datagrid .datagrid-toolbar > span { - margin-left: 1em -} - -.datagrid .datagrid-toolbar > span > a { - margin-left: 0.5em -} - -.datagrid-toolbar .fa-square, .datagrid-toolbar .fa-check-square { - font-weight: normal; -} - -.datagrid .datagrid-exports .btn { - margin-left: 0.5em -} - -.datagrid .datagrid-exports .btn:first-child { - margin-left: 0 -} - -.datagrid .datagrid-settings { - display: inline-block -} - -.datagrid .datagrid-settings .dropdown-menu--grid { - font-size: 12px -} - -.datagrid .datagrid-settings .dropdown-menu--grid li .fa { - margin-right: 0.5em -} - -.datagrid .row-reset-filter { - text-align: right; - margin-bottom: 0.5em -} - -.datagrid .row-filters .datagrid-row-outer-filters-group { - margin-bottom: 0.5em -} - -.datagrid .datagrid-manual-submit { - margin-bottom: 0.5em -} - -.datagrid .filter-range-delimiter { - text-align: center -} - -.datagrid .bootstrap-select.input-sm > .btn { - padding: 5px 25px 5px 10px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px -} - -.datagrid table { - margin: 0 -} - -.datagrid table thead tr .bootstrap-select:not([class*=col-]):not(.input-group-btn) { - width: auto -} - -.datagrid table thead tr .bootstrap-select:not([class*=col-]):not(.input-group-btn) > .btn { - width: auto -} - -.datagrid table thead tr .bootstrap-select:not([class*=col-]):not(.input-group-btn) .dropdown-menu li { - font-size: 13px -} - -.datagrid table thead tr.row-group-actions th { - border-bottom-width: 0 !important; - background-color: #f9f9f9 -} - -.datagrid table thead tr.row-group-actions .datagrid-selected-rows-count { - margin-left: 0.3em -} - -.datagrid table thead tr th { - font-size: 90%; - vertical-align: top -} - -.datagrid table thead tr th hr { - margin: 8px -8px -} - -.datagrid table thead tr th .datagrid-column-header-additions { - float: right -} - -.datagrid table thead tr th .datagrid-column-header-additions a[data-datagrid-reset-filter-by-column] { - margin-left: 0.3em; - color: #858585 -} - -.datagrid table thead tr th .datagrid-column-header-additions .column-settings-menu { - opacity: 0; - cursor: pointer; - margin-left: 0.3em; - display: inline-block -} - -.datagrid table thead tr th .datagrid-column-header-additions .column-settings-menu .dropdown-menu { - font-size: 12px -} - -.datagrid table thead tr th .datagrid-column-header-additions .column-settings-menu .dropdown-menu li .fa { - margin-right: 0.5em -} - -.datagrid table thead tr th .datagrid-column-header-additions .column-settings-menu .dropdown-toggle::after { - display: none !important -} - -.datagrid .datagrid-col-filter-date-range { - width: auto; - position: relative; - display: flex; - flex-wrap: wrap; - align-items: stretch; -} - -.datagrid .datagrid-col-filter-date-range > .input-group { - position: relative; - -ms-flex: 1 1 auto; - flex: 1 1 auto; - width: 1%; - margin-bottom: 0; -} - -.datagrid .datagrid-col-filter-datte-range-delimiter { - background-color: inherit; - border: none; - padding: .25rem .5rem -} - -.datagrid table thead tr th .datagrid-col-filter-range .form-control { - -webkit-border-radius: 3px; - -moz-border-radius: 3px; - border-radius: 3px -} - -.datagrid table thead tr th:hover .column-settings-menu { - opacity: 1 -} - -.datagrid table tbody td { - vertical-align: middle -} - -.datagrid table tbody tr.ui-sortable-helper { - display: table -} - -.datagrid table tbody tr .datagrid-inline-edit .form-control { - margin: -3px; - padding-bottom: 4px; - padding-top: 4px; - height: 28px -} - -.datagrid table tbody tr td[data-datagrid-editable-url].editing textarea { - padding: 2px; - margin: -3px -} - -.datagrid table tbody tr td.edited { - animation-name: edited; - animation-duration: 1.2s; - animation-delay: 0 -} - -.datagrid table tbody tr td.edited-error { - animation-name: edited-error; - animation-duration: 1.6s; - animation-delay: 0 -} - -.datagrid table th.col-checkbox, .datagrid table td.col-checkbox { - padding: 0; - width: 2.1em; - text-align: center; - vertical-align: middle -} - -.datagrid table th.col-checkbox .happy-checkbox, .datagrid table td.col-checkbox .happy-checkbox { - margin-right: 0 -} - -.datagrid table th.col-checkbox.col-checkbox-first, .datagrid table td.col-checkbox.col-checkbox-first { - border-top-color: transparent -} - -.datagrid table th.col-checkbox { - background-color: #f9f9f9 -} - -.datagrid table th.col-action, .datagrid table td.col-action { - white-space: nowrap; - width: 10px -} - -.datagrid table th.col-action { - text-align: center -} - -.datagrid table td.col-action { - text-align: right -} - -.datagrid table th.datagrid-fit-content, .datagrid table td.datagrid-fit-content { - width: 1%; - white-space: nowrap -} - -.datagrid .datagrid-tree > .datagrid-tree-header .datagrid-tree-item-right-actions-action { - opacity: 0 -} - -.datagrid .datagrid-tree > .datagrid-tree-item { - margin-left: 20px -} - -.datagrid .datagrid-tree .datagrid-tree-item { - position: relative -} - -.datagrid .datagrid-tree .datagrid-tree-item.ui-sortable-placeholder { - visibility: visible !important; - background-color: rgba(70, 83, 93, 0.1) -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content { - position: relative; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - box-sizing: border-box; - height: 37px; - box-shadow: inset 0px -1px 1px -1px #9B9B9B -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left, .datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right { - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left { - order: 1 -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left > .chevron { - -webkit-border-radius: 11px; - -moz-border-radius: 11px; - border-radius: 11px; - width: 22px; - height: 22px; - line-height: 20px; - vertical-align: middle; - background-color: #fff; - display: inline-block; - text-align: center; - position: relative; - margin: 0 5px 0 -27px; - transition: transform 0.2s ease-in-out -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left > .chevron:hover { - -webkit-box-shadow: 0px 0px 3px 0px #b4b4b4; - -moz-box-shadow: 0px 0px 3px 0px #b4b4b4; - box-shadow: 0px 0px 3px 0px #b4b4b4 -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left > .chevron.toggle-rotate { - transform: rotate(90deg) -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-left > .chevron .fa { - font-size: 10px; - transform: translate(1px, 0) -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right { - position: relative; - order: 2; - flex-basis: 50%; - display: flex; - flex-wrap: nowrap; - justify-content: flex-end; - flex-direction: row -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .btn { - margin-top: -3px -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns { - white-space: nowrap; - display: flex; - flex-basis: 70%; - flex-direction: row; - flex-wrap: nowrap; - justify-content: flex-end -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns .datagrid-tree-item-right-columns-column { - padding: 0 7px; - margin-right: 4px; - flex-basis: 25% -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-columns .datagrid-tree-item-right-columns-column:last-child { - margin-right: 0 -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-actions { - margin-left: 7px; - display: flex; - flex-direction: row; - flex-wrap: nowrap; - justify-content: space-between; - align-items: center -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-actions .datagrid-tree-item-right-actions-action { - margin-right: 4px -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-content .datagrid-tree-item-right .datagrid-tree-item-right-actions .datagrid-tree-item-right-actions-action:last-child { - margin-right: 0 -} - -.datagrid .datagrid-tree .datagrid-tree-item .datagrid-tree-item-children:not(.datagrid-tree) { - margin-left: 28px -} - -.datagrid .datagrid-tree .datagrid-tree-item:not(.has-children) > .datagrid-tree-item-children { - box-sizing: border-box; - position: relative; - width: calc(100% - 28px); - min-height: 9px; - margin-top: -9px -} - -.datagrid .datagrid-tree .datagrid-tree-item.has-children > .datagrid-tree-item-children { - display: none -} - -.datagrid .datagrid-tree .datagrid-tree-item.has-children > .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 14px) -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 14px) -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 28px) !important -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 42px) !important -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 56px) !important -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 74px) !important -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 88px) !important -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 102px) !important -} - -.datagrid .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-children .datagrid-tree-item-right { - flex-basis: calc(50% + 116px) !important -} - -.datagrid .btn { - transition: all 0.1s ease-in-out; - white-space: nowrap -} - -.datagrid select { - padding: 0; - text-transform: none -} - -.datagrid .row-grid-bottom { - font-size: 0; - padding: 8px; - background-color: #f9f9f9; - border: 1px solid #ddd; - border-top: 0 -} - -.datagrid .row-grid-bottom .col-items { - font-size: 14px; - display: inline-block; - width: 25% -} - -.datagrid .row-grid-bottom .col-pagination { - font-size: 14px; - display: inline-block; - width: 50% -} - -.datagrid .row-grid-bottom .col-per-page { - font-size: 14px; - display: inline-block; - width: 25% -} - -.datagrid .row-grid-bottom .col-per-page form { - display: inline-block -} - -.datagrid .row-grid-bottom .col-per-page .form-control { - width: auto; - display: inline-block -} - -.datagrid .row-grid-bottom .datagrid-per-page-submit { - position: absolute; - visibility: hidden; - width: 0; - top: -200px -} - -.datagrid .pagination.active > span { - color: #fff -} - -.datagrid .pagination > a.disabled { - color: #989898; - cursor: not-allowed -} - -.datagrid .pagination > a.active { - pointer-events: none; - cursor: default -} - -.datagrid .row-group-actions th { - font-weight: normal -} - -.datagrid .col-checkbox { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none -} - -.datagrid .col-checkbox .happy-checkbox { - margin-top: 2px -} - -.datagrid .datagrid-column-status-option-icon { - float: right -} - -@media (min-width: 768px) { - .datagrid .ublaboo-datagrid-th-form-inline .form-group { - display: inline-block; - margin-bottom: 0; - vertical-align: middle - } - - .datagrid .ublaboo-datagrid-th-form-inline .form-control { - display: inline-block; - width: auto; - vertical-align: middle - } - - .datagrid .ublaboo-datagrid-th-form-inline .form-control[hidden] { - display: none; - } - - .ublaboo-datagrid-th-form-inline .form-control[hidden] { - display: none; - } - - .datagrid .ublaboo-datagrid-th-form-inline .input-group { - display: inline-table; - vertical-align: middle - } - - .datagrid .ublaboo-datagrid-th-form-inline .input-group .form-control { - width: auto - } - - .datagrid .ublaboo-datagrid-th-form-inline .input-group > .form-control { - width: 100% - } - - .datagrid .input-group-text { - height: calc(1.5em + 0.5rem + 2px); - } - - .datagrid .ublaboo-datagrid-th-form-inline .control-label { - margin-bottom: 0; - vertical-align: middle - } - - .datagrid .ublaboo-datagrid-th-form-inline .radio, .datagrid .ublaboo-datagrid-th-form-inline .checkbox { - display: inline-block; - margin-top: 0; - margin-bottom: 0; - vertical-align: middle - } - - .datagrid .ublaboo-datagrid-th-form-inline .radio label, .datagrid .ublaboo-datagrid-th-form-inline .checkbox label { - padding-left: 0 - } - - .datagrid .ublaboo-datagrid-th-form-inline .radio input[type="radio"], .datagrid .ublaboo-datagrid-th-form-inline .checkbox input[type="checkbox"] { - position: relative; - margin-left: 0 - } - -} - -.datagrid .btn-xs, .datagrid .btn-group-xs > .btn { - padding: 1px 5px; - font-size: 12px; - line-height: 1.5; - border-radius: 3px -} - -.datagrid .dropdown-item { - padding: 3px 20px; - line-height: 1.42857143; - font-size: 12px; -} diff --git a/assets/datagrid/assets/happy.css.ts b/assets/datagrid/assets/happy.css.ts deleted file mode 100644 index 525ffbc..0000000 --- a/assets/datagrid/assets/happy.css.ts +++ /dev/null @@ -1,464 +0,0 @@ -export const happyStyles = `/** - * From happy-inputs by paveljanda: - * https://github.com/paveljanda/happy/blob/94357b7146b5f3029cc565859a588c5832dd374a/src/happy.css - */ - -.happy-color, -.happy-checkbox, -.happy-radio { - color: #333333; -} - -.happy-color > b, -.happy-checkbox > b, -.happy-radio > b { - background-color: #333333; -} - -.happy-color.active, -.active.happy-checkbox, -.active.happy-radio { - color: #333333; -} - -.happy-color.active > b, -.active.happy-checkbox > b, -.active.happy-radio > b { - background-color: #333333; -} - -.happy-color.primary, -.primary.happy-checkbox, -.primary.happy-radio { - color: #333333; -} - -.happy-color.primary > b, -.primary.happy-checkbox > b, -.primary.happy-radio > b { - background-color: #333333; -} - -.happy-color.primary.active, -.primary.active.happy-checkbox, -.primary.active.happy-radio { - color: #4c86bb; -} - -.happy-color.primary.active > b, -.primary.active.happy-checkbox > b, -.primary.active.happy-radio > b { - background-color: #4c86bb; -} - -.happy-color.success, -.success.happy-checkbox, -.success.happy-radio { - color: #333333; -} - -.happy-color.success > b, -.success.happy-checkbox > b, -.success.happy-radio > b { - background-color: #333333; -} - -.happy-color.success.active, -.success.active.happy-checkbox, -.success.active.happy-radio { - color: #72b889; -} - -.happy-color.success.active > b, -.success.active.happy-checkbox > b, -.success.active.happy-radio > b { - background-color: #72b889; -} - -.happy-color.info, -.info.happy-checkbox, -.info.happy-radio { - color: #333333; -} - -.happy-color.info > b, -.info.happy-checkbox > b, -.info.happy-radio > b { - background-color: #333333; -} - -.happy-color.info.active, -.info.active.happy-checkbox, -.info.active.happy-radio { - color: #5bc0de; -} - -.happy-color.info.active > b, -.info.active.happy-checkbox > b, -.info.active.happy-radio > b { - background-color: #5bc0de; -} - -.happy-color.warning, -.warning.happy-checkbox, -.warning.happy-radio { - color: #333333; -} - -.happy-color.warning > b, -.warning.happy-checkbox > b, -.warning.happy-radio > b { - background-color: #333333; -} - -.happy-color.warning.active, -.warning.active.happy-checkbox, -.warning.active.happy-radio { - color: #f0bb65; -} - -.happy-color.warning.active > b, -.warning.active.happy-checkbox > b, -.warning.active.happy-radio > b { - background-color: #f0bb65; -} - -.happy-color.danger, -.danger.happy-checkbox, -.danger.happy-radio { - color: #333333; -} - -.happy-color.danger > b, -.danger.happy-checkbox > b, -.danger.happy-radio > b { - background-color: #333333; -} - -.happy-color.danger.active, -.danger.active.happy-checkbox, -.danger.active.happy-radio { - color: #ed6b6b; -} - -.happy-color.danger.active > b, -.danger.active.happy-checkbox > b, -.danger.active.happy-radio > b { - background-color: #ed6b6b; -} - -.happy-color.white, -.white.happy-checkbox, -.white.happy-radio { - color: #333333; -} - -.happy-color.white > b, -.white.happy-checkbox > b, -.white.happy-radio > b { - background-color: #333333; -} - -.happy-color.white.active, -.white.active.happy-checkbox, -.white.active.happy-radio { - color: #ffffff; -} - -.happy-color.white.active > b, -.white.active.happy-checkbox > b, -.white.active.happy-radio > b { - background-color: #ffffff; -} - -.happy-border-color, -.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.active, -.active.happy-radio { - border-color: #333333; -} - -.happy-border-color.primary, -.primary.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.primary.active, -.primary.active.happy-radio { - border-color: #4c86bb; -} - -.happy-border-color.success, -.success.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.success.active, -.success.active.happy-radio { - border-color: #72b889; -} - -.happy-border-color.info, -.info.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.info.active, -.info.active.happy-radio { - border-color: #5bc0de; -} - -.happy-border-color.warning, -.warning.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.warning.active, -.warning.active.happy-radio { - border-color: #f0bb65; -} - -.happy-border-color.danger, -.danger.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.danger.active, -.danger.active.happy-radio { - border-color: #ed6b6b; -} - -.happy-border-color.white, -.white.happy-radio { - border-color: rgba(51, 51, 51, 0.8); -} - -.happy-border-color.white.active, -.white.active.happy-radio { - border-color: #ffffff; -} - -/** - * Common - */ - -input[type="radio"].happy, -input[type="checkbox"].happy { - position: absolute; - top: -50%; - left: -50%; - opacity: 0; -} - -label:not(.selectable), -.noselect { - -webkit-touch-callout: none; - -webkit-user-select: none; - -khtml-user-select: none; - -moz-user-select: none; - -ms-user-select: none; - user-select: none; -} - -label { - cursor: pointer; - position: relative; -} - -/** - * Checkbox - */ - -.happy-checkbox { - border-color: #333333; - margin-right: 0.2em; - position: relative; - display: inline-block; - line-height: 20px; - vertical-align: middle; - width: 16px; - height: 16px; - border-width: 2px; - border-style: solid; - cursor: pointer; - box-sizing: border-box; - top: -2px; - -webkit-border-radius: 2.66667px; - -moz-border-radius: 2.66667px; - border-radius: 2.66667px; -} - -.happy-checkbox svg { - position: absolute; - display: block; - top: -2px; - left: -2px; - height: 16px; - width: 16px; - opacity: 0; - -webkit-border-radius: 2.66667px; - -moz-border-radius: 2.66667px; - border-radius: 2.66667px; - background-color: #333333; - -ms-transform: scale(0.4); - -webkit-transform: scale(0.4); - transform: scale(0.4); - -ms-transition: all 180ms; - -webkit-transition: all 180ms; - transition: all 180ms; -} - -.happy-checkbox svg rect { - fill: white; -} - -.happy-checkbox svg rect:first-child { - -ms-transform: rotate(45deg); - -webkit-transform: rotate(45deg); - transform: rotate(45deg); -} - -.happy-checkbox svg rect:nth-child(2) { - -ms-transform: rotate(-45deg); - -webkit-transform: rotate(-45deg); - transform: rotate(-45deg); - /* fill: yellow; */ -} - -.happy-checkbox.thin { - border-width: 1px; -} - -.happy-checkbox.thin svg { - top: -1px; - left: -1px; -} - -.happy-checkbox.white { - border-color: #ffffff; -} - -.happy-checkbox.gray-border { - border-color: #858585; -} - -.happy-checkbox.primary-border { - border-color: #4c86bb; -} - -.happy-checkbox.success-border { - border-color: #72b889; -} - -.happy-checkbox.info-border { - border-color: #5bc0de; -} - -.happy-checkbox.warning-border { - border-color: #f0bb65; -} - -.happy-checkbox.danger-border { - border-color: #ed6b6b; -} - -.happy-checkbox.primary svg { - background-color: #4c86bb; -} - -.happy-checkbox.success svg { - background-color: #72b889; -} - -.happy-checkbox.info svg { - background-color: #5bc0de; -} - -.happy-checkbox.warning svg { - background-color: #f0bb65; -} - -.happy-checkbox.danger svg { - background-color: #ed6b6b; -} - -.happy-checkbox.white svg { - background-color: #ffffff; -} - -.happy-checkbox.white svg rect { - fill: #333333; -} - -.happy-checkbox.active { - border-color: transparent; -} - -.happy-checkbox.active svg { - opacity: 1; - -ms-transform: scale(1); - -webkit-transform: scale(1); - transform: scale(1); -} - -/** - * Radio - */ - -.happy-radio { - position: relative; - display: inline-block; - line-height: 20px; - vertical-align: middle; - width: 16px; - height: 16px; - border-width: 2px; - border-style: solid; - cursor: pointer; - box-sizing: border-box; - top: -2px; - -webkit-border-radius: 16px; - -moz-border-radius: 16px; - border-radius: 16px; -} - -.happy-radio.thin { - border-width: 1.66667px; -} - -.happy-radio b { - position: absolute; - display: block; - top: 2px; - left: 2px; - bottom: 2px; - right: 2px; - opacity: 0; - -webkit-border-radius: 10.66667px; - -moz-border-radius: 10.66667px; - border-radius: 10.66667px; - -ms-transform: scale(0.4); - -webkit-transform: scale(0.4); - transform: scale(0.4); - -ms-transition: all 180ms; - -webkit-transition: all 180ms; - transition: all 180ms; -} - -.happy-radio.active b { - opacity: 1; - -ms-transform: scale(1); - -webkit-transform: scale(1); - transform: scale(1); -} - -.happy-radio.focus { - outline: none; - -webkit-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); - -moz-box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); - box-shadow: 0px 0px 5px 0px rgba(50, 50, 50, 0.75); -} -`; diff --git a/assets/datagrid/datagrid.ts b/assets/datagrid/datagrid.ts deleted file mode 100644 index 337ed32..0000000 --- a/assets/datagrid/datagrid.ts +++ /dev/null @@ -1,152 +0,0 @@ -import {defaultDatagridNameResolver, isEnter} from "@datagrid/utils"; -import type { - DatagridEventMap, - EventListener, - Ajax, - DatagridOptions, EventDetail, -} from "@datagrid/types"; - -export class Datagrid extends EventTarget { - private static readonly defaultOptions: DatagridOptions = { - confirm: confirm, - resolveDatagridName: defaultDatagridNameResolver, - plugins: [], - }; - - public readonly name: string; - - public readonly ajax: Ajax; - - private readonly options: DatagridOptions; - - constructor( - public readonly el: HTMLElement, - ajax: Ajax | ((grid: Datagrid) => Ajax), - options: Partial - ) { - super(); - - this.options = { - ...Datagrid.defaultOptions, - ...options, - }; - - const name = this.resolveDatagridName(); - - if (!name) { - throw new Error("Cannot resolve name of a datagrid!"); - } - - this.name = name; - - this.ajax = typeof ajax === "function" ? ajax(this) : ajax; - - this.ajax.addEventListener("success", e => { - if (e.detail.payload?._datagrid_name === this.name && e.detail.payload?._datagrid_init) { - this.init(); - } - }); - - this.init(); - } - - public init() { - console.log("init") - - let cancelled = !this.dispatch('beforeInit', {datagrid: this}) - if (!cancelled) { - this.options.plugins.forEach((plugin) => { - plugin.onDatagridInit?.(this) - }) - } - - // Uncheck toggle-all - const checkedRows = this.el.querySelectorAll("input[data-check]:checked"); - if (checkedRows.length === 1 && checkedRows[0].getAttribute("name") === "toggle-all") { - const input = checkedRows[0]; - if (input) { - input.checked = false; - } - } - - this.el.querySelectorAll("input[data-datagrid-manualsubmit]").forEach(inputEl => { - const form = inputEl.closest("form"); - if (!form) return; - - inputEl.addEventListener("keydown", e => { - if (!isEnter(e)) return; - - e.stopPropagation(); - e.preventDefault(); - return this.ajax.submitForm(form); - }); - }); - - this.ajax.addEventListener("success", ({detail: {payload}}) => { - // todo: maybe move? - if (payload._datagrid_name && payload._datagrid_name === this.name) { - this.el.querySelector("[data-datagrid-reset-filter-by-column]") - ?.classList.add("hidden"); - - if (payload.non_empty_filters && payload.non_empty_filters.length >= 1) { - const resets = Array.from(this.el.querySelectorAll( - `[data-datagrid-reset-filter-by-column]` - )); - - const getColumnName = (el: HTMLElement) => el.getAttribute( - "data-datagrid-reset-filter-by-column" - ) - - /// tf? - for (const columnName of payload.non_empty_filters) { - resets.find(getColumnName)?.classList.remove("hidden"); - } - - const href = this.el.querySelector(".reset-filter") - ?.getAttribute("href"); - - if (href) { - resets.forEach((el) => { - const columnName = getColumnName(el); - - const newHref = href.replace("-resetFilter", "-resetColumnFilter"); - el.setAttribute("href", `${newHref}&${this.name}-key=${columnName}`); - }) - } - } - } - }) - - this.dispatch('afterInit', {datagrid: this}); - } - - public confirm(message: string): boolean { - return this.options.confirm.bind(this)(message); - } - - public resolveDatagridName(): string | null { - return this.options.resolveDatagridName.bind(this)(this.el); - } - - dispatch< - K extends string, M extends DatagridEventMap = DatagridEventMap - >(type: K, detail: K extends keyof M ? EventDetail : any, options?: boolean): boolean { - return this.dispatchEvent(new CustomEvent(type, {detail})); - } - - declare addEventListener: ( - type: K, - listener: EventListener, - options?: boolean | AddEventListenerOptions - ) => void; - - declare removeEventListener: ( - type: K, - listener: EventListener, - options?: boolean | AddEventListenerOptions - ) => void; - - declare dispatchEvent: ( - event: K extends keyof M ? M[K] : CustomEvent - ) => boolean; -} diff --git a/assets/datagrid/datagrids.ts b/assets/datagrid/datagrids.ts deleted file mode 100644 index 2240727..0000000 --- a/assets/datagrid/datagrids.ts +++ /dev/null @@ -1,85 +0,0 @@ -import {Datagrid} from "@datagrid/datagrid"; -import { - AutosubmitPlugin, - CheckboxPlugin, - ConfirmPlugin, - HappyPlugin, - InlinePlugin, - UrlPlugin, - SortablePlugin, - NetteFormsPlugin, - SelectpickerPlugin -} from "@datagrid/plugins"; -import {Ajax, DatagridsOptions} from "@datagrid/types"; -import {SortableJS} from "@datagrid/integrations/sortable-js"; -import {DatepickerPlugin} from "@datagrid/plugins/integrations/datepicker"; -import {BootstrapSelect, Happy, VanillaDatepicker} from "@datagrid/integrations"; - -export class Datagrids { - private datagrids: Datagrid[] = []; - - readonly options: DatagridsOptions; - - readonly root: HTMLElement; - - constructor(readonly ajax: Ajax, options: Partial = {}) { - this.options = { - selector: "div.datagrid[data-refresh-state]", - datagrid: {}, - root: document.body, - ...options, - }; - - const root = typeof this.options.root === "string" - ? document.querySelector(this.options.root) - : this.options.root; - - if (!root || !(root instanceof HTMLElement)) { - throw new Error("Root element not found or is not an HTMLElement"); - } - - this.root = root; - - this.init(); - } - - init() { - this.ajax.onInit(); - (this.options.datagrid?.plugins ?? []).forEach((plugin) => plugin.onInit?.(this)); - - this.initDatagrids(); - } - - initDatagrids() { - this.datagrids = Array.from(this.root.querySelectorAll(this.options.selector)).map( - datagrid => new Datagrid(datagrid, this.ajax, this.options.datagrid) - ); - } -} - -export const createDatagrids = (ajax: Ajax, _options: Partial = {}) => { - return new Datagrids(ajax, _options); -}; - -/** - * @deprecated Include plugins manually with createDatagrids - */ -export const createFullDatagrids = (ajax: Ajax, _options: Partial = {}) => { - return createDatagrids(ajax, { - datagrid: { - plugins: [ - new AutosubmitPlugin(), - new CheckboxPlugin(), - new ConfirmPlugin(), - new InlinePlugin(), - // new UrlPlugin(), - new NetteFormsPlugin(), - new HappyPlugin(new Happy()), - new SortablePlugin(new SortableJS()), - new DatepickerPlugin(new VanillaDatepicker()), - new SelectpickerPlugin(new BootstrapSelect()) - ], - }, - ..._options, - }) -}; diff --git a/assets/datagrid/index.ts b/assets/datagrid/index.ts deleted file mode 100644 index 39d8538..0000000 --- a/assets/datagrid/index.ts +++ /dev/null @@ -1,6 +0,0 @@ -export * from "./datagrid"; -export * from "./plugins"; -export * from "./integrations"; - -export * from "./datagrids" -export * from "./datagrid"; diff --git a/assets/datagrid/integrations/bootstrap-select.ts b/assets/datagrid/integrations/bootstrap-select.ts deleted file mode 100644 index 28dc39c..0000000 --- a/assets/datagrid/integrations/bootstrap-select.ts +++ /dev/null @@ -1,46 +0,0 @@ -import {Selectpicker} from "@datagrid/types"; -import {window} from "@datagrid/utils"; - -/** - * @deprecated subject for replacement & removal - */ -export class BootstrapSelect implements Selectpicker { - initSelectpickers(elements: HTMLElement[]): void { - if (window().jQuery) { - const $ = window().jQuery; - if ($?.fn.selectpicker) { - $.fn.selectpicker.defaults = { - countSelectedText: elements[0].getAttribute("i18n-selected") ?? "", - iconBase: "fa", - tickIcon: elements[0].getAttribute("selected-icon-check") ?? "fa fa-check", - }; - - elements.forEach(element => - $(element) - .removeClass("form-select form-select-sm") - .addClass("form-control form-control-sm") - .selectpicker("destroy") - .selectpicker({}) - ); - - Array.from(elements) - .filter(element => element.hasAttribute("data-datagrid-multiselect-id")) - .forEach(element => { - const $picker = $(element); - const $parent = $picker.parent(); - - $picker.removeAttr("id"); - const id = element.getAttribute("data-datagrid-multiselect-id"); - - $picker.on("loaded.bs.select", () => { - $parent.attr("style", "display: none;"); - $parent.find(".hidden").removeClass("hidden").addClass("btn-default btn-secondary"); - }); - - $picker.on("rendered.bs.select", () => $parent.attr("id", id)); - }); - } - } - } - -} diff --git a/assets/datagrid/integrations/happy.ts b/assets/datagrid/integrations/happy.ts deleted file mode 100644 index 1c8a755..0000000 --- a/assets/datagrid/integrations/happy.ts +++ /dev/null @@ -1,222 +0,0 @@ -import {happyStyles} from "@datagrid/assets/happy.css"; - -/** - * Slightly cleaned up & typed version of happy-inputs by paveljanda. - */ -export class Happy { - private colors: string[] = ["primary", "success", "info", "warning", "danger", "white", "gray"]; - - private templates = { - radio: '

', - checkbox: - '
', - text: "", - textarea: "", - }; - - init() { - if (!document.querySelector('[data-happy-stylesheet]')) { - document.head.append(``) - } - this.removeBySelector(".happy-radio"); - this.removeBySelector(".happy-checkbox"); - - this.initRadio(); - this.initCheckbox(); - } - - /** - * @deprecated - */ - reset() { - this.init(); - } - - addColorToInput(input: HTMLElement, happyInput: HTMLElement, classString: string) { - if (input.classList.contains(classString)) { - happyInput.classList.add(classString); - } - - classString = `${classString}-border`; - - if (input.classList.contains(classString)) { - happyInput.classList.add(classString); - } - } - - // i... you know what, no, let "thinkess" be "thinkess" - addThinkessToInput(input: HTMLElement, happyInput: HTMLElement) { - if (input.classList.contains("thin")) { - happyInput.classList.add("thin"); - } - } - - setNames(input: HTMLElement, happyInput: HTMLElement) { - happyInput.setAttribute("data-name", input.getAttribute("name") ?? ""); - - var value = input.getAttribute("value"); - - if (value !== "undefined" && value !== null) { - happyInput.setAttribute("data-value", input.getAttribute("value") ?? ""); - } - } - - removeBySelector(selector: string) { - document.querySelectorAll(selector).forEach(el => el.parentNode?.removeChild(el)); - } - - initRadio() { - document.querySelectorAll("input[type=radio].happy").forEach(input => { - /** - * Paste happy component into html - */ - input.insertAdjacentHTML("afterend", this.templates.radio); - - const happyInput = input.nextElementSibling; - - if (happyInput instanceof HTMLElement) { - /** - * Add optional colors - */ - this.colors.forEach(color => { - this.addColorToInput(input, happyInput, color); - this.setNames(input, happyInput); - }); - - this.addThinkessToInput(input, happyInput); - } - - /** - * Init state - */ - this.checkRadioState(input); - - /** - * Set aciton functionality for native change - */ - document.addEventListener("change", this.radioOnChange.bind(this)); - }); - } - - initCheckbox() { - document.querySelectorAll("input[type=checkbox].happy").forEach(input => { - /** - * Paste happy component into html - */ - input.insertAdjacentHTML("afterend", this.templates.checkbox); - - const happyInput = input.nextElementSibling; - - /** - * Add optional colors - */ - if (happyInput instanceof HTMLElement) { - this.colors.forEach(color => { - this.addColorToInput(input, happyInput, color); - this.setNames(input, happyInput); - }); - - this.addThinkessToInput(input, happyInput); - } - - /** - * Init state - */ - this.checkCheckboxState(input); - - /** - * Set action functionality for click || native change - */ - document.addEventListener("click", this.checkCheckboxStateOnClick.bind(this)); - document.addEventListener("change", this.checkCheckboxStateOnChange.bind(this)); - }); - } - - checkCheckboxStateOnClick(event: Event) { - const target = event.target; - - // When target is SVGSVGElement (), return parentNode, - // When target is a SVGGraphicsElement (,...), find and return it's parent node - // otherwise return target itself. - const happyInput = - target instanceof SVGSVGElement - ? target.parentNode - : target instanceof SVGGraphicsElement - ? target.closest("svg")?.parentNode - : target; - - if (!(happyInput instanceof HTMLElement) || !happyInput.classList.contains("happy-checkbox")) { - return; - } - - event.preventDefault(); - - const name = happyInput.getAttribute("data-name"); - const value = happyInput.getAttribute("data-value"); - - const input = document.querySelector( - `.happy-checkbox[data-name="${name}"]` + (!!value ? `[value="${value}"]` : "") - ); - if (!(input instanceof HTMLInputElement)) return; - - const checked = happyInput.classList.contains("active"); - - input.checked = !checked; - checked ? happyInput.classList.remove("active") : happyInput.classList.add("active"); - } - - checkCheckboxStateOnChange({ target }: Event) { - if (!(target instanceof HTMLInputElement)) return; - - if (target.classList.contains("happy")) { - this.checkCheckboxState(target); - } - } - - checkRadioState(input: HTMLInputElement) { - if (!input.checked || !input.hasAttribute("name")) return; - - const name = input.getAttribute("name"); - const value = input.getAttribute("value"); - - const element = document.querySelector( - `.happy-checkbox[data-name="${name}"]` + (!!value ? `[data-value="${value}"]` : "") - ); - - if (element) { - element.classList.add("active"); - } - } - - checkCheckboxState(input: HTMLInputElement) { - const name = input.getAttribute("name"); - if (!name) return; - - const value = input.getAttribute("value"); - const element = document.querySelector( - `.happy-checkbox[data-name="${name}"]` + (!!value ? `[data-value="${value}"]` : "") - ); - - if (!element) return; - - input.checked ? element.classList.add("active") : element.classList.remove("active"); - } - - radioOnChange({ target }: Event) { - // Check whether target is
${snippet}
`; - - childrenBlock.innerHTML = template; - } - //children_block.addClass('loaded'); - //children_block.slideToggle('fast'); - } - } - }) - return true; - } -} \ No newline at end of file diff --git a/assets/datagrid/plugins/index.ts b/assets/datagrid/plugins/index.ts deleted file mode 100644 index 99b83ae..0000000 --- a/assets/datagrid/plugins/index.ts +++ /dev/null @@ -1,12 +0,0 @@ -export * from "./integrations/datepicker"; -export * from "./integrations/happy"; -export * from "./integrations/nette-forms" -export * from "./integrations/selectpicker"; -export * from "./integrations/sortable"; - -export * from "./features/autosubmit"; -export * from "./features/checkboxes"; -export * from "./features/confirm"; -export * from "./features/editable"; -export * from "./features/inline"; -export * from "./features/item-detail"; diff --git a/assets/datagrid/plugins/integrations/datepicker.ts b/assets/datagrid/plugins/integrations/datepicker.ts deleted file mode 100644 index 7e4a1c7..0000000 --- a/assets/datagrid/plugins/integrations/datepicker.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {Datagrid} from "@datagrid"; -import {DatagridPlugin, Datepicker} from "@datagrid/types"; - -export class DatepickerPlugin implements DatagridPlugin { - constructor(private datepicker: Datepicker) { - } - - onDatagridInit(datagrid: Datagrid): boolean { - const elements = datagrid.el.querySelectorAll("input[data-provide='datepicker']"); - - if (elements.length >= 1) { - this.datepicker.initDatepickers(Array.from(elements), datagrid); - } - - return true; - } -} diff --git a/assets/datagrid/plugins/integrations/happy.ts b/assets/datagrid/plugins/integrations/happy.ts deleted file mode 100644 index 32605c0..0000000 --- a/assets/datagrid/plugins/integrations/happy.ts +++ /dev/null @@ -1,19 +0,0 @@ -import {Datagrid} from "@datagrid"; -import { DatagridPlugin } from "@datagrid/types"; -import { window } from "@datagrid/utils"; -import type {Happy} from "@datagrid/integrations"; - -export class HappyPlugin implements DatagridPlugin { - constructor(private happy?: Happy) { - } - - onDatagridInit(datagrid: Datagrid): boolean { - const happy = this.happy ?? window().happy ?? null; - - if (happy) { - happy.init(); - } - - return true; - } -} diff --git a/assets/datagrid/plugins/integrations/nette-forms.ts b/assets/datagrid/plugins/integrations/nette-forms.ts deleted file mode 100644 index 5ffbe75..0000000 --- a/assets/datagrid/plugins/integrations/nette-forms.ts +++ /dev/null @@ -1,18 +0,0 @@ -import {DatagridPlugin, Nette} from "@datagrid/types"; -import {Datagrid} from "@datagrid"; -import {window} from "@datagrid/utils"; - -export class NetteFormsPlugin implements DatagridPlugin { - constructor(private nette?: Nette) { - } - - onDatagridInit(datagrid: Datagrid): boolean { - const nette = this.nette ?? window().Nette ?? null; - - if (nette) { - datagrid.el.querySelectorAll("form").forEach(form => nette.initForm(form)); - } - - return true; - } -} diff --git a/assets/datagrid/plugins/integrations/selectpicker.ts b/assets/datagrid/plugins/integrations/selectpicker.ts deleted file mode 100644 index ef63126..0000000 --- a/assets/datagrid/plugins/integrations/selectpicker.ts +++ /dev/null @@ -1,17 +0,0 @@ -import {DatagridPlugin, Selectpicker} from "@datagrid/types"; -import {Datagrid} from "@datagrid"; - -export class SelectpickerPlugin implements DatagridPlugin { - constructor(private selectpicker: Selectpicker) { - } - - onDatagridInit(datagrid: Datagrid): boolean { - const elements = datagrid.el.querySelectorAll(".selectpicker"); - - if (elements.length >= 1) { - this.selectpicker.initSelectpickers(Array.from(elements), datagrid); - } - - return true; - } -} diff --git a/assets/datagrid/plugins/integrations/sortable.ts b/assets/datagrid/plugins/integrations/sortable.ts deleted file mode 100644 index 4b69631..0000000 --- a/assets/datagrid/plugins/integrations/sortable.ts +++ /dev/null @@ -1,62 +0,0 @@ -import {Datagrid} from "@datagrid/datagrid"; -import { DatagridPlugin, Sortable } from "@datagrid/types"; -import {attachSlideToggle} from "@datagrid/utils"; - -export class SortablePlugin implements DatagridPlugin { - constructor(private sortable: Sortable) { - } - - onDatagridInit(datagrid: Datagrid): boolean { - datagrid.ajax.addEventListener('before', (event) => { - // TODO old ln 694... wtf? - }) - - this.sortable.initSortable(datagrid); - - datagrid.ajax.addEventListener('success', ({detail: {payload}}) => { - if (payload._datagrid_sort) { - for (const key in payload._datagrid_sort) { - const href = payload._datagrid_sort[key]; - const element = datagrid.el.querySelector(`#datagrid-sort-${key}`); - - if (element) { - // TODO: Only for BC support, to be removed - element.setAttribute("href", href); - - element.setAttribute("data-href", href); - } - } - this.sortable.initSortable(datagrid); - } - - if (payload._datagrid_tree) { - const childrenContainer = datagrid.el.querySelector( - `.datagrid-tree-item[data-id='${payload._datagrid_tree}'] .datagrid-tree-item-children` - ); - if (childrenContainer && payload.snippets) { - childrenContainer.classList.add("loaded"); - for (const key in payload.snippets) { - const snippet = payload.snippets[key]; - - const doc = new DOMParser().parseFromString(snippet, 'text/html'); - const element = doc.firstElementChild; - if (element) { - const treeItem = document.createElement("div"); - treeItem.id = key; - treeItem.classList.add("datagrid-tree-item") - treeItem.setAttribute("data-id", key); - if (element.hasAttribute("has-children")) { - treeItem.classList.add("has-children"); - } - - childrenContainer.append(treeItem); - // attachSlideToggle(childrenContainer); - } - } - } - this.sortable.initSortableTree(datagrid); - } - }) - return true; - } -} diff --git a/assets/datagrid/types/ajax.d.ts b/assets/datagrid/types/ajax.d.ts deleted file mode 100644 index 3262f37..0000000 --- a/assets/datagrid/types/ajax.d.ts +++ /dev/null @@ -1,136 +0,0 @@ -import {EventDetail, EventListener, EventMap} from "."; -import {Datagrid} from "@datagrid"; - -export interface BaseRequestParams { - method: "GET" | "HEAD" | "POST" | "PUT" | "DELETE" | "CONNECT" | "OPTIONS" | "TRACE" | "PATCH" | string; - url: string; -} - -export interface RequestParams extends BaseRequestParams { - data: D; -} - -export interface DatagridPayload { - _datagrid_name?: string; - _datagrid_toggle_detail?: string - _datagrid_inline_editing?: boolean; - _datagrid_inline_adding?: boolean; - _datagrid_inline_edited?: boolean; - _datagrid_inline_edit_cancel?: boolean; - _datagrid_url?: boolean; - _datagrid_sort?: Record; - _datagrid_tree?: string; - _datagrid_editable_new_value?: string; - _datagrid_redraw_item_id?: string; - _datagrid_redraw_item_class?: string; - _datagrid_init?: boolean; - non_empty_filters?: string[]; -} - -export interface DatagridState { - "grid-page": number | null, - "grid-perPage": number, - // TODO - "grid-sort": any | null, - "grid-filter": any | null -} - -export type Payload

= P & { - snippets?: Record; - redirect?: string; - state: S; -}; - -export interface Response { - headers: Record | Headers; - status: number; -} - -export interface BeforeEventDetail { - params: RequestParams; -} - -export interface InteractEventDetail { - element: E; -} - -export interface SuccessEventDetail

{ - params: BaseRequestParams; - payload: Payload

; - response: Response; -} - -export interface ErrorEventDetail { - params: BaseRequestParams; - response?: Response; - error?: E; -} - -export interface AjaxEventMap extends EventMap { - before: CustomEvent; - interact: CustomEvent; - snippetUpdate: CustomEvent; - success: CustomEvent; - error: CustomEvent; -} - -export interface Ajax extends EventTarget { - client: C; - - /** - * Initialization of the Ajax instance, called in createDatagrids(). - * @return this - */ - onInit(): this; - - /** - * Initializes a Datagrid instance. - * @param grid The Datagrid instance - */ - onDatagridInit?(grid: G): void; - - /** - * Sends a request to the server. - */ - request(args: RequestParams): Promise

; - - /** - * Submits a form - */ - submitForm(element: E): Promise

; - - /** - * Shortcut for dispatchEvent - * @internal - */ - dispatch( - type: K, - detail: K extends keyof M ? EventDetail : any, - options?: boolean - ): boolean; - - /** - * Note: For events dispatched directly from the underlying client, {@see Ajax.client}} - **/ - addEventListener( - type: K, - listener: EventListener, - options?: boolean | AddEventListenerOptions - ): void; - - /** - * Note: For events dispatched directly from the underlying client, {@see Ajax.client}} - **/ - removeEventListener( - type: K, - listener: EventListener, - options?: boolean | AddEventListenerOptions - ): void; - - /** - * @internal - */ - dispatchEvent( - event: K extends keyof M ? M[K] : CustomEvent - ): boolean; -} diff --git a/assets/datagrid/types/datagrid.d.ts b/assets/datagrid/types/datagrid.d.ts deleted file mode 100644 index 84e99b2..0000000 --- a/assets/datagrid/types/datagrid.d.ts +++ /dev/null @@ -1,29 +0,0 @@ -import {Datagrid, Datagrids} from "@datagrid"; -import {EventMap, Nette} from "@datagrid/types"; - -export interface DatagridEventDetail { - datagrid: Datagrid; -} - -export interface DatagridEventMap extends EventMap { - beforeInit: CustomEvent; - afterInit: CustomEvent; -} - -export interface DatagridPlugin { - onInit?(datagrids: Datagrids): void; - onDatagridInit?(datagrid: Datagrid): boolean; -} - -export interface DatagridOptions { - confirm(this: Datagrid, message: string): boolean; - // Returning null will skip this datagrid - resolveDatagridName: (this: Datagrid, datagrid: HTMLElement) => string | null; - plugins: DatagridPlugin[]; -} - -export interface DatagridsOptions { - datagrid: Partial; - selector: string; - root: HTMLElement | string; -} diff --git a/assets/datagrid/types/index.d.ts b/assets/datagrid/types/index.d.ts deleted file mode 100644 index 39a6073..0000000 --- a/assets/datagrid/types/index.d.ts +++ /dev/null @@ -1,40 +0,0 @@ -import { Happy } from "@datagrid/integrations"; -import TomSelect from "tom-select"; - -export interface Nette { - initForm: (form: HTMLFormElement) => void; -} - -export type Constructor = new (...args: any[]) => T; - -export type KeysOf = { [P in keyof T]: TVal; } - -export interface ExtendedWindow extends Window { - jQuery?: any; - Nette?: Nette; - TomSelect?: Constructor; - happy?: Happy; -} - -// https://github.com/naja-js/naja/blob/384d298a9199bf778985d1bcf5747fe8de305b22/src/utils.ts -type EventListenerFunction = ( - this: ET, - event: E -) => boolean | void | Promise; - -interface EventListenerObject { - handleEvent(event: E): void | Promise; -} - -export type EventListener = - | EventListenerFunction - | EventListenerObject - | null; - -export type EventDetail = E extends CustomEvent ? D : never; - -export interface EventMap extends Record {} - -export * from "./datagrid"; -export * from "./integrations"; -export * from "./ajax"; diff --git a/assets/datagrid/types/integrations.d.ts b/assets/datagrid/types/integrations.d.ts deleted file mode 100644 index 16e7edd..0000000 --- a/assets/datagrid/types/integrations.d.ts +++ /dev/null @@ -1,14 +0,0 @@ -import {Datagrid} from "@datagrid"; - -export interface Sortable { - initSortable(datagrid: Datagrid): void; - initSortableTree(datagrid: Datagrid): void; -} - -export interface Selectpicker { - initSelectpickers(elements: HTMLElement[], datagrid: Datagrid): void; -} - -export interface Datepicker { - initDatepickers(elements: HTMLInputElement[], datagrid: Datagrid): void; -} diff --git a/assets/datagrid/utils.ts b/assets/datagrid/utils.ts deleted file mode 100644 index a4c3b98..0000000 --- a/assets/datagrid/utils.ts +++ /dev/null @@ -1,180 +0,0 @@ -import { Datagrid } from "@datagrid/datagrid"; -import { ExtendedWindow } from "@datagrid/types"; - -export function isPromise(p: any): p is Promise { - return typeof p === "object" && typeof p.then === "function"; -} - -export function isInKeyRange(e: KeyboardEvent, min: number, max: number): boolean { - const code = e.key.length === 1 ? e.key.charCodeAt(0) : 0; - return code >= min && code <= max; -} - -export function isEnter(e: KeyboardEvent): boolean { - return e.key === "Enter"; -} - -export function isEsc(e: KeyboardEvent): boolean { - return e.key === "Escape"; -} - -export function isFunctionKey(e: KeyboardEvent): boolean { - return e.key.length === 2 && e.key.startsWith("F"); -} - -export function window(): ExtendedWindow { - return (window ?? {}) as unknown as ExtendedWindow; -} - -export function slideDown(element: HTMLElement, cb?: (nextStateShown: boolean) => unknown) { - element.style.height = 'auto'; - - let height = element.clientHeight + "px"; - - element.style.height = '0px'; - - setTimeout(function () { - element.style.height = height; - cb?.(true); - }, 0); -} - -export function slideUp(element: HTMLElement, cb?: (nextStateShown: boolean) => unknown) { - element.style.height = '0px'; - - setTimeout( () => { - cb?.(false); - }, 250); // TODO -} - -export function slideToggle(element: HTMLElement, isVisible: boolean, cb?: (nextStateShown: boolean) => unknown) { - console.log("element", element); - if (!isVisible) { - slideDown(element, cb); - } else { - slideUp(element, cb); - } -} - -export function attachSlideToggle(element: HTMLElement, control: HTMLElement, cb?: (nextStateShown: boolean) => unknown) { - if (!control.classList.contains("datagrid--slide-toggle")) { - let sliding = false; - control.classList.add("datagrid--slide-toggle"); - - slideDown(element, cb); - - control.addEventListener('click', () => { - if (sliding) return; - sliding = true; - slideToggle(element, control.classList.contains('is-active'), (active) => { - sliding = false - if (active) { - control.classList.add("is-active"); - } else { - control.classList.remove("is-active"); - } - }); - }); - } -} - -export function qs(params: Record, prefix: string = ""): string { - const encodedParams = []; - - for (const _key in params) { - const value = params[_key]; - // Cannot do !value as that would also exclude valid negative values such as 0 or false - if (value === null || value === undefined) continue; - - const key = prefix ? `${prefix}[${_key}]` : _key; - - // Skip empty strings - if (typeof value === "string" && value.trim().length < 1) continue; - - if (typeof value === "object") { - const nestedParams = qs(value, key); - // Don't include if object is empty - if (nestedParams.length >= 1) { - encodedParams.push(nestedParams); - } - - continue; - } - - encodedParams.push(`${encodeURIComponent(key)}=${encodeURIComponent(value)}`) - } - - return encodedParams.join("&").replace(/&+$/gm, "").replace(/&*$/, ""); -} - -export function calculateCellLines(el: HTMLElement) { - const cellPadding = el.style.padding ? parseInt(el.style.padding.replace(/[^-\d\.]/g, ""), 10) : 0; - const cellHeight = el.getBoundingClientRect().height; - const lineHeight = Math.round(parseFloat(el.style.lineHeight ?? "0")); - const cellLines = Math.round((cellHeight - 2 * cellPadding) / lineHeight); - - return cellLines; -} - -// A little better debounce ;) -export function debounce unknown | Promise>( - fn: TFun, - slowdown: number = 200 -): (...args: TArgs[]) => void { - let timeout: number | null = null; - let blockedByPromise: boolean = false; - - return (...args) => { - if (blockedByPromise) return; - - timeout && clearTimeout(timeout); - timeout = setTimeout(() => { - const result = fn(...args); - - if (isPromise(result)) { - blockedByPromise = true; - result.finally(() => { - blockedByPromise = false; - }); - } - }, slowdown); - }; -} - -export function defaultDatagridNameResolver(this: Datagrid, datagrid: HTMLElement) { - // This attribute is not present by default, though if you're going to use this library - // it's recommended to add it, because when not present, the fallback way is to parse the datagrid- class, - // which is definitely far from reliable. Alternatively (mainly in case of a custom datagrid class), - // you can pass your own resolveDatagridName function to the option. - const attrName = datagrid.getAttribute("data-datagrid-name"); - if (attrName) return attrName; - - console.warn( - "Deprecated name resolution for datagrid", - datagrid, - ": Please add a data-datagrid-name attribute instead!\n" + - "Currently, the Datagrid library relies on matching the name from the 'datagrid-[name]' class, which is unreliable " + - "and may cause bugs if the default class names are not used (eg. if you add a datagrid-xx class, or change the name class completely!)\n" + - "Alternatively, you can customize the name resolution with the `resolveDatagridName` option. See TBD for more info." // TODO - ); - - const classes = datagrid.classList.value.split(" "); - - // Returns the first datagrid-XXX match - for (const className of classes) { - if (!className.startsWith("datagrid-")) continue; - - const [, ...split] = className.split("-"); - const name = split.join("-"); - - // In case nothing actually follows the prefix (className = "datagrid-") - if (name.length < 1) { - console.error(`Failed to resolve datagrid name - ambigious class name '${className}'`); - return null; - } - - return name; - } - - return null; -} diff --git a/assets/js/main.js b/assets/js/main.js index 965a642..303c6c9 100644 --- a/assets/js/main.js +++ b/assets/js/main.js @@ -2,24 +2,26 @@ import naja from "naja"; import netteForms from "nette-forms"; import { AutosubmitPlugin, - BootstrapSelect, CheckboxPlugin, ConfirmPlugin, createDatagrids, + DatepickerPlugin, Happy, HappyPlugin, InlinePlugin, + ItemDetailPlugin, NetteFormsPlugin, SelectpickerPlugin, - DatepickerPlugin, SortableJS, - SortablePlugin, TomSelect, - UrlPlugin, - VanillaDatepicker, ItemDetailPlugin -} from "@datagrid"; -import {NajaAjax} from "@datagrid/ajax"; + SortablePlugin, + TomSelect, + TreeViewPlugin, + VanillaDatepicker +} from "@contributte/datagrid/assets"; +import { NajaAjax } from "@contributte/datagrid/assets/ajax"; import Select from "tom-select"; -import {Dropdown} from "bootstrap"; +import { Dropdown } from "bootstrap"; + // Code highlighting import Prism from "prismjs/components/prism-core"; import "prismjs/components/prism-markup-templating"; @@ -27,18 +29,21 @@ import "prismjs/components/prism-php"; import "prismjs/components/prism-clike"; import "prismjs/components/prism-javascript"; import "prismjs/components/prism-css"; -// Styles +// Styles import '../css/main.css'; -import { TreeViewPlugin } from "../datagrid/plugins/features/treeView"; +// Datagrid + UI document.addEventListener("DOMContentLoaded", () => { - // AJAX - naja.formsHandler.netteForms = netteForms; - + // Initialize dropdowns Array.from(document.querySelectorAll('.dropdown')) .forEach(el => new Dropdown(el)) + // Initialize Naja (nette ajax) + naja.formsHandler.netteForms = netteForms; + naja.initialize(); + + // Initialize datagrids createDatagrids(new NajaAjax(naja), { datagrid: { plugins: [ @@ -47,7 +52,6 @@ document.addEventListener("DOMContentLoaded", () => { new ConfirmPlugin(), new InlinePlugin(), new ItemDetailPlugin(), - // new UrlPlugin(), new NetteFormsPlugin(netteForms), new HappyPlugin(new Happy()), new SortablePlugin(new SortableJS()), @@ -57,9 +61,9 @@ document.addEventListener("DOMContentLoaded", () => { ], }, }); +}); - naja.initialize(); - +document.addEventListener("DOMContentLoaded", () => { // Highlighting const codes = document.querySelectorAll('code'); codes.forEach(code => { diff --git a/package-lock.json b/package-lock.json index f7fc1c1..8ac12de 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,6 +9,7 @@ "version": "0.0.0", "license": "MIT", "dependencies": { + "@contributte/datagrid": "github:contributte/datagrid#next", "@fortawesome/fontawesome-free": "^6.3.0", "bootstrap": "^5.3.0-alpha3", "naja": "^2.5.0", @@ -34,9 +35,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.20.13", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.20.13.tgz", - "integrity": "sha512-gt3PKXs0DBoL9xCvOIIZ2NEqAGZqHjAnmVbfQtB620V0uReIQutpel14KcneZuer7UioY8ALKZ7iocavvzTNFA==", + "version": "7.22.3", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.22.3.tgz", + "integrity": "sha512-XsDuspWKLUsxwCp6r7EhsExHtYfbe5oAGQ19kqngTdCPUoPQzOPdUbD/pB9PJiwb2ptYKQDjSJT3R6dC+EPqfQ==", "dependencies": { "regenerator-runtime": "^0.13.11" }, @@ -44,6 +45,14 @@ "node": ">=6.9.0" } }, + "node_modules/@contributte/datagrid": { + "version": "6.9.1", + "resolved": "git+ssh://git@github.com/contributte/datagrid.git#dca24b45dd760af0a8c28fd0eb0c45a5d39a7246", + "license": "MIT", + "dependencies": { + "naja": "^2.5.0" + } + }, "node_modules/@esbuild/linux-loong64": { "version": "0.14.54", "resolved": "https://registry.npmjs.org/@esbuild/linux-loong64/-/linux-loong64-0.14.54.tgz", @@ -61,9 +70,9 @@ } }, "node_modules/@fortawesome/fontawesome-free": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.3.0.tgz", - "integrity": "sha512-qVtd5i1Cc7cdrqnTWqTObKQHjPWAiRwjUPaXObaeNPcy7+WKxJumGBx66rfSFgK6LNpIasVKkEgW8oyf0tmPLA==", + "version": "6.4.0", + "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-free/-/fontawesome-free-6.4.0.tgz", + "integrity": "sha512-0NyytTlPJwB/BF5LtRV8rrABDbe3TdTXqNB3PdZ+UUUZAEIrdOJdmABqKjt4AXwIoJNaRVVZEXxpNrqvE1GAYQ==", "hasInstallScript": true, "engines": { "node": ">=6" @@ -83,9 +92,9 @@ "integrity": "sha512-NvVBRnZNE+dugiXERFsET1JlKZfM5lJDEpSMilKW4bToYJ7pxf0Zne78xyXB2ny2c2aHfJ6WLnz1AaTNHAmQeQ==" }, "node_modules/@popperjs/core": { - "version": "2.11.7", - "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.7.tgz", - "integrity": "sha512-Cr4OjIkipTtcXKjAsm8agyleBuDHvxzeBoa1v543lbv1YaIwQjESsVcmjiWiPEbC1FIeHOG/Op9kdCmAmiS3Kw==", + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", "peer": true, "funding": { "type": "opencollective", @@ -111,9 +120,9 @@ } }, "node_modules/@types/jqueryui": { - "version": "1.12.16", - "resolved": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.12.16.tgz", - "integrity": "sha512-6huAQDpNlso9ayaUT9amBOA3kj02OCeUWs+UvDmbaJmwkHSg/HLsQOoap/D5uveN9ePwl72N45Bl+Frp5xyG1Q==", + "version": "1.12.17", + "resolved": "https://registry.npmjs.org/@types/jqueryui/-/jqueryui-1.12.17.tgz", + "integrity": "sha512-rqiCaZO7d1rAcJVXNSV6MYwt42oB4ArTRr0QbU3f4+Siv0d6m9uRkhiKHpc6oL9NFJKDxzIIDvUeMXTtlJFFaA==", "dev": true, "dependencies": { "@types/jquery": "*" @@ -132,15 +141,15 @@ "dev": true }, "node_modules/@types/vanillajs-datepicker": { - "version": "1.2.1", - "resolved": "https://registry.npmjs.org/@types/vanillajs-datepicker/-/vanillajs-datepicker-1.2.1.tgz", - "integrity": "sha512-j6Rk0IrhuWwztTWcO9mg/fIzVEiqYoOWITI4rGnQiLLsLiaAMqW9E06nfDCBg5HJ94yBn9S7eBFBFC9pJLaiuQ==", + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@types/vanillajs-datepicker/-/vanillajs-datepicker-1.2.2.tgz", + "integrity": "sha512-jVHa34qqFekNESMk2/ms12DboY4kIyIObQqRM+CFkmrUT4eGtovdqiO//TNIz2N5c9MWdD2/5MQyI7fHfuRzYA==", "dev": true }, "node_modules/autoprefixer": { - "version": "10.4.13", - "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.13.tgz", - "integrity": "sha512-49vKpMqcZYsJjwotvt4+h/BCjJVnhGwcLpDt5xkcaOG3eLrG/HUYLagrihYsQ+qrIBgIzX1Rw7a6L8I/ZA1Atg==", + "version": "10.4.14", + "resolved": "https://registry.npmjs.org/autoprefixer/-/autoprefixer-10.4.14.tgz", + "integrity": "sha512-FQzyfOsTlwVzjHxKEqRIAdJx9niO6VCBCoEwax/VLSoQF29ggECcPuBqUMZ+u8jCZOPSy8b8/8KnuFbp0SaFZQ==", "dev": true, "funding": [ { @@ -153,8 +162,8 @@ } ], "dependencies": { - "browserslist": "^4.21.4", - "caniuse-lite": "^1.0.30001426", + "browserslist": "^4.21.5", + "caniuse-lite": "^1.0.30001464", "fraction.js": "^4.2.0", "normalize-range": "^0.1.2", "picocolors": "^1.0.0", @@ -171,9 +180,9 @@ } }, "node_modules/bootstrap": { - "version": "5.3.0-alpha3", - "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0-alpha3.tgz", - "integrity": "sha512-FBhOWMxkCFr74hesJdchLXhqagPTXS+kRNU3gE0FR5Ki/AdPSz32Ik96Z28+yBluCnE/pc9st7l1yPwKgbtfSA==", + "version": "5.3.0", + "resolved": "https://registry.npmjs.org/bootstrap/-/bootstrap-5.3.0.tgz", + "integrity": "sha512-UnBV3E3v4STVNQdms6jSGO2CvOkjUMdDAVR2V5N4uCMdaIkaQjbcEAMqRimDHIs4uqBYzDAKCQwCB+97tJgHQw==", "funding": [ { "type": "github", @@ -189,9 +198,9 @@ } }, "node_modules/browserslist": { - "version": "4.21.4", - "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.4.tgz", - "integrity": "sha512-CBHJJdDmgjl3daYjN5Cp5kbTf1mUhZoS+beLklHIvkOWscs83YAhLlF3Wsh/lciQYAcbBJgTOD44VtG31ZM4Hw==", + "version": "4.21.7", + "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.7.tgz", + "integrity": "sha512-BauCXrQ7I2ftSqd2mvKHGo85XR0u7Ru3C/Hxsy/0TkfCtjrmAbPdzLGasmoiBxplpDXlPvdjX9u7srIMfgasNA==", "dev": true, "funding": [ { @@ -201,13 +210,17 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "caniuse-lite": "^1.0.30001400", - "electron-to-chromium": "^1.4.251", - "node-releases": "^2.0.6", - "update-browserslist-db": "^1.0.9" + "caniuse-lite": "^1.0.30001489", + "electron-to-chromium": "^1.4.411", + "node-releases": "^2.0.12", + "update-browserslist-db": "^1.0.11" }, "bin": { "browserslist": "cli.js" @@ -217,9 +230,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001447", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001447.tgz", - "integrity": "sha512-bdKU1BQDPeEXe9A39xJnGtY0uRq/z5osrnXUw0TcK+EYno45Y+U7QU9HhHEyzvMDffpYadFXi3idnSNkcwLkTw==", + "version": "1.0.30001495", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001495.tgz", + "integrity": "sha512-F6x5IEuigtUfU5ZMQK2jsy5JqUUlEFRVZq8bO2a+ysq5K7jD6PPc9YXZj78xDNS3uNchesp1Jw47YXEqr+Viyg==", "dev": true, "funding": [ { @@ -229,13 +242,17 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/caniuse-lite" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ] }, "node_modules/electron-to-chromium": { - "version": "1.4.284", - "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.284.tgz", - "integrity": "sha512-M8WEXFuKXMYMVr45fo8mq0wUrrJHheiKZf6BArTKk9ZBYCKJEOU5H8cdWgDT+qCVZf7Na4lVUaZsA+h6uA9+PA==", + "version": "1.4.424", + "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.424.tgz", + "integrity": "sha512-KOfOIoEE0b3L0CTDgqS+NpokmcBdxpqLIPtp9PL0v5GAMZmZXa9uoUfWJdEy63MNy6jMvKHkBVUYY5DSuqqpdw==", "dev": true }, "node_modules/esbuild": { @@ -649,9 +666,9 @@ } }, "node_modules/is-core-module": { - "version": "2.11.0", - "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.11.0.tgz", - "integrity": "sha512-RRjxlvLDkD1YJwDbroBHMb+cukurkDWNyHx7D3oNB5x9rb5ogcksMC5wHCadcXoo67gVr/+3GFySh3134zi6rw==", + "version": "2.12.1", + "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.12.1.tgz", + "integrity": "sha512-Q4ZuBAe2FUsKtyQJoQHlvP8OvBERxO3jEmy1I7hcRXcJBGGHFh/aJBswbXuS9sgrDH2QUO8ilkwNPHvHMd8clg==", "dev": true, "dependencies": { "has": "^1.0.3" @@ -669,10 +686,16 @@ } }, "node_modules/nanoid": { - "version": "3.3.4", - "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.4.tgz", - "integrity": "sha512-MqBkQh/OHTS2egovRtLk45wEyNXwF+cokD+1YPf9u5VfJiRdAiRwB2froX5Co9Rh20xs4siNPm8naNotSD6RBw==", + "version": "3.3.6", + "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz", + "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==", "dev": true, + "funding": [ + { + "type": "github", + "url": "https://github.com/sponsors/ai" + } + ], "bin": { "nanoid": "bin/nanoid.cjs" }, @@ -686,9 +709,9 @@ "integrity": "sha512-UOmA3rF+FjpSci5CGmMtsy79PMWCcl0yyfyCd8YXVS+c68FAnVq3ref5qSxYFcwFynTqcPsYKhsNh8eYW5nVhQ==" }, "node_modules/node-releases": { - "version": "2.0.8", - "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.8.tgz", - "integrity": "sha512-dFSmB8fFHEH/s81Xi+Y/15DQY6VHW81nXRj86EMSL3lmuTmK1e+aT4wrFCkTbm+gSwkw4KpX+rT/pMM2c1mF+A==", + "version": "2.0.12", + "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.12.tgz", + "integrity": "sha512-QzsYKWhXTWx8h1kIvqfnC++o0pEmpRQA/aenALsL2F4pqNVr7YzcdMlDij5WBnwftRbJCNJL/O7zdKaxKPHqgQ==", "dev": true }, "node_modules/normalize-range": { @@ -713,9 +736,9 @@ "dev": true }, "node_modules/postcss": { - "version": "8.4.21", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.21.tgz", - "integrity": "sha512-tP7u/Sn/dVxK2NnruI4H9BG+x+Wxz6oeZ1cJ8P6G/PZY0IKk4k/63TDsQf2kQq3+qoJeLm2kIBUNlZe3zgb4Zg==", + "version": "8.4.24", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.24.tgz", + "integrity": "sha512-M0RzbcI0sO/XJNucsGjvWU9ERWxb/ytp1w6dKtxTKgixdtQDq4rmx/g8W1hnaheq9jgwL/oyEdH5Bc4WwJKMqg==", "dev": true, "funding": [ { @@ -725,10 +748,14 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/postcss" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { - "nanoid": "^3.3.4", + "nanoid": "^3.3.6", "picocolors": "^1.0.0", "source-map-js": "^1.0.2" }, @@ -756,12 +783,12 @@ "integrity": "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg==" }, "node_modules/resolve": { - "version": "1.22.1", - "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz", - "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==", + "version": "1.22.2", + "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.2.tgz", + "integrity": "sha512-Sb+mjNHOULsBv818T40qSPeRiuWLyaGMa5ewydRLFimneixmVy2zdivRl+AF6jaYPC8ERxGDmFSiqui6SfPd+g==", "dev": true, "dependencies": { - "is-core-module": "^2.9.0", + "is-core-module": "^2.11.0", "path-parse": "^1.0.7", "supports-preserve-symlinks-flag": "^1.0.0" }, @@ -843,9 +870,9 @@ } }, "node_modules/update-browserslist-db": { - "version": "1.0.10", - "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.10.tgz", - "integrity": "sha512-OztqDenkfFkbSG+tRxBeAnCVPckDBcvibKd35yDONx6OU8N7sqgwc7rCbkJ/WcYtVRZ4ba68d6byhC21GFh7sQ==", + "version": "1.0.11", + "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz", + "integrity": "sha512-dCwEFf0/oT85M1fHBg4F0jtLwJrutGoHSQXCh7u4o2t1drG+c0a9Flnqww6XUKSfQMPpJBRjU8d4RXB09qtvaA==", "dev": true, "funding": [ { @@ -855,6 +882,10 @@ { "type": "tidelift", "url": "https://tidelift.com/funding/github/npm/browserslist" + }, + { + "type": "github", + "url": "https://github.com/sponsors/ai" } ], "dependencies": { @@ -862,21 +893,21 @@ "picocolors": "^1.0.0" }, "bin": { - "browserslist-lint": "cli.js" + "update-browserslist-db": "cli.js" }, "peerDependencies": { "browserslist": ">= 4.21.0" } }, "node_modules/vanillajs-datepicker": { - "version": "1.3.1", - "resolved": "https://registry.npmjs.org/vanillajs-datepicker/-/vanillajs-datepicker-1.3.1.tgz", - "integrity": "sha512-LYYnXXYDw7oqnNbJleLIRXFUjrG2WYOQtU1A2u3FmW3rgzp7lNJ7DGF35CJ3/Dg1OHUh10D9XnJBfSfIKTyeng==" + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/vanillajs-datepicker/-/vanillajs-datepicker-1.3.3.tgz", + "integrity": "sha512-O7eeSSyZ9aeTcy6X9NBswNvWZRRvKIl2F20sbYvL1L32+1fMpiIPD3TvDF4hrU0ezXspHPgGFyvbFkoXIBs83w==" }, "node_modules/vite": { - "version": "2.9.15", - "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.15.tgz", - "integrity": "sha512-fzMt2jK4vQ3yK56te3Kqpkaeq9DkcZfBbzHwYpobasvgYmP2SoAr6Aic05CsB4CzCZbsDv4sujX3pkEGhLabVQ==", + "version": "2.9.16", + "resolved": "https://registry.npmjs.org/vite/-/vite-2.9.16.tgz", + "integrity": "sha512-X+6q8KPyeuBvTQV8AVSnKDvXoBMnTx8zxh54sOwmmuOdxkjMmEJXH2UEchA+vTMps1xw9vL64uwJOWryULg7nA==", "dev": true, "dependencies": { "esbuild": "^0.14.27", diff --git a/package.json b/package.json index 45776c6..ba73ef1 100644 --- a/package.json +++ b/package.json @@ -7,6 +7,7 @@ "node": ">=18.0" }, "dependencies": { + "@contributte/datagrid": "github:contributte/datagrid#next", "@fortawesome/fontawesome-free": "^6.3.0", "bootstrap": "^5.3.0-alpha3", "naja": "^2.5.0", diff --git a/vite.config.js b/vite.config.js index d6fb3ec..ff622c9 100644 --- a/vite.config.js +++ b/vite.config.js @@ -10,7 +10,6 @@ export default defineConfig(({ mode }) => { alias: { '@': resolve(__dirname, 'assets/js'), '~': resolve(__dirname, 'node_modules'), - '@datagrid': resolve(__dirname, 'assets/datagrid'), }, }, base: '/dist/',