@appscode/design-system 1.1.0-alpha.8 → 1.1.0-beta.2

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

@@ -1,8 +1,79 @@
+<script setup lang="ts">
+import { defineAsyncComponent, ref, watch } from "vue";
+import type { SelectedClusterType } from "../../types/cluster";
+
+const Multiselect = defineAsyncComponent(() => import("vue-multiselect"));
+
+interface Props {
+  sidebarCollapsed?: boolean;
+  mouseHover?: boolean;
+  clusterOptions?: Array<SelectedClusterType>;
+  modelValue?: string;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  sidebarCollapsed: false,
+  mouseHover: false,
+  clusterOptions: () => [],
+  modelValue: "",
+});
+
+const emit = defineEmits(["update:modelValue"]);
+
+const selectedCluster = ref<SelectedClusterType | null>(null);
+const selectedClusterName = ref<null | string>(null);
+
+const getProviderIcon = (provider: string) => {
+  return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`;
+};
+
+watch(
+  () => props.modelValue,
+  (n) => {
+    selectedClusterName.value = n;
+  },
+  { immediate: true }
+);
+
+watch(selectedCluster, (n) => {
+  if (n) {
+    if (selectedClusterName.value !== n.name) {
+      selectedClusterName.value = n.name;
+    }
+  } else selectedCluster.value = null;
+});
+
+watch(selectedClusterName, (n) => {
+  if (n !== selectedCluster.value?.name) {
+    props.clusterOptions.forEach((item) => {
+      if (selectedClusterName.value === item.name) {
+        selectedCluster.value = item;
+      }
+    });
+  }
+  emit("update:modelValue", n);
+});
+
+watch(
+  () => props.clusterOptions,
+  async (list) => {
+    if (list) {
+      list.forEach((item) => {
+        if (selectedClusterName.value === item.name) {
+          selectedCluster.value = item;
+        }
+      });
+    }
+  },
+  { immediate: true, deep: true }
+);
+</script>
+
 <template>
   <div v-if="sidebarCollapsed" class="is-cluster-logo">
     <img
       width="40"
-      :src="getProviderIcon(selectedCluster && selectedCluster.provider)"
+      :src="getProviderIcon(selectedCluster?.provider || '')"
       onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
       alt="provider-icon"
     />
@@ -25,6 +96,7 @@
           :src="getProviderIcon(props.option.provider)"
           onerror="this.onerror=null;this.src='https://cdn.appscode.com/images/cloud-provider-icons/Generic.png';"
           alt="No cluster selected"
+          class="height-22 mr-8"
         /><span
           ><span>{{ props.option.displayName }}</span></span
         >
@@ -46,88 +118,769 @@
     </template>
   </multiselect>
 </template>
+<style lang="scss">
+.multiselect {
+  margin-top: 3px;
+  // display: flex;
+  // align-items: center;
+  max-width: 350px;
+  // &.cluster-select {
+  //   .multiselect__tags {
+  //     border: 1px solid $primary-90;
+  //     background-color: $table-header;
+
+  //     .multiselect__input {
+  //       background-color: $table-header;
+  //     }
+  //   }
+  // }
+
+  .multiselect__tags {
+    background-color: #e2f0fb;
+    min-height: 36px;
+    // max-height: 36px;
+    font-weight: 500;
+    width: 100%;
+    border-radius: 4px;
+    border: 1px solid $primary-90;
+    padding: 6px 30px 8px 20px;
+    font-size: 13px;
+    border-radius: 4px;
+
+    .multiselect__placeholder {
+      margin: 0;
+      padding: 0;
+      // padding-top: 2px !important;
+      font-weight: 500;
+      font-size: 13px;
+    }
+
+    .multiselect__tags-wrap {
+      display: flex;
+      align-items: center;
+    }
 
-<script>
-  import { defineComponent, defineAsyncComponent } from 'vue'
-  export default defineComponent({
-    components: {
-      Multiselect: defineAsyncComponent(() =>
-        import('vue-multiselect').then((module) => module.default)
-      ),
-    },
-    props: {
-      sidebarCollapsed: {
-        type: Boolean,
-        default: false,
-      },
-      mouseHover: {
-        type: Boolean,
-        default: false,
-      },
-      clusterOptions: {
-        type: Array,
-        default: () => [],
-      },
-      modelValue: {
-        type: String,
-        default: '',
-      },
-    },
-
-    emits: ['update:modelValue'],
-
-    data() {
-      return {
-        selectedCluster: null,
-        selectedClusterName: null,
-      }
-    },
-
-    watch: {
-      modelValue: {
-        immediate: true,
-        handler(n) {
-          this.selectedClusterName = n
-        },
-      },
-      selectedCluster: {
-        deep: true,
-        handler(n) {
-          if (this.selectedClusterName !== n.name) {
-            this.selectedClusterName = n.name
+    .multiselect__tag {
+      background-color: $dark-bg-light;
+      margin-top: 4px;
+      margin-bottom: 0;
+
+      .multiselect__tag-icon {
+        font-size: 12px;
+
+        &::after {
+          color: $white-100;
+        }
+
+        &:hover {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            calc(var(--hsl-lightness) - 9%),
+            1
+          );
+        }
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      background-color: #e2f0fb;
+      margin-bottom: 0;
+      margin: 0 !important;
+      padding-left: 0;
+      left: 0px;
+      // top: 2px;
+      font-size: 13px !important;
+      font-weight: 500;
+      color: $primary-10;
+      line-height: 1.5;
+    }
+
+    .multiselect__single {
+      margin-top: 3px;
+      margin-bottom: 0;
+    }
+  }
+  .multiselect__select {
+    height: 36px;
+  }
+  .multiselect__content {
+    .multiselect__element {
+      .multiselect__option {
+        padding: 4px 16px;
+        min-height: 32px;
+        font-size: 13px;
+        img {
+          width: 30px;
+        }
+        p {
+          font-size: 13px;
+          color: $primary-10;
+        }
+        p:not(.location) {
+          font-weight: 500;
+        }
+        a {
+          display: block;
+          font-weight: 400;
+          margin-top: -12px;
+          margin-bottom: -12px;
+          padding-top: 12px;
+          padding-bottom: 12px;
+        }
+
+        &:hover {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
+          color: $primary;
+        }
+
+        &.multiselect__option--highlight {
+          background-color: hsla(
+            var(--hsl-hue),
+            var(--hsl-saturation),
+            var(--hsl-lightness),
+            0.2
+          );
+          color: $primary;
+
+          &:after {
+            background-color: hsla(
+              var(--hsl-hue),
+              var(--hsl-saturation),
+              var(--hsl-lightness),
+              0.2
+            );
+            color: $primary;
           }
-        },
-      },
-      selectedClusterName(n) {
-        if (n !== this.selectedCluster.name) {
-          this.clusterOptions.forEach((item) => {
-            if (this.selectedClusterName === item.name) {
-              this.selectedCluster = item
-            }
-          })
         }
+      }
+    }
+  }
+}
 
-        this.$emit('update:modelValue', n)
-      },
-      clusterOptions: {
-        deep: true,
-        immediate: true,
-        async handler(list) {
-          if (list) {
-            list.forEach((item) => {
-              if (this.selectedClusterName === item.name) {
-                this.selectedCluster = item
-              }
-            })
+.multi-select-wrapper {
+  &.is-last-child-bold {
+    .multiselect {
+      .multiselect__content {
+        .multiselect__element {
+          &:nth-last-child(-n + 3) {
+            .multiselect__option {
+              font-weight: 500;
+            }
           }
-        },
-      },
-    },
-
-    methods: {
-      getProviderIcon(provider) {
-        return `https://cdn.appscode.com/images/cloud-provider-icons/${provider}.png`
-      },
-    },
-  })
-</script>
+        }
+      }
+    }
+  }
+}
+
+.multiselect__element {
+  span {
+    label {
+      padding-left: 15px !important;
+      font-size: 13px !important;
+      color: $primary-10 !important;
+
+      &:after {
+        position: inherit !important;
+        content: "" !important;
+        background-color: transparent;
+      }
+    }
+  }
+}
+
+.multiselect__input {
+  &::placeholder {
+    color: $primary-20;
+    font-weight: 400;
+    line-height: 1.6;
+    font-size: 13px;
+  }
+}
+
+.multiselect__tags > span {
+  font-size: 13px;
+  line-height: 1.6;
+  color: $primary-10;
+}
+
+.multi-select-wrapper {
+  position: relative;
+  z-index: 0;
+
+  .multiselect--disabled {
+    opacity: unset;
+  }
+
+  &.is-disable {
+    opacity: 0.5;
+    cursor: not-allowed;
+
+    input,
+    .button.is-information,
+    .eye i.fa {
+      cursor: not-allowed;
+    }
+  }
+
+  .multiselect__input {
+    border: none !important;
+  }
+
+  &.has-bg-color {
+    label.show-label {
+      &:after {
+        background-color: $ac-bg;
+      }
+    }
+  }
+
+  &.is-small {
+    label {
+      font-size: 13px;
+      top: 8px;
+
+      &.show-label {
+        font-size: 12px;
+        top: -9px;
+        font-weight: 500;
+        color: $ac-black;
+      }
+    }
+
+    .button.is-information {
+      width: 36px;
+      height: 36px;
+    }
+
+    .multiselect__select {
+      height: 100%;
+    }
+
+    .multiselect__tags {
+      .multiselect__tag {
+        padding: 5px 20px 4px 10px;
+        font-size: 12px;
+      }
+    }
+
+    .multiselect {
+      min-height: auto;
+    }
+
+    .multiselect--active {
+      height: 36px !important;
+      z-index: 50;
+    }
+
+    .multiselect .multiselect__tags {
+      min-height: 36px !important;
+      padding: 4px 30px 4px 20px;
+      font-size: 13px;
+
+      .multiselect__single {
+        font-size: 12px;
+      }
+
+      .multiselect__placeholder {
+        padding: 5px 0 0;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      font-size: 13px !important;
+      font-weight: 500;
+      line-height: 1.5;
+      padding-bottom: 4px;
+
+      &::placeholder {
+        font-weight: 500;
+        line-height: 1.6;
+        font-size: 13px;
+      }
+    }
+  }
+
+  &.is-extra-small {
+    label {
+      font-size: 13px;
+      top: 8px;
+
+      &.show-label {
+        font-size: 12px;
+        top: -9px;
+      }
+    }
+
+    .button.is-information {
+      width: 32px;
+      height: 32px;
+    }
+
+    .multiselect__select {
+      height: 100%;
+    }
+
+    .multiselect__tags {
+      .multiselect__tag {
+        padding: 5px 20px 4px 10px;
+        font-size: 12px;
+      }
+    }
+
+    .multiselect {
+      min-height: auto;
+    }
+
+    .multiselect--active {
+      height: 32px !important;
+      z-index: 50;
+    }
+
+    .multiselect .multiselect__tags {
+      min-height: 32px !important;
+      padding: 3px 30px 4px 20px;
+      font-size: 13px;
+      display: flex;
+      align-items: center;
+      .multiselect__single {
+        font-size: 12px;
+      }
+
+      .multiselect__placeholder {
+        padding: 5px 0 0;
+        font-size: 13px;
+        font-weight: 500;
+      }
+    }
+
+    .multiselect__input,
+    .multiselect__single {
+      font-size: 13px !important;
+      font-weight: 500;
+      line-height: 1.5;
+      padding-bottom: 4px;
+
+      &::placeholder {
+        font-weight: 500;
+        line-height: 1.6;
+        font-size: 13px;
+      }
+    }
+  }
+
+  &.is-danger {
+    input,
+    .ac-card,
+    textarea {
+      border: 1px solid $danger;
+    }
+
+    p {
+      color: $danger;
+    }
+  }
+
+  &.is-loading {
+    input,
+    .ac-card,
+    textarea {
+      border: 1px solid $info;
+      opacity: 0.5;
+    }
+
+    p {
+      color: $info;
+      opacity: 0.5;
+    }
+  }
+
+  .is-error {
+    font-size: 12px;
+    line-height: 22px;
+    color: $danger;
+    text-align: left;
+
+    i.fa {
+      padding-right: 10px;
+    }
+  }
+
+  .multiselect__select {
+    height: calc(100% - 2px);
+    border-radius: 0 4px 4px 0;
+    background-color: transparent !important;
+  }
+
+  label {
+    font-size: 16px;
+    left: 20px;
+    top: 11px;
+    cursor: text;
+    color: $ac-label-text;
+    position: absolute;
+    z-index: 99;
+    transition: 0.3s ease-in-out;
+
+    .is-required {
+      img {
+        position: absolute;
+        top: 7px;
+        padding-left: 3px;
+      }
+    }
+
+    &.show-label {
+      top: -10px;
+      left: 15px;
+      padding: 0 5px;
+      font-size: 13px;
+      color: $ac-black;
+
+      &::after {
+        background-color: $white-100;
+      }
+    }
+
+    &:after {
+      position: absolute;
+      content: "";
+      left: 0;
+      top: 50%;
+      background-color: $white-100;
+      width: 100%;
+      height: 2px;
+      margin-top: -1px;
+      z-index: -1;
+    }
+
+    &.is-required {
+      &:after {
+        width: calc(100% + 10px);
+      }
+    }
+  }
+}
+li {
+  .multiselect__option {
+    font-size: 13px;
+    color: $primary-10;
+  }
+}
+.multiselect__option--selected {
+  label {
+    right: 30px;
+  }
+}
+.multi-select-wrapper.is-small {
+  .multiselect .multiselect__tags {
+    .multiselect__input,
+    .multiselect__single {
+      top: 3.5px !important;
+    }
+  }
+  .multiselect .multiselect__tags .multiselect__placeholder {
+    padding-top: 3.5px !important;
+  }
+}
+// has info button start
+.multi-select-wrapper {
+  &.has-info-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    &.has-refresh-button {
+      .multiselect__select {
+        z-index: 99;
+        right: 60px;
+      }
+      .button {
+        &.is-refresh {
+          right: 30px;
+        }
+      }
+    }
+    .button {
+      &.is-information {
+        right: 0;
+      }
+    }
+  }
+  &.has-refresh-button {
+    .multiselect__select {
+      z-index: 99;
+      right: 30px;
+    }
+    .button {
+      &.is-refresh {
+        right: 0;
+      }
+    }
+  }
+
+  .button {
+    &.is-information,
+    &.is-refresh {
+      background-color: transparent;
+      border: none;
+      position: absolute;
+      height: 36px;
+      width: 36px;
+      z-index: 90;
+      margin-top: 0;
+
+      &:focus {
+        outline: none;
+        box-shadow: none;
+        background-color: #e4e8ef;
+        transform: scale(0.8);
+      }
+    }
+    &.is-refresh.spin {
+      i {
+        animation: spin 1s linear infinite;
+      }
+    }
+  }
+}
+
+@-moz-keyframes spin {
+  from {
+    -moz-transform: rotate(0deg);
+  }
+  to {
+    -moz-transform: rotate(360deg);
+  }
+}
+@-webkit-keyframes spin {
+  from {
+    -webkit-transform: rotate(0deg);
+  }
+  to {
+    -webkit-transform: rotate(360deg);
+  }
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+// has info button end
+
+// dark theme start
+.is-dark-theme {
+  .multiselect__content-wrapper {
+    background: var(--dark-bg-light);
+    border: 1px solid $primary-90;
+
+    // scroll
+    &::-webkit-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-moz-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-ms-scrollbar {
+      border-radius: 50px;
+      width: 3px;
+    }
+
+    &::-webkit-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-moz-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-ms-scrollbar:hover {
+      width: 7px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background-color: $dark-bg-light;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-moz-scrollbar-thumb {
+      background-color: $dark-bg-light;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-ms-scrollbar-thumb {
+      background-color: $dark-bg-light;
+      border-radius: 50px;
+      height: 2px !important;
+    }
+
+    &::-webkit-scrollbar-thumb:hover {
+      background-color: $dark-bg-light;
+    }
+
+    &::-moz-scrollbar-thumb:hover {
+      background-color: $dark-bg-light;
+    }
+
+    &::-ms-scrollbar-thumb:hover {
+      background-color: $dark-bg-light;
+    }
+
+    &:hover::-webkit-scrollbar-corner {
+      height: 40px;
+    }
+
+    &:hover::-moz-scrollbar-corner {
+      height: 40px;
+    }
+
+    &:hover::-ms-scrollbar-corner {
+      height: 40px;
+    }
+
+    // scroll
+
+    .multiselect__option--selected {
+      background: var(--dark-bg);
+      color: var(--ac-white-text);
+    }
+  }
+
+  .multi-select-wrapper {
+    background: var(--dark-bg-light);
+
+    .multiselect__content-wrapper {
+      background-color: var(--dark-bg-light);
+      background: var(--dark-bg-light);
+
+      // scroll
+      &::-webkit-scrollbar {
+        border-radius: 50px;
+        width: 3px;
+      }
+
+      &::-moz-scrollbar {
+        border-radius: 50px;
+        width: 3px;
+      }
+
+      &::-ms-scrollbar {
+        border-radius: 50px;
+        width: 3px;
+      }
+
+      &::-webkit-scrollbar:hover {
+        width: 7px;
+      }
+
+      &::-moz-scrollbar:hover {
+        width: 7px;
+      }
+
+      &::-ms-scrollbar:hover {
+        width: 7px;
+      }
+
+      &::-webkit-scrollbar-thumb {
+        background-color: $dark-bg-light;
+        border-radius: 50px;
+        height: 2px !important;
+      }
+
+      &::-moz-scrollbar-thumb {
+        background-color: $dark-bg-light;
+        border-radius: 50px;
+        height: 2px !important;
+      }
+
+      &::-ms-scrollbar-thumb {
+        background-color: $dark-bg-light;
+        border-radius: 50px;
+        height: 2px !important;
+      }
+
+      &::-webkit-scrollbar-thumb:hover {
+        background-color: $dark-bg-light;
+      }
+
+      &::-moz-scrollbar-thumb:hover {
+        background-color: $dark-bg-light;
+      }
+
+      &::-ms-scrollbar-thumb:hover {
+        background-color: $dark-bg-light;
+      }
+
+      &:hover::-webkit-scrollbar-corner {
+        height: 40px;
+      }
+
+      &:hover::-moz-scrollbar-corner {
+        height: 40px;
+      }
+
+      &:hover::-ms-scrollbar-corner {
+        height: 40px;
+      }
+
+      // scroll
+
+      .multiselect__content .multiselect__element .multiselect__option {
+        color: var(--ac-white-text);
+      }
+
+      .multiselect__option--group {
+        color: var(--ac-white-text);
+        background-color: var(--dark-bg-light);
+      }
+
+      .multiselect__option--selected {
+        color: var(--ac-white-text);
+        background-color: var(--dark-bg-light);
+      }
+    }
+  }
+}
+// dark theme end
+/****************************************
+Responsive Classes
+*****************************************/
+// Extra small devices (portrait phones, less than 576px)
+@media (max-width: 575.98px) {
+}
+
+// Small devices (landscape phones, 576px and up)
+@media (min-width: 576px) and (max-width: 767.98px) {
+}
+
+// Medium devices (tablets, 768px and up)
+@media (min-width: 768px) and (max-width: 991.98px) {
+}
+
+// Large devices (desktops, 992px and up)
+@media (min-width: 992px) and (max-width: 1199.98px) {
+}
+
+// Extra large devices (large desktops, 1200px and up)
+@media (min-width: 1200px) {
+}
+</style>