@appscode/design-system 2.2.62 → 2.2.64

package/main.scss

@@ -20,6 +20,7 @@
 // @import "@/components/vue-components/styles/components/all";
 @import "@/components/vue-components/styles/components/button";
 @import "@/components/vue-components/styles/components/terminal";
+@import "@/components/vue-components/styles/components/code-preview/all";
 @import "@/components/vue-components/styles/components/form-fields/input";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";

package/package.json

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

package/vue-components/styles/components/_all.scss

@@ -2,6 +2,7 @@
 @import "alert/all";
 @import "cards/all";
 @import "content/all";
+@import "code-preview/all";
 @import "editor/all";
 @import "form-fields/all";
 @import "header/all";

package/vue-components/styles/components/code-preview/_all.scss

@@ -0,0 +1 @@
+@import "./_code-preview.scss";

package/vue-components/styles/components/code-preview/_code-preview.scss

@@ -0,0 +1,42 @@
+.code-container {
+  position: relative;
+  z-index: 1;
+  &:has(.head) {
+    &::after {
+      display: none;
+    }
+    pre {
+      border-radius: 0px;
+    }
+  }
+
+  pre {
+    border-radius: 4px;
+    border: 1px solid $color-border;
+    font-size: 12px;
+    white-space: normal;
+  }
+
+  .buttons {
+    position: relative;
+
+    &:not(.head .buttons) {
+      position: absolute;
+      content: "";
+      right: 8px;
+      top: 8px;
+      z-index: 3;
+      &:after {
+        position: absolute;
+        content: "";
+        right: -7px;
+        top: -7px;
+        width: 100%;
+        height: 40px;
+        border-radius: 4px;
+        background-color: #f5f5f5;
+        z-index: -1;
+      }
+    }
+  }
+}

package/vue-components/styles/components/header/_header.scss

@@ -3,5 +3,5 @@
   border-bottom: 1px solid $color-border;
   position: sticky;
   background: $white-100;
-  z-index: 99;
+  z-index: 999;
 }

package/vue-components/v3/code-preview/CodeBlock.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface Props {
+  spacing?: string;
+  downloadBtn?: boolean;
+  copyBtn?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  spacing: "pr-48",
+  downloadBtn: false,
+  copyBtn: true,
+});
+
+const AcButton = defineAsyncComponent(() => import("@/components/vue-components/v3/button/Button.vue"));
+</script>
+<template>
+  <div class="code-container p-0">
+    <pre class="ac-hscrollbar" :class="spacing">
+      <slot name="code"/>
+    </pre>
+    <div class="buttons">
+      <ac-button v-if="downloadBtn" modifier-classes="is-primary small-button" icon-class="download" />
+      <ac-button v-if="copyBtn" modifier-classes="is-primary small-button" icon-class="copy" />
+    </div>
+  </div>
+</template>

package/vue-components/v3/code-preview/CodeGroup.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface Props {
+  spacing?: string;
+  copyBtn?: boolean;
+}
+
+withDefaults(defineProps<Props>(), {
+  spacing: "pr-48",
+  copyBtn: true,
+});
+
+const AcButton = defineAsyncComponent(() => import("@/components/vue-components/v3/button/Button.vue"));
+</script>
+<template>
+  <div class="code-container p-0 b-1 is-rounded-4">
+    <div class="head is-flex is-justify-content-space-between is-align-items-center pt-7 px-4 b-b-1">
+      <div><slot name="left" /></div>
+      <ac-button
+        title="Copy"
+        v-if="copyBtn"
+        data-testid="kubeconfig-copy-button"
+        modifier-classes="is-outlined small-button mb-6"
+        icon-class="copy"
+      />
+    </div>
+    <pre class="ac-hscrollbar is-border-none">
+      <slot name="code"/>
+    </pre>
+  </div>
+</template>

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

