@appscode/design-system 1.0.43-alpha.74 → 1.0.43-alpha.78

package/base/utilities/_default.scss

@@ -735,6 +735,147 @@ $border_color_4: transparent transparent #585d6e transparent;
     }
   }
 }
+// tooltip in vue-open-api
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  &.is-button-info {
+    .tooltip-inner {
+      background: $ac-white;
+      color: $ac-primary;
+      border-radius: 4px;
+      padding: 5px 20px 4px;
+      box-shadow: $ac-shadow-1;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $ac-white;
+    }
+  }
+
+  &.is-errors-tooltip {
+    .tooltip-inner {
+      background: $ac-white;
+      color: $ac-danger;
+      border-radius: 4px;
+      padding: 5px 20px 4px;
+      box-shadow: $ac-shadow-1;
+      font-weight: 500;
+      font-size: 13px;
+
+      .errors-wrapper {
+        .error-element {
+          padding: 5px 0;
+        }
+      }
+    }
+
+    .tooltip-arrow {
+      width: 0;
+      height: 0;
+      border-style: solid;
+      position: absolute;
+      margin: 5px;
+      border-color: $ac-white;
+    }
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: $color;
+      color: black;
+      padding: 24px;
+      border-radius: 4px;
+      box-shadow: $ac-shadow-1;
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s, visibility 0.15s;
+  }
+
+  &[aria-hidden="false"] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
+}
 
 // Customize tooltip end
 

package/components/ui-builder/_ui-builder.scss

@@ -61,7 +61,7 @@
     position: absolute;
     content: "";
     left: 27px;
-    top: 5px;
+    top: 10px;
     width: 1px;
     height: calc(100% - 20px);
     border: 1px dashed $ac-white-light;

package/components/ui-builder/_vue-open-api.scss

@@ -0,0 +1,98 @@
+.vue-schema-form-array {
+  .nested-body {
+    // margin-bottom: 15px;
+    display: flex;
+
+    .form-left-item {
+      margin-right: 10px;
+      width: calc(100% - 92px);
+    }
+  }
+}
+
+.nested-header {
+  .tabs.ac-tabs {
+    margin-bottom: 0;
+    opacity: 0;
+    visibility: hidden;
+    transition: 0.3s ease-in-out;
+  }
+
+  &:hover {
+    .tabs.ac-tabs {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+}
+
+.vue-openapi-form {
+  margin-left: -20px;
+  .is-warning {
+    font-size: 12px;
+    color: #ea3d2f;
+    padding-left: 10px;
+  }
+
+  .ac-nested-elements {
+    &:first-child {
+      margin-left: 0;
+    }
+
+    .nested-body {
+      padding-left: 0px;
+    }
+
+    .nested-header {
+      width: 100%;
+    }
+  }
+
+  .ac-single-switch {
+    margin-left: -15px;
+  }
+
+  .ac-single-input {
+    margin-left: 25px;
+
+    &:last-child {
+      margin-bottom: 15px;
+    }
+  }
+}
+
+.vue-form-scema-body {
+  .left-content {
+    width: 650px;
+    background-color: $ac-white-lighter;
+    padding: 30px;
+  }
+
+  .right-content {
+    width: 100%;
+    margin-top: 30px;
+  }
+}
+
+.v-tooltip-open {
+  background-color: $ac-white;
+}
+
+.ac-nested-elements::after {
+  top: 25px;
+  width: 1px;
+  height: calc(100% - 50px);
+}
+
+.ac-nested-elements::before {
+  bottom: 12px;
+}
+
+.is-collapsed {
+  &.ac-nested-elements::before,
+  &.ac-nested-elements::after {
+    display: none;
+  }
+}
+
+// for vue-tooltip

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@appscode/design-system",
-  "version": "1.0.43-alpha.74",
+  "version": "1.0.43-alpha.78",
   "description": "A design system for Appscode websites and dashboards made using Bulma",
   "main": "main.scss",
   "scripts": {

package/vue-components/v2/modal/Modal.vue

@@ -37,7 +37,10 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      alt=""
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="uid"
+    :options="options"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+import { mapGetters } from "vuex";
+export default {
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    username: {
+      type: String,
+      default: "",
+    },
+    imagePath: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      clusters: [],
+      options: [],
+    };
+  },
+
+  computed: {
+    selectClusterOptions() {
+      return this.clusters
+        .filter(
+          (cluster) =>
+            cluster.status.phase === "Connected" ||
+            cluster.status.phase === "PrivateConnected"
+        )
+        .map((cluster) => {
+          return {
+            name: cluster.spec.name,
+            displayName: cluster.spec.displayName,
+            provider: cluster.spec.provider,
+            uid: cluster.spec.uid,
+            location: cluster.spec.location,
+          };
+        });
+    },
+  },
+
+  methods: {
+    async checkStatus(clusterName) {
+      try {
+        await this.$axios.get(
+          `/clusters/${this.username}/${clusterName}/status`
+        );
+        return true;
+      } catch (err) {
+        return false;
+      }
+    },
+    async getClusters() {
+      if (this.username) {
+        const url = `/clusters/${this.username}`;
+
+        try {
+          const resp = await this.$axios.get(url);
+          this.clusters = (resp.data && resp.data.items) || [];
+
+          // preselect the cluster
+          const selectedCluster = this.clusters.find(
+            (cluster) => cluster.spec.name === this.$route.params.cluster
+          );
+          this.selectedCluster = {
+            name: selectedCluster.spec.name,
+            displayName: selectedCluster.spec.displayName,
+            provider: selectedCluster.spec.provider,
+            uid: selectedCluster.spec.uid,
+            location: selectedCluster.spec.location,
+          };
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    },
+
+    getProviderIcon(provider) {
+      return this.imagePath[provider] || this.imagePath["default"];
+    },
+  },
+
+  created() {
+    this.getClusters();
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.selectedCluster = n;
+      },
+    },
+    selectClusterOptions: {
+      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);
+          });
+        }
+      },
+    },
+  },
+};
+</script>

