quasar-ui-danx 0.3.22 → 0.4.2

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 (53) hide show
  1. package/.eslintrc.cjs +32 -30
  2. package/danx-local.sh +1 -1
  3. package/dist/danx.es.js +7413 -7461
  4. package/dist/danx.es.js.map +1 -1
  5. package/dist/danx.umd.js +5 -5
  6. package/dist/danx.umd.js.map +1 -1
  7. package/dist/style.css +1 -1
  8. package/package.json +1 -1
  9. package/src/components/ActionTable/ActionMenu.vue +1 -1
  10. package/src/components/ActionTable/ActionTable.vue +67 -47
  11. package/src/components/ActionTable/{ActionTableColumn.vue → Columns/ActionTableColumn.vue} +4 -3
  12. package/src/components/ActionTable/{ActionTableHeaderColumn.vue → Columns/ActionTableHeaderColumn.vue} +2 -2
  13. package/src/components/ActionTable/Columns/index.ts +2 -0
  14. package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue +23 -21
  15. package/src/components/ActionTable/Form/Fields/DateRangeField.vue +3 -5
  16. package/src/components/ActionTable/Form/Fields/NumberField.vue +60 -59
  17. package/src/components/ActionTable/Form/Fields/SelectField.vue +135 -135
  18. package/src/components/ActionTable/Form/Fields/TextField.vue +36 -36
  19. package/src/components/ActionTable/Form/RenderedForm.vue +133 -112
  20. package/src/components/ActionTable/Form/form.d.ts +31 -0
  21. package/src/components/ActionTable/Layouts/ActionTableLayout.vue +93 -4
  22. package/src/components/ActionTable/TableSummaryRow.vue +4 -4
  23. package/src/components/ActionTable/Toolbars/ActionToolbar.vue +46 -0
  24. package/src/components/ActionTable/Toolbars/index.ts +1 -0
  25. package/src/components/ActionTable/index.ts +1 -2
  26. package/src/components/ActionTable/listControls.ts +512 -385
  27. package/src/components/ActionTable/listHelpers.ts +46 -44
  28. package/src/components/ActionTable/tableColumns.ts +66 -66
  29. package/src/components/PanelsDrawer/PanelsDrawer.vue +37 -26
  30. package/src/components/PanelsDrawer/PanelsDrawerPanels.vue +1 -1
  31. package/src/components/PanelsDrawer/PanelsDrawerTabs.vue +1 -6
  32. package/src/components/Utility/Buttons/ExportButton.vue +1 -1
  33. package/src/components/Utility/Buttons/RefreshButton.vue +5 -5
  34. package/src/components/Utility/Controls/PreviousNextControls.vue +4 -4
  35. package/src/components/Utility/Dialogs/ConfirmDialog.vue +69 -115
  36. package/src/components/Utility/Dialogs/DialogLayout.vue +95 -0
  37. package/src/components/Utility/Dialogs/InfoDialog.vue +40 -80
  38. package/src/components/Utility/Layouts/CollapsableSidebar.vue +2 -8
  39. package/src/components/Utility/Popovers/PopoverMenu.vue +3 -3
  40. package/src/components/Utility/Tools/RenderVnode.vue +21 -12
  41. package/src/helpers/actions.ts +198 -188
  42. package/src/styles/general.scss +12 -11
  43. package/src/styles/quasar-reset.scss +81 -22
  44. package/src/styles/themes/danx/action-table.scss +19 -0
  45. package/src/styles/themes/danx/buttons.scss +13 -0
  46. package/src/styles/themes/danx/dialogs.scss +43 -0
  47. package/src/styles/themes/danx/forms.scss +23 -0
  48. package/src/styles/themes/danx/index.scss +7 -0
  49. package/src/styles/themes/danx/panels.scss +19 -0
  50. package/src/styles/themes/danx/sidebar.scss +3 -0
  51. package/src/styles/themes/danx/toolbar.scss +3 -0
  52. package/types/index.d.ts +1 -0
  53. package/src/styles/actions.scss +0 -10
