@appscode/design-system 2.6.3 → 2.6.5-alpha-1
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/package.json +1 -1
- package/vue-components/styles/base/utilities/_spacing.scss +46 -0
- package/vue-components/styles/components/_dropdown.scss +0 -2
- package/vue-components/styles/components/alert/_alert.scss +12 -4
- package/vue-components/styles/components/sidebar-tabs/_sidebar-tabs-layout.scss +1 -0
- package/vue-components/v3/alert/Alert.vue +4 -1
- package/vue-components/v3/form-fields/AcInput.vue +7 -3
- package/vue-components/v3/form-fields/AcSelect.vue +3 -0
- package/vue-components/v3/notification/AlertBox.vue +1 -0
- package/vue-components/v3/sidebar/sidebar-tabs/SidebarTabsLayout.vue +2 -1
- package/vue-components/v3/sidebar/sidebar-tabs/TabsContent.vue +0 -81
package/package.json
CHANGED
|
@@ -53,6 +53,52 @@
|
|
|
53
53
|
}
|
|
54
54
|
}
|
|
55
55
|
|
|
56
|
+
$spacing-values: (
|
|
57
|
+
112: 112px,
|
|
58
|
+
128: 128px,
|
|
59
|
+
144: 144px,
|
|
60
|
+
160: 160px,
|
|
61
|
+
176: 176px,
|
|
62
|
+
192: 192px,
|
|
63
|
+
208: 208px,
|
|
64
|
+
220: 220px,
|
|
65
|
+
224: 224px,
|
|
66
|
+
240: 240px,
|
|
67
|
+
256: 256px,
|
|
68
|
+
288: 288px,
|
|
69
|
+
320: 320px,
|
|
70
|
+
384: 384px,
|
|
71
|
+
440: 440px,
|
|
72
|
+
);
|
|
73
|
+
|
|
74
|
+
@each $key, $value in $spacing-values {
|
|
75
|
+
.pl-#{$key} {
|
|
76
|
+
padding-left: #{$value} !important;
|
|
77
|
+
}
|
|
78
|
+
.pr-#{$key} {
|
|
79
|
+
padding-right: #{$value} !important;
|
|
80
|
+
}
|
|
81
|
+
.pt-#{$key} {
|
|
82
|
+
padding-top: #{$value} !important;
|
|
83
|
+
}
|
|
84
|
+
.pb-#{$key} {
|
|
85
|
+
padding-bottom: #{$value} !important;
|
|
86
|
+
}
|
|
87
|
+
|
|
88
|
+
.ml-#{$key} {
|
|
89
|
+
margin-left: #{$value} !important;
|
|
90
|
+
}
|
|
91
|
+
.mr-#{$key} {
|
|
92
|
+
margin-right: #{$value} !important;
|
|
93
|
+
}
|
|
94
|
+
.mt-#{$key} {
|
|
95
|
+
margin-top: #{$value} !important;
|
|
96
|
+
}
|
|
97
|
+
.mb-#{$key} {
|
|
98
|
+
margin-bottom: #{$value} !important;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
56
102
|
/* Deafult height & widht */
|
|
57
103
|
@for $i from 0 through 300 {
|
|
58
104
|
.height-#{$i} {
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
.ac-notification {
|
|
2
|
-
background-color:
|
|
2
|
+
background-color: #f1f1f1;
|
|
3
3
|
font-size: 1rem;
|
|
4
|
-
color: $
|
|
4
|
+
color: $color-text;
|
|
5
5
|
min-height: 36px;
|
|
6
6
|
display: flex;
|
|
7
7
|
align-items: center;
|
|
8
8
|
padding: 8px 16px;
|
|
9
9
|
overflow: hidden;
|
|
10
|
-
border: 1px solid $
|
|
10
|
+
border: 1px solid $slate-50;
|
|
11
11
|
border-radius: 4px;
|
|
12
12
|
justify-content: flex-start;
|
|
13
13
|
position: relative;
|
|
@@ -15,7 +15,7 @@
|
|
|
15
15
|
min-width: 280px;
|
|
16
16
|
|
|
17
17
|
p {
|
|
18
|
-
color: $
|
|
18
|
+
color: $color-text;
|
|
19
19
|
margin-bottom: 0 !important;
|
|
20
20
|
|
|
21
21
|
.close-icon {
|
|
@@ -115,3 +115,11 @@
|
|
|
115
115
|
color: $yellow-5 !important;
|
|
116
116
|
}
|
|
117
117
|
}
|
|
118
|
+
|
|
119
|
+
// is-warning
|
|
120
|
+
.ac-notification.is-neutral {
|
|
121
|
+
@include acNotification($gray-60);
|
|
122
|
+
p {
|
|
123
|
+
color: $gray-5 !important;
|
|
124
|
+
}
|
|
125
|
+
}
|
|
@@ -1,16 +1,19 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
2
|
interface Props {
|
|
3
3
|
modifierClasses?: string;
|
|
4
|
+
isCustom?: boolean;
|
|
4
5
|
}
|
|
5
6
|
|
|
6
7
|
withDefaults(defineProps<Props>(), {
|
|
7
8
|
modifierClasses: "",
|
|
9
|
+
isCustom: false,
|
|
8
10
|
});
|
|
9
11
|
</script>
|
|
10
12
|
|
|
11
13
|
<template>
|
|
12
14
|
<div :class="modifierClasses" class="ac-notification">
|
|
13
|
-
<
|
|
15
|
+
<slot v-if="isCustom" name="custom" />
|
|
16
|
+
<p v-else>
|
|
14
17
|
<slot />
|
|
15
18
|
</p>
|
|
16
19
|
</div>
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<script setup lang="ts">
|
|
2
|
-
import { defineAsyncComponent, ref, watch } from "vue";
|
|
2
|
+
import { defineAsyncComponent, ref, watch, onMounted } from "vue";
|
|
3
3
|
|
|
4
4
|
interface prop {
|
|
5
5
|
name?: string;
|
|
@@ -14,7 +14,7 @@ interface prop {
|
|
|
14
14
|
showStar?: boolean;
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
withDefaults(defineProps<prop>(), {
|
|
17
|
+
const props = withDefaults(defineProps<prop>(), {
|
|
18
18
|
name: "",
|
|
19
19
|
inputType: "text",
|
|
20
20
|
customClass: "",
|
|
@@ -39,7 +39,7 @@ function onFocusInput() {
|
|
|
39
39
|
triggerInput();
|
|
40
40
|
}
|
|
41
41
|
function onFocusOutInput() {
|
|
42
|
-
if (!model.value) isLabelHoisted.value = false;
|
|
42
|
+
if (!model.value && props.inputType !== "date" && props.inputType !== "datetime-local") isLabelHoisted.value = false;
|
|
43
43
|
}
|
|
44
44
|
|
|
45
45
|
function onClickLabel() {
|
|
@@ -58,6 +58,10 @@ watch(
|
|
|
58
58
|
},
|
|
59
59
|
{ immediate: true },
|
|
60
60
|
);
|
|
61
|
+
|
|
62
|
+
onMounted(() => {
|
|
63
|
+
if (props.inputType === "date" || props.inputType === "datetime-local") triggerInput();
|
|
64
|
+
});
|
|
61
65
|
</script>
|
|
62
66
|
|
|
63
67
|
<template>
|
|
@@ -8,6 +8,7 @@ interface Props {
|
|
|
8
8
|
errorMsg?: string;
|
|
9
9
|
placeholderText?: string;
|
|
10
10
|
disabled?: boolean;
|
|
11
|
+
isMultiSelect?: boolean;
|
|
11
12
|
label?: string;
|
|
12
13
|
taggable?: boolean;
|
|
13
14
|
allowEmpty?: boolean;
|
|
@@ -33,6 +34,7 @@ const props = withDefaults(defineProps<Props>(), {
|
|
|
33
34
|
errorMsg: "",
|
|
34
35
|
placeholderText: "",
|
|
35
36
|
disabled: false,
|
|
37
|
+
isMultiSelect: false,
|
|
36
38
|
label: "",
|
|
37
39
|
allowEmpty: false,
|
|
38
40
|
options: () => [],
|
|
@@ -135,6 +137,7 @@ const onSelect = (selectedOption: unknown, id: string) => emit("select", selecte
|
|
|
135
137
|
<multiselect
|
|
136
138
|
ref="multiselectElement"
|
|
137
139
|
v-model="model"
|
|
140
|
+
:multiple="isMultiSelect"
|
|
138
141
|
:track-by="trackBy"
|
|
139
142
|
:label="showBy"
|
|
140
143
|
:class="multiselectCustomClass"
|
|
@@ -37,6 +37,7 @@ const backgroundColor = computed(() => {
|
|
|
37
37
|
else if (notificationType.value === "error") return "is-danger";
|
|
38
38
|
else if (notificationType.value === "warning") return "is-warning";
|
|
39
39
|
else if (notificationType.value === "info") return "is-info";
|
|
40
|
+
else if (notificationType.value === "neutral") return "is-neutral is-border-none";
|
|
40
41
|
else return "";
|
|
41
42
|
});
|
|
42
43
|
|
|
@@ -10,8 +10,9 @@ withDefaults(defineProps<Props>(), {
|
|
|
10
10
|
<template>
|
|
11
11
|
<div class="sidebar-tabs-layout is-flex">
|
|
12
12
|
<!-- sidebar tabs -->
|
|
13
|
-
<div class="sidebar-tabs-wrapper">
|
|
13
|
+
<div class="sidebar-tabs-wrapper is-flex">
|
|
14
14
|
<slot name="sidebar-tabs" />
|
|
15
|
+
<slot name="sidebar-tabs2" />
|
|
15
16
|
</div>
|
|
16
17
|
<!-- sidebar tabs -->
|
|
17
18
|
|
|
@@ -1,81 +0,0 @@
|
|
|
1
|
-
<script setup lang="ts"></script>
|
|
2
|
-
<template>
|
|
3
|
-
<div class="content pt-10 pl-20 pb-20">
|
|
4
|
-
<h1>Heading One</h1>
|
|
5
|
-
<p>
|
|
6
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
7
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
8
|
-
magnam animi numquam?
|
|
9
|
-
</p>
|
|
10
|
-
<h2>Heading Two</h2>
|
|
11
|
-
<p>
|
|
12
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
13
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
14
|
-
magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
|
|
15
|
-
voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
|
|
16
|
-
consectetur corporis ex doloremque magnam animi numquam?
|
|
17
|
-
</p>
|
|
18
|
-
<h3>Heading three</h3>
|
|
19
|
-
<p>
|
|
20
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
21
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
22
|
-
magnam animi numquam?
|
|
23
|
-
</p>
|
|
24
|
-
|
|
25
|
-
<h4>Heading Four</h4>
|
|
26
|
-
<p>
|
|
27
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
28
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
29
|
-
magnam animi numquam?
|
|
30
|
-
</p>
|
|
31
|
-
<h5>Heading Five</h5>
|
|
32
|
-
<p>
|
|
33
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
34
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
35
|
-
magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
|
|
36
|
-
voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
|
|
37
|
-
consectetur corporis ex doloremque magnam animi numquam?
|
|
38
|
-
</p>
|
|
39
|
-
<h6>Heading Six</h6>
|
|
40
|
-
<p>
|
|
41
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
42
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
43
|
-
magnam animi numquam?
|
|
44
|
-
</p>
|
|
45
|
-
|
|
46
|
-
<h4>Block Quote</h4>
|
|
47
|
-
|
|
48
|
-
<blockquote>
|
|
49
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae officiis autem aspernatur. Ab cum quisquam
|
|
50
|
-
dolore pariatur consequuntur officia nostrum, commodi sint saepe delectus itaque vel quae voluptates atque.
|
|
51
|
-
</blockquote>
|
|
52
|
-
|
|
53
|
-
<h5>Heading Five</h5>
|
|
54
|
-
<p>
|
|
55
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
56
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
57
|
-
magnam animi numquam? Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque
|
|
58
|
-
voluptatum quos a commodi similique perferendis necessitatibus. Praesentium labore laudantium assumenda
|
|
59
|
-
consectetur corporis ex doloremque magnam animi numquam?
|
|
60
|
-
</p>
|
|
61
|
-
<h6>Heading Six</h6>
|
|
62
|
-
<p>
|
|
63
|
-
Lorem ipsum dolor sit amet consectetur, adipisicing elit. Cumque cum corrupti atque voluptatum quos a commodi
|
|
64
|
-
similique perferendis necessitatibus. Praesentium labore laudantium assumenda consectetur corporis ex doloremque
|
|
65
|
-
magnam animi numquam?
|
|
66
|
-
</p>
|
|
67
|
-
|
|
68
|
-
<h4>Block Quote</h4>
|
|
69
|
-
|
|
70
|
-
<blockquote>
|
|
71
|
-
Lorem ipsum dolor sit amet consectetur adipisicing elit. Et repudiandae officiis autem aspernatur. Ab cum quisquam
|
|
72
|
-
dolore pariatur consequuntur officia nostrum, commodi sint saepe delectus itaque vel quae voluptates atque.
|
|
73
|
-
</blockquote>
|
|
74
|
-
</div>
|
|
75
|
-
</template>
|
|
76
|
-
|
|
77
|
-
<style lang="scss">
|
|
78
|
-
.content {
|
|
79
|
-
width: 100%;
|
|
80
|
-
}
|
|
81
|
-
</style>
|