quasar-ui-danx 0.4.26 → 0.4.28

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (37) hide show
  1. package/dist/danx.es.js +24536 -24082
  2. package/dist/danx.es.js.map +1 -1
  3. package/dist/danx.umd.js +109 -109
  4. package/dist/danx.umd.js.map +1 -1
  5. package/dist/style.css +1 -1
  6. package/package.json +1 -1
  7. package/src/components/ActionTable/ActionTable.vue +29 -7
  8. package/src/components/ActionTable/Filters/FilterableField.vue +14 -2
  9. package/src/components/ActionTable/Form/ActionForm.vue +17 -12
  10. package/src/components/ActionTable/Form/Fields/DateField.vue +24 -20
  11. package/src/components/ActionTable/Form/Fields/DateRangeField.vue +57 -53
  12. package/src/components/ActionTable/Form/Fields/EditOnClickTextField.vue +9 -2
  13. package/src/components/ActionTable/Form/Fields/EditableDiv.vue +12 -12
  14. package/src/components/ActionTable/Form/Fields/FieldLabel.vue +1 -1
  15. package/src/components/ActionTable/Form/Fields/SelectField.vue +27 -6
  16. package/src/components/ActionTable/Form/Fields/SelectOrCreateField.vue +56 -0
  17. package/src/components/ActionTable/Form/Fields/index.ts +1 -0
  18. package/src/components/ActionTable/Layouts/ActionTableLayout.vue +20 -23
  19. package/src/components/ActionTable/Toolbars/ActionToolbar.vue +44 -36
  20. package/src/components/ActionTable/listControls.ts +3 -3
  21. package/src/components/DragAndDrop/ListItemDraggable.vue +38 -28
  22. package/src/components/DragAndDrop/dragAndDrop.ts +220 -220
  23. package/src/components/DragAndDrop/listDragAndDrop.ts +256 -227
  24. package/src/components/PanelsDrawer/PanelsDrawer.vue +7 -7
  25. package/src/components/PanelsDrawer/PanelsDrawerTabs.vue +3 -3
  26. package/src/components/Utility/Buttons/ShowHideButton.vue +86 -0
  27. package/src/components/Utility/Buttons/index.ts +1 -0
  28. package/src/components/Utility/Dialogs/ActionFormDialog.vue +30 -0
  29. package/src/components/Utility/Dialogs/CreateNewWithNameDialog.vue +26 -0
  30. package/src/components/Utility/Dialogs/RenderedFormDialog.vue +50 -0
  31. package/src/components/Utility/Dialogs/index.ts +3 -0
  32. package/src/helpers/actions.ts +84 -20
  33. package/src/helpers/formats.ts +23 -21
  34. package/src/helpers/objectStore.ts +24 -12
  35. package/src/types/actions.d.ts +12 -6
  36. package/src/types/controls.d.ts +23 -6
  37. package/types/vue-shims.d.ts +3 -2
@@ -6,11 +6,13 @@
6
6
  v-if="!hideToolbar"
7
7
  :title="title"
8
8
  :refresh-button="refreshButton"
9
- :actions="actions?.filter(a => a.batch)"
9
+ :create-button="createButton"
10
+ :actions="controller.batchActions"
10
11
  :action-target="controller.selectedRows.value"
11
12
  :exporter="controller.exportList"
12
13
  :loading="controller.isLoadingList.value || controller.isLoadingSummary.value"
13
14
  @refresh="controller.refreshAll"
15
+ @create="controller.action && controller.action('create')"
14
16
  >
15
17
  <template #default>
16
18
  <slot name="action-toolbar" />
@@ -23,7 +25,7 @@
23
25
  v-if="activeFilter"
24
26
  :name="controller.name"
25
27
  :show-filters="showFilters"
26
- :filters="filters"
28
+ :filters="controller.filters.value"
27
29
  :active-filter="activeFilter"
28
30
  class="dx-action-table-filters"
29
31
  @update:active-filter="controller.setActiveFilter"
@@ -37,11 +39,12 @@
37
39
  :label="controller.label"
38
40
  :name="controller.name"
39
41
  :class="tableClass"
42
+ :menu-actions="controller.menuActions"
40
43
  :summary="controller.summary.value"
41
44
  :loading-list="controller.isLoadingList.value"
42
45
  :loading-summary="controller.isLoadingSummary.value"
43
46
  :paged-items="controller.pagedItems.value"
44
- :columns="columns"
47
+ :columns="controller.columns || []"
45
48
  :selection="selection"
46
49
  @update:selected-rows="controller.setSelectedRows"
47
50
  @update:pagination="controller.setPagination"
@@ -49,11 +52,11 @@
49
52
  </slot>
50
53
  <slot name="panels">
51
54
  <PanelsDrawer
52
- v-if="activeItem && panels"
55
+ v-if="activeItem && controller.panels"
53
56
  :title="panelTitle"
54
57
  :model-value="activePanel"
