@appscode/design-system 2.2.66 → 2.2.67

package/package.json

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

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

@@ -1,28 +1,39 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { ref } from "vue";
+import { useClipboard } from "@vueuse/core";
+import AcButton from "../button/Button.vue";
 
 interface Props {
   spacing?: string;
   downloadBtn?: boolean;
+  code?: string;
   copyBtn?: boolean;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   spacing: "pr-48",
   downloadBtn: false,
+  code: "",
   copyBtn: true,
 });
 
-const AcButton = defineAsyncComponent(() => import("@/components/vue-components/v3/button/Button.vue"));
+const source = ref(props.code);
+
+const { copy, copied } = useClipboard({ source, legacy: true });
 </script>
 <template>
   <div class="code-container p-0">
     <pre class="ac-hscrollbar" :class="spacing">
-      <slot name="code"/>
+     {{ 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" />
+      <ac-button
+        v-if="copyBtn"
+        :modifier-classes="'is-primary small-button'"
+        :icon-class="copied ? 'check' : 'copy'"
+        @click="copy()"
+      />
     </div>
   </div>
 </template>

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

@@ -1,32 +1,37 @@
 <script setup lang="ts">
-import { defineAsyncComponent } from "vue";
+import { ref } from "vue";
+import { useClipboard } from "@vueuse/core";
+import AcButton from "../button/Button.vue";
 
 interface Props {
   spacing?: string;
   copyBtn?: boolean;
+  code?: string;
 }
 
-withDefaults(defineProps<Props>(), {
+const props = withDefaults(defineProps<Props>(), {
   spacing: "pr-48",
   copyBtn: true,
+  code: "",
 });
-
-const AcButton = defineAsyncComponent(() => import("@/components/vue-components/v3/button/Button.vue"));
+const source = ref(props.code);
+const { copy, copied } = useClipboard({ source, legacy: true });
 </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"
+        :title="copied ? '' : 'Copy'"
         v-if="copyBtn"
         data-testid="kubeconfig-copy-button"
-        modifier-classes="is-outlined small-button mb-6"
-        icon-class="copy"
+        :modifier-classes="`is-outlined small-button mb-6 `"
+        :icon-class="copied ? 'check' : 'copy'"
+        @click="copy()"
       />
     </div>
     <pre class="ac-hscrollbar is-border-none">
-      <slot name="code"/>
+     {{ code }}
     </pre>
   </div>
 </template>