@appscode/design-system 1.0.43-alpha.75 → 1.0.43-alpha.79

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.
Files changed (8) hide show
  1. package/base/utilities/_default.scss +141 -0
  2. package/components/ui-builder/_ui-builder.scss +1 -1
  3. package/components/ui-builder/_vue-open-api.scss +98 -0
  4. package/package.json +1 -1
  5. package/vue-components/v2/modal/Modal.vue +4 -1
  6. package/vue-components/v2/sidebar/ClusterSwitcher.vue +31 -63
  7. package/vue-components/v3/modal/Modal.vue +4 -1
  8. package/vue-components/v3/sidebar/ClusterSwitcher.vue +31 -62
package/base/utilities/_default.scss CHANGED
@@ -735,6 +735,147 @@ $border_color_4: transparent transparent #585d6e transparent;
735
735
  }
736
736
  }
737
737
  }
738
+ // tooltip in vue-open-api
739
+ .tooltip {
740
+ display: block !important;
741
+ z-index: 10000;
742
+
743
+ &.is-button-info {
744
+ .tooltip-inner {
745
+ background: $ac-white;
746
+ color: $ac-primary;
747
+ border-radius: 4px;
748
+ padding: 5px 20px 4px;
749
+ box-shadow: $ac-shadow-1;
750
+ font-weight: 500;
751
+ font-size: 13px;
752
+ }
753
+
754
+ .tooltip-arrow {
755
+ width: 0;
756
+ height: 0;
757
+ border-style: solid;
758
+ position: absolute;
759
+ margin: 5px;
760
+ border-color: $ac-white;
761
+ }
762
+ }
763
+
764
+ &.is-errors-tooltip {
765
+ .tooltip-inner {
766
+ background: $ac-white;
767
+ color: $ac-danger;
768
+ border-radius: 4px;
769
+ padding: 5px 20px 4px;
770
+ box-shadow: $ac-shadow-1;
771
+ font-weight: 500;
772
+ font-size: 13px;
773
+
774
+ .errors-wrapper {
775
+ .error-element {
776
+ padding: 5px 0;
777
+ }
778
+ }
779
+ }
780
+
781
+ .tooltip-arrow {
782
+ width: 0;
783
+ height: 0;
784
+ border-style: solid;
785
+ position: absolute;
786
+ margin: 5px;
787
+ border-color: $ac-white;
788
+ }
789
+ }
790
+
791
+ &[x-placement^="top"] {
792
+ margin-bottom: 5px;
793
+
794
+ .tooltip-arrow {
795
+ border-width: 5px 5px 0 5px;
796
+ border-left-color: transparent !important;
797
+ border-right-color: transparent !important;
798
+ border-bottom-color: transparent !important;
799
+ bottom: -5px;
800
+ left: calc(50% - 5px);
801
+ margin-top: 0;
802
+ margin-bottom: 0;
803
+ }
804
+ }
805
+
806
+ &[x-placement^="bottom"] {
807
+ margin-top: 5px;
808
+
809
+ .tooltip-arrow {
810
+ border-width: 0 5px 5px 5px;
811
+ border-left-color: transparent !important;
812
+ border-right-color: transparent !important;
813
+ border-top-color: transparent !important;
814
+ top: -5px;
815
+ left: calc(50% - 5px);
816
+ margin-top: 0;
817
+ margin-bottom: 0;
818
+ }
819
+ }
820
+
821
+ &[x-placement^="right"] {
822
+ margin-left: 5px;
823
+
824
+ .tooltip-arrow {
825
+ border-width: 5px 5px 5px 0;
826
+ border-left-color: transparent !important;
827
+ border-top-color: transparent !important;
828
+ border-bottom-color: transparent !important;
829
+ left: -5px;
830
+ top: calc(50% - 5px);
831
+ margin-left: 0;
832
+ margin-right: 0;
833
+ }
834
+ }
835
+
836
+ &[x-placement^="left"] {
837
+ margin-right: 5px;
838
+
839
+ .tooltip-arrow {
840
+ border-width: 5px 0 5px 5px;
841
+ border-top-color: transparent !important;
842
+ border-right-color: transparent !important;
843
+ border-bottom-color: transparent !important;
844
+ right: -5px;
845
+ top: calc(50% - 5px);
846
+ margin-left: 0;
847
+ margin-right: 0;
848
+ }
849
+ }
850
+
851
+ &.popover {
852
+ $color: #f9f9f9;
853
+
854
+ .popover-inner {
855
+ background: $color;
856
+ color: black;
857
+ padding: 24px;
858
+ border-radius: 4px;
859
+ box-shadow: $ac-shadow-1;
860
+ }
861
+
862
+ .popover-arrow {
863
+ border-color: $color;
864
+ }
865
+ }
866
+
867
+ &[aria-hidden="true"] {
868
+ visibility: hidden;
869
+ opacity: 0;
870
+ transition: opacity 0.15s, visibility 0.15s;
871
+ }
872
+
873
+ &[aria-hidden="false"] {
874
+ visibility: visible;
875
+ opacity: 1;
876
+ transition: opacity 0.15s;
877
+ }
878
+ }
738
879
 