55
- :active-item="activeItem"
56
- :panels="panels"
58
+ :target="activeItem"
59
+ :panels="controller.panels"
57
60
  @update:model-value="panel => controller.activatePanel(activeItem, panel)"
58
61
  @close="controller.setActiveItem(null)"
59
62
  >
@@ -70,7 +73,7 @@
70
73
  </template>
71
74
  <script setup lang="ts">
72
75
  import { computed } from "vue";
73
- import { ActionController, ActionPanel, FilterGroup, ResourceAction, TableColumn } from "../../../types";
76
+ import { ActionController, ListController } from "../../../types";
74
77
  import { PanelsDrawer } from "../../PanelsDrawer";
75
78
  import { PreviousNextControls } from "../../Utility";
76
79
  import ActionTable from "../ActionTable.vue";
@@ -78,30 +81,24 @@ import { CollapsableFiltersSidebar } from "../Filters";
78
81
  import { ActionToolbar } from "../Toolbars";
79
82
 
80
83
  export interface ActionTableLayoutProps {
81
- title?: string;
82
- controller: ActionController;
83
- columns: TableColumn[];
84
- filters?: FilterGroup[];
85
- panels?: ActionPanel[];
86
- actions?: ResourceAction[];
84
+ controller: ListController & ActionController;
87
85
  exporter?: () => Promise<void>;
86
+ hideToolbar?: boolean;
88
87
  panelTitleField?: string;
89
- tableClass?: string;
90
88
  refreshButton?: boolean;
91
- showFilters?: boolean;
92
- hideToolbar?: boolean;
89
+ createButton?: boolean;
93
90
  selection?: "multiple" | "single";
91
+ showFilters?: boolean;
92
+ tableClass?: string;
93
+ title?: string;
94
94
  }
95
95
 
96
96
  const props = withDefaults(defineProps<ActionTableLayoutProps>(), {
97
- title: "",
98
- tableClass: "",
99
- selection: "multiple",
100
- filters: undefined,
101
- panels: undefined,
102
- actions: undefined,
103
97
  exporter: undefined,
104
- panelTitleField: ""
98
+ panelTitleField: "",
99
+ selection: "multiple",
100
+ tableClass: "",
101
+ title: ""
105
102
  });
106
103
 
107
104
  const activeFilter = computed(() => props.controller.activeFilter.value);
@@ -1,46 +1,54 @@
1
1
  <template>
2
- <div class="dx-action-toolbar flex items-center">
3
- <div class="flex-grow px-6">
4
- <slot name="title">
5
- <h4 v-if="title">
6
- {{ title }}
7
- </h4>
8
- </slot>
9
- </div>
10
- <div class="py-3 flex items-center flex-nowrap">
11
- <slot />
12
- <RefreshButton
13
- v-if="refreshButton"
14
- :loading="loading"
15
- @click="$emit('refresh')"
16
- />
17
- <ExportButton
18
- v-if="exporter"
19
- :exporter="exporter"
20
- class="ml-4"
21
- />
22
- <ActionMenu
23
- v-if="actions && actions.length > 0"
24
- class="ml-4 dx-batch-actions"
25
- :target="actionTarget"
26
- :actions="actions"
27
- />
28
- <slot name="after" />
29
- </div>
30
- </div>
2
+ <div class="dx-action-toolbar flex items-center">
3
+ <div class="flex-grow px-6">
4
+ <slot name="title">
5
+ <h4 v-if="title">
6
+ {{ title }}
7
+ </h4>
8
+ </slot>
9
+ </div>
10
+ <div class="py-3 flex items-center flex-nowrap">
11
+ <slot />
12
+ <QBtn
13
+ v-if="createButton"
14
+ class="bg-green-900 mr-4 px-4"
15
+ @click="$emit('create')"
16
+ >
17
+ Create
18
+ </QBtn>
19
+ <RefreshButton
20
+ v-if="refreshButton"
21
+ :loading="loading"
22
+ @click="$emit('refresh')"
23
+ />
24
+ <ExportButton
25
+ v-if="exporter"
26
+ :exporter="exporter"
27
+ class="ml-4"
28
+ />
29
+ <ActionMenu
30
+ v-if="actions && actions.length > 0"
31
+ class="ml-4 dx-batch-actions"
32
+ :target="actionTarget"
33
+ :actions="actions"
34
+ />
35
+ <slot name="after" />
36
+ </div>
37
+ </div>
31
38
  </template>
32
39
  <script setup lang="ts">
33
40
  import { ActionTargetItem, AnyObject, ResourceAction } from "../../../types";
34
41
  import { ExportButton, RefreshButton } from "../../Utility";
35
42
  import ActionMenu from "../ActionMenu";
36
43
 
