@appscode/design-system 2.2.67 → 2.3.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/main.scss +2 -1
- package/package.json +1 -1
- package/vue-components/styles/base/utilities/_all.scss +1 -0
- package/vue-components/styles/base/utilities/_animation.scss +11 -0
- package/vue-components/styles/components/form-fields/_all.scss +2 -1
- package/vue-components/styles/components/form-fields/_custom-selectbox.scss +135 -0
- package/vue-components/v3/form-fields/CustomSelect.vue +122 -0
- package/vue-components/v3/form-fields/ListInputField.vue +118 -0
- package/vue-components/v3/icons/ArrowDownIcon.vue +14 -0
- package/vue-components/v3/icons/CloseIcon.vue +14 -0
- package/vue-components/v3/icons/RefreshIcon.vue +18 -0
package/main.scss
CHANGED
|
@@ -22,6 +22,7 @@
|
|
|
22
22
|
@import "@/components/vue-components/styles/components/terminal";
|
|
23
23
|
@import "@/components/vue-components/styles/components/code-preview/all";
|
|
24
24
|
@import "@/components/vue-components/styles/components/form-fields/input";
|
|
25
|
+
@import "@/components/vue-components/styles/components/form-fields/custom-selectbox";
|
|
25
26
|
@import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
|
|
26
27
|
@import "@/components/vue-components/styles/components/ui-builder/ui-builder";
|
|
27
|
-
// @import "@/components/vue-components/styles/theme/appscode.scss";
|
|
28
|
+
// @import "@/components/vue-components/styles/theme/appscode.scss";
|
package/package.json
CHANGED
|
@@ -0,0 +1,135 @@
|
|
|
1
|
+
.is-selectbox {
|
|
2
|
+
position: relative;
|
|
3
|
+
z-index: 9;
|
|
4
|
+
|
|
5
|
+
input[type="text"] {
|
|
6
|
+
padding-right: 32px;
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
&.is-extra-small {
|
|
10
|
+
.buttons {
|
|
11
|
+
.button {
|
|
12
|
+
height: 28px;
|
|
13
|
+
}
|
|
14
|
+
}
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
.ac-field {
|
|
18
|
+
position: absolute;
|
|
19
|
+
top: 7px;
|
|
20
|
+
left: 12px;
|
|
21
|
+
width: calc(100% - 15px);
|
|
22
|
+
}
|
|
23
|
+
|
|
24
|
+
&.is-open {
|
|
25
|
+
.options {
|
|
26
|
+
opacity: 1;
|
|
27
|
+
visibility: visible;
|
|
28
|
+
}
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.buttons {
|
|
32
|
+
position: absolute;
|
|
33
|
+
gap: 0;
|
|
34
|
+
right: 2px;
|
|
35
|
+
top: 2px;
|
|
36
|
+
margin: 0;
|
|
37
|
+
|
|
38
|
+
.button {
|
|
39
|
+
margin: 0 !important;
|
|
40
|
+
color: #616161 !important;
|
|
41
|
+
padding: 0;
|
|
42
|
+
width: 32px;
|
|
43
|
+
height: 32px;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
.options {
|
|
48
|
+
border: 1px solid $color-border;
|
|
49
|
+
box-shadow: $ac-shadow-1;
|
|
50
|
+
background-color: $white-100;
|
|
51
|
+
border-radius: 4px;
|
|
52
|
+
padding: 2px;
|
|
53
|
+
position: absolute;
|
|
54
|
+
width: 100%;
|
|
55
|
+
max-height: 500px;
|
|
56
|
+
overflow-y: auto;
|
|
57
|
+
transition: 0.3s ease-in-out;
|
|
58
|
+
opacity: 0;
|
|
59
|
+
visibility: hidden;
|
|
60
|
+
|
|
61
|
+
input[type="checkbox"] {
|
|
62
|
+
width: 16px;
|
|
63
|
+
height: 16px;
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
label {
|
|
67
|
+
position: inherit;
|
|
68
|
+
}
|
|
69
|
+
|
|
70
|
+
&.group {
|
|
71
|
+
li {
|
|
72
|
+
display: block;
|
|
73
|
+
|
|
74
|
+
ul {
|
|
75
|
+
li {
|
|
76
|
+
display: flex;
|
|
77
|
+
|
|
78
|
+
&:hover:not(.is-active) {
|
|
79
|
+
background-color: $primary-light-gray;
|
|
80
|
+
color: $color-heading;
|
|
81
|
+
|
|
82
|
+
label {
|
|
83
|
+
color: $color-heading;
|
|
84
|
+
}
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
li {
|
|
92
|
+
display: flex;
|
|
93
|
+
align-items: center;
|
|
94
|
+
padding: 6px 12px;
|
|
95
|
+
border-radius: 4px;
|
|
96
|
+
gap: 8px;
|
|
97
|
+
cursor: pointer;
|
|
98
|
+
transition: 0.2s ease-in-out;
|
|
99
|
+
color: $color-text;
|
|
100
|
+
|
|
101
|
+
label {
|
|
102
|
+
color: $color-text;
|
|
103
|
+
cursor: pointer;
|
|
104
|
+
}
|
|
105
|
+
|
|
106
|
+
&:hover:not(.group li, .is-active) {
|
|
107
|
+
background-color: $primary-light-gray;
|
|
108
|
+
color: $color-heading;
|
|
109
|
+
|
|
110
|
+
label {
|
|
111
|
+
color: $color-heading;
|
|
112
|
+
}
|
|
113
|
+
}
|
|
114
|
+
|
|
115
|
+
strong {
|
|
116
|
+
color: $color-heading;
|
|
117
|
+
font-weight: 500;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
&.is-active {
|
|
121
|
+
background-color: $ac-primary;
|
|
122
|
+
color: $white-100;
|
|
123
|
+
|
|
124
|
+
label {
|
|
125
|
+
color: $white-100;
|
|
126
|
+
}
|
|
127
|
+
}
|
|
128
|
+
|
|
129
|
+
&.is-disabled {
|
|
130
|
+
opacity: 0.6;
|
|
131
|
+
cursor: not-allowed;
|
|
132
|
+
}
|
|
133
|
+
}
|
|
134
|
+
}
|
|
135
|
+
}
|
|
@@ -0,0 +1,122 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import { defineAsyncComponent } from "vue";
|
|
3
|
+
|
|
4
|
+
interface prop {
|
|
5
|
+
multiselect?: boolean;
|
|
6
|
+
custom?: boolean;
|
|
7
|
+
group?: boolean;
|
|
8
|
+
isOpen?: boolean;
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
withDefaults(defineProps<prop>(), {
|
|
12
|
+
multiselect: false,
|
|
13
|
+
custom: false,
|
|
14
|
+
isOpen: false,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
const AcButtons = defineAsyncComponent(() => import("../button/Buttons.vue"));
|
|
18
|
+
const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
|
|
19
|
+
|
|
20
|
+
const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
|
|
21
|
+
const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
|
|
22
|
+
const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
|
|
23
|
+
</script>
|
|
24
|
+
|
|
25
|
+
<template>
|
|
26
|
+
<!-- add dynamic 'z-index', use 'is-open' for show hide options -->
|
|
27
|
+
<div class="ac-single-input is-small is-selectbox" :class="[isOpen ? 'is-open' : '']" style="z-index: 2">
|
|
28
|
+
<!-- add 'show-label' class for move top -->
|
|
29
|
+
<label for="custom-select" class="ac-label show-label">Select Option</label>
|
|
30
|
+
<input type="text" value="Select" />
|
|
31
|
+
|
|
32
|
+
<div v-if="multiselect" class="ac-field field is-grouped is-clipped">
|
|
33
|
+
<div class="control">
|
|
34
|
+
<div class="tags has-addons">
|
|
35
|
+
<span class="tag is-primary is-light">Alex Smith</span>
|
|
36
|
+
<a class="tag is-delete"></a>
|
|
37
|
+
</div>
|
|
38
|
+
</div>
|
|
39
|
+
|
|
40
|
+
<div class="control">
|
|
41
|
+
<div class="tags has-addons">
|
|
42
|
+
<span class="tag is-info is-light">Alex Smith</span>
|
|
43
|
+
<a class="tag is-delete"></a>
|
|
44
|
+
</div>
|
|
45
|
+
</div>
|
|
46
|
+
|
|
47
|
+
<div class="control">
|
|
48
|
+
<div class="tags has-addons">
|
|
49
|
+
<span class="tag is-secondary is-light">Alex Smith</span>
|
|
50
|
+
<a class="tag is-delete"></a>
|
|
51
|
+
</div>
|
|
52
|
+
</div>
|
|
53
|
+
|
|
54
|
+
<div class="control">
|
|
55
|
+
<div class="tags has-addons">
|
|
56
|
+
<span class="tag is-primary is-clickable">+3</span>
|
|
57
|
+
</div>
|
|
58
|
+
</div>
|
|
59
|
+
</div>
|
|
60
|
+
|
|
61
|
+
<ac-buttons>
|
|
62
|
+
<button class="button ac-button is-white">
|
|
63
|
+
<ArrowDownIcon />
|
|
64
|
+
</button>
|
|
65
|
+
|
|
66
|
+
<ac-button modifier-classes="is-white">
|
|
67
|
+
<RefreshIcon class="is-spin" />
|
|
68
|
+
</ac-button>
|
|
69
|
+
|
|
70
|
+
<ac-button modifier-classes="is-white">
|
|
71
|
+
<CloseIcon style="rotate: 180deg" />
|
|
72
|
+
</ac-button>
|
|
73
|
+
</ac-buttons>
|
|
74
|
+
|
|
75
|
+
<ul v-if="group" class="options group">
|
|
76
|
+
<li v-for="i in 2" :key="i">
|
|
77
|
+
<strong>Group one</strong>
|
|
78
|
+
<ul>
|
|
79
|
+
<li>
|
|
80
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-five" />
|
|
81
|
+
<label for="opt-five">Select option five</label>
|
|
82
|
+
</li>
|
|
83
|
+
<li>
|
|
84
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-six" checked />
|
|
85
|
+
<label for="opt-six">Select option six</label>
|
|
86
|
+
</li>
|
|
87
|
+
<li class="is-disabled">
|
|
88
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-seven" />
|
|
89
|
+
<label for="opt-seven">Select option seven</label>
|
|
90
|
+
</li>
|
|
91
|
+
<li>
|
|
92
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-eight" />
|
|
93
|
+
<label for="opt-eight">Select option eight</label>
|
|
94
|
+
</li>
|
|
95
|
+
</ul>
|
|
96
|
+
</li>
|
|
97
|
+
</ul>
|
|
98
|
+
<div v-else-if="custom" class="custom-select options">
|
|
99
|
+
<slot />
|
|
100
|
+
</div>
|
|
101
|
+
|
|
102
|
+
<ul v-else class="options">
|
|
103
|
+
<li>
|
|
104
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-one" />
|
|
105
|
+
<label for="opt-one">Select option one</label>
|
|
106
|
+
</li>
|
|
107
|
+
<li class="is-active">
|
|
108
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-two" />
|
|
109
|
+
<label for="opt-two">Select option Two</label>
|
|
110
|
+
</li>
|
|
111
|
+
<li class="is-disabled">
|
|
112
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-three" />
|
|
113
|
+
<label for="opt-three">Select option three</label>
|
|
114
|
+
</li>
|
|
115
|
+
<li>
|
|
116
|
+
<input v-if="multiselect" type="checkbox" name="" id="opt-four" />
|
|
117
|
+
<label for="opt-four">Select option four</label>
|
|
118
|
+
</li>
|
|
119
|
+
</ul>
|
|
120
|
+
</div>
|
|
121
|
+
<!-- <single-input /> -->
|
|
122
|
+
</template>
|
|
@@ -0,0 +1,118 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div>
|
|
3
|
+
<div class="input-container">
|
|
4
|
+
<AcInput v-model="newItem" @keyup.enter="addItem" :placeholderText="placeholderText" class="input-field" />
|
|
5
|
+
<AcButton @click="addItem">Add</AcButton>
|
|
6
|
+
</div>
|
|
7
|
+
<transition-group name="list" tag="ul" class="item-list">
|
|
8
|
+
<li v-for="(item, index) in items" :key="item" class="list-item">
|
|
9
|
+
<span>{{ item }}</span>
|
|
10
|
+
<AcButton @click="removeItem(index)" class="remove-button">×</AcButton>
|
|
11
|
+
</li>
|
|
12
|
+
</transition-group>
|
|
13
|
+
</div>
|
|
14
|
+
</template>
|
|
15
|
+
|
|
16
|
+
<script setup lang="ts">
|
|
17
|
+
import { ref } from "vue";
|
|
18
|
+
import AcInput from "./AcInput.vue";
|
|
19
|
+
import AcButton from "../button/Button.vue";
|
|
20
|
+
|
|
21
|
+
withDefaults(
|
|
22
|
+
defineProps<{
|
|
23
|
+
placeholderText?: string;
|
|
24
|
+
}>(),
|
|
25
|
+
{ placeholderText: "Enter a New Item" }
|
|
26
|
+
);
|
|
27
|
+
|
|
28
|
+
const newItem = ref("");
|
|
29
|
+
const items = ref<string[]>([]);
|
|
30
|
+
|
|
31
|
+
const emit = defineEmits<{
|
|
32
|
+
(e: "update:items", value: string[]): void;
|
|
33
|
+
}>();
|
|
34
|
+
|
|
35
|
+
const addItem = () => {
|
|
36
|
+
if (newItem.value.trim()) {
|
|
37
|
+
items.value.unshift(newItem.value.trim());
|
|
38
|
+
newItem.value = "";
|
|
39
|
+
emit("update:items", items.value);
|
|
40
|
+
}
|
|
41
|
+
};
|
|
42
|
+
|
|
43
|
+
const removeItem = (index: number) => {
|
|
44
|
+
items.value.splice(index, 1);
|
|
45
|
+
emit("update:items", items.value);
|
|
46
|
+
};
|
|
47
|
+
</script>
|
|
48
|
+
|
|
49
|
+
<style scoped>
|
|
50
|
+
.title {
|
|
51
|
+
color: #2c3e50;
|
|
52
|
+
text-align: center;
|
|
53
|
+
margin-bottom: 20px;
|
|
54
|
+
font-size: 24px;
|
|
55
|
+
font-weight: bold;
|
|
56
|
+
}
|
|
57
|
+
|
|
58
|
+
.input-field {
|
|
59
|
+
border-radius: 8px;
|
|
60
|
+
transition: border-color 0.3s;
|
|
61
|
+
margin-right: 8px;
|
|
62
|
+
width: 100%;
|
|
63
|
+
}
|
|
64
|
+
.input-container {
|
|
65
|
+
display: flex;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.item-list {
|
|
69
|
+
list-style-type: none;
|
|
70
|
+
padding: 0;
|
|
71
|
+
}
|
|
72
|
+
|
|
73
|
+
.list-item {
|
|
74
|
+
display: flex;
|
|
75
|
+
justify-content: space-between;
|
|
76
|
+
align-items: center;
|
|
77
|
+
padding: 12px;
|
|
78
|
+
background-color: #ecf0f1;
|
|
79
|
+
margin-bottom: 12px;
|
|
80
|
+
border-radius: 8px;
|
|
81
|
+
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
82
|
+
transition: all 0.3s;
|
|
83
|
+
}
|
|
84
|
+
|
|
85
|
+
.list-item:hover {
|
|
86
|
+
background-color: #e0e6e8;
|
|
87
|
+
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
.remove-button {
|
|
91
|
+
background-color: #e74c3c;
|
|
92
|
+
color: white;
|
|
93
|
+
border: none;
|
|
94
|
+
border-radius: 50%;
|
|
95
|
+
width: 30px;
|
|
96
|
+
height: 30px;
|
|
97
|
+
font-size: 18px;
|
|
98
|
+
cursor: pointer;
|
|
99
|
+
display: flex;
|
|
100
|
+
align-items: center;
|
|
101
|
+
justify-content: center;
|
|
102
|
+
transition: background-color 0.3s;
|
|
103
|
+
}
|
|
104
|
+
|
|
105
|
+
.remove-button:hover {
|
|
106
|
+
background-color: #c0392b;
|
|
107
|
+
}
|
|
108
|
+
|
|
109
|
+
.list-enter-active,
|
|
110
|
+
.list-leave-active {
|
|
111
|
+
transition: all 0.5s;
|
|
112
|
+
}
|
|
113
|
+
.list-enter,
|
|
114
|
+
.list-leave-to {
|
|
115
|
+
opacity: 0;
|
|
116
|
+
transform: translateY(30px);
|
|
117
|
+
}
|
|
118
|
+
</style>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
fill="none"
|
|
5
|
+
width="16px"
|
|
6
|
+
height="16px"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
stroke-width="1.5"
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
class="size-6"
|
|
11
|
+
>
|
|
12
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
|
|
13
|
+
</svg>
|
|
14
|
+
</template>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
fill="none"
|
|
5
|
+
height="16px"
|
|
6
|
+
width="16px"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
stroke-width="1.5"
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
class="size-6"
|
|
11
|
+
>
|
|
12
|
+
<path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
|
|
13
|
+
</svg>
|
|
14
|
+
</template>
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<svg
|
|
3
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
4
|
+
fill="none"
|
|
5
|
+
width="16px"
|
|
6
|
+
height="16px"
|
|
7
|
+
viewBox="0 0 24 24"
|
|
8
|
+
stroke-width="1.5"
|
|
9
|
+
stroke="currentColor"
|
|
10
|
+
class="size-6"
|
|
11
|
+
>
|
|
12
|
+
<path
|
|
13
|
+
stroke-linecap="round"
|
|
14
|
+
stroke-linejoin="round"
|
|
15
|
+
d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
|
|
16
|
+
/>
|
|
17
|
+
</svg>
|
|
18
|
+
</template>
|