739
880
  // Customize tooltip end
740
881
 
package/components/ui-builder/_ui-builder.scss CHANGED
@@ -61,7 +61,7 @@
61
61
  position: absolute;
62
62
  content: "";
63
63
  left: 27px;
64
- top: 5px;
64
+ top: 10px;
65
65
  width: 1px;
66
66
  height: calc(100% - 20px);
67
67
  border: 1px dashed $ac-white-light;
package/components/ui-builder/_vue-open-api.scss ADDED
@@ -0,0 +1,98 @@
1
+ .vue-schema-form-array {
2
+ .nested-body {
3
+ // margin-bottom: 15px;
4
+ display: flex;
5
+
6
+ .form-left-item {
7
+ margin-right: 10px;
8
+ width: calc(100% - 92px);
9
+ }
10
+ }
11
+ }
12
+
13
+ .nested-header {
14
+ .tabs.ac-tabs {
15
+ margin-bottom: 0;
16
+ opacity: 0;
17
+ visibility: hidden;
18
+ transition: 0.3s ease-in-out;
19
+ }
20
+
21
+ &:hover {
22
+ .tabs.ac-tabs {
23
+ opacity: 1;
24
+ visibility: visible;
25
+ }
26
+ }
27
+ }
28
+
29
+ .vue-openapi-form {
30
+ margin-left: -20px;
31
+ .is-warning {
32
+ font-size: 12px;
33
+ color: #ea3d2f;
34
+ padding-left: 10px;
35
+ }
36
+
37
+ .ac-nested-elements {
38
+ &:first-child {
39
+ margin-left: 0;
40
+ }
41
+
42
+ .nested-body {
43
+ padding-left: 0px;
44
+ }
45
+
46
+ .nested-header {
47
+ width: 100%;
48
+ }
49
+ }
50
+
51
+ .ac-single-switch {
52
+ margin-left: -15px;
53
+ }
54
+
55
+ .ac-single-input {
56
+ margin-left: 25px;
57
+
58
+ &:last-child {
59
+ margin-bottom: 15px;
60
+ }
61
+ }
62
+ }
63
+
64
+ .vue-form-scema-body {
65
+ .left-content {
66
+ width: 650px;
67
+ background-color: $ac-white-lighter;
68
+ padding: 30px;
69
+ }
70
+
71
+ .right-content {
72
+ width: 100%;
73
+ margin-top: 30px;
74
+ }
75
+ }
76
+
77
+ .v-tooltip-open {
78
+ background-color: $ac-white;
79
+ }
80
+
81
+ .ac-nested-elements::after {
82
+ top: 25px;
83
+ width: 1px;
84
+ height: calc(100% - 50px);
85
+ }
86
+
87
+ .ac-nested-elements::before {
88
+ bottom: 12px;
89
+ }
90
+
91
+ .is-collapsed {
92
+ &.ac-nested-elements::before,
93
+ &.ac-nested-elements::after {
94
+ display: none;
95
+ }
96
+ }
97
+
98
+ // for vue-tooltip
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@appscode/design-system",
3
- "version": "1.0.43-alpha.75",
3
+ "version": "1.0.43-alpha.79",
4
4
  "description": "A design system for Appscode websites and dashboards made using Bulma",
