@appscode/design-system 2.2.66 → 2.3.0

package/main.scss

@@ -22,6 +22,7 @@
 @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/form-fields/custom-selectbox";
 @import "@/components/vue-components/styles/components/ui-builder/vue-open-api";
 @import "@/components/vue-components/styles/components/ui-builder/ui-builder";
-// @import "@/components/vue-components/styles/theme/appscode.scss";
+// @import "@/components/vue-components/styles/theme/appscode.scss";

package/package.json

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

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

@@ -5,6 +5,7 @@
 @import "mixin";
 @import "extended";
 @import "global";
+@import "animation";
 @import "grid";
 @import "spacing";
 @import "layouts";

package/vue-components/styles/base/utilities/_animation.scss

@@ -0,0 +1,11 @@
+.is-spin {
+  animation: spin 1000ms linear infinite;
+}
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

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

@@ -1,6 +1,7 @@
 @import "input";
+@import "custom-selectbox";
 @import "check-radio-switch";
 @import "file-upload";
 @import "image-upload";
 @import "input-card";
-@import "form-footer";
+@import "form-footer";

package/vue-components/styles/components/form-fields/_custom-selectbox.scss

@@ -0,0 +1,135 @@
+.is-selectbox {
+  position: relative;
+  z-index: 9;
+
+  input[type="text"] {
+    padding-right: 32px;
+  }
+
+  &.is-extra-small {
+    .buttons {
+      .button {
+        height: 28px;
+      }
+    }
+  }
+
+  .ac-field {
+    position: absolute;
+    top: 7px;
+    left: 12px;
+    width: calc(100% - 15px);
+  }
+
+  &.is-open {
+    .options {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+  .buttons {
+    position: absolute;
+    gap: 0;
+    right: 2px;
+    top: 2px;
+    margin: 0;
+
+    .button {
+      margin: 0 !important;
+      color: #616161 !important;
+      padding: 0;
+      width: 32px;
+      height: 32px;
+    }
+  }
+
+  .options {
+    border: 1px solid $color-border;
+    box-shadow: $ac-shadow-1;
+    background-color: $white-100;
+    border-radius: 4px;
+    padding: 2px;
+    position: absolute;
+    width: 100%;
+    max-height: 500px;
+    overflow-y: auto;
+    transition: 0.3s ease-in-out;
+    opacity: 0;
+    visibility: hidden;
+
+    input[type="checkbox"] {
+      width: 16px;
+      height: 16px;
+    }
+
+    label {
+      position: inherit;
+    }
+
+    &.group {
+      li {
+        display: block;
+
+        ul {
+          li {
+            display: flex;
+
+            &:hover:not(.is-active) {
+              background-color: $primary-light-gray;
+              color: $color-heading;
+
+              label {
+                color: $color-heading;
+              }
+            }
+          }
+        }
+      }
+    }
+
+    li {
+      display: flex;
+      align-items: center;
+      padding: 6px 12px;
+      border-radius: 4px;
+      gap: 8px;
+      cursor: pointer;
+      transition: 0.2s ease-in-out;
+      color: $color-text;
+
+      label {
+        color: $color-text;
+        cursor: pointer;
+      }
+
+      &:hover:not(.group li, .is-active) {
+        background-color: $primary-light-gray;
+        color: $color-heading;
+
+        label {
+          color: $color-heading;
+        }
+      }
+
+      strong {
+        color: $color-heading;
+        font-weight: 500;
+      }
+
+      &.is-active {
+        background-color: $ac-primary;
+        color: $white-100;
+
+        label {
+          color: $white-100;
+        }
+      }
+
+      &.is-disabled {
+        opacity: 0.6;
+        cursor: not-allowed;
+      }
+    }
+  }
+}

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>

package/vue-components/v3/form-fields/CustomSelect.vue

@@ -0,0 +1,122 @@
+<script setup lang="ts">
+import { defineAsyncComponent } from "vue";
+
+interface prop {
+  multiselect?: boolean;
+  custom?: boolean;
+  group?: boolean;
+  isOpen?: boolean;
+}
+
+withDefaults(defineProps<prop>(), {
+  multiselect: false,
+  custom: false,
+  isOpen: false,
+});
+
+const AcButtons = defineAsyncComponent(() => import("../button/Buttons.vue"));
+const AcButton = defineAsyncComponent(() => import("../button/Button.vue"));
+
+const ArrowDownIcon = defineAsyncComponent(() => import("../icons/ArrowDownIcon.vue"));
+const RefreshIcon = defineAsyncComponent(() => import("../icons/RefreshIcon.vue"));
+const CloseIcon = defineAsyncComponent(() => import("../icons/CloseIcon.vue"));
+</script>
+
+<template>
+  <!-- add dynamic 'z-index', use 'is-open' for show hide options -->
+  <div class="ac-single-input is-small is-selectbox" :class="[isOpen ? 'is-open' : '']" style="z-index: 2">
+    <!-- add 'show-label' class for move top -->
+    <label for="custom-select" class="ac-label show-label">Select Option</label>
+    <input type="text" value="Select" />
+
+    <div v-if="multiselect" class="ac-field field is-grouped is-clipped">
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-primary is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-info is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-secondary is-light">Alex Smith</span>
+          <a class="tag is-delete"></a>
+        </div>
+      </div>
+
+      <div class="control">
+        <div class="tags has-addons">
+          <span class="tag is-primary is-clickable">+3</span>
+        </div>
+      </div>
+    </div>
+
+    <ac-buttons>
+      <button class="button ac-button is-white">
+        <ArrowDownIcon />
+      </button>
+
+      <ac-button modifier-classes="is-white">
+        <RefreshIcon class="is-spin" />
+      </ac-button>
+
+      <ac-button modifier-classes="is-white">
+        <CloseIcon style="rotate: 180deg" />
+      </ac-button>
+    </ac-buttons>
+
+    <ul v-if="group" class="options group">
+      <li v-for="i in 2" :key="i">
+        <strong>Group one</strong>
+        <ul>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-five" />
+            <label for="opt-five">Select option five</label>
+          </li>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-six" checked />
+            <label for="opt-six">Select option six</label>
+          </li>
+          <li class="is-disabled">
+            <input v-if="multiselect" type="checkbox" name="" id="opt-seven" />
+            <label for="opt-seven">Select option seven</label>
+          </li>
+          <li>
+            <input v-if="multiselect" type="checkbox" name="" id="opt-eight" />
+            <label for="opt-eight">Select option eight</label>
+          </li>
+        </ul>
+      </li>
+    </ul>
+    <div v-else-if="custom" class="custom-select options">
+      <slot />
+    </div>
+
+    <ul v-else class="options">
+      <li>
+        <input v-if="multiselect" type="checkbox" name="" id="opt-one" />
+        <label for="opt-one">Select option one</label>
+      </li>
+      <li class="is-active">
+        <input v-if="multiselect" type="checkbox" name="" id="opt-two" />
+        <label for="opt-two">Select option Two</label>
+      </li>
+      <li class="is-disabled">
+        <input v-if="multiselect" type="checkbox" name="" id="opt-three" />
+        <label for="opt-three">Select option three</label>
+      </li>
+      <li>
+        <input v-if="multiselect" type="checkbox" name="" id="opt-four" />
+        <label for="opt-four">Select option four</label>
+      </li>
+    </ul>
+  </div>
+  <!-- <single-input /> -->
+</template>

package/vue-components/v3/form-fields/ListInputField.vue

@@ -0,0 +1,118 @@
+<template>
+  <div>
+    <div class="input-container">
+      <AcInput v-model="newItem" @keyup.enter="addItem" :placeholderText="placeholderText" class="input-field" />
+      <AcButton @click="addItem">Add</AcButton>
+    </div>
+    <transition-group name="list" tag="ul" class="item-list">
+      <li v-for="(item, index) in items" :key="item" class="list-item">
+        <span>{{ item }}</span>
+        <AcButton @click="removeItem(index)" class="remove-button">&times;</AcButton>
+      </li>
+    </transition-group>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref } from "vue";
+import AcInput from "./AcInput.vue";
+import AcButton from "../button/Button.vue";
+
+withDefaults(
+  defineProps<{
+    placeholderText?: string;
+  }>(),
+  { placeholderText: "Enter a New Item" }
+);
+
+const newItem = ref("");
+const items = ref<string[]>([]);
+
+const emit = defineEmits<{
+  (e: "update:items", value: string[]): void;
+}>();
+
+const addItem = () => {
+  if (newItem.value.trim()) {
+    items.value.unshift(newItem.value.trim());
+    newItem.value = "";
+    emit("update:items", items.value);
+  }
+};
+
+const removeItem = (index: number) => {
+  items.value.splice(index, 1);
+  emit("update:items", items.value);
+};
+</script>
+
+<style scoped>
+.title {
+  color: #2c3e50;
+  text-align: center;
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.input-field {
+  border-radius: 8px;
+  transition: border-color 0.3s;
+  margin-right: 8px;
+  width: 100%;
+}
+.input-container {
+  display: flex;
+}
+
+.item-list {
+  list-style-type: none;
+  padding: 0;
+}
+
+.list-item {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 12px;
+  background-color: #ecf0f1;
+  margin-bottom: 12px;
+  border-radius: 8px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: all 0.3s;
+}
+
+.list-item:hover {
+  background-color: #e0e6e8;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+}
+
+.remove-button {
+  background-color: #e74c3c;
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 30px;
+  height: 30px;
+  font-size: 18px;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: background-color 0.3s;
+}
+
+.remove-button:hover {
+  background-color: #c0392b;
+}
+
+.list-enter-active,
+.list-leave-active {
+  transition: all 0.5s;
+}
+.list-enter,
+.list-leave-to {
+  opacity: 0;
+  transform: translateY(30px);
+}
+</style>

package/vue-components/v3/icons/ArrowDownIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="16px"
+    height="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="M6 18 18 6M6 6l12 12" />
+  </svg>
+</template>

package/vue-components/v3/icons/CloseIcon.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    height="16px"
+    width="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path stroke-linecap="round" stroke-linejoin="round" d="m19.5 8.25-7.5 7.5-7.5-7.5" />
+  </svg>
+</template>

package/vue-components/v3/icons/RefreshIcon.vue

@@ -0,0 +1,18 @@
+<template>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    fill="none"
+    width="16px"
+    height="16px"
+    viewBox="0 0 24 24"
+    stroke-width="1.5"
+    stroke="currentColor"
+    class="size-6"
+  >
+    <path
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      d="M16.023 9.348h4.992v-.001M2.985 19.644v-4.992m0 0h4.992m-4.993 0 3.181 3.183a8.25 8.25 0 0 0 13.803-3.7M4.031 9.865a8.25 8.25 0 0 1 13.803-3.7l3.181 3.182m0-4.991v4.99"
+    />
+  </svg>
+</template>