@@ -1,5 +1,6 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import DialogModal from "./DialogModal.vue";
+import AcButton from "./../button/Button.vue";
 
 interface Props {
   title?: string;
@@ -23,24 +24,25 @@ withDefaults(defineProps<Props>(), {
   hideActionFooter: false,
 });
 
-defineEmits(["onDelete"]);
+const emit = defineEmits(["onDelete", "onCloseModal"]);
 
 const open = defineModel({ type: Boolean });
 
-const Modal = defineAsyncComponent(() => import("./DialogModal.vue"));
-const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
+function onClose() {
+  open.value = false;
+  emit("onCloseModal");
+}
 </script>
 
 <template>
-  <!-- modal start  -->
-
-  <modal
+  <dialog-modal
     v-model="open"
     :title="title"
     :class="modifierClasses"
     :hide-action-footer="hideActionFooter"
     :disable-modal-close="disableModalClose"
     :ignore-outside-click="ignoreOutsideClick"
+    @onCloseModal="$emit('onCloseModal')"
   >
     <!-- freedom content start  -->
     <div class="action-message pt-35 pb-35 has-text-centered">
@@ -54,20 +56,19 @@ const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
     <!-- modal footer start -->
     <template #modal-footer-controls>
       <ac-button
-        @click.stop="open = false"
         title="Cancel"
         modifier-classes="is-outlined"
-        :disabled="isDeleteActive || disableModalClose"
         data-testid="delete-confirmation-modal-close-button"
+        :disabled="isDeleteActive || disableModalClose"
+        @click.stop="onClose"
       />
       <ac-button
         title="Yes"
         modifier-classes="is-danger"
+        data-testid="delete-confirmation-modal-confirm-button"
         :is-loader-active="isDeleteActive"
         @click.stop="$emit('onDelete', itemName)"
-        data-testid="delete-confirmation-modal-confirm-button"
       />
     </template>
-  </modal>
-  <!-- modal end  -->
+  </dialog-modal>
 </template>

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

@@ -21,6 +21,8 @@ const dialogModal = ref<HTMLDialogElement | null>(null);
 
 const model = defineModel({ type: Boolean });
 
+const emit = defineEmits(["onCloseModal"]);
+
 const onKeyDown = (e: KeyboardEvent) => {
   if (model.value && e.keyCode === 27) {
     destroyModal();
@@ -36,6 +38,7 @@ const destroyModal = () => {
   if (props.disableModalClose) return;
   model.value = false;
   document.removeEventListener("keydown", onKeyDown);
+  emit("onCloseModal");
 };
 
 watch(

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

@@ -1,7 +1,12 @@
 <script setup lang="ts">
-import { defineAsyncComponent, ref, watch } from "vue";
+import { ref, watch } from "vue";
 import { onClickOutside } from "@vueuse/core";
 
+import HeaderItems from "./../header/HeaderItems.vue";
+import HeaderItem from "./../header/HeaderItem.vue";
+import AcButton from "./../button/Button.vue";
+import AcButtons from "./../button/Buttons.vue";
+
 interface Props {
   open?: boolean;
   title?: string;
@@ -22,11 +27,6 @@ const props = withDefaults(defineProps<Props>(), {
 
 const emit = defineEmits(["closemodal"]);
 
-const HeaderItems = defineAsyncComponent(() => import("./../header/HeaderItems.vue"));
-const HeaderItem = defineAsyncComponent(() => import("./../header/HeaderItem.vue"));
-const Buttons = defineAsyncComponent(() => import("./../button/Buttons.vue"));
-const AcButton = defineAsyncComponent(() => import("./../button/Button.vue"));
-
 //TODO: need to update not a currect way to import the file
 const modalCloseIcon = import.meta.glob("../../../icons/close-icon.svg", {
   eager: true,
@@ -72,14 +72,12 @@ watch(
       destroyModal();
     }
   },
-  { immediate: true }
+  { immediate: true },
 );
 </script>
 
 <template>
   <teleport to="#modals">
-    <!-- for transition https://github.com/adamwathan/vue-tailwind-examples/blob/master/src/components/Modal.vue -->
-    <!-- modal start  -->
     <div v-if="showModal" class="ac-modal is-middle-alignment" :class="modifierClasses">
       <div ref="modal" class="ac-modal-inner">
         <!-- modal header start  -->
@@ -118,9 +116,9 @@ watch(
           <div>
             <slot name="modal-footer-left" />
           </div>
-          <buttons class="has-text-right is-block">
+          <ac-buttons class="has-text-right is-block">
             <slot name="modal-footer-controls" />
-          </buttons>
+          </ac-buttons>
           <!-- modal footer end -->
         </div>
       </div>