5
5
  "main": "main.scss",
6
6
  "scripts": {
package/vue-components/v2/modal/Modal.vue CHANGED
@@ -37,7 +37,10 @@
37
37
  <!-- modal body end -->
38
38
 
39
39
  <!-- modal footer start -->
40
- <div class="ac-modal-footer action-footer">
40
+ <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
41
+ <div>
42
+ <slot name="modal-footer-left" />
43
+ </div>
41
44
  <buttons class="has-text-right is-block">
42
45
  <slot name="modal-footer-controls" />
43
46
  </buttons>
package/vue-components/v2/sidebar/ClusterSwitcher.vue CHANGED
@@ -3,7 +3,8 @@
3
3
  <img
4
4
  width="40"
5
5
  :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
6
- alt=""
6
+ onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
7
+ alt="provider-icon"
7
8
  />
8
9
  </div>
9
10
  <multiselect
@@ -11,7 +12,7 @@
11
12
  v-model="selectedCluster"
12
13
  placeholder="Selected Cluster"
13
14
  label="name"
14
- track-by="uid"
15
+ track-by="name"
15
16
  :options="options"
16
17
  :allow-empty="false"
17
18
  deselectLabel=""
@@ -22,6 +23,7 @@
22
23
  <div class="is-flex is-align-items-center">
23
24
  <img
24
25
  :src="getProviderIcon(props.option.provider)"
26
+ onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
25
27
  alt="No cluster selected"
26
28
  /><span
27
29
  ><span>{{ props.option.displayName }}</span></span
@@ -33,6 +35,7 @@
33
35
  <img
34
36
  class="mr-15"
35
37
  :src="getProviderIcon(props.option.provider)"
38
+ onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
36
39
  alt="No cluster selected"
37
40
  />
38
41
  <div>
@@ -45,7 +48,6 @@
45
48
  </template>
46
49
 
47
50
  <script>
48
- import { mapGetters } from "vuex";
49
51
  export default {
50
52
  props: {
51
53
  sidebarCollapsed: {
@@ -60,14 +62,14 @@ export default {
60
62
  type: String,
61
63
  default: "",
62
64
  },
63
- imagePath: {
64
- type: Object,
65
- default: () => ({}),
65
+ clusterOptions: {
66
+ type: Array,
67
+ default: [],
66
68
  },
67
69
  value: {
68
- type: Object,
69
- default: () => ({}),
70
- },
70
+ type: String,
71
+ default: "",
72
+ }
71
73
  },
72
74
 
73
75
  components: {
@@ -77,31 +79,11 @@ export default {
77
79
  data() {
78
80
  return {
79
81
  selectedCluster: null,
80
- clusters: [],
82
+ selectedClusterName: null,
81
83
  options: [],
82
84
  };
83
85
  },
84
86
 
85
- computed: {
86
- selectClusterOptions() {
87
- return this.clusters
88
- .filter(
89
- (cluster) =>
90
- cluster.status.phase === "Connected" ||
91
- cluster.status.phase === "PrivateConnected"
92
- )
93
- .map((cluster) => {
94
- return {
95
- name: cluster.spec.name,
96
- displayName: cluster.spec.displayName,
97
- provider: cluster.spec.provider,
98
- uid: cluster.spec.uid,
99
- location: cluster.spec.location,
100
- };
101
- });
102
- },
103
- },
104
-
105
87
  methods: {
106
88
  async checkStatus(clusterName) {
107
89
  try {
@@ -113,57 +95,43 @@ export default {
113
95
  return false;
114
96
  }
115
97
  },
116
- async getClusters() {
117
- if (this.username) {
118
- const url = `/clusters/${this.username}`;
119
-
120
- try {
121
- const resp = await this.$axios.get(url);
122
- this.clusters = (resp.data && resp.data.items) || [];
123
-
124
- // preselect the cluster
125
- const selectedCluster = this.clusters.find(
126
- (cluster) => cluster.spec.name === this.$route.params.cluster
127
- );
128
- this.selectedCluster = {
129
- name: selectedCluster.spec.name,
130
- displayName: selectedCluster.spec.displayName,
131
- provider: selectedCluster.spec.provider,
132
- uid: selectedCluster.spec.uid,
133
- location: selectedCluster.spec.location,
134
- };
135
- } catch (e) {
136
- console.log(e);
137
- }
138
- }
139
- },
140
98
 
141
99
  getProviderIcon(provider) {
142
- return this.imagePath[provider] || this.imagePath["default"];
100
+ return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
143
101
  },
144
102
  },
145
103
 
146
- created() {
147
- this.getClusters();
148
- },
149
-
150
104
  watch: {
151
105
  value: {
152
- deep: true,
153
106
  immediate: true,
154
107
  handler(n) {
155
- this.selectedCluster = n;
108
+ this.selectedClusterName = n;
109
+ },
110
+ },
111
+ selectedCluster: {
112
+ deep: true,
113
+ handler(n) {
114
+ this.selectedClusterName = n.name;
156
115
  },
157
116
  },
158
- selectClusterOptions: {
117
+ selectedClusterName(n) {
118
+ this.$emit("input", n);
119
+ },
120
+ clusterOptions: {
159
121
  deep: true,
160
122
  immediate: true,
161
123
  async handler(list) {
162
124
  this.options = [];
125
+
163
126
  if (list) {
164
127
  list.forEach(async (item) => {
165
128
  const resp = await this.checkStatus(item.name);
166
- if (resp) this.options.push(item);
129
+ if (resp) {
130
+ this.options.push(item);
131
+ if(item.name === this.selectedClusterName) {
132
+ this.selectedCluster = item;
133
+ }
134
+ }
167
135
  });
168
136
  }
169
137
  },
package/vue-components/v3/modal/Modal.vue CHANGED
@@ -37,7 +37,10 @@
37
37
  <!-- modal body end -->
38
38
 
39
39
  <!-- modal footer start -->
40
- <div class="ac-modal-footer action-footer">
40
+ <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
41
+ <div>
42
+ <slot name="modal-footer-left" />
43
+ </div>
41
44
  <buttons class="has-text-right is-block">
42
45
  <slot name="modal-footer-controls" />
43
46
  </buttons>
package/vue-components/v3/sidebar/ClusterSwitcher.vue CHANGED
@@ -3,7 +3,8 @@
3
3
  <img
4
4
  width="40"
5
5
  :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
6
- alt=""
6
+ onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
7
+ alt="provider-icon"
7
8
  />
8
9
  </div>
9
10
  <multiselect
@@ -11,7 +12,7 @@
11
12
  v-model="selectedCluster"
12
13
  placeholder="Selected Cluster"
13
14
  label="name"
14
- track-by="uid"
15
+ track-by="name"
15
16
  :options="options"
16
17
  :allow-empty="false"
17
18
  deselectLabel=""
@@ -22,6 +23,7 @@
22
23
  <div class="is-flex is-align-items-center">
23
24
  <img
24
25
  :src="getProviderIcon(props.option.provider)"
26
+ onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
25
27
  alt="No cluster selected"
26
28
  /><span
27
29
  ><span>{{ props.option.displayName }}</span></span
@@ -33,6 +35,7 @@
33
35
  <img
34
36
  class="mr-15"
35
37
  :src="getProviderIcon(props.option.provider)"
38
+ onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
36
39
  alt="No cluster selected"
37
40
  />
38
41
  <div>
@@ -60,14 +63,14 @@ export default defineComponent({
60
63
  type: String,
61
64
  default: "",
62
65
  },
63
- imagePath: {
64
- type: Object,
65
- default: () => ({}),
66
+ clusterOptions: {
67
+ type: Array,
68
+ default: [],
66
69
  },
67
70
  value: {
68
- type: Object,
69
- default: () => ({}),
70
- },
71
+ type: String,
72
+ default: "",
73
+ }
71
74
  },
72
75
 
73
76
  components: {
@@ -77,31 +80,11 @@ export default defineComponent({
77
80
  data() {
78
81
  return {
79
82
  selectedCluster: null,
80
- clusters: [],
83
+ selectedClusterName: null,
81
84
  options: [],
82
85
  };
83
86
  },
84
87
 
85
- computed: {
86
- selectClusterOptions() {
87
- return this.clusters
88
- .filter(
89
- (cluster) =>
90
- cluster.status.phase === "Connected" ||
91
- cluster.status.phase === "PrivateConnected"
92
- )
93
- .map((cluster) => {
94
- return {
95
- name: cluster.spec.name,
96
- displayName: cluster.spec.displayName,
97
- provider: cluster.spec.provider,
98
- uid: cluster.spec.uid,
99
- location: cluster.spec.location,
100
- };
101
- });
102
- },
103
- },
104
-
105
88
  methods: {
106
89
  async checkStatus(clusterName) {
107
90
  try {
@@ -113,57 +96,43 @@ export default defineComponent({
113
96
  return false;
114
97
  }
115
98
  },
116
- async getClusters() {
117
- if (this.username) {
118
- const url = `/clusters/${this.username}`;
119
-
120
- try {
121
- const resp = await this.$axios.get(url);
122
- this.clusters = (resp.data && resp.data.items) || [];
123
-
124
- // preselect the cluster
125
- const selectedCluster = this.clusters.find(
126
- (cluster) => cluster.spec.name === this.$route.params.cluster
127
- );
128
- this.selectedCluster = {
129
- name: selectedCluster.spec.name,
130
- displayName: selectedCluster.spec.displayName,
131
- provider: selectedCluster.spec.provider,
132
- uid: selectedCluster.spec.uid,
133
- location: selectedCluster.spec.location,
134
- };
135
- } catch (e) {
136
- console.log(e);
137
- }
138
- }
139
- },
140
99
 
141
100
  getProviderIcon(provider) {
142
- return this.imagePath[provider] || this.imagePath["default"];
101
+ return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
143
102
  },
144
103
  },
145
104
 
146
- created() {
147
- this.getClusters();
148
- },
149
-
150
105
  watch: {
151
106
  value: {
152
- deep: true,
153
107
  immediate: true,
154
108
  handler(n) {
155
- this.selectedCluster = n;
109
+ this.selectedClusterName = n;
110
+ },
111
+ },
112
+ selectedCluster: {
113
+ deep: true,
114
+ handler(n) {
115
+ this.selectedClusterName = n.name;
156
116
  },
157
117
  },
158
- selectClusterOptions: {
118
+ selectedClusterName(n) {
119
+ this.$emit("input", n);
120
+ },
121
+ clusterOptions: {
159
122
  deep: true,
160
123
  immediate: true,
161
124
  async handler(list) {
162
125
  this.options = [];
126
+
163
127
  if (list) {
164
128
  list.forEach(async (item) => {
165
129
  const resp = await this.checkStatus(item.name);
166
- if (resp) this.options.push(item);
130
+ if (resp) {
131
+ this.options.push(item);
132
+ if(item.name === this.selectedClusterName) {
133
+ this.selectedCluster = item;
134
+ }
135
+ }
167
136
  });
168
137
  }
169
138
  },