37
- defineEmits(["refresh"]);
44
+ defineEmits(["refresh", "create"]);
38
45
  defineProps<{
39
- title?: string,
40
- actions?: ResourceAction[],
41
- actionTarget?: ActionTargetItem[],
42
- refreshButton?: boolean,
43
- loading?: boolean,
44
- exporter?: (filter?: AnyObject) => void | Promise<void>
46
+ title?: string;
47
+ actions?: ResourceAction[];
48
+ actionTarget?: ActionTargetItem[];
49
+ createButton?: boolean;
50
+ refreshButton?: boolean;
51
+ loading?: boolean;
52
+ exporter?: (filter?: AnyObject) => void | Promise<void>;
45
53
  }>();
46
54
  </script>
@@ -3,10 +3,10 @@ import { RouteParams, Router } from "vue-router";
3
3
  import { danxOptions } from "../../config";
4
4
  import { getItem, latestCallOnly, setItem, storeObject, waitForRef } from "../../helpers";
5
5
  import {
6
- ActionController,
7
6
  ActionTargetItem,
8
7
  AnyObject,
9
8
  FilterGroup,
9
+ ListController,
10
10
  ListControlsFilter,
11
11
  ListControlsOptions,
12
12
  ListControlsPagination,
@@ -14,7 +14,7 @@ import {
14
14
  } from "../../types";
15
15
  import { getFilterFromUrl } from "./listHelpers";
16
16
 
17
- export function useListControls(name: string, options: ListControlsOptions): ActionController {
17
+ export function useListControls(name: string, options: ListControlsOptions): ListController {
18
18
  let isInitialized = false;
19
19
  const PAGE_SETTINGS_KEY = `dx-${name}-pager`;
20
20
  const pagedItems = shallowRef<PagedItems | null>(null);
@@ -490,7 +490,7 @@ export function useListControls(name: string, options: ListControlsOptions): Act
490
490
  activeItem,
491
491
  activePanel,
492
492
 
493
- // Actions
493
+ // List controls
494
494
  initialize,
495
495
  resetPaging,
496
496
  setPagination,
@@ -6,7 +6,10 @@
6
6
  @dragend="dragAndDrop.dragEnd"
7
7
  >
8
8
  <div class="flex items-center">
9
- <div v-if="showHandle">
9
+ <div
10
+ v-if="showHandle"
11
+ :class="handleClass"
12
+ >
10
13
  <SvgImg
11
14
  :svg="DragHandleIcon"
12
15
  class="w-4 h-4"
@@ -19,39 +22,46 @@
19
22
  </div>
20
23
  </div>
21
24
  </template>
22
- <script setup>
25
+ <script setup lang="ts">
23
26
  import { DragHandleDotsIcon as DragHandleIcon } from "../../svg";
24
27
  import { SvgImg } from "../Utility";
25
28
  import { ListDragAndDrop } from "./listDragAndDrop";
26
29
 
27
- const emit = defineEmits(["position", "update:list-items"]);
28
- const props = defineProps({
29
- dropZone: {
30
- type: [Function, String],
31
- required: true
32
- },
33
- direction: {
34
- type: String,
35
- default: "vertical",
36
- validator: (value) => ["vertical", "horizontal"].includes(value)
37
- },
38
- showHandle: Boolean,
39
- listItems: {
40
- type: Array,
41
- default: null
42
- }
30
+ const emit = defineEmits(["position", "update:list-items", "drop-zone"]);
31
+ const dragging = defineModel<boolean>();
32
+ const props = withDefaults(defineProps<{
33
+ dropZone: string | (() => string);
34
+ direction?: "vertical" | "horizontal";
35
+ showHandle?: boolean;
36
+ handleClass?: string | object;
37
+ listItems?: any[];
38
+ }>(), {
39
+ direction: "vertical",
40
+ handleClass: "",
41
+ listItems: () => []
43
42
  });
44
43
 
45
44
  const dragAndDrop = new ListDragAndDrop()
46
- .setDropZone(props.dropZone)
47
- .setOptions({ showPlaceholder: true, direction: props.direction })
48
- .onPositionChange((newPosition, oldPosition) => {
49
- emit("position", newPosition);
45
+ .setDropZone(props.dropZone)
46
+ .setOptions({ showPlaceholder: true, direction: props.direction })
47
+ .onStart(() => dragging.value = true)
48
+ .onEnd(() => dragging.value = false)
49
+ .onDropZoneChange((target, dropZone, newPosition, oldPosition, data) => {
50
+ let item = null;
51
+ let items = [];
52
+ if (props.listItems) {
53
+ items = [...props.listItems];
54
+ item = items.splice(oldPosition, 1)[0];
55
+ }
50
56
 
51
- if (props.listItems) {
52
- const items = [...props.listItems];
53
- items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
54
- emit("update:list-items", items);
55
- }
56
- });
57
+ emit("drop-zone", { target, item, items, dropZone, oldPosition, newPosition, data });
58
+ })
59
+ .onPositionChange((newPosition, oldPosition) => {
60
+ emit("position", newPosition);
61
+ if (props.listItems) {
62
+ const items = [...props.listItems];
63
+ items.splice(newPosition, 0, items.splice(oldPosition, 1)[0]);
64
+ emit("update:list-items", items);
65
+ }
66
+ });
57
67
  </script>