@winchsa/ui 0.1.64 → 0.1.66
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.
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
title: string;
|
|
3
|
+
description?: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
errorMessages?: string | string[];
|
|
7
|
+
};
|
|
8
|
+
type __VLS_ModelProps = {
|
|
9
|
+
modelValue?: boolean;
|
|
10
|
+
};
|
|
11
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
12
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
13
|
+
"update:modelValue": (value: boolean) => any;
|
|
14
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
15
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
16
|
+
}>, {
|
|
17
|
+
color: string;
|
|
18
|
+
disabled: boolean;
|
|
19
|
+
errorMessages: string | string[];
|
|
20
|
+
description: string;
|
|
21
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
|
@@ -0,0 +1,98 @@
|
|
|
1
|
+
<script setup>
|
|
2
|
+
import { computed, useId } from "vue";
|
|
3
|
+
import { VMessages, VSwitch } from "vuetify/components";
|
|
4
|
+
const props = defineProps({
|
|
5
|
+
title: { type: String, required: true },
|
|
6
|
+
description: { type: String, required: false, default: "" },
|
|
7
|
+
color: { type: String, required: false, default: "success" },
|
|
8
|
+
disabled: { type: Boolean, required: false, default: false },
|
|
9
|
+
errorMessages: { type: [String, Array], required: false, default: () => [] }
|
|
10
|
+
});
|
|
11
|
+
defineOptions({
|
|
12
|
+
name: "SwitchCard"
|
|
13
|
+
});
|
|
14
|
+
const model = defineModel({ type: Boolean, ...{ default: false } });
|
|
15
|
+
const id = useId();
|
|
16
|
+
const titleId = `${id}-title`;
|
|
17
|
+
const descriptionId = `${id}-description`;
|
|
18
|
+
const messages = computed(() => [props.errorMessages].flat().filter(Boolean));
|
|
19
|
+
function toggle() {
|
|
20
|
+
if (props.disabled) {
|
|
21
|
+
return;
|
|
22
|
+
}
|
|
23
|
+
model.value = !model.value;
|
|
24
|
+
}
|
|
25
|
+
</script>
|
|
26
|
+
|
|
27
|
+
<template>
|
|
28
|
+
<div>
|
|
29
|
+
<div
|
|
30
|
+
class="switch-card d-flex align-center gap-4 rounded-lg px-4 py-3"
|
|
31
|
+
:class="{
|
|
32
|
+
'switch-card--disabled': disabled,
|
|
33
|
+
'switch-card--error': messages.length
|
|
34
|
+
}"
|
|
35
|
+
@click="toggle"
|
|
36
|
+
>
|
|
37
|
+
<div class="switch-card__text flex-grow-1 text-start">
|
|
38
|
+
<div :id="titleId" class="text-body-2 font-weight-bold text-high-emphasis app-font-size-13">
|
|
39
|
+
{{ title }}
|
|
40
|
+
</div>
|
|
41
|
+
<div
|
|
42
|
+
v-if="description"
|
|
43
|
+
:id="descriptionId"
|
|
44
|
+
class="text-medium-emphasis app-font-size-12 mt-1"
|
|
45
|
+
>
|
|
46
|
+
{{ description }}
|
|
47
|
+
</div>
|
|
48
|
+
</div>
|
|
49
|
+
|
|
50
|
+
<!-- The switch toggles itself; without .stop the card's click would toggle it back. -->
|
|
51
|
+
<div class="flex-shrink-0" @click.stop>
|
|
52
|
+
<VSwitch
|
|
53
|
+
v-model="model"
|
|
54
|
+
:color="color"
|
|
55
|
+
:disabled="disabled"
|
|
56
|
+
:error="!!messages.length"
|
|
57
|
+
:aria-labelledby="titleId"
|
|
58
|
+
:aria-describedby="description ? descriptionId : void 0"
|
|
59
|
+
density="compact"
|
|
60
|
+
hide-details
|
|
61
|
+
inset
|
|
62
|
+
/>
|
|
63
|
+
</div>
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<VMessages
|
|
67
|
+
v-if="messages.length"
|
|
68
|
+
class="text-start px-1 mt-1"
|
|
69
|
+
color="error"
|
|
70
|
+
:messages="messages"
|
|
71
|
+
active
|
|
72
|
+
/>
|
|
73
|
+
</div>
|
|
74
|
+
</template>
|
|
75
|
+
|
|
76
|
+
<style scoped>
|
|
77
|
+
.switch-card {
|
|
78
|
+
border: 1px solid rgba(var(--v-border-color), var(--v-border-opacity));
|
|
79
|
+
background: rgb(var(--v-theme-gray-50));
|
|
80
|
+
cursor: pointer;
|
|
81
|
+
transition: border-color 0.15s ease;
|
|
82
|
+
}
|
|
83
|
+
.switch-card:hover {
|
|
84
|
+
border-color: rgba(var(--v-border-color), 0.25);
|
|
85
|
+
}
|
|
86
|
+
.switch-card--error {
|
|
87
|
+
border-color: rgb(var(--v-theme-error));
|
|
88
|
+
}
|
|
89
|
+
.switch-card--disabled {
|
|
90
|
+
cursor: default;
|
|
91
|
+
}
|
|
92
|
+
.switch-card--disabled .switch-card__text {
|
|
93
|
+
opacity: var(--v-disabled-opacity);
|
|
94
|
+
}
|
|
95
|
+
.switch-card--disabled:hover {
|
|
96
|
+
border-color: rgba(var(--v-border-color), var(--v-border-opacity));
|
|
97
|
+
}
|
|
98
|
+
</style>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
type __VLS_Props = {
|
|
2
|
+
title: string;
|
|
3
|
+
description?: string;
|
|
4
|
+
color?: string;
|
|
5
|
+
disabled?: boolean;
|
|
6
|
+
errorMessages?: string | string[];
|
|
7
|
+
};
|
|
8
|
+
type __VLS_ModelProps = {
|
|
9
|
+
modelValue?: boolean;
|
|
10
|
+
};
|
|
11
|
+
type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
|
|
12
|
+
declare const __VLS_export: import("vue").DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
13
|
+
"update:modelValue": (value: boolean) => any;
|
|
14
|
+
}, string, import("vue").PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
|
|
15
|
+
"onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
|
|
16
|
+
}>, {
|
|
17
|
+
color: string;
|
|
18
|
+
disabled: boolean;
|
|
19
|
+
errorMessages: string | string[];
|
|
20
|
+
description: string;
|
|
21
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
|
|
22
|
+
declare const _default: typeof __VLS_export;
|
|
23
|
+
export default _default;
|
package/dist/index.d.ts
CHANGED
|
@@ -43,6 +43,7 @@ import WHeaderCard from './components/cards/HeaderCard.vue';
|
|
|
43
43
|
import WImageCard from './components/cards/ImageCard.vue';
|
|
44
44
|
import WInputCard from './components/cards/InputCard.vue';
|
|
45
45
|
import WStaticCard from './components/cards/StaticCard.vue';
|
|
46
|
+
import WSwitchCard from './components/cards/SwitchCard.vue';
|
|
46
47
|
import WDataTable from './components/table/DataTable.vue';
|
|
47
48
|
import WEditableDataTable from './components/table/EditableDataTable.vue';
|
|
48
49
|
import WEditableDataTableRow from './components/table/EditableDataTableRow.vue';
|
|
@@ -62,4 +63,4 @@ import WMoreBtn from './components/MoreBtn.vue';
|
|
|
62
63
|
import WScrollToTop from './components/ScrollToTop.vue';
|
|
63
64
|
import WSiteTitle from './components/SiteTitle.vue';
|
|
64
65
|
import WToaster from './components/Toaster.vue';
|
|
65
|
-
export { WAccordion, WAppBarSearch, WAppCombobox, WAppDrawerHeaderSection, WAppLabel, WAppLink, WAppNumberField, WAppOtpInput, WAppSearchHeader, WAppSelect, WAppStepper, WAppSwitch, WAppTextarea, WAppTextField, WAttachmentCropperInput, WAttachmentInput, WAutocompleteInput, WBaseButton, WCounterInput, WCustomCheckboxes, WCustomCheckboxesWithIcon, WCustomCheckboxesWithImage, WCustomRadios, WCustomRadiosWithIcon, WCustomRadiosWithImage, WDatePicker, WDatePickerRange, WDraggedUploadFile, WImageCardInput, WInputValidationWrapper, WLicensePlateInput, WManualDate, WMobileInput, WPasswordInput, WRangeInput, WTabs, WTimePicker, WAppCard, WAppCardActions, WCardStatisticsHorizontal, WCheckboxesCard, WHeaderCard, WImageCard, WInputCard, WStaticCard, WDataTable, WEditableDataTable, WEditableDataTableRow, WFilterGenerator, WStaticTable, WTablePagination, WBreadcrumbs, WCustomizerSection, WDialogCloseBtn, WDrawer, WIconBtn, WLoadingBar, WLoadingDialog, WLoadingItem, WModal, WMoreBtn, WScrollToTop, WSiteTitle, WToaster };
|
|
66
|
+
export { WAccordion, WAppBarSearch, WAppCombobox, WAppDrawerHeaderSection, WAppLabel, WAppLink, WAppNumberField, WAppOtpInput, WAppSearchHeader, WAppSelect, WAppStepper, WAppSwitch, WAppTextarea, WAppTextField, WAttachmentCropperInput, WAttachmentInput, WAutocompleteInput, WBaseButton, WCounterInput, WCustomCheckboxes, WCustomCheckboxesWithIcon, WCustomCheckboxesWithImage, WCustomRadios, WCustomRadiosWithIcon, WCustomRadiosWithImage, WDatePicker, WDatePickerRange, WDraggedUploadFile, WImageCardInput, WInputValidationWrapper, WLicensePlateInput, WManualDate, WMobileInput, WPasswordInput, WRangeInput, WTabs, WTimePicker, WAppCard, WAppCardActions, WCardStatisticsHorizontal, WCheckboxesCard, WHeaderCard, WImageCard, WInputCard, WStaticCard, WSwitchCard, WDataTable, WEditableDataTable, WEditableDataTableRow, WFilterGenerator, WStaticTable, WTablePagination, WBreadcrumbs, WCustomizerSection, WDialogCloseBtn, WDrawer, WIconBtn, WLoadingBar, WLoadingDialog, WLoadingItem, WModal, WMoreBtn, WScrollToTop, WSiteTitle, WToaster };
|
package/dist/index.js
CHANGED
|
@@ -363,6 +363,12 @@ Object.defineProperty(exports, "WStaticTable", {
|
|
|
363
363
|
return _StaticTable.default;
|
|
364
364
|
}
|
|
365
365
|
});
|
|
366
|
+
Object.defineProperty(exports, "WSwitchCard", {
|
|
367
|
+
enumerable: true,
|
|
368
|
+
get: function () {
|
|
369
|
+
return _SwitchCard.default;
|
|
370
|
+
}
|
|
371
|
+
});
|
|
366
372
|
Object.defineProperty(exports, "WTablePagination", {
|
|
367
373
|
enumerable: true,
|
|
368
374
|
get: function () {
|
|
@@ -432,6 +438,7 @@ var _HeaderCard = _interopRequireDefault(require("./components/cards/HeaderCard.
|
|
|
432
438
|
var _ImageCard = _interopRequireDefault(require("./components/cards/ImageCard.vue"));
|
|
433
439
|
var _InputCard = _interopRequireDefault(require("./components/cards/InputCard.vue"));
|
|
434
440
|
var _StaticCard = _interopRequireDefault(require("./components/cards/StaticCard.vue"));
|
|
441
|
+
var _SwitchCard = _interopRequireDefault(require("./components/cards/SwitchCard.vue"));
|
|
435
442
|
var _DataTable = _interopRequireDefault(require("./components/table/DataTable.vue"));
|
|
436
443
|
var _EditableDataTable = _interopRequireDefault(require("./components/table/EditableDataTable.vue"));
|
|
437
444
|
var _EditableDataTableRow = _interopRequireDefault(require("./components/table/EditableDataTableRow.vue"));
|
package/dist/index.mjs
CHANGED
|
@@ -43,6 +43,7 @@ import WHeaderCard from "./components/cards/HeaderCard.vue";
|
|
|
43
43
|
import WImageCard from "./components/cards/ImageCard.vue";
|
|
44
44
|
import WInputCard from "./components/cards/InputCard.vue";
|
|
45
45
|
import WStaticCard from "./components/cards/StaticCard.vue";
|
|
46
|
+
import WSwitchCard from "./components/cards/SwitchCard.vue";
|
|
46
47
|
import WDataTable from "./components/table/DataTable.vue";
|
|
47
48
|
import WEditableDataTable from "./components/table/EditableDataTable.vue";
|
|
48
49
|
import WEditableDataTableRow from "./components/table/EditableDataTableRow.vue";
|
|
@@ -108,6 +109,7 @@ export {
|
|
|
108
109
|
WImageCard,
|
|
109
110
|
WInputCard,
|
|
110
111
|
WStaticCard,
|
|
112
|
+
WSwitchCard,
|
|
111
113
|
WDataTable,
|
|
112
114
|
WEditableDataTable,
|
|
113
115
|
WEditableDataTableRow,
|