@@ -0,0 +1,95 @@
1
+ <template>
2
+ <QDialog
3
+ class="dx-dialog"
4
+ :full-height="fullHeight"
5
+ :full-width="fullWidth"
6
+ :model-value="!!modelValue"
7
+ :no-backdrop-dismiss="!backdropDismiss"
8
+ :maximized="maximized"
9
+ @update:model-value="onClose"
10
+ >
11
+ <QCard class="dx-dialog-card flex flex-col flex-nowrap">
12
+ <QCardSection
13
+ class="dx-dialog-header flex items-center"
14
+ >
15
+ <div class="flex-grow">
16
+ <h3
17
+ v-if="title || $slots.title"
18
+ class="dx-dialog-title flex items-center"
19
+ :class="titleClass"
20
+ >
21
+ <slot name="title">
22
+ {{ title }}
23
+ </slot>
24
+ </h3>
25
+ <div
26
+ v-if="subtitle || $slots.subtitle"
27
+ class="dx-dialog-subtitle"
28
+ >
29
+ <slot name="subtitle">
30
+ {{ subtitle }}
31
+ </slot>
32
+ </div>
33
+ </div>
34
+ <div>
35
+ <div
36
+ class="dx-close-button cursor-pointer"
37
+ @click="onClose"
38
+ >
39
+ <CloseIcon class="w-5" />
40
+ </div>
41
+ </div>
42
+ </QCardSection>
43
+ <QCardSection v-if="$slots.toolbar">
44
+ <slot name="toolbar" />
45
+ </QCardSection>
46
+ <QCardSection
47
+ v-if="content || $slots.default"
48
+ class="dx-dialog-content flex-grow max-h-full overflow-y-auto"
49
+ :class="contentClass"
50
+ >
51
+ <slot>{{ content }}</slot>
52
+ </QCardSection>
53
+ <div class="flex dx-dialog-actions">
54
+ <slot name="actions" />
55
+ </div>
56
+ </QCard>
57
+ </QDialog>
58
+ </template>
59
+
60
+ <script setup>
61
+ import { XIcon as CloseIcon } from "@heroicons/vue/outline";
62
+
63
+ const emit = defineEmits(["close"]);
64
+ defineProps({
65
+ modelValue: { type: [String, Boolean, Object], default: true },
66
+ title: {
67
+ type: String,
68
+ default: ""
69
+ },
70
+ titleClass: {
71
+ type: String,
72
+ default: ""
73
+ },
74
+ subtitle: {
75
+ type: String,
76
+ default: ""
77
+ },
78
+ content: {
79
+ type: String,
80
+ default: ""
81
+ },
82
+ backdropDismiss: Boolean,
83
+ maximized: Boolean,
84
+ fullWidth: Boolean,
85
+ fullHeight: Boolean,
86
+ contentClass: {
87
+ type: String,
88
+ default: ""
89
+ }
90
+ });
91
+
92
+ function onClose() {
93
+ emit("close");
94
+ }
95
+ </script>
@@ -1,95 +1,55 @@
1
1
  <template>
2
- <QDialog
3
- :full-height="fullHeight"
4
- :full-width="fullWidth"
5
- :model-value="!!modelValue"
6
- :no-backdrop-dismiss="!backdropDismiss"
7
- :maximized="maximized"
8
- @update:model-value="onClose"
2
+ <DialogLayout
3
+ class="dx-info-dialog"
4
+ v-bind="$props"
5
+ @close="onClose"
9
6
  >
10
- <QCard class="flex flex-col flex-nowrap">
11
- <QCardSection
12
- v-if="title || $slots.title"
13
- class="pl-6 pr-10 border-b border-gray-300"
14
- >
15
- <h3
16
- class="font-normal flex items-center"
17
- :class="titleClass"
7
+ <template
8
+ v-if="$slots.title"
9
+ #title
10
+ >
11
+ <slot name="title" />
12
+ </template>
13
+ <template
14
+ v-if="$slots.subtitle"
15
+ #subtitle
16
+ >
17
+ <slot name="subtitle" />
18
+ </template>
19
+ <template #actions>
20
+ <div class="flex-grow">
21
+ <QBtn
22
+ :label="doneText"
23
+ class="dx-dialog-button dx-dialog-button-done"
24
+ :class="doneClass"
25
+ @click="onClose"
18
26
  >
19
- <slot name="title">
20
- {{ title }}
21
- </slot>
22
- </h3>
23
- <div
24
- v-if="subtitle"
25
- class="mt-1 text-sm"
26
- >
27
- {{ subtitle }}
28
- </div>
29
- </QCardSection>
30
- <QCardSection
31
- v-if="content || $slots.default"
32
- class="px-6 bg-gray-100 flex-grow max-h-full overflow-y-auto"
33
- >
34
- <slot>{{ content }}</slot>
35
- </QCardSection>
36
- <div
37
- class="flex items-center justify-center px-6 py-4 border-t border-gray-300"
38
- >
39
- <div class="flex-grow text-right">
40
- <QBtn
41
- :label="doneText"
42
- class="action-btn btn-white-gray"
43
- @click="onClose"
44
- >
45
- <slot name="done-text" />
46
- </QBtn>
47
- </div>
27
+ <slot name="done-text" />
28
+ </QBtn>
48
29
  </div>
49
- <a
50
- class="absolute top-0 right-0 p-4 text-black"
51
- @click="onClose"
52
- >
53
- <CloseIcon class="w-5" />
54
- </a>
55
- </QCard>
56
- </QDialog>
30
+ <slot name="actions" />
31
+ </template>
32
+ </DialogLayout>
57
33
  </template>