package/vue-components/v3/modal/Modal.vue

@@ -37,7 +37,10 @@
         <!-- modal body end  -->
 
         <!-- modal footer start -->
-        <div class="ac-modal-footer action-footer">
+        <div class="ac-modal-footer action-footer is-flex is-align-items-center is-justify-content-space-between">
+          <div>
+            <slot name="modal-footer-left" />
+          </div>
           <buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
           </buttons>

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

@@ -0,0 +1,173 @@
+<template>
+  <div class="is-cluster-logo" v-if="sidebarCollapsed">
+    <img
+      width="40"
+      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      alt=""
+    />
+  </div>
+  <multiselect
+    v-else
+    v-model="selectedCluster"
+    placeholder="Selected Cluster"
+    label="name"
+    track-by="uid"
+    :options="options"
+    :allow-empty="false"
+    deselectLabel=""
+    selectLabel=""
+    selectedLabel=""
+  >
+    <template slot="singleLabel" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        /><span
+          ><span>{{ props.option.displayName }}</span></span
+        >
+      </div>
+    </template>
+    <template slot="option" slot-scope="props">
+      <div class="is-flex is-align-items-center">
+        <img
+          class="mr-15"
+          :src="getProviderIcon(props.option.provider)"
+          alt="No cluster selected"
+        />
+        <div>
+          <p>{{ props.option.displayName }}</p>
+          <p class="location">{{ props.option.location }}</p>
+        </div>
+      </div>
+    </template>
+  </multiselect>
+</template>
+
+<script>
+import { defineComponent, defineAsyncComponent } from "vue";
+export default defineComponent({
+  props: {
+    sidebarCollapsed: {
+      type: Boolean,
+      default: false,
+    },
+    mouseHover: {
+      type: Boolean,
+      default: false,
+    },
+    username: {
+      type: String,
+      default: "",
+    },
+    imagePath: {
+      type: Object,
+      default: () => ({}),
+    },
+    value: {
+      type: Object,
+      default: () => ({}),
+    },
+  },
+
+  components: {
+    Multiselect: () => import("vue-multiselect"),
+  },
+
+  data() {
+    return {
+      selectedCluster: null,
+      clusters: [],
+      options: [],
+    };
+  },
+
+  computed: {
+    selectClusterOptions() {
+      return this.clusters
+        .filter(
+          (cluster) =>
+            cluster.status.phase === "Connected" ||
+            cluster.status.phase === "PrivateConnected"
+        )
+        .map((cluster) => {
+          return {
+            name: cluster.spec.name,
+            displayName: cluster.spec.displayName,
+            provider: cluster.spec.provider,
+            uid: cluster.spec.uid,
+            location: cluster.spec.location,
+          };
+        });
+    },
+  },
+
+  methods: {
+    async checkStatus(clusterName) {
+      try {
+        await this.$axios.get(
+          `/clusters/${this.username}/${clusterName}/status`
+        );
+        return true;
+      } catch (err) {
+        return false;
+      }
+    },
+    async getClusters() {
+      if (this.username) {
+        const url = `/clusters/${this.username}`;
+
+        try {
+          const resp = await this.$axios.get(url);
+          this.clusters = (resp.data && resp.data.items) || [];
+
+          // preselect the cluster
+          const selectedCluster = this.clusters.find(
+            (cluster) => cluster.spec.name === this.$route.params.cluster
+          );
+          this.selectedCluster = {
+            name: selectedCluster.spec.name,
+            displayName: selectedCluster.spec.displayName,
+            provider: selectedCluster.spec.provider,
+            uid: selectedCluster.spec.uid,
+            location: selectedCluster.spec.location,
+          };
+        } catch (e) {
+          console.log(e);
+        }
+      }
+    },
+
+    getProviderIcon(provider) {
+      return this.imagePath[provider] || this.imagePath["default"];
+    },
+  },
+
+  created() {
+    this.getClusters();
+  },
+
+  watch: {
+    value: {
+      deep: true,
+      immediate: true,
+      handler(n) {
+        this.selectedCluster = n;
+      },
+    },
+    selectClusterOptions: {
+      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);
+          });
+        }
+      },
+    },
+  },
+});
+</script>