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

package/components/_left-sidebar-menu.scss

@@ -376,7 +376,10 @@
 
   .multiselect {
     height: 50px;
-    width: 234px;
+
+    // commented out to set full width select box when right content is not present
+    // width: 234px;
+    
     left: 0px;
     top: -5px;
 

package/package.json

@@ -1,18 +1,13 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.79",
+  "version": "1.0.43-alpha.82",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1"
   },
   "dependencies": {
-    "@appscode/design-system-images": "0.0.13",
-    "bulma-checkradio": "^1.1.1",
-    "bulma-switch": "^2.0.0",
-    "bulma-tooltip": "^3.0.2",
-    "v-calendar": "^1.0.6",
-    "vue-multiselect": "^2.1.6"
+    "@appscode/design-system-images": "0.0.13"
   },
   "repository": {
     "type": "git",

package/vue-components/v2/sidebar/ClusterSwitcher.vue

@@ -13,7 +13,7 @@
     placeholder="Selected Cluster"
     label="name"
     track-by="name"
-    :options="options"
+    :options="clusterOptions"
     :allow-empty="false"
     deselectLabel=""
     selectLabel=""
@@ -58,10 +58,6 @@ export default {
       type: Boolean,
       default: false,
     },
-    username: {
-      type: String,
-      default: "",
-    },
     clusterOptions: {
       type: Array,
       default: [],
@@ -79,23 +75,11 @@ export default {
   data() {
     return {
       selectedCluster: null,
-      selectedClusterName: null,
-      options: [],
+      selectedClusterName: "",
     };
   },
 
   methods: {
-    async checkStatus(clusterName) {
-      try {
-        await this.$axios.get(
-          `/clusters/${this.username}/${clusterName}/status`
-        );
-        return true;
-      } catch (err) {
-        return false;
-      }
-    },
-
     getProviderIcon(provider) {
       return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
     },
@@ -115,22 +99,23 @@ export default {
       },
     },
     selectedClusterName(n) {
+      if (n !== this.selectedCluster.name) {
+        this.clusterOptions.forEach((item) => {
+          if (this.selectedClusterName === item.name) {
+            this.selectedCluster = item;
+          }
+        });
+      }
       this.$emit("input", n);
     },
     clusterOptions: {
       deep: true,
       immediate: true,
       async handler(list) {
-        this.options = [];
-
         if (list) {
           list.forEach(async (item) => {
-            const resp = await this.checkStatus(item.name);
-            if (resp) {
-              this.options.push(item);
-              if(item.name === this.selectedClusterName) {
-                this.selectedCluster = item;
-              }
+            if(item.name === this.selectedClusterName) {
+              this.selectedCluster = item;
             }
           });
         }

package/vue-components/v3/sidebar/ClusterSwitcher.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+  <div v-if="sidebarCollapsed" class="is-cluster-logo">
     <img
       width="40"
       :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
@@ -13,13 +13,13 @@
     placeholder="Selected Cluster"
     label="name"
     track-by="name"
-    :options="options"
+    :options="clusterOptions"
     :allow-empty="false"
-    deselectLabel=""
-    selectLabel=""
-    selectedLabel=""
+    deselect-label=""
+    select-label=""
+    selected-label=""
   >
-    <template slot="singleLabel" slot-scope="props">
+    <template #singleLabel="props">
       <div class="is-flex is-align-items-center">
         <img
           :src="getProviderIcon(props.option.provider)"
@@ -30,7 +30,7 @@
         >
       </div>
     </template>
-    <template slot="option" slot-scope="props">
+    <template #option="props">
       <div class="is-flex is-align-items-center">
         <img
           class="mr-15"
@@ -48,95 +48,86 @@
 </template>
 
 <script>
-import { defineComponent, defineAsyncComponent } from "vue";
-export default defineComponent({
-  props: {
-    sidebarCollapsed: {
-      type: Boolean,
-      default: false,
+  import { defineComponent, defineAsyncComponent } from 'vue'
+  export default defineComponent({
+    components: {
+      Multiselect: defineAsyncComponent(() =>
+        import('vue-multiselect').then((module) => module.default)
+      ),
     },
-    mouseHover: {
-      type: Boolean,
-      default: false,
-    },
-    username: {
-      type: String,
-      default: "",
-    },
-    clusterOptions: {
-      type: Array,
-      default: [],
+    props: {
+      sidebarCollapsed: {
+        type: Boolean,
+        default: false,
+      },
+      mouseHover: {
+        type: Boolean,
+        default: false,
+      },
+      clusterOptions: {
+        type: Array,
+        default: () => [],
+      },
+      modelValue: {
+        type: String,
+        default: '',
+      },
     },
-    value: {
-      type: String,
-      default: "",
-    }
-  },
-
-  components: {
-    Multiselect: () => import("vue-multiselect"),
-  },
 
-  data() {
-    return {
-      selectedCluster: null,
-      selectedClusterName: null,
-      options: [],
-    };
-  },
+    emits: ['update:modelValue'],
 
-  methods: {
-    async checkStatus(clusterName) {
-      try {
-        await this.$axios.get(
-          `/clusters/${this.username}/${clusterName}/status`
-        );
-        return true;
-      } catch (err) {
-        return false;
+    data() {
+      return {
+        selectedCluster: null,
+        selectedClusterName: null,
       }
     },
 
-    getProviderIcon(provider) {
-      return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
-    },
-  },
+    watch: {
+      modelValue: {
+        immediate: true,
+        handler(n) {
+          this.selectedClusterName = n
+        },
+      },
+      selectedCluster: {
+        deep: true,
+        handler(n) {
+          if (this.selectedClusterName !== n.name) {
+            this.selectedClusterName = n.name
+          }
+        },
+      },
+      selectedClusterName(n) {
+        if (n !== this.selectedCluster.name) {
+          this.clusterOptions.forEach((item) => {
+            if (this.selectedClusterName === item.name) {
+              this.selectedCluster = item
+            }
+          })
+        }
 
-  watch: {
-    value: {
-      immediate: true,
-      handler(n) {
-        this.selectedClusterName = n;
+        this.$emit('update:modelValue', n)
       },
-    },
-    selectedCluster: {
-      deep: true,
-      handler(n) {
-        this.selectedClusterName = n.name;
+      clusterOptions: {
+        deep: true,
+        immediate: true,
+        async handler(list) {
+          if (list) {
+            list.forEach((item) => {
+              if (this.selectedClusterName === item.name) {
+                this.selectedCluster = item
+              }
+            })
+          }
+        },
       },
     },
-    selectedClusterName(n) {
-      this.$emit("input", n);
-    },
-    clusterOptions: {
-      deep: true,
-      immediate: true,
-      async handler(list) {
-        this.options = [];
 
-        if (list) {
-          list.forEach(async (item) => {
-            const resp = await this.checkStatus(item.name);
-            if (resp) {
-              this.options.push(item);
-              if(item.name === this.selectedClusterName) {
-                this.selectedCluster = item;
-              }
-            }
-          });
-        }
+    methods: {
+      getProviderIcon(provider) {
+        return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`
       },
     },
-  },
-});
-</script>
+  })
+</script>