58
34
 
59
35
  <script setup>
60
- import { XIcon as CloseIcon } from "@heroicons/vue/outline";
36
+ import DialogLayout from "./DialogLayout";
61
37
 
62
38
  const emit = defineEmits(["update:model-value", "close"]);
63
39
  defineProps({
64
- modelValue: { type: [Boolean, Object], default: true },
65
- title: {
66
- type: String,
67
- default: ""
68
- },
69
- titleClass: {
70
- type: String,
71
- default: ""
72
- },
73
- subtitle: {
74
- type: String,
75
- default: ""
76
- },
77
- content: {
78
- type: String,
79
- default: ""
80
- },
81
- backdropDismiss: Boolean,
82
- maximized: Boolean,
83
- fullWidth: Boolean,
84
- fullHeight: Boolean,
85
- doneText: {
86
- type: String,
87
- default: "Done"
88
- }
40
+ ...DialogLayout.props,
41
+ doneClass: {
42
+ type: [String, Object],
43
+ default: ""
44
+ },
45
+ doneText: {
46
+ type: String,
47
+ default: "Done"
48
+ }
89
49
  });
90
50
 
91
51
  function onClose() {
92
- emit("update:model-value", false);
93
- emit("close");
52
+ emit("update:model-value", false);
53
+ emit("close");
94
54
  }
95
55
  </script>
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div
3
+ class="dx-collapsable-sidebar overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 transition-all relative"
3
4
  :class="{
4
- [cls['collapsable-sidebar']]: true,
5
5
  'is-collapsed': isCollapsed,
6
6
  'is-right-side': rightSide,
7
7
  [displayClass]: true,
@@ -81,7 +81,7 @@ const isCollapsed = ref(getItem(props.name + "-is-collapsed", props.collapse));
81
81
 
82
82
  function setCollapse(state) {
83
83
  isCollapsed.value = state;
84
- setItem(props.name + "-is-collapsed", isCollapsed.value ? "1" : "");
84
+ setItem(props.name + "-is-collapsed", !!isCollapsed.value);
85
85
  }
86
86
 
87
87
  function toggleCollapse() {
@@ -104,9 +104,3 @@ watch(() => props.collapse, () => {
104
104
  setCollapse(props.collapse);
105
105
  });
106
106
  </script>
107
-
108
- <style module="cls" lang="scss">
109
- .collapsable-sidebar {
110
- @apply overflow-y-auto overflow-x-hidden scroll-smooth flex-shrink-0 border-r border-gray-200 transition-all relative;
111
- }
112
- </style>
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <a
3
- class="p-3 actionable"
3
+ class="p-3 dx-popover-menu"
4
4
  :class="{'opacity-50 cursor-not-allowed': disabled}"
5
5
  >
6
6
  <QTooltip v-if="$slots.tooltip || tooltip">
@@ -16,7 +16,7 @@
16
16
  />
17
17
  <MenuIcon
18
18
  v-else
19
- class="w-4 text-black"
19
+ class="w-4 dx-menu-icon"
20
20
  />
21
21
  </Transition>
22
22
  <QMenu
@@ -73,7 +73,7 @@ defineProps({
73
73
  type: [Function, Object],
74
74
  default: () => ({
75
75
  is: QSpinner,
76
- props: { class: "w-4 h-4 text-black" }
76
+ props: { class: "w-4 h-4" }
77
77
  })
78
78
  }
79
79
  });
@@ -2,20 +2,29 @@
2
2
  import { isRef, isVNode } from "vue";
3
3
 
4
4
  const RenderVnode = (props) => {
5
- if (isVNode(props.vnode)) {
6
- return props.vnode;
7
- }
5
+ if (isVNode(props.vnode)) {
6
+ return props.vnode;
7
+ }
8
+
9
+ if (isRef(props.vnode)) {
10
+ return props.vnode.value;
11
+ }
8
12
 
9
- if (isRef(props.vnode)) {
10
- return props.vnode.value;
11
- }
13
+ if (typeof props.vnode === "function") {
14
+ return props.vnode(props.props);
15
+ }
12
16
 
13
- if (typeof props.vnode === "function") {
14
- return props.vnode();
15
- }
16
-
17
- return null;
17
+ return null;
18
+ };
19
+ RenderVnode.props = {
20
+ vnode: {
21
+ type: [Function, Object],
22
+ required: true
23
+ },
24
+ props: {
25
+ type: Object,
26
+ default: () => ({})
27
+ }
18
28
  };
19
- RenderVnode.props = { vnode: { type: [Function, Object], required: true } };
20
29
  export default RenderVnode;
21
30
  </script>