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.
- package/.eslintrc.cjs +32 -30
- package/danx-local.sh +1 -1
- package/dist/danx.es.js +7413 -7461
- package/dist/danx.es.js.map +1 -1
- package/dist/danx.umd.js +5 -5
- package/dist/danx.umd.js.map +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/ActionTable/ActionMenu.vue +1 -1
- package/src/components/ActionTable/ActionTable.vue +67 -47
- package/src/components/ActionTable/{ActionTableColumn.vue → Columns/ActionTableColumn.vue} +4 -3
- package/src/components/ActionTable/{ActionTableHeaderColumn.vue → Columns/ActionTableHeaderColumn.vue} +2 -2
- package/src/components/ActionTable/Columns/index.ts +2 -0
- package/src/components/ActionTable/Filters/CollapsableFiltersSidebar.vue +23 -21
- package/src/components/ActionTable/Form/Fields/DateRangeField.vue +3 -5
- package/src/components/ActionTable/Form/Fields/NumberField.vue +60 -59
- package/src/components/ActionTable/Form/Fields/SelectField.vue +135 -135
- package/src/components/ActionTable/Form/Fields/TextField.vue +36 -36
- package/src/components/ActionTable/Form/RenderedForm.vue +133 -112
- package/src/components/ActionTable/Form/form.d.ts +31 -0
- package/src/components/ActionTable/Layouts/ActionTableLayout.vue +93 -4
- package/src/components/ActionTable/TableSummaryRow.vue +4 -4
- package/src/components/ActionTable/Toolbars/ActionToolbar.vue +46 -0
- package/src/components/ActionTable/Toolbars/index.ts +1 -0
- package/src/components/ActionTable/index.ts +1 -2
- package/src/components/ActionTable/listControls.ts +512 -385
- package/src/components/ActionTable/listHelpers.ts +46 -44
- package/src/components/ActionTable/tableColumns.ts +66 -66
- package/src/components/PanelsDrawer/PanelsDrawer.vue +37 -26
- package/src/components/PanelsDrawer/PanelsDrawerPanels.vue +1 -1
- package/src/components/PanelsDrawer/PanelsDrawerTabs.vue +1 -6
- package/src/components/Utility/Buttons/ExportButton.vue +1 -1
- package/src/components/Utility/Buttons/RefreshButton.vue +5 -5
- package/src/components/Utility/Controls/PreviousNextControls.vue +4 -4
- package/src/components/Utility/Dialogs/ConfirmDialog.vue +69 -115
- package/src/components/Utility/Dialogs/DialogLayout.vue +95 -0
- package/src/components/Utility/Dialogs/InfoDialog.vue +40 -80
- package/src/components/Utility/Layouts/CollapsableSidebar.vue +2 -8
- package/src/components/Utility/Popovers/PopoverMenu.vue +3 -3
- package/src/components/Utility/Tools/RenderVnode.vue +21 -12
- package/src/helpers/actions.ts +198 -188
- package/src/styles/general.scss +12 -11
- package/src/styles/quasar-reset.scss +81 -22
- package/src/styles/themes/danx/action-table.scss +19 -0
- package/src/styles/themes/danx/buttons.scss +13 -0
- package/src/styles/themes/danx/dialogs.scss +43 -0
- package/src/styles/themes/danx/forms.scss +23 -0
- package/src/styles/themes/danx/index.scss +7 -0
- package/src/styles/themes/danx/panels.scss +19 -0
- package/src/styles/themes/danx/sidebar.scss +3 -0
- package/src/styles/themes/danx/toolbar.scss +3 -0
- package/types/index.d.ts +1 -0
- 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
|
-
<
|
3
|
-
|
4
|
-
|
5
|
-
|
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
|
-
<
|
11
|
-
|
12
|
-
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
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="
|
20
|
-
|
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
|
-
<
|
50
|
-
|
51
|
-
|
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
|
36
|
+
import DialogLayout from "./DialogLayout";
|
61
37
|
|
62
38
|
const emit = defineEmits(["update:model-value", "close"]);
|
63
39
|
defineProps({
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
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
|
-
|
93
|
-
|
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
|
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
|
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
|
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
|
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
|
-
|
6
|
-
|
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
|
-
|
10
|
-
|
11
|
-
|
13
|
+
if (typeof props.vnode === "function") {
|
14
|
+
return props.vnode(props.props);
|
15
|
+
}
|
12
16
|
|
13
|
-
|
14
|
-
|
15
|
-
|
16
|
-
|
17
|
-
|
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>
|