independer-design-system 1.2.0
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/README.md +100 -0
- package/dist/module.d.mts +6 -0
- package/dist/module.json +12 -0
- package/dist/module.mjs +35 -0
- package/dist/runtime/assets/images/checkbox.svg +3 -0
- package/dist/runtime/assets/style.css +1 -0
- package/dist/runtime/components/Button.d.vue.ts +40 -0
- package/dist/runtime/components/Button.vue +110 -0
- package/dist/runtime/components/Button.vue.d.ts +40 -0
- package/dist/runtime/components/ButtonToggle.d.vue.ts +17 -0
- package/dist/runtime/components/ButtonToggle.vue +40 -0
- package/dist/runtime/components/ButtonToggle.vue.d.ts +17 -0
- package/dist/runtime/components/Dialog.d.vue.ts +52 -0
- package/dist/runtime/components/Dialog.vue +116 -0
- package/dist/runtime/components/Dialog.vue.d.ts +52 -0
- package/dist/runtime/components/Form/Checkbox.d.vue.ts +46 -0
- package/dist/runtime/components/Form/Checkbox.vue +93 -0
- package/dist/runtime/components/Form/Checkbox.vue.d.ts +46 -0
- package/dist/runtime/components/Form/Input.d.vue.ts +65 -0
- package/dist/runtime/components/Form/Input.vue +131 -0
- package/dist/runtime/components/Form/Input.vue.d.ts +65 -0
- package/dist/runtime/components/Form/Label.d.vue.ts +51 -0
- package/dist/runtime/components/Form/Label.vue +44 -0
- package/dist/runtime/components/Form/Label.vue.d.ts +51 -0
- package/dist/runtime/components/Form/Radio.d.vue.ts +50 -0
- package/dist/runtime/components/Form/Radio.vue +112 -0
- package/dist/runtime/components/Form/Radio.vue.d.ts +50 -0
- package/dist/runtime/components/Form/Row.d.vue.ts +31 -0
- package/dist/runtime/components/Form/Row.vue +37 -0
- package/dist/runtime/components/Form/Row.vue.d.ts +31 -0
- package/dist/runtime/components/Form/Select.d.vue.ts +45 -0
- package/dist/runtime/components/Form/Select.vue +90 -0
- package/dist/runtime/components/Form/Select.vue.d.ts +45 -0
- package/dist/runtime/components/Form/Tabs.d.vue.ts +38 -0
- package/dist/runtime/components/Form/Tabs.vue +75 -0
- package/dist/runtime/components/Form/Tabs.vue.d.ts +38 -0
- package/dist/runtime/components/Form/Textarea.d.vue.ts +83 -0
- package/dist/runtime/components/Form/Textarea.vue +120 -0
- package/dist/runtime/components/Form/Textarea.vue.d.ts +83 -0
- package/dist/runtime/components/Modal.d.vue.ts +59 -0
- package/dist/runtime/components/Modal.vue +158 -0
- package/dist/runtime/components/Modal.vue.d.ts +59 -0
- package/dist/runtime/components/Pill.d.vue.ts +24 -0
- package/dist/runtime/components/Pill.vue +37 -0
- package/dist/runtime/components/Pill.vue.d.ts +24 -0
- package/dist/runtime/plugin.d.ts +2 -0
- package/dist/runtime/plugin.js +4 -0
- package/dist/runtime/public/assets/logo-full.svg +19 -0
- package/dist/runtime/server/tsconfig.json +3 -0
- package/dist/types.d.mts +7 -0
- package/package.json +62 -0
|
@@ -0,0 +1,120 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<IndFormLabel
|
|
4
|
+
v-if="label"
|
|
5
|
+
:name="name"
|
|
6
|
+
:description="descriptionTop"
|
|
7
|
+
:label="label"
|
|
8
|
+
:label-classes="labelClasses"
|
|
9
|
+
:tooltip="tooltip"
|
|
10
|
+
/>
|
|
11
|
+
|
|
12
|
+
<div class="relative">
|
|
13
|
+
<Icon
|
|
14
|
+
v-if="leadingIcon"
|
|
15
|
+
:name="leadingIcon"
|
|
16
|
+
class="absolute ml-3 mt-3"
|
|
17
|
+
/>
|
|
18
|
+
|
|
19
|
+
<Icon
|
|
20
|
+
v-if="trailingIcon"
|
|
21
|
+
:name="trailingIcon"
|
|
22
|
+
class="absolute right-0 mr-3 mt-3 text-purple"
|
|
23
|
+
/>
|
|
24
|
+
|
|
25
|
+
<div v-if="steps" class="flex gap-2 absolute right-0 mr-3 mt-3">
|
|
26
|
+
<button class="text-purple hover:text-purple-dark" @click.prevent="stepDown">
|
|
27
|
+
<Icon name="eva:minus-circle-outline" />
|
|
28
|
+
</button>
|
|
29
|
+
|
|
30
|
+
<button class="text-purple hover:text-purple-dark" @click.prevent="stepUp">
|
|
31
|
+
<Icon name="eva:plus-circle-outline" />
|
|
32
|
+
</button>
|
|
33
|
+
</div>
|
|
34
|
+
|
|
35
|
+
<textarea
|
|
36
|
+
class="
|
|
37
|
+
block
|
|
38
|
+
min-h-12
|
|
39
|
+
py-[0.6875rem]
|
|
40
|
+
px-3
|
|
41
|
+
border border-grey
|
|
42
|
+
rounded-lg
|
|
43
|
+
w-full
|
|
44
|
+
transition-all
|
|
45
|
+
ease-out
|
|
46
|
+
bg-white
|
|
47
|
+
hover:border-grey-dark
|
|
48
|
+
outline-none
|
|
49
|
+
appearance-none
|
|
50
|
+
disabled:bg-grey-light
|
|
51
|
+
disabled:border-grey
|
|
52
|
+
disabled:cursor-not-allowed
|
|
53
|
+
"
|
|
54
|
+
:class="{ 'border-red-800': error, 'pl-10': leadingIcon, 'pr-12': trailingIcon, 'pr-20': steps }"
|
|
55
|
+
:type="type"
|
|
56
|
+
:id="name"
|
|
57
|
+
:name="name"
|
|
58
|
+
:value="modelValue"
|
|
59
|
+
:inputmode="inputmode"
|
|
60
|
+
:pattern="pattern"
|
|
61
|
+
:min="min"
|
|
62
|
+
:ref="name"
|
|
63
|
+
:autocomplete="autocomplete"
|
|
64
|
+
:disabled="disabled"
|
|
65
|
+
:placeholder="placeholder"
|
|
66
|
+
:rows="rows"
|
|
67
|
+
@input="emit('update:modelValue', $event.target.value)"
|
|
68
|
+
@blur="emit('blur', $event)"
|
|
69
|
+
/>
|
|
70
|
+
</div>
|
|
71
|
+
|
|
72
|
+
<div v-if="error" class="mt-1 text-red-800">{{ error }}</div>
|
|
73
|
+
<div v-if="description" class="mt-2 text-grey-dark">{{ description }}</div>
|
|
74
|
+
</div>
|
|
75
|
+
</template>
|
|
76
|
+
|
|
77
|
+
<script setup>
|
|
78
|
+
const emit = defineEmits(["update:modelValue", "input", "blur", "focus", "step-up", "step-down"]);
|
|
79
|
+
defineProps({
|
|
80
|
+
name: String,
|
|
81
|
+
label: String,
|
|
82
|
+
type: String,
|
|
83
|
+
tooltip: {
|
|
84
|
+
type: Boolean,
|
|
85
|
+
default: false
|
|
86
|
+
},
|
|
87
|
+
modelValue: [String, Number],
|
|
88
|
+
inputmode: String,
|
|
89
|
+
pattern: String,
|
|
90
|
+
min: String,
|
|
91
|
+
autocomplete: String,
|
|
92
|
+
leadingIcon: String,
|
|
93
|
+
trailingIcon: String,
|
|
94
|
+
disabled: Boolean,
|
|
95
|
+
steps: Boolean,
|
|
96
|
+
description: String,
|
|
97
|
+
descriptionTop: String,
|
|
98
|
+
placeholder: String,
|
|
99
|
+
labelClasses: String,
|
|
100
|
+
error: String,
|
|
101
|
+
mask: {
|
|
102
|
+
type: [String, Object],
|
|
103
|
+
default: ""
|
|
104
|
+
},
|
|
105
|
+
rows: {
|
|
106
|
+
type: [String, Number],
|
|
107
|
+
default: 2
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
const stepUp = () => {
|
|
111
|
+
emit("step-up");
|
|
112
|
+
};
|
|
113
|
+
const stepDown = () => {
|
|
114
|
+
emit("step-down");
|
|
115
|
+
};
|
|
116
|
+
</script>
|
|
117
|
+
|
|
118
|
+
<style scoped>
|
|
119
|
+
input[type=date]::-webkit-calendar-picker-indicator{display:none}
|
|
120
|
+
</style>
|
|
@@ -0,0 +1,83 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
name: StringConstructor;
|
|
5
|
+
label: StringConstructor;
|
|
6
|
+
type: StringConstructor;
|
|
7
|
+
tooltip: {
|
|
8
|
+
type: BooleanConstructor;
|
|
9
|
+
default: boolean;
|
|
10
|
+
};
|
|
11
|
+
modelValue: (StringConstructor | NumberConstructor)[];
|
|
12
|
+
inputmode: StringConstructor;
|
|
13
|
+
pattern: StringConstructor;
|
|
14
|
+
min: StringConstructor;
|
|
15
|
+
autocomplete: StringConstructor;
|
|
16
|
+
leadingIcon: StringConstructor;
|
|
17
|
+
trailingIcon: StringConstructor;
|
|
18
|
+
disabled: BooleanConstructor;
|
|
19
|
+
steps: BooleanConstructor;
|
|
20
|
+
description: StringConstructor;
|
|
21
|
+
descriptionTop: StringConstructor;
|
|
22
|
+
placeholder: StringConstructor;
|
|
23
|
+
labelClasses: StringConstructor;
|
|
24
|
+
error: StringConstructor;
|
|
25
|
+
mask: {
|
|
26
|
+
type: (StringConstructor | ObjectConstructor)[];
|
|
27
|
+
default: string;
|
|
28
|
+
};
|
|
29
|
+
rows: {
|
|
30
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
31
|
+
default: number;
|
|
32
|
+
};
|
|
33
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
34
|
+
input: (...args: any[]) => void;
|
|
35
|
+
blur: (...args: any[]) => void;
|
|
36
|
+
focus: (...args: any[]) => void;
|
|
37
|
+
"update:modelValue": (...args: any[]) => void;
|
|
38
|
+
"step-up": (...args: any[]) => void;
|
|
39
|
+
"step-down": (...args: any[]) => void;
|
|
40
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
41
|
+
name: StringConstructor;
|
|
42
|
+
label: StringConstructor;
|
|
43
|
+
type: StringConstructor;
|
|
44
|
+
tooltip: {
|
|
45
|
+
type: BooleanConstructor;
|
|
46
|
+
default: boolean;
|
|
47
|
+
};
|
|
48
|
+
modelValue: (StringConstructor | NumberConstructor)[];
|
|
49
|
+
inputmode: StringConstructor;
|
|
50
|
+
pattern: StringConstructor;
|
|
51
|
+
min: StringConstructor;
|
|
52
|
+
autocomplete: StringConstructor;
|
|
53
|
+
leadingIcon: StringConstructor;
|
|
54
|
+
trailingIcon: StringConstructor;
|
|
55
|
+
disabled: BooleanConstructor;
|
|
56
|
+
steps: BooleanConstructor;
|
|
57
|
+
description: StringConstructor;
|
|
58
|
+
descriptionTop: StringConstructor;
|
|
59
|
+
placeholder: StringConstructor;
|
|
60
|
+
labelClasses: StringConstructor;
|
|
61
|
+
error: StringConstructor;
|
|
62
|
+
mask: {
|
|
63
|
+
type: (StringConstructor | ObjectConstructor)[];
|
|
64
|
+
default: string;
|
|
65
|
+
};
|
|
66
|
+
rows: {
|
|
67
|
+
type: (StringConstructor | NumberConstructor)[];
|
|
68
|
+
default: number;
|
|
69
|
+
};
|
|
70
|
+
}>> & Readonly<{
|
|
71
|
+
onInput?: ((...args: any[]) => any) | undefined;
|
|
72
|
+
onBlur?: ((...args: any[]) => any) | undefined;
|
|
73
|
+
onFocus?: ((...args: any[]) => any) | undefined;
|
|
74
|
+
"onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
|
|
75
|
+
"onStep-up"?: ((...args: any[]) => any) | undefined;
|
|
76
|
+
"onStep-down"?: ((...args: any[]) => any) | undefined;
|
|
77
|
+
}>, {
|
|
78
|
+
disabled: boolean;
|
|
79
|
+
mask: string | Record<string, any>;
|
|
80
|
+
tooltip: boolean;
|
|
81
|
+
steps: boolean;
|
|
82
|
+
rows: string | number;
|
|
83
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
4
|
+
type __VLS_WithSlots<T, S> = T & (new () => {
|
|
5
|
+
$slots: S;
|
|
6
|
+
});
|
|
7
|
+
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
8
|
+
title: StringConstructor;
|
|
9
|
+
show: {
|
|
10
|
+
type: (BooleanConstructor | ObjectConstructor)[];
|
|
11
|
+
default: boolean;
|
|
12
|
+
};
|
|
13
|
+
size: {
|
|
14
|
+
type: StringConstructor;
|
|
15
|
+
default: string;
|
|
16
|
+
validator: (value: unknown) => boolean;
|
|
17
|
+
};
|
|
18
|
+
showBack: BooleanConstructor;
|
|
19
|
+
classes: StringConstructor;
|
|
20
|
+
backgroundColorClass: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
default: string;
|
|
23
|
+
};
|
|
24
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
25
|
+
close: (...args: any[]) => void;
|
|
26
|
+
back: (...args: any[]) => void;
|
|
27
|
+
"scroll-top": (...args: any[]) => void;
|
|
28
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
29
|
+
title: StringConstructor;
|
|
30
|
+
show: {
|
|
31
|
+
type: (BooleanConstructor | ObjectConstructor)[];
|
|
32
|
+
default: boolean;
|
|
33
|
+
};
|
|
34
|
+
size: {
|
|
35
|
+
type: StringConstructor;
|
|
36
|
+
default: string;
|
|
37
|
+
validator: (value: unknown) => boolean;
|
|
38
|
+
};
|
|
39
|
+
showBack: BooleanConstructor;
|
|
40
|
+
classes: StringConstructor;
|
|
41
|
+
backgroundColorClass: {
|
|
42
|
+
type: StringConstructor;
|
|
43
|
+
default: string;
|
|
44
|
+
};
|
|
45
|
+
}>> & Readonly<{
|
|
46
|
+
onClose?: ((...args: any[]) => any) | undefined;
|
|
47
|
+
onBack?: ((...args: any[]) => any) | undefined;
|
|
48
|
+
"onScroll-top"?: ((...args: any[]) => any) | undefined;
|
|
49
|
+
}>, {
|
|
50
|
+
show: boolean | Record<string, any>;
|
|
51
|
+
size: string;
|
|
52
|
+
backgroundColorClass: string;
|
|
53
|
+
showBack: boolean;
|
|
54
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
55
|
+
type __VLS_Slots = {
|
|
56
|
+
default?: ((props: {}) => any) | undefined;
|
|
57
|
+
} & {
|
|
58
|
+
footer?: ((props: {}) => any) | undefined;
|
|
59
|
+
};
|
|
@@ -0,0 +1,158 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<Teleport to="body">
|
|
3
|
+
<Transition
|
|
4
|
+
appear
|
|
5
|
+
name="modal-slide-bottom"
|
|
6
|
+
>
|
|
7
|
+
<div
|
|
8
|
+
v-if="isOpen"
|
|
9
|
+
class="modal fixed top-4 z-80 grid w-full grid-rows-[auto_1fr_auto] rounded-t-xl shadow-2xl desktop:right-0 desktop:top-0 desktop:rounded-l-xl desktop:rounded-tr-none"
|
|
10
|
+
:class="[classes, sizeClasses, backgroundColorClass]"
|
|
11
|
+
role="dialog"
|
|
12
|
+
aria-modal="true"
|
|
13
|
+
:aria-label="title"
|
|
14
|
+
>
|
|
15
|
+
<header class="modal__header grid items-center rounded-t-xl border-b border-b-purple-light bg-white px-2 py-2 desktop:rounded-tl-xl desktop:rounded-tr-none desktop:px-3">
|
|
16
|
+
<Transition
|
|
17
|
+
name="fade"
|
|
18
|
+
mode="out-in"
|
|
19
|
+
>
|
|
20
|
+
<button
|
|
21
|
+
v-if="showBack"
|
|
22
|
+
type="button"
|
|
23
|
+
class="col-start-1 mr-auto flex cursor-pointer rounded-lg p-3 text-purple transition-all duration-300 hover:bg-purple-200 hover:ring-purple/20 active:bg-purple/40 active:ring-purple/40"
|
|
24
|
+
aria-label="Terug"
|
|
25
|
+
@click="back"
|
|
26
|
+
>
|
|
27
|
+
<Icon
|
|
28
|
+
name="eva:arrow-ios-back-outline"
|
|
29
|
+
class="block"
|
|
30
|
+
/>
|
|
31
|
+
</button>
|
|
32
|
+
</Transition>
|
|
33
|
+
|
|
34
|
+
<Transition
|
|
35
|
+
name="fade"
|
|
36
|
+
mode="out-in"
|
|
37
|
+
>
|
|
38
|
+
<div
|
|
39
|
+
:key="title"
|
|
40
|
+
class="col-start-2 text-center font-semibold tablet:text-lg"
|
|
41
|
+
>
|
|
42
|
+
{{ title }}
|
|
43
|
+
</div>
|
|
44
|
+
</Transition>
|
|
45
|
+
|
|
46
|
+
<button
|
|
47
|
+
type="button"
|
|
48
|
+
class="col-start-3 ml-auto flex cursor-pointer rounded-lg p-3 text-purple transition-all duration-300 hover:bg-purple-200 hover:ring-purple/20 active:bg-purple/40 active:ring-purple/40"
|
|
49
|
+
aria-label="Sluiten"
|
|
50
|
+
@click="close"
|
|
51
|
+
>
|
|
52
|
+
<Icon
|
|
53
|
+
name="eva:close-outline"
|
|
54
|
+
class="block"
|
|
55
|
+
/>
|
|
56
|
+
</button>
|
|
57
|
+
</header>
|
|
58
|
+
|
|
59
|
+
<div
|
|
60
|
+
class="modal__content relative overflow-x-hidden overflow-y-scroll"
|
|
61
|
+
@scroll="handleScrollTop"
|
|
62
|
+
>
|
|
63
|
+
<slot />
|
|
64
|
+
</div>
|
|
65
|
+
|
|
66
|
+
<div
|
|
67
|
+
v-if="$slots.footer"
|
|
68
|
+
class="border-t border-purple-light bg-white px-4 py-4 desktop:rounded-bl-xl desktop:px-10"
|
|
69
|
+
>
|
|
70
|
+
<slot name="footer" />
|
|
71
|
+
</div>
|
|
72
|
+
</div>
|
|
73
|
+
</Transition>
|
|
74
|
+
|
|
75
|
+
<Transition name="backdrop-fade">
|
|
76
|
+
<div
|
|
77
|
+
v-if="isOpen"
|
|
78
|
+
class="fixed left-0 top-0 z-70 h-full w-full bg-black/30 backdrop-blur-sm"
|
|
79
|
+
@click="close"
|
|
80
|
+
/>
|
|
81
|
+
</Transition>
|
|
82
|
+
</Teleport>
|
|
83
|
+
</template>
|
|
84
|
+
|
|
85
|
+
<script setup>
|
|
86
|
+
import { computed, onMounted, onUnmounted, watch } from "vue";
|
|
87
|
+
defineOptions({
|
|
88
|
+
name: "IndModal"
|
|
89
|
+
});
|
|
90
|
+
const emit = defineEmits(["back", "close", "scroll-top"]);
|
|
91
|
+
const props = defineProps({
|
|
92
|
+
title: String,
|
|
93
|
+
show: {
|
|
94
|
+
type: [Boolean, Object],
|
|
95
|
+
default: false
|
|
96
|
+
},
|
|
97
|
+
size: {
|
|
98
|
+
type: String,
|
|
99
|
+
default: "small",
|
|
100
|
+
validator: (value) => ["small", "medium", "large"].includes(value)
|
|
101
|
+
},
|
|
102
|
+
showBack: Boolean,
|
|
103
|
+
classes: String,
|
|
104
|
+
backgroundColorClass: {
|
|
105
|
+
type: String,
|
|
106
|
+
default: "bg-white"
|
|
107
|
+
}
|
|
108
|
+
});
|
|
109
|
+
const isOpen = computed(() => Boolean(props.show));
|
|
110
|
+
let previousBodyOverflow;
|
|
111
|
+
const setBodyLocked = (locked) => {
|
|
112
|
+
if (!import.meta.client) {
|
|
113
|
+
return;
|
|
114
|
+
}
|
|
115
|
+
if (locked) {
|
|
116
|
+
previousBodyOverflow = document.body.style.overflow;
|
|
117
|
+
document.body.style.overflow = "hidden";
|
|
118
|
+
return;
|
|
119
|
+
}
|
|
120
|
+
if (previousBodyOverflow !== void 0) {
|
|
121
|
+
document.body.style.overflow = previousBodyOverflow;
|
|
122
|
+
previousBodyOverflow = void 0;
|
|
123
|
+
}
|
|
124
|
+
};
|
|
125
|
+
watch(isOpen, setBodyLocked, { immediate: true });
|
|
126
|
+
onMounted(() => {
|
|
127
|
+
window.addEventListener("keydown", handleEscape);
|
|
128
|
+
});
|
|
129
|
+
onUnmounted(() => {
|
|
130
|
+
window.removeEventListener("keydown", handleEscape);
|
|
131
|
+
setBodyLocked(false);
|
|
132
|
+
});
|
|
133
|
+
const back = () => {
|
|
134
|
+
emit("back");
|
|
135
|
+
};
|
|
136
|
+
const close = () => {
|
|
137
|
+
emit("close");
|
|
138
|
+
};
|
|
139
|
+
function handleEscape(event) {
|
|
140
|
+
if (event.key === "Escape" && isOpen.value) {
|
|
141
|
+
close();
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
const handleScrollTop = (event) => {
|
|
145
|
+
emit("scroll-top", event.target.scrollTop);
|
|
146
|
+
};
|
|
147
|
+
const sizeClasses = computed(() => {
|
|
148
|
+
return {
|
|
149
|
+
small: "desktop:w-[544px]",
|
|
150
|
+
medium: "desktop:w-[968px]",
|
|
151
|
+
large: "desktop:w-[80vw] desktop:min-w-[968px] desktop:max-w-[1432px]"
|
|
152
|
+
}[props.size];
|
|
153
|
+
});
|
|
154
|
+
</script>
|
|
155
|
+
|
|
156
|
+
<style>
|
|
157
|
+
@reference "../assets/style.css";.modal{height:calc(100dvh - 1rem);padding-bottom:env(safe-area-inset-bottom,50px)}@media screen and (min-width:1136px){.modal{height:100dvh}}.modal__header{grid-template-columns:3rem minmax(0,1fr) 3rem}.modal-slide-bottom-enter-active,.modal-slide-bottom-leave-active{@apply transition-all ease-out duration-400 transform-gpu}.modal-slide-bottom-enter-from,.modal-slide-bottom-leave-to{@apply translate-y-full desktop:translate-y-0 desktop:translate-x-full}.backdrop-fade-enter-active,.backdrop-fade-leave-active{@apply transition-all ease-out duration-400 transform-gpu}.backdrop-fade-enter-from,.backdrop-fade-leave-to{@apply opacity-0}
|
|
158
|
+
</style>
|
|
@@ -0,0 +1,59 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
|
|
4
|
+
type __VLS_WithSlots<T, S> = T & (new () => {
|
|
5
|
+
$slots: S;
|
|
6
|
+
});
|
|
7
|
+
declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
8
|
+
title: StringConstructor;
|
|
9
|
+
show: {
|
|
10
|
+
type: (BooleanConstructor | ObjectConstructor)[];
|
|
11
|
+
default: boolean;
|
|
12
|
+
};
|
|
13
|
+
size: {
|
|
14
|
+
type: StringConstructor;
|
|
15
|
+
default: string;
|
|
16
|
+
validator: (value: unknown) => boolean;
|
|
17
|
+
};
|
|
18
|
+
showBack: BooleanConstructor;
|
|
19
|
+
classes: StringConstructor;
|
|
20
|
+
backgroundColorClass: {
|
|
21
|
+
type: StringConstructor;
|
|
22
|
+
default: string;
|
|
23
|
+
};
|
|
24
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
|
|
25
|
+
close: (...args: any[]) => void;
|
|
26
|
+
back: (...args: any[]) => void;
|
|
27
|
+
"scroll-top": (...args: any[]) => void;
|
|
28
|
+
}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
29
|
+
title: StringConstructor;
|
|
30
|
+
show: {
|
|
31
|
+
type: (BooleanConstructor | ObjectConstructor)[];
|
|
32
|
+
default: boolean;
|
|
33
|
+
};
|
|
34
|
+
size: {
|
|
35
|
+
type: StringConstructor;
|
|
36
|
+
default: string;
|
|
37
|
+
validator: (value: unknown) => boolean;
|
|
38
|
+
};
|
|
39
|
+
showBack: BooleanConstructor;
|
|
40
|
+
classes: StringConstructor;
|
|
41
|
+
backgroundColorClass: {
|
|
42
|
+
type: StringConstructor;
|
|
43
|
+
default: string;
|
|
44
|
+
};
|
|
45
|
+
}>> & Readonly<{
|
|
46
|
+
onClose?: ((...args: any[]) => any) | undefined;
|
|
47
|
+
onBack?: ((...args: any[]) => any) | undefined;
|
|
48
|
+
"onScroll-top"?: ((...args: any[]) => any) | undefined;
|
|
49
|
+
}>, {
|
|
50
|
+
show: boolean | Record<string, any>;
|
|
51
|
+
size: string;
|
|
52
|
+
backgroundColorClass: string;
|
|
53
|
+
showBack: boolean;
|
|
54
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
55
|
+
type __VLS_Slots = {
|
|
56
|
+
default?: ((props: {}) => any) | undefined;
|
|
57
|
+
} & {
|
|
58
|
+
footer?: ((props: {}) => any) | undefined;
|
|
59
|
+
};
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
label: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
default: string;
|
|
7
|
+
};
|
|
8
|
+
color: {
|
|
9
|
+
type: StringConstructor;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
13
|
+
label: {
|
|
14
|
+
type: StringConstructor;
|
|
15
|
+
default: string;
|
|
16
|
+
};
|
|
17
|
+
color: {
|
|
18
|
+
type: StringConstructor;
|
|
19
|
+
default: string;
|
|
20
|
+
};
|
|
21
|
+
}>> & Readonly<{}>, {
|
|
22
|
+
label: string;
|
|
23
|
+
color: string;
|
|
24
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="flex items-center py-1 px-2 rounded-full font-sans text-xs font-semibold"
|
|
4
|
+
:class="color"
|
|
5
|
+
>
|
|
6
|
+
{{ label }}
|
|
7
|
+
</div>
|
|
8
|
+
</template>
|
|
9
|
+
|
|
10
|
+
<script setup>
|
|
11
|
+
import { computed } from "vue";
|
|
12
|
+
defineOptions({
|
|
13
|
+
name: "IndPill"
|
|
14
|
+
});
|
|
15
|
+
const props = defineProps({
|
|
16
|
+
label: {
|
|
17
|
+
type: String,
|
|
18
|
+
default: "Advies"
|
|
19
|
+
},
|
|
20
|
+
color: {
|
|
21
|
+
type: String,
|
|
22
|
+
default: "secondary-subtle"
|
|
23
|
+
}
|
|
24
|
+
});
|
|
25
|
+
const color = computed(() => {
|
|
26
|
+
switch (props.color) {
|
|
27
|
+
case "secondary-subtle":
|
|
28
|
+
return "bg-peach-200 text-peach-900";
|
|
29
|
+
case "primary-subtle":
|
|
30
|
+
return "bg-purple-200 text-purple-dark";
|
|
31
|
+
case "blue-subtle":
|
|
32
|
+
return "bg-blue-200 text-blue-900";
|
|
33
|
+
default:
|
|
34
|
+
return "bg-peach-200 text-peach-900";
|
|
35
|
+
}
|
|
36
|
+
});
|
|
37
|
+
</script>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
declare const _default: typeof __VLS_export;
|
|
2
|
+
export default _default;
|
|
3
|
+
declare const __VLS_export: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
|
|
4
|
+
label: {
|
|
5
|
+
type: StringConstructor;
|
|
6
|
+
default: string;
|
|
7
|
+
};
|
|
8
|
+
color: {
|
|
9
|
+
type: StringConstructor;
|
|
10
|
+
default: string;
|
|
11
|
+
};
|
|
12
|
+
}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
13
|
+
label: {
|
|
14
|
+
type: StringConstructor;
|
|
15
|
+
default: string;
|
|
16
|
+
};
|
|
17
|
+
color: {
|
|
18
|
+
type: StringConstructor;
|
|
19
|
+
default: string;
|
|
20
|
+
};
|
|
21
|
+
}>> & Readonly<{}>, {
|
|
22
|
+
label: string;
|
|
23
|
+
color: string;
|
|
24
|
+
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<svg width="140" height="24" viewBox="0 0 140 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
2
|
+
<path d="M29.2613 1.24257C29.6391 1.24986 30.0062 1.36165 30.3165 1.5639C30.6268 1.76615 30.8664 2.04984 31.0053 2.37934C31.1442 2.70885 31.1761 3.06947 31.0971 3.41593C31.018 3.76238 30.8316 4.07922 30.5611 4.32666C30.2906 4.57409 29.9482 4.74109 29.5768 4.80668C29.2054 4.87226 28.8217 4.83351 28.4737 4.69529C28.1257 4.55707 27.8291 4.32555 27.621 4.02979C27.413 3.73404 27.3027 3.38724 27.3042 3.03295C27.3052 2.79434 27.3569 2.5583 27.4562 2.3386C27.5554 2.1189 27.7004 1.91992 27.8826 1.75328C28.0647 1.58663 28.2805 1.45565 28.5172 1.36797C28.7539 1.28028 29.0068 1.23766 29.2613 1.24257ZM30.7607 17.2376H27.7619V6.75428H30.7607V17.2376Z" fill="#6E46CF"/>
|
|
3
|
+
<path d="M33.0652 17.238V6.75466H35.9535V7.59807C36.8403 6.90851 37.9579 6.53393 39.1101 6.54011C39.8485 6.53673 40.5787 6.68615 41.2484 6.97773C41.9182 7.2693 42.5111 7.69584 42.9848 8.22692C43.8506 9.28063 44.2619 10.6011 44.137 11.9261V17.2676H41.1382V11.6819C41.1804 11.3281 41.1424 10.9699 41.0268 10.6308C40.9112 10.2917 40.7206 9.9793 40.4674 9.71397C40.0105 9.32011 39.4069 9.11022 38.7865 9.12951C38.2611 9.14705 37.7462 9.2728 37.2784 9.49783C36.8106 9.72286 36.4014 10.0417 36.0797 10.4316V17.238H33.0652Z" fill="#6E46CF"/>
|
|
4
|
+
<path d="M54.0562 17.2379V16.3945C53.1905 17.0931 52.0813 17.4696 50.9391 17.4524C50.142 17.4544 49.3535 17.2979 48.6257 16.9931C47.898 16.6883 47.2474 16.2422 46.7172 15.6842C45.7827 14.652 45.2757 13.3389 45.2888 11.9851C45.2592 11.2839 45.3796 10.5842 45.6429 9.9273C45.9062 9.27038 46.307 8.66949 46.8218 8.16001C47.3365 7.65053 47.9548 7.24276 48.6403 6.96073C49.3257 6.67869 50.0644 6.52808 50.8128 6.51777C51.9523 6.49321 53.0663 6.83525 53.9694 7.48694V1.86426H56.9682V17.2379H54.0562ZM53.9379 10.4315C53.6174 10.026 53.1997 9.69693 52.7186 9.47074C52.2374 9.24455 51.7062 9.12761 51.168 9.12936C50.7752 9.13488 50.3877 9.21443 50.0285 9.36326C49.6692 9.5121 49.3456 9.72718 49.0768 9.9957C48.808 10.2642 48.5997 10.5807 48.4641 10.9263C48.3285 11.2719 48.2685 11.6395 48.2876 12.0073C48.2715 12.3788 48.3362 12.7496 48.4776 13.097C48.619 13.4444 48.8343 13.7613 49.1103 14.0283C49.3863 14.2954 49.7173 14.5071 50.0832 14.6506C50.4491 14.7941 50.8424 14.8663 51.239 14.863C51.7677 14.8669 52.2894 14.7504 52.7595 14.5236C53.2296 14.2969 53.634 13.9665 53.9379 13.5609V10.4315Z" fill="#6E46CF"/>
|
|
5
|
+
<path d="M68.7664 15.5733C68.1883 16.1758 67.4793 16.6553 66.6871 16.9794C65.8949 17.3036 65.0378 17.4649 64.1735 17.4525C63.3989 17.4869 62.6251 17.3699 61.9012 17.1091C61.1773 16.8482 60.5192 16.4491 59.9686 15.9371C59.418 15.425 58.9869 14.8113 58.7028 14.1348C58.4187 13.4583 58.2876 12.7339 58.318 12.0074C58.318 9.09244 60.4408 6.54004 63.7632 6.54004C66.8487 6.54004 69.0426 8.98147 69.0426 11.8964C69.0441 12.1666 69.0203 12.4365 68.9715 12.7028H61.2221C61.2976 13.3985 61.6512 14.0417 62.212 14.5028C62.7727 14.964 63.4989 15.209 64.2445 15.1886C64.776 15.1771 65.2996 15.065 65.7837 14.859C66.2678 14.6531 66.7026 14.3575 67.0618 13.9901L68.7664 15.5733ZM65.9728 10.6461C65.909 10.1386 65.6488 9.67075 65.2415 9.3312C64.8342 8.99165 64.3082 8.80402 63.7632 8.80391C63.202 8.80643 62.6593 8.99148 62.2275 9.32745C61.7957 9.66343 61.5017 10.1295 61.3957 10.6461H65.9728Z" fill="#6E46CF"/>
|
|
6
|
+
<path d="M70.4236 6.75501H73.3119V7.59841C74.2362 6.89985 75.3917 6.52567 76.579 6.54046C77.3274 6.55077 78.0661 6.70138 78.7515 6.98342C79.437 7.26545 80.0553 7.67322 80.57 8.1827C81.0848 8.69218 81.4856 9.29307 81.7489 9.94999C82.0122 10.6069 82.1326 11.3066 82.103 12.0078C82.1242 13.359 81.6255 14.6722 80.6983 15.7069C80.1631 16.2651 79.5084 16.7111 78.7768 17.0158C78.0452 17.3204 77.2532 17.477 76.4527 17.4751C75.3668 17.4912 74.3081 17.1569 73.4539 16.5281V22.4468H70.4551L70.4236 6.75501ZM73.4224 13.5614C73.7263 13.967 74.1306 14.2973 74.6007 14.5241C75.0708 14.7509 75.5926 14.8674 76.1212 14.8635C76.5179 14.8668 76.9111 14.7946 77.277 14.6511C77.6429 14.5076 77.974 14.2959 78.25 14.0288C78.526 13.7618 78.7412 13.4449 78.8826 13.0975C79.0241 12.7501 79.0887 12.3793 79.0727 12.0078C79.0918 11.64 79.0317 11.2724 78.8961 10.9268C78.7606 10.5812 78.5522 10.2647 78.2834 9.9962C78.0147 9.72767 77.691 9.51259 77.3318 9.36376C76.9725 9.21492 76.585 9.13538 76.1923 9.12986C75.654 9.12811 75.1229 9.24505 74.6417 9.47124C74.1605 9.69743 73.7428 10.0265 73.4224 10.432V13.5614Z" fill="#6E46CF"/>
|
|
7
|
+
<path d="M93.3246 15.5733C92.7455 16.1747 92.0364 16.6534 91.2444 16.9774C90.4524 17.3015 89.5958 17.4634 88.7317 17.4525C87.9568 17.488 87.1824 17.3719 86.458 17.1114C85.7336 16.8509 85.0749 16.4518 84.5241 15.9396C83.9732 15.4273 83.5422 14.8131 83.2585 14.1361C82.9748 13.4591 82.8446 12.7341 82.8762 12.0074C82.8762 9.09244 84.999 6.54004 88.3135 6.54004C91.4069 6.54004 93.6008 8.98147 93.6008 11.8964C93.6023 12.1666 93.5785 12.4365 93.5297 12.7028H85.7961C85.8679 13.3999 86.2206 14.0451 86.7821 14.5069C87.3437 14.9688 88.0719 15.2126 88.8185 15.1886C89.346 15.1741 89.865 15.0606 90.3448 14.8547C90.8247 14.6489 91.2556 14.3549 91.6121 13.9901L93.3246 15.5733ZM90.531 10.6461C90.4636 10.1393 90.201 9.67315 89.7926 9.33524C89.3842 8.99733 88.8582 8.811 88.3135 8.81131C87.7532 8.81662 87.2119 9.00267 86.7807 9.33817C86.3495 9.67368 86.0548 10.1382 85.946 10.6535L90.531 10.6461Z" fill="#6E46CF"/>
|
|
8
|
+
<path d="M94.9817 17.238V6.75464H97.8621V7.59805C98.7499 6.91016 99.8669 6.5358 101.019 6.5401C101.757 6.53671 102.487 6.68614 103.157 6.97771C103.827 7.26928 104.42 7.69582 104.893 8.2269C105.635 9.04811 106.046 10.1061 106.046 11.926V17.2676H103.055V11.6819C103.095 11.3282 103.056 10.9705 102.94 10.6317C102.825 10.2928 102.635 9.98028 102.384 9.71395C101.927 9.32009 101.323 9.1102 100.703 9.12949C100.175 9.14385 99.6563 9.26812 99.1855 9.49331C98.7146 9.7185 98.303 10.039 97.9805 10.4316V17.238H94.9817Z" fill="#6E46CF"/>
|
|
9
|
+
<path d="M115.965 17.2379V16.3945C115.09 17.1029 113.964 17.4801 112.808 17.4524C112.012 17.4553 111.225 17.2991 110.498 16.9942C109.772 16.6893 109.123 16.2427 108.594 15.6842C107.66 14.652 107.153 13.3389 107.166 11.9851C107.135 11.2836 107.255 10.5835 107.518 9.92616C107.781 9.26879 108.182 8.66749 108.697 8.1578C109.212 7.64811 109.83 7.24038 110.516 6.95869C111.202 6.677 111.941 6.52707 112.69 6.51777C113.83 6.49201 114.944 6.83418 115.847 7.48694V1.86426H118.845V17.2379H115.965ZM115.847 10.4315C115.528 10.0262 115.112 9.69705 114.632 9.47082C114.152 9.24458 113.622 9.1276 113.085 9.12936C112.691 9.1339 112.303 9.21272 111.943 9.36112C111.583 9.50951 111.258 9.72445 110.988 9.99307C110.719 10.2617 110.51 10.5785 110.374 10.9246C110.238 11.2707 110.177 11.6389 110.196 12.0073C110.18 12.3788 110.245 12.7496 110.386 13.097C110.528 13.4444 110.743 13.7613 111.019 14.0283C111.295 14.2954 111.626 14.5071 111.992 14.6506C112.358 14.7941 112.751 14.8663 113.148 14.863C113.677 14.8675 114.199 14.7514 114.669 14.5245C115.139 14.2977 115.543 13.9669 115.847 13.5609V10.4315Z" fill="#6E46CF"/>
|
|
10
|
+
<path d="M130.675 15.5733C130.098 16.1753 129.39 16.6544 128.599 16.9786C127.809 17.3027 126.953 17.4643 126.09 17.4525C125.315 17.488 124.541 17.3719 123.816 17.1114C123.092 16.8509 122.433 16.4518 121.882 15.9396C121.331 15.4273 120.9 14.8131 120.617 14.1361C120.333 13.4591 120.203 12.7341 120.234 12.0074C120.234 9.09244 122.349 6.54004 125.672 6.54004C128.765 6.54004 130.951 8.98147 130.951 11.8964C130.951 12.1663 130.93 12.4358 130.888 12.7028H123.138C123.21 13.3986 123.562 14.0427 124.122 14.5043C124.681 14.966 125.408 15.2107 126.153 15.1886C126.684 15.1771 127.208 15.065 127.692 14.859C128.176 14.6531 128.611 14.3575 128.97 13.9901L130.675 15.5733ZM127.889 10.6461C127.822 10.1393 127.559 9.67315 127.151 9.33524C126.742 8.99733 126.216 8.811 125.672 8.81131C125.111 8.81523 124.569 9.00078 124.137 9.33652C123.706 9.67226 123.412 10.1375 123.304 10.6535L127.889 10.6461Z" fill="#6E46CF"/>
|
|
11
|
+
<path d="M139.143 9.24025C138.787 9.15797 138.42 9.12065 138.054 9.12928C137.502 9.14889 136.964 9.29802 136.49 9.563C136.016 9.82798 135.62 10.2003 135.339 10.6459V17.2378H132.356V6.75443H135.236V7.81238C135.648 7.3921 136.151 7.06063 136.713 6.84091C137.274 6.62119 137.88 6.51848 138.488 6.53988C138.812 6.533 139.137 6.55032 139.458 6.59167L139.143 9.24025Z" fill="#6E46CF"/>
|
|
12
|
+
<path d="M17.8977 15.6914V8.30795L11.0873 4.61621L4.26904 8.30795V15.6914L11.0873 19.3758L17.8977 15.6914Z" fill="#6E46CF"/>
|
|
13
|
+
<path d="M0 18L11.0875 24V19.3761L4.26929 15.6917V8.30826L0 6" fill="#67C0E7"/>
|
|
14
|
+
<path d="M17.8978 8.30826V15.6917L11.0874 19.3761V24L22.1671 18V6L17.8978 8.30826Z" fill="#FFF066"/>
|
|
15
|
+
<path d="M11.0876 0L0 6L4.26929 8.30826L11.0876 4.61652L17.8979 8.30826L22.1672 6L11.0876 0Z" fill="#F66688"/>
|
|
16
|
+
<path d="M11.0874 19.3757V23.9997L22.1671 17.9997L17.8978 15.6914L11.0874 19.3757Z" fill="#FFDF35"/>
|
|
17
|
+
<path d="M4.26929 8.30826L0 6V18L4.26929 15.6917V8.30826Z" fill="#03A9F4"/>
|
|
18
|
+
<path d="M17.8978 8.30826L22.1671 6L11.0874 0V4.61652L17.8978 8.30826Z" fill="#F73568"/>
|
|
19
|
+
</svg>
|
package/dist/types.d.mts
ADDED